From f0ee364f570e5eeff3205d7422c59b0432e47c65 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 6 Aug 2022 13:07:38 -0700
Subject: [PATCH] docs(accordion): move expandable accordion recipe

---
 docs/src/pages/components/Accordion.svx         |  8 ++++++--
 .../framed/Accordion/ExpandableAccordion.svelte | 17 +++++------------
 docs/src/pages/recipes/ExpandableAccordion.svx  | 13 -------------
 3 files changed, 11 insertions(+), 27 deletions(-)
 delete mode 100644 docs/src/pages/recipes/ExpandableAccordion.svx

diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 0890d559..c64f0f99 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -10,8 +10,6 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
-
 ### Default
 
 <Accordion>
@@ -84,6 +82,12 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
   </AccordionItem>
 </Accordion>
 
+### Programmatic example
+
+This example demonstrates how a list of items can be programmatically expanded and collapsed.
+
+<FileSource src="/framed/Accordion/ExpandableAccordion" />
+
 ### Extra-large size
 
 <Accordion size="xl">
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
index ec03614d..3b8ce26e 100644
--- a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@@ -1,5 +1,7 @@
 <script>
-  export let items = [
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  const items = [
     {
       title: "Natural Language Classifier",
       description:
@@ -17,26 +19,17 @@
     },
   ];
 
-  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
-
   let open = false;
 </script>
 
-<Button
-  kind="ghost"
-  size="field"
-  on:click="{() => {
-    open = !open;
-  }}"
->
+<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
   {open ? "Collapse" : "Expand"}
   all
 </Button>
 
 <Accordion>
   {#each items as item}
-    <AccordionItem open="{open}">
-      <h5 slot="title">{item.title}</h5>
+    <AccordionItem title="{item.title}" open="{open}">
       <p>{item.description}</p>
     </AccordionItem>
   {/each}
diff --git a/docs/src/pages/recipes/ExpandableAccordion.svx b/docs/src/pages/recipes/ExpandableAccordion.svx
deleted file mode 100644
index 09ba3cf0..00000000
--- a/docs/src/pages/recipes/ExpandableAccordion.svx
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-## Expandable accordion
-
-This example expands and collapses all accordion items.
-
-<FileSource src="/framed/Accordion/ExpandableAccordion" />