updates cards text and image for code connect

.storybook/preview-head.html

@@ -7,6 +7,8 @@
 <style>
   #storybook-root {
     width: 100%;
+    display: grid;
+    place-items: center;
   }
 </style>
 

figma.config.json

@@ -1,12 +1,13 @@
 {
   "codeConnect": {
-    "include": ["src/ui/**"],
+    "include": ["src/ui/**", "src/blocks/**"],
     "exclude": [],
     "react": {
       "importPaths": {
+        "*": "ui",
+        "src/blocks/*": "blocks",
         "src/ui/**/*": "ui",
-        "src/icons/*": "icons",
-        "*": "ui"
+        "src/icons/*": "icons"
       }
     }
   }

src/blocks/Cards.figma.tsx

@@ -0,0 +1,69 @@
+import { figma } from "@figma/code-connect";
+import {
+  BasicCard,
+  PricingCard,
+  ProductInfoCard,
+  TestimonialCard,
+} from "./Cards";
+
+const FIGMA_URL_BASIC_CARD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=113-12732&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_PRODUCT_INFO_CARD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7753-4465&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_PRICING_CARD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7722-3736&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TESTIMONIAL_CARD =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7717-3946&t=piSsjqZPlyn7qp8D-11";
+
+figma.connect(BasicCard, FIGMA_URL_BASIC_CARD, {
+  props: {
+    media: figma.children(["Image", "Icon"]),
+    heading: figma.children("Text Heading"),
+    body: figma.children("Text"),
+    actions: figma.children("Button Group"),
+    variant: figma.enum("Variant", {
+      Stroke: "stroke",
+    }),
+  },
+  example: ({ actions, variant, heading, body, media }) => (
+    <BasicCard variant={variant} media={media}>
+      {heading}
+      {body}
+      {actions}
+    </BasicCard>
+  ),
+});
+figma.connect(ProductInfoCard, FIGMA_URL_PRODUCT_INFO_CARD, {
+  props: {
+    media: figma.children("Image"),
+    children: figma.children([
+      "Text Heading",
+      "Text Subheading",
+      "Text Title Page",
+      "Text",
+    ]),
+    actions: figma.children("Button Group"),
+  },
+  example: ({ actions, children, media }) => (
+    <ProductInfoCard media={media}>
+      {children}
+      {actions}
+    </ProductInfoCard>
+  ),
+});
+figma.connect(PricingCard, FIGMA_URL_PRICING_CARD, {
+  props: {
+    children: figma.children([
+      "Text Heading",
+      "Text Title Page",
+      "Text Small",
+      "Text List",
+      "Button Group",
+    ]),
+  },
+  example: ({ children }) => <PricingCard>{children}</PricingCard>,
+});
+figma.connect(TestimonialCard, FIGMA_URL_TESTIMONIAL_CARD, {
+  props: { children: figma.children(["Text Heading", "Avatar Block"]) },
+  example: ({ children }) => <TestimonialCard>{children}</TestimonialCard>,
+});

src/blocks/Cards.tsx

@@ -10,15 +10,15 @@ export function BasicCard(props: BasicCardProps) {
 
 export type PricingCardProps = Pick<CardProps, "children">;
 export function PricingCard(props: PricingCardProps) {
-  return <Card {...props} direction="vertical" variant="padded" />;
+  return <Card {...props} direction="vertical" variant="stroke" />;
 }
 
 export type ProductInfoCardProps = Pick<CardProps, "children" | "media">;
 export function ProductInfoCard(props: ProductInfoCardProps) {
-  return <Card {...props} direction="horizontal" variant="padded" />;
+  return <Card {...props} direction="horizontal" variant="stroke" />;
 }
 
 export type TestimonialCardProps = Pick<CardProps, "children">;
 export function TestimonialCard(props: TestimonialCardProps) {
-  return <Card {...props} direction="vertical" variant="padded" />;
+  return <Card {...props} direction="vertical" variant="stroke" />;
 }

src/ui/Button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { IconActivity, IconArrowLeft } from "icons";
 import { Button, ButtonGroup } from "ui/Button/Button";
-import { Grid } from "ui/Grid/Grid";
+import { Grid, GridItem } from "ui/Grid/Grid";
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -57,30 +57,36 @@ export const All: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Grid direction="column">
+      <Grid auto direction="column" gap="md">
         {["default", "purple", "blue", "teal"].map((theme) => (
-          <Grid>
-            <div key={theme} className={`sds-scheme-color-${theme}`}>
-              <Grid alignPrimary="center">
+          <div key={theme} className={`sds-scheme-color-${theme}`}>
+            <Grid auto alignPrimary="center" gap="md">
+              <GridItem>
                 <Button {...props}>
                   {children}
                   <IconActivity />
                 </Button>
+              </GridItem>
+              <GridItem>
                 <Button {...props} variant="secondary">
                   {children}
                   <IconActivity />
                 </Button>
+              </GridItem>
+              <GridItem>
                 <Button {...props} variant="stroke">
                   {children}
                   <IconActivity />
                 </Button>
+              </GridItem>
+              <GridItem>
                 <Button {...props} variant="subtle">
                   {children}
                   <IconActivity />
                 </Button>
-              </Grid>
-            </div>
-          </Grid>
+              </GridItem>
+            </Grid>
+          </div>
         ))}
       </Grid>
     );

src/ui/Card/Card.tsx

@@ -9,7 +9,7 @@ export type CardProps = ComponentPropsWithoutRef<"div"> & {
     "aria-label": string;
   };
   media?: React.ReactNode;
-  variant?: "default" | "padded";
+  variant?: "default" | "stroke" | "padded";
 };
 export function Card({
   children,

src/ui/Card/card.css

@@ -22,12 +22,21 @@
     }
   }
 
-  &.card-variant-padded {
+  &.card-variant-stroke {
     box-shadow: inset 0 0 0 var(--sds-responsive-border-width)
       var(--sds-color-border-default-default);
     padding: var(--sds-size-padding-xl);
   }
 
+  &.card-variant-padded {
+    background: var(--sds-color-bg-default-secondary);
+    padding: var(--sds-size-padding-xl);
+
+    &:has(.card-interaction[data-hovered]:not([data-focus-visible])) {
+      background: var(--sds-color-bg-default-secondary-hover);
+    }
+  }
+
   &:has(.card-interaction[data-hovered]:not([data-focus-visible])) {
     background: var(--sds-color-bg-default-default-hover);
   }

src/ui/Image/Image.figma.tsx

@@ -2,7 +2,7 @@ import figma from "@figma/code-connect";
 import { Image } from "./Image";
 
 const FIGMA_URL_IMAGE =
-  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=159-8617&t=F729DYhi7M0j9cGQ-11";
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=159-8617&m=dev";
 
 figma.connect(Image, FIGMA_URL_IMAGE, {
   props: {
@@ -11,12 +11,13 @@ figma.connect(Image, FIGMA_URL_IMAGE, {
       "1:1": "1-1",
       "4:3": "4-3",
     }),
+    src: figma.enum("Aspect ratio", {
+      "16:9": "https://picsum.photo/800/450",
+      "1:1": "https://picsum.photo/600/600",
+      "4:3": "https://picsum.photo/800/600",
+    }),
   },
-  example: ({ aspectRatio }) => (
-    <Image
-      aspectRatio={aspectRatio}
-      alt="Always use alt"
-      src="https://picsum.photo/600/500"
-    />
+  example: ({ aspectRatio, src }) => (
+    <Image aspectRatio={aspectRatio} alt="Always use alt" src={src} />
   ),
 });

src/ui/Text/Text.figma.tsx

@@ -1,12 +1,96 @@
 import figma from "@figma/code-connect";
-import { Text } from "./Text";
+import {
+  Text,
+  TextCode,
+  TextEmphasis,
+  TextHeading,
+  TextLink,
+  TextList,
+  TextListItem,
+  TextSmall,
+  TextStrong,
+  TextSubheading,
+  TextSubtitle,
+  TextTitleHero,
+  TextTitlePage,
+} from "./Text";
 
-const FIGMA_URL_BODY_BASE =
-  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8487&m=dev";
+const FIGMA_URL_TEXT_TITLE_HERO =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8491&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_TITLE_PAGE =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8490&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_SUBTITLE =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2103-22298&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_HEADING =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8488&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_SUBHEADING =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2103-22303&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8487&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_EMPHASIS =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8485&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_LINK =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8483&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_STRONG =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8486&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_SMALL =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2087-8484&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_CODE =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2104-22325&t=piSsjqZPlyn7qp8D-11";
+const FIGMA_URL_TEXT_LIST =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2010-10204&m=dev";
+const FIGMA_URL_TEXT_LIST_ITEM =
+  "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2077-11663&m=dev";
 
-figma.connect(Text, FIGMA_URL_BODY_BASE, {
-  props: {
-    text: figma.string("Text"),
-  },
+figma.connect(TextTitleHero, FIGMA_URL_TEXT_TITLE_HERO, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextTitleHero>{text}</TextTitleHero>,
+});
+figma.connect(TextTitlePage, FIGMA_URL_TEXT_TITLE_PAGE, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextTitlePage>{text}</TextTitlePage>,
+});
+figma.connect(TextSubtitle, FIGMA_URL_TEXT_SUBTITLE, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextSubtitle>{text}</TextSubtitle>,
+});
+figma.connect(TextHeading, FIGMA_URL_TEXT_HEADING, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextHeading>{text}</TextHeading>,
+});
+figma.connect(TextSubheading, FIGMA_URL_TEXT_SUBHEADING, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextSubheading>{text}</TextSubheading>,
+});
+figma.connect(Text, FIGMA_URL_TEXT, {
+  props: { text: figma.string("Text") },
   example: ({ text }) => <Text>{text}</Text>,
 });
+figma.connect(TextEmphasis, FIGMA_URL_TEXT_EMPHASIS, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextEmphasis>{text}</TextEmphasis>,
+});
+figma.connect(TextLink, FIGMA_URL_TEXT_LINK, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextLink href="#">{text}</TextLink>,
+});
+figma.connect(TextStrong, FIGMA_URL_TEXT_STRONG, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextStrong>{text}</TextStrong>,
+});
+figma.connect(TextSmall, FIGMA_URL_TEXT_SMALL, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextSmall>{text}</TextSmall>,
+});
+figma.connect(TextCode, FIGMA_URL_TEXT_CODE, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextCode>{text}</TextCode>,
+});
+figma.connect(TextList, FIGMA_URL_TEXT_LIST, {
+  props: { children: figma.children("Text List Item") },
+  example: ({ children }) => <TextList>{children}</TextList>,
+});
+figma.connect(TextListItem, FIGMA_URL_TEXT_LIST_ITEM, {
+  props: { text: figma.string("Text") },
+  example: ({ text }) => <TextListItem>{text}</TextListItem>,
+});