diff --git a/site/docs/components/accordion/examples.mdx b/site/docs/components/accordion/examples.mdx index ffde19ac8e6..8061529d328 100644 --- a/site/docs/components/accordion/examples.mdx +++ b/site/docs/components/accordion/examples.mdx @@ -80,5 +80,13 @@ You can use an inline [badge](../badge) to indicate a change, or several changes You can add additional labels to provide extra context using the [`Text`](../text) and [`Stack Layout`](../stack-layout) components. + + + + +## Expand all + +You can use Accordion's controlled API to implement custom behaviour e.g. expand/collapse all. + diff --git a/site/src/examples/accordion/ExpandAll.tsx b/site/src/examples/accordion/ExpandAll.tsx new file mode 100644 index 00000000000..4ad6af4dd07 --- /dev/null +++ b/site/src/examples/accordion/ExpandAll.tsx @@ -0,0 +1,83 @@ +import { + Accordion, + AccordionGroup, + AccordionHeader, + AccordionPanel, + Button, + FlowLayout, + FormField, + FormFieldLabel, + Input, + StackLayout, +} from "@salt-ds/core"; +import { CollapseAllIcon, ExpandAllIcon } from "@salt-ds/icons"; +import { type ReactElement, useState } from "react"; + +const accordions = Array.from({ length: 3 }, (_, i) => i + 1); + +export const ExpandAll = (): ReactElement => { + const [expanded, setExpanded] = useState([]); + + const handleAccordionToggle = (value: number) => { + setExpanded((prev) => + prev.includes(value) + ? prev.filter((v) => v !== value) + : prev.concat(value), + ); + }; + + const handleExpandAll = () => { + setExpanded(accordions); + }; + + const handleCollapseAll = () => { + setExpanded([]); + }; + + return ( + + + + + + + + {accordions.map((i) => ( + handleAccordionToggle(i)} + indicatorSide="right" + > + Internal form + + + Please fill out the following details. + + Disclosure ID + + + + Email + + + + Justification + + + + + + ))} + + + ); +}; diff --git a/site/src/examples/accordion/index.ts b/site/src/examples/accordion/index.ts index 8d41ad7cfea..57a0e5f1367 100644 --- a/site/src/examples/accordion/index.ts +++ b/site/src/examples/accordion/index.ts @@ -6,3 +6,4 @@ export * from "./Disabled"; export * from "./AdditionalLabels"; export * from "./Status"; export * from "./InlineBadge"; +export * from "./ExpandAll";