From c97fc61f77bec633102db80878f0147e9476341a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 27 Apr 2021 16:41:43 +0200
Subject: [PATCH] update progressbar to use new API

---
 .../bbui/src/ProgressBar/ProgressBar.svelte   | 83 ++++++++++++-------
 packages/bbui/src/index.js                    |  1 -
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/packages/bbui/src/ProgressBar/ProgressBar.svelte b/packages/bbui/src/ProgressBar/ProgressBar.svelte
index 4b046ec81c..bca427b7ff 100644
--- a/packages/bbui/src/ProgressBar/ProgressBar.svelte
+++ b/packages/bbui/src/ProgressBar/ProgressBar.svelte
@@ -1,38 +1,63 @@
 <script>
-    import "@spectrum-css/progressbar/dist/index-vars.css"
-    import { tweened } from 'svelte/motion';
-    import { cubicOut } from 'svelte/easing';
+  import "@spectrum-css/progressbar/dist/index-vars.css"
+  import { tweened } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
 
-    export let value = false
-    export let easing = cubicOut
-    export let duration = 1000;
-    export let width = false;
-    export let sideLabel = false
-    export let overBackground = false
+  export let value = false
+  export let easing = cubicOut
+  export let duration = 1000
+  export let width = false
+  export let sideLabel = false
+  export let overBackground = false
 
-    export let s = false;
-    export let m = false;
-    export let l = false;
-    export let xl = false;
+  export let size = "M"
 
-    const progress = tweened(0, {
-		duration: duration,
-		easing: easing
-	});
+  const progress = tweened(0, {
+    duration: duration,
+    easing: easing,
+  })
 
-    $: if (value) $progress = value
+  $: if (value) $progress = value
 </script>
 
-
-<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressBar--sideLabel={sideLabel} class:spectrum-ProgressBar--sizeS={s} class:spectrum-ProgressBar--sizeM={m} class:spectrum-ProgressBar--sizeL={l} class:spectrum-ProgressBar--sizeXL={xl} class="spectrum-ProgressBar"  value={$progress} role="progressbar" aria-valuenow={$progress} aria-valuemin="0" aria-valuemax="100" style={width ? `width: ${width}px;` : ''}>
-    {#if $$slots}
-        <div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-label"><slot /></div>
-    {/if}
-    {#if value}
-        <div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-percentage">{Math.round($progress)}%</div>
-    {/if}
-    <div class="spectrum-ProgressBar-track">
-        <div class="spectrum-ProgressBar-fill" style={value ? `width: ${$progress}%` : ''}></div>
+<div
+  class:spectrum-ProgressBar--indeterminate={!value}
+  class:spectrum-ProgressBar--sideLabel={sideLabel}
+  class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
+  value={$progress}
+  role="progressbar"
+  aria-valuenow={$progress}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  style={width ? `width: ${width}px;` : ""}
+>
+  {#if $$slots}
+    <div
+      class:spectrum-FieldLabel--sizeS={s}
+      class:spectrum-FieldLabel--sizeM={m}
+      class:spectrum-FieldLabel--sizeL={l}
+      class:spectrum-FieldLabel--sizeXL={xl}
+      class="spectrum-FieldLabel spectrum-ProgressBar-label"
+    >
+      <slot />
     </div>
-    <div class="spectrum-ProgressBar-label" hidden=""></div>
+  {/if}
+  {#if value}
+    <div
+      class:spectrum-FieldLabel--sizeS={s}
+      class:spectrum-FieldLabel--sizeM={m}
+      class:spectrum-FieldLabel--sizeL={l}
+      class:spectrum-FieldLabel--sizeXL={xl}
+      class="spectrum-FieldLabel spectrum-ProgressBar-percentage"
+    >
+      {Math.round($progress)}%
+    </div>
+  {/if}
+  <div class="spectrum-ProgressBar-track">
+    <div
+      class="spectrum-ProgressBar-fill"
+      style={value ? `width: ${$progress}%` : ""}
+    />
+  </div>
+  <div class="spectrum-ProgressBar-label" hidden="" />
 </div>
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 312d87b436..f0bf22f9e7 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -21,7 +21,6 @@ export { default as Icon, directions } from "./Icon/Icon.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
-export { default as Home } from "./Links/Home.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"