1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { Card, CardBody, CardHeader, CardTitle } from '../../molecules';
import {
CardsList as CardsListComponent,
type CardsListItem,
} from './cards-list';
/**
* CardsList - Storybook Meta
*/
export default {
title: 'Organisms/Layout',
component: CardsListComponent,
argTypes: {
items: {
description: 'The cards data.',
type: {
name: 'object',
required: true,
value: {},
},
},
isOrdered: {
control: {
type: 'boolean',
},
description: 'Should the list be ordered?',
table: {
category: 'Options',
defaultValue: { summary: false },
},
type: {
name: 'boolean',
required: false,
},
},
},
} as ComponentMeta<typeof CardsListComponent>;
const Template: ComponentStory<typeof CardsListComponent> = (args) => (
<CardsListComponent {...args} />
);
const items: CardsListItem[] = [
{
id: 'card-1',
card: (
<Card>
<CardHeader>
<CardTitle>Et alias omnis</CardTitle>
</CardHeader>
<CardBody>
Rerum voluptatem sint sint sit dignissimos. Labore totam possimus
tempore atque veniam. Doloremque tenetur quidem beatae veritatis quo.
Quaerat voluptatem deleniti voluptas quia. Qui voluptatem iure iste
expedita et sed beatae.
</CardBody>
</Card>
),
},
{
id: 'card-2',
card: (
<Card>
<CardHeader>
<CardTitle>Fugiat magnam nesciunt</CardTitle>
</CardHeader>
<CardBody>
Sit corporis animi ea. Earum asperiores error et. Aliquid quia et
consequatur. Magnam sit ut facere explicabo vel dolorem earum
assumenda. Aspernatur inventore quod libero est.
</CardBody>
</Card>
),
},
{
id: 'card-3',
card: (
<Card>
<CardHeader>
<CardTitle>Asperiores eum quas</CardTitle>
</CardHeader>
<CardBody>
Doloremque ut cupiditate distinctio aperiam. Neque tempora unde
perferendis asperiores. Doloremque velit vel quam. Temporibus itaque
non non exercitationem.
</CardBody>
</Card>
),
},
];
/**
* Layout Stories - Cards list
*/
export const CardsList = Template.bind({});
CardsList.args = {
items,
};
|
