Merge pull request #155 from Scille/ms-progress-update

[MS] Added class progress bar variation
Scille · Oct 8, 2024 · e9a426b · e9a426b
2 parents 973514f + 07c6e29
commit e9a426b
Showing 1 changed file with 43 additions and 24 deletions.
diff --git a/lib/components/ms-progress/MsProgress.vue b/lib/components/ms-progress/MsProgress.vue
@@ -1,7 +1,14 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <div class="progress-container">
+  <div
+    class="progress-container"
+    :class="{
+      'progress-bar': props.appearance === MsProgressAppearance.ProgressBar,
+      line: props.appearance === MsProgressAppearance.Line,
+      bar: props.appearance === MsProgressAppearance.Bar,
+    }"
+  >
     <div class="progress">
       <div class="completed" />
     </div>
@@ -34,26 +41,6 @@ const props = defineProps({
 });
 
 const progressWidthStyle = computed(() => `${props.progress}%`);
-const heightStyle = computed(() => {
-  switch (props.appearance) {
-    case MsProgressAppearance.Line:
-      return '0.125rem';
-    case MsProgressAppearance.Bar:
-    case MsProgressAppearance.ProgressBar:
-    default:
-      return '0.725rem';
-  }
-});
-const progressHeightStyle = computed(() => {
-  switch (props.appearance) {
-    case MsProgressAppearance.Line:
-      return '0.125rem';
-    case MsProgressAppearance.Bar:
-    case MsProgressAppearance.ProgressBar:
-    default:
-      return '0.5rem';
-  }
-});
 </script>
 
 <style scoped lang="scss">
@@ -68,15 +55,14 @@ const progressHeightStyle = computed(() => {
   flex-direction: column;
   align-items: flex-start;
   width: 100%;
-  padding: 0.125rem;
-  height: v-bind(heightStyle);
+  height: 0.725rem;
   background: var(--parsec-color-light-secondary-premiere);
   border-radius: var(--parsec-radius-8);
 
   .completed {
     transition: width 0.35s ease-in-out;
     width: v-bind(progressWidthStyle);
-    height: v-bind(progressHeightStyle);
+    height: 0.5rem;
     background: var(--parsec-color-light-gradient);
     border-radius: var(--parsec-radius-6);
     flex: none;
@@ -85,6 +71,39 @@ const progressHeightStyle = computed(() => {
   }
 }
 
+.line {
+  .progress {
+    height: 0.125rem;
+    padding: 0;
+
+    .completed {
+      height: 0.125rem;
+    }
+  }
+}
+
+.bar {
+  .progress {
+    height: 0.75rem;
+    padding: 0.125rem;
+
+    .completed {
+      height: auto;
+    }
+  }
+}
+
+.progress-bar {
+  .progress {
+    height: 0.75rem;
+    padding: 0.125rem;
+
+    .completed {
+      height: auto;
+    }
+  }
+}
+
 .progress-text {
   color: var(--parsec-color-light-primary-600);
 }