Implement code connect for segmentedControl and heading (#4849)

* implement code connect for segmentedControl * add AI icon * rebase main * wip * Update jest snapshots * test(vrt): update snapshots * Package updates/revert * Add another bump for needed icon * revert octicons * reset * reset snapshots * test(vrt): update snapshots * reset * snaps --------- Co-authored-by: Tyler Jones <[email protected]> Co-authored-by: TylerJDev <[email protected]> Co-authored-by: lukasoppermann <[email protected]> Co-authored-by: Katie Langerman <[email protected]>
primer · Dec 19, 2024 · 83386f4 · 83386f4
1 parent e990fdb
commit 83386f4
Show file tree

Hide file tree

Showing 13 changed files with 3,775 additions and 1,245 deletions.
diff --git a/packages/react/script/figma-connect-icons.ts b/packages/react/script/figma-connect-icons.ts
@@ -171,6 +171,10 @@ ${Array.from(uniqueNames)
 ${icons
   .map(
     icon => `figma.connect(${icon.name}, '${icon.figmaUrl}', {
+  props: {
+    name: "${icon.name}",
+    fn: ${icon.name}
+  },
   example: () => <${icon.name} size={${icon.size}} />,
 })`,
   )

diff --git a/packages/react/src/ActionBar/ActionBar.figma.tsx b/packages/react/src/ActionBar/ActionBar.figma.tsx
diff --git a/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx b/packages/react/src/ActionBar/disabled.ActionBar.Figma.tsx
@@ -0,0 +1,39 @@
+// // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// // @ts-nocheck
+// import React from 'react'
+// import {ActionBar} from '..'
+// import figma from '@figma/code-connect'
+
+// figma.connect(
+//   ActionBar,
+//   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65810&t=ARVklwnsUc0zUmot-4',
+//   {
+//     props: {
+//       items: figma.children(['ActionBar.IconButton', 'ActionBar.Divider']),
+//     },
+//     example: ({items}) => <ActionBar>{items}</ActionBar>,
+//   },
+// )
+
+// figma.connect(
+//   ActionBar.IconButton,
+//   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=35848-26016&m=dev',
+//   {
+//     props: {
+//       iconButton: figma.nestedProps('IconButton', {
+//         icon: figma.instance('icon'),
+//         ariaLabel: figma.string('aria-label'),
+//       }),
+//     },
+//     example: ({iconButton}) => <ActionBar.IconButton icon={iconButton.icon} aria-label={iconButton.ariaLabel} />,
+//   },
+// )
+
+// figma.connect(
+//   ActionBar.Divider,
+//   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=17042-65808&t=ARVklwnsUc0zUmot-4',
+//   {
+//     props: {},
+//     example: () => <ActionBar.Divider />,
+//   },
+// )
diff --git a/packages/react/src/ActionList/ActionList.figma.tsx b/packages/react/src/ActionList/ActionList.figma.tsx
@@ -126,6 +126,7 @@ figma.connect(
   },
 )
 
+/** DANGER ITEM */
 figma.connect(
   ActionList.Item,
   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56205&m=dev',
@@ -140,6 +141,7 @@ figma.connect(
     example: ({text}) => <ActionList.Item variant="danger">{text.label}</ActionList.Item>,
   },
 )
+
 figma.connect(
   ActionList.Item,
   'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56205&m=dev',
@@ -160,3 +162,56 @@ figma.connect(
     ),
   },
 )
+/** Single Select ITEM */
+figma.connect(
+  ActionList.Item,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56202&m=dev',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 'small',
+        medium: 'medium',
+        large: 'large',
+      }),
+      selected: figma.boolean('selected?'),
+      currentSelection: figma.boolean('currentSelection'),
+      text: figma.nestedProps('label and description', {
+        label: figma.textContent('label'),
+        description: figma.textContent('description'),
+      }),
+      leadingVisual: figma.instance('leadingVisual'),
+    },
+    variant: {'leadingVisual?': true},
+    example: ({text, selected, currentSelection, leadingVisual}) => (
+      <ActionList.Item selected={selected} active={currentSelection} variant="default">
+        <ActionList.LeadingVisual>{leadingVisual}</ActionList.LeadingVisual>
+        {text.label}
+      </ActionList.Item>
+    ),
+  },
+)
+figma.connect(
+  ActionList.Item,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=15614-56202&m=dev',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 'small',
+        medium: 'medium',
+        large: 'large',
+      }),
+      selected: figma.boolean('selected?'),
+      currentSelection: figma.boolean('currentSelection'),
+      text: figma.nestedProps('label and description', {
+        label: figma.textContent('label'),
+        description: figma.textContent('description'),
+      }),
+    },
+    variant: {'leadingVisual?': false},
+    example: ({text, selected, currentSelection}) => (
+      <ActionList.Item selected={selected} active={currentSelection} variant="default">
+        {text.label}
+      </ActionList.Item>
+    ),
+  },
+)
diff --git a/packages/react/src/Banner/Banner.figma.tsx b/packages/react/src/Banner/Banner.figma.tsx
@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import React from 'react'
-import {Banner} from '../../src/drafts'
+import {Banner} from '../../src/experimental/'
 import figma from '@figma/code-connect'
 
 const componentProps = {

diff --git a/packages/react/src/Button/Button.figma.tsx b/packages/react/src/Button/Button.figma.tsx
@@ -38,7 +38,7 @@ figma.connect(
   'https://www.figma.com/file/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?type=design&node-id=30258%3A5582&mode=design&t=TVF2yeiff0ZtzQll-1',
   {
     props: componentProps,
-    example: ({size, disabled, inactive, alignContent, leadingVisual, variant, label}) => (
+    example: ({size, disabled, inactive, alignContent, leadingVisual, trailingVisual, variant, label}) => (
       <Button
         size={size}
         disabled={disabled}

diff --git a/packages/react/src/Heading/Heading.figma.tsx b/packages/react/src/Heading/Heading.figma.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Heading from './Heading'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  Heading,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=21069-78785&t=LhKEppN9LJfzQQ49-4',
+  {
+    props: {
+      text: figma.textContent('Text'),
+      variant: figma.enum('variant', {
+        large: 'large',
+        medium: 'medium',
+        small: 'small',
+      }),
+    },
+    example: ({text, variant}) => <Heading variant={variant}>{text}</Heading>,
+  },
+)