-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(code-connect): Connect AILabel (#17334)
* 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
authored
Sep 10, 2024
1 parent
a516277
commit f01d544
Showing
10 changed files
with
154 additions
and
16 deletions.
There are no files selected for viewing
Binary file renamed
BIN
+183 KB
...nnect-npm-1.0.4-5b7b3be79e-a412e63774.zip → ...nnect-npm-1.0.6-db319a49b3-952cf06f6a.zip
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
22
packages/react/code-connect/AILabel/AILabelActions.figma.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
64
packages/react/code-connect/AILabel/AILabelContent.figma.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ), | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters