diff --git a/.yarn/cache/@figma-code-connect-npm-1.0.2-c160202f86-28de9e3070.zip b/.yarn/cache/@figma-code-connect-npm-1.0.2-c160202f86-28de9e3070.zip deleted file mode 100644 index 27df4622d5b9..000000000000 Binary files a/.yarn/cache/@figma-code-connect-npm-1.0.2-c160202f86-28de9e3070.zip and /dev/null differ diff --git a/.yarn/cache/@figma-code-connect-npm-1.0.4-5b7b3be79e-a412e63774.zip b/.yarn/cache/@figma-code-connect-npm-1.0.4-5b7b3be79e-a412e63774.zip new file mode 100644 index 000000000000..7adfe3bc42c7 Binary files /dev/null and b/.yarn/cache/@figma-code-connect-npm-1.0.4-5b7b3be79e-a412e63774.zip differ diff --git a/packages/react/code-connect/ComboBox/ComboBox.figma.tsx b/packages/react/code-connect/ComboBox/ComboBox.figma.tsx new file mode 100644 index 000000000000..c3ece1c0c426 --- /dev/null +++ b/packages/react/code-connect/ComboBox/ComboBox.figma.tsx @@ -0,0 +1,92 @@ +/** + * 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 { ComboBox, DropdownSkeleton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + ComboBox, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-290976&t=5acDGCinwyrs5Bbc-4', + { + props: { + placeholder: figma.string('Filter text'), + helperText: figma.boolean('Show helper', { + true: figma.string('Helper text'), + }), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + titleText: figma.string('Label text'), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error message'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning message'), + }, + example: ({ ...props }) => { + const items = [ + { + id: 'option-0', + text: 'Option 0', + }, + { + id: 'option-1', + text: 'Option 1', + }, + ]; + + return ( + {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + {...props} + /> + ); + }, + } +); + +figma.connect( + DropdownSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-290976&t=5acDGCinwyrs5Bbc-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + }, + example: ({ ...props }) => { + return ; + }, + } +); diff --git a/packages/react/code-connect/ComboBox/FluidComboBox.figma.tsx b/packages/react/code-connect/ComboBox/FluidComboBox.figma.tsx new file mode 100644 index 000000000000..df5782b7a8ae --- /dev/null +++ b/packages/react/code-connect/ComboBox/FluidComboBox.figma.tsx @@ -0,0 +1,76 @@ +/** + * 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 { + unstable__FluidComboBox as FluidComboBox, + unstable__FluidDropdownSkeleto as FluidDropdownSkeleton, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + FluidComboBox, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14505-304219&t=5acDGCinwyrs5Bbc-4', + { + props: { + titleText: figma.boolean('Show tooltip', { + // true: figma.string('Label text') + figma.children('Tooltip'), //https://github.com/figma/code-connect/issues/92 + true: figma.string('Label text'), + false: figma.string('Label text'), + }), + label: figma.string('Filter text'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error text'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => { + const items = [ + { + id: 'option-0', + text: 'Option 0', + }, + { + id: 'option-1', + text: 'Option 1', + }, + ]; + + return ( + {}} + id="carbon-combobox" + items={items} + itemToString={(item) => (item ? item.text : '')} + {...props} + /> + ); + }, + } +); + +figma.connect( + FluidDropdownSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14505-304219&t=5acDGCinwyrs5Bbc-4', + { + variant: { State: 'Skeleton' }, + example: () => { + return ; + }, + } +); diff --git a/packages/react/code-connect/ComboButton/ComboButton.figma.tsx b/packages/react/code-connect/ComboButton/ComboButton.figma.tsx new file mode 100644 index 000000000000..64940375c61a --- /dev/null +++ b/packages/react/code-connect/ComboButton/ComboButton.figma.tsx @@ -0,0 +1,54 @@ +/** + * 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 { ComboButton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +const sharedComboButtonProps = { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + position: figma.enum('Position', { + Bottom: 'bottom', + Top: 'top', + }), + open: figma.boolean('Open'), + menu: figma.nestedProps('Menu', { + menuItem: figma.children(['_Menu list item']), + }), +}; + +figma.connect( + ComboButton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31753-68447&t=aG4cJRjteQHcd71k-4', + { + props: sharedComboButtonProps, + example: ({ size, position }) => ( + + Open Combo button to view props and code + + ), + } +); + +figma.connect( + ComboButton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31753-68447&t=aG4cJRjteQHcd71k-4', + { + variant: { Open: 'True' }, + props: sharedComboButtonProps, + example: ({ size, position, menu }) => ( + + {menu.menuItem} + + ), + } +); diff --git a/packages/react/code-connect/DataTable/DataTable.figma.tsx b/packages/react/code-connect/DataTable/DataTable.figma.tsx index e71b02807da0..d6790f70069f 100644 --- a/packages/react/code-connect/DataTable/DataTable.figma.tsx +++ b/packages/react/code-connect/DataTable/DataTable.figma.tsx @@ -5,101 +5,229 @@ * LICENSE file in the root directory of this source tree. */ -// React : Figma -// DataTable > Table : Data table -// TableSelectRow & TableRow : Data table row -// TableHead > TableRow : Data table header row item -// TableBody > TableRow : Data table body row item -// TableCell : Data table row cell item -// TableHeader : Data table header cell item - +// @ts-nocheck import React from 'react'; import { + TableContainer, Table, TableHead, TableRow, - TableHeader, TableBody, - TableCell, + TableExpandHeader, + TableSelectAll, } from '@carbon/react'; import figma from '@figma/code-connect'; +const sharedTableProps = { + // skeleton: figma.boolean('Skeleton'), + slot: figma.boolean('Slot', { + true: figma.instance('Swap slot'), + }), + toolbar: figma.boolean('Toolbar', { + true: figma.children(['Data table toolbar item']), + }), + pagination: figma.boolean('Pagination', { + true: figma.children(['Pagination - Table bar']), + }), + headerItem: figma.nestedProps('Data table header item', { + description: figma.boolean('Description', { + true: figma.string('Description text'), + }), + title: figma.string('Title text'), + }), + headerRow: figma.nestedProps('Data table header row item', { + size: figma.enum('Size', { + 'Extra large': 'xl', + Large: 'lg', + Medium: 'md', + Small: 'sm', + 'Extra small': 'xs', + }), + children: figma.children('Col*'), + }), + headerRowItems: figma.children(['Data table header row item']), + rowItems: figma.boolean('Body', { + true: figma.children(['Data table body row item']), + }), +}; + +figma.connect( + Table, + 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4630-268268&mode=design&t=dSt5NCwcWajIQZR7-4', + { + props: sharedTableProps, + example: ({ + headerItem, + headerRow, + headerRowItems, + rowItems, + pagination, + toolbar, + slot, + }) => { + return ( + + {toolbar} + + + {headerRow.children} + + {rowItems} +
+ {pagination} + {slot} + + ); + }, + } +); + +figma.connect( + Table, + 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4630-268268&mode=design&t=dSt5NCwcWajIQZR7-4', + { + variant: { Type: 'Expandable' }, + props: sharedTableProps, + example: ({ + headerItem, + headerRow, + headerRowItems, + rowItems, + pagination, + toolbar, + slot, + }) => { + return ( + + {toolbar} + + + + + {headerRow.children} + + + {rowItems} +
+ {pagination} + {slot} + + ); + }, + } +); + +figma.connect( + Table, + 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4630-268268&mode=design&t=dSt5NCwcWajIQZR7-4', + { + variant: { Type: 'Select checkbox' }, + props: sharedTableProps, + example: ({ + headerItem, + headerRow, + headerRowItems, + rowItems, + pagination, + toolbar, + slot, + }) => { + return ( + + {toolbar} + + + + + {headerRow.children} + + + {rowItems} +
+ {pagination} + {slot} + + ); + }, + } +); + figma.connect( Table, 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4630-268268&mode=design&t=dSt5NCwcWajIQZR7-4', { - props: { - body: figma.boolean('Body'), - swapslot: figma.instance('Swap slot'), - slot: figma.boolean('Slot'), // shows up below data table - toolbar: figma.boolean('Toolbar'), - pagination: figma.boolean('Pagination'), - type: figma.enum('Type', { - Default: 'default', - Expandable: 'expandable', - 'Select checkbox': 'select-checkbox', - 'Select radio': 'select-radio', - 'Expandable + Selectable': 'expandable---selectable', - 'Batch actions': 'batch-actions', - }), - size: figma.enum('Size', { - 'XL / LG / MD': 'xl---lg---md', - 'SM / XS': 'sm---xs', - }), - skeleton: figma.boolean('Skeleton'), + variant: { Type: 'Select radio' }, + props: sharedTableProps, + example: ({ + headerItem, + headerRow, + headerRowItems, + rowItems, + pagination, + toolbar, + slot, + }) => { + return ( + + {toolbar} + + + +
+ {headerRow.children} + + + {rowItems} +
+ {pagination} + {slot} + + ); }, - example: () => { - // This is sample code for a basic Table - // See storybook for for detailed implementation docs - // https://react.carbondesignsystem.com/?path=/docs/components-datatable-basic--overview - const rows = [ - { - id: 'load-balancer-1', - name: 'Load Balancer 1', - rule: 'Round robin', - Status: 'Starting', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-2', - name: 'Load Balancer 2', - rule: 'DNS delegation', - status: 'Active', - other: 'Test', - example: '22', - }, - { - id: 'load-balancer-3', - name: 'Load Balancer 3', - rule: 'Round robin', - status: 'Disabled', - other: 'Test', - example: '22', - }, - ]; - const headers = ['Name', 'Rule', 'Status']; + } +); + +figma.connect( + Table, + 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=4630-268268&mode=design&t=dSt5NCwcWajIQZR7-4', + { + variant: { Type: 'Expandable + Selectable' }, + props: sharedTableProps, + example: ({ + headerItem, + headerRow, + headerRowItems, + rowItems, + pagination, + toolbar, + slot, + }) => { return ( - - - - {headers.map((header) => ( - {header} - ))} - - - - {rows.map((row) => ( - - {Object.keys(row) - .filter((key) => key !== 'id') - .map((key) => { - return {row[key]}; - })} + + {toolbar} +
+ + + + + {headerRow.children} - ))} - -
+ + {rowItems} + + {pagination} + {slot} + ); }, } diff --git a/packages/react/code-connect/DataTable/TableCell.figma.tsx b/packages/react/code-connect/DataTable/TableCell.figma.tsx new file mode 100644 index 000000000000..2ad1559ee3aa --- /dev/null +++ b/packages/react/code-connect/DataTable/TableCell.figma.tsx @@ -0,0 +1,32 @@ +/** + * 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 { TableCell } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TableCell, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=6172-291044&t=5C1lVaCoSygb13J1-4', + { + props: { + children: figma.instance('Swap slot', { + true: figma.boolean('Slot'), + }), + text: figma.boolean('Show text', { + true: figma.string('Cell text'), + }), + }, + example: ({ children, text }) => ( + + {text} + {children} + + ), + } +); diff --git a/packages/react/code-connect/DataTable/TableHeader.figma.tsx b/packages/react/code-connect/DataTable/TableHeader.figma.tsx new file mode 100644 index 000000000000..4b809705353b --- /dev/null +++ b/packages/react/code-connect/DataTable/TableHeader.figma.tsx @@ -0,0 +1,25 @@ +/** + * 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 { TableHeader } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TableHeader, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=43292-32017&t=5C1lVaCoSygb13J1-4', + { + props: { + text: figma.string('Cell text'), + isSortable: figma.boolean('Sortable'), + }, + example: ({ text, isSortable }) => ( + {text} + ), + } +); diff --git a/packages/react/code-connect/DataTable/TableRow.figma.tsx b/packages/react/code-connect/DataTable/TableRow.figma.tsx new file mode 100644 index 000000000000..5db149802931 --- /dev/null +++ b/packages/react/code-connect/DataTable/TableRow.figma.tsx @@ -0,0 +1,120 @@ +/** + * 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 { + TableRow, + TableExpandRow, + TableExpandedRow, + TableSelectRow, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TableRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4547-163221&t=5C1lVaCoSygb13J1-4', + { + props: { + // aIspacer62100117: figma.boolean('AI spacer'), + // zebrastyle266920: figma.boolean('Zebra style'), + // state: figma.enum('State', { + // Enabled: 'enabled', + // }), + // selectable: figma.boolean('Selectable'), + // selecttype: figma.enum('Select type', { + // None: 'none', + // Checkbox: 'checkbox', + // 'Radio button': 'radio-button', + // }), + // selection: figma.enum('Selection', { + // None: 'none', + // Unchecked: 'unchecked', + // Checked: 'checked', + // Unselected: 'unselected', + // Selected: 'selected', + // }), + children: figma.children('Col*'), + }, + example: ({ children }) => {children}, + } +); + +figma.connect( + TableRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4547-163221&t=5C1lVaCoSygb13J1-4', + { + variant: { Expandable: 'True' }, + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + <> + {children} + + Expandable row content + + + ), + } +); + +figma.connect( + TableRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4547-163221&t=5C1lVaCoSygb13J1-4', + { + variant: { Expandable: 'True', Selectable: 'True' }, + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + <> + + + {children} + + + Expandable row content + + + ), + } +); + +figma.connect( + TableRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4547-163221&t=5C1lVaCoSygb13J1-4', + { + variant: { 'Select type': 'Checkbox' }, + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + + + {children} + + ), + } +); + +figma.connect( + TableRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4547-163221&t=5C1lVaCoSygb13J1-4', + { + variant: { 'Select type': 'Radio button' }, + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + + + {children} + + ), + } +); diff --git a/packages/react/code-connect/DataTable/TableToolbar.figma.tsx b/packages/react/code-connect/DataTable/TableToolbar.figma.tsx new file mode 100644 index 000000000000..620dc2e98b37 --- /dev/null +++ b/packages/react/code-connect/DataTable/TableToolbar.figma.tsx @@ -0,0 +1,37 @@ +/** + * 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 { TableToolbar } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TableToolbar, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4487-180741&t=T1B0YRZ6hK2IkVMC-4', + { + example: () => ( + + + + + + Action 1 + + + Action 2 + + + Action 3 + + + + + + ), + } +); diff --git a/packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx b/packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx index c40d637edada..ea31973560ec 100644 --- a/packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx +++ b/packages/react/code-connect/Dropdown/FluidDropdown.figma.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { unstable__FluidDropdown as FluidDropdown, - unstable__FluidDropdownSkeleto as FluidDropdownSkeleton, + unstable__FluidDropdownSkeleton as FluidDropdownSkeleton, } from '@carbon/react'; import figma from '@figma/code-connect'; diff --git a/packages/react/code-connect/MenuButton/MenuButton.figma.tsx b/packages/react/code-connect/MenuButton/MenuButton.figma.tsx new file mode 100644 index 000000000000..267166a0fec4 --- /dev/null +++ b/packages/react/code-connect/MenuButton/MenuButton.figma.tsx @@ -0,0 +1,74 @@ +/** + * 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 { MenuButton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +const sharedMenuButtonProps = { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + menuAlignment: figma.enum('Position', { + Bottom: 'bottom', + Top: 'top', + }), + open: figma.boolean('Open'), + menu: figma.nestedProps('Menu', { + menuItem: figma.children(['_Menu list item']), + }), + button: figma.nestedProps('Button', { + kind: figma.enum('Style', { + Primary: 'primary', + Tertiary: 'tertiary', + Ghost: 'ghost', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + }), +}; + +figma.connect( + MenuButton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31420-317548&t=KXgYpEhuz2XzSITV-4', + { + props: sharedMenuButtonProps, + example: ({ size, children, menuAlignment, button }) => ( + + Open Menu button to view props and code + + ), + } +); + +figma.connect( + MenuButton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31420-317548&t=KXgYpEhuz2XzSITV-4', + { + variant: { Open: 'True' }, + props: sharedMenuButtonProps, + example: ({ size, children, menuAlignment, button, menu }) => ( + + {menu.menuItem} + + ), + } +); diff --git a/packages/react/code-connect/MultiSelect/FilterableMultiSelect.figma.tsx b/packages/react/code-connect/MultiSelect/FilterableMultiSelect.figma.tsx new file mode 100644 index 000000000000..1ed7d2fa3d20 --- /dev/null +++ b/packages/react/code-connect/MultiSelect/FilterableMultiSelect.figma.tsx @@ -0,0 +1,92 @@ +/** + * 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 { FilterableMultiSelect, DropdownSkeleton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + FilterableMultiSelect, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-291673&t=aG4cJRjteQHcd71k-4', + { + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + titleText: figma.string('Label text'), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + label: figma.string('Filter...'), + helperText: figma.boolean('Show helper', { + true: figma.string('Helper text'), + }), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error message'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning message'), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => { + const items = [ + { + id: 'option-0', + text: 'Option 0', + }, + { + id: 'option-1', + text: 'Option 1', + }, + ]; + + return ( + (item ? item.text : '')} + selectionFeedback="top-after-reopen" + /> + ); + }, + } +); + +figma.connect( + DropdownSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-291673&t=aG4cJRjteQHcd71k-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + }, + example: ({ ...props }) => { + return ; + }, + } +); diff --git a/packages/react/code-connect/MultiSelect/FluidFilterableMultiSelect.figma.tsx b/packages/react/code-connect/MultiSelect/FluidFilterableMultiSelect.figma.tsx new file mode 100644 index 000000000000..526c495c448a --- /dev/null +++ b/packages/react/code-connect/MultiSelect/FluidFilterableMultiSelect.figma.tsx @@ -0,0 +1,75 @@ +/** + * 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 { + unstable__FluidFilterableMultiSelect as FluidFilterableMultiSelect, + unstable__FluidDropdownSkeleton as FluidDropdownSkeleton, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + FluidFilterableMultiSelect, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=45988-11486&t=aG4cJRjteQHcd71k-4', + { + props: { + titleText: figma.boolean('Show tooltip', { + // true: figma.string('Label text') + figma.children('Tooltip'), //https://github.com/figma/code-connect/issues/92 + true: figma.string('Label text'), + false: figma.string('Label text'), + }), + label: figma.string('Filter text'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error text'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => { + const items = [ + { + id: 'option-0', + text: 'Option 0', + }, + { + id: 'option-1', + text: 'Option 1', + }, + ]; + + return ( + (item ? item.text : '')} + /> + ); + }, + } +); + +figma.connect( + FluidDropdownSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=45988-11486&t=aG4cJRjteQHcd71k-4', + { + variant: { State: 'Skeleton' }, + example: () => { + return ; + }, + } +); diff --git a/packages/react/code-connect/MultiSelect/FluidMultiSelect.figma.tsx b/packages/react/code-connect/MultiSelect/FluidMultiSelect.figma.tsx new file mode 100644 index 000000000000..22206c7f215d --- /dev/null +++ b/packages/react/code-connect/MultiSelect/FluidMultiSelect.figma.tsx @@ -0,0 +1,75 @@ +/** + * 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 { + unstable__FluidMultiSelect as FluidMultiSelect, + unstable__FluidDropdownSkeleton as FluidDropdownSkeleton, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + FluidMultiSelect, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14530-300220&t=aG4cJRjteQHcd71k-4', + { + props: { + titleText: figma.boolean('Show Tooltip', { + // true: figma.string('Label text') + figma.children('Tooltip'), //https://github.com/figma/code-connect/issues/92 + true: figma.string('Label text'), + false: figma.string('Label text'), + }), + label: figma.string('Prompt text'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error text'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => { + const items = [ + { + id: 'option-0', + text: 'Option 0', + }, + { + id: 'option-1', + text: 'Option 1', + }, + ]; + + return ( + (item ? item.text : '')} + /> + ); + }, + } +); + +figma.connect( + FluidDropdownSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14530-300220&t=aG4cJRjteQHcd71k-4', + { + variant: { State: 'Skeleton' }, + example: () => { + return ; + }, + } +); diff --git a/packages/react/code-connect/MultiSelect/MultiSelect.figma.tsx b/packages/react/code-connect/MultiSelect/MultiSelect.figma.tsx new file mode 100644 index 000000000000..d7b2baacb440 --- /dev/null +++ b/packages/react/code-connect/MultiSelect/MultiSelect.figma.tsx @@ -0,0 +1,95 @@ +/** + * 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 { MultiSelect, DropdownSkeleton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + MultiSelect, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-291311&t=aG4cJRjteQHcd71k-4', + { + props: { + type: figma.enum('Style', { + Inline: 'inline', + }), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + titleText: figma.string('Label text'), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + label: figma.string('Prompt text'), + helperText: figma.boolean('Show helper', { + true: figma.string('Helper text'), + }), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error message'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning message'), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => { + const items = [ + { + id: 'option-0', + text: 'Option 0', + }, + { + id: 'option-1', + text: 'Option 1', + }, + ]; + + return ( + (item ? item.text : '')} + selectionFeedback="top-after-reopen" + /> + ); + }, + } +); + +figma.connect( + DropdownSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=14032-291311&t=aG4cJRjteQHcd71k-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + }, + example: ({ ...props }) => { + return ; + }, + } +); diff --git a/packages/react/code-connect/Notification/Notification.figma.tsx b/packages/react/code-connect/Notification/Notification.figma.tsx index 3d78ecf107d9..1c7949cfdd71 100644 --- a/packages/react/code-connect/Notification/Notification.figma.tsx +++ b/packages/react/code-connect/Notification/Notification.figma.tsx @@ -23,8 +23,6 @@ const sharedNotificationProps = { Success: 'success', Warning: 'warning', Error: 'error', - // 'Info square': 'info-square', missing from Figma - // 'Warning alt': 'warning-alt' missing from Figma }), hideCloseButton: figma.boolean('Close', { true: false, diff --git a/packages/react/code-connect/OverflowMenu/Overflow.figma.tsx b/packages/react/code-connect/OverflowMenu/Overflow.figma.tsx new file mode 100644 index 000000000000..ee0b6f420b1e --- /dev/null +++ b/packages/react/code-connect/OverflowMenu/Overflow.figma.tsx @@ -0,0 +1,50 @@ +/** + * 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 { OverflowMenu } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + OverflowMenu, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3717-45725&t=aG4cJRjteQHcd71k-4', + { + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + direction: figma.enum('Position', { + Top: 'top', + }), + flipped: figma.enum('Alignment', { + End: true, + }), + disabled: figma.enum('State', { + Disabled: true, + }), + open: figma.boolean('Open'), + + button: figma.nestedProps('Button', { + renderIcon: figma.instance('Swap icon'), + }), + }, + example: ({ button, ...props }) => ( + + {/* Sample OverflowMenuItem code, not directly mapped */} + + + + + + + + ), + } +); diff --git a/packages/react/code-connect/Pagination/Pagination.figma.tsx b/packages/react/code-connect/Pagination/Pagination.figma.tsx new file mode 100644 index 000000000000..3f6a1c0fcc96 --- /dev/null +++ b/packages/react/code-connect/Pagination/Pagination.figma.tsx @@ -0,0 +1,38 @@ +/** + * 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 { Pagination } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + Pagination, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3889-50204&t=gkzO9FaEPqewqYn6-4', + { + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + }, + example: ({ size }) => ( + + ), + } +); diff --git a/packages/react/code-connect/Pagination/PaginationNav.figma.tsx b/packages/react/code-connect/Pagination/PaginationNav.figma.tsx new file mode 100644 index 000000000000..e8b133d229e7 --- /dev/null +++ b/packages/react/code-connect/Pagination/PaginationNav.figma.tsx @@ -0,0 +1,19 @@ +/** + * 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 { PaginationNav } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + PaginationNav, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2799-20761&t=gkzO9FaEPqewqYn6-4', + { + example: () => , + } +); diff --git a/packages/react/code-connect/PasswordInput/FluidPasswordInput.figma.tsx b/packages/react/code-connect/PasswordInput/FluidPasswordInput.figma.tsx new file mode 100644 index 000000000000..fe63c0986a94 --- /dev/null +++ b/packages/react/code-connect/PasswordInput/FluidPasswordInput.figma.tsx @@ -0,0 +1,48 @@ +/** + * 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 { + unstable__FluidPasswordInput as FluidPasswordInput, + unstable__FluidTextInputSkeleton as FluidTextInputSkeleton, +} from '@carbon/react'; + +figma.connect( + FluidPasswordInput, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=68771-7312&t=BNxiN6zuoeazJ8tv-4', + { + props: { + labelText: figma.textContent('Label'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error text'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + // missing from Figma + // readOnly: figma.enum('State', { + // 'Read-only': true, + // }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + FluidTextInputSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=68771-7312&t=BNxiN6zuoeazJ8tv-4', + { + variant: { State: 'Skeleton' }, + example: () => , + } +); diff --git a/packages/react/code-connect/PasswordInput/PasswordInput.figma.tsx b/packages/react/code-connect/PasswordInput/PasswordInput.figma.tsx new file mode 100644 index 000000000000..2db58c2c7037 --- /dev/null +++ b/packages/react/code-connect/PasswordInput/PasswordInput.figma.tsx @@ -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 { PasswordInput, TextInputSkeleton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + PasswordInput, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5621-280380&t=BNxiN6zuoeazJ8tv-4', + { + props: { + labelText: figma.string('Label text'), + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + invalidText: figma.string('Error text'), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + helperText: figma.boolean('Show helper', { + true: figma.string('Helper text'), + }), + // missing from Figma + // readOnly: figma.enum('State', { + // 'Read-only': true, + // }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + TextInputSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5621-280380&t=BNxiN6zuoeazJ8tv-4', + { + variant: { State: 'Skeleton' }, + props: { + hideLabel: figma.boolean('Show label', { + true: false, + false: true, + }), + }, + example: ({ hideLabel }) => , + } +); diff --git a/packages/react/code-connect/StructuredList/StructuredList.figma.tsx b/packages/react/code-connect/StructuredList/StructuredList.figma.tsx new file mode 100644 index 000000000000..68ec23be3b11 --- /dev/null +++ b/packages/react/code-connect/StructuredList/StructuredList.figma.tsx @@ -0,0 +1,148 @@ +/** + * 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 { + StructuredListWrapper, + StructuredListHead, + StructuredListRow, + StructuredListCell, + StructuredListBody, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + StructuredListWrapper, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11797-285083&t=FNMM9qlCorQ1hEnC-4', + { + props: { + isCondensed: figma.enum('Size', { + Condensed: true, + }), + headerRowItems: figma.children(['_Structured list header row item']), + isFlush: figma.boolean('Flush'), + rowItems: figma.children(['_Structured list row item']), + }, + example: ({ isFlush, headerRowItem, rowItems, isCondensed }) => ( + + {headerRowItems} + {rowItems} + + ), + } +); + +// selectable +figma.connect( + StructuredListWrapper, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=61653-7458&t=RuAO38H8L12JZXpK-4', + { + props: { + isCondensed: figma.enum('Size', { + Condensed: true, + }), + headerRowItems: figma.children(['_Structured list header row item']), + rowItems: figma.children(['_Structured list row item - Selectable']), + }, + example: ({ headerRowItem, rowItems, isCondensed }) => ( + + {headerRowItems} + {rowItems} + + ), + } +); + +// ROWS +// header row +figma.connect( + StructuredListRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11809-286209&t=FNMM9qlCorQ1hEnC-4', + { + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + {children} + ), + } +); + +// row +figma.connect( + StructuredListRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=61634-3169&t=FNMM9qlCorQ1hEnC-4', + { + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + {children} + ), + } +); + +// selectable header row +figma.connect( + StructuredListRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=61634-2136&t=RuAO38H8L12JZXpK-4', + { + props: { + children: figma.children('Col*'), + }, + example: ({ children }) => ( + {children} + ), + } +); + +// selectable row +figma.connect( + StructuredListRow, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11803-290100&t=RuAO38H8L12JZXpK-4', + { + props: { + children: figma.children('Col*'), + disabled: figma.enum('State', { + Disabled: true, + }), + }, + example: ({ children, disabled }) => ( + {children} + ), + } +); + +// CELLS +// header cell +figma.connect( + StructuredListCell, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11871-287656&t=FNMM9qlCorQ1hEnC-4', + { + props: { + children: figma.string('Header text'), + }, + example: ({ children }) => ( + {children} + ), + } +); + +// cell +figma.connect( + StructuredListCell, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11801-289539&t=RuAO38H8L12JZXpK-4', + { + props: { + children: figma.string('Row text'), + }, + example: ({ children }) => ( + {children} + ), + } +); diff --git a/packages/react/code-connect/Tabs/Tab.figma.tsx b/packages/react/code-connect/Tabs/Tab.figma.tsx index 32229ecedbc4..d2d1dcde4c6b 100644 --- a/packages/react/code-connect/Tabs/Tab.figma.tsx +++ b/packages/react/code-connect/Tabs/Tab.figma.tsx @@ -21,23 +21,24 @@ const sharedTabProps = { icon: figma.instance('Swap icon'), }; -figma.connect( - Tab, - 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=5658-278361&mode=design&t=ERtuwFdbSumlRYtB-4', - { - variant: { Type: 'Text + Icon' }, - props: sharedTabProps, - example: ({ label, disabled, renderIcon }) => ( - - {label} - - ), - } -); +'', + figma.connect( + Tab, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5658-278361&t=wcK3P98b09VsrxXF-4', + { + variant: { Type: 'Text + Icon' }, + props: sharedTabProps, + example: ({ label, disabled, renderIcon }) => ( + + {label} + + ), + } + ); figma.connect( Tab, - 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=5658-278361&mode=design&t=ERtuwFdbSumlRYtB-4', + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5658-278361&t=wcK3P98b09VsrxXF-4', { variant: { Type: 'Text + Icon', @@ -58,7 +59,7 @@ figma.connect( figma.connect( IconTab, - 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=5658-278361&mode=design&t=ERtuwFdbSumlRYtB-4', + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5658-278361&t=wcK3P98b09VsrxXF-4', { variant: { Type: 'Icon only' }, props: sharedTabProps, @@ -69,3 +70,18 @@ figma.connect( ), } ); + +// vertical tabs items +figma.connect( + Tab, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=75769-1965&t=PaZ3ZnEGQGMgXgBW-4', + { + props: { + label: figma.string('Text'), + disabled: figma.enum('State', { + Disabled: true, + }), + }, + example: ({ label, disabled }) => {label}, + } +); diff --git a/packages/react/code-connect/Tabs/Tabs.figma.tsx b/packages/react/code-connect/Tabs/Tabs.figma.tsx index 2ffaec25e3b6..b50b204a15c3 100644 --- a/packages/react/code-connect/Tabs/Tabs.figma.tsx +++ b/packages/react/code-connect/Tabs/Tabs.figma.tsx @@ -8,22 +8,29 @@ /* eslint-disable react/jsx-no-duplicate-props */ // @ts-nocheck import React from 'react'; -import { Tabs, TabList, TabPanels, TabPanel } from '@carbon/react'; +import { + Tabs, + TabsVertical, + TabListVertical, + TabList, + TabPanels, + TabPanel, +} from '@carbon/react'; import figma from '@figma/code-connect'; figma.connect( Tabs, - 'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=3890-50605&mode=design&t=ERtuwFdbSumlRYtB-4', + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3890-50605&t=PaZ3ZnEGQGMgXgBW-4', { props: { - children: figma.children(['_Tabs items']), contained: figma.enum('Style', { Contained: true, }), fullWidth: figma.enum('Alignment', { 'Grid aware': true, }), - tab: figma.nestedProps('_Tabs items', { + children: figma.children(['_Horizontal tabs items']), + tab: figma.nestedProps('_Horizontal tabs items', { size: figma.enum('Size', { Large: 'lg', }), @@ -52,3 +59,27 @@ figma.connect( ), } ); + +// vertical +figma.connect( + TabsVertical, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=75823-2818&t=PaZ3ZnEGQGMgXgBW-4', + { + props: { + children: figma.children(['_Vertical tabs items']), + }, + example: ({ children }) => ( + + {children} + {/* Example code below, not mapped in Figma. + There needs to be one TabPanel per Tab */} + + Tab Panel 1 + Tab Panel 2 + Tab Panel 3 + Tab Panel 4 + + + ), + } +); diff --git a/packages/react/code-connect/Tag/Tag.figma.tsx b/packages/react/code-connect/Tag/Tag.figma.tsx new file mode 100644 index 000000000000..1b7b0afeae6e --- /dev/null +++ b/packages/react/code-connect/Tag/Tag.figma.tsx @@ -0,0 +1,202 @@ +/** + * 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 { + Tag, + DismissibleTag, + OperationalTag, + SelectableTag, + TagSkeleton, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + Tag, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16031-269750&t=RuAO38H8L12JZXpK-4', + { + props: { + renderIcon: figma.boolean('Icon', { + true: figma.instance('Swap icon'), + }), + text: figma.string('Tag text'), + size: figma.enum('Size', { + Large: 'lg', + Small: 'sm', + }), + type: figma.enum('Color', { + Blue: 'blue', + Cyan: 'cyan', + Teal: 'teal', + Green: 'green', + Purple: 'purple', + Magenta: 'magenta', + Red: 'red', + Gray: 'gray', + 'Cool gray': 'cool-gray', + 'Warm gray': 'warm-gray', + 'High contrast': 'high-contrast', + Outline: 'outline', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + }, + example: ({ text, ...props }) => {text}, + } +); + +figma.connect( + DismissibleTag, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16031-269750&t=RuAO38H8L12JZXpK-4', + { + variant: { Dismissible: 'True' }, + props: { + renderIcon: figma.boolean('Icon', { + true: figma.instance('Swap icon'), + }), + text: figma.string('Tag text'), + size: figma.enum('Size', { + Large: 'lg', + Small: 'sm', + }), + type: figma.enum('Color', { + Blue: 'blue', + Cyan: 'cyan', + Teal: 'teal', + Green: 'green', + Purple: 'purple', + Magenta: 'magenta', + Red: 'red', + Gray: 'gray', + 'Cool gray': 'cool-gray', + 'Warm gray': 'warm-gray', + 'High contrast': 'high-contrast', + Outline: 'outline', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + SelectableTag, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=46254-7550&t=RuAO38H8L12JZXpK-4', + { + props: { + renderIcon: figma.boolean('Icon', { + true: figma.instance('Swap icon'), + }), + text: figma.string('Tag text'), + size: figma.enum('Size', { + Large: 'lg', + Small: 'sm', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + selected: figma.boolean('Selected'), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + OperationalTag, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=46254-10165&t=RuAO38H8L12JZXpK-4', + { + props: { + renderIcon: figma.boolean('Icon', { + true: figma.instance('Swap icon'), + }), + text: figma.string('Tag text'), + size: figma.enum('Size', { + Large: 'lg', + Small: 'sm', + }), + type: figma.enum('Color', { + Blue: 'blue', + Cyan: 'cyan', + Teal: 'teal', + Green: 'green', + Purple: 'purple', + Magenta: 'magenta', + Red: 'red', + Gray: 'gray', + 'Cool gray': 'cool-gray', + 'Warm gray': 'warm-gray', + 'High contrast': 'high-contrast', + Outline: 'outline', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + }, + example: ({ ...props }) => , + } +); + +// skeleton +figma.connect( + TagSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16031-269750&t=RuAO38H8L12JZXpK-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Small: 'sm', + }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + TagSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=16031-269750&t=RuAO38H8L12JZXpK-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Small: 'sm', + }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + TagSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=46254-7550&t=RuAO38H8L12JZXpK-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Small: 'sm', + }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + TagSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=46254-10165&t=RuAO38H8L12JZXpK-4', + { + variant: { State: 'Skeleton' }, + props: { + size: figma.enum('Size', { + Small: 'sm', + }), + }, + example: ({ ...props }) => , + } +); diff --git a/packages/react/code-connect/TextInput/FluidTextInput.figma.tsx b/packages/react/code-connect/TextInput/FluidTextInput.figma.tsx index a8f1287dc02c..03a2378129f2 100644 --- a/packages/react/code-connect/TextInput/FluidTextInput.figma.tsx +++ b/packages/react/code-connect/TextInput/FluidTextInput.figma.tsx @@ -11,7 +11,6 @@ import { unstable__FluidTextInput as FluidTextInput, unstable__FluidTextInputSkeleton as FluidTextInputSkeleton, } from '@carbon/react'; - import figma from '@figma/code-connect'; figma.connect( diff --git a/packages/react/code-connect/TimePicker/FluidTimePicker.figma.tsx b/packages/react/code-connect/TimePicker/FluidTimePicker.figma.tsx new file mode 100644 index 000000000000..4adc483ca26f --- /dev/null +++ b/packages/react/code-connect/TimePicker/FluidTimePicker.figma.tsx @@ -0,0 +1,117 @@ +/** + * 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 { + FluidTimePicker, + FluidTimePickerSelect, + SelectItem, + ToggletipLabel, + Toggletip, + ToggletipContent, + ToggletipButton, +} from '@carbon/react'; +import { Information } from '@carbon/icons-react'; +import figma from '@figma/code-connect'; + +const sharedFluidTimePickerProps = { + invalidText: figma.string('Error message'), + warningText: figma.string('Warning message'), + disabled: figma.enum('State', { + Disabled: true, + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + warning: figma.enum('State', { + Warning: true, + }), + invalid: figma.enum('State', { + Error: true, + }), +}; + +figma.connect( + FluidTimePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268399&t=qp8bdiovIuVIO7xb-4', + { + variant: { Inputs: '3' }, + props: sharedFluidTimePickerProps, + example: ({ ...props }) => { + const ToggleTip = ( + <> + Clock + + + + + +

Additional field information here.

+ + + + ); + + return ( + + + + + + + + + + + + + ); + }, + } +); + +figma.connect( + FluidTimePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268399&t=qp8bdiovIuVIO7xb-4', + { + variant: { Inputs: '2' }, + props: sharedFluidTimePickerProps, + example: ({ ...props }) => { + const ToggleTip = ( + <> + Clock + + + + + +

Additional field information here.

+ + + + ); + + return ( + + + + + + + ); + }, + } +); diff --git a/packages/react/code-connect/TimePicker/TimePicker.figma.tsx b/packages/react/code-connect/TimePicker/TimePicker.figma.tsx new file mode 100644 index 000000000000..5eaf0245eb2a --- /dev/null +++ b/packages/react/code-connect/TimePicker/TimePicker.figma.tsx @@ -0,0 +1,54 @@ +/** + * 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 { TimePicker, TimePickerSelect, SelectItem } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TimePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268301&t=qp8bdiovIuVIO7xb-4', + { + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + disabled: figma.enum('State', { + Disabled: true, + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + // these properties are missing in Figma https://github.com/carbon-design-system/carbon-design-kit/issues/853 + // + // labelText: figma.textContent('Choose a time'), + // placeholder: figma.textContent('hh:mm'), + // missing from Figma + // value, + // warning, + // warningText, + // invalid, + // invalidText, + // hideLabel + }, + example: ({ ...props }) => ( + + + + + + + + + + + ), + } +); diff --git a/packages/react/code-connect/TreeView/TreeNode.tsx b/packages/react/code-connect/TreeView/TreeNode.tsx new file mode 100644 index 000000000000..4a95c0453b22 --- /dev/null +++ b/packages/react/code-connect/TreeView/TreeNode.tsx @@ -0,0 +1,30 @@ +/** + * 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 { TreeNode } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TreeNode, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11828-285325&t=aG4cJRjteQHcd71k-4', + { + props: { + renderIcon: figma.boolean('Icon', { + true: , + }), + label: figma.string('Node text'), + disabled: figma.enum('State', { + Disabled: true, + }), + selected: figma.boolean('Selected'), + isExpanded: figma.boolean('Open'), + }, + example: ({ ...props }) => , + } +); diff --git a/packages/react/code-connect/TreeView/TreeView.figma.tsx b/packages/react/code-connect/TreeView/TreeView.figma.tsx new file mode 100644 index 000000000000..78e79e7a4829 --- /dev/null +++ b/packages/react/code-connect/TreeView/TreeView.figma.tsx @@ -0,0 +1,34 @@ +/** + * 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 { TreeView } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + TreeView, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=11948-286738&t=aG4cJRjteQHcd71k-4', + { + props: { + treeNode: figma.nestedProps('Branch node item', { + size: figma.enum('Size', { + Small: 'sm', + 'Extra small': 'xs', + }), + }), + children: figma.children(['Branch node item']), + }, + example: ({ children, treeNode }) => ( + + {/* Figma component doesn't currently nest TreeNodes accurately + code sample below is incomplete */} + {children} + + ), + } +); diff --git a/packages/react/code-connect/UIShell/Header.figma.tsx b/packages/react/code-connect/UIShell/Header.figma.tsx new file mode 100644 index 000000000000..d1f7903571b2 --- /dev/null +++ b/packages/react/code-connect/UIShell/Header.figma.tsx @@ -0,0 +1,61 @@ +/** + * 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 { + HeaderContainer, + Header, + HeaderName, + HeaderNavigation, + HeaderGlobalBar, + SkipToContent, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + Header, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2213-17092&t=A3oys5odsvKkcDFA-4', + { + props: { + prefix: figma.boolean('Site prefix', { + true: figma.string('Site prefix text'), + }), + name: figma.string('Site name'), + headerMenuButton: figma.boolean('Menu', { + true: figma.children('Menu trigger'), + }), + headerGlobalActions: figma.boolean('Actions', { + true: figma.children(['UI shell - Header actions']), + }), + HeaderMenuItems: figma.boolean('Navigation', { + true: figma.children(['UI shell - Header menu item']), + }), + }, + example: ({ + headerMenuButton, + headerGlobalActions, + HeaderMenuItems, + prefix, + name, + }) => ( + +
+ + {headerMenuButton} + + {name} + + + {HeaderMenuItems} + + {headerGlobalActions} +
+ + ), + } +); diff --git a/packages/react/code-connect/UIShell/HeaderGlobalAction.figma.tsx b/packages/react/code-connect/UIShell/HeaderGlobalAction.figma.tsx new file mode 100644 index 000000000000..4a644a387c5a --- /dev/null +++ b/packages/react/code-connect/UIShell/HeaderGlobalAction.figma.tsx @@ -0,0 +1,29 @@ +/** + * 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 { HeaderGlobalAction } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + HeaderGlobalAction, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2133-10716&t=A3oys5odsvKkcDFA-4', + { + props: { + children: figma.instance('Swap icon'), + isActive: figma.enum('State', { + Active: true, + }), + }, + example: ({ children, isActive }) => ( + {}}> + {children} + + ), + } +); diff --git a/packages/react/code-connect/UIShell/HeaderMenuButton.figma.tsx b/packages/react/code-connect/UIShell/HeaderMenuButton.figma.tsx new file mode 100644 index 000000000000..7a4ca8c4ab38 --- /dev/null +++ b/packages/react/code-connect/UIShell/HeaderMenuButton.figma.tsx @@ -0,0 +1,29 @@ +/** + * 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 { HeaderMenuButton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + HeaderMenuButton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2213-15047&t=A3oys5odsvKkcDFA-4', + { + props: { + isActive: figma.boolean('Open'), + }, + example: ({ isActive }) => ( + {}} + isActive={isActive} + aria-expanded={isActive} + /> + ), + } +); diff --git a/packages/react/code-connect/UIShell/HeaderMenuItem.tsx b/packages/react/code-connect/UIShell/HeaderMenuItem.tsx new file mode 100644 index 000000000000..14c22af654de --- /dev/null +++ b/packages/react/code-connect/UIShell/HeaderMenuItem.tsx @@ -0,0 +1,72 @@ +/** + * 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 { HeaderMenu, HeaderMenuItem } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + HeaderMenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2133-9531&t=A3oys5odsvKkcDFA-4', + { + props: { + linkText: figma.string('Link text'), + isActive: figma.boolean('Selected'), + }, + example: ({ linkText, isActive }) => ( + + {linkText} + + ), + } +); + +figma.connect( + HeaderMenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2133-9531&t=A3oys5odsvKkcDFA-4', + { + variant: { Type: 'Sub-menu' }, + props: { + linkText: figma.string('Link text'), + isActive: figma.boolean('Selected'), + }, + example: ({ linkText, isActive }) => ( + + + {linkText} + + + ), + } +); + +//sub menu item +figma.connect( + HeaderMenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2133-9888&t=A3oys5odsvKkcDFA-4', + { + props: { + linkText: figma.string('Link text'), + }, + example: ({ linkText }) => ( + {linkText} + ), + } +); + +// sub menu +figma.connect( + HeaderMenu, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2133-9973&t=A3oys5odsvKkcDFA-4', + { + props: { children: figma.children(['UI shell - Header sub-menu item']) }, + example: ({ children }) => ( + {children} + ), + } +); diff --git a/packages/react/code-connect/UIShell/HeaderPanel.figma.tsx b/packages/react/code-connect/UIShell/HeaderPanel.figma.tsx new file mode 100644 index 000000000000..0439e53cddb4 --- /dev/null +++ b/packages/react/code-connect/UIShell/HeaderPanel.figma.tsx @@ -0,0 +1,27 @@ +/** + * 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 { Header, HeaderPanel } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + HeaderPanel, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2319-15100&t=wcK3P98b09VsrxXF-4', + { + props: { children: figma.children('*') }, + example: ({ children }) => ( +
+ + {/* add custom components here */} + {children} + +
+ ), + } +); diff --git a/packages/react/code-connect/UIShell/SideNav.tsx b/packages/react/code-connect/UIShell/SideNav.tsx new file mode 100644 index 000000000000..fa9bea62853f --- /dev/null +++ b/packages/react/code-connect/UIShell/SideNav.tsx @@ -0,0 +1,36 @@ +/** + * 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, { Children } from 'react'; +import { SideNav, SideNavItems, SideNavMenu } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + SideNav, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=6227-297201&t=wcK3P98b09VsrxXF-4', + { + props: { + expanded: figma.boolean('Compact', { + true: false, + false: true, + }), + children: figma.children(['UI shell - Left panel menu item']), + }, + example: ({ children, expanded }) => ( + {}} + href="#main-content"> + + {children} + + + ), + } +); diff --git a/packages/react/code-connect/UIShell/SideNavMenuItem.figma.tsx b/packages/react/code-connect/UIShell/SideNavMenuItem.figma.tsx new file mode 100644 index 000000000000..babed513a5c6 --- /dev/null +++ b/packages/react/code-connect/UIShell/SideNavMenuItem.figma.tsx @@ -0,0 +1,95 @@ +/** + * 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 { SideNavMenu, SideNavMenuItem } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + SideNavMenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2346-16194&t=wcK3P98b09VsrxXF-4', + { + props: { + linkText: figma.string('Link text'), + isActive: figma.enum('State', { + Active: true, + }), + }, + example: ({ linkText, isActive }) => ( + + {linkText} + + ), + } +); + +figma.connect( + SideNavMenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2346-16194&t=wcK3P98b09VsrxXF-4', + { + variant: { 'Icon left': 'True' }, + props: { + linkText: figma.string('Link text'), + isActive: figma.enum('State', { + Active: true, + }), + }, + example: ({ linkText, isActive }) => ( + + {linkText} + + ), + } +); + +figma.connect( + SideNavMenu, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2346-16194&t=wcK3P98b09VsrxXF-4', + { + variant: { Type: 'Sub-menu' }, + props: { + linkText: figma.string('Link text'), + isActive: figma.enum('State', { + Active: true, + }), + }, + example: ({ linkText, isActive }) => ( + + Nested link + + ), + } +); + +figma.connect( + SideNavMenu, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2346-16194&t=wcK3P98b09VsrxXF-4', + { + variant: { Type: 'Sub-menu', 'Icon left': 'True' }, + props: { + linkText: figma.string('Link text'), + isActive: figma.enum('State', { + Active: true, + }), + }, + example: ({ linkText, isActive }) => ( + + Nested link + + ), + } +); + +// figma.connect( +// HeaderMenuItem, +// 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=2346-16194&t=wcK3P98b09VsrxXF-4', +// { +// variant: { Type: 'Divider' }, +// example: () => , +// } +// ); diff --git a/packages/react/package.json b/packages/react/package.json index 9d87c73213d3..95266d966bae 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -81,7 +81,7 @@ "@babel/preset-typescript": "^7.24.7", "@carbon/test-utils": "^10.30.0", "@carbon/themes": "^11.38.0", - "@figma/code-connect": "^1.0.2", + "@figma/code-connect": "^1.0.4", "@rollup/plugin-babel": "^6.0.0", "@rollup/plugin-commonjs": "^26.0.0", "@rollup/plugin-node-resolve": "^15.0.0", diff --git a/yarn.lock b/yarn.lock index 309f0f898cdf..21833c4ead3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2033,7 +2033,7 @@ __metadata: "@carbon/styles": "npm:^1.63.0-rc.0" "@carbon/test-utils": "npm:^10.30.0" "@carbon/themes": "npm:^11.38.0" - "@figma/code-connect": "npm:^1.0.2" + "@figma/code-connect": "npm:^1.0.4" "@floating-ui/react": "npm:^0.26.0" "@ibm/telemetry-js": "npm:^1.5.0" "@rollup/plugin-babel": "npm:^6.0.0" @@ -3089,9 +3089,9 @@ __metadata: languageName: node linkType: hard -"@figma/code-connect@npm:^1.0.2": - version: 1.0.2 - resolution: "@figma/code-connect@npm:1.0.2" +"@figma/code-connect@npm:^1.0.4": + version: 1.0.4 + resolution: "@figma/code-connect@npm:1.0.4" dependencies: "@babel/core": "npm:^7.24.7" "@babel/generator": "npm:^7.24.7" @@ -3119,7 +3119,7 @@ __metadata: zod-validation-error: "npm:^3.2.0" bin: figma: bin/figma - checksum: 10/28de9e30705e987bb2de035bd4033a061edcae094edd37cd0116d1a666369f3fb248164b39c79a648e8a832ccd0ed84873027e8b56cdc9b1832764c80ba06ca0 + checksum: 10/a412e637748513ae64888032c62856a34680581ad4bfb03e4b03a37eee41b13b9b3d43df1cb74c2d9ec8dcf0c6ac82b72a22da5655e21f91a832e5b5bef2adcf languageName: node linkType: hard