Merge pull request #974 from Safelite/feature/INSR-7742
INSR-7742: add progress bar to NextGen
This commit is contained in:
katiekroell
GitHub
commit
ac6cf184b2
5 changed files with 212 additions and 7 deletions
82
src/constants/progress-bar-mapper.js
Normal file
82
src/constants/progress-bar-mapper.js
Normal file
|
|
@ -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;
|
||||
87
src/iss-components/site-header/progress-bar/progress-bar.vue
Normal file
87
src/iss-components/site-header/progress-bar/progress-bar.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -3,11 +3,16 @@
|
|||
class="site-header-container"
|
||||
:style="logoBackgroundStyle">
|
||||
<div class="site-header iss-heritage-container-width">
|
||||
<img
|
||||
id="siteHeaderImage"
|
||||
class="img-fluid"
|
||||
:src="imageSrc"
|
||||
:alt="altText" />
|
||||
<div class="header-logo-container">
|
||||
<img
|
||||
id="siteHeaderImage"
|
||||
class="img-fluid"
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
Loading…
Reference in a new issue