From 6f3834211e04ad7406456f646e05982f83cd5748 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 19 Dec 2019 19:31:04 -0800
Subject: [PATCH] refactor(accordion): remove expando, inline functions

Supports #7

- Forward events
- Export style
---
 .../Accordion/Accordion.Skeleton.svelte       |  4 +-
 src/components/Accordion/Accordion.svelte     |  4 +-
 src/components/Accordion/AccordionItem.svelte | 68 +++++++++----------
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/components/Accordion/Accordion.Skeleton.svelte b/src/components/Accordion/Accordion.Skeleton.svelte
index 83ddc21c..2cd156ff 100644
--- a/src/components/Accordion/Accordion.Skeleton.svelte
+++ b/src/components/Accordion/Accordion.Skeleton.svelte
@@ -3,7 +3,7 @@
   export { className as class };
   export let open = true;
   export let count = 4;
-  export let props = {};
+  export let style = undefined;
 
   import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
   import { cx } from '../../lib';
@@ -13,7 +13,7 @@
   const skeletonItems = Array.from({ length: open ? count - 1 : count });
 </script>
 
-<ul class={_class} {...props}>
+<ul on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
   {#if open}
     <li class={cx('--accordion__item', '--accordion__item--active')}>
       <span class={cx('--accordion__heading')}>
diff --git a/src/components/Accordion/Accordion.svelte b/src/components/Accordion/Accordion.svelte
index 2f34fe3c..f4307f99 100644
--- a/src/components/Accordion/Accordion.svelte
+++ b/src/components/Accordion/Accordion.svelte
@@ -1,11 +1,11 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 </script>
 
-<ul {...props} class={cx('--accordion', className)}>
+<ul on:click on:mouseover on:mouseenter on:mouseleave {style} class={cx('--accordion', className)}>
   <slot />
 </ul>
diff --git a/src/components/Accordion/AccordionItem.svelte b/src/components/Accordion/AccordionItem.svelte
index dcc45233..7ab621ea 100644
--- a/src/components/Accordion/AccordionItem.svelte
+++ b/src/components/Accordion/AccordionItem.svelte
@@ -6,56 +6,52 @@
   export let title = undefined;
   export let iconDescription = 'Expand/Collapse';
   export let open = false;
-  export let props = {};
+  export let style = undefined;
 
-  import { createEventDispatcher } from 'svelte';
   import ChevronRight16 from 'carbon-icons-svelte/lib/ChevronRight16';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
   let animation = undefined;
 
-  function handleAnimationEnd(event) {
-    animation = undefined;
-  }
-
-  function handleClick(event) {
-    animation = open ? 'collapsing' : 'expanding';
-    open = !open;
-    dispatch('headingclick', { open, event });
-  }
-
-  function handleKeyDown(event) {
-    if (open && event.key === 'Escape') {
-      open = false;
-    }
-  }
-
+  $: animation = open ? 'expanding' : 'collapsing';
   $: _class = cx(
     '--accordion__item',
     open && '--accordion__item--active',
     animation && `--accordion__item--${animation}`,
     className
   );
-  $: accordionItemProps = {
-    type: 'button',
-    class: cx('--accordion__heading'),
-    title: iconDescription,
-    'aria-expanded': open,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  };
 </script>
 
-<li class={_class} {...props} on:animationend on:animationend={handleAnimationEnd}>
-  <slot name="expando" props={accordionItemProps}>
-    <button {...accordionItemProps} on:click={handleClick} on:keydown={handleKeyDown}>
-      <ChevronRight16 class={cx('--accordion__arrow')} aria-label={iconDescription} />
-      <div class={cx('--accordion__title')}>
-        <slot name="title">{title}</slot>
-      </div>
-    </button>
-  </slot>
+<li
+  {style}
+  class={_class}
+  on:animationend
+  on:animationend={() => {
+    animation = undefined;
+  }}>
+  <button
+    type="button"
+    class={cx('--accordion__heading')}
+    title={iconDescription}
+    aria-expanded={open}
+    on:click
+    on:click={() => {
+      open = !open;
+    }}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+    on:keydown={event => {
+      if (open && event.key === 'Escape') {
+        open = false;
+      }
+    }}>
+    <ChevronRight16 class={cx('--accordion__arrow')} aria-label={iconDescription} />
+    <div class={cx('--accordion__title')}>
+      <slot name="title">{title}</slot>
+    </div>
+  </button>
   <div class={cx('--accordion__content')}>
     <slot />
   </div>