From ebf882cff4db69e5285810def2ee1fb620f44ae8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 15 Oct 2020 16:15:17 -0700
Subject: [PATCH] feat(accordion): add disabled prop

---
 COMPONENT_INDEX.md                      |  2 ++
 docs/src/pages/components/Accordion.svx | 28 +++++++++++++++++++++++++
 src/Accordion/Accordion.svelte          | 14 +++++++++++++
 src/Accordion/AccordionItem.svelte      | 27 ++++++++++++++++++++++--
 types/index.d.ts                        | 12 +++++++++++
 5 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f8fe4f0b..b33b8b65 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -199,6 +199,7 @@ import { Accordion } from "carbon-components-svelte";
 | :-------- | :-------------------------------- | :------------ |
 | align     | <code>"start" &#124; "end"</code> | "end"         |
 | size      | <code>"sm" &#124; "xl"</code>     | --            |
+| disabled  | <code>boolean</code>              | false         |
 | skeleton  | <code>boolean</code>              | false         |
 
 ### Slots
@@ -232,6 +233,7 @@ import { AccordionItem } from "carbon-components-svelte";
 | :-------------- | :------------------- | :---------------- |
 | title           | <code>string</code>  | "title"           |
 | open            | <code>boolean</code> | false             |
+| disabled        | <code>boolean</code> | false             |
 | iconDescription | <code>string</code>  | "Expand/Collapse" |
 
 ### Slots
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 64ff137d..6bfca06f 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -91,6 +91,34 @@
   </AccordionItem>
 </Accordion>
 
+### Disabled
+
+<Accordion disabled>
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### Disabled (item)
+
+<Accordion>
+  <AccordionItem disabled title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
 ### Skeleton
 
 <Accordion skeleton />
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index 140e7eea..d85f873e 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -11,13 +11,27 @@
    */
   export let size = undefined;
 
+  /**
+   * Set to `true` to disable the accordion
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
   /**
    * Set to `true` to display the skeleton state
    * @type {boolean} [skeleton=false]
    */
   export let skeleton = false;
 
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
   import AccordionSkeleton from "./Accordion.Skeleton.svelte";
+
+  const disableItems = writable(disabled);
+
+  $: disableItems.set(disabled);
+
+  setContext("Accordion", { disableItems });
 </script>
 
 {#if skeleton}
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index 63af47ec..8ba4feb3 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -12,22 +12,44 @@
    */
   export let open = false;
 
+  /**
+   * Set to `true` to disable the accordion item
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
   /**
    * Specify the ARIA label for the accordion item chevron icon
    * @type {string} [iconDescription="Expand/Collapse"]
    */
   export let iconDescription = "Expand/Collapse";
 
+  import { onMount, getContext } from "svelte";
   import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
 
-  $: animation = undefined;
+  let initialDisabled = disabled;
+
+  const ctx = getContext("Accordion");
+  const unsubscribe = ctx.disableItems.subscribe((value) => {
+    if (!value && initialDisabled) return;
+    disabled = value;
+  });
+
+  let animation = undefined;
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+    };
+  });
 </script>
 
 <li
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"
-  class="bx--accordion__item--${animation}"
+  class:bx--accordion__item--disabled="{disabled}"
   {...$$restProps}
+  class="bx--accordion__item--${animation} {$$restProps.class}"
   on:animationend
   on:animationend="{() => {
     animation = undefined;
@@ -38,6 +60,7 @@
     class:bx--accordion__heading="{true}"
     title="{iconDescription}"
     aria-expanded="{open}"
+    disabled="{disabled}"
     on:click
     on:click="{() => {
       open = !open;
diff --git a/types/index.d.ts b/types/index.d.ts
index 32da58e7..ea647ee7 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -23,6 +23,12 @@ export class Accordion extends CarbonSvelteComponent {
      */
     size?: "sm" | "xl";
 
+    /**
+     * Set to `true` to disable the accordion
+     * @default false
+     */
+    disabled?: boolean;
+
     /**
      * Set to `true` to display the skeleton state
      * @default false
@@ -48,6 +54,12 @@ export class AccordionItem extends CarbonSvelteComponent {
      */
     open?: boolean;
 
+    /**
+     * Set to `true` to disable the accordion item
+     * @default false
+     */
+    disabled?: boolean;
+
     /**
      * Specify the ARIA label for the accordion item chevron icon
      * @default "Expand/Collapse"