From 18a5f4e5cbb349562a939190d4bdac379dc049c9 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 19 Dec 2019 19:34:12 -0800
Subject: [PATCH 1/2] refactor(skeleton-placeholder): forward events

Supports #7
---
 .../SkeletonPlaceholder/SkeletonPlaceholder.stories.js        | 2 +-
 src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
index d660ec41..7a1b54f6 100644
--- a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
+++ b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.stories.js
@@ -1,7 +1,7 @@
 import { withKnobs, select } from '@storybook/addon-knobs';
 import Component from './SkeletonPlaceholder.Story.svelte';
 
-export default { title: 'Skeleton Placeholder', decorators: [withKnobs] };
+export default { title: 'SkeletonPlaceholder', decorators: [withKnobs] };
 
 const classes = {
   'my--skeleton__placeholder--small': 'my--skeleton__placeholder--small',
diff --git a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
index 94b8e9b7..46ccad33 100644
--- a/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
+++ b/src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
@@ -1,11 +1,11 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--skeleton__placeholder', className);
 </script>
 
-<div {...props} class={_class} />
+<div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class} />

From f0869edceb609f82d9a778821f1c1f3e05f6de6b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 19 Dec 2019 19:34:29 -0800
Subject: [PATCH 2/2] refactor(skeleton-text): forward events

Supports #7
---
 src/components/SkeletonText/SkeletonText.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/SkeletonText/SkeletonText.svelte b/src/components/SkeletonText/SkeletonText.svelte
index 2af34eb0..ddf00a35 100644
--- a/src/components/SkeletonText/SkeletonText.svelte
+++ b/src/components/SkeletonText/SkeletonText.svelte
@@ -5,7 +5,7 @@
   export let lineCount = 3;
   export let width = '100%';
   export let heading = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -14,6 +14,7 @@
   const widthNum = parseInt(width, 10);
   const widthPx = width.includes('px');
   const widthPercent = width.includes('%');
+
   let lines = [];
 
   $: if (paragraph) {
@@ -27,11 +28,18 @@
 </script>
 
 {#if paragraph}
-  <div>
+  <div on:click on:mouseover on:mouseenter on:mouseleave {style}>
     {#each lines as { width }}
-      <p {...props} class={_class} style={`width: ${width};`} />
+      <p class={_class} style={`width: ${width};`} />
     {/each}
   </div>
 {:else}
-  <p {...props} class={_class} style={`width: ${width};`} />
+  <p
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    {style}
+    class={_class}
+    style={`width: ${width};`} />
 {/if}