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
132
133
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { useState } from 'react';
import { IntlProvider } from 'react-intl';
import HeadingButtonComponent from './heading-button';
/**
* HeadingButton - Storybook Meta
*/
export default {
title: 'Molecules/Buttons/HeadingButton',
component: HeadingButtonComponent,
argTypes: {
expanded: {
control: {
type: null,
},
description: 'Heading button state (plus or minus).',
type: {
name: 'boolean',
required: true,
},
},
level: {
control: {
type: 'number',
min: 1,
max: 6,
},
description: 'Heading level.',
type: {
name: 'number',
required: true,
},
},
setExpanded: {
control: {
type: null,
},
description: 'Callback function to set heading button state.',
type: {
name: 'function',
required: true,
},
},
title: {
control: {
type: 'text',
},
description: 'Heading title.',
type: {
name: 'string',
required: true,
},
},
},
decorators: [
(Story) => (
<IntlProvider locale="en">
<Story />
</IntlProvider>
),
],
} as ComponentMeta<typeof HeadingButtonComponent>;
const Template: ComponentStory<typeof HeadingButtonComponent> = ({
expanded,
setExpanded: _setExpanded,
...args
}) => {
const [isExpanded, setIsExpanded] = useState<boolean>(expanded);
return (
<HeadingButtonComponent
expanded={isExpanded}
setExpanded={setIsExpanded}
{...args}
/>
);
};
/**
* Heading Button Stories - Level 1
*/
export const Level1 = Template.bind({});
Level1.args = {
level: 1,
title: 'Your title',
};
/**
* Heading Button Stories - Level 2
*/
export const Level2 = Template.bind({});
Level2.args = {
level: 2,
title: 'Your title',
};
/**
* Heading Button Stories - Level 3
*/
export const Level3 = Template.bind({});
Level3.args = {
level: 3,
title: 'Your title',
};
/**
* Heading Button Stories - Level 4
*/
export const Level4 = Template.bind({});
Level4.args = {
level: 4,
title: 'Your title',
};
/**
* Heading Button Stories - Level 5
*/
export const Level5 = Template.bind({});
Level5.args = {
level: 5,
title: 'Your title',
};
/**
* Heading Button Stories - Level 6
*/
export const Level6 = Template.bind({});
Level6.args = {
level: 6,
title: 'Your title',
};
|
