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

Merge branch 'develop' into feature/CSR-335

Browse source
This commit is contained in:
FrankRua 2022-02-18 13:15:03 -05:00
commit ad106e0176
29 changed files with 1383 additions and 1253 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
jest.config.js
View file

@ -16,6 +16,7 @@ module.exports = {
"!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue",
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/address-poc/address-poc.vue",
"!src/layouts/nested-radio-poc/nested-radio.vue",
], //! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: {

39
src/common-components/button-question/button-question.spec.js
View file

@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
import { nextTick } from "vue";
describe("buttonQuestion.vue", () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
isOverflowScrollable: true,
const wrapper = shallowMount(buttonQuestion, {
propsData: {
isOverflowScrollable: true,
}
});
// Assert
const fieldSet = wrapper.find('fieldset');
expect(fieldSet.classes()).toContain("overflow-scroll");
@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Fieldset classes should contain row if button type is listCard", async () => {
it("Fieldset classes should contain row if button type is listCard", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
buttonType: "listCard",
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonType: "listCard",
}
});
// Assert
const Div = wrapper.find('fieldset div');
@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
buttonType: "listButtonHorizontal",
const wrapper = shallowMount(buttonQuestion, {
propsData: {
buttonType: "listButtonHorizontal",
}
});
// Assert
const Div = wrapper.find('fieldset div');
@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Should add values to array on checkbox click", async () => {
it("Should add values to array on checkbox click", () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setProps({
modelValue: ["2022", "2021", "2020"],
isMultiSelect: true
const wrapper = shallowMount(buttonQuestion, {
propsData: {
modelValue: ["2022", "2021", "2020"],
isMultiSelect: true,
}
});
const val = {isChecked: true, buttonId: "2019", }
wrapper.vm.handleCheckedChanged(val);

34
src/common-components/button-question/button-question.vue
View file

@ -19,17 +19,16 @@
:textPosition="textPosition"
:isMultiSelect="isMultiSelect"
:groupName="groupName"
:loaderEnabled="loaderEnabled"
:selectingInitiatesLoad="selectingInitiatesLoad"
:loaderColor="loaderColor"
:loaderPosition="loaderPosition"
:sizeInRem="sizeInRem"
:isWide="isWide"
:isRequired="isRequired"
:buttonImage="answer.AnswerImageUrl"
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:colLength="this.answers.length < 3 ? '' : '-4'"
:colLength="getColLength"
:selectedButtonIDs="selectedValues"
data-test="button"
:validationRules="validationRules"
@ -37,7 +36,7 @@
</div>
</fieldset>
</div>
<div class="row px-3 my-6 form-test-error" v-if="!suppressError">
<div class="row mt-2 form-test-error" v-if="!suppressError">
<error-message :name="groupName"></error-message>
</div>
</div>
@ -65,7 +64,7 @@ export default {
type: String,
default: "text-center",
},
loaderEnabled: Boolean,
selectingInitiatesLoad: Boolean,
loaderColor: {
type: String,
default: "blue",
@ -74,17 +73,11 @@ export default {
type: String,
default: "right",
},
sizeInRem: {
type: [String, Number],
default: 1.5,
},
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
modelValue: Array,
validationRules: String,
name: String,
value: String,
suppressError: Boolean,
},
computed: {
@ -111,6 +104,13 @@ export default {
}
return classes;
},
getColLength(){
if(this.isWide) {
return "12"
} else {
return this.answers.length < 3 ? '' : '-4';
}
},
selectedValues: {
get: function() {
return this.modelValue;
@ -120,17 +120,7 @@ export default {
}
},
},
mounted(){
if(Array.isArray(this.answers) && this.answers.length === 1) {
const newSelectedValues = this.selectedValues;
newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
this.selectedValues = newSelectedValues;
}
},
methods: {
chooseAnswer(answer) {
this.$emit("update:modelValue", answer);
},
handleCheckedChanged(val) {
if(this.isMultiSelect) {
// Add or remove item to array of data to emit
@ -138,7 +128,7 @@ export default {
val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
this.selectedValues = newSelectedValues;
} else {
this.selectedValues = [val.buttonId]
this.selectedValues = [val.buttonId];
}
},
},

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

@ -21,9 +21,9 @@
isPrimary
:buttonText="buttonText"
loaderColor="white"
sizeInRem="1"
:class="isDisabled && 'form-test-invalid'"
:aria-disabled="isDisabled"
:isDisabled="isDisabled"
@click-event="buttonClick"
/>
</div>
@ -96,6 +96,10 @@ export default {
.btn-primary {
width: 100%;
}
a {
display: flex;
justify-content: center;
}
@media only screen and (min-width: 340px) {
.button-col,
.link-col {
@ -104,6 +108,10 @@ export default {
.btn-primary {
width: auto;
}
a {
display: flex;
justify-content: flex-start;
}
}
}
</style>

2
src/common-components/funnel-sub-header/funnel-sub-header.vue
View file

@ -57,7 +57,7 @@ export default {
};
</script>
<style lang="scss">
<style lang="scss" scoped>
h5 {
line-height: 32px;

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

File diff suppressed because it is too large Load diff

3
src/layouts/form-test/form-test.vue
View file

@ -8,7 +8,7 @@
@invalid-submit="onInvalidSubmit"
ref="theForm"
v-slot="{ values, meta, errors }"
>
>
<damageLocationQuestion
ref="damageLocation"
v-model="selectedDamageLocations"
@ -20,6 +20,7 @@
:suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
/>
<alert
class="my-3"
v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
alertClass="alert-danger"
alertHeadline="You'll need to schedule separate appointments"

89
src/layouts/nested-radio-poc/nested-radio.vue Normal file
View file

@ -0,0 +1,89 @@
<template>
<div class="container-fluid nested-radio">
<div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
<div class="col">
<listCard
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint, Blue Shade"
buttonID="radio1"
/>
</div>
</div>
<div class="row mb-1 show-hide"><!-- show-hide for demo only -->
<div class="col">
<p class="mb-0 fw-bold">Ok, select the features</p>
<radio ref="radio"
groupName="group1"
buttonLabel="rain sensor, solar, 3rd visor band"
buttonID="button1"
isRequired
value="test button"
screenReaderOnlyText="rain sensor, solar, 3rd visor band"
/>
<radio ref="radio"
groupName="group1"
buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
buttonID="button2"
isRequired
value="test button"
screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
/>
</div>
</div>
<div class="row mb-2">
<div class="col">
<listCard
groupName="listcard1"
isWide="true"
buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
buttonLabel="Green Tint"
buttonID="radio2"
/>
</div>
</div>
</div>
</template>
<script>
import listCard from "@/ux-components/list-card/list-card";
import radio from "@/ux-components/radio/radio";
export default {
name: "nestedRadio",
components: {
radio,
listCard,
}
};
</script>
<style lang="scss">
.nested-radio {
padding: 20px; // For demo only
.ui-radio {
margin: .25rem 0;
}
p {
font-size: .875rem;
}
// For demo only
.show-hide {
max-height: 0;
transition: max-height 0.35s ease-out;
overflow: hidden;
}
.demo-animate {
&:hover {
+ .show-hide {
max-height: 140px;
transition: max-height 0.35s ease-in;
}
}
}
// END for demo only
}
</style>

1
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

@ -1,7 +1,6 @@
<template>
<div class="damage-location-question">
<buttonQuestion
v-if="answersToDisplay.length > 1"
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"

2
src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
View file

@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
test("Answers to display filtered by data from api.", async () => {
//Arrange
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
//Act
replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");

14
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -1,8 +1,9 @@
<template>
<transition name="fade">
<div class="replace-options-question">
<div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
<buttonQuestion
v-if="isAvailable && answersToDisplay.length > 1"
v-if="isAvailable"
isWide
:questionText="questionText"
isMultiSelect
:answers="answersToDisplay"
@ -64,11 +65,18 @@ export default ({
? this.answersFromCms.filter(ans =>
{
const name = ans.Name.split('-');
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
})
: [];
},
},
mounted(){
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
const newSelectedValues = this.selectedValues;
newSelectedValues.push(this.answersToDisplay[0].Name);
this.selectedValues = newSelectedValues;
}
},
components: {
buttonQuestion,
}

23
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -175,7 +175,10 @@ function setupMocks({
return Promise.resolve({
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
}
},
windshieldOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
});
});
const apiResponses = {
@ -193,6 +196,9 @@ function setupMocks({
damageOptions: {
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
},
windshieldOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
}
},
};
@ -220,6 +226,11 @@ function setupMocks({
initializeComponent: jest.fn(),
};
const windshieldOptions = replaceOptionsQuestion
windshieldOptions.methods = {
initializeComponent: jest.fn(),
};
damageLocationQuestion.methods = {
initializeComponent: jest.fn(),
};
@ -245,12 +256,18 @@ function setupMocks({
funnelSubHeaderWrapper.vm.initializeComponent =
funnelSubHeader.methods.initializeComponent;
const driverSideOptionsWrapper = wrapper.findComponent({
const driverSideOptionsWrapper = wrapper.findAllComponents({
name: "replaceOptionsQuestion",
});
}).at(0);
driverSideOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
const windshieldOptionsWrapper = wrapper.findAllComponents({
name: "replaceOptionsQuestion",
}).at(1);
windshieldOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({
name: "damageLocationQuestion",
});

7
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -4,7 +4,8 @@
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
<replaceOptionsQuestion ref="windshieldOptions" isAvailable groupName="windshieldOptions" v-model="windshieldOptionsData" />
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
</template>
@ -68,6 +69,9 @@ export default {
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
@ -77,6 +81,7 @@ export default {
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
windshieldOptionsData: [],
}
},
methods: {

2
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -2,11 +2,11 @@
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="makes"
groupName="Choose Vehicle Make"
textPosition="text-start"
:loaderEnabled="true"
v-model="selectedValueAsArray"
isRequired=true
/>

2
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -2,11 +2,11 @@
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="models"
groupName="Choose Vehicle Model"
textPosition="text-start"
:loaderEnabled="true"
v-model="selectedValueAsArray"
isRequired=true
/>

2
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -2,11 +2,11 @@
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="styles"
groupName="Choose Vehicle Style"
textPosition="text-start"
:loaderEnabled="true"
v-model="selectedValueAsArray"
isRequired=true
/>

2
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -2,11 +2,11 @@
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="years"
groupName="Choose Vehicle Year"
textPosition="text-start"
:loaderEnabled="true"
v-model="selectedValueAsArray"
isRequired=true
/>

6
src/router/index.js
View file

@ -11,6 +11,7 @@ import store from "@/store";
import ComponentTest from "@/layouts/component-test/component-test.vue";
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
import FormTest from "@/layouts/form-test/form-test.vue";
import NestedRadio from "@/layouts/nested-radio-poc/nested-radio.vue";
const routes = [
{
@ -33,6 +34,11 @@ const routes = [
name: "FormTest",
component: FormTest,
},
{
path: "/nested-radio", // This is a temporary route for testing.
name: "NestedRadio",
component: NestedRadio,
},
{
path: "/",
name: "root",

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

@ -1,24 +1,50 @@
.has-error {
&.list-button,
&.list-card,
&.list-card {
border: 1px solid transparent;
color: $red;
label {
border: 1px solid $red;
border-radius: .5rem;
}
}
input[type=checkbox]:focus + label,
input[type=radio]:focus + label,
input[type=checkbox]:checked + label,
input[type=radio]:checked + label {
box-shadow: 0 0 0 2.5px transparent !important;
}
&.list-button-horizontal {
color: $red;
label {
border: 1px solid $red;
}
}
&.ui-radio,
&.ui-checkbox {
input[type=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 {
color: $red;
font-weight: bold;
font-size: .875rem;
font-weight: 500;
}
.form-test-invalid {
&.btn.btn-primary {
color: $gray;
background: $gray-200;
cursor: default;
cursor: pointer;
pointer-events: all;
}
&.btn.btn-primary:hover,
&.btn.btn-primary:focus,
@ -28,4 +54,4 @@
box-shadow: none;
}
}
}

22
src/ux-components/button-main/button-main.spec.js
View file

@ -76,26 +76,4 @@ describe("buttonMain.vue", () => {
expect(loader.attributes("class")).toContain("right");
});
it("Should return loader size in rem", async () => {
// Act
const wrapper = shallowMount(buttonMain, {
propsData: {
sizeInRem: 1,
loaderEnabled: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.clicked();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("style")).toContain("1rem");
});
});

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

@ -1,16 +1,14 @@
<template>
<button
:disabled="isDisabled"
:aria-disabled="isDisabled"
class="btn d-flex align-items-center py-3 px-2"
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
class="btn d-flex align-items-center py-3 px-4 delay"
:class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
@click="clicked()"
>
<span class="m-0">{{ this.buttonText }}</span>
<loader
class="ms-2"
v-if="isLoaderDisplayed"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
v-bind:class="[this.loaderColor, this.loaderPosition]"
/>
</button>
@ -26,8 +24,7 @@ export default {
isDisabled: Boolean,
loaderColor: String,
loaderPosition: String,
sizeInRem: [Number, String],
isFloat: Boolean
isFloat: Boolean,
},
data() {
return {
@ -36,8 +33,10 @@ export default {
},
methods: {
clicked() {
this.isLoaderDisplayed = true;
this.$emit("click-event");
if (!this.isDisabled) {
this.isLoaderDisplayed = true;
this.$emit("click-event");
}
},
},
components: {
@ -50,13 +49,12 @@ export default {
.btn {
&.btn-primary {
position: relative;
background: $blue-700;
@include blue-gradient;
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
border: none;
border-radius: $border-radius-lg;
color: $white;
transition: all 150ms linear;
justify-content: center;
font-weight: 500;
&:hover {
background: linear-gradient(
270deg,
@ -70,19 +68,33 @@ export default {
outline: none;
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
color: $white;
@include blue-gradient;
}
&:disabled {
background: $gray-100 !important;
background: linear-gradient(
270deg,
$gray-100 0%,
$gray-100 100%
rgba(6, 87, 124, 1) 0%,
rgba(6, 87, 124, 1) 100%
);
}
&:disabled {
background: $gray-200 !important;
background: linear-gradient(
270deg,
$gray-200 0%,
$gray-200 100%
) !important;
color: $gray !important;
color: $gray-600 !important;
font-weight: 400;
height: 48px;
border: none;
border-radius: $border-radius-lg;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $white;
background: $blue-700;
}
&.delay {// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
}
&.btn-secondary {
@ -91,6 +103,7 @@ export default {
border: 1px solid $blue;
border-radius: $border-radius-lg;
color: $blue;
font-weight: 500;
transition: all 150ms linear;
&:hover {
color: $white;
@ -106,10 +119,20 @@ 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;
@include blue-gradient;
}
&.delay {// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
}
}

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

@ -1,15 +1,15 @@
<template>
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
<div class="ui-checkbox d-flex">
<input
type="checkbox"
aria-checked="false"
:name="checkboxName"
:id="buttonID"
:tabindex="tabIndex"
:aria-required="isRequired"
<div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
<input class="form-check-input"
type="checkbox"
aria-checked="false"
:name="checkboxName"
:id="buttonID"
:tabindex="tabIndex"
:aria-required="isRequired"
/>
<label class="d-flex align-items-center" :for="buttonID">
<label class="d-flex align-items-start" :for="buttonID">
<p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
@ -28,65 +28,27 @@ export default {
checkboxLabel: String,
screenReaderOnlyText: String,
isRequired: Boolean,
hasError: Boolean
},
};
</script>
<style lang="scss">
.ui-checkbox {
position: relative;
input[type="checkbox"] {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
+ label {
display: block;
position: relative;
&:hover {
cursor: pointer;
}
<style lang="scss" scoped>
.form-check {
.form-check-input {
border: 1px solid $gray-500;
border-radius: 2px;
&:checked {
background-size: 125%;
border: 1px solid $blue;
}
+ label::before {
content: "";
position: relative;
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
background: white;
border: 1px solid $gray-500;
border-radius: 2px;
}
&:checked + label::before {
background: $blue;
}
&:checked + label::after {
content: "";
position: absolute;
top: 8px;
left: 2px;
border-left: 2px solid $white;
border-bottom: 2px solid $white;
height: 6px;
width: 12px;
transform: rotate(-45deg);
}
&:hover + label::before {
&:focus {
box-shadow: 0 0 0 4px $blue-300;
}
&:focus + label::before {
box-shadow: 0 0 0 2px $blue;
}
&:focus:checked + label::before {
box-shadow: 0 0 0 2px transparent;
}
&:disabled + label {
color: $gray-200;
}
&:disabled + label::before {
background: $gray-200;
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
}
}
}

31
src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
View file

@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
loaderEnabled: true,
selectingInitiatesLoad: true,
},
});
@ -99,6 +99,7 @@ describe("list-button-horizontal.vue", () => {
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.handleClick();
await nextTick();
@ -113,7 +114,7 @@ describe("list-button-horizontal.vue", () => {
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
loaderColor: "blue",
loaderEnabled: true,
selectingInitiatesLoad: true,
},
});
@ -121,6 +122,7 @@ describe("list-button-horizontal.vue", () => {
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.handleClick();
await nextTick();
@ -135,7 +137,7 @@ describe("list-button-horizontal.vue", () => {
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
loaderPosition: "right",
loaderEnabled: true,
selectingInitiatesLoad: true,
},
});
@ -143,6 +145,7 @@ describe("list-button-horizontal.vue", () => {
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.handleClick();
await nextTick();
@ -152,28 +155,6 @@ describe("list-button-horizontal.vue", () => {
expect(loader.attributes("class")).toContain("right");
});
it("Should return loader size in rem", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {
propsData: {
sizeInRem: 1,
loaderEnabled: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleClick();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("style")).toContain("1rem");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listButtonHorizontal, {

17
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)"
>
@ -12,7 +13,7 @@
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="handleCheckChange"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
/>
<label
tabindex="-1"
@ -38,7 +39,6 @@
</span>
<loader
v-if="isLoaderDisplayed && !isMultiSelect"
:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
:class="[loaderColor, loaderPosition]"
/>
</label>
@ -60,10 +60,9 @@ export default {
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
textPosition: String,
loaderEnabled: Boolean,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: String,
sizeInRem: [Number, String],
isRequired: Boolean,
value: {
// Field initial value
@ -71,6 +70,7 @@ export default {
default: "",
},
selectedButtonIDs: [Array, String],
hasError: Boolean,
},
data() {
return {
@ -88,8 +88,9 @@ export default {
this.isLoaderDisplayed = true;
},
handleClick(value) {
if (this.loaderEnabled) {
if(this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
this.handleChange(value);
},
@ -132,13 +133,16 @@ export default {
height: 0;
&:focus-visible + label {
box-shadow: 0 0 0 2px $blue;
z-index: 3;
}
&:focus + label {
box-shadow: 0 0 0 2px $blue;
z-index: 3;
}
&:checked + label {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
z-index: 2;
}
&:checked + label p:first-child {
font-weight: 500;
@ -155,7 +159,7 @@ export default {
&:hover {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 2;
z-index: 3 !important;
}
+ p {
display: none;
@ -165,6 +169,7 @@ export default {
label {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
z-index: 2;
}
}
&:last-of-type {

33
src/ux-components/list-button/list-button.spec.js
View file

@ -91,7 +91,7 @@ describe("list-button.vue", () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
loaderEnabled: true,
selectingInitiatesLoad: true,
},
});
@ -99,6 +99,7 @@ describe("list-button.vue", () => {
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.handleClick();
await nextTick();
@ -113,16 +114,15 @@ describe("list-button.vue", () => {
const wrapper = shallowMount(listButton, {
propsData: {
loaderColor: "blue",
loaderEnabled: true,
selectingInitiatesLoad: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.handleClick();
await nextTick();
const loader = wrapper.find("loader-stub");
@ -135,7 +135,7 @@ describe("list-button.vue", () => {
const wrapper = shallowMount(listButton, {
propsData: {
loaderPosition: "right",
loaderEnabled: true,
selectingInitiatesLoad: true,
},
});
@ -143,6 +143,7 @@ describe("list-button.vue", () => {
const label = wrapper.find("label");
wrapper.vm.handleCheckChange = jest.fn();
wrapper.vm.handleClick();
await nextTick();
@ -152,28 +153,6 @@ describe("list-button.vue", () => {
expect(loader.attributes("class")).toContain("right");
});
it("Should return loader size in rem", async () => {
// Act
const wrapper = shallowMount(listButton, {
propsData: {
sizeInRem: 1,
loaderEnabled: true,
},
});
// Assert
const label = wrapper.find("label");
wrapper.vm.handleClick();
await nextTick();
const loader = wrapper.find("loader-stub");
expect(loader.attributes("style")).toContain("1rem");
});
it("Should emit button value on click", async () => {
// Act
const wrapper = shallowMount(listButton, {

13
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)"
>
@ -12,7 +13,7 @@
:aria-required="isRequired"
:data-focus-target="groupName"
v-model="checkValue"
@change="handleCheckChange"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
>
<label
tabindex="-1"
@ -41,7 +42,6 @@
</span>
<loader
v-if="isLoaderDisplayed && !isMultiSelect"
:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
:class="[this.loaderColor, this.loaderPosition]"
/>
</label>
@ -63,16 +63,16 @@ export default {
textPosition: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,
loaderEnabled: Boolean,
selectingInitiatesLoad: Boolean,
loaderColor: String,
loaderPosition: String,
sizeInRem: [Number,String],
value: {
// Field initial value
type: [String, Number],
default: "",
},
selectedButtonIDs: [Array, String],
hasError: Boolean,
},
data() {
return {
@ -90,8 +90,9 @@ export default {
this.isLoaderDisplayed = true;
},
handleClick(value) {
if (this.loaderEnabled) {
if(this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
this.handleChange(value);
},
@ -100,7 +101,7 @@ export default {
if (!isInitialization) {
this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
}
}
},
},
components: {
loader,

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

@ -1,8 +1,8 @@
<template>
<div :class="'col' + colLength">
<div
<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'"
@ -13,7 +13,7 @@
:data-focus-target="groupName"
@click="handleChange(value)"
v-model="checkValue"
@change="handleCheckChange"
@change="handleCheckChange()"
/>
<label
:for="buttonID"
@ -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 {
@ -108,11 +107,11 @@ export default {
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const {
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules,
} = useField(props.groupName, props.validationRules,
{
type: inputType,
checkedValue: props.value,
@ -155,6 +154,7 @@ export default {
cursor: pointer;
}
p {
color: $gray-600;
text-align: center;
&.sub-copy {
color: $gray-550;
@ -170,6 +170,15 @@ export default {
box-shadow: 0 0 0 1px $blue;
border-radius: 0.5rem;
}
&:checked + label {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
}
}
+ label::before {
content: "";
position: absolute;

9
src/ux-components/loader/loader.vue
View file

@ -3,7 +3,6 @@
class="loader"
role="alert"
aria-label="Loading new page"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
v-bind:class="[this.loaderColor, this.loaderPosition]"
></div>
</template>
@ -13,10 +12,6 @@ export default {
name: "loader",
/* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
props: {
sizeInRem: {
type: Number,
default: 1,
},
/* Color options: red, green, blue, white, black */
loaderColor: {
type: String,
@ -50,8 +45,8 @@ export default {
mask: url(../../assets/img/icons/spinner.svg);
mask-size: cover;
position: relative;
width: 100%;
height: 100%;
width: 1rem;
height: 1rem;
animation: rotation 1s infinite linear;
@keyframes rotation {
100% {

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

@ -1,17 +1,18 @@
<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 form-check" :class="[hasError ? 'has-error' : '']">
<input
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged"
@change="handleCheckChanged()"
/>
<label class="d-flex align-items-center" :for="buttonID">
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
@ -35,6 +36,7 @@ export default {
default: "",
},
screenReaderOnlyText: String,
hasError: Boolean,
},
data() {
return {
@ -76,62 +78,25 @@ export default {
};
</script>
<style lang="scss">
.ui-radio {
position: relative;
input[type="radio"] {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
+ label {
display: block;
position: relative;
&:hover {
cursor: pointer;
}
}
+ label::before {
content: "";
position: relative;
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
background: white;
border: 1px solid $gray-500;
border-radius: 50%;
}
&:checked + label::before {
background: $white;
<style lang="scss" scoped>
.form-check {
.form-check-input {
border: 1px solid $gray-500;
border-radius: 100%;
margin-right: .5rem;
&:checked {
background-color: $white;
background-size: 71%;
border: 1px solid $blue;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
}
&:checked + label::after {
content: "";
position: absolute;
top: 8px;
left: 3px;
height: 6px;
width: 6px;
transform: rotate(-45deg);
border: 5px solid $blue;
border-radius: 50%;
}
&:hover + label::before {
&:focus {
box-shadow: 0 0 0 4px $blue-300;
}
&:focus + label::before {
box-shadow: 0 0 0 2px $blue;
}
&:focus:checked + label::before {
box-shadow: 0 0 0 2px transparent;
}
&:disabled + label {
color: $gray-200;
}
&:disabled + label::before {
background: $gray-200;
}
&:hover {
.form-check-input {
box-shadow: 0 0 0 4px $blue-300;
}
}
}