refactor(components): remove exported "props"

Closes #17

- Forward events
- Adds style prop, removes exported props

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(
-      'Loading status (status)',
-      ['inactive', 'active', 'finished', 'error'],
-      'active'
-    ),
+    status: select('Loading status (status)', loadingStatus, '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 = () => ({
-  Component,
-  props: { story: 'ux-example' }
-});
+export const UxExample = () => ({ Component, props: { story: 'ux-example' } });
 
-UxExample.story = {
-  name: 'UX Example'
-};
+UxExample.story = { 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 = success ? 'finished' : 'active';
+  export let status = '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')} />