feat: add styling options to MsProgressBar

Scille · Sep 25, 2024 · 5fb8095 · 5fb8095
1 parent a0b974b
commit 5fb8095
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/lib/components/ms-progress-bar/MsProgressBar.vue b/lib/components/ms-progress-bar/MsProgressBar.vue
@@ -7,7 +7,7 @@
     </div>
     <ion-text
       class="title-h5 progress-text"
-      v-show="props.showProgressText"
+      v-show="props.appearance === ProgressBarAppearance.Bar"
     >
       {{ `${progress}%` }}
     </ion-text>
@@ -17,6 +17,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { IonText } from '@ionic/vue';
+import { ProgressBarAppearance } from '@lib/components/ms-progress-bar/types';
 
 const props = defineProps({
   progress: {
@@ -26,12 +27,31 @@ const props = defineProps({
       return value >= 0 && value <= 100;
     },
   },
-  showProgressText: {
-    type: Boolean,
+  appearance: {
+    type: String,
+    default: ProgressBarAppearance.Bar,
   },
 });
 
 const progressWidthStyle = computed(() => `${props.progress}%`);
+const heightStyle = computed(() => {
+  if (props.appearance === ProgressBarAppearance.Bar) {
+    return '0.725rem';
+  }
+  if (props.appearance === ProgressBarAppearance.Line) {
+    return '0.375rem';
+  }
+  return '0.725rem';
+});
+const progressHeightStyle = computed(() => {
+  if (props.appearance === ProgressBarAppearance.Bar) {
+    return '0.5rem';
+  }
+  if (props.appearance === ProgressBarAppearance.Line) {
+    return '0.125rem';
+  }
+  return '0.5rem';
+});
 </script>
 
 <style scoped lang="scss">
@@ -45,16 +65,16 @@ const progressWidthStyle = computed(() => `${props.progress}%`);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: 16em;
+  width: 100%;
   padding: 0.125rem;
-  height: 0.725rem;
+  height: v-bind(heightStyle);
   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: 0.5rem;
+    height: v-bind(progressHeightStyle);
     background: var(--parsec-color-light-gradient);
     border-radius: var(--parsec-radius-6);
     flex: none;

diff --git a/lib/components/ms-progress-bar/index.ts b/lib/components/ms-progress-bar/index.ts
@@ -2,4 +2,5 @@
 
 import MsProgressBar from '@lib/components/ms-progress-bar/MsProgressBar.vue';
 
+export * from '@lib/components/ms-progress-bar/types';
 export { MsProgressBar };
diff --git a/lib/components/ms-progress-bar/types.ts b/lib/components/ms-progress-bar/types.ts
@@ -0,0 +1,4 @@
+export enum ProgressBarAppearance {
+  Bar = 'bar',
+  Line = 'line',
+}
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -84,10 +84,17 @@
         <!-- progress bar -->
         <div class="example-divider">
           <ion-label class="title-h2">{{ $msTranslate('usage.components.progressBar.title') }}</ion-label>
+          <div class="example-divider-content">
+            <ms-progress-bar
+              :appearance="ProgressBarAppearance.Bar"
+              class="ms-progress-bar"
+            />
+          </div>
           <div class="example-divider-content">
             <ms-progress-bar
               :progress="progress"
-              show-progress-text
+              :appearance="ProgressBarAppearance.Line"
+              class="ms-progress-bar"
             />
           </div>
         </div>
@@ -467,6 +474,7 @@ import {
   MsStripeCardDetails,
   MsDropdownChangeEvent,
   MsProgressBar,
+  ProgressBarAppearance,
   MsSummaryCard,
   createSummaryCardItem,
   openSpinnerModal as msOpenSpinnerModal,
@@ -682,6 +690,10 @@ async function createStripeCard(): Promise<void> {
 </script>
 
 <style scoped lang="scss">
+.ms-progress-bar {
+  width: 16em;
+}
+
 .main-title {
   text-align: center;
   margin: 0;