Skip to content

Commit

Permalink
feat(code-connect): Connect AILabel (#17334)
Browse files Browse the repository at this point in the history
* fix(code-connect): small fixes and latest version bump

* chore: cleanup code comments

* feat(code-connect): ailabel and ailabelcontent

* chore: revert story change

* chore: cleanup

* chore: yarn dedupe

---------

Co-authored-by: Taylor Jones <taylor.jones826@gmail.com>
Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com>
  • Loading branch information
3 people committed Sep 10, 2024
1 parent a516277 commit f01d544
Show file tree
Hide file tree
Showing 10 changed files with 154 additions and 16 deletions.
Binary file not shown.
Binary file not shown.
Binary file not shown.
51 changes: 51 additions & 0 deletions packages/react/code-connect/AILabel/AILabel.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { AILabel } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
AILabel,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=51447-1916&t=9XaizJDx8eI6KgQz-4',
{
props: {
aiText: figma.string('Text translation'),
size: figma.enum('Size', {
'16px': 'mini',
'20px': '2xs',
'24px': 'xs',
'32px': 'sm',
'40px': 'md',
'48px': 'lg',
'64px': 'xl',
}),
},
example: ({ ...props }) => <AILabel autoAlign {...props} />,
}
);

// inline
figma.connect(
AILabel,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=51447-2035&t=9XaizJDx8eI6KgQz-4',
{
props: {
aiText: figma.string('Text translation'),
textLabel: figma.enum('Type', {
'Text + Icon': figma.string('Slug text'),
}),
size: figma.enum('Size', {
'12px': 'sm',
'14px': 'md',
'16px': 'lg',
}),
},
example: ({ ...props }) => <AILabel autoAlign kind="inline" {...props} />,
}
);
22 changes: 22 additions & 0 deletions packages/react/code-connect/AILabel/AILabelActions.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { AILabelActions } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
AILabelActions,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=57561-3559&t=SB9qULZbn3FRopvU-4',
{
props: {
children: figma.children('*'),
},
example: ({ children }) => <AILabelActions>{children}</AILabelActions>,
}
);
64 changes: 64 additions & 0 deletions packages/react/code-connect/AILabel/AILabelContent.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/**
* Copyright IBM Corp. 2016, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

// @ts-nocheck
import React from 'react';
import { AILabelContent } from '@carbon/react';
import figma from '@figma/code-connect';

figma.connect(
AILabelContent,
'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=57561-3508&t=SB9qULZbn3FRopvU-4',
{
props: {
title: figma.string('AI title'),
description: figma.string('AI description'),
slotOne: figma.boolean('Slot 1', {
true: figma.instance('Swap slot 1'),
false: '',
}),
slotTwo: figma.boolean('Slot 2', {
true: figma.instance('Swap slot 2'),
}),
slotThree: figma.boolean('Slot 3', {
true: figma.instance('Swap slot 3'),
}),
slotFour: figma.boolean('Slot 4', {
true: figma.instance('Swap slot 4'),
}),
actions: figma.children(['Actions footer']),
},
example: ({
title,
description,
slotOne,
slotTwo,
slotThree,
slotFour,
actions,
}) => (
<AILabelContent>
{slotOne}
<div>
<p>AI Explained</p>
<h1>{title}</h1>
<p>{description}</p>
{slotOne}
<hr />
{slotTwo}
<p>
This is sample placeholder content, replace with your own content
and custom styles.
</p>
{slotThree}
{slotFour}
</div>
{actions}
</AILabelContent>
),
}
);
9 changes: 5 additions & 4 deletions packages/react/code-connect/Tabs/Tabs.figma.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* LICENSE file in the root directory of this source tree.
*/

/* eslint-disable react/jsx-no-duplicate-props */
// @ts-nocheck
import React from 'react';
import {
Expand Down Expand Up @@ -34,12 +33,14 @@ figma.connect(
size: figma.enum('Size', {
Large: 'lg',
}),
dismissable: figma.boolean('Dismissible'),
dismissablePlusIcon: figma.boolean('Dismissible + Icon'),
dismissable: figma.boolean('Dismissible', {
true: true,
false: figma.boolean('Dismissible + Icon'),
}),
}),
},
example: ({ children, contained, fullWidth, tab }) => (
<Tabs dismissable={tab.dismissable} dismissable={tab.dismissablePlusIcon}>
<Tabs dismissable={tab.dismissable}>
<TabList
aria-label="List of tabs"
contained={contained}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/code-connect/Tooltip/Tooltip.figma.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ figma.connect(
openOnHover
definition={tooltip.definition}
align={align}>
{tooltip.children}
{item.children}
</DefinitionTooltip>
),
}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"@babel/preset-typescript": "^7.24.7",
"@carbon/test-utils": "^10.32.0-rc.0",
"@carbon/themes": "^11.40.0-rc.0",
"@figma/code-connect": "^1.0.4",
"@figma/code-connect": "^1.0.6",
"@rollup/plugin-babel": "^6.0.0",
"@rollup/plugin-commonjs": "^26.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
Expand Down
20 changes: 10 additions & 10 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2021,7 +2021,7 @@ __metadata:
"@carbon/styles": "npm:^1.65.0-rc.0"
"@carbon/test-utils": "npm:^10.32.0-rc.0"
"@carbon/themes": "npm:^11.40.0-rc.0"
"@figma/code-connect": "npm:^1.0.4"
"@figma/code-connect": "npm:^1.0.6"
"@floating-ui/react": "npm:^0.26.0"
"@ibm/telemetry-js": "npm:^1.5.0"
"@rollup/plugin-babel": "npm:^6.0.0"
Expand Down Expand Up @@ -3066,16 +3066,16 @@ __metadata:
languageName: node
linkType: hard

"@figma/code-connect@npm:^1.0.4":
version: 1.0.4
resolution: "@figma/code-connect@npm:1.0.4"
"@figma/code-connect@npm:^1.0.6":
version: 1.0.6
resolution: "@figma/code-connect@npm:1.0.6"
dependencies:
"@babel/core": "npm:^7.24.7"
"@babel/generator": "npm:^7.24.7"
"@babel/parser": "npm:^7.24.7"
"@babel/types": "npm:^7.24.7"
"@storybook/csf-tools": "npm:^7.6.7"
axios: "npm:^1.6.0"
axios: "npm:^1.7.4"
boxen: "npm:5.1.1"
chalk: "npm:^4.1.2"
commander: "npm:^11.1.0"
Expand All @@ -3096,7 +3096,7 @@ __metadata:
zod-validation-error: "npm:^3.2.0"
bin:
figma: bin/figma
checksum: 10/a412e637748513ae64888032c62856a34680581ad4bfb03e4b03a37eee41b13b9b3d43df1cb74c2d9ec8dcf0c6ac82b72a22da5655e21f91a832e5b5bef2adcf
checksum: 10/952cf06f6a7e792cc41ca3e208ceb4d926823039882d208c074312bad817be0c4fbdd0dfbd38ac71f34e82eb3a0f6254678bf73bd5a2644823f13e2e37c31948
languageName: node
linkType: hard

Expand Down Expand Up @@ -8227,14 +8227,14 @@ __metadata:
languageName: node
linkType: hard

"axios@npm:^1.4.0, axios@npm:^1.5.1, axios@npm:^1.6.0":
version: 1.7.3
resolution: "axios@npm:1.7.3"
"axios@npm:^1.4.0, axios@npm:^1.5.1, axios@npm:^1.7.4":
version: 1.7.5
resolution: "axios@npm:1.7.5"
dependencies:
follow-redirects: "npm:^1.15.6"
form-data: "npm:^4.0.0"
proxy-from-env: "npm:^1.1.0"
checksum: 10/7f92af205705a8fb4a9d35666b663729507657f252a1d39d83582590119941872d49078017cf992e32f47aa3b7317f5439f77be772a173dac2ae0fedd38f43ae
checksum: 10/6cbcfe943a84089f420a900a3a3aeb54ee94dcc9c2b81b150434896357be5d1079eff0b1bbb628597371e79f896b1bc5776df04184756ba99656ff31df9a75bf
languageName: node
linkType: hard

Expand Down

0 comments on commit f01d544

Please sign in to comment.