chore: Moved Breadcrumbs to design system and added stories

Approved-by: Bianca Widstam

packages/design-system/lib/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { themes } from "../../../.storybook/preview"
+import { Breadcrumbs } from "./Breadcrumbs"
+import { BreadcrumbsSkeleton } from "./BreadcrumbsSkeleton"
+import { Breadcrumb } from "./types"
+import { config } from "./variants"
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "Core Components/Breadcrumbs",
+  component: Breadcrumbs,
+  argTypes: {
+    breadcrumbs: {
+      table: {
+        type: { summary: "Breadcrumb[]" },
+      },
+    },
+    color: {
+      control: "select",
+      options: Object.keys(config.variants.color),
+      table: {
+        defaultValue: { summary: config.defaultVariants.color },
+        type: { summary: Object.keys(config.variants.color).join(" | ") },
+      },
+      description: "Sets the background color of the breadcrumbs component.",
+    },
+    size: {
+      control: "select",
+      options: Object.keys(config.variants.size),
+      table: {
+        defaultValue: { summary: config.defaultVariants.size },
+        type: { summary: Object.keys(config.variants.size).join(" | ") },
+      },
+      description:
+        "Sets the maximum width of the breadcrumbs component. The breadcrumbs will be centered.",
+    },
+    isThemed: {
+      control: "select",
+      options: Object.keys(config.variants.isThemed),
+      table: {
+        defaultValue: { summary: config.defaultVariants.isThemed.toString() },
+        type: { summary: Object.keys(config.variants.isThemed).join(" | ") },
+      },
+      description:
+        "Applies theming styles for mobile and/or desktop based on the selected option. This should only be used if the hotel theme is something else than Scandic.",
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof Breadcrumbs>
+
+const sampleBreadcrumbs: Breadcrumb[] = [
+  { uid: "home", title: "Home", href: "/" },
+  { uid: "category", title: "Category", href: "/category" },
+  { uid: "subcategory", title: "Subcategory", href: "/category/subcategory" },
+  {
+    uid: "subcategory2",
+    title: "Subcategory 2",
+    href: "/category/subcategory",
+  },
+  {
+    uid: "current-page",
+    title: "Current page",
+    href: "/category/subcategory/current-page",
+  },
+]
+
+export const Default: Story = {
+  args: {
+    breadcrumbs: sampleBreadcrumbs,
+  },
+}
+
+export const Transparent: Story = {
+  args: {
+    ...Default.args,
+    color: "transparent",
+  },
+}
+
+export const BackgroundPrimary: Story = {
+  args: {
+    ...Default.args,
+    color: "Background/Primary",
+  },
+}
+
+export const SurfaceSecondaryDefault: Story = {
+  args: {
+    ...Default.args,
+    color: "Surface/Secondary/Default",
+  },
+}
+
+export const Themed: Story = {
+  args: {
+    ...Default.args,
+    isThemed: true,
+  },
+  decorators: [
+    (Story) => (
+      <>
+        {Object.entries(themes.themes)
+          .filter(([key]) => key !== "Scandic")
+          .map(([key, value], ix) => {
+            return (
+              <div key={ix} className={value} style={{ padding: "1em 0" }}>
+                <h2 style={{ paddingBottom: "0.5em" }}>{key}</h2>
+                <Story />
+              </div>
+            )
+          })}
+      </>
+    ),
+  ],
+}
+
+export const Skeleton: Story = {
+  render: () => <BreadcrumbsSkeleton />,
+}
+
+export const MobileView: Story = {
+  globals: {
+    viewport: { value: "mobile1", isRotated: false },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "To view the mobile behavior of the Breadcrumbs component, open the story in story viewer and adjust the browser's viewport.",
+      },
+    },
+  },
+  args: {
+    ...Default.args,
+  },
+}