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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import { Description } from './description';
import { DescriptionList } from './description-list';
import { Group } from './group';
import { Term } from './term';
/**
* DescriptionList - Storybook Meta
*/
export default {
title: 'Atoms/Lists/DescriptionList',
component: DescriptionList,
args: {
isInline: false,
},
argTypes: {
className: {
control: {
type: 'text',
},
description: 'Set additional classnames to the list wrapper',
table: {
category: 'Styles',
},
type: {
name: 'string',
required: false,
},
},
},
} as ComponentMeta<typeof DescriptionList>;
const Template: ComponentStory<typeof DescriptionList> = (args) => (
<DescriptionList {...args} />
);
/**
* Description List Stories - Single term, single description
*/
export const SingleTermSingleDescription = Template.bind({});
SingleTermSingleDescription.args = {
children: (
<>
<Term>A term</Term>
<Description>A description of the term.</Description>
</>
),
};
/**
* Description List Stories - Multiple terms, single description
*/
export const MultipleTermsSingleDescription = Template.bind({});
MultipleTermsSingleDescription.args = {
children: (
<>
<Term>A first term</Term>
<Term>A second term</Term>
<Term>A third term</Term>
<Description>A description of the term.</Description>
</>
),
};
/**
* Description List Stories - Single term, multiple descriptions
*/
export const SingleTermMultipleDescriptions = Template.bind({});
SingleTermMultipleDescriptions.args = {
children: (
<>
<Term>A term</Term>
<Description>A first description of the term.</Description>
<Description>A second description of the term.</Description>
<Description>A third description of the term.</Description>
</>
),
};
/**
* Description List Stories - Multiple terms, multiple descriptions
*/
export const MultipleTermsMultipleDescriptions = Template.bind({});
MultipleTermsMultipleDescriptions.args = {
children: (
<>
<Term>A first term</Term>
<Term>A second term</Term>
<Term>A third term</Term>
<Description>A first description of the term.</Description>
<Description>A second description of the term.</Description>
<Description>A third description of the term.</Description>
</>
),
};
/**
* Description List Stories - Group of terms & descriptions
*/
export const GroupOfTermsDescriptions = Template.bind({});
GroupOfTermsDescriptions.args = {
children: (
<>
<Group>
<Term>A term</Term>
<Description>A description of the term.</Description>
</Group>
<Group>
<Term>Another term</Term>
<Description>A description of the other term.</Description>
</Group>
</>
),
};
/**
* Description List Stories - Inlined list of term and descriptions
*/
export const InlinedList = Template.bind({});
InlinedList.args = {
children: (
<>
<Term>A term:</Term>
<Description>A first description of the term.</Description>
<Description>A second description of the term.</Description>
<Description>A third description of the term.</Description>
</>
),
isInline: true,
spacing: 'xs',
};
/**
* Description List Stories - Inlined group of terms & descriptions
*/
export const InlinedGroupOfTermsDescriptions = Template.bind({});
InlinedGroupOfTermsDescriptions.args = {
children: (
<>
<Group isInline spacing="2xs">
<Term>A term:</Term>
<Description>A description of the term.</Description>
</Group>
<Group isInline spacing="2xs">
<Term>Another term:</Term>
<Description>A description of the other term.</Description>
</Group>
</>
),
};
|
