From e2779b98b092d87de82f587f109d569e97392c7e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 20 Jan 2022 20:03:06 -0800
Subject: [PATCH] feat(progress-step): update icons for current, incomplete
 steps

---
 src/ProgressIndicator/ProgressStep.svelte | 14 ++-----
 src/icons/CircleDash16.svelte             | 51 +++++++++++++++++++++++
 src/icons/Incomplete16.svelte             | 51 +++++++++++++++++++++++
 3 files changed, 106 insertions(+), 10 deletions(-)
 create mode 100644 src/icons/CircleDash16.svelte
 create mode 100644 src/icons/Incomplete16.svelte

diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index fba6bb33..e4ef4ba4 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -26,6 +26,8 @@
   import { onMount, getContext } from "svelte";
   import CheckmarkOutline16 from "../icons/CheckmarkOutline16.svelte";
   import Warning16 from "../icons/Warning16.svelte";
+  import CircleDash16 from "../icons/CircleDash16.svelte";
+  import Incomplete16 from "../icons/Incomplete16.svelte";
 
   let step = {};
 
@@ -84,19 +86,11 @@
     {#if invalid}
       <Warning16 class="bx--progress__warning" title="{description}" />
     {: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"></path>
-        <title>{description}</title>
-      </svg>
+      <Incomplete16 title="{description}" />
     {: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"></path>
-      </svg>
+      <CircleDash16 title="{description}" />
     {/if}
     <slot props="{{ class: 'bx--progress-label' }}">
       <p class:bx--progress-label="{true}">{label}</p>
diff --git a/src/icons/CircleDash16.svelte b/src/icons/CircleDash16.svelte
new file mode 100644
index 00000000..a214819b
--- /dev/null
+++ b/src/icons/CircleDash16.svelte
@@ -0,0 +1,51 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props["aria-label"];
+  $: ariaLabelledBy = $$props["aria-labelledby"];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: tabindex === "0" ? true : focusable,
+    tabindex,
+  };
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<svg
+  data-carbon-icon="CircleDash16"
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keyup
+  on:keydown
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  width="16"
+  height="16"
+  class="{className}"
+  preserveAspectRatio="xMidYMid meet"
+  style="{style}"
+  id="{id}"
+  {...attributes}
+>
+  <path
+    d="M7.7 4.7a14.7 14.7 0 00-3 3.1L6.3 9A13.26 13.26 0 018.9 6.3zM4.6 12.3l-1.9-.6A12.51 12.51 0 002 16H4A11.48 11.48 0 014.6 12.3zM2.7 20.4a14.4 14.4 0 002 3.9l1.6-1.2a12.89 12.89 0 01-1.7-3.3zM7.8 27.3a14.4 14.4 0 003.9 2l.6-1.9A12.89 12.89 0 019 25.7zM11.7 2.7l.6 1.9A11.48 11.48 0 0116 4V2A12.51 12.51 0 0011.7 2.7zM24.2 27.3a15.18 15.18 0 003.1-3.1L25.7 23A11.53 11.53 0 0123 25.7zM27.4 19.7l1.9.6A15.47 15.47 0 0030 16H28A11.48 11.48 0 0127.4 19.7zM29.2 11.6a14.4 14.4 0 00-2-3.9L25.6 8.9a12.89 12.89 0 011.7 3.3zM24.1 4.6a14.4 14.4 0 00-3.9-2l-.6 1.9a12.89 12.89 0 013.3 1.7zM20.3 29.3l-.6-1.9A11.48 11.48 0 0116 28v2A21.42 21.42 0 0020.3 29.3z"
+  ></path>
+  <slot>
+    {#if title}
+      <title>{title}</title>
+    {/if}
+  </slot>
+</svg>
diff --git a/src/icons/Incomplete16.svelte b/src/icons/Incomplete16.svelte
new file mode 100644
index 00000000..23c303d2
--- /dev/null
+++ b/src/icons/Incomplete16.svelte
@@ -0,0 +1,51 @@
+<script>
+  let className = undefined;
+  export { className as class };
+  export let id = undefined;
+  export let tabindex = undefined;
+  export let focusable = false;
+  export let title = undefined;
+  export let style = undefined;
+
+  $: ariaLabel = $$props["aria-label"];
+  $: ariaLabelledBy = $$props["aria-labelledby"];
+  $: labelled = ariaLabel || ariaLabelledBy || title;
+  $: attributes = {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-hidden": labelled ? undefined : true,
+    role: labelled ? "img" : undefined,
+    focusable: tabindex === "0" ? true : focusable,
+    tabindex,
+  };
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<svg
+  data-carbon-icon="Incomplete16"
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave
+  on:keyup
+  on:keydown
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 32 32"
+  fill="currentColor"
+  width="16"
+  height="16"
+  class="{className}"
+  preserveAspectRatio="xMidYMid meet"
+  style="{style}"
+  id="{id}"
+  {...attributes}
+>
+  <path
+    d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"
+  ></path>
+  <slot>
+    {#if title}
+      <title>{title}</title>
+    {/if}
+  </slot>
+</svg>