docs(accordion): also demo batch disable

carbon-design-system · Apr 21, 2024 · a498ffc · a498ffc
1 parent f379ffe
commit a498ffc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
@@ -140,9 +140,11 @@ By default, the chevron is right-aligned. Set `align="start"` to left-align the
 
 ## Programmatic example
 
-This example demonstrates how a list of items can be programmatically expanded and collapsed.
+This example demonstrates how all items can be programmatically expanded, collapsed, or disabled.
 
-<FileSource src="/framed/Accordion/ExpandableAccordion" />
+Disabled accordion items cannot be expanded.
+
+<FileSource src="/framed/Accordion/ProgrammaticAccordion" />
 
 ## Disabled
 

diff --git a/...amed/Accordion/ExpandableAccordion.svelte → ...ed/Accordion/ProgrammaticAccordion.svelte b/...amed/Accordion/ExpandableAccordion.svelte → ...ed/Accordion/ProgrammaticAccordion.svelte
@@ -1,5 +1,7 @@
 <script>
-  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+  import { Accordion, AccordionItem, Button, ButtonSet } from "carbon-components-svelte";
+
+  let disabled = false;
 
   const items = [
     {
@@ -22,12 +24,17 @@
   let open = false;
 </script>
 
-<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
-  {open ? "Collapse" : "Expand"}
-  all
-</Button>
+<ButtonSet>
+  <Button size="field" disabled="{disabled}" on:click="{() => (open = !open)}">
+    {open ? "Collapse" : "Expand"}
+    all
+  </Button>
+  <Button kind="ghost" size="field" on:click="{() => (disabled = !disabled)}">
+    {disabled ? "Enable" : "Disable"} all
+  </Button>
+</ButtonSet>
 
-<Accordion>
+<Accordion disabled="{disabled}">
   {#each items as item}
     <AccordionItem title="{item.title}" open="{open}">
       <p>{item.description}</p>