Merge pull request #333 from IBM/accordion

Accordion: add size variants, disabled prop; forward align prop to Skeleton

src/Accordion/Accordion.Skeleton.svelte

@@ -5,6 +5,18 @@
    */
   export let count = 4;
 
+  /**
+   * Specify alignment of accordion item chevron icon
+   * @type {"start" | "end"} [align="end"]
+   */
+  export let align = "end";
+
+  /**
+   * Specify the size of the accordion
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
   /**
    * Set to `false` to close the first accordion item
    * @type {boolean} [open=true]
@@ -19,6 +31,9 @@
   class:bx--accordion="{true}"
   class:bx--skeleton="{true}"
   {...$$restProps}
+  class="bx--accordion--{align}
+    {size && `bx--accordion--${size}`}
+    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter

src/Accordion/Accordion.svelte

@@ -5,18 +5,40 @@
    */
   export let align = "end";
 
+  /**
+   * Specify the size of the accordion
+   * @type {"sm" | "xl"} [size]
+   */
+  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}
   <AccordionSkeleton
     {...$$restProps}
+    align="{align}"
+    size="{size}"
     on:click
     on:mouseover
     on:mouseenter
@@ -26,7 +48,9 @@
   <ul
     class:bx--accordion="{true}"
     {...$$restProps}
-    class="bx--accordion--{align} {$$restProps.class}"
+    class="bx--accordion--{align}
+      {size && `bx--accordion--${size}`}
+      {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter

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;