Merge pull request #333 from IBM/accordion

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

COMPONENT_INDEX.md

@@ -198,6 +198,8 @@ import { Accordion } from "carbon-components-svelte";
 | Prop name | Type                              | Default value |
 | :-------- | :-------------------------------- | :------------ |
 | align     | <code>"start" &#124; "end"</code> | "end"         |
+| size      | <code>"sm" &#124; "xl"</code>     | --            |
+| disabled  | <code>boolean</code>              | false         |
 | skeleton  | <code>boolean</code>              | false         |
 
 ### Slots
@@ -231,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
@@ -262,10 +265,12 @@ import { AccordionSkeleton } from "carbon-components-svelte";
 
 ### Props
 
-| Prop name | Type                 | Default value |
-| :-------- | :------------------- | :------------ |
-| count     | <code>number</code>  | 4             |
-| open      | <code>boolean</code> | true          |
+| Prop name | Type                              | Default value |
+| :-------- | :-------------------------------- | :------------ |
+| count     | <code>number</code>               | 4             |
+| align     | <code>"start" &#124; "end"</code> | "end"         |
+| size      | <code>"sm" &#124; "xl"</code>     | --            |
+| open      | <code>boolean</code>              | true          |
 
 ### Slots
 

docs/package.json

@@ -12,7 +12,7 @@
     "@carbon/themes": "^10.20.0",
     "@sveltech/routify": "^1.9.9",
     "autoprefixer": "^10.0.1",
-    "carbon-components": "^10.21.0",
+    "carbon-components": "^10.22.0",
     "carbon-components-svelte": "../",
     "clipboard-copy": "^3.1.0",
     "fs-extra": "^9.0.1",

docs/src/pages/components/Accordion.svx

@@ -63,10 +63,83 @@
   </AccordionItem>
 </Accordion>
 
+### Extra-large size
+
+<Accordion size="xl">
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </AccordionItem>
+</Accordion>
+
+### Small size
+
+<Accordion size="sm">
+  <AccordionItem title="Title 1">
+    Content 1
+  </AccordionItem>
+  <AccordionItem title="Title 2">
+    Content 2
+  </AccordionItem>
+  <AccordionItem title="Title 3">
+    Content 3
+  </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 />
+
+### Skeleton (chevron aligned left)
+
+<Accordion skeleton align="start" />
+
+### Skeleton (custom count)
+
 <Accordion skeleton count={3} />
 
 ### Skeleton (closed)
 
-<Accordion skeleton open={false} count={3} />
+<Accordion skeleton open={false} />
+
+### Skeleton (extra-large)
+
+<Accordion skeleton size="xl" />
+
+### Skeleton (small)
+
+<Accordion skeleton size="sm" />
+

docs/yarn.lock

@@ -771,15 +771,15 @@ caniuse-lite@^1.0.30001135, caniuse-lite@^1.0.30001137:
   integrity sha512-VAy5RHDfTJhpxnDdp2n40GPPLp3KqNrXz1QqFv4J64HvArKs8nuNMOWkB3ICOaBTU/Aj4rYAo/ytdQDDFF/Pug==
 
 carbon-components-svelte@../:
-  version "0.15.0"
+  version "0.16.0"
   dependencies:
     carbon-icons-svelte "^10.17.0"
     flatpickr "4.6.3"
 
-carbon-components@^10.21.0:
-  version "10.21.0"
-  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.21.0.tgz#3e7f79530af79039aab7bf937f0f129642806316"
-  integrity sha512-IS8WPFGg74g6ZyWpJc4cDlkhqGeNZ1sJshAVTftkb7Nur9W58lSRcu6G9cRMgeL+I/YAia3Q+X4lPh/X16JsGw==
+carbon-components@^10.22.0:
+  version "10.22.0"
+  resolved "https://registry.npmjs.org/carbon-components/-/carbon-components-10.22.0.tgz#866791ca8e3f651054543d63f6a898cff6bcacf9"
+  integrity sha512-0cADWQf1e+6YsxXnjEz630Z7GZa3Z1ssO0UW/HnnJy03Dr+qdT3o6sIgSqObYLddJliAVcjeTlwJshZ9K4bWJQ==
   dependencies:
     flatpickr "4.6.1"
     lodash.debounce "^4.0.8"

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;

types/index.d.ts

@@ -18,6 +18,17 @@ export class Accordion extends CarbonSvelteComponent {
      */
     align?: "start" | "end";
 
+    /**
+     * Specify the size of the accordion
+     */
+    size?: "sm" | "xl";
+
+    /**
+     * Set to `true` to disable the accordion
+     * @default false
+     */
+    disabled?: boolean;
+
     /**
      * Set to `true` to display the skeleton state
      * @default false
@@ -43,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"
@@ -61,6 +78,17 @@ export class AccordionSkeleton extends CarbonSvelteComponent {
      */
     count?: number;
 
+    /**
+     * Specify alignment of accordion item chevron icon
+     * @default "end"
+     */
+    align?: "start" | "end";
+
+    /**
+     * Specify the size of the accordion
+     */
+    size?: "sm" | "xl";
+
     /**
      * Set to `false` to close the first accordion item
      * @default true