chore: lift components folder

src/ProgressIndicator/ProgressIndicator.Skeleton.svelte

@@ -0,0 +1,29 @@
+<script>
+  export let vertical = false;
+</script>
+
+<ul
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  class:bx--skeleton={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#each [0, 1, 2, 3] as item, i (item)}
+    <li
+      class:bx--progress-step={true}
+      class:bx--progress-step--incomplete={true}>
+      <div
+        class:bx--progress-step-button={true}
+        class:bx--progress-step-button--unclickable={true}>
+        <svg>
+          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
+        </svg>
+        <p class:bx--progress-label={true} />
+        <span class:bx--progress-line={true} />
+      </div>
+    </li>
+  {/each}
+</ul>

src/ProgressIndicator/ProgressIndicator.Story.svelte

@@ -0,0 +1,48 @@
+<script>
+  export let story = undefined;
+
+  import ProgressIndicator from "./ProgressIndicator.svelte";
+  import ProgressIndicatorSkeleton from "./ProgressIndicator.Skeleton.svelte";
+  import ProgressStep from "./ProgressStep.svelte";
+</script>
+
+<div>
+  {#if story === 'skeleton'}
+    <ProgressIndicatorSkeleton {...$$props} />
+  {:else if story === 'interactive'}
+    <ProgressIndicator {...$$props}>
+      <ProgressStep description="Step 1: Register a onChange event" let:props>
+        <div {...props}>Click me</div>
+      </ProgressStep>
+      <ProgressStep
+        label="Really long label"
+        description="The progress indicator will listen for clicks on the steps" />
+      <ProgressStep
+        label="Tooltip and really long label"
+        description="The progress indicator will listen for clicks on the steps" />
+    </ProgressIndicator>
+  {:else}
+    <ProgressIndicator {...$$props}>
+      <ProgressStep
+        label="First step"
+        description="Step 1: Getting started with Carbon Design System"
+        secondaryLabel="Optional label" />
+      <ProgressStep
+        label="Second step with tooltip"
+        description="Step 2: Getting started with Carbon Design System"
+        secondaryLabel="Optional label" />
+      <ProgressStep
+        label="Third step with tooltip"
+        description="Step 3: Getting started with Carbon Design System" />
+      <ProgressStep
+        label="Fourth step"
+        description="Step 4: Getting started with Carbon Design System"
+        secondaryLabel="Example invalid step"
+        invalid />
+      <ProgressStep
+        label="Fifth step"
+        description="Step 5: Getting started with Carbon Design System"
+        disabled />
+    </ProgressIndicator>
+  {/if}
+</div>

src/ProgressIndicator/ProgressIndicator.stories.js

@@ -0,0 +1,29 @@
+import { withKnobs, boolean, number } from "@storybook/addon-knobs";
+import Component from "./ProgressIndicator.Story.svelte";
+
+export default { title: "ProgressIndicator", decorators: [withKnobs] };
+
+export const Default = () => ({
+  Component,
+  props: {
+    currentIndex: number("Current progress (currentIndex)", 1),
+    vertical: boolean("Vertical orientation (vertical)", false),
+  },
+});
+
+export const Interactive = () => ({
+  Component,
+  props: {
+    story: "interactive",
+    currentIndex: number("Current progress (currentIndex)", 1),
+    vertical: boolean("Vertical orientation (vertical)", false),
+  },
+});
+
+export const Skeleton = () => ({
+  Component,
+  props: {
+    story: "skeleton",
+    vertical: boolean("Vertical orientation (vertical)", false),
+  },
+});

src/ProgressIndicator/ProgressIndicator.svelte

@@ -0,0 +1,43 @@
+<script>
+  export let currentIndex = 0;
+  export let vertical = false;
+
+  import { createEventDispatcher, setContext } from "svelte";
+  import { writable, derived } from "svelte/store";
+
+  const dispatch = createEventDispatcher();
+  const steps = writable([]);
+  const stepsById = derived(steps, $ =>
+    $.reduce((a, c) => ({ ...a, [c.id]: c }), {})
+  );
+
+  setContext("ProgressIndicator", {
+    steps,
+    stepsById,
+    add: step => {
+      steps.update(_ => [
+        ..._,
+        {
+          ...step,
+          index: _.length,
+          current: _.length === currentIndex,
+          complete: _.length <= currentIndex
+        }
+      ]);
+    },
+    change: index => {
+      dispatch("change", index);
+    }
+  });
+</script>
+
+<ul
+  class:bx--progress={true}
+  class:bx--progress--vertical={vertical}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  <slot />
+</ul>

src/ProgressIndicator/ProgressStep.svelte

@@ -0,0 +1,76 @@
+<script>
+  export let complete = false;
+  export let current = false;
+  export let disabled = false;
+  export let invalid = false;
+  export let description = "";
+  export let label = "";
+  export let secondaryLabel = "";
+  export let id = "ccs-" + Math.random().toString(36);
+
+  import { getContext } from "svelte";
+  import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
+  import Warning16 from "carbon-icons-svelte/lib/Warning16";
+
+  const { stepsById, add, change } = getContext("ProgressIndicator");
+
+  add({ id, disabled });
+
+  $: step = $stepsById[id];
+  $: {
+    current = step.current;
+    complete = step.complete;
+  }
+</script>
+
+<li
+  aria-disabled={disabled}
+  class:bx--progress-step={true}
+  class:bx--progress-step--current={current}
+  class:bx--progress-step--complete={complete}
+  class:bx--progress-step--incomplete={!complete && !current}
+  class:bx--progress-step--disabled={disabled}
+  {...$$restProps}>
+  <div
+    role="button"
+    tabindex={current ? '-1' : '0'}
+    class:bx--progress-step-button={true}
+    class:bx--progress-step-button--unclickable={current}
+    on:click={() => {
+      change(step.index);
+    }}
+    on:mouseover
+    on:mouseenter
+    on:mouseleave
+    on:keydown
+    on:keydown={e => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        change(step.index);
+      }
+    }}>
+    {#if invalid}
+      <Warning16 class="bx--progress__warning" />
+    {:else if current}
+      <svg>
+        <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
+        <title>{description}</title>
+      </svg>
+    {:else if complete}
+      <CheckmarkOutline16 title={description} />
+    {:else}
+      <svg>
+        <title>{description}</title>
+        <path
+          d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
+          0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
+      </svg>
+    {/if}
+    <slot props={{ class: 'bx--progress-label' }}>
+      <p class:bx--progress-label={true}>{label}</p>
+    </slot>
+    {#if secondaryLabel}
+      <p class:bx--progress-optional={true}>{secondaryLabel}</p>
+    {/if}
+    <span class:bx--progress-line={true} />
+  </div>
+</li>

src/ProgressIndicator/index.js

@@ -0,0 +1,3 @@
+export { default as ProgressIndicator } from "./ProgressIndicator.svelte";
+export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator.Skeleton.svelte";
+export { default as ProgressStep } from "./ProgressStep.svelte";