From 88434a1aaedb714bdf4eb360cae1a6627f856a3f Mon Sep 17 00:00:00 2001 From: Liam Smith Date: Thu, 15 Aug 2024 21:10:27 +0100 Subject: [PATCH 1/3] Add controlled accordion example --- site/docs/components/accordion/examples.mdx | 8 +++ site/src/examples/accordion/Controlled.tsx | 78 +++++++++++++++++++++ site/src/examples/accordion/index.ts | 1 + 3 files changed, 87 insertions(+) create mode 100644 site/src/examples/accordion/Controlled.tsx diff --git a/site/docs/components/accordion/examples.mdx b/site/docs/components/accordion/examples.mdx index ffde19ac8e6..8375c143cda 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. + + + + +## Controlled + +Use the `expanded` prop to control the state of the Accordion. Passing a boolean vale to the `expanded` prop allows you to programmatically expand or collapse the Accordion. + diff --git a/site/src/examples/accordion/Controlled.tsx b/site/src/examples/accordion/Controlled.tsx new file mode 100644 index 00000000000..cf9c568c3c8 --- /dev/null +++ b/site/src/examples/accordion/Controlled.tsx @@ -0,0 +1,78 @@ +import { + Accordion, + AccordionGroup, + AccordionHeader, + AccordionPanel, + Button, + FlexLayout, + FlowLayout, + FormField, + FormFieldLabel, + Input, +} from "@salt-ds/core"; +import { CollapseAllIcon, ExpandAllIcon } from "@salt-ds/icons"; +import { type ReactElement, useState } from "react"; + +export const Controlled = (): ReactElement => { + const accordions = Array.from({ length: 3 }, (_, i) => i + 1); + const [expanded, setExpanded] = useState([]); + + const handleAccordionToggle = (value: number) => { + setExpanded((prev) => + prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value], + ); + }; + + const handleExpandAll = () => { + setExpanded(accordions); + }; + + const handleCollapseAll = () => { + setExpanded([]); + }; + + return ( + + + + + + + + {accordions.map((i) => ( + handleAccordionToggle(i)} + > + 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..55deb82ea6c 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 "./Controlled"; From 8c1458614f3811964ca331b56084b7731670dce6 Mon Sep 17 00:00:00 2001 From: Liam Smith Date: Thu, 15 Aug 2024 21:28:09 +0100 Subject: [PATCH 2/3] Fix typo --- site/docs/components/accordion/examples.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/docs/components/accordion/examples.mdx b/site/docs/components/accordion/examples.mdx index 8375c143cda..14e7de62bff 100644 --- a/site/docs/components/accordion/examples.mdx +++ b/site/docs/components/accordion/examples.mdx @@ -86,7 +86,7 @@ You can add additional labels to provide extra context using the [`Text`](../tex ## Controlled -Use the `expanded` prop to control the state of the Accordion. Passing a boolean vale to the `expanded` prop allows you to programmatically expand or collapse the Accordion. +Use the `expanded` prop to control the state of the Accordion. Passing a boolean value to the `expanded` prop allows you to programmatically expand or collapse the Accordion. From a3b112663419d43483b21006eb0068ac4525fc75 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Wed, 11 Sep 2024 15:19:30 +0100 Subject: [PATCH 3/3] Small tweaks --- site/docs/components/accordion/examples.mdx | 6 ++--- .../{Controlled.tsx => ExpandAll.tsx} | 27 +++++++++++-------- site/src/examples/accordion/index.ts | 2 +- 3 files changed, 20 insertions(+), 15 deletions(-) rename site/src/examples/accordion/{Controlled.tsx => ExpandAll.tsx} (76%) diff --git a/site/docs/components/accordion/examples.mdx b/site/docs/components/accordion/examples.mdx index 14e7de62bff..8061529d328 100644 --- a/site/docs/components/accordion/examples.mdx +++ b/site/docs/components/accordion/examples.mdx @@ -82,11 +82,11 @@ You can add additional labels to provide extra context using the [`Text`](../tex - + -## Controlled +## Expand all -Use the `expanded` prop to control the state of the Accordion. Passing a boolean value to the `expanded` prop allows you to programmatically expand or collapse the Accordion. +You can use Accordion's controlled API to implement custom behaviour e.g. expand/collapse all. diff --git a/site/src/examples/accordion/Controlled.tsx b/site/src/examples/accordion/ExpandAll.tsx similarity index 76% rename from site/src/examples/accordion/Controlled.tsx rename to site/src/examples/accordion/ExpandAll.tsx index cf9c568c3c8..4ad6af4dd07 100644 --- a/site/src/examples/accordion/Controlled.tsx +++ b/site/src/examples/accordion/ExpandAll.tsx @@ -4,22 +4,25 @@ import { AccordionHeader, AccordionPanel, Button, - FlexLayout, FlowLayout, FormField, FormFieldLabel, Input, + StackLayout, } from "@salt-ds/core"; import { CollapseAllIcon, ExpandAllIcon } from "@salt-ds/icons"; import { type ReactElement, useState } from "react"; -export const Controlled = (): ReactElement => { - const accordions = Array.from({ length: 3 }, (_, i) => i + 1); +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, value], + prev.includes(value) + ? prev.filter((v) => v !== value) + : prev.concat(value), ); }; @@ -32,17 +35,18 @@ export const Controlled = (): ReactElement => { }; return ( - - + - + {accordions.map((i) => ( @@ -51,6 +55,7 @@ export const Controlled = (): ReactElement => { value={`accordion-${i}`} expanded={expanded.includes(i)} onToggle={() => handleAccordionToggle(i)} + indicatorSide="right" > Internal form @@ -73,6 +78,6 @@ export const Controlled = (): ReactElement => { ))} - + ); }; diff --git a/site/src/examples/accordion/index.ts b/site/src/examples/accordion/index.ts index 55deb82ea6c..57a0e5f1367 100644 --- a/site/src/examples/accordion/index.ts +++ b/site/src/examples/accordion/index.ts @@ -6,4 +6,4 @@ export * from "./Disabled"; export * from "./AdditionalLabels"; export * from "./Status"; export * from "./InlineBadge"; -export * from "./Controlled"; +export * from "./ExpandAll";