Merge pull request #974 from Safelite/feature/INSR-7742

INSR-7742: add progress bar to NextGen

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: 30
+    },
+    'part-questions': {
+        percent: 35
+    },
+    'molding-questions': {
+        percent: 40
+    },
+    'vehicle-parts': {
+        percent: 40
+    },
+    'capability-questions': {
+        percent: 40
+    },
+    'vehicle-lookup': {
+        percent: 45
+    },
+    'vin-lookup': {
+        percent: 50
+    },
+    'license-plate-lookup': {
+        percent: 50
+    },
+    'address-lookup': {
+        percent: 50
+    },
+    'address-vehicles': {
+        percent: 50
+    },
+    'coverage-statement': {
+        percent: 55
+    },
+    'provider-preference': {
+        percent: 60
+    },
+    'service-location': {
+        percent: 65
+    },
+    'schedule-page': {
+        percent: 70
+    },
+    'contact-details': {
+        percent: 80
+    },
+    'service-packages': {
+        percent: 85
+    },
+    'payment-method': {
+        percent: 90
+    },
+    'payment-page': {
+        percent: 95
+    },
+    'tpa-search': {
+        percent: 85
+    },
+    'tpa-confirmation': {
+        percent: 100
+    },
+    'order-confirmation': {
+        percent: 100
+    }
+};
+
+export const getProgressBarPercentage = (page) => pageProgressMapper[page]?.percent || 0;

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

@@ -0,0 +1,87 @@
+<template>
+    <div
+        v-if="progress > 0"
+        class="progress-bar-container">
+        <div class="progress-bar-header">
+            <span aria-hidden="true">{{ progress }}%</span>
+        </div>
+        <div class="progress">
+            <div
+                class="progress-bar progress-bar-success"
+                role="progressbar"
+                :aria-valuetext="`Scheduling progress ${progress}%`"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                :style="{ width: progress + '%' }">
+                    <div class="progress-bar-middle"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { getProgressBarPercentage } from '@/constants/progress-bar-mapper';
+import { useMainStore } from '@/store';
+
+export default {
+    name: 'progress-bar',
+    data() {
+        return {
+            progress: this.getProgress()
+        };
+    },
+    methods: {
+        getProgress() {
+            const pageName = useMainStore().applicationUser.lastPageVisited;
+            return getProgressBarPercentage(pageName);
+        }
+    }
+};
+</script>
+<style lang="scss">
+    .progress-bar-container {
+        display: flex;
+
+        .progress-bar-header {
+            padding-right: 0.3125rem;
+            color: $progress-bar-color;
+            font-weight: 600;
+            font-size: 0.875rem;
+            line-height: 0.9375rem;
+            text-align: right;
+        }
+
+        .progress {
+            @include media-breakpoint-up(xs) {
+                min-width: 5.9375rem;
+            }
+
+            @include media-breakpoint-up(md) {
+                min-width: 17.1875rem;
+            }
+
+            margin-left: 0;
+            border-radius: $border-radius-pill;
+            overflow: visible;
+
+            .progress-bar {
+                background-color: $progress-bar-color;
+                border-radius: $border-radius-pill 0 0 $border-radius-pill;
+                overflow: visible;
+
+                .progress-bar-middle {
+                    width: 1.0625rem;
+                    height: 1.0625rem;
+                    position: relative;
+                    margin-right: -8.5px;
+                    margin-left: auto;
+                    margin-top: -1px;
+                    border: 0.125rem solid #ffffff;
+                    border-radius: 50%;
+                    background-color: $progress-bar-color;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+                }
+            }
+        }
+    }
+</style>

src/iss-components/site-header/site-header.vue

@@ -3,11 +3,16 @@
         class="site-header-container"
         :style="logoBackgroundStyle">
         <div class="site-header iss-heritage-container-width">
-            <img
+            <div class="header-logo-container">
-                id="siteHeaderImage"
+                <img
-                class="img-fluid"
+                    id="siteHeaderImage"
-                :src="imageSrc"
+                    class="img-fluid"
-                :alt="altText" />
+                    :src="imageSrc"
+                    :alt="altText" />
+            </div>
+            <div class="header-progress-bar-container">
+                <progressBar />
+            </div>
         </div>
         <alert
             v-if="displayGlobalAlert"
@@ -25,11 +30,12 @@ import alert from '@/ux-components/alert/alert.vue';
 import { useMainStore } from '@/store';
 import eventBus from '@/helpers/event-bus/event-bus';
 import { globalEvents } from '@/constants/events';
+import progressBar from '@/iss-components/site-header/progress-bar/progress-bar.vue';
 
 export default {
     name: 'site-header',
     components: {
-        alert
+        alert, progressBar
     },
     props: {
         cmsWidgetName: String
@@ -139,9 +145,20 @@ export default {
     }
 
     .site-header {
+        display: flex;
         @include media-breakpoint-down(md) {
             margin: 0 -.75rem;
         }
+
+        .header-logo-container {
+            flex: 1 1 auto;
+        }
+        .header-progress-bar-container {
+            flex: 0 1 auto;
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+        }
     }
 }
 

src/styles/client-customizations.scss

@@ -11,6 +11,7 @@
     $button-color: #a9e3e9;
     $button-text-color: #181643;
     $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
+    $progress-bar-color: #181643;
 
     //Variables
     --iss-loader-color: #{$button-text-color};
@@ -76,6 +77,22 @@
             }
         }
     }
+
+    .progress-bar-container {
+        .progress-bar-header {
+            color: $progress-bar-color;
+        }
+
+        .progress {
+            .progress-bar {
+                background-color: $progress-bar-color;
+
+                .progress-bar-middle {
+                    background-color: $progress-bar-color;
+                }
+            }
+        }
+    }
 }
 
 // End Liberty Mutual, SafeCo

src/styles/ux-variables.scss

@@ -155,6 +155,9 @@ $border-radius-sm: 0.2rem;
 $border-radius-lg: 0.5rem; //Used for buttons. Can be used for other things, of course.
 $border-radius-pill: 50rem;
 
+//Progress Bar Styling
+$progress-bar-color: $green;
+
 //Spacing
 // 8 spacers available instead of the usual 5
 $spacer: 1rem;
@@ -210,7 +213,6 @@ $enable-important-utilities: false;
 
 // Letter Spacing
 $letter-spacing-primary: 0.03em;
-
 // Borders
 $border-input: 1px solid rgba(179, 180, 181);
 $border-input-focus: 2.5px solid $blue;