From 9edb0c2f31b83f29f0f9cac1f488598bf0c6a835 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 22 Nov 2020 09:50:23 -0800
Subject: [PATCH] docs(recipes): add ExpandableAccordion recipe

---
 docs/src/pages/components/Accordion.svx       |  2 +
 .../Accordion/ExpandableAccordion.svelte      | 43 +++++++++++++++++++
 .../src/pages/recipes/ExpandableAccordion.svx | 13 ++++++
 3 files changed, 58 insertions(+)
 create mode 100644 docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
 create 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 eabc4972..3db70d63 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -10,6 +10,8 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
+
 ### Default
 
 <Accordion>
diff --git a/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
new file mode 100644
index 00000000..93737986
--- /dev/null
+++ b/docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
@@ -0,0 +1,43 @@
+<script>
+  export let items = [
+    {
+      title: "Natural Language Classifier",
+      description:
+        "Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
+    },
+    {
+      title: "Natural Language Understanding",
+      description:
+        "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
+    },
+    {
+      title: "Language Translator",
+      description:
+        "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
+    },
+  ];
+
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<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>
+      <p>{item.description}</p>
+    </AccordionItem>
+  {/each}
+</Accordion>
diff --git a/docs/src/pages/recipes/ExpandableAccordion.svx b/docs/src/pages/recipes/ExpandableAccordion.svx
new file mode 100644
index 00000000..09ba3cf0
--- /dev/null
+++ b/docs/src/pages/recipes/ExpandableAccordion.svx
@@ -0,0 +1,13 @@
+---
+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" />