[DNM] Figma code connect components

.gitignore

@@ -46,4 +46,8 @@ yarn-error.log*
 # Autogenerated CSS
 /docs/css/salt-core.css
 /docs/css/salt-lab.css
-/docs/css/salt-countries.css
+/docs/css/salt-countries.css
+
+# Figma code connect
+.env
+mockFigmaResponse.json

figma.config.json

@@ -0,0 +1,14 @@
+{
+  "codeConnect": {
+    "include": [
+      "packages/core/src/**/*.{tsx,jsx}",
+      "packages/core/figma-src/**/*.{tsx,jsx}",
+      "packages/icons/src/**/*.{tsx,jsx}"
+    ],
+    "exclude": ["**/__tests__/*.{tsx,jsx}"],
+    "importPaths": {
+      "packages/core/src/*": "@salt-ds/core",
+      "packages/icons/*": "@salt-ds/icons"
+    }
+  }
+}

package.json

@@ -45,6 +45,7 @@
     "@changesets/cli": "^2.27.7",
     "@cypress/code-coverage": "^3.13.6",
     "@faker-js/faker": "^8.0.0",
+    "@figma/code-connect": "^1.2.2",
     "@fontsource/open-sans": "^4.5.13",
     "@fontsource/pt-mono": "^5.0.12",
     "@mswjs/data": "^0.16.1",

packages/core/figma-src/Avatar.figma.tsx

@@ -0,0 +1,56 @@
+import figma from "@figma/code-connect";
+import { Avatar } from "../src/avatar/Avatar";
+
+// Icon - https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?m=auto&node-id=24377-78056
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=24377-78056",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "1x": 1,
+        "2x": 2,
+        "3x": 3,
+        "4x": 4,
+      }),
+    },
+    example: (props) => <Avatar size={props.size} />,
+  },
+);
+
+// Initials
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=24377%3A78140",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "1x": 1,
+        "2x": 2,
+        "3x": 3,
+        "4x": 4,
+      }),
+      // initialsValue: figma.string("Initials value"), // initialsValue in code is generated automatically
+    },
+    example: (props) => <Avatar size={props.size} name="Foo Bar" />,
+  },
+);
+
+// Image - https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?m=auto&node-id=5688-71628
+figma.connect(
+  Avatar,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=5688-71628",
+  {
+    props: {
+      size: figma.enum("Size", {
+        "1x": 1,
+        "2x": 2,
+        "3x": 3,
+        "4x": 4,
+      }),
+    },
+    example: (props) => (
+      <Avatar size={props.size} name="Foo Bar" src="/img/examples/avatar.png" />
+    ),
+  },
+);

packages/core/figma-src/Badge.figma.tsx

@@ -0,0 +1,32 @@
+import figma from "@figma/code-connect";
+import { Badge } from "../src/badge/Badge";
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Badge,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=9106%3A83184",
+  {
+    props: {
+      value: figma.string("Badge value"),
+      // No matching props could be found for these Figma properties:
+    },
+    example: ({ value }) => <Badge value={value} />,
+  },
+);
+
+// Manual created - Dot badge
+figma.connect(
+  Badge,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=31292-7021",
+  {
+    props: {},
+    example: () => <Badge />,
+  },
+);

packages/core/figma-src/Banner.figma.tsx

@@ -0,0 +1,100 @@
+import figma from "@figma/code-connect";
+import { CloseIcon } from "@salt-ds/icons";
+import { Banner } from "../src/banner/Banner";
+import {
+  BannerActions,
+  BannerContent,
+  Button,
+  StackLayout,
+  Text,
+} from "../src/index";
+
+// Warning https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?m=auto&node-id=7997-78021
+
+// Success Banner
+// Need to split to 2 blocks - see issue https://github.com/figma/code-connect/issues/200#issuecomment-2457330375
+figma.connect(
+  Banner,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=7997%3A78070",
+  {
+    variant: { "Show title": true },
+    props: {
+      // inlineContent: figma.instance("🔁 Inline content"), // Icon next to the close button
+      title: figma.string("Title text"),
+      // inlineSwap: figma.boolean("👁️ Inline swap"),
+      contentArea: figma.boolean("Content area", {
+        true: figma.instance("Banner content"),
+        false: undefined,
+      }),
+      description: figma.string("Description text"),
+      closeButton: figma.boolean("Close button", {
+        true: (
+          <BannerActions>
+            <Button aria-label="close" appearance="transparent">
+              <CloseIcon />
+            </Button>
+          </BannerActions>
+        ),
+        false: undefined,
+      }),
+      variant: figma.enum("Variant", {
+        Primary: "primary",
+        Secondary: "secondary",
+      }),
+    },
+    example: (props) => (
+      <Banner status="success" variant={props.variant}>
+        <BannerContent>
+          <StackLayout gap={1}>
+            <Text><strong>{props.title}</strong></Text>
+            {props.description}
+            {props.contentArea}
+          </StackLayout>
+        </BannerContent>
+        {props.closeButton}
+      </Banner>
+    ),
+  },
+);
+figma.connect(
+  Banner,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=7997%3A78070",
+  {
+    variant: { "Show title": false },
+    props: {
+      // inlineContent: figma.instance("🔁 Inline content"), // Icon next to the close button
+      // title: figma.string("Title text"),
+      // inlineSwap: figma.boolean("👁️ Inline swap"),
+      contentArea: figma.boolean("Content area", {
+        true: figma.instance("Banner content"),
+        false: undefined,
+      }),
+      description: figma.string("Description text"),
+      closeButton: figma.boolean("Close button", {
+        true: (
+          <BannerActions>
+            <Button aria-label="close" appearance="transparent">
+              <CloseIcon />
+            </Button>
+          </BannerActions>
+        ),
+        false: undefined,
+      }),
+      variant: figma.enum("Variant", {
+        Primary: "primary",
+        Secondary: "secondary",
+      }),
+    },
+    example: (props) => (
+      <Banner status="success" variant={props.variant}>
+        <BannerContent>
+          <StackLayout gap={1}>
+            {props.description}
+            {props.contentArea}
+          </StackLayout>
+        </BannerContent>
+        {props.closeButton}
+      </Banner>
+    ),
+  },
+);