feat(accordion): add disabled prop

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

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 />

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}

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;

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"