-
Notifications
You must be signed in to change notification settings - Fork 12
/
va-accordion-uswds.stories.jsx
348 lines (324 loc) · 14 KB
/
va-accordion-uswds.stories.jsx
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
import React, { useState, useEffect } from 'react';
import {
getWebComponentDocs,
componentStructure,
propStructure,
StoryDocs,
} from './wc-helpers';
const accordionDocs = getWebComponentDocs('va-accordion');
const accordionItem = getWebComponentDocs('va-accordion-item');
export default {
title: 'USWDS/Accordion USWDS',
id: 'uswds/va-accordion',
subcomponents: componentStructure(accordionItem),
parameters: {
componentSubtitle: `va-accordion web component`,
docs: {
page: () => <StoryDocs data={accordionDocs} />,
},
},
};
const Template = args => (
<va-accordion {...args}>
<va-accordion-item id="first" header="First Amendment">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second" header="Second Amendment">
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third" header="Third Amendment">
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
);
const BorderedTemplate = args => {
return (
<va-accordion {...args}>
<va-accordion-item id="first" bordered="true" header="First Amendment">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second" bordered="true" header="Second Amendment">
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third" bordered="true" header="Third Amendment">
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
);
};
const TemplateSubheader = args => (
<va-accordion {...args}>
<va-accordion-item id="first" header="First Amendment" subheader="Subheader">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second" header="Second Amendment" subheader="Subheader">
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third" header="Third Amendment" subheader="Subheader">
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
);
const TemplateIconHeaders = args => (
<va-accordion {...args}>
<va-accordion-item id="first" header="First Amendment" subheader="Subheader">
<i slot="icon" className="fas fa-info-circle vads-u-color--green"/>
<i aria-hidden="true" className="fas fa-envelope" slot="subheader-icon"/>
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second" header="Second Amendment" subheader="Subheader">
<i slot="icon" className="fas fa-info-circle vads-u-color--green"/>
<i aria-hidden="true" className="fas fa-envelope" slot="subheader-icon"/>
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third" header="Third Amendment" subheader="Subheader">
<i slot="icon" className="fas fa-info-circle vads-u-color--green"/>
<i aria-hidden="true" className="fas fa-envelope" slot="subheader-icon"/>
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
);
const TemplateHeadlineSlot = args => (
<va-accordion {...args}>
<va-accordion-item id="first">
<h6 slot="headline">First Amendment</h6>
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second">
<h6 slot="headline">Second Amendment</h6>
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third">
<h6 slot="headline">Third Amendment</h6>
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
);
const TemplateLevel = args => (
<va-accordion {...args}>
<va-accordion-item level="5" id="first" header="First Amendment">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item level="5" id="second" header="Second Amendment">
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item level="5" id="third" header="Third Amendment">
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
);
const I18nTemplate = args => {
const [lang, setLang] = useState('en');
useEffect(() => {
document.querySelector('main').setAttribute('lang', lang);
}, [lang]);
return (
<div>
<va-button onClick={e => setLang('es')} text="Español"/>
<va-button onClick={e => setLang('en')} text="English"/>
<va-button onClick={e => setLang('tl')} text="Tagalog"/>
<va-accordion>
<va-accordion-item id="first" header="First Amendment">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of
speech, or of the press; or the right of the people peaceably to
assemble, and to petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second" header="Second Amendment">
<p>
A well regulated Militia, being necessary to the security of a free
State, the right of the people to keep and bear Arms, shall not be
infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third" header="Third Amendment">
<p>
No Soldier shall, in time of peace be quartered in any house, without
the consent of the Owner, nor in time of war, but in a manner to be
prescribed by law.
</p>
</va-accordion-item>
</va-accordion>
</div>
);
};
const ManyItemsTemplate = args => (
<va-accordion {...args}>
<va-accordion-item id="first" header="First Amendment">
<p>
Congress shall make no law respecting an establishment of religion, or
prohibiting the free exercise thereof; or abridging the freedom of speech,
or of the press; or the right of the people peaceably to assemble, and to
petition the Government for a redress of grievances.
</p>
</va-accordion-item>
<va-accordion-item id="second" header="Second Amendment">
<p>
A well regulated Militia, being necessary to the security of a free State,
the right of the people to keep and bear Arms, shall not be infringed.
</p>
</va-accordion-item>
<va-accordion-item id="third" header="Third Amendment">
<p>
No Soldier shall, in time of peace be quartered in any house, without the
consent of the Owner, nor in time of war, but in a manner to be prescribed by law.
</p>
</va-accordion-item>
<va-accordion-item id="fourth" header="Fourth Amendment">
<p>
The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures,
shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly
describing the place to be searched, and the persons or things to be seized.
</p>
</va-accordion-item>
<va-accordion-item id="fifth" header="Fifth Amendment">
<p>
No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury,
except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public danger;
nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any
criminal case to be a witness against himself, nor be deprived of life, liberty, or property, without due process of law; nor
shall private property be taken for public use, without just compensation.
</p>
</va-accordion-item>
<va-accordion-item id="sixth" header="Sixth Amendment">
<p>
In all criminal prosecutions, the accused shall enjoy the right to a speedy and public trial, by an impartial jury of the State
and district wherein the crime shall have been committed, which district shall have been previously ascertained by law, and to
be informed of the nature and cause of the accusation; to be confronted with the witnesses against him; to have compulsory process
for obtaining witnesses in his favor, and to have the Assistance of Counsel for his defence.
</p>
</va-accordion-item>
<va-accordion-item id="seventh" header="Seventh Amendment">
<p>
In Suits at common law, where the value in controversy shall exceed twenty dollars, the right of trial by jury shall be preserved,
and no fact tried by a jury, shall be otherwise re-examined in any Court of the United States, than according to the rules of the common law.
</p>
</va-accordion-item>
<va-accordion-item id="eighth" header="Eighth Amendment">
<p>
Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishments inflicted.
</p>
</va-accordion-item>
<va-accordion-item id="ninth" header="Ninth Amendment">
<p>
The enumeration in the Constitution, of certain rights, shall not be construed to deny or disparage others retained by the people.
</p>
</va-accordion-item>
<va-accordion-item id="tenth" header="Tenth Amendment">
<p>
The powers not delegated to the United States by the Constitution, nor prohibited by it to the States, are reserved to the States respectively, or to the people.
</p>
</va-accordion-item>
</va-accordion>
);
const defaultArgs = {
'bordered': false,
'open-single': undefined,
};
export const Default = Template.bind(null);
Default.args = {
...defaultArgs,
};
Default.argTypes = propStructure(accordionDocs);
export const SingleSelect = Template.bind(null);
SingleSelect.args = {
...defaultArgs,
'open-single': true,
};
export const Bordered = BorderedTemplate.bind(null);
Bordered.args = {
...defaultArgs,
bordered: true,
};
export const Subheader = TemplateSubheader.bind(null);
Subheader.args = {
...defaultArgs,
};
export const IconHeaders = TemplateIconHeaders.bind(null);
IconHeaders.args = {
...defaultArgs,
};
export const HeadlineSlot = TemplateHeadlineSlot.bind(null);
HeadlineSlot.args = {
...defaultArgs,
};
export const CustomHeaderLevel = TemplateLevel.bind(null);
CustomHeaderLevel.args = {
...defaultArgs
}
export const Internationalization = I18nTemplate.bind(null);
Internationalization.args = {
...defaultArgs,
};
export const ManyAccordions = ManyItemsTemplate.bind(null);
ManyAccordions.args = {
...defaultArgs,
};