Breadcrumbの修正

README.md

@@ -203,7 +203,7 @@ Sparkle Design のバッジは、コンポーネントが Sparkle Design を使
 | ----------------- | ---- | --------- | ---------- | ------------------ | ------------- |
 | Avatar            | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Badge             | ✅   | ✅        | ✅         | ✅                 | ❌            |
-| Breadcrumb        | ✅   | ✅        | ✅         | ❌                 | ❌            |
+| Breadcrumb        | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Button            | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Calendar          | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Card              | ✅   | ✅        | ✅         | ❌                 | ❌            |

src/components/ui/breadcrumb/index.figma.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import figma from "@figma/code-connect";
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  BreadcrumbPage,
+} from "./index";
+
+/**
+ * -- 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
+ */
+
+/**
+ * 基本的なBreadcrumbナビゲーション
+ * en: Basic breadcrumb navigation
+ */
+figma.connect(
+  "breadcrumb",
+  "https://www.figma.com/design/UMKFYVERnT3YM5Ht8bLJkf/-all-playground?node-id=2755-25149&t=nSzq9SKlxNkN6D14-4",
+  {
+    props: {},
+    example: props => (
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>/</BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current Page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    ),
+  }
+);

src/components/ui/breadcrumb/index.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
 import {
   Breadcrumb,
   BreadcrumbList,
@@ -11,6 +12,9 @@ import {
 const meta: Meta<typeof Breadcrumb> = {
   title: "Components/Breadcrumb",
   component: Breadcrumb,
+  subcomponents: {
+    BreadcrumbLink,
+  },
   parameters: {
     layout: "centered",
   },
@@ -26,15 +30,34 @@ export const Default: Story = {
     <Breadcrumb>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          <BreadcrumbLink
+            href="/"
+            onClick={e => {
+              e.preventDefault();
+              action("breadcrumb link clicked")({ href: "/", label: "Home" });
+            }}
+          >
+            Home
+          </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+          <BreadcrumbLink
+            href="/link"
+            onClick={e => {
+              e.preventDefault();
+              action("breadcrumb link clicked")({
+                href: "/link",
+                label: "Link",
+              });
+            }}
+          >
+            Link
+          </BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator />
         <BreadcrumbItem>
-          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+          <BreadcrumbPage>Current Page</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>