Merge pull request #40 from metonym/refactor

refactor: remove exported props

README.md

@@ -24,6 +24,7 @@ Currently, the following components are supported:
   - CodeSnippetSkeleton
 - Copy
 - CopyButton
+- DataTableSkeleton
 - InlineLoading
 - Loading
 - Link

src/components/Breadcrumb/BreadcrumbItem.svelte

@@ -15,17 +15,16 @@
     isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current',
     className
   );
-  $: itemProps = { 'aria-current': ariaCurrent, class: cx('--link') };
 </script>
 
 {#if href}
   <li class={_class} {...props}>
-    <Link {href} props={itemProps}>
+    <Link {href} aria-current={ariaCurrent}>
       <slot />
     </Link>
   </li>
 {:else}
   <li class={_class} {...props}>
-    <slot props={itemProps} />
+    <slot props={{ 'aria-current': ariaCurrent, class: cx('--link') }} />
   </li>
 {/if}

src/components/DataTableSkeleton/DataTableSkeleton.svelte

@@ -6,7 +6,7 @@
   export let rowCount = 5;
   export let columnCount = 5;
   export let headers = [];
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -25,7 +25,7 @@
   );
 </script>
 
-<table {...props} on:click on:mouseover on:mouseenter on:mouseleave class={_class}>
+<table on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class}>
   <thead>
     <tr>
       {#each columns as column, i (column)}

src/components/InlineLoading/InlineLoading.Story.svelte

@@ -41,10 +41,6 @@
     display: flex;
     width: 300px;
   }
-
-  :global(.loader) {
-    margin-left: 1rem;
-  }
 </style>
 
 <Layout>
@@ -53,7 +49,7 @@
       <Button kind="secondary" {disabled}>Cancel</Button>
       {#if disabled}
         <InlineLoading
-          class="loader"
+          style="margin-left: 1rem;"
           description={loadingDescription}
           status={success ? 'finished' : 'active'}
           aria-live={ariaLive} />

src/components/InlineLoading/InlineLoading.svelte

@@ -6,7 +6,7 @@
   export let description = undefined;
   export let iconDescription = undefined;
   export let successDelay = 1500;
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher, onDestroy } from 'svelte';
   import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
@@ -20,19 +20,26 @@
 
   onDestroy(() => {
     if (timeoutId !== undefined) {
-      clearTimeout(timeoutId);
+      window.clearTimeout(timeoutId);
       timeoutId = undefined;
     }
   });
 
   $: if (status === 'finished') {
-    timeoutId = setTimeout(() => {
+    timeoutId = window.setTimeout(() => {
       dispatch('success');
     }, successDelay);
   }
 </script>
 
-<div {...props} class={_class} aria-live={$$props['aria-live'] || 'assertive'}>
+<div
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  {style}
+  class={_class}
+  aria-live={$$props['aria-live'] || 'assertive'}>
   <div class={cx('--inline-loading__animation')}>
     {#if status === 'error'}
       <Error20 class={cx('--inline-loading--error')} />

src/components/Link/Link.Story.svelte

@@ -1,14 +1,10 @@
 <script>
-  export let href = undefined;
-  export let inline = undefined;
-  export let disabled = undefined;
-
   import Layout from '../../internal/ui/Layout.svelte';
   import Link from './Link.svelte';
 </script>
 
 <Layout>
   <div>
-    <Link {href} {inline} {disabled}>Link</Link>
+    <Link {...$$props}>Link</Link>
   </div>
 </Layout>

src/components/Link/Link.svelte

@@ -4,7 +4,7 @@
   export let href = undefined;
   export let disabled = false;
   export let inline = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -17,11 +17,26 @@
 </script>
 
 {#if disabled}
-  <p {...props} class={_class}>
+  <p
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    {style}
+    aria-current={$$props['aria-current']}
+    class={_class}>
     <slot />
   </p>
 {:else}
-  <a {...props} class={_class} {href}>
+  <a
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    {style}
+    aria-current={$$props['aria-current']}
+    class={_class}
+    {href}>
     <slot />
   </a>
 {/if}