140 lines
3.5 KiB
TypeScript
140 lines
3.5 KiB
TypeScript
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,
|
|
},
|
|
}
|