Add more examples

jpmorganchase · Nov 1, 2024 · 1211fe9 · 1211fe9
1 parent ed7f1eb
commit 1211fe9
Show file tree

Hide file tree

Showing 9 changed files with 356 additions and 171 deletions.
diff --git a/figma.config.json b/figma.config.json
@@ -5,6 +5,7 @@
       "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"

diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@changesets/cli": "^2.27.7",
     "@cypress/code-coverage": "^3.12.35",
     "@faker-js/faker": "^8.0.0",
-    "@figma/code-connect": "^1.2.0",
+    "@figma/code-connect": "^1.2.1",
     "@fontsource/open-sans": "^4.5.13",
     "@fontsource/pt-mono": "^5.0.12",
     "@mswjs/data": "^0.16.1",

diff --git a/packages/core/figma-src/Avatar.figma.tsx b/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" />
+    ),
+  },
+);
diff --git a/packages/core/figma-src/Banner.figma.tsx b/packages/core/figma-src/Banner.figma.tsx
@@ -0,0 +1,63 @@
+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
+figma.connect(
+  Banner,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=7997%3A78070",
+  {
+    props: {
+      // inlineContent: figma.instance("🔁 Inline content"), // Icon next to the close button
+      title: figma.boolean("👁️ Title", {
+        true: (
+          <Text>
+            <strong>{figma.string("✏️ Title")}</strong>
+          </Text>
+        ),
+        false: undefined,
+      }),
+      // inlineSwap: figma.boolean("👁️ Inline swap"),
+      contentArea: figma.boolean("👁️ Content area", {
+        true: figma.instance("🔁 Banner content"),
+        false: undefined,
+      }),
+      description: figma.string("✏️ Description"),
+      closeButton: figma.boolean("👁️ Close button", {
+        true: (
+          <BannerActions>
+            <Button aria-label="close" variant="secondary">
+              <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.title}
+            {props.description}
+            {props.contentArea}
+          </StackLayout>
+        </BannerContent>
+        {props.closeButton}
+      </Banner>
+    ),
+  },
+);
diff --git a/packages/core/figma-src/Button.figma.tsx b/packages/core/figma-src/Button.figma.tsx
@@ -1,6 +1,5 @@
-import React from "react";
-import { Button } from "../src/button/Button";
 import figma from "@figma/code-connect";
+import { Button } from "../src/button/Button";
 
 // Neutral - 5594:10494
 figma.connect(

diff --git a/packages/core/figma-src/Card.figma.tsx b/packages/core/figma-src/Card.figma.tsx
@@ -0,0 +1,23 @@
+import figma from "@figma/code-connect";
+import { InteractableCard } from "../src/interactable-card/";
+
+// Tertiary Interactable Card/Accent Left
+figma.connect(
+  InteractableCard,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=44325%3A4200",
+  {
+    props: {
+      // customContent: figma.boolean("Custom content"),
+      // contentArea: figma.boolean("Content area"),
+      state: figma.enum("State", {
+        Disabled: true,
+      }),
+      content: figma.children("*"),
+    },
+    example: (props) => (
+      <InteractableCard variant="tertiary" disabled={props.state} accent="left">
+        {props.content}
+      </InteractableCard>
+    ),
+  },
+);
diff --git a/packages/core/figma-src/Divider.figma.tsx b/packages/core/figma-src/Divider.figma.tsx
@@ -0,0 +1,31 @@
+import { Divider } from "../src/divider/Divider"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Divider,
+  "https://www.figma.com/design/ChsbbO7pLomT4F5H6tQyLP/Salt-(Next)-Components-%26-Patterns?node-id=28468%3A15200",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      orientation: figma.enum("Orientation", {
+        Horizontal: "horizontal",
+        Vertical: "vertical",
+      }),
+      variant: figma.enum("Variant", {
+        Primary: "primary",
+        Secondary: "secondary",
+        Tertiary: "tertiary",
+      }),
+    },
+    example: (props) => (
+      <Divider orientation={props.orientation} variant={props.variant} />
+    ),
+  },
+)
diff --git a/packages/core/figma-src/Tooltip.figma.tsx b/packages/core/figma-src/Tooltip.figma.tsx
@@ -16,14 +16,14 @@ figma.connect(
         Left: "left",
         Right: "right",
       }),
-      showIcon: figma.boolean("Show icon"),
+      hideIcon: figma.boolean("Show icon", { true: false, false: true }),
     },
     example: (props) => (
       <Tooltip
         placement={props.placement}
         content={props.content}
         status="info"
-        hideIcon={!props.showIcon}
+        hideIcon={props.hideIcon}
       >
         Your Trigger Component
       </Tooltip>
@@ -44,14 +44,14 @@ figma.connect(
         Left: "left",
         Right: "right",
       }),
-      showIcon: figma.boolean("Show icon"),
+      hideIcon: figma.boolean("Show icon", { true: false, false: true }),
     },
     example: (props) => (
       <Tooltip
         placement={props.placement}
         content={props.content}
         status="success"
-        hideIcon={!props.showIcon}
+        hideIcon={props.hideIcon}
       >
         Your Trigger Component
       </Tooltip>
@@ -73,14 +73,14 @@ figma.connect(
         Left: "left",
         Right: "right",
       }),
-      showIcon: figma.boolean("Show icon"),
+      hideIcon: figma.boolean("Show icon", { true: false, false: true }),
     },
     example: (props) => (
       <Tooltip
         placement={props.placement}
         content={props.content}
         status="warning"
-        hideIcon={!props.showIcon}
+        hideIcon={props.hideIcon}
       >
         Your Trigger Component
       </Tooltip>
@@ -102,14 +102,14 @@ figma.connect(
         Left: "left",
         Right: "right",
       }),
-      showIcon: figma.boolean("Show icon"),
+      hideIcon: figma.boolean("Show icon", { true: false, false: true }),
     },
     example: (props) => (
       <Tooltip
         placement={props.placement}
         content={props.content}
         status="error"
-        hideIcon={!props.showIcon}
+        hideIcon={props.hideIcon}
       >
         Your Trigger Component
       </Tooltip>
@@ -131,14 +131,9 @@ figma.connect(
         Left: "left",
         Right: "right",
       }),
-      showIcon: figma.boolean("Show icon"),
     },
     example: (props) => (
-      <Tooltip
-        placement={props.placement}
-        content={props.content}
-        hideIcon={!props.showIcon}
-      >
+      <Tooltip placement={props.placement} content={props.content}>
         Your Trigger Component
       </Tooltip>
     ),