refactor(components): remove exported "props"

Closes #17

- Forward events
- Adds style prop, removes exported props

src/components/Accordion/Accordion.Skeleton.svelte

@@ -27,7 +27,6 @@
       </div>
     </li>
   {/if}
-
   {#each skeletonItems as item}
     <li class={cx('--accordion__item')}>
       <span class={cx('--accordion__heading')}>

src/components/Accordion/Accordion.svelte

@@ -4,8 +4,10 @@
   export let style = undefined;
 
   import { cx } from '../../lib';
+
+  const _class = cx('--accordion', className);
 </script>
 
-<ul on:click on:mouseover on:mouseenter on:mouseleave {style} class={cx('--accordion', className)}>
+<ul on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <slot />
 </ul>

src/components/Accordion/AccordionItem.svelte

@@ -20,12 +20,12 @@
 </script>
 
 <li
-  {style}
   class={_class}
   on:animationend
   on:animationend={() => {
     animation = undefined;
-  }}>
+  }}
+  {style}>
   <button
     type="button"
     class={cx('--accordion__heading')}

src/components/Breadcrumb/Breadcrumb.Skeleton.svelte

@@ -1,14 +1,14 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--breadcrumb', '--skeleton', className);
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   {#each [0, 1, 2] as item, i (item)}
     <div class={cx('--breadcrumb-item')}>
       <span class={cx('--link')}>&nbsp;</span>

src/components/Breadcrumb/Breadcrumb.svelte

@@ -2,6 +2,7 @@
   let className = undefined;
   export { className as class };
   export let noTrailingSlash = false;
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -9,7 +10,14 @@
   const _class = cx('--breadcrumb', noTrailingSlash && '--breadcrumb--no-trailing-slash');
 </script>
 
-<nav class={className} aria-label={ariaLabel}>
+<nav
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  aria-label={ariaLabel}
+  class={className}
+  {style}>
   <ol class={_class}>
     <slot />
   </ol>

src/components/Breadcrumb/BreadcrumbItem.svelte

@@ -3,14 +3,13 @@
   export { className as class };
   export let href = undefined;
   export let isCurrentPage = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
   import Link from '../Link';
 
   const ariaCurrent = $$props['aria-current'];
-
+  const _class = cx(
-  $: _class = cx(
     '--breadcrumb-item',
     isCurrentPage && ariaCurrent !== 'page' && '--breadcrumb-item--current',
     className
@@ -18,13 +17,13 @@
 </script>
 
 {#if href}
-  <li class={_class} {...props}>
+  <li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
     <Link {href} aria-current={ariaCurrent}>
       <slot />
     </Link>
   </li>
 {:else}
-  <li class={_class} {...props}>
+  <li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
     <slot props={{ 'aria-current': ariaCurrent, class: cx('--link') }} />
   </li>
 {/if}

src/components/Button/Button.Skeleton.svelte

@@ -3,7 +3,7 @@
   export { className as class };
   export let small = false;
   export let href = undefined;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -11,7 +11,9 @@
 </script>
 
 {#if href}
-  <a {...props} class={_class} {href} role="button">{''}</a>
+  <a role="button" on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} {href}>
+    {''}
+  </a>
 {:else}
-  <div {...props} class={_class} />
+  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} />
 {/if}

src/components/Button/Button.svelte

@@ -14,7 +14,7 @@
   export let hasIconOnly = false;
   export let tooltipPosition = undefined;
   export let tooltipAlignment = undefined;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -37,13 +37,13 @@
     className
   );
   const buttonProps = {
-    ...props,
+    role: 'button',
+    type: href && !disabled ? undefined : type,
     tabindex,
     class: _class,
     disabled,
-    type: href && !disabled ? undefined : type,
+    href,
-    role: 'button',
+    style
-    href
   };
 </script>
 

src/components/CodeSnippet/CodeSnippet.svelte

@@ -3,12 +3,13 @@
   export { className as class };
   export let type = 'single';
   export let feedback = undefined;
+  export let feedbackTimeout = undefined;
   export let copyButtonDescription = undefined;
   export let copyLabel = undefined;
   export let showMoreText = 'Show more';
   export let showLessText = 'Show less';
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
   import { cx } from '../../lib';
@@ -18,38 +19,41 @@
 
   const id = Math.random();
   let codeRef = undefined;
-  let expandedCode = false;
+  let expanded = false;
-  let showMoreLessBtn = false;
+  let showMoreLess = false;
 
+  $: expandText = expanded ? showLessText : showMoreText;
   $: if (codeRef) {
-    const { height } = codeRef.getBoundingClientRect();
+    showMoreLess = type === 'multi' && codeRef.getBoundingClientRect().height > 255;
-    showMoreLessBtn = type === 'multi' && height > 255;
   }
   $: _class = cx(
     '--snippet',
     type && `--snippet--${type}`,
     type === 'inline' && '--btn--copy',
-    expandedCode && '--snippet--expand',
+    expanded && '--snippet--expand',
     light && '--snippet--light',
     className
   );
-  $: expandCodeBtnText = expandedCode ? showLessText : showMoreText;
 </script>
 
 {#if type === 'inline'}
   <Copy
-    on:click
+    aria-label={$$props['aria-label'] || copyLabel}
-    aria-label={copyLabel || $$props['aria-label']}
     aria-describedby={id}
+    on:click
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
     class={_class}
     {feedback}
-    {props}>
+    {feedbackTimeout}
+    {style}>
     <code {id}>
       <slot />
     </code>
   </Copy>
 {:else}
-  <div {...props} class={_class}>
+  <div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
     <div
       role="textbox"
       tabindex="0"
@@ -65,18 +69,19 @@
       on:click
       class={cx('--snippet-button')}
       {feedback}
+      {feedbackTimeout}
       iconDescription={copyButtonDescription} />
-    {#if showMoreLessBtn}
+    {#if showMoreLess}
       <Button
         kind="ghost"
         size="small"
         class={cx('--snippet-btn--expand')}
         on:click={() => {
-          expandedCode = !expandedCode;
+          expanded = !expanded;
         }}>
-        <span class={cx('--snippet-btn--text')}>{expandCodeBtnText}</span>
+        <span class={cx('--snippet-btn--text')}>{expandText}</span>
         <ChevronDown16
-          aria-label={expandCodeBtnText}
+          aria-label={expandText}
           class={cx('--icon-chevron--down', '--snippet__icon')} />
       </Button>
     {/if}

src/components/Copy/Copy.svelte

@@ -3,6 +3,7 @@
   export { className as class };
   export let feedback = 'Copied!';
   export let feedbackTimeout = 2000;
+  export let style = undefined;
 
   import { onDestroy } from 'svelte';
   import { cx } from '../../lib';
@@ -32,7 +33,8 @@
   }}
   on:mouseover
   on:mouseenter
-  on:mouseleave>
+  on:mouseleave
+  {style}>
   <slot />
   <div class={_class} data-feedback={feedback} />
 </button>

src/components/CopyButton/CopyButton.svelte

@@ -4,6 +4,7 @@
   export let iconDescription = 'Copy to clipboard';
   export let feedback = 'Copied!';
   export let feedbackTimeout = 2000;
+  export let style = undefined;
 
   import { onDestroy } from 'svelte';
   import Copy16 from 'carbon-icons-svelte/lib/Copy16';
@@ -49,7 +50,8 @@
     if (animationName === 'hide-feedback') {
       animation = undefined;
     }
-  }}>
+  }}
+  {style}>
   <span class={cx('--assistive-text', '--copy-btn__feedback')}>{feedback}</span>
   <Copy16 class={cx('--snippet__icon')} />
 </button>

src/components/Form/Form.svelte

@@ -8,6 +8,6 @@
   const _class = cx('--form', className);
 </script>
 
-<form class={_class} {style}>
+<form on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <slot />
 </form>

src/components/FormGroup/FormGroup.svelte

@@ -13,7 +13,14 @@
   const _legendClass = cx('--label', className);
 </script>
 
-<fieldset data-invalid={invalid ? '' : undefined} class={_class} {style}>
+<fieldset
+  data-invalid={invalid ? '' : undefined}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  class={_class}
+  {style}>
   <legend class={_legendClass}>{legendText}</legend>
   <slot />
   {#if message}

src/components/FormItem/FormItem.svelte

@@ -8,6 +8,6 @@
   const _class = cx('--form-item', className);
 </script>
 
-<div class={_class} {style}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <slot />
 </div>

src/components/FormLabel/FormLabel.svelte

@@ -9,6 +9,6 @@
   const _class = cx('--form-item', className);
 </script>
 
-<label for={id} class={_class} {style}>
+<label on:click on:mouseover on:mouseenter on:mouseleave for={id} class={_class} {style}>
   <slot />
 </label>

src/components/InlineLoading/InlineLoading.Story.svelte

@@ -36,16 +36,9 @@
   $: disabled = isSubmitting || success;
 </script>
 
-<style>
-  .wrapper {
-    display: flex;
-    width: 300px;
-  }
-</style>
-
 <Layout>
   {#if story === 'ux-example'}
-    <div class="wrapper">
+    <div style="display: flex; width: 300px">
       <Button kind="secondary" {disabled}>Cancel</Button>
       {#if disabled}
         <InlineLoading

src/components/InlineLoading/InlineLoading.stories.js

@@ -3,28 +3,21 @@ import Component from './InlineLoading.Story.svelte';
 
 export default { title: 'InlineLoading', decorators: [withKnobs] };
 
+const loadingStatus = ['inactive', 'active', 'finished', 'error'];
+
 export const Default = () => ({
   Component,
   props: {
-    status: select(
+    status: select('Loading status (status)', loadingStatus, 'active'),
-      'Loading status (status)',
-      ['inactive', 'active', 'finished', 'error'],
-      'active'
-    ),
     iconDescription: text('Icon description (iconDescription)', 'Active loading indicator'),
     description: text('Loading progress description (description)', 'Loading data...'),
     successDelay: number(
-      'The duration for successful state before `onSuccess` fires (successDelay)',
+      'The duration for successful state before `on:success` fires (successDelay)',
       1500
     )
   }
 });
 
-export const UxExample = () => ({
+export const UxExample = () => ({ Component, props: { story: 'ux-example' } });
-  Component,
-  props: { story: 'ux-example' }
-});
 
-UxExample.story = {
+UxExample.story = { name: 'UX Example' };
-  name: 'UX Example'
-};

src/components/InlineLoading/InlineLoading.svelte

@@ -1,8 +1,7 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let success = false; // TODO: deprecate
+  export let status = 'active';
-  export let status = success ? 'finished' : 'active';
   export let description = undefined;
   export let iconDescription = undefined;
   export let successDelay = 1500;
@@ -33,13 +32,13 @@
 </script>
 
 <div
+  aria-live={$$props['aria-live'] || 'assertive'}
   on:click
   on:mouseover
   on:mouseenter
   on:mouseleave
-  {style}
   class={_class}
-  aria-live={$$props['aria-live'] || 'assertive'}>
+  {style}>
   <div class={cx('--inline-loading__animation')}>
     {#if status === 'error'}
       <Error20 class={cx('--inline-loading--error')} />

src/components/Link/Link.svelte

@@ -18,24 +18,24 @@
 
 {#if disabled}
   <p
+    aria-current={$$props['aria-current']}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
-    {style}
+    class={_class}
-    aria-current={$$props['aria-current']}
+    {style}>
-    class={_class}>
     <slot />
   </p>
 {:else}
   <a
+    aria-current={$$props['aria-current']}
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
-    {style}
-    aria-current={$$props['aria-current']}
     class={_class}
+    {style}
     {href}>
     <slot />
   </a>

src/components/ListItem/ListItem.svelte

@@ -1,13 +1,13 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--list__item', className);
 </script>
 
-<li {...props} class={_class}>
+<li on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <slot />
 </li>

src/components/Loading/Loading.svelte

@@ -5,7 +5,7 @@
   export let withOverlay = true;
   export let small = false;
   export let description = 'Active loading indicator';
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
@@ -23,11 +23,11 @@
 {#if withOverlay}
   <div class={_overlayClass}>
     <div
-      {...props}
       aria-atomic="true"
       aria-labelledby={loadingId}
       aria-live={active ? 'assertive' : 'off'}
-      class={_class}>
+      class={_class}
+      {style}>
       <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
       <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
         <title>{description}</title>
@@ -40,11 +40,11 @@
   </div>
 {:else}
   <div
-    {...props}
     aria-atomic="true"
     aria-labelledby={loadingId}
     aria-live={active ? 'assertive' : 'off'}
-    class={_class}>
+    class={_class}
+    {style}>
     <label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
     <svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
       <title>{description}</title>

src/components/OrderedList/OrderedList.svelte

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

src/components/Search/Search.Skeleton.svelte

@@ -2,14 +2,14 @@
   let className = undefined;
   export { className as class };
   export let small = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--skeleton', !small && '--search--xl', small && '--search--sm', className);
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   <span class={cx('--label')} />
   <div class={cx('--search-input')} />
 </div>

src/components/Search/Search.svelte

@@ -10,7 +10,7 @@
   export let size = small ? 'sm' : 'xl';
   export let light = false;
   export let id = Math.random();
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import Search16 from 'carbon-icons-svelte/lib/Search16';
@@ -33,27 +33,25 @@
     }
   }
 
-  $: hasContent = value !== '';
+  $: _clearClass = cx('--search-close', value === '' && '--search-close--hidden');
-  $: _clearClass = cx('--search-close', !hasContent && '--search-close--hidden');
 </script>
 
-<div class={_class}>
+<div class={_class} {style}>
   <Search16 class={cx('--search-magnifier')} />
   <label for={id} class={cx('--label')}>{labelText}</label>
   <input
-    {...props}
     bind:this={inputRef}
     role="searchbox"
     class={cx('--search-input')}
     placeholder={placeHolderText}
-    {type}
-    {id}
-    {value}
     on:change
     on:input
     on:input={event => {
       value = event.target.value;
-    }} />
+    }}
+    {type}
+    {id}
+    {value} />
   <button
     type="button"
     class={_clearClass}

src/components/SkeletonText/SkeletonText.svelte

@@ -39,7 +39,7 @@
     on:mouseover
     on:mouseenter
     on:mouseleave
-    {style}
     class={_class}
-    style={`width: ${width};`} />
+    style={`width: ${width};`}
+    {style} />
 {/if}

src/components/Tag/Tag.Skeleton.svelte

@@ -1,5 +1,11 @@
 <script>
+  let className = undefined;
+  export { className as class };
+  export let style = undefined;
+
   import { cx } from '../../lib';
+
+  const _class = cx('--tag', '--skeleton', className);
 </script>
 
-<span class={cx('--tag', '--skeleton')} />
+<span on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style} />

src/components/Tag/Tag.svelte

@@ -5,7 +5,7 @@
   export let disabled = false;
   export let filter = false;
   export let title = 'Clear filter';
-  export let props = {};
+  export let style = undefined;
 
   import Close16 from 'carbon-icons-svelte/lib/Close16';
   import { cx } from '../../lib';
@@ -22,19 +22,19 @@
 
 {#if filter}
   <span
-    {...props}
     tabindex="0"
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
     class={_class}
-    {title}>
+    {title}
+    {style}>
     <slot>{TYPES[type]}</slot>
     <Close16 aria-label={title} />
   </span>
 {:else}
-  <span {...props} on:click on:mouseover on:mouseenter on:mouseleave class={_class}>
+  <span on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
     <slot>{TYPES[type]}</slot>
   </span>
 {/if}

src/components/TextArea/TextArea.Skeleton.svelte

@@ -2,14 +2,14 @@
   let className = undefined;
   export { className as class };
   export let hideLabel = false;
-  export let props = {};
+  export let style = undefined;
 
   import { cx } from '../../lib';
 
   const _class = cx('--form-item', className);
 </script>
 
-<div {...props} class={_class}>
+<div on:click on:mouseover on:mouseenter on:mouseleave class={_class} {style}>
   {#if !hideLabel}
     <span class={cx('--label', '--skeleton')} />
   {/if}

src/components/TextArea/TextArea.svelte

@@ -13,7 +13,7 @@
   export let helperText = '';
   export let hideLabel = false;
   export let light = false;
-  export let props = {};
+  export let style = undefined;
 
   import { createEventDispatcher } from 'svelte';
   import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
@@ -35,7 +35,7 @@
   );
 </script>
 
-<div class={cx('--form-item')}>
+<div on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
   {#if labelText && !hideLabel}
     <label for={id} class={_labelClass}>{labelText}</label>
   {/if}
@@ -47,7 +47,6 @@
       <WarningFilled16 class={cx('--text-area__invalid-icon')} />
     {/if}
     <textarea
-      {...props}
       on:click={event => {
         if (!disabled) {
           dispatch('click', event);

src/components/TextInput/TextInput.svelte

@@ -47,6 +47,7 @@
       class={_textInputClass}
       on:click
       on:change
+      on:input
       on:input={event => {
         value = event.target.value;
       }}

src/components/UnorderedList/UnorderedList.svelte

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