eBay · calebnance · May 16, 2024 · May 17, 2024 · May 17, 2024 · May 17, 2024
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ junit.xml
 coverage
 /.vscode
 /storybook-static
+.env
diff --git a/CODE_CONNECT.md b/CODE_CONNECT.md
@@ -0,0 +1,18 @@
+# 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)
+-   [Icon linking](https://www.figma.com/code-connect-docs/react/#connecting-icons)
diff --git a/README.md b/README.md
@@ -122,11 +122,13 @@ 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)
 
 ## Changelog
 

diff --git a/figma.config.json b/figma.config.json
@@ -0,0 +1,35 @@
+{
+  "codeConnect": {
+    "include": ["src/**/*.figma.tsx", "src/**/*.tsx"],
+    "exclude": ["test/**", "docs/**", "build/**"],
+
+    "react": {
+      "importPaths": {
+          "src/ebay-accordion/__tests__/*": "@ebay/ui-core-react/ebay-accordion",
+          "src/ebay-alert-dialog/__tests__/*": "@ebay/ui-core-react/ebay-alert-dialog",
+          "src/ebay-badge/__tests__/*": "@ebay/ui-core-react/ebay-badge",
+          "src/ebay-breadcrumbs/__tests__/*": "@ebay/ui-core-react/ebay-breadcrumbs",
+          "src/ebay-button/__tests__/*": "@ebay/ui-core-react/ebay-button",
+          "src/ebay-calendar/__tests__/*": "@ebay/ui-core-react/ebay-calendar",
+          "src/ebay-carousel/__tests__/*": "@ebay/ui-core-react/ebay-carousel",
+          "src/ebay-icon-button/__tests__/*": "@ebay/ui-core-react/ebay-icon-button",
+          "src/ebay-page-notice/__tests__/*": "@ebay/ui-core-react/ebay-page-notice",
+          "src/ebay-pagination/__tests__/*": "@ebay/ui-core-react/ebay-pagination",
+          "src/ebay-progress-stepper/__tests__/*": "@ebay/ui-core-react/ebay-progress-stepper",
+          "src/ebay-radio/__tests__/*": "@ebay/ui-core-react/ebay-radio",
+          "src/ebay-select/__tests__/*": "@ebay/ui-core-react/ebay-select",
+          "src/ebay-section-title/__tests__/*": "@ebay/ui-core-react/ebay-section-title",
+          "src/ebay-signal/__tests__/*": "@ebay/ui-core-react/ebay-signal",
+          "src/ebay-skeleton/__tests__/*": "@ebay/ui-core-react/ebay-skeleton",
+          "src/ebay-snackbar-dialog/__tests__/*": "@ebay/ui-core-react/ebay-snackbar-dialog",
+          "src/ebay-switch/__tests__/*": "@ebay/ui-core-react/ebay-switch",
+          "src/ebay-tabs/__tests__/*": "@ebay/ui-core-react/ebay-tabs",
+          "src/ebay-textbox/__tests__/*": "@ebay/ui-core-react/ebay-textbox",
+          "src/ebay-tooltip/__tests__/*": "@ebay/ui-core-react/ebay-tooltip",
+          "src/ebay-tourtip/__tests__/*": "@ebay/ui-core-react/ebay-tourtip",
+          "src/ebay-video/__tests__/*": "@ebay/ui-core-react/ebay-video"
+      },
+      "paths": {}
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -26,6 +26,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 type:check && vite build",
     "type:check": "tsc --noEmit",
@@ -81,6 +83,7 @@
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.11",
     "@ebay/skin": "^19",
+    "@figma/code-connect": "^1.3.2",
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-a11y": "^7.6.12",

diff --git a/src/common/component-utils/forwardRef.tsx b/src/common/component-utils/forwardRef.tsx
@@ -7,6 +7,7 @@ const getDisplayName = <Props, >(Component: FC<Props>) => Component.displayName
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const withForwardRef = <Props, >(Component: FC<Props>) => {
     const ForwardRef = forwardRef<FC<Props>, Props>((props, ref) =>
+        // @ts-ignore
         <Component {...props} forwardedRef={ref} />)
 
     ForwardRef.displayName = getDisplayName<Props>(Component)

diff --git a/src/ebay-accordion/__tests__/index.figma.tsx b/src/ebay-accordion/__tests__/index.figma.tsx
@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayAccordion, EbayDetails } from '..'
+
+figma.connect(
+    EbayAccordion,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Evo-Design-System?node-id=256381-3831',
+    {
+        example: () => (
+            <EbayAccordion>
+                <EbayDetails text="Details summary">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </EbayDetails>
+
+                <EbayDetails text="Second summary">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
+                    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum.
+                </EbayDetails>
+            </EbayAccordion>
+        )
+    }
+)
diff --git a/src/ebay-alert-dialog/README.md b/src/ebay-alert-dialog/README.md
@@ -1,6 +1,7 @@
 # EbayAlertDialog
 
 ## Demo
+
 [Storybook](https://opensource.ebay.com/ebayui-core-react/main/?path=/story/dialogs-ebay-alert-dialog--default)
 
 ## Usage
@@ -14,23 +15,25 @@
 
 ## Attributes
 
-Name | Type | Stateful | Required | Description
---- | --- | --- | --- | ---
-`open` | Boolean | Yes | No | Whether dialog is open.
-`focus` | String | No | No | An id for an element which will receive focus when the drawer opens (defaults to close button).
-`a11yCloseText` | String | No | Yes | A11y text for close button and mask.
-`confirmText` | String  | No       | Yes      | Text for confirm button |
-`animated` | Boolean | Yes | No | Renders the dialog with an animation. Note that the dialog will always be present in the DOM
+| Name            | Type    | Stateful | Required | Description                                                                                     |
+| --------------- | ------- | -------- | -------- | ----------------------------------------------------------------------------------------------- |
+| `open`          | Boolean | Yes      | No       | Whether dialog is open.                                                                         |
+| `focus`         | String  | No       | No       | An id for an element which will receive focus when the drawer opens (defaults to close button). |
+| `a11yCloseText` | String  | No       | Yes      | A11y text for close button and mask.                                                            |
+| `confirmText`   | String  | No       | Yes      | Text for confirm button                                                                         |
+| `animated`      | Boolean | Yes      | No       | Renders the dialog with an animation. Note that the dialog will always be present in the DOM    |
 
 ## Events
 
-Event | Data | Description
---- |------| ---
-`onOpen` | () | triggered when dialog is opened
-`onConfirm` | () | triggered when confirm button is clicked
+| Event       | Data | Description                              |
+| ----------- | ---- | ---------------------------------------- |
+| `onOpen`    | ()   | triggered when dialog is opened          |
+| `onConfirm` | ()   | triggered when confirm button is clicked |
 
 ## EbayDialogHeader
+
 Will render a header content for the dialog. Will always render the header element even if this is not present
 
 ## EbayDialogFooter
+
 Will render the footer content for the dialog. If not present then will not have any footer.
diff --git a/src/ebay-alert-dialog/__tests__/index.figma.tsx b/src/ebay-alert-dialog/__tests__/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',
+    {
+        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/__tests__/index.figma.tsx b/src/ebay-badge/__tests__/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-Evo-Design-System?node-id=38612-44629',
+    {
+        props: {
+            number: figma.string('Number')
+        },
+        example: ({ number }) => <EbayBadge number={number} />
+    }
+)
diff --git a/src/ebay-breadcrumbs/__tests__/index.figma.tsx b/src/ebay-breadcrumbs/__tests__/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',
+    {
+        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/__tests__/index.figma.tsx b/src/ebay-button/__tests__/index.figma.tsx
@@ -0,0 +1,92 @@
+import figma from '@figma/code-connect'
+
+import React from 'react'
+import { EbayButton } from '..'
+
 // button
+figma.connect(
+    EbayButton,
+    'https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Evo-Design-System?node-id=65849-91206',
+    {
+        props: {
+            state: figma.enum('State', {
+                disabled: true,
+                enabled: false
+            }),
+            title: figma.string('Title'),
+            size: figma.enum('Size', {
+                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-Evo-Design-System?node-id=260004-7740',
+    {
+        props: {
+            state: figma.enum('State', {
+                disabled: true,
+                enabled: false
+            }),
+            title: figma.string('Title'),
+            size: figma.enum('Size', {
+                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',
+    {
+        props: {
+            title: figma.string('Title'),
+            size: figma.enum('Size', {
+                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',
+    {
+        props: {
+            title: figma.string('Title'),
+            size: figma.enum('Size', {
+                small: 'small',
+                large: 'large'
+            })
+        },
+        example: ({ size, title }) => (
+            <EbayButton size={size} borderless>
+                {title}
+            </EbayButton>
+        )
+    }
+)