feat: add Code Connect

.changeset/gold-bees-call.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/icons": patch
+---
+
+Add icons `binary`, `clock-x`, `flask-caution`, `flask-end`, `flask-pause`, `flask-play`, `flask-stop`, `flask-sync`, `flask-x`, `hash`, `sort-asc`, `sort-desc`, and `sparkles`

.github/workflows/code-connect.yml

@@ -0,0 +1,51 @@
+name: Figma Code Connect Publish
+
+on:
+  push:
+    paths:
+      - 'packages/components/figma/**'
+      - 'packages/icons/figma/**'
+    branches:
+      - main
+
+jobs:
+  code-connect:
+    name: Code Connect
+    # Prevents action from publishing on forks
+    if: github.repository == 'launchdarkly/launchpad-ui'
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+      contents: read
+    steps:
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          audience: https://github.com/launchdarkly
+          role-to-assume: ${{ vars.AWS_ROLE_ARN }}
+          aws-region: us-east-1
+
+      - uses: dkershner6/aws-ssm-getparameters-action@v2
+        with:
+          parameterPairs: |
+            /production/common/launchpad-ui/figma-access-token = FIGMA_ACCESS_TOKEN
+          withDecryption: 'true'
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: pnpm/action-setup@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Connect publish
+        run: pnpm figma connect publish --exit-on-unreadable-files

CONTRIBUTING.md

@@ -197,7 +197,8 @@ Simply run `pnpm generate component` and follow the prompts, and you'll be well
 
 - Add the SVG body content into a new symbol entry with id `lp-icon-{name}` in the `/src/image/sprite.svg` file in the `@launchpad/icons` package.
 - Add its `id` (minus prefix `lp-icon`) to the icons array in `/src/types.ts`.
-- Run `pnpm storybook` and visit the "Icons" page to ensure your icon was generated properly.
+- Run `pnpm storybook` and visit the `Components/Icons` page to ensure your icon was generated properly.
+- Run `pnpm nx run @launchpad-ui/icons:connect` (https://github.com/figma/code-connect/blob/main/cli/scripts/README.md) to update the icons Figma Code Connect file.
 
 ---
 

figma.config.json

@@ -0,0 +1,15 @@
+{
+	"codeConnect": {
+		"include": [
+			"packages/components/figma/**",
+			"packages/components/src/**",
+			"packages/icons/figma/**",
+			"packages/icons/src/**"
+		],
+		"parser": "react",
+		"importPaths": {
+			"packages/components/src/*": "@launchpad-ui/components",
+			"packages/icons/src/*": "@launchpad-ui/icons"
+		}
+	}
+}

package.json

@@ -41,6 +41,7 @@
 		"@commitlint/cli": "^19.7.1",
 		"@commitlint/config-conventional": "^19.7.1",
 		"@commitlint/types": "^19.5.0",
+		"@figma/code-connect": "1.3.1",
 		"@playwright/test": "^1.50.1",
 		"@storybook/addon-a11y": "^8.5.8",
 		"@storybook/addon-designs": "^8.2.0",
@@ -49,6 +50,7 @@
 		"@storybook/addon-themes": "^8.5.8",
 		"@storybook/blocks": "^8.5.8",
 		"@storybook/components": "^8.5.8",
+		"@storybook/manager-api": "^8.5.8",
 		"@storybook/react": "^8.5.8",
 		"@storybook/react-vite": "^8.5.8",
 		"@storybook/test": "^8.5.8",
@@ -82,6 +84,7 @@
 		"rollup-plugin-pure": "^0.2.1",
 		"storybook": "^8.5.8",
 		"storybook-addon-pseudo-states": "^4.0.2",
+		"tsx": "^4.19.3",
 		"typescript": "^5.7.2",
 		"typescript-plugin-css-modules": "^5.1.0",
 		"vite": "^6.1.0",

packages/components/figma/Button.figma.tsx

@@ -0,0 +1,51 @@
+import type { IconProps } from '@launchpad-ui/icons';
+import type { ButtonProps } from '../src';
+
+import figma from '@figma/code-connect';
+import { Icon } from '@launchpad-ui/icons';
+
+import { Button } from '../src';
+
+figma.connect(
+	Button,
+	'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/LaunchPad?node-id=1-27006',
+	{
+		props: {
+			hasIconLeft: figma.boolean('Has icon left', {
+				true: figma
+					.instance('Left icon')
+					.render<IconProps>(({ name }) => <Icon name={name} size="small" />),
+				false: undefined,
+			}),
+			hasIconRight: figma.boolean('Has icon right', {
+				true: figma
+					.instance('Right icon')
+					.render<IconProps>(({ name }) => <Icon name={name} size="small" />),
+				false: undefined,
+			}),
+			label: figma.string('Label'),
+			variant: figma.enum<ButtonProps['variant']>('Variant', {
+				Primary: 'primary',
+				Default: 'default',
+				Minimal: 'minimal',
+				Destructive: 'destructive',
+			}),
+			size: figma.enum<ButtonProps['size']>('Size', {
+				Small: 'small',
+				Medium: 'medium',
+				Large: 'large',
+			}),
+			isDisabled: figma.enum('State', { Disabled: true }),
+			isFocusVisible: figma.enum('State', { ':focus-visible': true }),
+			isHovered: figma.enum('State', { ':hover': true }),
+			isPressed: figma.enum('State', { ':active': true }),
+		},
+		example: ({ hasIconLeft, hasIconRight, label, variant, size, isDisabled }) => (
+			<Button variant={variant} size={size} isDisabled={isDisabled}>
+				{hasIconLeft}
+				{label}
+				{hasIconRight}
+			</Button>
+		),
+	},
+);

packages/components/figma/IconButton.figma.tsx

@@ -0,0 +1,38 @@
+import type { IconButtonProps } from '../src';
+
+import figma from '@figma/code-connect';
+
+import { IconButton } from '../src';
+
+figma.connect(
+	IconButton,
+	'https://www.figma.com/design/98HKKXL2dTle29ikJ3tzk7/LaunchPad?node-id=1-28835',
+	{
+		props: {
+			icon: figma.instance('Icon').getProps(),
+			variant: figma.enum<IconButtonProps['variant']>('Type', {
+				Primary: 'primary',
+				Default: 'default',
+				Minimal: 'minimal',
+				Destructive: 'destructive',
+			}),
+			size: figma.enum<IconButtonProps['size']>('Size', {
+				Small: 'small',
+				Medium: 'medium',
+			}),
+			isDisabled: figma.enum('State', { Disabled: true }),
+			isFocusVisible: figma.enum('State', { 'Focus visible': true }),
+			isHovered: figma.enum('State', { Hover: true }),
+			isPressed: figma.enum('State', { Active: true }),
+		},
+		example: ({ icon, variant, size, isDisabled }) => (
+			<IconButton
+				aria-label="label"
+				icon={icon.name}
+				variant={variant}
+				size={size}
+				isDisabled={isDisabled}
+			/>
+		),
+	},
+);