feat(code-connect): modal, form, popover

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: <ProgressIndicator />,
+        true: figma.children('Progress indicator'),
+      }),
+      descriptionText: figma.boolean('Description', {
+        true: '<p>' + figma.string('Description text') + '</p>',
+      }),
+      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 (
+        <ComposedModal open onClose={() => setOpen(false)}>
+          <ModalHeader label={label} title={title} />
+          <ModalBody>
+            {progress}
+            {descriptionText}
+            {children}
+          </ModalBody>
+          {modalFooter}
+        </ComposedModal>
+      );
+    },
+  }
+);

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 }) => <ModalFooter>{children}</ModalFooter>,
+  }
+);

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 }) => <Form aria-label="sample form">{chidlren}</Form>,
+  }
+);

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 (
+        <Popover
+          align={align}
+          open={open}
+          caret={popoverItem.caret}
+          dropShadow={popoverItem.dropShadow}>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(!open);
+            }}>
+            <Settings />
+          </button>
+          <PopoverContent>{popoverItem.children}</PopoverContent>
+        </Popover>
+      );
+    },
+  }
+);
+
+//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 (
+        <Popover isTabTip align={align} open={open} dropShadow={dropShadow}>
+          <button
+            type="button"
+            onClick={() => {
+              setOpen(!open);
+            }}>
+            <Settings />
+          </button>
+          <PopoverContent>{popoverItem.children}</PopoverContent>
+        </Popover>
+      );
+    },
+  }
+);