eBay · calebnance · May 16, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/.gitignore b/.gitignore
@@ -25,4 +25,4 @@ junit.xml
 .xo-resources.json
 coverage
 /.vscode
-/storybook-static
+/storybook-static
diff --git a/README.md b/README.md
@@ -114,11 +114,32 @@ Example of usage:
 <EbayButton id="my-button" />
 ```
 
-### Issues
+## Issues
 
-Create an issue on github
+Create an [issue](/issues) on github
 
-## [Contributing](CONTRIBUTING.md)
+## Contributing
+
+View [contributing docs](CONTRIBUTING.md)
+
+## Figma Code Connect
+
+**Publishing**
+
+```
+npx figma connect publish --token <token>
+```
+
+**Unpublishing**
+
+```
+npx figma connect unpublish --token <token>
+```
+
+**Helpful links:**
+
+- [React Docs](https://github.com/figma/code-connect/blob/main/cli/README.md)
+- [SwiftUI Docs](https://github.com/figma/code-connect/blob/main/swiftui/README.md)
 
 ## Changelog
 

diff --git a/figma.config.json b/figma.config.json
@@ -0,0 +1,33 @@
+{
+  "codeConnect": {
+    "include": ["src/**/*.figma.tsx", "src/**/*.tsx"],
+    "exclude": ["test/**", "docs/**", "build/**"],
+
+    "react": {
+      "importPaths": {
+        "src/ebay-alert-dialog/*": "@ebay/ui-core-react/ebay-alert-dialog",
+        "src/ebay-badge/*": "@ebay/ui-core-react/ebay-badge",
+        "src/ebay-breadcrumbs/*": "@ebay/ui-core-react/ebay-breadcrumbs",
+        "src/ebay-button/*": "@ebay/ui-core-react/ebay-button",
+        "src/ebay-calendar/*": "@ebay/ui-core-react/ebay-calendar",
+        "src/ebay-checkbox/*": "@ebay/ui-core-react/ebay-checkbox",
+        "src/ebay-icon-button/*": "@ebay/ui-core-react/ebay-icon-button",
+        "src/ebay-page-notice/*": "@ebay/ui-core-react/ebay-page-notice",
+        "src/ebay-pagination/*": "@ebay/ui-core-react/ebay-pagination",
+        "src/ebay-progress-stepper/*": "@ebay/ui-core-react/ebay-progress-stepper",
+        "src/ebay-radio/*": "@ebay/ui-core-react/ebay-radio",
+        "src/ebay-select/*": "@ebay/ui-core-react/ebay-select",
+        "src/ebay-section-title/*": "@ebay/ui-core-react/ebay-section-title",
+        "src/ebay-signal/*": "@ebay/ui-core-react/ebay-signal",
+        "src/ebay-snackbar-dialog/*": "@ebay/ui-core-react/ebay-snackbar-dialog",
+        "src/ebay-switch/*": "@ebay/ui-core-react/ebay-switch",
+        "src/ebay-tabs/*": "@ebay/ui-core-react/ebay-tabs",
+        "src/ebay-textbox/*": "@ebay/ui-core-react/ebay-textbox",
+        "src/ebay-tooltip/*": "@ebay/ui-core-react/ebay-tooltip",
+        "src/ebay-tourtip/*": "@ebay/ui-core-react/ebay-tourtip",
+        "src/ebay-video/*": "@ebay/ui-core-react/ebay-video"
+      },
+      "paths": {}
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -17,6 +17,8 @@
     "storybook-node16": "storybook dev -p 9001 -c .storybook",
     "build-storybook": "storybook build",
     "storybook:publish": "NODE_OPTIONS=--openssl-legacy-provider yarn build-storybook --output-dir storybook-static/$(git branch --show-current) && gh-pages --add --message=\"Deploying to gh-pages from @ eBay/ebayui-core-react@$(git rev-parse --short HEAD) 🚀\" -d storybook-static",
+    "figma:publish": "npx figma connect publish --token $FIGMA_TOKEN",
+    "figma:unpublish": "npx figma connect unpublish --token $FIGMA_TOKEN",
     "test": "yarn jest",
     "build": "yarn typecheck && yarn tsc",
     "typecheck": "tsc --project tsconfig.typecheck.json",
@@ -62,6 +64,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.0.0",
     "@ebay/skin": "^17.0.0",
+    "@figma/code-connect": "^0.1.2",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@storybook/addon-a11y": "^7.6.12",
     "@storybook/addon-essentials": "^7.4.6",

diff --git a/src/ebay-alert-dialog/README.md b/src/ebay-alert-dialog/README.md
@@ -6,7 +6,7 @@
 ## Usage
 
 ```react
-<EbayAlertDialog open a11yClosetext="Close">
+<EbayAlertDialog open a11yCloseText="Close">
     <EbayDialogHeader>Heading</EbayDialogHeader>
     <p>Body content</p>
 </EbayAlertDialog>

diff --git a/src/ebay-alert-dialog/index.figma.tsx b/src/ebay-alert-dialog/index.figma.tsx
@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayAlertDialog } from '.'
+/* @ts-ignore: this is only to help code connect */
+import { EbayDialogHeader } from '@ebay/ui-core-react/ebay-dialog-base'
+
+figma.connect(
+    EbayAlertDialog,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=16420-100&m=dev',
+    {
+        props: {
+            Title: figma.string('Title'),
+            Body: figma.string('Body')
+        },
+        example: ({ Body, Title }) => (
+            <EbayAlertDialog open a11yCloseText="Close" confirmText="Confirm">
+                <EbayDialogHeader>{Title}</EbayDialogHeader>
+                <p>{Body}</p>
+            </EbayAlertDialog>
+        )
+    }
+)
diff --git a/src/ebay-badge/index.figma.tsx b/src/ebay-badge/index.figma.tsx
@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayBadge } from '.'
+
+figma.connect(
+    EbayBadge,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=38612-44629&m=dev',
+    {
+        props: {
+            label: figma.string('label')
+        },
+        example: ({ label }) => <EbayBadge number={label} />
+    }
+)
diff --git a/src/ebay-breadcrumbs/index.figma.tsx b/src/ebay-breadcrumbs/index.figma.tsx
@@ -0,0 +1,18 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayBreadcrumbs, EbayBreadcrumbItem } from '.'
+
+figma.connect(
+    EbayBreadcrumbs,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=67603-81724&m=dev',
+    {
+        example: () => (
+            <EbayBreadcrumbs a11yHeadingText="Page navigation">
+                <EbayBreadcrumbItem href="https://ebay.com">eBay</EbayBreadcrumbItem>
+                <EbayBreadcrumbItem href="https://ebay.com/cars">Auto Parts and Vehicles</EbayBreadcrumbItem>
+                <EbayBreadcrumbItem>Motors Parts and Accessories</EbayBreadcrumbItem>
+            </EbayBreadcrumbs>
+        )
+    }
+)
diff --git a/src/ebay-button/index.figma.tsx b/src/ebay-button/index.figma.tsx
@@ -0,0 +1,96 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayButton } from '.'
+
+// button
+figma.connect(
+    EbayButton,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=65849-91206&m=dev',
+    {
+        props: {
+            state: figma.enum('state', {
+                disabled: true,
+                enabled: false
+            }),
+            title: figma.string('Title'),
+            size: figma.enum('size', {
+                medium: 'regular',
+                small: 'small',
+                large: 'large'
+            })
+        },
+        example: ({ state, size, title }) => (
+            <EbayButton disabled={state} size={size} variant="standard">
+                {title}
+            </EbayButton>
+        )
+    }
+)
+
+// button destructive
+figma.connect(
+    EbayButton,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=129298-738861&m=dev',
+    {
+        props: {
+            state: figma.enum('state', {
+                disabled: true,
+                enabled: false
+            }),
+            title: figma.string('Title'),
+            size: figma.enum('size', {
+                medium: 'regular',
+                small: 'small',
+                large: 'large'
+            })
+        },
+        example: ({ state, size, title }) => (
+            <EbayButton disabled={state} size={size} variant="destructive">
+                {title}
+            </EbayButton>
+        )
+    }
+)
+
+// button branded
+figma.connect(
+    EbayButton,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=129776-224141&m=dev',
+    {
+        props: {
+            title: figma.string('Title'),
+            size: figma.enum('size', {
+                medium: 'regular',
+                small: 'small',
+                large: 'large'
+            })
+        },
+        example: ({ size, title }) => (
+            <EbayButton size={size}>
+                {title}
+            </EbayButton>
+        )
+    }
+)
+
+// button link (borderless)
+figma.connect(
+    EbayButton,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Design-System?node-id=109500-131885&m=dev',
+    {
+        props: {
+            title: figma.string('Title'),
+            size: figma.enum('size', {
+                medium: 'regular',
+                small: 'small',
+                large: 'large'
+            })
+        },
+        example: ({ size, title }) => (
+            <EbayButton size={size} borderless>
+                {title}
+            </EbayButton>
+        )
+    }
+)