From 72dd292e17545464734bff505e7511d46a3c29ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 5 May 2021 10:02:48 +0200
Subject: [PATCH] working ProgressCircle

---
 .../src/ProgressCircle/ProgressCircle.svelte  | 47 +++++++++++--------
 1 file changed, 28 insertions(+), 19 deletions(-)

diff --git a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
index c574c86adb..711517ec7b 100644
--- a/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
+++ b/packages/bbui/src/ProgressCircle/ProgressCircle.svelte
@@ -1,11 +1,17 @@
 <script>
-  // WIP! Does not yet work.
   import "@spectrum-css/progresscircle/dist/index-vars.css"
-  import { tweened } from "svelte/motion"
-  import { cubicOut } from "svelte/easing"
 
-  export let small
-  export let large
+  export let size = "M"
+  function convertSize(size) {
+    switch (size) {
+      case "S":
+        return "small"
+      case "L":
+        return "large"
+      default:
+        return
+    }
+  }
 
   export let value = false
   export let minValue = 0
@@ -13,17 +19,21 @@
 
   let subMask1Style
   let subMask2Style
-  if (value) {
-    let percentage = ((value - minValue) / (maxValue - minValue)) * 100
-    let angle
-    if (percentage > 0 && percentage <= 50) {
-      angle = -180 + (percentage / 50) * 180
-      subMask1Style = `transform: rotate(${angle}deg);`
-      subMask2Style = "transform: rotate(-180deg);"
-    } else if (percentage > 50) {
-      angle = -180 + ((percentage - 50) / 50) * 180
-      subMask1Style = "transform: rotate(0deg);"
-      subMask2Style = `transform: rotate(${angle}deg);`
+  $: calculateSubMasks(value)
+
+  function calculateSubMasks(value) {
+    if (value) {
+      let percentage = ((value - minValue) / (maxValue - minValue)) * 100
+      let angle
+      if (percentage > 0 && percentage <= 50) {
+        angle = -180 + (percentage / 50) * 180
+        subMask1Style = `transform: rotate(${angle}deg);`
+        subMask2Style = "transform: rotate(-180deg);"
+      } else if (percentage > 50) {
+        angle = -180 + ((percentage - 50) / 50) * 180
+        subMask1Style = "transform: rotate(0deg);"
+        subMask2Style = `transform: rotate(${angle}deg);`
+      }
     }
   }
 
@@ -31,11 +41,10 @@
 </script>
 
 <div
+  on:click
   class:spectrum-ProgressBar--indeterminate={!value}
-  class:spectrum-ProgressCircle--small={small}
-  class:spectrum-ProgressCircle--large={large}
   class:spectrum-ProgressCircle--overBackground={overBackground}
-  class="spectrum-ProgressCircle"
+  class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
 >
   <div class="spectrum-ProgressCircle-track" />
   <div class="spectrum-ProgressCircle-fills">