Shop selection styling
This commit is contained in:
scottkiener-at-safelite
parent
9ba52b9d48
commit
8b4cf64f18
2 changed files with 250 additions and 5 deletions
245
src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue
Normal file
245
src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue
Normal file
|
|
@ -0,0 +1,245 @@
|
|||
<template>
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
<baseInputButton
|
||||
v-bind="$props"
|
||||
v-model="selectedValue"
|
||||
buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-4 no-hover">
|
||||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
|
||||
<div class="row-one">
|
||||
<span
|
||||
id="buttonLabelSpan"
|
||||
class="m-0 button-label-copy"
|
||||
:class="textPosition">{{ buttonLabel }}
|
||||
</span>
|
||||
<span
|
||||
id="buttonLabelSubCopySpan"
|
||||
class="m-0 caption ms-2"
|
||||
:class="textPosition">{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<div
|
||||
v-if="displayAvailabilityIndicators"
|
||||
id="availabilityIndicatorBlock"
|
||||
class="availability-indicator rounded-pill"
|
||||
:class="availabilityRatingClass">
|
||||
<loader
|
||||
v-if="isLoaderDisplayed"
|
||||
ref="availabilityIndicatorLoader"
|
||||
loaderPosition="left"
|
||||
:allowPageInteraction="true" />
|
||||
<div
|
||||
v-else
|
||||
id="availabilityIndicator"
|
||||
class="d-flex align-items-center">
|
||||
<div
|
||||
id="availabilityBadge"
|
||||
class="availability-badge"
|
||||
:class="availabilityRating == 'high' ? 'green' : 'orange'">
|
||||
</div>
|
||||
<span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-two">
|
||||
<span
|
||||
v-if="buttonBodyCopy"
|
||||
id="buttonBodyCopy"
|
||||
class="m-0 button-label-sub-copy"
|
||||
v-html="buttonBodyCopy"></span>
|
||||
</div>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
id="screenReaderOnlyTextSpan"
|
||||
class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
|
||||
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
|
||||
import loader from '@/ux-components/loader/loader.vue';
|
||||
|
||||
export default {
|
||||
name: 'tpa-shop-list-button',
|
||||
components: {
|
||||
baseInputButton,
|
||||
loader
|
||||
},
|
||||
mixins: [inputButtonWrapperMixin],
|
||||
data() {
|
||||
return {
|
||||
availabilityRating: null,
|
||||
displayAvailabilityIndicators: this.additionalButtonData?.displayAvailabilityIndicators ?? false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isLoaderDisplayed() {
|
||||
return this.availabilityRating == null;
|
||||
},
|
||||
availabilityRatingClass() {
|
||||
if (this.availabilityRating != null) {
|
||||
return this.availabilityRating === 'high' ? 'green' : 'orange';
|
||||
}
|
||||
return 'gray';
|
||||
},
|
||||
badgeText() {
|
||||
if (this.availabilityRating != null) {
|
||||
return this.availabilityRating === 'high' ? 'Appts available' : 'Appts low';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
},
|
||||
beforeMount() {
|
||||
if (this.displayAvailabilityIndicators) {
|
||||
const { startDate } = this.additionalButtonData;
|
||||
const { endDate } = this.additionalButtonData;
|
||||
const { shopAppointmentType } = this.additionalButtonData;
|
||||
|
||||
this.additionalButtonData
|
||||
.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
|
||||
.then((data) => {
|
||||
this.availabilityRating = data;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/styles/ux-variables-svg-strings.scss";
|
||||
|
||||
.list-button {
|
||||
outline: none;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
|
||||
// &:focus-visible + .list-button-content {
|
||||
// box-shadow: 0 0 0 2.5px $blue;
|
||||
// }
|
||||
// &:focus + .list-button-content {
|
||||
// box-shadow: 0 0 0 2.5px $blue;
|
||||
// }
|
||||
&:checked + .list-button-content {
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
// &:checked:focus + .list-button-content {
|
||||
// box-shadow: 0 0 0 2.5px $blue;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.list-button-content {
|
||||
color: $gray-600;
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
&.small {
|
||||
font-size: 0.75rem;
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-content {
|
||||
row-gap: 0.25rem;
|
||||
color: #4d4e53;
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
line-height: 26px;
|
||||
|
||||
.row-one {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.button-label-copy {
|
||||
font-weight: 600;
|
||||
line-height: 24px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#buttonLabelSubCopySpan {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.availability-indicator {
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
padding: 0.125rem 0.5rem;
|
||||
|
||||
.availability-badge {
|
||||
display: inline-flex;
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 0.25rem 0 0;
|
||||
|
||||
&.green {
|
||||
background-image: url($svg-shop-list-button-green-availability);
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background-image: url($svg-shop-list-button-orange-availability);
|
||||
}
|
||||
}
|
||||
.button-auxillary-copy {
|
||||
box-sizing: border-box;
|
||||
justify-content: right;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
padding: 0 0.25rem 0 0.25rem;
|
||||
padding-top: 0.125rem;
|
||||
padding-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.loader:after {
|
||||
background-color: $gray-550;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: $green-700;
|
||||
background-color: $green-100;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
color: $orange-600;
|
||||
background-color: $orange-100;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
color: $gray-600;
|
||||
background-color: $gray-100;
|
||||
padding-left: 0.125rem;
|
||||
padding-right: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-two {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
id="selectProviderQuestion"
|
||||
v-model="selectedProviderNumber"
|
||||
buttonTypeString="shopListButton"
|
||||
:buttonTypeObject="shopListButton"
|
||||
:buttonTypeObject="tpaShopListButton"
|
||||
class="radioQuestion"
|
||||
:answers="providerButtonData"
|
||||
groupName="chooseShop"
|
||||
|
|
@ -123,7 +123,7 @@ import textLink from '@/ux-components/text-link/text-link.vue';
|
|||
import alert from '@/ux-components/alert/alert.vue';
|
||||
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
|
||||
import googleMap from '@/iss-components/google-map/google-map.vue';
|
||||
import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
|
||||
import tpaShopListButton from '@/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue';
|
||||
import loader from '@/ux-components/loader/loader.vue';
|
||||
|
||||
// Supporting files
|
||||
|
|
@ -202,7 +202,7 @@ export default {
|
|||
filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
|
||||
provider: globalRules.OPTION_REQUIRED
|
||||
},
|
||||
shopListButton: shallowRef(shopListButton)
|
||||
tpaShopListButton: shallowRef(tpaShopListButton)
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -246,7 +246,7 @@ export default {
|
|||
},
|
||||
providerAddresses() {
|
||||
return this.radiusFilteredAndCappedProviders?.map((provider) => ({
|
||||
title: provider.companyName,
|
||||
title: provider.companyName.toLowerCase(),
|
||||
fullAddress: this.getFullProviderAddress(provider),
|
||||
addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
|
||||
})) ?? [];
|
||||
|
|
@ -373,7 +373,7 @@ export default {
|
|||
: null;
|
||||
|
||||
return {
|
||||
buttonLabel: provider?.companyName ?? '',
|
||||
buttonLabel: provider?.companyName.toLowerCase() ?? '',
|
||||
buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
|
||||
buttonBodyCopy: `${this.getFullProviderAddress(provider)}<br>${
|
||||
cellNumber ?? ''
|
||||
|
|
|
|||
Loading…
Reference in a new issue