Small tweaks

jpmorganchase · Sep 11, 2024 · a3b1126 · a3b1126
1 parent 8c14586
commit a3b1126
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git 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
 
 </LivePreview>
 
-<LivePreview componentName="accordion" exampleName="Controlled" >
+<LivePreview componentName="accordion" exampleName="ExpandAll" >
 
-## 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.
 
 </LivePreview>
 </LivePreviewControls>
diff --git a/site/src/examples/accordion/Controlled.tsx → site/src/examples/accordion/ExpandAll.tsx b/site/src/examples/accordion/Controlled.tsx → 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<number[]>([]);
 
   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 (
-    <FlexLayout
-      style={{ width: "80%", height: "100%", flexDirection: "column" }}
+    <StackLayout
+      gap={3}
+      style={{ height: "100%", paddingInline: "var(--salt-spacing-300)" }}
     >
-      <FlexLayout>
+      <FlowLayout gap={1}>
         <Button onClick={handleExpandAll}>
-          <ExpandAllIcon /> Expand All
+          <ExpandAllIcon aria-hidden /> Expand All
         </Button>
         <Button onClick={handleCollapseAll}>
-          <CollapseAllIcon /> Collapse All
+          <CollapseAllIcon aria-hidden /> Collapse All
         </Button>
-      </FlexLayout>
+      </FlowLayout>
 
       <AccordionGroup>
         {accordions.map((i) => (
@@ -51,6 +55,7 @@ export const Controlled = (): ReactElement => {
             value={`accordion-${i}`}
             expanded={expanded.includes(i)}
             onToggle={() => handleAccordionToggle(i)}
+            indicatorSide="right"
           >
             <AccordionHeader>Internal form</AccordionHeader>
             <AccordionPanel>
@@ -73,6 +78,6 @@ export const Controlled = (): ReactElement => {
           </Accordion>
         ))}
       </AccordionGroup>
-    </FlexLayout>
+    </StackLayout>
   );
 };
diff --git 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";