@dative-gpi/foundation-shared-components 1.1.20-progress-bar-2 → 1.1.21

package/components/FSProgressBar.vue

@@ -12,7 +12,16 @@
         <div
           v-if="$props.cursor && isValueInRange"
           class="fs-progress-bar-cursor"
-        ></div>
+        >
+          <FSText
+            v-if="$props.showValue"
+            class="fs-progress-bar-cursor-label"
+            font="text-overline"
+            :ellipsis="false"
+          >
+            {{ displayValue }}
+          </FSText>
+        </div>
         <div
           v-if="!$props.cursor"
           class="fs-progress-bar-fill"
@@ -41,7 +50,7 @@
       </div>
     </div>
     <FSText
-      v-if="$props.showValue"
+      v-if="$props.showValue && !$props.cursor"
       font="text-button"
     >
       {{ displayValue }}
@@ -158,12 +167,6 @@ export default defineComponent({
       return `${((100 - fillLeft.value) / fillWidth.value) * 100}%`;
     });
 
-    const fillColor = computed(() => {
-      return clampedValue.value >= 0
-        ? (props.endColor ?? successColors.base)
-        : (props.startColor ?? errorColors.base);
-    });
-
     const positionedLabels = computed(() => {
       return props.labels.map(label => {
         const percent = isValid.value
@@ -189,7 +192,6 @@ export default defineComponent({
       "--progress-bar-gradient-start-stop": gradientStartStop.value,
       "--progress-bar-gradient-end": props.endColor ?? successColors.base,
       "--progress-bar-gradient-end-stop": gradientEndStop.value,
-      "--progress-bar-fill-color": fillColor.value,
       "--progress-bar-fill-left": `${fillLeft.value}%`,
       "--progress-bar-fill-width": `${fillWidth.value}%`,
       "--progress-bar-cursor-position": `${valuePercent.value}%`

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.20-progress-bar-2",
+  "version": "1.1.21",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.20-progress-bar-2",
-    "@dative-gpi/foundation-shared-services": "1.1.20-progress-bar-2"
+    "@dative-gpi/foundation-shared-domain": "1.1.21",
+    "@dative-gpi/foundation-shared-services": "1.1.21"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "1bf7de326389a2bb6cee7baa796033b0fd2c22f9"
+  "gitHead": "7f473e2f3278860868e8120cc7417155145cdd07"
 }

package/styles/components/fs_progress_bar.scss

@@ -16,21 +16,38 @@
         height: 100%;
         left: var(--progress-bar-fill-left);
         width: var(--progress-bar-fill-width);
-        background-color: var(--progress-bar-fill-color);
+        background: linear-gradient(
+            to right,
+            var(--progress-bar-gradient-start) var(--progress-bar-gradient-start-stop),
+            var(--progress-bar-gradient-end)   var(--progress-bar-gradient-end-stop)
+        );
         border-radius: 4px;
         transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .fs-progress-bar-cursor {
         position: absolute;
-        top: 0;
-        height: 100%;
-        width: 12px;
-        border-radius: 4px;
-        background-color: var(--progress-bar-fill-color);
+        top: 50%;
         left: var(--progress-bar-cursor-position);
-        transform: translateX(-50%);
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: linear-gradient(
+            to right,
+            var(--progress-bar-gradient-start),
+            var(--progress-bar-gradient-end)
+        );
+        transform: translate(-50%, -50%);
         transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+
+        .fs-progress-bar-cursor-label {
+            position: absolute;
+            top: calc(100% + 4px);
+            left: 50%;
+            transform: translateX(-50%);
+            white-space: nowrap;
+            pointer-events: none;
+        }
     }
 }