feat: add figma code connect (#16730)

* feat: add figma code connect (#16348)

* chore: update gitignore

* feat: add figma code connect

* chore: update readme

* feat(code-connect): update Link and Notification

* feat: code connect updates

* chore: update disclaimer text

* feat: add checkbox

* feat: contentswitcher

* feat: add breadcrumb checkbox and grid

* feat: codesnippet

* feat: wip tooltip and contained list

* chore: update to 0.1.2

* chore: add code comments to accordion

* docs: update readma

* feat(code-connect): connect toggle

* feat(code-connect): connect NumberInput

* chore: add basic config file

* chore: ignore ts and exclude from ts build

* chore: update config file

* chore: update readme

* chore: fix versions from merge conflict

* chore: yarn dedupe

* chore: fix yarn

* chore: yarn

* chore: yarn

* chore: yarn dedupe

.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

.gitignore

@@ -57,3 +57,6 @@ package-lock.json
 
 # Playwright
 .playwright
+
+# Local token
+.env

figma.config.json

@@ -0,0 +1,11 @@
+{
+  "codeConnect": {
+    "include": ["packages/react/code-connect/**"],
+    "react": {
+      "importPaths": {
+        "packages/react/src/*": "@carbon/react"
+      },
+      "paths": {}
+    }
+  }
+}

packages/react/code-connect/Accordion/Accordion.figma.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 { 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: {
+      // missing props, set on Accordion item within Figma
+      // size
+      // isFlush
+      // align
+      children: figma.children(['Accordion item']),
+    },
+    example: ({ children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <Accordion>{children}</Accordion>
+    ),
+  }
+);

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

@@ -0,0 +1,70 @@
+/**
+ * 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 { 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'),
+      // Props below are on accordion item in Figma and accordion in React
+      // 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, needs to be set on Accordion
+      // isFlush, needs to be set on Accordion
+      // align, needs to be set on Accordion
+    }) => (
+      <AccordionItem title={title} disabled={disabled} open={open}>
+        <p>{content}</p>
+        {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/Breadcrumb/Breadcrumb.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 { Breadcrumb } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  Breadcrumb,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3155-31030&t=U57NnoohldL54XAl-4',
+  {
+    props: {
+      //noTrailingSlash: needs to come from child item component in figma
+      children: figma.children(['_Breadcrumb item']),
+    },
+    example: ({ children }) => (
+      // Disclaimer: Code Connect is currently in beta and integration with Carbon
+      // React is in an exploratory phase. Code sample below may be incomplete.
+      <Breadcrumb>{children}</Breadcrumb>
+    ),
+  }
+);
+
+// BreadcrumbSkeleton missing from Figma, can only be set on individual items

packages/react/code-connect/Breadcrumb/BreadcrumbItem.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 { BreadcrumbItem, OverflowMenu, OverflowMenuItem } from '@carbon/react';
+import figma from '@figma/code-connect';
+
+figma.connect(
+  BreadcrumbItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
+  {
+    variant: { Type: 'Link' },
+    props: {
+      // state: figma.enum('State', { // in react skeleton state replaces the entire Breadcrumb component , not BreadcrumbItem
+      //   Skeleton: 'skeleton',
+      // }),
+      children: figma.string('Link text'),
+    },
+    example: ({ children }) => (
+      <BreadcrumbItem href="#">{children}</BreadcrumbItem>
+    ),
+  }
+);
+
+figma.connect(
+  BreadcrumbItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
+  {
+    variant: { Type: 'Current page' },
+    props: {
+      children: figma.string('Link text'),
+      isCurrentPage: figma.boolean('Current'),
+    },
+    example: ({ children, isCurrentPage }) => (
+      <BreadcrumbItem isCurrentPage={isCurrentPage}>{children}</BreadcrumbItem>
+    ),
+  }
+);
+
+figma.connect(
+  BreadcrumbItem,
+  'https://www.figma.com/design/YAnB1jKx0yCUL29j6uSLpg/(v11)-All-themes---Carbon-Design-System?node-id=3136-29234&t=U57NnoohldL54XAl-4',
+  {
+    variant: { Type: 'Overflow' },
+    props: {
+      isCurrentPage: figma.boolean('Current'),
+    },
+    example: ({ isCurrentPage }) => (
+      <BreadcrumbItem
+        isCurrentPage={isCurrentPage}
+        data-floating-menu-container>
+        <OverflowMenu aria-label="Overflow menu in a breadcrumb">
+          <OverflowMenuItem itemText="Breadcrumb 3" />
+          <OverflowMenuItem itemText="Breadcrumb 4" />
+        </OverflowMenu>
+      </BreadcrumbItem>
+    ),
+  }
+);

packages/react/code-connect/Button/Button.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 { 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 in an exploratory phase. Code sample below may be incomplete.
+        <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 (
+        // Disclaimer: Code Connect is currently in beta and integration with Carbon
+        // React is in an exploratory phase. Code sample below may be incomplete.
+        <ButtonSkeleton size={size} />
+      );
+    },
+  }
+);