adilallo
98 lines
1.8 KiB
JavaScript
98 lines
1.8 KiB
JavaScript
import List from "../../app/components/layout/List";
|
|
|
|
const fiveItems = [
|
|
{
|
|
id: "1",
|
|
title: "Item",
|
|
description: "Description/text only option here.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Item",
|
|
description: "Description/text only option here.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Item",
|
|
description: "Description/text only option here.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Item",
|
|
description: "Description/text only option here.",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Item",
|
|
description: "Description/text only option here.",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
export default {
|
|
title: "Components/Layout/List",
|
|
component: List,
|
|
parameters: {
|
|
layout: "fullscreen",
|
|
backgrounds: { default: "dark" },
|
|
docs: {
|
|
description: {
|
|
component:
|
|
"Figma list frames: S (21863:45631), M (21863:45493), L (21844:4405). Built from ListEntry (21844:4118).",
|
|
},
|
|
},
|
|
},
|
|
decorators: [
|
|
(Story) => (
|
|
<div className="min-h-[480px] bg-[var(--color-surface-default-primary)] p-6">
|
|
<div className="mx-auto max-w-[1044px]">
|
|
<Story />
|
|
</div>
|
|
</div>
|
|
),
|
|
],
|
|
argTypes: {
|
|
size: { control: { type: "select" }, options: ["s", "m", "l"] },
|
|
topDivider: { control: { type: "boolean" } },
|
|
leadingIcon: {
|
|
control: { type: "select" },
|
|
options: ["edit", "mail", "warning"],
|
|
},
|
|
},
|
|
tags: ["autodocs"],
|
|
};
|
|
|
|
export const Default = {
|
|
args: {
|
|
items: fiveItems,
|
|
size: "m",
|
|
topDivider: true,
|
|
leadingIcon: "edit",
|
|
},
|
|
};
|
|
|
|
export const NoTopDivider = {
|
|
args: {
|
|
...Default.args,
|
|
topDivider: false,
|
|
},
|
|
};
|
|
|
|
export const Small = {
|
|
args: {
|
|
...Default.args,
|
|
size: "s",
|
|
},
|
|
};
|
|
|
|
export const Large = {
|
|
args: {
|
|
...Default.args,
|
|
size: "l",
|
|
},
|
|
};
|