feat: add figma code connect

.github/workflows/code-connect.yml

@@ -0,0 +1,13 @@
+on:
+  push:
+    paths:
+      - src/packages/react/code-connect/**/*.figma.tsx
+    branches:
+      - main
+
+jobs:
+  code-connect:
+    name: Code Connect
+    runs-on: ubuntu-latest
+    steps:
+      - run: npx figma connect publish

packages/react/code-connect/Accordion/Accordion.figma.tsx

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { Accordion } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Accordion,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2490-17019&mode=design&t=0hF8pirV0i9mofd1-4',
+  {
+    props: { children: figma.children(['Accordion item']) },
+    example: ({ children }) => (
+      // Disclaimer: Code Connect is currently in beta and
+      // integration with Carbon React is a work in progress.
+      <Accordion>{children}</Accordion>
+    ),
+  }
+);

packages/react/code-connect/Accordion/AccordionItem.figma.tsx

@@ -0,0 +1,71 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { AccordionItem } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  AccordionItem,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=2154-8478&mode=design&t=0hF8pirV0i9mofd1-4',
+  {
+    props: {
+      title: figma.string('Title text'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      open: figma.boolean('Expanded'),
+      content: figma.string('Content text'),
+      children: figma.instance('Swap slot'),
+
+      // Accordion props
+      // <Accordion size={size} isFlush={isFlush} align={align}>
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
+      }),
+      isFlush: figma.boolean('Flush'),
+      align: figma.enum('Alignment', {
+        Left: 'start',
+      }),
+    },
+    example: ({
+      title,
+      disabled,
+      open,
+      content,
+      children,
+      // size,
+      // isFlush,
+      // align,
+    }) => (
+      <AccordionItem title={title} disabled={disabled} open={open}>
+        {content}
+        {children}
+      </AccordionItem>
+    ),
+  }
+);
+
+// figma.connect(
+//   AccordionSkeleton,
+//   'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=14032-290635&mode=dev',
+//   {
+//     variant: { State: 'Skeleton' },
+//     props: {
+//       open: figma.boolean('Expanded'),
+//       isFlush: figma.boolean('Flush'),
+//       align: figma.enum('Alignment', {
+//       Left: 'start',
+//     }),
+//     },
+//     example: ({ size, hideLabel }) => {
+//       return <AccordionSkeleton align={align}  />;
+//     },
+//   }
+// );

packages/react/code-connect/Button/Button.figma.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { Button, ButtonSkeleton } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Button,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=1854-1776&mode=dev',
+  {
+    props: {
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      buttonText: figma.string('Button text'),
+      kind: figma.enum('Style', {
+        Primary: 'primary',
+        Secondary: 'secondary',
+        Tertiary: 'tertiary',
+        Ghost: 'ghost',
+        'Danger primary': 'danger',
+        'Danger tertiary': 'danger--tertiary',
+        'Danger ghost': 'danger--ghost',
+      }),
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
+        'Extra large': 'xl',
+        '2x large': '2xl',
+      }),
+      isExpressive: figma.enum('Size', {
+        Expressive: true,
+      }),
+      hasIconOnly: figma.enum('Type', {
+        'Icon only': true,
+      }),
+      renderIcon: figma.instance('Swap icon'),
+    },
+    example: ({
+      size,
+      kind,
+      isExpressive,
+      hasIconOnly,
+      renderIcon,
+      disabled,
+      buttonText,
+    }) => {
+      return (
+        // Disclaimer: Code Connect is currently in beta and
+        // integration with Carbon React is a work in progress.
+        <Button
+          size={size}
+          kind={kind}
+          isExpressive={isExpressive}
+          hasIconOnly={hasIconOnly}
+          renderIcon={renderIcon}
+          disabled={disabled}>
+          {buttonText}
+        </Button>
+      );
+    },
+  }
+);
+
+figma.connect(
+  ButtonSkeleton,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=1854-1776&mode=dev',
+  {
+    variant: { State: 'Skeleton' },
+    props: {
+      size: figma.enum('Size', {
+        Large: 'lg',
+        Medium: 'md',
+        Small: 'sm',
+        'Extra large': 'xl',
+        '2x large': '2xl',
+      }),
+    },
+    example: ({ size }) => {
+      return <ButtonSkeleton size={size} />;
+    },
+  }
+);

packages/react/code-connect/ContainedList/ContainedList.figma.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { ContainedList } from '@carbon/react';
+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(
+  ContainedList,
+  'https://www.figma.com/file/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?type=design&node-id=16193-272726&mode=design&t=0PKDyr2vMtgRONHX-4',
+  {
+    props: {
+      search: figma.boolean('Search'),
+      type: figma.enum('Type', {
+        'On page': 'on-page',
+        Disclosed: 'disclosed',
+      }),
+    },
+    example: () => <ContainedList />,
+  }
+);

packages/react/code-connect/DataTable/DataTable.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.
+ */
+
+// 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
+
+import React from 'react';
+import {
+  DataTable,
+  // Table,
+  // TableHead,
+  // TableRow,
+  // TableHeader,
+  // TableBody,
+  // TableCell,
+} from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  DataTable,
+  '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'),
+    },
+    example: () => {
+      // Disclaimer: Code Connect is currently in beta and
+      // integration with Carbon React is in an exploratory phase.
+
+      return <DataTable></DataTable>;
+    },
+  }
+);