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

Merge branch 'develop' into feature/fix_selection_logic

Browse source
This commit is contained in:
Max 2022-02-16 15:40:08 -05:00
commit e2f0e1eb15
9 changed files with 308 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/common-components/funnel-footer/funnel-footer.vue
View file

@ -97,6 +97,10 @@ export default {
.btn-primary {
width: 100%;
}
a {
display: flex;
justify-content: center;
}
@media only screen and (min-width: 340px) {
.button-col,
.link-col {
@ -105,6 +109,10 @@ export default {
.btn-primary {
width: auto;
}
a {
display: flex;
justify-content: start;
}
}
}
</style>

444
src/layouts/component-test/component-test.vue
View file

@ -13,6 +13,14 @@
tabIndex="1"
checkboxLabel="I'm a checkbox"
/>
<p class="my-3">With Error:</p>
<checkbox
checkboxName="demo checkbox"
buttonID="checkbox-2"
tabIndex="1"
checkboxLabel="Error!"
hasError
/>
</div>
</div>
<div class="row my-4">
@ -28,22 +36,32 @@
buttonID="radio-button-a"
isRequired
value="I'm a radio button!"
modelValue="Model Value 1"
screenReaderOnlyText="Model Value 1"
/>
</div>
<div class="col">
<radio
groupName="radio-demo-2"
buttonLabel="I'm also a radio button!"
buttonID="radio-button-b"
isRequired
value="I'm also a radio button!"
modelValue="Model Value 2"
screenReaderOnlyText="Model Value 2"
/>
</div>
</div>
<div class="row">
<div class="col">
<p class="my-3">With Error:</p>
<radio
groupName="radio-demo-3"
buttonLabel="Error!"
buttonID="radio-button-c"
isRequired
value="Error!"
screenReaderOnlyText="Model Value 1"
hasError
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
@ -61,12 +79,39 @@
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonMain buttonText="Secondary" loaderColor="white" sizeInRem="1" />
<buttonMain
isPrimary
buttonText="Primary Disabled"
loaderColor="white"
sizeInRem="1"
disabled
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonBack backButtonAccessibleText="Back button label" />
<buttonMain
buttonText="Secondary"
loaderColor="white"
sizeInRem="1"
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonMain
buttonText="Secondary Disabled"
loaderColor="white"
sizeInRem="1"
disabled
/>
</div>
</div>
<div class="row">
<div class="col my-3 d-flex align-items-center">
<buttonBack
backButtonAccessibleText="Back button label"
/>
</div>
</div>
<div class="row my-4">
@ -98,44 +143,6 @@
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
<h6 class="mx-2 my-0">Functioning as Checkbox in Column Layout</h6>
</div>
</div>
<fieldset>
<legend class="sr-only">Functioning as Checkbox</legend>
<div class="row g-2">
<listCard
isMultiSelect
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 1"
groupID="checkbox-demo-1"
buttonLabelSubCopy="Description"
/>
<listCard
isMultiSelect
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 2"
groupID="checkbox-demo-1"
buttonLabelSubCopy="Description with more than one line"
/>
<listCard
isMultiSelect
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 3"
groupID="checkbox-demo-1"
buttonLabelSubCopy=""
/>
</div>
</fieldset>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Card</h4>
@ -151,7 +158,7 @@
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox"
buttonID="List Card Checkbox 1"
groupID="checkbox-demo-1"
buttonLabelSubCopy="Description"
/>
@ -168,13 +175,31 @@
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox b"
buttonID="List Card Checkbox 2"
groupID="checkbox-demo-1a"
buttonLabelSubCopy=""
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Checkbox with Error</h6>
<fieldset>
<legend class="sr-only">Checkbox with Error</legend>
<listCard
isMultiSelect
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Checkbox 3"
groupID="checkbox-demo-1e"
buttonLabelSubCopy="Description"
hasError
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Functioning as Radio Button</h6>
@ -186,7 +211,7 @@
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button"
groupID="radio-demo-2"
groupID="radio-demo-2b"
buttonLabelSubCopy="Description"
/>
</fieldset>
@ -209,6 +234,24 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Radio Button with Error</h6>
<fieldset>
<legend class="sr-only">Radio Button with Error</legend>
<listCard
isRadio
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Radio Button c"
groupID="radio-demo-2b"
buttonLabelSubCopy="Description"
hasError
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
@ -245,6 +288,25 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Horizontal with Error</h6>
<fieldset>
<legend class="sr-only">Horizontal with Error</legend>
<listCard
isMultiSelect
isWide
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Side Window"
altText=""
buttonID="List Card Horizontal Checkbox d"
groupID="checkbox-demo-3d"
buttonLabelSubCopy=""
hasError
/>
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
@ -279,6 +341,24 @@
</fieldset>
</div>
</div>
<div class="row g-2">
<div class="col">
<h6 class="mx-2 my-4">Horizontal with Error</h6>
<fieldset>
<legend class="sr-only">Horizontal with Error</legend>
<listCard
isWide
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Windshield"
altText=""
buttonID="List Card Horizontal Radio Button e"
groupID="radio-demo-4e"
buttonLabelSubCopy=""
hasError
/>
</fieldset>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@ -333,6 +413,21 @@
sizeInRem="1"
screenReaderOnlyText=" opens new window"
/>
<h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
<listButton
isMultiSelect
groupName="demo-2"
ariaLabelBy="vehicle-year"
buttonID="2019b"
buttonLabel="2019"
isRequired="true"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText=" opens new window"
hasError
/>
</div>
</div>
<div class="row">
@ -381,6 +476,20 @@
sizeInRem="1"
screenReaderOnlyText=" opens new window"
/>
<h6 class="mx-2 my-4">Radio Button with Error</h6>
<listButton
groupName="demo-1-checkbox"
ariaLabelBy="vehicle-year"
buttonID="2016"
buttonLabel="2016"
isRequired="true"
textPosition="text-start"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
screenReaderOnlyText=" opens new window"
hasError
/>
</div>
</div>
<div class="row my-4">
@ -652,6 +761,63 @@
/>
</div>
</div>
<div class="row px-3">
<h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div
role="radiogroup"
aria-labelledby="demo-4-radio-group"
class="d-flex flex-row p-0"
>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="sr-only" id="demo-4-radio-group">Select Vehicle Year</h3>
<listButtonHorizontal
isMultiSelect
groupName="demo-4b"
ariaLabelBy="vehicle-model"
buttonID="1b"
buttonLabel="1"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="1"
screenReaderOnlyText=" opens new window"
hasError
/>
<listButtonHorizontal
isMultiSelect
groupName="demo-4b"
ariaLabelBy="vehicle-model"
buttonID="2b"
buttonLabel="2"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="2"
screenReaderOnlyText=" opens new window"
hasError
/>
<listButtonHorizontal
isMultiSelect
groupName="demo-4b"
ariaLabelBy="vehicle-model"
buttonID="3b"
buttonLabel="3"
textPosition="text-center"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="3"
screenReaderOnlyText=" opens new window"
hasError
/>
</div>
</div>
<div class="row px-3">
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
@ -706,6 +872,63 @@
/>
</div>
</div>
<div class="row px-3">
<h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
<!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
<div
role="radiogroup"
aria-labelledby="demo-4-checkbox-group"
class="d-flex flex-row p-0"
>
<!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
<h3 class="sr-only" id="demo-4-checkbox-group">Select Vehicle Year</h3>
<listButtonHorizontal
groupName="demo-4-checkboxc"
ariaLabelBy="vehicle-model"
buttonID="4c"
buttonLabel="4"
textPosition="text-center"
loaderEnabled="true"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="1"
screenReaderOnlyText=" opens new window"
hasError
/>
<listButtonHorizontal
groupName="demo-4-checkboxc"
ariaLabelBy="vehicle-model"
buttonID="5c"
buttonLabel="5"
textPosition="text-center"
loaderEnabled="true"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="2"
screenReaderOnlyText=" opens new window"
hasError
/>
<listButtonHorizontal
groupName="demo-4-checkboxc"
ariaLabelBy="vehicle-model"
buttonID="6c"
buttonLabel="6"
textPosition="text-center"
loaderEnabled="true"
loaderColor="blue"
loaderPosition="right"
sizeInRem="1"
v-bind:totalInGroup="3"
v-bind:positionInGroup="3"
screenReaderOnlyText=" opens new window"
hasError
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Typography</h4>
@ -822,129 +1045,6 @@
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Site Header</h4>
</div>
</div>
<div class="row my-3">
<div class="col">
<funnelHeader
imageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Vehicle Banner</h4>
</div>
</div>
<div class="row my-3">
<div class="col">
<vehicleBanner
vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
:displayGenericVehicleImage=true
/>
</div>
</div>
<div class="row my-4">
<div class="col">
<h4 class="m-0 p-2 bg-light rounded">Button Question</h4>
</div>
</div>
<div class="row">
<div class="col">
<buttonQuestion
:answers="checkboxAnswers"
:isMultiSelect="true"
ariaLabelBy="checkbox"
groupName="checkbox-list"
questionText="List Button as checkbox"
/>
<buttonQuestion
:answers="radioAnswers"
ariaLabelBy="radio"
groupName="radio-list"
questionText="List Button as radio"
/>
<buttonQuestion
:answers="horizontalCheckboxAnswers"
buttonType="listButtonHorizontal"
:isMultiSelect="true"
isColumn
ariaLabelBy="checkbox"
groupName="checkbox-list-horizontal"
questionText="List Button Horizontal as checkbox"
/>
<buttonQuestion
:answers="horizontalRadioAnswers"
buttonType="listButtonHorizontal"
isColumn
ariaLabelBy="radio"
groupName="radio-list-horizontal"
questionText="List Button Horizontal as radio"
sizeInRem="1"
/>
<buttonQuestion
:answers="listCardCheckBox"
buttonType="listCard"
isMultiSelect
ariaLabelBy="check_card"
groupName="check-list-card"
questionText="List Card as checkbox"
/>
<buttonQuestion
:answers="listCardRadio"
buttonType="listCard"
ariaLabelBy="radio_card"
groupName="radio-card"
questionText="List Card as radio"
/>
<buttonQuestion
isMultiSelect
isWide
:answers="listCardCheckBoxHorizontal"
buttonType="listCard"
ariaLabelBy="horizontal_check_card"
groupName="horizontal_check-card"
questionText="List Card Horizontal as checkbox"
/>
<buttonQuestion
isMultiSelect
isWide
:answers="listCardCheckBoxHorizontalSubText"
buttonType="listCard"
ariaLabelBy="horizontal_check_card-st"
groupName="horizontal_check-card-st"
questionText="With Subtext"
/>
<buttonQuestion
isWide
:answers="listRadioHorizontal"
buttonType="listCard"
ariaLabelBy="horizontal_radio_card"
groupName="horizontal_cradio-card"
questionText="List Card Horizontal as radio"
/>
<buttonQuestion
isWide
:answers="listRadioHorizontalSubText"
buttonType="listCard"
ariaLabelBy="horizontal_radio_card-st"
groupName="horizontal_cradio-card-st"
questionText="With Subtext"
/>
<buttonQuestion
isMultiSelect
isRow
:answers="listCardGroup"
buttonType="listCard"
ariaLabelBy="horizontal_radio_card-group"
groupName="horizontal_cradio-card-group"
questionText="In column layout"
/>
</div>
</div>
</div>
</template>
@ -954,8 +1054,6 @@ import buttonBack from "@/common-components/button-back/button-back";
import listCard from "@/ux-components/list-card/list-card";
import listButton from "@/ux-components/list-button/list-button";
import alert from "@/ux-components/alert/alert";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
import checkbox from "@/ux-components/checkbox/checkbox";
import radio from "@/ux-components/radio/radio";
@ -968,11 +1066,9 @@ export default {
listCard,
listButton,
alert,
vehicleBanner,
listButtonHorizontal,
checkbox,
radio,
funnelHeader,
textLink
},
data() {

11
src/styles/common-error-styles.scss
View file

@ -13,6 +13,7 @@
input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
box-shadow: 0 0 0 2.5px transparent !important;
border: 1px solid $blue;
}
&.list-button-horizontal {
color: $red;
@ -20,6 +21,16 @@
border: 1px solid $red;
}
}
&.ui-radio,
&.ui-checkbox {
input[type=radio]+label:before,
input[type=checkbox]+label:before {
border: 1px solid $red;
}
input[type=checkbox]:checked + label:before {
border: 1px solid $blue;
}
}
}
.form-test-error {

12
src/ux-components/button-main/button-main.vue
View file

@ -56,6 +56,7 @@ export default {
border-radius: $border-radius-lg;
color: $white;
justify-content: center;
font-weight: 500;
&:hover {
background: linear-gradient(
270deg,
@ -82,7 +83,8 @@ export default {
$gray-200 0%,
$gray-200 100%
) !important;
color: $gray-550 !important;
color: $gray-600 !important;
font-weight: 400;
height: 48px;
border: none;
border-radius: $border-radius-lg;
@ -103,6 +105,7 @@ export default {
border: 1px solid $blue;
border-radius: $border-radius-lg;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
&:hover {
color: $white;
@ -118,10 +121,13 @@ export default {
}
&:disabled {
background: transparent;
color: $gray !important;
color: $gray-550 !important;
font-weight: 400;
height: 48px;
border: 1px solid $gray-300;
border: 1px solid $gray-550;
border-radius: $border-radius-lg;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;

3
src/ux-components/checkbox/checkbox.vue
View file

@ -1,6 +1,6 @@
<template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
<div class="ui-checkbox d-flex">
<div class="ui-checkbox d-flex" :class="[hasError ? 'has-error' : '']">
<input
type="checkbox"
aria-checked="false"
@ -28,6 +28,7 @@ export default {
checkboxLabel: String,
screenReaderOnlyText: String,
isRequired: Boolean,
hasError: Boolean
},
};
</script>

2
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -1,6 +1,7 @@
<template>
<div
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
:class="hasError ? 'has-error' : ''"
@mouseup="handleClick(value)"
@keyup.space="handleClick(value)"
>
@ -71,6 +72,7 @@ export default {
default: "",
},
selectedButtonIDs: [Array, String],
hasError: Boolean,
},
data() {
return {

2
src/ux-components/list-button/list-button.vue
View file

@ -1,6 +1,7 @@
<template>
<div
class="list-group list-button d-flex flex-column w-100 mb-2"
:class="hasError ? 'has-error' : ''"
@mouseup="handleClick(value)"
@keyup.space="handleClick(value)"
>
@ -73,6 +74,7 @@ export default {
default: "",
},
selectedButtonIDs: [Array, String],
hasError: Boolean,
},
data() {
return {

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

@ -2,7 +2,7 @@
<div :class="'col' + colLength">
<div
class="list-card w-100 rounded-3 d-flex align-items-center h-100"
:class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
:class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
>
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
@ -53,10 +53,8 @@ import { useField } from "vee-validate";
export default {
name: "listCard",
props: {
//Must choose one of the following four options
isMultiSelect: Boolean, //Defines use as checkbox
isWide: Boolean,
//end must choose
buttonImage: String, //Required: File name of image
buttonImageId: String,
buttonLabel: String, //Required: Label text
@ -73,6 +71,7 @@ export default {
colLength: String,
validationRules: String,
selectedButtonIDs: [Array, String],
hasError: Boolean,
},
data(){
return {

3
src/ux-components/radio/radio.vue
View file

@ -1,6 +1,6 @@
<template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio d-flex">
<div class="ui-radio d-flex" :class="[hasError ? 'has-error' : '']">
<input
type="radio"
aria-checked="false"
@ -35,6 +35,7 @@ export default {
default: "",
},
screenReaderOnlyText: String,
hasError: Boolean,
},
data() {
return {