From 543fe10aad69a4304d8910496615cc645d99e593 Mon Sep 17 00:00:00 2001 From: Alison Joseph Date: Tue, 16 Jul 2024 13:58:23 -0500 Subject: [PATCH] feat(code-connect): modal, form, popover --- .../ComposedModal/ComposedModal.figma.tsx | 63 +++++++++++++ .../ComposedModal/ModalFooter.figma.tsx | 22 +++++ .../code-connect/Form/FormOnPage.figma.tsx | 22 +++++ .../react/code-connect/Modal/Modal.figma.tsx | 38 -------- .../code-connect/Popover/Popover.figma.tsx | 94 +++++++++++++++++++ 5 files changed, 201 insertions(+), 38 deletions(-) create mode 100644 packages/react/code-connect/ComposedModal/ComposedModal.figma.tsx create mode 100644 packages/react/code-connect/ComposedModal/ModalFooter.figma.tsx create mode 100644 packages/react/code-connect/Form/FormOnPage.figma.tsx delete mode 100644 packages/react/code-connect/Modal/Modal.figma.tsx create mode 100644 packages/react/code-connect/Popover/Popover.figma.tsx 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..8d44c8e3f134 --- /dev/null +++ b/packages/react/code-connect/ComposedModal/ComposedModal.figma.tsx @@ -0,0 +1,63 @@ +/** + * 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: , + 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/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/Modal/Modal.figma.tsx b/packages/react/code-connect/Modal/Modal.figma.tsx deleted file mode 100644 index 1e96becb64c1..000000000000 --- a/packages/react/code-connect/Modal/Modal.figma.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import { Modal } from './Modal'; -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 - */ - -figma.connect( - Modal, - 'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=4080-55366&t=kgHdN1kQbk04e5Jv-4', - { - props: { - titletext11555621: figma.string('Title text'), - swapslot11555603: figma.instance('Swap slot'), - progress11555591: figma.boolean('Progress'), - description326306: figma.boolean('Description'), - slot11555609: figma.boolean('Slot'), - actions11555552: figma.boolean('Actions'), - closeicon11555510: figma.boolean('Close icon'), - descriptiontext11555597: figma.string('Description text'), - label11555343: figma.boolean('Label'), - labeltext11555176: figma.string('Label text'), - size: figma.enum('Size', { - Large: 'large', - Medium: 'medium', - Small: 'small', - 'Extra small': 'extra-small', - Mobile: 'mobile', - }), - }, - example: (props) => , - } -); 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} + + ); + }, + } +);