133 lines
3.2 KiB
TypeScript
133 lines
3.2 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
|
|
|
|
import { RTETypeEnum } from "../JsonToHtml/types/rte/enums"
|
|
import type { RTENode } from "../JsonToHtml/types/rte/node"
|
|
import { UspCard } from "./UspCard"
|
|
import { USP_ICON_NAMES } from "./utils"
|
|
|
|
const DEFAULT_ARGS = {
|
|
nodes: [
|
|
{
|
|
uid: "paragraph",
|
|
attrs: { type: "asset" },
|
|
type: RTETypeEnum.p,
|
|
children: [
|
|
{
|
|
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae neque non ipsum efficitur hendrerit at ut nulla.",
|
|
},
|
|
],
|
|
},
|
|
] satisfies RTENode[],
|
|
embeds: [],
|
|
}
|
|
|
|
const meta: Meta<typeof UspCard> = {
|
|
title: "Core Components/Cards/UspCard",
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"The card itself does not have a maximum width, but it will adapt to the width of its container. The card should be used together with other usp cards. It is recommended to use the UspCard inside a grid or a container with a set maximum width for best results.",
|
|
},
|
|
},
|
|
},
|
|
component: UspCard,
|
|
argTypes: {
|
|
iconName: {
|
|
control: "select",
|
|
options: USP_ICON_NAMES,
|
|
table: {
|
|
type: {
|
|
summary: USP_ICON_NAMES.join(" | "),
|
|
},
|
|
defaultValue: { summary: "Snowflake" },
|
|
},
|
|
},
|
|
embeds: {
|
|
control: "object",
|
|
description:
|
|
"The embeds used by the JsonToHtml component to render rich text content. This data comes from the RTE field in the CMS.",
|
|
table: {
|
|
type: { summary: "Node<Embeds>[]" },
|
|
},
|
|
},
|
|
nodes: {
|
|
control: "object",
|
|
description:
|
|
"The nodes used by the JsonToHtml component to render rich text content. This data comes from the RTE field in the CMS.",
|
|
table: {
|
|
type: { summary: "RTENode[]" },
|
|
},
|
|
},
|
|
},
|
|
args: { ...DEFAULT_ARGS },
|
|
decorators: [
|
|
(Story, context) => {
|
|
const showMultipleStyles = ["multiple cards", "different icons"].some(
|
|
(substring) => context.name.toLowerCase().includes(substring)
|
|
)
|
|
if (showMultipleStyles) {
|
|
return <Story />
|
|
}
|
|
|
|
return (
|
|
<div style={{ maxWidth: "400px" }}>
|
|
<Story />
|
|
</div>
|
|
)
|
|
},
|
|
],
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof UspCard>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
...meta.args,
|
|
},
|
|
}
|
|
|
|
export const MultipleCards: Story = {
|
|
args: {
|
|
...meta.args,
|
|
},
|
|
render: (args) => (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(3, 1fr)",
|
|
gap: "16px",
|
|
width: "min(800px, 100%)",
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
<UspCard {...args} />
|
|
<UspCard {...args} />
|
|
<UspCard {...args} />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
export const DifferentIcons: Story = {
|
|
args: {
|
|
...meta.args,
|
|
},
|
|
render: (args) => (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(3, 1fr)",
|
|
gap: "16px",
|
|
width: "min(800px, 100%)",
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
<UspCard {...args} iconName={USP_ICON_NAMES[0]} />
|
|
<UspCard {...args} iconName={USP_ICON_NAMES[1]} />
|
|
<UspCard {...args} iconName={USP_ICON_NAMES[2]} />
|
|
</div>
|
|
),
|
|
}
|