feat: initial commit

src/components/InlineLoading/InlineLoading.Story.svelte

@@ -0,0 +1,67 @@
+<script>
+  export let story = undefined;
+  export let status = undefined;
+  export let iconDescription = undefined;
+  export let description = undefined;
+  export let successDelay = undefined;
+
+  import Layout from '../../internal/ui/Layout.svelte';
+  import Button from '../Button';
+  import InlineLoading from './InlineLoading.svelte';
+
+  const props = { status, iconDescription, description, successDelay };
+
+  let isSubmitting = false;
+  let success = false;
+  let ariaLive = 'off';
+  let loadingDescription = 'Submitting...';
+
+  function handleSubmit() {
+    isSubmitting = true;
+    ariaLive = 'assertive';
+
+    setTimeout(() => {
+      isSubmitting = false;
+      loadingDescription = 'Submitted!';
+      success = true;
+      setTimeout(() => {
+        success = false;
+        isSubmitting = false;
+        loadingDescription = 'Submitting...';
+        ariaLive = 'off';
+      }, 1500);
+    }, 2000);
+  }
+
+  $: disabled = isSubmitting || success;
+</script>
+
+<style>
+  .wrapper {
+    display: flex;
+    width: 300px;
+  }
+
+  :global(.loader) {
+    margin-left: 1rem;
+  }
+</style>
+
+<Layout>
+  {#if story === 'ux-example'}
+    <div class="wrapper">
+      <Button kind="secondary" {disabled}>Cancel</Button>
+      {#if disabled}
+        <InlineLoading
+          class="loader"
+          description={loadingDescription}
+          status={success ? 'finished' : 'active'}
+          aria-live={ariaLive} />
+      {:else}
+        <Button on:click={handleSubmit}>Submit</Button>
+      {/if}
+    </div>
+  {:else}
+    <InlineLoading {...props} />
+  {/if}
+</Layout>

src/components/InlineLoading/InlineLoading.stories.js

@@ -0,0 +1,30 @@
+import { withKnobs, select, text, number } from '@storybook/addon-knobs';
+import Component from './InlineLoading.Story.svelte';
+
+export default { title: 'InlineLoading', decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    status: select(
+      '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)',
+      1500
+    )
+  }
+});
+
+export const UxExample = () => ({
+  Component,
+  props: { story: 'ux-example' }
+});
+
+UxExample.story = {
+  name: 'UX Example'
+};

src/components/InlineLoading/InlineLoading.svelte

@@ -0,0 +1,52 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let success = false; // TODO: deprecate
+  export let status = success ? 'finished' : 'active';
+  export let description = undefined;
+  export let iconDescription = undefined;
+  export let successDelay = 1500;
+  export let props = {};
+
+  import { createEventDispatcher, onDestroy } from 'svelte';
+  import CheckmarkFilled16 from 'carbon-icons-svelte/lib/CheckmarkFilled16';
+  import Error20 from 'carbon-icons-svelte/lib/Error20';
+  import { cx } from '../../lib';
+  import Loading from '../Loading';
+
+  const dispatch = createEventDispatcher();
+  const _class = cx('--inline-loading', className);
+  let timeoutId = undefined;
+
+  onDestroy(() => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+      timeoutId = undefined;
+    }
+  });
+
+  $: if (status === 'finished') {
+    timeoutId = setTimeout(() => {
+      dispatch('success');
+    }, successDelay);
+  }
+</script>
+
+<div {...props} class={_class} aria-live={$$props['aria-live'] || 'assertive'}>
+  <div class={cx('--inline-loading__animation')}>
+    {#if status === 'error'}
+      <Error20 class={cx('--inline-loading--error')} />
+    {:else if status === 'finished'}
+      <CheckmarkFilled16 class={cx('--inline-loading__checkmark-container')} />
+    {:else if status === 'inactive' || status === 'active'}
+      <Loading
+        small
+        description={iconDescription}
+        withOverlay={false}
+        active={status === 'active'} />
+    {/if}
+  </div>
+  {#if description}
+    <div class={cx('--inline-loading__text')}>{description}</div>
+  {/if}
+</div>

src/components/InlineLoading/index.js

@@ -0,0 +1,3 @@
+import InlineLoading from './InlineLoading.svelte';
+
+export default InlineLoading;