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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
import Summary from './summary';
/**
* Summary - Storybook Meta
*/
export default {
title: 'Organisms/Layout/Summary',
component: Summary,
args: {
titleLevel: 2,
},
argTypes: {
cover: {
description: 'The cover data.',
table: {
category: 'Options',
},
type: {
name: 'object',
required: false,
value: {},
},
},
excerpt: {
control: {
type: 'text',
},
description: 'The page excerpt.',
type: {
name: 'string',
required: true,
},
},
meta: {
description: 'The page metadata.',
type: {
name: 'object',
required: true,
value: {},
},
},
title: {
control: {
type: 'text',
},
description: 'The page title',
type: {
name: 'string',
required: true,
},
},
titleLevel: {
control: {
type: 'number',
min: 1,
max: 6,
},
description: 'The page title level (hn)',
table: {
category: 'Options',
defaultValue: { summary: 2 },
},
type: {
name: 'number',
required: false,
},
},
url: {
control: {
type: 'text',
},
description: 'The page url.',
type: {
name: 'string',
required: true,
},
},
},
} as ComponentMeta<typeof Summary>;
const Template: ComponentStory<typeof Summary> = (args) => (
<Summary {...args} />
);
const cover = {
alt: 'A cover',
height: 480,
src: 'http://placeimg.com/640/480',
width: 640,
unoptimized: true,
};
const meta = {
publication: { date: '2022-04-11' },
readingTime: '5 minutes',
thematics: [
<a key="cat-1" href="#">
Cat 1
</a>,
<a key="cat-2" href="#">
Cat 2
</a>,
],
commentsCount: '1 comment',
};
/**
* Summary Stories - Default
*/
export const Default = Template.bind({});
Default.args = {
excerpt:
'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.',
meta,
title: 'Odio odit necessitatibus',
url: '#',
};
/**
* Summary Stories - With cover
*/
export const WithCover = Template.bind({});
WithCover.args = {
cover,
excerpt:
'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.',
meta,
title: 'Odio odit necessitatibus',
url: '#',
};
|
