Figma code connect

packages/react/src/ActionMenu/ActionMenu.figma.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import {ActionMenu} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  ActionMenu,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=26998-2424&t=GFf1GorpZXk4F8Mq-4',
+  {
+    props: {
+      trigger: figma.children('trigger'),
+      open: figma.boolean('open'),
+      align: figma.enum('align', {
+        right: 'end',
+        left: 'start',
+        center: 'center',
+      }),
+      actionList: figma.nestedProps('ActionMenu/Content', {
+        items: figma.children('*'),
+      }),
+    },
+    example: ({trigger, open, align, actionList}) => (
+      <ActionMenu open={open}>
+        <ActionMenu.Anchor>{trigger}</ActionMenu.Anchor>
+        <ActionMenu.Overlay align={align}>{actionList.items}</ActionMenu.Overlay>
+      </ActionMenu>
+    ),
+  },
+)

packages/react/src/Blankslate/Blankslate.figma.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import {Blankslate} from '../../src/drafts'
+import figma from '@figma/code-connect'
+
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+  },
+  variant: {primaryAction: 'false', secondaryAction: 'false'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+    </Blankslate>
+  ),
+})
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+    primaryAction: figma.nestedProps('Primary action', {
+      text: figma.textContent('Button'),
+    }),
+  },
+  variant: {primaryAction: 'true', secondaryAction: 'false'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
+    </Blankslate>
+  ),
+})
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+    primaryAction: figma.nestedProps('Primary action', {
+      text: figma.textContent('Button'),
+    }),
+    secondaryAction: figma.textContent('Secondary action link'),
+  },
+  variant: {primaryAction: 'true', secondaryAction: 'true'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading, primaryAction, secondaryAction}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.PrimaryAction href="">{primaryAction.text}</Blankslate.PrimaryAction>
+      <Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
+    </Blankslate>
+  ),
+})
+figma.connect(Blankslate, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=4398-2383&m=dev', {
+  props: {
+    leadingVisual: figma.nestedProps('_BlankslateVisual', {
+      item: figma.children('leadingVisual'),
+    }),
+    narrow: figma.boolean('narrow?'),
+    spacious: figma.boolean('spacious?'),
+    border: figma.boolean('border?'),
+    heading: figma.textContent('Text: Heading'),
+    description: figma.textContent('Text: Description'),
+    secondaryAction: figma.textContent('Secondary action link'),
+  },
+  variant: {primaryAction: 'false', secondaryAction: 'true'},
+  example: ({leadingVisual, border, spacious, narrow, description, heading, secondaryAction}) => (
+    <Blankslate border={border} spacious={spacious} narrow={narrow}>
+      <Blankslate.Visual>{leadingVisual.item}</Blankslate.Visual>
+      <Blankslate.Heading>{heading}</Blankslate.Heading>
+      <Blankslate.Description>{description}</Blankslate.Description>
+      <Blankslate.SecondaryAction href="">{secondaryAction}</Blankslate.SecondaryAction>
+    </Blankslate>
+  ),
+})

packages/react/src/ButtonGroup/ButtonGroup.figma.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {ButtonGroup} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(ButtonGroup, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=36325-3634&m=dev', {
+  props: {
+    children: figma.children('*'),
+  },
+  example: ({children}) => <ButtonGroup>{children}</ButtonGroup>,
+})

packages/react/src/Label/Label.figma.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {Label} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(Label, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-65008&m=dev', {
+  props: {
+    text: figma.textContent('Label'),
+    size: figma.enum('size', {
+      small: 'small',
+      large: 'large',
+    }),
+    variant: figma.enum('variant', {
+      default: 'default',
+      primary: 'primary',
+      secondary: 'secondary',
+      accent: 'accent',
+      success: 'success',
+      attention: 'attention',
+      severe: 'severe',
+      danger: 'danger',
+      done: 'done',
+      sponsors: 'sponsors',
+    }),
+  },
+  example: ({size, variant, text}) => (
+    <Label size={size} variant={variant}>
+      {text}
+    </Label>
+  ),
+})

packages/react/src/Popover/Popover.figma.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import {Heading, Popover, Text} from '../../src'
+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(Popover, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=19015-63778&m=dev', {
+  props: {
+    body: figma.string('body'),
+    heading: figma.string('heading'),
+    action: figma.children('Action'),
+    caret: figma.enum('caret', {
+      top: 'top',
+      'top-left': 'top-left',
+      'top-right': 'top-right',
+      bottom: 'bottom',
+      'bottom-left': 'bottom-left',
+      'bottom-right': 'bottom-right',
+      left: 'left',
+      'left-top': 'left-top',
+      'left-bottom': 'left-bottom',
+      right: 'right',
+      'right-top': 'right-top',
+      'right-bottom': 'right-bottom',
+    }),
+  },
+  example: ({caret, heading, body, action}) => (
+    <Popover caret={caret}>
+      <Popover.Content>
+        <Heading
+          sx={{
+            fontSize: 2,
+          }}
+        >
+          {heading}
+        </Heading>
+        <Text as="p">{body}</Text>
+        {action}
+      </Popover.Content>
+    </Popover>
+  ),
+})

packages/react/src/Spinner/Spinner.figma.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import {Spinner} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(Spinner, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=11025-38126&m=dev', {
+  props: {
+    size: figma.enum('size', {
+      small: 'small',
+      medium: 'medium',
+      large: 'large',
+    }),
+  },
+  example: ({size}) => <Spinner size={size} />,
+})

packages/react/src/StateLabel/StateLabel.figma.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {StateLabel} from '../../src'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  StateLabel,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-64962&t=gQF1OJTEGB3vTxPz-4',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 'small',
+        normal: 'normal',
+      }),
+      status: figma.enum('status', {
+        draft: 'issueDraft',
+        open: 'issueOpened',
+        closed: 'issueClosed',
+        unavailable: 'unavailable',
+      }),
+      text: figma.textContent('Label'),
+    },
+    variant: {variant: 'issue'},
+    example: ({text, size, status}) => (
+      <StateLabel variant={size} status={status}>
+        {text}
+      </StateLabel>
+    ),
+  },
+)
+
+figma.connect(
+  StateLabel,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=18959-64962&t=gQF1OJTEGB3vTxPz-4',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 'small',
+        normal: 'normal',
+      }),
+      status: figma.enum('status', {
+        draft: 'draft',
+        open: 'pullOpened',
+        closed: 'pullClosed',
+        merged: 'pullMerged',
+        queued: 'pullQueued',
+        unavailable: 'unavailable',
+      }),
+      text: figma.textContent('Label'),
+    },
+    variant: {variant: 'pull request'},
+    example: ({text, size, status}) => (
+      <StateLabel variant={size} status={status}>
+        {text}
+      </StateLabel>
+    ),
+  },
+)

packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import {SkeletonAvatar} from '../../../src/drafts'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  SkeletonAvatar,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=29994-6840&m=dev',
+  {
+    props: {
+      size: figma.enum('size', {
+        '16px': 16,
+        '20px': 20,
+        '24px': 24,
+        '28px': 28,
+        '32px': 32,
+        '40px': 40,
+        '48px': 48,
+        '64px': 64,
+      }),
+      square: figma.enum('shape', {
+        circle: false,
+        square: true,
+      }),
+    },
+    example: ({size, square}) => <SkeletonAvatar size={size} square={square} />,
+  },
+)

packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import {SkeletonBox} from '..'
+import figma from '@figma/code-connect'
+
+figma.connect(
+  SkeletonBox,
+  'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=36445-82&t=yGFSCgMOJ0ItJpsF-4',
+  {
+    // @ts-ignore: needs comment for figma code connect
+    example: () => <SkeletonBox height={/* set height */} width={/* set height */} />,
+  },
+)