jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

defects

Browse source
This commit is contained in:
FrankRua 2022-03-04 16:56:58 -05:00
parent b3c869f293
commit 533c799385
3 changed files with 285 additions and 251 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -82,16 +82,10 @@ export default {
glassName: String, glassName: String,
glassLocation: String, glassLocation: String,
colorAnswers: Array, colorAnswers: Array,
modelValue: { modelValue: Object,
type: Object,
default: () => ({}),
},
}, },
mounted() { mounted() {
this.LoadPreselectedValues(); this.LoadPreselectedValues();
if (Object.keys(this.featureListData).length === 1) {
this.AutoSelectTintIfOnlyOneColor(Object.keys(this.featureListData)[0]);
}
}, },
components: { components: {
listCard, listCard,
@ -144,6 +138,7 @@ export default {
}, },
}, },
methods: { methods: {
// Initialize the component data
initializeComponent(cmsContent) { initializeComponent(cmsContent) {
this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText; this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText; this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
@ -191,35 +186,30 @@ export default {
}); });
}, },
AutoSelectTintIfOnlyOneColor(tintColor) { // Loads the preselected values from the store.
this.selectedTint[tintColor] = {
buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
checkValue: "",
value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
};
},
LoadPreselectedValues() { LoadPreselectedValues() {
if (Object.keys(this.modelValue).length !== 0) { this.$nextTick(() => {
// Populate button-question model-value if parts data already exists in VueX if (this.modelValue !== undefined) {
const alreadyPopulatedPartsData = // Populate button-question model-value if parts data already exists in VueX
this.$store.getters.lineItems.glassParts; const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts;
Object.keys(alreadyPopulatedPartsData).forEach((key) => { Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber; const partNumber = alreadyPopulatedPartsData[key].partNumber;
const tintColor = alreadyPopulatedPartsData[key].color; const tintColor = alreadyPopulatedPartsData[key].color;
Object.keys(this.modelValue).forEach((key) => { Object.keys(this.modelValue).forEach((key) => {
if (this.modelValue[key][0] === partNumber) { if (this.modelValue[key][0] === partNumber) {
this.selectedTint[tintColor] = { this.selectedTint[tintColor] = {
buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`, buttonId: `${this.glassLocation}-${this.glassName}-${tintColor}`,
checkValue: "", checkValue: "",
value: `${this.glassLocation}-${this.glassName}-${tintColor}`, value: `${this.glassLocation}-${this.glassName}-${tintColor}`,
}; };
} }
});
}); });
}); }
} });
}, },
}, },
}; };

381
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -1,42 +1,26 @@
<template> <template>
<div class="container-fluid shadow rounded-3 p-2 position-relative make-tall"> <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall">
<funnelHeader ref="funnelHeader" /> <funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage="false" />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader ref="funnelSubHeader" />
<div class="container-fluid prevent-squish my-5"> <div class="container-fluid prevent-squish my-5">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<alert <alert class="rounded border-0 shadow-sm" alertClass="alert-warning" :alertHeadline="alertWidgetData.headline" :alertCopy="alertWidgetData.copy" :isDismissible="false" />
class="rounded border-0 shadow-sm" </div>
alertClass="alert-warning"
:alertHeadline="alertWidgetData.headline"
:alertCopy="alertWidgetData.copy"
:isDismissible="false"
/>
</div> </div>
</div>
</div> </div>
<div v-for="(item, i) in PartsForQuestions" :key="i"> <div v-for="(item, i) in PartsForQuestions" :key="i">
<!-- Render horizontal lines if there is multi-glass (aka if i > 0) --> <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
<div class="container-fluid"> <div class="container-fluid">
<hr v-if="i > 0" /> <hr v-if="i > 0" />
</div> </div>
<glassPartQuestion <glassPartQuestion :ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`" v-model="glassParts[item.glassLocation + '-' + item.glassName]" :glassLocation="item.glassLocation" :glassName="item.glassName" :colorAnswers="item.colorAnswers" />
:ref="`${RefPrefix}-${item.glassLocation}-${item.glassName}`"
v-model="glassParts[item.glassLocation + '-' + item.glassName]"
:glassLocation="item.glassLocation"
:glassName="item.glassName"
:colorAnswers="item.colorAnswers"
/>
</div> </div>
<funnelFooter <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" @ForwardClicked="forwardButtonAction" />
ref="funnelFooter" </div>
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction"
/>
</div>
</template> </template>
<script> <script>
@ -48,183 +32,200 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import {
import { settleAllPromises } from "@/helpers/layout-helper"; fetchCmsContentForPage
import { fmgPageValues } from "@/router/router-constants/fmgPage-values"; } from "@/helpers/cms-content-helper";
import { storeMutations } from "@/constants/store-mutations"; import {
settleAllPromises
} from "@/helpers/layout-helper";
import {
fmgPageValues
} from "@/router/router-constants/fmgPage-values";
import {
storeMutations
} from "@/constants/store-mutations";
import store from "@/store"; import store from "@/store";
export default { export default {
name: "vehicle-parts", name: "vehicle-parts",
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
// Call APIs // Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage); const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
// Settle promises and get results // Settle promises and get results
const promiseResultMap = [ const promiseResultMap = [{
{ resultKey: "cmsContent",
resultKey: "cmsContent", promise: cmsContentPromise,
promise: cmsContentPromise, }, ];
}, const resultMap = await settleAllPromises(promiseResultMap);
]; // Call the "next" function to complete the transition to this page.
const resultMap = await settleAllPromises(promiseResultMap); next((vm) => {
// Call the "next" function to complete the transition to this page. vm.$refs.funnelHeader.initializeComponent(
next((vm) => { resultMap.cmsContent.FunnelHeaderWidget
vm.$refs.funnelHeader.initializeComponent( );
resultMap.cmsContent.FunnelHeaderWidget vm.$refs.vehicleBanner.initializeComponent(
); resultMap.cmsContent.VehicleBannerWidget
vm.$refs.vehicleBanner.initializeComponent( );
resultMap.cmsContent.VehicleBannerWidget vm.$refs.funnelSubHeader.initializeComponent(
); resultMap.cmsContent.FunnelSubHeaderWidget
vm.$refs.funnelSubHeader.initializeComponent( );
resultMap.cmsContent.FunnelSubHeaderWidget vm.$refs.funnelFooter.initializeComponent(
); resultMap.cmsContent.FunnelFooterWidget
vm.$refs.funnelFooter.initializeComponent( );
resultMap.cmsContent.FunnelFooterWidget
);
// Glass Part Question dynamic component // Glass Part Question dynamic component
Object.keys(vm.$refs) Object.keys(vm.$refs)
.filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined) .filter((r) => r.includes(vm.RefPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) => .forEach((c) =>
vm.$refs[c][0].initializeComponent({ vm.$refs[c][0].initializeComponent({
ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget, ColorQuestionWidget: resultMap.cmsContent.ColorQuestionWidget,
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
}) })
); );
// Set alertData for the page alert. These use props so we don't call // Set alertData for the page alert. These use props so we don't call
// initializeComponent here. // initializeComponent here.
vm.alertWidgetData = { vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText, copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText, headline: resultMap.cmsContent.AlertWidget.HeadlineText,
}; };
});
},
data() {
return {
glassParts: {},
alertWidgetData: Object,
};
},
components: {
glassPartQuestion,
funnelHeader,
vehicleBanner,
funnelSubHeader,
funnelFooter,
alert,
},
computed: {
PartsForQuestions() {
const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null
? {}
: this.$store.getters.lineItems.glassParts;
// Map API result data, to vehicle-parts data structure
const mappedData = partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.glassParts[g.glassLocation + "-" + g.glassName] = {
[g.glassLocation]: [partNumber],
};
}
});
}); });
console.log(this.glassParts) },
data() {
return { return {
glassName: g.glassName, glassParts: {},
glassLocation: g.glassLocation, alertWidgetData: Object,
colorAnswers: g.parts.reduce((arr, p) => {
arr.push({
ColorAnswerText: p.color,
FeatureAnswers: [
{
FeatureAnswerText:
p.description === "" ? p.color : p.description,
PartNumber: p.partNumber,
},
],
});
return arr;
}, []),
}; };
});
return mappedData;
}, },
components: {
PartsFromApi() { glassPartQuestion,
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS); funnelHeader,
vehicleBanner,
funnelSubHeader,
funnelFooter,
alert,
}, },
computed: {
PartsForQuestions() {
const partsData = this.PartsFromApi;
RefPrefix() { // Map API result data, to vehicle-parts data structure
return "partQuestion"; const mappedData = partsData.partsOrQuestions.map((g) => {
},
},
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
if (
store.getters.damage.isRepair !== null &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
.length !== 0
) {
return true;
}
return false; return {
}, glassName: g.glassName,
backButtonAction() { glassLocation: g.glassLocation,
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); colorAnswers: g.parts.reduce((arr, p) => {
}, arr.push({
forwardButtonAction() { ColorAnswerText: p.color,
const selectedGlassPartNumbers = []; FeatureAnswers: [{
const matchedParts = []; FeatureAnswerText: p.description === "" ? p.color : p.description,
PartNumber: p.partNumber,
}, ],
});
return arr;
}, []),
};
});
// Compile all selected parts from the page. return mappedData;
for (let [key, value] of Object.entries(this.glassParts)) { },
for (let [glassKey, glassValue] of Object.entries(value)) {
selectedGlassPartNumbers.push(glassValue[0]); PartsFromApi() {
return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
},
RefPrefix() {
return "partQuestion";
},
},
methods: {
arePagePrerequisitesValid() {
// Check if isRepair is populated and if the pageData we need is here (Parts data)
if (
store.getters.damage.isRepair !== null &&
Object.keys(store.getters.pageData(fmgPageValues.VEHICLE_PARTS))
.length !== 0
) {
return true;
}
return false;
},
backButtonAction() {
this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
const selectedGlassPartNumbers = [];
const matchedParts = [];
// Compile all selected parts from the page.
for (let [key, value] of Object.entries(this.glassParts)) {
for (let [glassKey, glassValue] of Object.entries(value)) {
selectedGlassPartNumbers.push(glassValue[0]);
}
}
// Match them to the parts from the API.
for (let [key, value] of Object.entries(
this.PartsFromApi.partsOrQuestions
)) {
for (let [partKey, partValue] of Object.entries(value.parts)) {
const currentPart =
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber
);
if (isMatched) {
matchedParts.push(currentPart);
}
}
}
// If no parts could be matched, throw an error.
if (matchedParts.length === 0) {
throw new Error("Could not match any parts to the selected parts");
}
// Save parts to the store.
store.commit(storeMutations.UPDATE_PARTS, matchedParts);
// Navigate to the next page.
this.$router.navigateAfterSave(
this.navigationScenarios.SELECTED_PARTS,
this.$route
);
},
// Nothing here to reset, the previous pages will setting parts correctly for here.
resetDependentState() {
},
LoadInitialPartsData() {
const partsData = this.PartsFromApi;
const alreadyPopulatedPartsData =
this.$store.getters.lineItems.glassParts === null ? {} :
this.$store.getters.lineItems.glassParts;
partsData.partsOrQuestions.map((g) => {
// If the part is already populated, use the value from the store and populate the v-model.
Object.keys(alreadyPopulatedPartsData).forEach((key) => {
const partNumber = alreadyPopulatedPartsData[key].partNumber;
g.parts.forEach((p) => {
if (p.partNumber === partNumber) {
this.glassParts[g.glassLocation + "-" + g.glassName] = {
[g.glassLocation]: [partNumber],
};
}
});
});
});
} }
}
// Match them to the parts from the API.
for (let [key, value] of Object.entries(
this.PartsFromApi.partsOrQuestions
)) {
for (let [partKey, partValue] of Object.entries(value.parts)) {
const currentPart =
this.PartsFromApi.partsOrQuestions[key].parts[partKey];
const isMatched = selectedGlassPartNumbers.some(
(p) => p === currentPart.partNumber
);
if (isMatched) {
matchedParts.push(currentPart);
}
}
}
// If no parts could be matched, throw an error.
if (matchedParts.length === 0) {
throw new Error("Could not match any parts to the selected parts");
}
// Save parts to the store.
store.commit(storeMutations.UPDATE_PARTS, matchedParts);
// Navigate to the next page.
this.$router.navigateAfterSave(
this.navigationScenarios.SELECTED_PARTS,
this.$route
);
}, },
}, mounted(){
this.LoadInitialPartsData();
}
}; };
</script> </script>

101
src/ux-components/list-card/list-card.vue
View file

@ -2,7 +2,11 @@
<div :class="'col' + colLength"> <div :class="'col' + colLength">
<div <div
class="list-card w-100 rounded-3 d-flex align-items-center h-100" class="list-card w-100 rounded-3 d-flex align-items-center h-100"
:class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']" :class="[
isWide ? 'horizontal' : '',
errors.length > 0 ? 'has-error' : '',
hasError ? 'has-error' : '',
]"
> >
<input <input
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
@ -18,7 +22,8 @@
<label <label
:for="buttonID" :for="buttonID"
class="d-flex w-100 align-items-center px-2 h-100" class="d-flex w-100 align-items-center px-2 h-100"
:class="getLabelClasses" tabindex="-1" :class="getLabelClasses"
tabindex="-1"
> >
<img <img
:id="buttonImageId" :id="buttonImageId"
@ -31,10 +36,13 @@
class="small order-3" class="small order-3"
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
> >
{{buttonLabel}} {{ buttonLabel }}
</p> </p>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy"> <p
{{buttonLabelSubCopy}} v-if="buttonLabelSubCopy && !isWide"
class="fs-7 m-0 order-4 sub-copy"
>
{{ buttonLabelSubCopy }}
</p> </p>
<div v-if="isWide" class="order-2"> <div v-if="isWide" class="order-2">
<p class="m-0 small">{{ buttonLabel }}</p> <p class="m-0 small">{{ buttonLabel }}</p>
@ -73,23 +81,26 @@ export default {
modelValue: Object, modelValue: Object,
hasError: Boolean, hasError: Boolean,
}, },
data(){ data() {
return { return {
checkValue: Boolean, checkValue: Boolean,
};
},
created() {
if (Array.isArray(this.selectedValues)) {
this.checkValue = this.isMultiSelect
? this.selectedValues.includes(this.value)
: this.selectedValues[0];
} }
}, },
created(){ watch: {
if(Array.isArray(this.selectedValues)){ // Changing this will impact pre-selection data loads on vehicle-parts.
this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0]; // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
} modelValue(newVal) {
this.$nextTick(() => { if (newVal !== undefined) {
if(Object.keys(this.modelValue).length > 0) { this.checkValue = newVal.value;
this.checkValue = this.modelValue.value;
const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() };
this.$emit('isCheckedChanged', emitEvent);
this.$emit('update:modelValue', emitEvent);
} }
}) },
}, },
computed: { computed: {
getLabelClasses() { getLabelClasses() {
@ -105,23 +116,26 @@ export default {
}, },
}, },
methods: { methods: {
handleCheckChange(newValue, oldValue){ handleCheckChange(newValue, oldValue) {
const isInitialization = typeof(oldValue) === 'function'; const isInitialization = typeof oldValue === "function";
if (!isInitialization) { if (!isInitialization) {
const emitEvent = { checkValue: this.checkValue, value: this.value.toString(), buttonId: this.buttonID.toString() }; const emitEvent = {
this.$emit('isCheckedChanged', emitEvent); checkValue: this.checkValue,
this.$emit('update:modelValue', emitEvent); value: this.value.toString(),
buttonId: this.buttonID.toString(),
};
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
} }
} },
}, },
setup(props) { setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio"; const inputType = props.isMultiSelect ? "checkbox" : "radio";
const { const {
value: inputValue, value: inputValue,
handleChange, handleChange,
errors, errors,
} = useField(props.groupName, props.validationRules, } = useField(props.groupName, props.validationRules, {
{
type: inputType, type: inputType,
checkedValue: props.value, checkedValue: props.value,
}); });
@ -136,10 +150,12 @@ export default {
<style lang="scss"> <style lang="scss">
.list-card { .list-card {
border: 1px solid $gray-500; border: 1px solid $gray-500;
&.invalid { &.invalid {
//Red border if invalid //Red border if invalid
border: 1px solid $red; border: 1px solid $red;
} }
img { img {
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples. // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto; height: auto;
@ -147,50 +163,61 @@ export default {
margin-bottom: 3rem; margin-bottom: 3rem;
max-width: 100%; max-width: 100%;
} }
&:hover { &:hover {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
box-shadow: 0px 0px 0px 4px $blue-300; box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent; border: 1px solid transparent;
} }
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
+ label { + label {
display: block; display: block;
position: relative; position: relative;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
p { p {
color: $gray-600; color: $gray-600;
text-align: center; text-align: center;
&.sub-copy { &.sub-copy {
color: $gray-550; color: $gray-550;
} }
} }
} }
&:focus + label { &:focus + label {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
&:checked + label { &:checked + label {
background: $blue-100; background: $blue-100;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
&:checked + label { &:checked + label {
p { p {
color: $black; color: $black;
font-weight: 500; font-weight: 500;
} }
.sub-copy { .sub-copy {
color: $gray-600; color: $gray-600;
font-weight: 400; font-weight: 400;
} }
} }
+ label::before { + label::before {
content: ""; content: "";
position: absolute; position: absolute;
@ -206,15 +233,19 @@ export default {
flex-shrink: 0; flex-shrink: 0;
color: $gray-600; color: $gray-600;
} }
+ label.checkboxTop::before { + label.checkboxTop::before {
margin: -1.25rem 0.5rem 0 0 !important; margin: -1.25rem 0.5rem 0 0 !important;
} }
+ label.checkboxTop::after { + label.checkboxTop::after {
margin: -1.5rem 0.5rem 0 0 !important; margin: -1.5rem 0.5rem 0 0 !important;
} }
&:checked + label::before { &:checked + label::before {
background: $blue; background: $blue;
} }
&:checked + label::after { &:checked + label::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -226,26 +257,31 @@ export default {
transform: rotate(-45deg); transform: rotate(-45deg);
} }
} }
input[type="radio"] { input[type="radio"] {
+ label::before { + label::before {
content: ""; content: "";
display: none; display: none;
} }
+ label::after { + label::after {
content: ""; content: "";
display: none; display: none;
} }
+ label { + label {
img { img {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
&.horizontal { &.horizontal {
img { img {
margin-bottom: 0; margin-bottom: 0;
width: 5.5rem; width: 5.5rem;
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
+ label::before { + label::before {
@ -254,30 +290,37 @@ export default {
margin: 0 0.5rem 0 0; margin: 0 0.5rem 0 0;
order: 1; order: 1;
} }
&:checked + label::after { &:checked + label::after {
content: ""; content: "";
margin: -0.25rem 0 0 0; margin: -0.25rem 0 0 0;
left: 0.875rem; left: 0.875rem;
} }
&:checked + label { &:checked + label {
p { p {
color: $black; color: $black;
font-weight: 500; font-weight: 500;
} }
.sub-copy { .sub-copy {
color: $gray-600; color: $gray-600;
font-weight: 400; font-weight: 400;
} }
} }
+ label { + label {
min-height: 48px; min-height: 48px;
color: $gray-600; color: $gray-600;
img { img {
margin-bottom: 0; margin-bottom: 0;
} }
p { p {
color: $gray-600; color: $gray-600;
text-align: left; text-align: left;
&.sub-copy { &.sub-copy {
color: $gray-550; color: $gray-550;
} }
@ -286,4 +329,4 @@ export default {
} }
} }
} }
</style> </style>