Merge pull request #43 from metonym/accordion

refactor(accordion): remove expando, inline functions

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')}>

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>

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 = open ? 'expanding' : 'collapsing';
-    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;
-    }
-  }
-
   $: _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}>
+<li
-  <slot name="expando" props={accordionItemProps}>
+  {style}
-    <button {...accordionItemProps} on:click={handleClick} on:keydown={handleKeyDown}>
+  class={_class}
-      <ChevronRight16 class={cx('--accordion__arrow')} aria-label={iconDescription} />
+  on:animationend
-      <div class={cx('--accordion__title')}>
+  on:animationend={() => {
-        <slot name="title">{title}</slot>
+    animation = undefined;
-      </div>
+  }}>
-    </button>
+  <button
-  </slot>
+    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>