From c401149b5a3e12c696c90341597914bc1451231b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 5 Dec 2020 15:05:40 -0800
Subject: [PATCH] refactor(accordion): use the class name directive, resolve
 svelte icon paths

---
 COMPONENT_INDEX.md                     | 12 ++++++------
 docs/src/COMPONENT_API.json            |  2 +-
 src/Accordion/Accordion.svelte         |  7 ++++---
 src/Accordion/AccordionItem.svelte     | 11 ++++++-----
 src/Accordion/AccordionSkeleton.svelte | 15 ++++++++-------
 types/Accordion/AccordionItem.d.ts     |  2 +-
 6 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 798a04f6..67be07a2 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -192,12 +192,12 @@
 
 ### Props
 
-| Prop name       | Kind             | Reactive | Type                 | Default value                  | Description                                                                                                                                    |
-| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| disabled        | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to disable the accordion item                                                                                                    |
-| open            | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to open the first accordion item                                                                                                 |
-| title           | <code>let</code> | No       | <code>string</code>  | <code>"title"</code>           | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
-| iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon                                                                                     |
+| Prop name       | Kind             | Reactive | Type                 | Default value                  | Description                                                                                                                              |
+| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| disabled        | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to disable the accordion item                                                                                              |
+| open            | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to open the first accordion item                                                                                           |
+| title           | <code>let</code> | No       | <code>string</code>  | <code>"title"</code>           | Specify the title of the accordion item heading<br />Alternatively, use the "title" slot (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
+| iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon                                                                               |
 
 ### Slots
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 8da2e33d..39dc765f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -191,7 +191,7 @@
         {
           "name": "title",
           "kind": "let",
-          "description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g., <div slot=\"title\">...</div>)",
+          "description": "Specify the title of the accordion item heading\nAlternatively, use the \"title\" slot (e.g., <div slot=\"title\">...</div>)",
           "type": "string",
           "value": "\"title\"",
           "isFunction": false,
diff --git a/src/Accordion/Accordion.svelte b/src/Accordion/Accordion.svelte
index ac6059a2..2cf3d63b 100644
--- a/src/Accordion/Accordion.svelte
+++ b/src/Accordion/Accordion.svelte
@@ -43,10 +43,11 @@
 {:else}
   <ul
     class:bx--accordion="{true}"
+    class:bx--accordion--start="{align === 'start'}"
+    class:bx--accordion--end="{align === 'end'}"
+    class:bx--accordion--sm="{size === 'sm'}"
+    class:bx--accordion--xl="{size === 'xl'}"
     {...$$restProps}
-    class="bx--accordion--{align}
-      {size && `bx--accordion--${size}`}
-      {$$restProps.class}"
     on:click
     on:mouseover
     on:mouseenter
diff --git a/src/Accordion/AccordionItem.svelte b/src/Accordion/AccordionItem.svelte
index ad09e0b2..8217faa8 100644
--- a/src/Accordion/AccordionItem.svelte
+++ b/src/Accordion/AccordionItem.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
+   * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
    */
   export let title = "title";
 
@@ -15,7 +15,7 @@
   export let iconDescription = "Expand/Collapse";
 
   import { onMount, getContext } from "svelte";
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
 
   let initialDisabled = disabled;
 
@@ -38,8 +38,9 @@
   class:bx--accordion__item="{true}"
   class:bx--accordion__item--active="{open}"
   class:bx--accordion__item--disabled="{disabled}"
+  class:bx--accordion__item--expanding="{animation === 'expanding'}"
+  class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
   {...$$restProps}
-  class="bx--accordion__item--{animation} {$$restProps.class}"
   on:animationend
   on:animationend="{() => {
     animation = undefined;
@@ -70,11 +71,11 @@
       class="bx--accordion__arrow"
       aria-label="{iconDescription}"
     />
-    <div class="bx--accordion__title">
+    <div class:bx--accordion__title="{true}">
       <slot name="title">{title}</slot>
     </div>
   </button>
-  <div class="bx--accordion__content">
+  <div class:bx--accordion__content="{true}">
     <slot />
   </div>
 </li>
diff --git a/src/Accordion/AccordionSkeleton.svelte b/src/Accordion/AccordionSkeleton.svelte
index cefcbaed..4de40493 100644
--- a/src/Accordion/AccordionSkeleton.svelte
+++ b/src/Accordion/AccordionSkeleton.svelte
@@ -17,17 +17,18 @@
   /** Set to `false` to close the first accordion item */
   export let open = true;
 
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
-  import { SkeletonText } from "../SkeletonText";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
+  import SkeletonText from "../SkeletonText/SkeletonText.svelte";
 </script>
 
 <ul
-  class:bx--accordion="{true}"
   class:bx--skeleton="{true}"
+  class:bx--accordion="{true}"
+  class:bx--accordion--start="{align === 'start'}"
+  class:bx--accordion--end="{align === 'end'}"
+  class:bx--accordion--sm="{size === 'sm'}"
+  class:bx--accordion--xl="{size === 'xl'}"
   {...$$restProps}
-  class="bx--accordion--{align}
-    {size && `bx--accordion--${size}`}
-    {$$restProps.class}"
   on:click
   on:mouseover
   on:mouseenter
@@ -49,7 +50,7 @@
       </div>
     </li>
   {/if}
-  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
+  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
     <li class="bx--accordion__item">
       <span class="bx--accordion__heading">
         <ChevronRight16 class="bx--accordion__arrow" />
diff --git a/types/Accordion/AccordionItem.d.ts b/types/Accordion/AccordionItem.d.ts
index db8b3311..89597c94 100644
--- a/types/Accordion/AccordionItem.d.ts
+++ b/types/Accordion/AccordionItem.d.ts
@@ -3,7 +3,7 @@
 export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
   /**
    * Specify the title of the accordion item heading
-   * Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
+   * Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
    * @default "title"
    */
   title?: string;