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] 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
 
 </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 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<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
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";