add progress bar WIP

src/constants/progress-bar-mapper.js

@@ -0,0 +1,82 @@
+export const pageProgressMapper = {
+    'duplicate-check': {
+        percent: 10
+    },
+    'policy-holder-details': {
+        percent: 15
+    },
+    'policy-vehicles': {
+        percent: 15
+    },
+    'policy-endorsements': {
+        percent: 15
+    },
+    'vehicle-selection': {
+        percent: 20
+    },
+    'vehicle-damage': {
+        percent: 25
+    },
+    'part-questions': {
+        percent: 30
+    },
+    'molding-questions': {
+        percent: 35
+    },
+    'vehicle-parts': {
+        percent: 35
+    },
+    'capability-questions': {
+        percent: 35
+    },
+    'vehicle-lookup': {
+        percent: 40
+    },
+    'vin-lookup': {
+        percent: 45
+    },
+    'license-plate-lookup': {
+        percent: 45
+    },
+    'address-lookup': {
+        percent: 45
+    },
+    'address-vehicles': {
+        percent: 45
+    },
+    'coverage-statement': {
+        percent: 50
+    },
+    'provider-preference': {
+        percent: 55
+    },
+    'service-location': {
+        percent: 60
+    },
+    'tpa-search': {
+        percent: 65
+    },
+    'schedule-page': {
+        percent: 70
+    },
+    'contact-details': {
+        percent: 75
+    },
+    'service-packages': {
+        percent: 80
+    },
+    'payment-method': {
+        percent: 85
+    },
+    'payment-page': {
+        percent: 95
+    },
+    'tpa-confirmation': {
+        percent: 100
+    },
+    'order-confirmation': {
+        percent: 100
+    }
+};
+
+export const getProgressBarPercentage = (page) => pageProgressMapper[page]?.percent || 0;

src/iss-components/progress-bar/progress-bar.vue

@@ -0,0 +1,111 @@
+<template>
+    <div :class="barClass">
+        <div
+class="progress-bar-inner"
+:style="progressStyle"></div>
+    </div>
+</template>
+
+<script>
+import { getProgressBarPercentage } from '@/constants/progress-bar-mapper';
+
+// Module-level variable to persist progress across component lifecycles
+let lastProgress = 0;
+
+export default {
+    name: 'progress-bar',
+    props: {
+        page: {
+            type: String,
+            required: true
+        },
+        vertical: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            displayedProgress: lastProgress,
+            timeoutId: null
+        };
+    },
+    computed: {
+        progressStyle() {
+            if (this.vertical) {
+                return {
+                    height: `${this.displayedProgress}%`,
+                    width: '100%'
+                };
+            }
+            return {
+                width: `${this.displayedProgress}%`,
+                height: '100%'
+            };
+        },
+        barClass() {
+            return this.vertical ? 'progress-bar-outer-vertical' : 'progress-bar-outer';
+        }
+    },
+    watch: {
+        page: {
+            immediate: true,
+            handler(newPage) {
+                const target = getProgressBarPercentage(newPage);
+                if (this.timeoutId) clearTimeout(this.timeoutId);
+
+                // Animate from current value to new value
+                this.timeoutId = setTimeout(() => {
+                    this.displayedProgress = target;
+                    lastProgress = target; // Update the module-level variable
+                }, 150);
+            }
+        }
+    },
+    beforeUnmount() {
+        if (this.timeoutId) clearTimeout(this.timeoutId);
+    }
+};
+</script>
+<style lang="scss">
+.progress-bar-outer {
+    background: $blue-100;
+    height: 5px;
+    position: relative;
+    border-radius: 0;
+    width: 100%;
+    margin-top: 0;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    .progress-bar-inner {
+        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: width;
+        height: 100%;
+        background-color: $red;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 0;
+    }
+}
+
+.progress-bar-outer-vertical {
+    background: $blue-100;
+    width: 24px;
+    height: 356px;
+    position: relative;
+    margin-top: 0;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+    overflow: hidden;
+    border-radius: 50rem;
+    .progress-bar-inner {
+        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
+        will-change: height !important;
+        width: 100%;
+        background-color: $red;
+        position: absolute;
+        left: 0;
+        top: 0;
+        border-radius: 50rem;
+    }
+}
+</style>