From 59363a6016aa058ba8c1f622d689691b9d689fdf Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Mon, 16 Sep 2024 12:01:27 +0200
Subject: [PATCH] adding more code connect (#4952)

---
 .../react/src/ActionMenu/ActionMenu.figma.tsx | 28 ++++++
 .../react/src/Blankslate/Blankslate.figma.tsx | 96 +++++++++++++++++++
 .../src/ButtonGroup/ButtonGroup.figma.tsx     | 10 ++
 packages/react/src/Label/Label.figma.tsx      | 30 ++++++
 packages/react/src/Popover/Popover.figma.tsx  | 48 ++++++++++
 packages/react/src/Spinner/Spinner.figma.tsx  | 14 +++
 .../react/src/StateLabel/StateLabel.figma.tsx | 57 +++++++++++
 .../drafts/Skeleton/SkeletonAvatar.figma.tsx  | 27 ++++++
 .../src/drafts/Skeleton/SkeletonBox.figma.tsx | 12 +++
 .../drafts/Skeleton/SkeletonText.figma.tsx    | 82 ++++++++++++++++
 10 files changed, 404 insertions(+)
 create mode 100644 packages/react/src/ActionMenu/ActionMenu.figma.tsx
 create mode 100644 packages/react/src/Blankslate/Blankslate.figma.tsx
 create mode 100644 packages/react/src/ButtonGroup/ButtonGroup.figma.tsx
 create mode 100644 packages/react/src/Label/Label.figma.tsx
 create mode 100644 packages/react/src/Popover/Popover.figma.tsx
 create mode 100644 packages/react/src/Spinner/Spinner.figma.tsx
 create mode 100644 packages/react/src/StateLabel/StateLabel.figma.tsx
 create mode 100644 packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx
 create mode 100644 packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx
 create mode 100644 packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx

diff --git a/packages/react/src/ActionMenu/ActionMenu.figma.tsx b/packages/react/src/ActionMenu/ActionMenu.figma.tsx
new file mode 100644
index 00000000000..3e2f971401e
--- /dev/null
+++ b/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>
+    ),
+  },
+)
diff --git a/packages/react/src/Blankslate/Blankslate.figma.tsx b/packages/react/src/Blankslate/Blankslate.figma.tsx
new file mode 100644
index 00000000000..3e09985e29e
--- /dev/null
+++ b/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>
+  ),
+})
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.figma.tsx b/packages/react/src/ButtonGroup/ButtonGroup.figma.tsx
new file mode 100644
index 00000000000..72f6026b9b4
--- /dev/null
+++ b/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>,
+})
diff --git a/packages/react/src/Label/Label.figma.tsx b/packages/react/src/Label/Label.figma.tsx
new file mode 100644
index 00000000000..bb2d6c85281
--- /dev/null
+++ b/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>
+  ),
+})
diff --git a/packages/react/src/Popover/Popover.figma.tsx b/packages/react/src/Popover/Popover.figma.tsx
new file mode 100644
index 00000000000..9ce95da1600
--- /dev/null
+++ b/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>
+  ),
+})
diff --git a/packages/react/src/Spinner/Spinner.figma.tsx b/packages/react/src/Spinner/Spinner.figma.tsx
new file mode 100644
index 00000000000..194c59e275b
--- /dev/null
+++ b/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} />,
+})
diff --git a/packages/react/src/StateLabel/StateLabel.figma.tsx b/packages/react/src/StateLabel/StateLabel.figma.tsx
new file mode 100644
index 00000000000..ebdae7cf3f4
--- /dev/null
+++ b/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>
+    ),
+  },
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx b/packages/react/src/drafts/Skeleton/SkeletonAvatar.figma.tsx
new file mode 100644
index 00000000000..648ca02dc62
--- /dev/null
+++ b/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} />,
+  },
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx b/packages/react/src/drafts/Skeleton/SkeletonBox.figma.tsx
new file mode 100644
index 00000000000..58b1e2dbf56
--- /dev/null
+++ b/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 */} />,
+  },
+)
diff --git a/packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx b/packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx
new file mode 100644
index 00000000000..49de0372403
--- /dev/null
+++ b/packages/react/src/drafts/Skeleton/SkeletonText.figma.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import {SkeletonText} from '../../../src/drafts'
+import figma from '@figma/code-connect'
+
+const props = {
+  size: figma.enum('size', {
+    display: 'display',
+    titleLarge: 'titleLarge',
+    titleMedium: 'titleMedium',
+    titleSmall: 'titleSmall',
+    bodyLarge: 'bodyLarge',
+    bodyMedium: 'bodyMedium',
+    bodySmall: 'bodySmall',
+    subtitle: 'subtitle',
+  }),
+}
+
+figma.connect(SkeletonText, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6946&m=dev', {
+  props,
+  example: ({size}) => <SkeletonText size={size} />,
+})
+
+figma.connect(undefined, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props: {
+    size: figma.enum('size', {
+      display: 'display',
+      titleLarge: 'titleLarge',
+      titleMedium: 'titleMedium',
+      titleSmall: 'titleSmall',
+      bodyLarge: 'bodyLarge',
+      bodyMedium: 'bodyMedium',
+      bodySmall: 'bodySmall',
+      subtitle: 'subtitle',
+    }),
+  },
+  variant: {lines: '2'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})
+
+figma.connect('https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props,
+  variant: {lines: '3'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})
+
+figma.connect('https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props,
+  variant: {lines: '4'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})
+
+figma.connect('https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=30013-6984&m=dev', {
+  props,
+  variant: {lines: '5'},
+  example: ({size}) => (
+    <div>
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+      <SkeletonText size={size} />
+    </div>
+  ),
+})