128 lines
2.9 KiB
TypeScript
128 lines
2.9 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
|
|
|
|
import { ContentCard } from "./ContentCard.tsx"
|
|
|
|
const IMAGE = {
|
|
id: 1,
|
|
url: "./img/img2.jpg",
|
|
title: "Placeholder image",
|
|
meta: {
|
|
alt: "Placeholder image",
|
|
caption: "This is a placeholder image",
|
|
},
|
|
focalPoint: { x: 50, y: 50 },
|
|
dimensions: { width: 1920, height: 1189, aspectRatio: 1.61 },
|
|
}
|
|
const IMAGE_2 = {
|
|
...IMAGE,
|
|
id: 2,
|
|
url: "./img/img3.jpg",
|
|
dimensions: { width: 1920, height: 2880, aspectRatio: 0.67 },
|
|
}
|
|
|
|
const DEFAULT_ARGS = {
|
|
heading: "Lorem ipsum",
|
|
bodyText:
|
|
"Dolor sit amet, consectetur adipiscing elit. Curabitur vitae neque non ipsum efficitur hendrerit at ut nulla.",
|
|
link: {
|
|
href: "#",
|
|
text: "Learn more",
|
|
},
|
|
image: IMAGE,
|
|
}
|
|
|
|
const meta: Meta<typeof ContentCard> = {
|
|
title: "Core Components/Cards/ContentCard",
|
|
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 is mostly used together with other content cards. It is recommended to use the ContentCard inside a grid or a container with a set maximum width for best results.",
|
|
},
|
|
},
|
|
},
|
|
component: ContentCard,
|
|
argTypes: {
|
|
heading: {
|
|
control: "text",
|
|
table: {
|
|
type: { summary: "string" },
|
|
},
|
|
},
|
|
bodyText: {
|
|
control: "text",
|
|
table: {
|
|
type: { summary: "string" },
|
|
},
|
|
},
|
|
promoText: {
|
|
control: "text",
|
|
table: {
|
|
type: { summary: "string | undefined" },
|
|
},
|
|
},
|
|
link: {
|
|
control: "object",
|
|
description:
|
|
"The link of where the card should navigate to. The whole card is clickable.",
|
|
table: {
|
|
type: {
|
|
summary:
|
|
"{href: string, openInNewTab?: boolean, isExternal?: boolean}",
|
|
},
|
|
},
|
|
},
|
|
image: {
|
|
control: "object",
|
|
table: {
|
|
type: {
|
|
summary: "ImageVaultAsset",
|
|
detail:
|
|
"{ id: number, url: string, meta: {alt?: string | null, caption?: string | null}, focalPoint: { x: number, y: number }, dimensions: { width: number, height: number, aspectRatio: number } }",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
args: { ...DEFAULT_ARGS },
|
|
globals: {
|
|
backgrounds: { default: "storybookLight" },
|
|
},
|
|
}
|
|
|
|
export default meta
|
|
|
|
type Story = StoryObj<typeof ContentCard>
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
...meta.args,
|
|
},
|
|
}
|
|
|
|
export const WithPromoText: Story = {
|
|
args: {
|
|
...meta.args,
|
|
promoText: "Popular choice",
|
|
},
|
|
}
|
|
|
|
export const MultipleCards: Story = {
|
|
args: {
|
|
...meta.args,
|
|
},
|
|
render: (args) => (
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "repeat(2, 1fr)",
|
|
gap: "16px",
|
|
width: "min(800px, 100%)",
|
|
margin: "0 auto",
|
|
}}
|
|
>
|
|
<ContentCard {...args} promoText="Popular choice" />
|
|
<ContentCard {...args} image={IMAGE_2} />
|
|
</div>
|
|
),
|
|
}
|