refactor(tile): forward events, inline functions

Supports #7, #34

- Forward events, style prop
- Remove unneeded dispatched events
- Remove exported props

src/components/Tile/ClickableTile.svelte

@@ -5,28 +5,10 @@
   export let rel = undefined;
   export let light = false;
   export let clicked = false;
-  export let props = {};
+  export let style = undefined;
 
-  import { createEventDispatcher, tick } from 'svelte';
   import { cx } from '../../lib';
 
-  const dispatch = createEventDispatcher();
-
-  async function handleClick(event) {
-    clicked = !clicked;
-    await tick();
-    dispatch('click', event);
-  }
-
-  async function handleKeyDown(event) {
-    if (event.key === ' ' || event.key === 'Enter') {
-      clicked = !clicked;
-      await tick();
-    }
-
-    dispatch('keydown', event);
-  }
-
   $: _class = cx(
     '--link',
     '--tile',
@@ -37,6 +19,23 @@
   );
 </script>
 
-<a {...props} class={_class} on:click={handleClick} on:keydown={handleKeyDown} {href} {rel}>
+<a
+  class={_class}
+  on:click
+  on:click={() => {
+    clicked = !clicked;
+  }}
+  on:keydown
+  on:keydown={event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      clicked = !clicked;
+    }
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  {style}
+  {href}
+  {rel}>
   <slot />
 </a>

src/components/Tile/ExpandableTile.svelte

@@ -7,9 +7,9 @@
   export let tileExpandedIconText = 'Interact to collapse Tile';
   export let tileMaxHeight = 0;
   export let tilePadding = 0;
-  export let tabIndex = 0;
+  export let tabindex = '0';
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher, tick, onMount } from 'svelte';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
@@ -63,14 +63,19 @@
 </script>
 
 <div
-  {...props}
   bind:this={tile}
   style={tileStyle}
   class={_class}
+  on:click
   on:click={handleClick}
+  on:keypress
   on:keypress={handleKeyPress}
-  tabindex={tabIndex}
-  {id}>
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  {tabindex}
+  {id}
+  {style}>
   <div bind:this={tileContent}>
     <div bind:this={aboveTheFold} class={cx('--tile-content')}>
       <slot name="above" />

src/components/Tile/RadioTile.svelte

@@ -7,9 +7,9 @@
   export let name = '';
   export let iconDescription = 'Tile checkmark';
   export let value = '';
-  export let tabIndex = 0;
+  export let tabindex = '0';
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
@@ -40,7 +40,6 @@
 </script>
 
 <input
-  {...props}
   type="radio"
   class={cx('--tile-input')}
   on:change
@@ -49,7 +48,17 @@
   {name}
   {value}
   {checked} />
-<label for={id} class={_class} tabindex={tabIndex} on:keydown={handleKeyDown}>
+<label
+  for={id}
+  class={_class}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={handleKeyDown}
+  {tabindex}
+  {style}>
   <span class={cx('--tile__checkmark')}>
     <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
   </span>

src/components/Tile/SelectableTile.svelte

@@ -8,40 +8,13 @@
   export let title = 'title';
   export let name = '';
   export let iconDescription = 'Tile checkmark';
-  export let tabIndex = 0;
+  export let tabindex = '0';
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
-  import { createEventDispatcher, tick } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
   import { cx } from '../../lib';
 
-  let input = undefined;
-  const dispatch = createEventDispatcher();
-
-  function handleChange(event) {
-    dispatch('change', event);
-  }
-
-  async function handleClick(event) {
-    if (event.target !== input) {
-      selected = !selected;
-      await tick();
-    }
-
-    dispatch('click', event);
-  }
-
-  async function handleKeyDown(event) {
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
-      selected = !selected;
-      await tick();
-    }
-
-    dispatch('keydown', event);
-  }
-
   $: _class = cx(
     '--tile',
     '--tile--selectable',
@@ -52,23 +25,34 @@
 </script>
 
 <input
-  bind:this={input}
   type="checkbox"
-  tabindex={-1}
+  tabindex="-1"
   class={cx('--tile-input')}
-  on:change={handleChange}
+  on:change
   checked={selected}
   {id}
   {value}
   {name}
   {title} />
 <label
-  {...props}
   for={id}
   class={_class}
-  tabindex={tabIndex}
-  on:click|preventDefault={handleClick}
-  on:keydown={handleKeyDown}>
+  on:click
+  on:click|preventDefault={() => {
+    selected = !selected;
+  }}
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keydown
+  on:keydown={event => {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      selected = !selected;
+    }
+  }}
+  {tabindex}
+  {style}>
   <span class={cx('--tile__checkmark')}>
     <CheckmarkFilled16 aria-label={iconDescription} title={iconDescription} />
   </span>

src/components/Tile/Tile.Story.svelte

@@ -28,9 +28,9 @@
       <ClickableTile {...$$props}>Clickable Tile</ClickableTile>
     {:else if story === 'multi-select'}
       <div role="group" aria-label="selectable tiles">
-        <SelectableTile id="tile-1" name="tiles" {...$$props}>Multi-select Tile</SelectableTile>
-        <SelectableTile id="tile-2" name="tiles" {...$$props}>Multi-select Tile</SelectableTile>
-        <SelectableTile id="tile-3" name="tiles" {...$$props}>Multi-select Tile</SelectableTile>
+        <SelectableTile {...$$props} id="tile-1" name="tiles">Multi-select Tile</SelectableTile>
+        <SelectableTile {...$$props} id="tile-2" name="tiles">Multi-select Tile</SelectableTile>
+        <SelectableTile {...$$props} id="tile-3" name="tiles">Multi-select Tile</SelectableTile>
       </div>
     {:else if story === 'selectable'}
       <TileGroup legend="Selectable Tile Group">

src/components/Tile/Tile.svelte

@@ -2,13 +2,13 @@
   let className = undefined;
   export { className as class };
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
-  $: _class = cx('--tile', light && '--tile--light', className);
+  const _class = cx('--tile', light && '--tile--light', className);
 </script>
 
-<div class={_class} {...props}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <slot />
 </div>

src/components/Tile/TileAboveTheFoldContent.svelte

@@ -1,7 +1,14 @@
 <script>
   import { cx } from '../../lib';
+  export let style = undefined;
 </script>
 
-<span class={cx('--tile-content__above-the-fold')}>
+<span
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--tile-content__above-the-fold')}
+  {style}>
   <slot />
 </span>

src/components/Tile/TileBelowTheFoldContent.svelte

@@ -1,7 +1,14 @@
 <script>
   import { cx } from '../../lib';
+  export let style = undefined;
 </script>
 
-<span class={cx('--tile-content__below-the-fold')}>
+<span
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={cx('--tile-content__below-the-fold')}
+  {style}>
   <slot />
 </span>

src/components/Tile/TileGroup.svelte

@@ -3,13 +3,14 @@
   export { className as class };
   export let disabled = false;
   export let legend = '';
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
-  $: _class = cx('--tile-group', className);
+  const _class = cx('--tile-group', className);
 </script>
 
-<fieldset class={_class} {disabled}>
+<fieldset class={_class} {disabled} {style}>
   {#if legend}
     <legend>{legend}</legend>
   {/if}