@sproutsocial/seeds-react-accordion 0.4.32 → 0.4.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/accordion.css +159 -0
  2. package/dist/esm/index.js +236 -78
  3. package/dist/esm/index.js.map +1 -1
  4. package/dist/index.d.mts +21 -10
  5. package/dist/index.d.ts +21 -10
  6. package/dist/index.js +235 -79
  7. package/dist/index.js.map +1 -1
  8. package/package.json +21 -10
  9. package/.eslintignore +0 -6
  10. package/.eslintrc.js +0 -4
  11. package/.turbo/turbo-build.log +0 -21
  12. package/CHANGELOG.md +0 -527
  13. package/jest.config.js +0 -9
  14. package/src/Accordion.stories.tsx +0 -844
  15. package/src/Accordion.tsx +0 -83
  16. package/src/AccordionContent.tsx +0 -23
  17. package/src/AccordionItem.tsx +0 -11
  18. package/src/AccordionTrigger.tsx +0 -161
  19. package/src/AccordionTypes.ts +0 -80
  20. package/src/__tests__/accordion.test.tsx +0 -536
  21. package/src/index.ts +0 -7
  22. package/src/styled.d.ts +0 -7
  23. package/src/styles.ts +0 -164
  24. package/tsconfig.json +0 -9
  25. package/tsup.config.ts +0 -12
package/src/Accordion.stories.tsx DELETED
@@ -1,844 +0,0 @@
1
- import React, { useState } from "react";
2
- import { type StoryFn, type Meta } from "@storybook/react";
3
- import { Accordion } from "./Accordion";
4
- import { AccordionTrigger } from "./AccordionTrigger";
5
- import { AccordionContent } from "./AccordionContent";
6
- import { AccordionItem } from "./AccordionItem";
7
- import { Box } from "@sproutsocial/seeds-react-box";
8
- import { Token } from "@sproutsocial/seeds-react-token";
9
- import { Text } from "@sproutsocial/seeds-react-text";
10
- import { Icon } from "@sproutsocial/seeds-react-icon";
11
- import styled from "styled-components";
12
-
13
- export default {
14
- title: "Components/Accordion",
15
- component: Accordion,
16
- } as Meta<typeof Accordion>;
17
-
18
- export const Default = {
19
- args: {
20
- defaultValue: ["section-1"],
21
- styled: true,
22
- },
23
- render: (args: any) => {
24
- return (
25
- <Accordion {...args}>
26
- <AccordionItem value="section-1">
27
- <AccordionTrigger title="Paint with Bob" />
28
- <AccordionContent>
29
- <Text.SmallBodyCopy as="p" mb={400}>
30
- We don't really know where this goes - and I'm not sure we really
31
- care. Paint anything you want on the canvas. Create your own
32
- world. We don't need any guidelines or formats. All we need to do
33
- is just let it flow right out of us. Use absolutely no pressure.
34
- Just like an angel's wing. In your imagination you can go anywhere
35
- you want. Every time you practice, you learn more.
36
- </Text.SmallBodyCopy>
37
- <Text.SmallBodyCopy as="p">
38
- A tree needs to be your friend if you're going to paint him. It's
39
- amazing what you can do with a little love in your heart. If there
40
- are two big trees, eventually there will be a little tree. Think
41
- about a cloud. Just float around and be there.
42
- </Text.SmallBodyCopy>
43
- </AccordionContent>
44
- </AccordionItem>
45
- </Accordion>
46
- );
47
- },
48
- };
49
-
50
- export const Configurable = {
51
- args: {
52
- defaultValue: ["section-1"],
53
- triggerPosition: "left",
54
- triggerIcon: <Icon className="triggerIcon" name="caret-down-solid" />,
55
- styled: true,
56
- },
57
- render: (args: any) => {
58
- return (
59
- <Accordion {...args}>
60
- <AccordionItem value="section-1">
61
- <AccordionTrigger title="Paint with Bob" />
62
- <AccordionContent>
63
- <Text.SmallBodyCopy as="p" mb={400}>
64
- We don't really know where this goes - and I'm not sure we really
65
- care. Paint anything you want on the canvas. Create your own
66
- world. We don't need any guidelines or formats. All we need to do
67
- is just let it flow right out of us. Use absolutely no pressure.
68
- Just like an angel's wing. In your imagination you can go anywhere
69
- you want. Every time you practice, you learn more.
70
- </Text.SmallBodyCopy>
71
- <Text.SmallBodyCopy as="p">
72
- A tree needs to be your friend if you're going to paint him. It's
73
- amazing what you can do with a little love in your heart. If there
74
- are two big trees, eventually there will be a little tree. Think
75
- about a cloud. Just float around and be there.
76
- </Text.SmallBodyCopy>
77
- </AccordionContent>
78
- </AccordionItem>
79
- </Accordion>
80
- );
81
- },
82
- };
83
-
84
- export const RelatedActions = {
85
- args: {
86
- defaultValue: ["section-1"],
87
- triggerPosition: "left",
88
- styled: true,
89
- },
90
- render: (args: any) => (
91
- <Box p={300} width="100%" height="100%" bg="app.background.base">
92
- <Accordion {...args}>
93
- <AccordionItem value="section-1">
94
- <AccordionTrigger
95
- title="Paint with Bob"
96
- overflowMenu={{
97
- items: [
98
- {
99
- id: "edit",
100
- iconName: "pencil-to-square-outline",
101
- children: "Edit",
102
- onClick: () => alert("Edit clicked"),
103
- },
104
- {
105
- id: "share",
106
- iconName: "arrow-up-from-bracket-outline",
107
- children: "Share",
108
- onClick: () => alert("Share clicked"),
109
- },
110
- {
111
- id: "archive",
112
- iconName: "folder-outline",
113
- children: "Archive",
114
- onClick: () => alert("Archive clicked"),
115
- },
116
- {
117
- id: "delete",
118
- iconName: "trash-outline",
119
- children: "Delete",
120
- onClick: () => alert("Delete clicked"),
121
- },
122
- ],
123
- }}
124
- relatedActions={[
125
- {
126
- iconName: "heart-outline",
127
- onClick: () => alert("Like clicked"),
128
- "aria-label": "Like",
129
- },
130
- {
131
- iconName: "alarm-clock",
132
- onClick: () => alert("Set alarm"),
133
- "aria-label": "Set alarm",
134
- },
135
- ]}
136
- />
137
- <AccordionContent>
138
- <Text.SmallBodyCopy as="p" mb={400}>
139
- We don't really know where this goes - and I'm not sure we really
140
- care. Paint anything you want on the canvas. Create your own
141
- world. We don't need any guidelines or formats. All we need to do
142
- is just let it flow right out of us. Use absolutely no pressure.
143
- Just like an angel's wing. In your imagination you can go anywhere
144
- you want. Every time you practice, you learn more.
145
- </Text.SmallBodyCopy>
146
- <Text.SmallBodyCopy as="p">
147
- A tree needs to be your friend if you're going to paint him. It's
148
- amazing what you can do with a little love in your heart. If there
149
- are two big trees, eventually there will be a little tree. Think
150
- about a cloud. Just float around and be there.
151
- </Text.SmallBodyCopy>
152
- </AccordionContent>
153
- </AccordionItem>
154
- <AccordionItem value="section-2">
155
- <AccordionTrigger
156
- title="Learn with Bob"
157
- relatedActions={[
158
- {
159
- iconName: "alarm-clock",
160
- onClick: () => alert("hello"),
161
- "aria-label": "Set alarm",
162
- },
163
- ]}
164
- rightSlot={
165
- <Box ml={300}>
166
- <Token mr={200} closeable={false}>
167
- Happy
168
- </Token>
169
- <Token closeable={false}>Trees</Token>
170
- </Box>
171
- }
172
- />
173
- <AccordionContent>
174
- <Text.SmallBodyCopy as="p" mb={400}>
175
- We don't really know where this goes - and I'm not sure we really
176
- care. Paint anything you want on the canvas. Create your own
177
- world. We don't need any guidelines or formats. All we need to do
178
- is just let it flow right out of us. Use absolutely no pressure.
179
- Just like an angel's wing. In your imagination you can go anywhere
180
- you want. Every time you practice, you learn more.
181
- </Text.SmallBodyCopy>
182
- <Text.SmallBodyCopy as="p">
183
- A tree needs to be your friend if you're going to paint him. It's
184
- amazing what you can do with a little love in your heart. If there
185
- are two big trees, eventually there will be a little tree. Think
186
- about a cloud. Just float around and be there.
187
- </Text.SmallBodyCopy>
188
- </AccordionContent>
189
- </AccordionItem>
190
- <AccordionItem value="section-3">
191
- <AccordionTrigger title="Laugh with Bob" />
192
- <AccordionContent>
193
- <Text.SmallBodyCopy as="p" mb={400}>
194
- We don't really know where this goes - and I'm not sure we really
195
- care. Paint anything you want on the canvas. Create your own
196
- world. We don't need any guidelines or formats. All we need to do
197
- is just let it flow right out of us. Use absolutely no pressure.
198
- Just like an angel's wing. In your imagination you can go anywhere
199
- you want. Every time you practice, you learn more.
200
- </Text.SmallBodyCopy>
201
- <Text.SmallBodyCopy as="p">
202
- A tree needs to be your friend if you're going to paint him. It's
203
- amazing what you can do with a little love in your heart. If there
204
- are two big trees, eventually there will be a little tree. Think
205
- about a cloud. Just float around and be there.
206
- </Text.SmallBodyCopy>
207
- </AccordionContent>
208
- </AccordionItem>
209
- </Accordion>
210
- </Box>
211
- ),
212
- };
213
-
214
- export const Styleable = {
215
- render: () => {
216
- return (
217
- <Accordion
218
- triggerPosition="left"
219
- triggerIcon={
220
- <Icon
221
- className="triggerIcon"
222
- name="chevron-down-outline"
223
- color="red.500"
224
- />
225
- }
226
- defaultValue={["section-1"]}
227
- styled={false}
228
- >
229
- <AccordionItem value="section-1">
230
- <AccordionTrigger
231
- title="Paint with Bob"
232
- bg="blue.100"
233
- p={400}
234
- color="red.500"
235
- fontWeight="bold"
236
- fontSize={900}
237
- relatedActions={[
238
- {
239
- iconName: "alarm-clock",
240
- onClick: () => alert("hello"),
241
- "aria-label": "Set alarm",
242
- },
243
- {
244
- iconName: "ellipsis-horizontal-outline",
245
- onClick: () => alert("goodbye"),
246
- "aria-label": "More options",
247
- },
248
- ]}
249
- />
250
- <AccordionContent bg="blue.300" p={400} typeScale={600}>
251
- We don't really know where this goes - and I'm not sure we really
252
- care. Paint anything you want on the canvas. Create your own world.
253
- We don't need any guidelines or formats. All we need to do is just
254
- let it flow right out of us. Use absolutely no pressure. Just like
255
- an angel's wing. In your imagination you can go anywhere you want.
256
- Every time you practice, you learn more.
257
- </AccordionContent>
258
- </AccordionItem>
259
- <AccordionItem value="section-2">
260
- <AccordionTrigger
261
- bg="red.300"
262
- p={400}
263
- title="Learn with Bob"
264
- relatedActions={[
265
- {
266
- iconName: "alarm-clock",
267
- onClick: () => alert("hello"),
268
- "aria-label": "Set alarm",
269
- },
270
- {
271
- iconName: "ellipsis-horizontal-outline",
272
- onClick: () => alert("goodbye"),
273
- "aria-label": "More options",
274
- },
275
- ]}
276
- />
277
- <AccordionContent bg="blue.300" p={400}>
278
- <Text.SmallBodyCopy as="p" mb={400}>
279
- We don't really know where this goes - and I'm not sure we really
280
- care. Paint anything you want on the canvas. Create your own
281
- world. We don't need any guidelines or formats. All we need to do
282
- is just let it flow right out of us. Use absolutely no pressure.
283
- Just like an angel's wing. In your imagination you can go anywhere
284
- you want. Every time you practice, you learn more.
285
- </Text.SmallBodyCopy>
286
- <Text.SmallBodyCopy as="p">
287
- We don't really know where this goes - and I'm not sure we really
288
- care. Paint anything you want on the canvas. Create your own
289
- world. We don't need any guidelines or formats. All we need to do
290
- is just let it flow right out of us. Use absolutely no pressure.
291
- Just like an angel's wing. In your imagination you can go anywhere
292
- you want. Every time you practice, you learn more.
293
- </Text.SmallBodyCopy>
294
- </AccordionContent>
295
- </AccordionItem>
296
- </Accordion>
297
- );
298
- },
299
- };
300
-
301
- const StyledTrigger = styled(AccordionTrigger)`
302
- background-color: blue;
303
- &:hover {
304
- background-color: green;
305
- }
306
- `;
307
-
308
- export const UsingStyledTrigger: StoryFn<typeof Accordion> = (args) => {
309
- return (
310
- <Accordion {...args}>
311
- <AccordionItem value="section-1">
312
- <StyledTrigger
313
- title="Paint with Bob"
314
- relatedActions={[
315
- {
316
- iconName: "alarm-clock",
317
- onClick: () => alert("hello"),
318
- "aria-label": "Set alarm",
319
- },
320
- {
321
- iconName: "ellipsis-horizontal-outline",
322
- onClick: () => alert("goodbye"),
323
- "aria-label": "More options",
324
- },
325
- ]}
326
- />
327
- <AccordionContent>
328
- <Text.SmallBodyCopy as="p" mb={400}>
329
- We don't really know where this goes - and I'm not sure we really
330
- care. Paint anything you want on the canvas. Create your own world.
331
- We don't need any guidelines or formats. All we need to do is just
332
- let it flow right out of us. Use absolutely no pressure. Just like
333
- an angel's wing. In your imagination you can go anywhere you want.
334
- Every time you practice, you learn more.
335
- </Text.SmallBodyCopy>
336
- <Text.SmallBodyCopy as="p">
337
- A tree needs to be your friend if you're going to paint him. It's
338
- amazing what you can do with a little love in your heart. If there
339
- are two big trees, eventually there will be a little tree. Think
340
- about a cloud. Just float around and be there.
341
- </Text.SmallBodyCopy>
342
- </AccordionContent>
343
- </AccordionItem>
344
- </Accordion>
345
- );
346
- };
347
-
348
- export const Single = {
349
- args: {
350
- defaultValue: ["section-1"],
351
- type: "single",
352
- styled: true,
353
- },
354
- render: (args: any) => (
355
- <Box p={300} width="100%" height="100%" bg="app.background.base">
356
- <Accordion {...args}>
357
- <AccordionItem value="section-1">
358
- <AccordionTrigger
359
- title="Paint with Bob"
360
- relatedActions={[
361
- {
362
- iconName: "alarm-clock",
363
- onClick: () => alert("hello"),
364
- "aria-label": "Set alarm",
365
- },
366
- {
367
- iconName: "ellipsis-horizontal-outline",
368
- onClick: () => alert("goodbye"),
369
- "aria-label": "More options",
370
- },
371
- ]}
372
- />
373
- <AccordionContent>
374
- <Text.SmallBodyCopy as="p" mb={400}>
375
- We don't really know where this goes - and I'm not sure we really
376
- care. Paint anything you want on the canvas. Create your own
377
- world. We don't need any guidelines or formats. All we need to do
378
- is just let it flow right out of us. Use absolutely no pressure.
379
- Just like an angel's wing. In your imagination you can go anywhere
380
- you want. Every time you practice, you learn more.
381
- </Text.SmallBodyCopy>
382
- <Text.SmallBodyCopy as="p">
383
- We don't really know where this goes - and I'm not sure we really
384
- care. Paint anything you want on the canvas. Create your own
385
- world. We don't need any guidelines or formats. All we need to do
386
- is just let it flow right out of us. Use absolutely no pressure.
387
- Just like an angel's wing. In your imagination you can go anywhere
388
- you want. Every time you practice, you learn more.
389
- </Text.SmallBodyCopy>
390
- </AccordionContent>
391
- </AccordionItem>
392
- <AccordionItem value="section-2">
393
- <AccordionTrigger
394
- title="Learn with Bob"
395
- relatedActions={[
396
- {
397
- iconName: "alarm-clock",
398
- onClick: () => alert("hello"),
399
- "aria-label": "Set alarm",
400
- },
401
- {
402
- iconName: "ellipsis-horizontal-outline",
403
- onClick: () => alert("goodbye"),
404
- "aria-label": "More options",
405
- },
406
- ]}
407
- rightSlot={
408
- <Box ml={300}>
409
- <Token mr={200} closeable={false}>
410
- Happy
411
- </Token>
412
- <Token closeable={false}>Trees</Token>
413
- </Box>
414
- }
415
- />
416
- <AccordionContent>
417
- <Text.SmallBodyCopy as="p" mb={400}>
418
- We don't really know where this goes - and I'm not sure we really
419
- care. Paint anything you want on the canvas. Create your own
420
- world. We don't need any guidelines or formats. All we need to do
421
- is just let it flow right out of us. Use absolutely no pressure.
422
- Just like an angel's wing. In your imagination you can go anywhere
423
- you want. Every time you practice, you learn more.
424
- </Text.SmallBodyCopy>
425
- <Text.SmallBodyCopy as="p">
426
- We don't really know where this goes - and I'm not sure we really
427
- care. Paint anything you want on the canvas. Create your own
428
- world. We don't need any guidelines or formats. All we need to do
429
- is just let it flow right out of us. Use absolutely no pressure.
430
- Just like an angel's wing. In your imagination you can go anywhere
431
- you want. Every time you practice, you learn more.
432
- </Text.SmallBodyCopy>
433
- </AccordionContent>
434
- </AccordionItem>
435
- <AccordionItem value="section-3">
436
- <AccordionTrigger title="Laugh with Bob" />
437
- <AccordionContent>
438
- <Text.SmallBodyCopy as="p" mb={400}>
439
- We don't really know where this goes - and I'm not sure we really
440
- care. Paint anything you want on the canvas. Create your own
441
- world. We don't need any guidelines or formats. All we need to do
442
- is just let it flow right out of us. Use absolutely no pressure.
443
- Just like an angel's wing. In your imagination you can go anywhere
444
- you want. Every time you practice, you learn more.
445
- </Text.SmallBodyCopy>
446
- <Text.SmallBodyCopy as="p">
447
- We don't really know where this goes - and I'm not sure we really
448
- care. Paint anything you want on the canvas. Create your own
449
- world. We don't need any guidelines or formats. All we need to do
450
- is just let it flow right out of us. Use absolutely no pressure.
451
- Just like an angel's wing. In your imagination you can go anywhere
452
- you want. Every time you practice, you learn more.
453
- </Text.SmallBodyCopy>
454
- </AccordionContent>
455
- </AccordionItem>
456
- </Accordion>
457
- </Box>
458
- ),
459
- };
460
-
461
- export const RenderTest = {
462
- args: {
463
- defaultValue: ["section-1"],
464
- styled: true,
465
- },
466
- render: (args: any) => {
467
- return (
468
- <>
469
- <Box mb={500}>
470
- <Accordion {...args}>
471
- <AccordionItem value="section-1">
472
- <AccordionTrigger title="Paint with Bob" />
473
- <AccordionContent>
474
- <Text.SmallBodyCopy as="p" mb={400}>
475
- We don't really know where this goes - and I'm not sure we
476
- really care. Paint anything you want on the canvas. Create
477
- your own world. We don't need any guidelines or formats. All
478
- we need to do is just let it flow right out of us. Use
479
- absolutely no pressure. Just like an angel's wing. In your
480
- imagination you can go anywhere you want. Every time you
481
- practice, you learn more.
482
- </Text.SmallBodyCopy>
483
- <Text.SmallBodyCopy as="p">
484
- We don't really know where this goes - and I'm not sure we
485
- really care. Paint anything you want on the canvas. Create
486
- your own world. We don't need any guidelines or formats. All
487
- we need to do is just let it flow right out of us. Use
488
- absolutely no pressure. Just like an angel's wing. In your
489
- imagination you can go anywhere you want. Every time you
490
- practice, you learn more.
491
- </Text.SmallBodyCopy>
492
- </AccordionContent>
493
- </AccordionItem>
494
- </Accordion>
495
- </Box>
496
-
497
- <Accordion
498
- triggerPosition="left"
499
- defaultValue={["section-1"]}
500
- styled={false}
501
- >
502
- <AccordionItem value="section-1">
503
- <AccordionTrigger title="Paint with Bob" bg="red.300" p={400} />
504
- <AccordionContent bg="blue.300" p={400}>
505
- <Text.SmallBodyCopy as="p" mb={400}>
506
- We don't really know where this goes - and I'm not sure we
507
- really care. Paint anything you want on the canvas. Create your
508
- own world. We don't need any guidelines or formats. All we need
509
- to do is just let it flow right out of us. Use absolutely no
510
- pressure. Just like an angel's wing. In your imagination you can
511
- go anywhere you want. Every time you practice, you learn more.
512
- </Text.SmallBodyCopy>
513
- <Text.SmallBodyCopy as="p">
514
- We don't really know where this goes - and I'm not sure we
515
- really care. Paint anything you want on the canvas. Create your
516
- own world. We don't need any guidelines or formats. All we need
517
- to do is just let it flow right out of us. Use absolutely no
518
- pressure. Just like an angel's wing. In your imagination you can
519
- go anywhere you want. Every time you practice, you learn more.
520
- </Text.SmallBodyCopy>
521
- </AccordionContent>
522
- </AccordionItem>
523
- <AccordionItem value="section-2">
524
- <AccordionTrigger
525
- bg="red.300"
526
- p={400}
527
- title="Learn with Bob"
528
- relatedActions={[
529
- {
530
- iconName: "alarm-clock",
531
- onClick: () => alert("hello"),
532
- "aria-label": "Set alarm",
533
- },
534
- {
535
- iconName: "ellipsis-horizontal-outline",
536
- onClick: () => alert("goodbye"),
537
- "aria-label": "More options",
538
- },
539
- ]}
540
- />
541
- <AccordionContent bg="blue.300" p={400}>
542
- <Text.SmallBodyCopy as="p" mb={400}>
543
- We don't really know where this goes - and I'm not sure we
544
- really care. Paint anything you want on the canvas. Create your
545
- own world. We don't need any guidelines or formats. All we need
546
- to do is just let it flow right out of us. Use absolutely no
547
- pressure. Just like an angel's wing. In your imagination you can
548
- go anywhere you want. Every time you practice, you learn more.
549
- </Text.SmallBodyCopy>
550
- <Text.SmallBodyCopy as="p">
551
- We don't really know where this goes - and I'm not sure we
552
- really care. Paint anything you want on the canvas. Create your
553
- own world. We don't need any guidelines or formats. All we need
554
- to do is just let it flow right out of us. Use absolutely no
555
- pressure. Just like an angel's wing. In your imagination you can
556
- go anywhere you want. Every time you practice, you learn more.
557
- </Text.SmallBodyCopy>
558
- </AccordionContent>
559
- </AccordionItem>
560
- </Accordion>
561
- </>
562
- );
563
- },
564
- };
565
-
566
- export const OverflowMenu = {
567
- name: "Overflow Menu",
568
- args: {
569
- defaultValue: ["section-1"],
570
- styled: true,
571
- },
572
- render: (args: any) => (
573
- <Box p={300} width="100%" height="100%" bg="app.background.base">
574
- <Accordion {...args}>
575
- <AccordionItem value="section-1">
576
- <AccordionTrigger
577
- title="Paint with Bob"
578
- overflowMenu={{
579
- items: [
580
- {
581
- id: "edit",
582
- iconName: "pencil-to-square-outline",
583
- children: "Edit",
584
- onClick: () => alert("Edit clicked"),
585
- },
586
- {
587
- id: "duplicate",
588
- iconName: "plus-outline",
589
- children: "Duplicate",
590
- onClick: () => alert("Duplicate clicked"),
591
- },
592
- {
593
- id: "delete",
594
- iconName: "trash-outline",
595
- children: "Delete",
596
- onClick: () => alert("Delete clicked"),
597
- },
598
- ],
599
- "aria-label": "More options for Paint with Bob",
600
- }}
601
- relatedActions={[
602
- {
603
- iconName: "alarm-clock",
604
- onClick: () => alert("Set alarm"),
605
- "aria-label": "Set alarm",
606
- },
607
- ]}
608
- />
609
- <AccordionContent>
610
- <Text.SmallBodyCopy as="p">
611
- We don't really know where this goes - and I'm not sure we really
612
- care. Paint anything you want on the canvas. Create your own
613
- world.
614
- </Text.SmallBodyCopy>
615
- </AccordionContent>
616
- </AccordionItem>
617
- </Accordion>
618
- </Box>
619
- ),
620
- };
621
-
622
- export const CustomHeadingLevels = {
623
- name: "Custom Heading Levels",
624
- args: {
625
- defaultValue: ["section-1"],
626
- styled: true,
627
- },
628
- render: (args: any) => (
629
- <Box p={300} width="100%" height="100%" bg="app.background.base">
630
- <Accordion {...args}>
631
- <AccordionItem value="section-1">
632
- <AccordionTrigger title="Section with h2 Heading" headingLevel="h2" />
633
- <AccordionContent>
634
- <Text.SmallBodyCopy as="p" mb={400}>
635
- This accordion item uses an h2 heading for semantic hierarchy.
636
- Inspect the DOM to verify the heading level.
637
- </Text.SmallBodyCopy>
638
- </AccordionContent>
639
- </AccordionItem>
640
- <AccordionItem value="section-2">
641
- <AccordionTrigger title="Section with h3 Heading" headingLevel="h3" />
642
- <AccordionContent>
643
- <Text.SmallBodyCopy as="p" mb={400}>
644
- This accordion item uses an h3 heading for semantic hierarchy.
645
- Inspect the DOM to verify the heading level.
646
- </Text.SmallBodyCopy>
647
- </AccordionContent>
648
- </AccordionItem>
649
- <AccordionItem value="section-3">
650
- <AccordionTrigger
651
- title="Section with h4 Heading (explicit)"
652
- headingLevel="h4"
653
- />
654
- <AccordionContent>
655
- <Text.SmallBodyCopy as="p" mb={400}>
656
- This accordion item explicitly sets h4 as the heading level.
657
- </Text.SmallBodyCopy>
658
- </AccordionContent>
659
- </AccordionItem>
660
- </Accordion>
661
- </Box>
662
- ),
663
- };
664
-
665
- export const BackwardsCompatibility = {
666
- name: "No headingLevel prop supplied",
667
- args: {
668
- defaultValue: ["section-1"],
669
- styled: true,
670
- },
671
- render: (args: any) => (
672
- <Box p={300} width="100%" height="100%" bg="app.background.base">
673
- <Accordion {...args}>
674
- <AccordionItem value="section-1">
675
- <AccordionTrigger title="Default h4 Heading" />
676
- <AccordionContent>
677
- <Text.SmallBodyCopy as="p" mb={400}>
678
- This accordion item does not specify a headingLevel prop, so it
679
- defaults to h4 for backwards compatibility. Inspect the DOM to
680
- verify it renders as an h4 element.
681
- </Text.SmallBodyCopy>
682
- </AccordionContent>
683
- </AccordionItem>
684
- <AccordionItem value="section-2">
685
- <AccordionTrigger
686
- title="Another Default Accordion"
687
- relatedActions={[
688
- {
689
- iconName: "alarm-clock",
690
- onClick: () => alert("hello"),
691
- "aria-label": "Set alarm",
692
- },
693
- ]}
694
- />
695
- <AccordionContent>
696
- <Text.SmallBodyCopy as="p" mb={400}>
697
- This verifies that existing accordions continue to work without
698
- any changes needed. The heading defaults to h4.
699
- </Text.SmallBodyCopy>
700
- </AccordionContent>
701
- </AccordionItem>
702
- </Accordion>
703
- </Box>
704
- ),
705
- };
706
-
707
- export const ControlledSingle = {
708
- name: "Controlled (Single Mode)",
709
- render: () => {
710
- const [value, setValue] = useState<string>("section-1");
711
-
712
- return (
713
- <Box p={300}>
714
- <Text.SmallBodyCopy as="p" mb={400}>
715
- Currently open: <strong>{value || "none"}</strong>
716
- </Text.SmallBodyCopy>
717
- <Accordion
718
- type="single"
719
- collapsible
720
- value={value}
721
- onValueChange={(newValue) => setValue(newValue as string)}
722
- >
723
- <AccordionItem value="section-1">
724
- <AccordionTrigger title="Section 1" />
725
- <AccordionContent>
726
- <Text.SmallBodyCopy as="p">
727
- This accordion is controlled externally. The parent component
728
- manages which section is open using state.
729
- </Text.SmallBodyCopy>
730
- </AccordionContent>
731
- </AccordionItem>
732
- <AccordionItem value="section-2">
733
- <AccordionTrigger title="Section 2" />
734
- <AccordionContent>
735
- <Text.SmallBodyCopy as="p">
736
- When you click between sections, the state updates in the parent
737
- component and is reflected here.
738
- </Text.SmallBodyCopy>
739
- </AccordionContent>
740
- </AccordionItem>
741
- <AccordionItem value="section-3">
742
- <AccordionTrigger title="Section 3" />
743
- <AccordionContent>
744
- <Text.SmallBodyCopy as="p">
745
- This allows you to programmatically control which section is
746
- open or react to changes in the open state.
747
- </Text.SmallBodyCopy>
748
- </AccordionContent>
749
- </AccordionItem>
750
- </Accordion>
751
- </Box>
752
- );
753
- },
754
- };
755
-
756
- export const ControlledMultiple = {
757
- name: "Controlled (Multiple Mode)",
758
- render: () => {
759
- const [value, setValue] = useState<string[]>(["section-1", "section-2"]);
760
-
761
- return (
762
- <Box p={300}>
763
- <Text.SmallBodyCopy as="p" mb={400}>
764
- Currently open: <strong>{value.join(", ") || "none"}</strong>
765
- </Text.SmallBodyCopy>
766
- <Accordion
767
- type="multiple"
768
- value={value}
769
- onValueChange={(newValue) => setValue(newValue as string[])}
770
- >
771
- <AccordionItem value="section-1">
772
- <AccordionTrigger title="Section 1" />
773
- <AccordionContent>
774
- <Text.SmallBodyCopy as="p">
775
- This accordion is in multiple mode, allowing multiple sections
776
- to be open simultaneously.
777
- </Text.SmallBodyCopy>
778
- </AccordionContent>
779
- </AccordionItem>
780
- <AccordionItem value="section-2">
781
- <AccordionTrigger title="Section 2" />
782
- <AccordionContent>
783
- <Text.SmallBodyCopy as="p">
784
- The parent component tracks which sections are open in an array.
785
- </Text.SmallBodyCopy>
786
- </AccordionContent>
787
- </AccordionItem>
788
- <AccordionItem value="section-3">
789
- <AccordionTrigger title="Section 3" />
790
- <AccordionContent>
791
- <Text.SmallBodyCopy as="p">
792
- Try opening and closing different sections to see the state
793
- update above.
794
- </Text.SmallBodyCopy>
795
- </AccordionContent>
796
- </AccordionItem>
797
- </Accordion>
798
- </Box>
799
- );
800
- },
801
- };
802
-
803
- export const Uncontrolled = {
804
- name: "Uncontrolled (Default Behavior)",
805
- render: () => {
806
- return (
807
- <Box p={300}>
808
- <Text.SmallBodyCopy as="p" mb={400}>
809
- This accordion manages its own state internally. Just pass{" "}
810
- <code>defaultValue</code> and the accordion handles the rest.
811
- </Text.SmallBodyCopy>
812
- <Accordion type="multiple" defaultValue={["section-1"]}>
813
- <AccordionItem value="section-1">
814
- <AccordionTrigger title="Section 1 (Open by default)" />
815
- <AccordionContent>
816
- <Text.SmallBodyCopy as="p">
817
- No state management needed! The accordion component manages
818
- which sections are open internally.
819
- </Text.SmallBodyCopy>
820
- </AccordionContent>
821
- </AccordionItem>
822
- <AccordionItem value="section-2">
823
- <AccordionTrigger title="Section 2" />
824
- <AccordionContent>
825
- <Text.SmallBodyCopy as="p">
826
- This is the simplest way to use the accordion when you don't
827
- need to control or react to the open/closed state.
828
- </Text.SmallBodyCopy>
829
- </AccordionContent>
830
- </AccordionItem>
831
- <AccordionItem value="section-3">
832
- <AccordionTrigger title="Section 3" />
833
- <AccordionContent>
834
- <Text.SmallBodyCopy as="p">
835
- Perfect for most use cases where the accordion is purely
836
- presentational.
837
- </Text.SmallBodyCopy>
838
- </AccordionContent>
839
- </AccordionItem>
840
- </Accordion>
841
- </Box>
842
- );
843
- },
844
- };