Merge Develop branch, fix conflicts
This commit is contained in:
Adam Caouette
commit
51660aa968
26 changed files with 1240 additions and 1133 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,18 +120,7 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
|
||||
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
|
||||
|
|
@ -139,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];
|
||||
}
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
isPrimary
|
||||
:buttonText="buttonText"
|
||||
loaderColor="white"
|
||||
sizeInRem="1"
|
||||
:class="isDisabled && 'form-test-invalid'"
|
||||
:aria-disabled="isDisabled"
|
||||
:isDisabled="isDisabled"
|
||||
|
|
@ -97,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 {
|
||||
|
|
@ -105,6 +108,10 @@ export default {
|
|||
.btn-primary {
|
||||
width: auto;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
h5 {
|
||||
line-height: 32px;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div class="damage-location-question">
|
||||
<buttonQuestion
|
||||
v-if="answersToDisplay.length > 1"
|
||||
:questionText="questionText"
|
||||
isMultiSelect
|
||||
:answers="answersToDisplay"
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<transition name="fade">
|
||||
<div class="replace-options-question">
|
||||
<div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXX' : ''">
|
||||
<buttonQuestion
|
||||
v-if="isAvailable && answersToDisplay.length > 0"
|
||||
isWide
|
||||
:questionText="questionText"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:answers="answersToDisplay"
|
||||
|
|
@ -70,6 +71,14 @@ export default ({
|
|||
: [];
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
|
||||
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
|
||||
const newSelectedValues = this.selectedValues;
|
||||
newSelectedValues.push(this.answersToDisplay[0].Name);
|
||||
this.selectedValues = newSelectedValues;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,10 +8,15 @@
|
|||
v-model="selectedDamageLocations"
|
||||
groupName="DamageLocationQuestion"
|
||||
/>
|
||||
<replaceOptionsQuestion
|
||||
ref="windshieldOptions"
|
||||
isAvailable
|
||||
groupName="windshieldOptions"
|
||||
v-model="windshieldOptionsData"
|
||||
/>
|
||||
<replaceOptionsQuestion
|
||||
ref="driverSideOptions"
|
||||
isAvailable
|
||||
isMultiSelect
|
||||
filterByVehicleCategory
|
||||
v-model="driverSideOptionsData"
|
||||
groupName="DriverSideReplaceOptionsQuestion"
|
||||
|
|
@ -88,6 +93,9 @@ export default {
|
|||
vm.$refs.backGlassOptions.initializeComponent(
|
||||
resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
|
||||
);
|
||||
vm.$refs.windshieldOptions.initializeComponent(
|
||||
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
|
||||
);
|
||||
vm.$refs.funnelFooter.initializeComponent(
|
||||
resultMap.cmsContent.FunnelFooterWidget
|
||||
);
|
||||
|
|
@ -98,6 +106,7 @@ export default {
|
|||
selectedDamageLocations: [],
|
||||
driverSideOptionsData: [],
|
||||
selectedRearReplaceOptions: [],
|
||||
windshieldOptionsData: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -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,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,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,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
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,49 @@
|
|||
.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=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 +53,4 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
<template>
|
||||
<button
|
||||
: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>
|
||||
|
|
@ -25,7 +24,6 @@ export default {
|
|||
isDisabled: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
sizeInRem: [Number, String],
|
||||
isFloat: Boolean,
|
||||
},
|
||||
data() {
|
||||
|
|
@ -51,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,
|
||||
|
|
@ -71,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 {
|
||||
|
|
@ -92,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;
|
||||
|
|
@ -107,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
},
|
||||
|
|
@ -139,6 +140,7 @@ export default {
|
|||
&: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 +157,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 +167,7 @@ export default {
|
|||
label {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
|
|
|
|||
|
|
@ -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, {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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'"
|
||||
|
|
@ -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,
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses() {
|
||||
|
|
@ -104,11 +103,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,
|
||||
|
|
@ -151,6 +150,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
p {
|
||||
color: $gray-600;
|
||||
text-align: center;
|
||||
&.sub-copy {
|
||||
color: $gray-550;
|
||||
|
|
@ -166,6 +166,14 @@ export default {
|
|||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
&:checked + label {
|
||||
p {
|
||||
color: $black;
|
||||
}
|
||||
.sub-copy {
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
+ label::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -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% {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue