diff --git a/packages/react/code-connect/ComposedModal/ComposedModal.figma.tsx b/packages/react/code-connect/ComposedModal/ComposedModal.figma.tsx new file mode 100644 index 000000000000..a403ccd6d27f --- /dev/null +++ b/packages/react/code-connect/ComposedModal/ComposedModal.figma.tsx @@ -0,0 +1,62 @@ +/** + * 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, { useState } from 'react'; +import { ComposedModal } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + ComposedModal, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4080-55366&t=kgHdN1kQbk04e5Jv-4', + { + props: { + title: figma.string('Title text'), + label: figma.boolean('Label', { + true: figma.string('Label text'), + }), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + 'Extra small': 'xs', + }), + progress: figma.boolean('Progress', { + true: figma.children('Progress indicator'), + }), + descriptionText: figma.boolean('Description', { + true: '

' + figma.string('Description text') + '

', + }), + children: figma.instance('Swap slot'), + modalFooter: figma.boolean('Actions', { + true: figma.children('Actions'), + }), + }, + example: ({ + size, + title, + label, + modalFooter, + children, + descriptionText, + progress, + }) => { + const [open, setOpen] = useState(true); + return ( + setOpen(false)}> + + + {progress} + {descriptionText} + {children} + + {modalFooter} + + ); + }, + } +); diff --git a/packages/react/code-connect/ComposedModal/ModalFooter.figma.tsx b/packages/react/code-connect/ComposedModal/ModalFooter.figma.tsx new file mode 100644 index 000000000000..38ba27f6f56d --- /dev/null +++ b/packages/react/code-connect/ComposedModal/ModalFooter.figma.tsx @@ -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 { ModalFooter } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + ModalFooter, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3906-50587&t=SbIuH3RAJeFPjXmN-4', + { + props: { + children: figma.children('*'), + }, + example: ({ children }) => {children}, + } +); diff --git a/packages/react/code-connect/DatePicker/DatePicker.figma.tsx b/packages/react/code-connect/DatePicker/DatePicker.figma.tsx new file mode 100644 index 000000000000..d6cb0f47dfd6 --- /dev/null +++ b/packages/react/code-connect/DatePicker/DatePicker.figma.tsx @@ -0,0 +1,182 @@ +/** + * 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 { DatePicker, DatePickerInput, DatePickerSkeleton } from '@carbon/react'; +import figma from '@figma/code-connect'; + +//simple +figma.connect( + DatePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-266985&t=hgJuU7m9Y6EM076g-4', + { + props: { + placeholder: figma.string('Date unselected'), + labelText: figma.string('Label text'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + helperText: figma.boolean('Show helper', { + true: figma.string('Helper text'), + }), + invalidText: figma.string('Error text'), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + // hideLabel: figma.boolean('Show label ', { // extra space after label in Figma property name causing code connect to break + // true: false, + // false: true, + // }), + }, + example: ({ ...props }) => ( + + + + ), + } +); + +figma.connect( + DatePickerSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-266985&t=hgJuU7m9Y6EM076g-4', + { + variant: { State: 'Skeleton' }, + example: () => , //missing showLabel + } +); + +// single +figma.connect( + DatePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267504&t=hgJuU7m9Y6EM076g-4', + { + props: { + placeholder: figma.string('Date unselected'), + labelText: figma.string('Label text'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + helperText: figma.boolean('Show helper', { + true: figma.string('Helper text'), + }), + invalidText: figma.string('Error text'), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + // hideLabel: missing from Figma component + }, + example: (props) => ( + + + + ), + } +); + +figma.connect( + DatePickerSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267504&t=hgJuU7m9Y6EM076g-4', + { + variant: { State: 'Skeleton' }, + example: () => , //missing showLabel + } +); + +//range +figma.connect( + DatePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268170&t=hgJuU7m9Y6EM076g-4', + { + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + datePickerInput: figma.nestedProps( + 'Date picker - Single calendar - Default', + { + placeholder: figma.string('Date unselected'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + invalidText: figma.string('Error text'), + } + ), + }, + example: ({ size, readOnly, datePickerInput }) => ( + + + + + ), + } +); + +figma.connect( + DatePickerSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268170&t=hgJuU7m9Y6EM076g-4', + { + variant: { State: 'Skeleton' }, + example: () => , //missing showLabel + } +); diff --git a/packages/react/code-connect/DatePicker/FluidDatePicker.figma.tsx b/packages/react/code-connect/DatePicker/FluidDatePicker.figma.tsx new file mode 100644 index 000000000000..ec313a89639a --- /dev/null +++ b/packages/react/code-connect/DatePicker/FluidDatePicker.figma.tsx @@ -0,0 +1,155 @@ +/** + * 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__FluidDatePicker as FluidDatePicker, + unstable__FluidDatePickerInput as FluidDatePickerInput, + unstable__FluidDatePickerSkeleton as FluidDatePickerSkeleton, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +// simple fluid +figma.connect( + FluidDatePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267399&t=hgJuU7m9Y6EM076g-4', + { + props: { + placeholder: figma.string('Date selected'), + warnText: figma.string('Warning text'), + labelText: figma.string('Label text'), + invalidText: figma.string('Error text'), + invalid: figma.enum('State', { + Error: true, + }), + warn: figma.enum('State', { + Warning: true, + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => ( + + + + ), + } +); + +figma.connect( + FluidDatePickerSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267399&t=hgJuU7m9Y6EM076g-4', + { + variant: { State: 'Skeleton' }, + example: () => , + } +); + +//single fluid +figma.connect( + FluidDatePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267989&t=hgJuU7m9Y6EM076g-4', + { + props: { + labelText: figma.boolean('Show tooltip', { + true: figma.string('Label text'), // + figma.children('Tooltip'), //https://github.com/figma/code-connect/issues/92 + false: figma.string('Label text'), + }), + placeholder: figma.string('Date selected'), + warnText: figma.string('Warning text'), + invalidText: figma.string('Error text'), + invalid: figma.enum('State', { + Error: true, + }), + warn: figma.enum('State', { + Warning: true, + }), + readOnly: figma.enum('State', { + 'Read-only': true, + }), + }, + example: ({ ...props }) => ( + + + + ), + } +); + +figma.connect( + FluidDatePickerSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-267989&t=hgJuU7m9Y6EM076g-4', + { + variant: { State: 'Skeleton' }, + example: () => , + } +); + +//range fluid +figma.connect( + FluidDatePicker, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268235&t=hgJuU7m9Y6EM076g-4', + { + props: { + readOnly: figma.enum('State', { + 'Read-only': true, + }), + datePickerInput: figma.nestedProps( + 'Date picker - Single calendar - Fluid', + { + placeholder: figma.string('Date unselected'), + disabled: figma.enum('State', { + Disabled: true, + }), + invalid: figma.enum('State', { + Error: true, + }), + warn: figma.enum('State', { + Warning: true, + }), + warnText: figma.string('Warning text'), + invalidText: figma.string('Error text'), + } + ), + }, + example: ({ readOnly, datePickerInput }) => ( + + + + + ), + } +); + +figma.connect( + FluidDatePickerSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=17544-268235&t=hgJuU7m9Y6EM076g-4', + { + variant: { State: 'Skeleton' }, + example: () => , + } +); diff --git a/packages/react/code-connect/FileUploader/FileUploader.figma.tsx b/packages/react/code-connect/FileUploader/FileUploader.figma.tsx new file mode 100644 index 000000000000..9940ae11d411 --- /dev/null +++ b/packages/react/code-connect/FileUploader/FileUploader.figma.tsx @@ -0,0 +1,112 @@ +/** + * 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 { + FileUploader, + FileUploaderItem, + FileUploaderSkeleton, + FormItem, +} from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + FileUploader, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5465-294860&t=KAcDAMsePqspmo2e-4', + { + variant: { Type: 'Default' }, + props: { + labelDescription: figma.string('Desc. text'), + labelTitle: figma.string('Label text'), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + disabled: figma.enum('State', { + Disabled: 'disabled', + }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + FileUploader, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5465-294860&t=KAcDAMsePqspmo2e-4', + { + variant: { Type: 'Drag and drop' }, + props: { + children: figma.children(['_File uploader file item']), + labelDescription: figma.string('Desc. text'), + labelTitle: figma.string('Label text'), + disabled: figma.enum('State', { + Disabled: 'disabled', + }), + }, + example: ({ children, labelDescription, labelTitle }) => ( + +

{labelTitle}

+

{labelDescription}

+ +
+ {children} + + ), + } +); + +figma.connect( + FileUploaderItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3199-35182&t=D2RGrtNnHWaB9r1F-4', + { + props: { + errorBody: figma.string('Long desc.'), + errorSubject: figma.string('Short desc.'), + name: figma.string('Long file name'), + filename113480: figma.string('File name'), + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + }), + state: figma.enum('State', { + Uploaded: 'edit', + Loading: 'uploading', + Success: 'complete', + 'Error short': 'error-short', + 'Error long': 'error-long', + }), + invalid: figma.enum('State', { + 'Error short': true, + 'Error long': true, + }), + }, + example: ({ ...props }) => , + } +); + +figma.connect( + FileUploaderSkeleton, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=5465-294860&t=KAcDAMsePqspmo2e-4', + { + variant: { State: 'Skeleton' }, + example: () => , + } +); diff --git a/packages/react/code-connect/Form/FormOnPage.figma.tsx b/packages/react/code-connect/Form/FormOnPage.figma.tsx new file mode 100644 index 000000000000..26c7eef2102b --- /dev/null +++ b/packages/react/code-connect/Form/FormOnPage.figma.tsx @@ -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 { Form } from './FormOnPage'; +import figma from '@figma/code-connect'; + +figma.connect( + Form, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3897-51336&t=SbIuH3RAJeFPjXmN-4', + { + props: { + chidlren: figma.children('*'), + }, + example: ({ chidlren }) =>
{chidlren}
, + } +); diff --git a/packages/react/code-connect/Menu/Menu.figma.tsx b/packages/react/code-connect/Menu/Menu.figma.tsx new file mode 100644 index 000000000000..5f402e89bc78 --- /dev/null +++ b/packages/react/code-connect/Menu/Menu.figma.tsx @@ -0,0 +1,28 @@ +/** + * 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 { Menu } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + Menu, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=31131-96397&t=OdgMrt4NDVwZpNSx-4', + { + props: { + size: figma.enum('Size', { + Large: 'lg', + Medium: 'md', + Small: 'sm', + 'Extra small': 'xs', + }), + children: figma.children(['_Menu list item']), + }, + example: ({ children, size }) => {children}, + } +); diff --git a/packages/react/code-connect/Menu/MenuItem.figma.tsx b/packages/react/code-connect/Menu/MenuItem.figma.tsx new file mode 100644 index 000000000000..7bc064671ef7 --- /dev/null +++ b/packages/react/code-connect/Menu/MenuItem.figma.tsx @@ -0,0 +1,112 @@ +/** + * 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 { MenuItem, MenuItemSelectable, MenuItemDivider } from '@carbon/react'; +import figma from '@figma/code-connect'; + +const sharedMenuItemProps = { + kind: figma.enum('State', { + 'Danger hover': 'danger', + 'Danger hover + Focus': 'danger', + }), + label: figma.string('Option text'), + disabled: figma.enum('State', { + Disabled: true, + }), +}; + +figma.connect( + MenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=36234-38344&t=OdgMrt4NDVwZpNSx-4', + { + props: sharedMenuItemProps, + example: ({ disabled, label, kind }) => ( + + ), + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=36234-38344&t=OdgMrt4NDVwZpNSx-4', + { + variant: { Divider: 'True' }, + props: sharedMenuItemProps, + example: ({ disabled, label, kind }) => ( + <> + + + + ), + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=36234-38344&t=OdgMrt4NDVwZpNSx-4', + { + variant: { 'Shortcuts or Trigger ': 'True' }, + props: sharedMenuItemProps, + example: ({ disabled, label, kind }) => ( + + ), + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=36234-38344&t=OdgMrt4NDVwZpNSx-4', + { + variant: { 'Shortcuts or Trigger ': 'True', Divider: 'True' }, + props: sharedMenuItemProps, + example: ({ disabled, label, kind }) => ( + <> + + + + ), + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=36234-38344&t=OdgMrt4NDVwZpNSx-4', + { + variant: { Selected: 'True' }, + props: sharedMenuItemProps, + example: ({ disabled, label, kind }) => ( + + ), + } +); + +figma.connect( + MenuItem, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=36234-38344&t=OdgMrt4NDVwZpNSx-4', + { + variant: { Selected: 'True', Divider: 'True' }, + props: sharedMenuItemProps, + example: ({ disabled, label, kind }) => ( + <> + + + + ), + } +); diff --git a/packages/react/code-connect/Notification/Notification.figma.tsx b/packages/react/code-connect/Notification/Notification.figma.tsx index a06aafe6f43f..3d78ecf107d9 100644 --- a/packages/react/code-connect/Notification/Notification.figma.tsx +++ b/packages/react/code-connect/Notification/Notification.figma.tsx @@ -89,12 +89,13 @@ figma.connect( variant: { Type: 'Inline short' }, props: sharedNotificationProps, - example: ({ title, kind, subtitle, hideCloseButton }) => ( + example: ({ title, kind, subtitle, hideCloseButton, lowContrast }) => ( ), } diff --git a/packages/react/code-connect/Popover/Popover.figma.tsx b/packages/react/code-connect/Popover/Popover.figma.tsx new file mode 100644 index 000000000000..af6746effb42 --- /dev/null +++ b/packages/react/code-connect/Popover/Popover.figma.tsx @@ -0,0 +1,94 @@ +/** + * 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 { Popover, PopoverContent } from './Popover'; +import { Settings } from '@carbon/react'; +import figma from '@figma/code-connect'; + +figma.connect( + Popover, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=9125-400576&t=SbIuH3RAJeFPjXmN-4', + { + props: { + align: figma.enum('Position', { + Top: figma.enum('Alignment', { + Start: 'top-start', + Center: 'top', + End: 'top-end', + }), + Bottom: figma.enum('Alignment', { + Start: 'bottom-start', + Center: 'bottom', + End: 'bottom-end', + }), + Left: 'left', + Right: 'right', + }), + open: figma.boolean('Visible'), + popoverItem: figma.nestedProps('Popover item', { + caret: figma.boolean('Caret tip'), + children: figma.instance('Swap slot'), + dropShadow: figma.boolean('Shadow'), + }), + }, + example: ({ align, open, popoverItem }) => { + const [open, setOpen] = React.useState(false); + return ( + + + {popoverItem.children} + + ); + }, + } +); + +//tab tip +figma.connect( + Popover, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=9826-402965&t=SbIuH3RAJeFPjXmN-4', + { + props: { + align: figma.enum('Alignment', { + Start: 'start', + End: 'end', + }), + open: figma.boolean('Open'), + dropShadow: figma.boolean('Shadow'), + popoverItem: figma.nestedProps('Popover item', { + children: figma.instance('Swap slot'), + }), + }, + example: ({ align, open, dropShadow, popoverItem }) => { + const [open, setOpen] = React.useState(false); + return ( + + + {popoverItem.children} + + ); + }, + } +); diff --git a/packages/react/code-connect/Toggletip/Toggletip.figma.tsx b/packages/react/code-connect/Toggletip/Toggletip.figma.tsx new file mode 100644 index 000000000000..bdddf3b28673 --- /dev/null +++ b/packages/react/code-connect/Toggletip/Toggletip.figma.tsx @@ -0,0 +1,59 @@ +/** + * 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 { Toggletip, ToggletipLabel, ToggletipButton } from '@carbon/react'; +import { Information } from '@carbon/icons-react'; +import figma from '@figma/code-connect'; + +figma.connect( + Toggletip, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=9384-402406&t=DU9vCm0ie6tvQBsY-4', + { + props: { + align: figma.enum('Position', { + Top: figma.enum('Alignment', { + Start: 'top-start', + Center: 'top', + End: 'top-end', + }), + Bottom: figma.enum('Alignment', { + Start: 'bottom-start', + Center: 'bottom', + End: 'bottom-end', + }), + Left: 'left', + Right: 'right', + }), + toggletip: figma.nestedProps('Toggletip body', { + content: figma.textContent('Toggletip text'), + link: figma.children('Link'), + button: figma.children('Button'), + }), + // information: figma.instance('Information'), look at this once icons are connected + }, + example: ({ align, toggletip }) => ( + <> + Toggletip label + + + + + + +

{toggletip.content}

+ + {toggletip.link} + {toggletip.button} + + + + + ), + } +); diff --git a/packages/react/code-connect/Tooltip/Tooltip.figma.tsx b/packages/react/code-connect/Tooltip/Tooltip.figma.tsx index 8ff4197f61ed..943324bc5ec2 100644 --- a/packages/react/code-connect/Tooltip/Tooltip.figma.tsx +++ b/packages/react/code-connect/Tooltip/Tooltip.figma.tsx @@ -1,39 +1,84 @@ -import React from 'react'; -import { Tooltip } from './Tooltip'; -import figma from '@figma/code-connect'; - /** - * -- This file was auto-generated by `figma connect create` -- - * `props` includes a mapping from Figma properties and variants to - * suggested values. You should update this to match the props of your - * code component, and update the `example` function to return the - * code example you'd like to see in Figma + * 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 { DefinitionTooltip, Tooltip } from '@carbon/react'; +import figma from '@figma/code-connect'; + figma.connect( Tooltip, - 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3684-40507&t=cMvnFTYLPEhzhIpj-4', + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3684-40507&t=Z5rlxC6sD11qtIsk-4', { + variant: { Type: 'Standard' }, props: { trigger: figma.instance('Trigger'), - type: figma.enum('Type', { - Standard: 'standard', - Definition: 'definition', - 'Icon button': 'icon-button', + tooltip: figma.nestedProps('Tooltip content', { + label: figma.textContent('Tooltip text'), }), - position: figma.enum('Position', { - Top: 'top', - Bottom: 'bottom', + align: figma.enum('Position', { + Top: figma.enum('Alignment', { + Start: 'top-start', + Center: 'top', + End: 'top-end', + }), + Bottom: figma.enum('Alignment', { + Start: 'bottom-start', + Center: 'bottom', + End: 'bottom-end', + }), Left: 'left', Right: 'right', }), - alignment: figma.enum('Alignment', { - Center: 'center', - Start: 'start', - End: 'end', + }, + example: ({ trigger, tooltip, ...props }) => ( + + + + ), + } +); + +figma.connect( + DefinitionTooltip, + 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3684-40507&t=Z5rlxC6sD11qtIsk-4', + { + variant: { Type: 'Definition' }, + props: { + align: figma.enum('Position', { + Top: figma.enum('Alignment', { + Start: 'top-start', + Center: 'top', + End: 'top-end', + }), + Bottom: figma.enum('Alignment', { + Start: 'bottom-start', + Center: 'bottom', + End: 'bottom-end', + }), + Left: 'left', + Right: 'right', + }), + item: figma.nestedProps('_Tooltip definition item', { + children: figma.textContent('Definition tooltip'), + }), + tooltip: figma.nestedProps('Tooltip content', { + definition: figma.textContent('Tooltip text'), }), - visible: figma.boolean('Visible'), }, - example: () => , + example: ({ item, tooltip, align }) => ( + + {tooltip.children} + + ), } );