@@ -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,25 +120,17 @@ 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) {
+ if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues;
- val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
- this.selectedValues = newSelectedValues;
+ if(Array.isArray(this.selectedValues)) {
+ val.checkValue ? newSelectedValues.push(val.value) : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
+ this.selectedValues = newSelectedValues;
+ }
} else {
- this.selectedValues = [val.buttonId];
+ this.selectedValues = [val.value];
}
},
},
diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js
new file mode 100644
index 000000000..0d1095c94
--- /dev/null
+++ b/src/common-components/dropdown-question/dropdown-question.spec.js
@@ -0,0 +1,81 @@
+import { shallowMount } from "@vue/test-utils";
+import dropdownQuestion from "./dropdown-question";
+import { nextTick } from "vue";
+
+describe("dropdownQuestion.vue", () => {
+
+ it("Should return aria-disabled state", async () => {
+ // Act
+ const wrapper = shallowMount(dropdownQuestion, {
+ propsData: {
+ isDisabled: true,
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("select");
+
+ // Expect
+ expect(input.attributes()["aria-disabled"]).toEqual("true");
+ });
+
+ it("Should render a text input", async () => {
+ // Act
+ const wrapper = shallowMount(dropdownQuestion, {
+ propsData: {
+ name: "test",
+ label: "unit test label",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("select");
+
+ expect(input.exists()).toBe(true);
+ });
+
+ it("Should return input id", async () => {
+ // Act
+ const wrapper = shallowMount(dropdownQuestion, {
+ propsData: {
+ inputId: "input ID",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("select");
+
+ // Expect
+ expect(input.attributes().id).toEqual("input ID");
+ });
+
+ it("Should return label text", async () => {
+ // Act
+ const wrapper = shallowMount(dropdownQuestion, {
+ propsData: {
+ labelText: "label text",
+ },
+ });
+
+ // Assert
+ const label = wrapper.find("label");
+
+ expect(label.text()).toEqual("label text");
+ });
+
+ it("Should return input id", async () => {
+ // Act
+ const wrapper = shallowMount(dropdownQuestion, {
+ propsData: {
+ inputId: "input ID",
+ },
+ });
+
+ // Assert
+ const input = wrapper.find("select");
+
+ // Expect
+ expect(input.attributes().id).toEqual("input ID");
+ });
+
+});
diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index edbd8787f..e593a61b9 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -1,13 +1,19 @@
-
+
+
+
There has been an error!
+
+
+
+
+
diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue
index af604ed99..062a3574a 100644
--- a/src/common-components/funnel-footer/funnel-footer.vue
+++ b/src/common-components/funnel-footer/funnel-footer.vue
@@ -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;
+ }
}
}
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 86cb76197..382640219 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -60,7 +60,7 @@ export default {
diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 43d67533f..d75266010 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,203 +1,300 @@
-
-
-
-
-
Checkbox
+
+
-
-
+
+
+
+
With Error (class="has-error"):
+
+
+
+
+
+
Dropdown Input (Select)
+
+
+
+
+
+
+
With Error (class="has-error"):
+
+
+
+
+
+
+
+ />
+
With Error:
+
(NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
-
-
-
-
-
-
Buttons
+
+
+
With Error:
+
(NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
List Card
-
Functioning as Checkbox in Column Layout
+
+
+
+
+
List Card
+ Functioning as Checkbox
+
-
-
-
-
-
List Card
- Functioning as Checkbox
-
-
-
-
-
+
-
-
-
-
Checkbox No Description
-
-
-
-
-
Functioning as Radio Button
-
+
+
+
Functioning as Radio Button
+
+ />
+
+
-
-
-
-
Radio Button no Description
-
-
-
-
-
Horizontal as Checkbox
-
+
+
+
Horizontal as Checkbox
+
+ />
+
+
-
-
-
-
Checkbox no Description
-
-
-
-
-
Horizontal as Radio Button
-
+
+
+
Horizontal as Radio Button
+
+ />
+
+
-
-
-
-
Radio Button no Description
-
-
-
-
-
List Button - Single-Line
-
Functioning as Checkboxes
+
+
+
Horizontal with Error
+ (NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
-
-
-
-
+
+
List Button - Single-Line
+ Functioning as Checkboxes
+
+
+
+
+
+ >
Select Vehicle Year
-
-
-
-
-
-
-
-
Functioning as Radio Buttons
-
- Select Vehicle Year
-
-
-
-
-
-
-
-
List Button - Multi-Line
- Functioning as Checkboxes
-
-
-
-
-
-
-
Select Vehicle Year
-
-
-
-
-
-
-
-
Functioning as Radio Buttons
-
-
-
Select Vehicle Year
-
-
-
-
-
-
-
-
- List Button - Multi-Line Centered
-
- Functioning as Checkboxes
-
-
-
-
-
-
-
Multi-Line Centered
-
-
-
-
-
-
-
-
Functioning as Radio Buttons
-
-
-
Multi-Line Centered
-
-
-
-
-
-
-
-
List Button Horizontal
- Functioning as Checkboxes
-
-
-
-
-
-
-
Select Vehicle Year
-
-
-
-
-
-
-
-
Functioning as Radio Buttons
-
-
-
Select Vehicle Year
-
-
-
-
-
-
-
-
-
This is default body copy font size/weight
-
- This is small body copy using .small class
-
-
- This is also small using <small> tag
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Checkbox with Error
+ (NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
+
+
+
Functioning as Radio Buttons
+
+ Select Vehicle Year
+
+
+
+ Radio Button with Error
+ (NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
-
+
+
+
List Button - Multi-Line
+ Functioning as Checkboxes
+
+
+
+
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
+
+
Functioning as Radio Buttons
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
+
+
+ List Button - Multi-Line Centered
+
+ Functioning as Checkboxes
+
+
+
+
+
+
+
Multi-Line Centered
+
+
+
+
+
+
+
+
+
Functioning as Radio Buttons
+
+
+
Multi-Line Centered
+
+
+
+
+
+
+
+
+
List Button Horizontal
+ Functioning as Checkboxes
+
+
+
+
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
Checkbox with Error
+
(NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
+
Functioning as Radio Buttons
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
Radio Button with Error
+
(NOTE: Error states are styled only and not a demo of the full functionality.)
+
+
+
+
Select Vehicle Year
+
+
+
+
+
+
+
+
+
This is default body copy font size/weight
+
+ This is small body copy using .small class
+
+
+ This is also small using <small> tag
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
diff --git a/src/layouts/nested-radio-poc/nested-radio.vue b/src/layouts/nested-radio-poc/nested-radio.vue
new file mode 100644
index 000000000..3bdeba866
--- /dev/null
+++ b/src/layouts/nested-radio-poc/nested-radio.vue
@@ -0,0 +1,75 @@
+
+
+
+
+
+
+
Ok, select the features
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
index 01f063eef..92feec9b8 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
@@ -41,7 +41,7 @@ describe("damage-location-question.vue", () => {
damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
//Assert
- expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-SideDoor' } ])
+ expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'SideDoor' } ])
});
});
diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
index 36eac0831..89b3244e3 100644
--- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
+++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
@@ -1,7 +1,6 @@
{
const name = ans.Name.split('-');
return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
})
: [];
+ return filteredAnswers.map(ans => {
+ const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+ ans.Name = newName;
+ return ans;
+ });
},
},
components: {
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
index 103aecd4c..a6ee43924 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -1,76 +1,124 @@
import { shallowMount } from "@vue/test-utils";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import { nextTick } from "vue";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
describe("replace-options-question.vue", () => {
- test("Selected damage option is emitted upon selection.", async () => {
-
- //Arrange
- const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
- const damageToSelect = ["Backseat"];
-
- //Act
- wrapper.setValue({ modelValue: damageToSelect });
- await wrapper.vm.$nextTick();
-
- //Assert
- expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
- });
- });
+ test("Selected damage option is emitted upon selection.", async () => {
- describe("replace-options-question.vue", () => {
- test("Answers to display filtered by data from api.", async () => {
-
- //Arrange
- const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
-
- //Act
- replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
-
- //Assert
- expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
- });
- });
+ //Arrange
+ const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+ const damageToSelect = ["Backseat"];
- function setupMocks({
- modelValueProp = ["Windshield"],
- isAvailale = true,
- isMultiSelect = false,
- filterByVehicleCategory = false,
- groupName = "damageQuestion",
- cmsQuestionText = "CMS text goes here",
- cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
- dataFromStoreApi = [],
- }) {
-
- //Mock store
- store.dispatch = jest.fn(() => dataFromStoreApi);
- store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
- const mountOptions = getMountOptions({
- store: {
- dispatch: store.dispatch,
- getters: store.getters,
+ //Act
+ wrapper.setValue({ modelValue: damageToSelect });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+ });
+});
+
+describe("replace-options-question.vue", () => {
+ test("Answers to display filtered by data from api.", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
+
+ //Act
+ replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+
+ //Assert
+ expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
+ });
+});
+
+describe("replace-options-question.vue", () => {
+ test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions
+ } = setupMocks({
+ modelValueProp: [],
+ });
+ wrapper.setData({answersFromCms: [
+ {
+ "Name": "Stationary",
},
- });
+ {
+ "Name": "Slider",
+ }
+ ]});
+ wrapper.setData({replaceOptions: ["Stationary"]});
+
+ //Act
+ wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm);
+
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([['Stationary']]);
+ });
+});
+
+describe("replace-options-question.vue", () => {
+ test("when isAvailable is true, will run updateSelectedValues method", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions } = setupMocks({ isAvailable: false, methodsToMock: ["updateSelectedValues"] });
+
+ //Act
+ wrapper.vm.$options.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+ wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true);
+
+ //Assert
+ expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled();
+ wrapper.unmount();
+ });
+});
+
+function setupMocks({
+ modelValueProp = ["Windshield"],
+ isAvailable = true,
+ isMultiSelect = false,
+ filterByVehicleCategory = false,
+ groupName = "damageQuestion",
+ cmsQuestionText = "CMS text goes here",
+ cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
+ dataFromStoreApi = [],
+ methodsToMock = [],
+}) {
- //Mock props
- mountOptions.propsData = {
- modelValue: modelValueProp,
- isAvailable: isAvailale,
- isMultiSelect: isMultiSelect,
- filterByVehicleCategory: filterByVehicleCategory
- };
-
- const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+ //Mock store
+ store.dispatch = jest.fn(() => dataFromStoreApi);
+ store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+ const mountOptions = getMountOptions({
+ store: {
+ dispatch: store.dispatch,
+ getters: store.getters,
+ },
+ });
+
+ //Mock props
+ mountOptions.propsData = {
+ modelValue: modelValueProp,
+ isAvailable: isAvailable,
+ isMultiSelect: isMultiSelect,
+ filterByVehicleCategory: filterByVehicleCategory
+ };
+
+ //Mock methods
+ methodsToMock.forEach((methodName) => {
+ replaceOptionsQuestion.methods[methodName] = jest.fn();
+ });
- //Mock CMS content
- const cmsContent = {
- groupName: groupName,
- QuestionText: cmsQuestionText,
- Answers: cmsAnswers,
- };
- const replaceOptions = dataFromStoreApi;
- return { wrapper, cmsContent, replaceOptions };
- }
\ No newline at end of file
+ const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+
+ //Mock CMS content
+ const cmsContent = {
+ groupName: groupName,
+ QuestionText: cmsQuestionText,
+ Answers: cmsAnswers,
+ };
+ const replaceOptions = dataFromStoreApi;
+ return { wrapper, cmsContent, replaceOptions };
+}
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
index 31c739b49..978cf6b41 100644
--- a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -1,10 +1,10 @@
-
-
+
+
{
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);
})
: [];
+
+ return filteredAnswers.map(ans => {
+ const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
+ ans.Name = newName;
+ return ans;
+ });
},
},
+ watch: {
+ isAvailable(val) {
+ // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
+ val && this.updateSelectedValues();
+ }
+ },
components: {
buttonQuestion,
}
})
-
-
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
new file mode 100644
index 000000000..9c40a0683
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
@@ -0,0 +1,126 @@
+import { shallowMount } from "@vue/test-utils";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("replace-options-question.vue", () => {
+ test("Selected side door option is emitted upon selection.", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+ const sideDoorOptions = ["Backseat"];
+
+ //Act
+ wrapper.setValue({ modelValue: sideDoorOptions });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+ });
+ });
+
+ describe("replace-options-question.vue", () => {
+ test("Selected door side option is updated when selection made.", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({});
+
+ //Act
+ wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
+ });
+ });
+
+ describe("replace-options-question.vue", () => {
+ test("Selected driver side option is updated when selection made.", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({});
+
+ //Act
+ wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
+ });
+ });
+
+ describe("replace-options-question.vue", () => {
+ test("Selected passenger side option is updated when selection made.", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({});
+
+ //Act
+ wrapper.vm.selectedPassengerSideReplaceOptionsValues = ["BacktDoor"]
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
+ });
+ });
+
+
+ describe("replace-options-question.vue", () => {
+ test("Answers to display filtered by data from api.", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions } = setupMocks({});
+
+ //Act
+ sideDoorOptions.methods.initializeComponent.call(wrapper.vm, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions, "car-group");
+
+ //Assert
+ expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'DriverSide' }, { Name: 'PassengerSide' } ])
+ });
+ });
+
+
+ function setupMocks({
+ modelValueProp = ["DriverSide"],
+ groupName = "sideDoorOptions",
+ cmsQuestionText = "CMS text goes here",
+ cmsAnswers = [{Name: "Car-DriverSide"}, {Name: "Car-PassengerSide"}],
+ driverSideReplaceOptions = ["FrontDoor", "BackDoor"],
+ passengerSideReplaceOptions = ["FrontDoor", "BackDoor"],
+ driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
+ passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"],
+ selectedDamageLocations = ["SideDoor"]
+ }) {
+
+ //Mock store
+ store.dispatch = jest.fn(() => dataFromStoreApi);
+ store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+ const mountOptions = getMountOptions({
+ store: {
+ dispatch: store.dispatch,
+ getters: store.getters,
+ },
+ });
+
+ //Mock props
+ mountOptions.propsData = {
+ modelValue: modelValueProp,
+ groupName: groupName,
+ selectedDamageLocations: selectedDamageLocations,
+ };
+
+ const wrapper = shallowMount(sideDoorOptions, mountOptions);
+
+ const OptionsWrapper = wrapper.findAllComponents({name: "replaceOptionsQuestion"});
+ OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
+ OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent;
+ //Mock CMS content
+ const cmsContent = {
+ groupName: groupName,
+ QuestionText: cmsQuestionText,
+ Answers: cmsAnswers,
+ };
+ return { wrapper, cmsContent, driverSideReplaceOptions, passengerSideReplaceOptions, driverSideOptions, passengerSideOptions };
+ }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.vue b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
new file mode 100644
index 000000000..3b63f2152
--- /dev/null
+++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.vue
@@ -0,0 +1,116 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 949f4811b..519d33457 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -4,8 +4,10 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
// Supporting Files
import { settleAllPromises } from "@/helpers/layout-helper.js";
@@ -165,19 +167,60 @@ describe("vehicle-damage.vue", () => {
});
});
+describe("vehicle-damage.vue", () => {
+ test("BackButtonAction triggers a router.navigate change", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({});
+
+ //Act
+ vehicleDamage.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { fmgPage: "vehicle-damage" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ wrapper.vm.backButtonAction();
+
+ //Assert
+ expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
+
+ });
+});
+
+describe("vehicle-damage.vue", () => {
+ test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({});
+
+ //Act
+ vehicleDamage.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { fmgPage: "vehicle-damage" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ wrapper.vm.selectedDamageLocations = ["RearWindow"];
+
+ //Assert
+ expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
+
+ });
+});
+
function setupMocks({
pageHeaderWidgetHeaderText = {},
- mountOptionsMockData = {},
+ mountOptionsMockData = {
+ router: {
+ navigate: jest.fn(),
+ },
+ },
}) {
//Mock api responses
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
- baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
- return Promise.resolve({
- driverSideOptions: {
- availableReplacementOptions: ["Front", "Back", "Side"],
- }
- });
- });
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
@@ -193,7 +236,16 @@ function setupMocks({
damageOptions: {
driverSideOptions: {
availableReplacementOptions: ["Front", "Back", "Side"],
- }
+ },
+ passengerSideOptions: {
+ availableReplacementOptions: ["Front", "Back", "Side"],
+ },
+ windshieldOptions: {
+ availableReplacementOptions: ["Single", "Driver", "Passenger"],
+ },
+ backGlassOptions: {
+ availableReplacementOptions: ["Front", "Back", "Side"],
+ },
},
};
@@ -215,12 +267,19 @@ function setupMocks({
initializeComponent: jest.fn(),
};
- const driverSideOptions = replaceOptionsQuestion
- driverSideOptions.methods = {
+ damageLocationQuestion.methods = {
initializeComponent: jest.fn(),
};
- damageLocationQuestion.methods = {
+ sideDoorOptions.methods = {
+ initializeComponent: jest.fn(),
+ };
+
+ windshieldOptions.methods = {
+ initializeComponent: jest.fn(),
+ };
+
+ replaceOptionsQuestion.methods = {
initializeComponent: jest.fn(),
};
@@ -239,16 +298,27 @@ function setupMocks({
vehicleBannerWrapper.vm.initializeComponent =
vehicleBanner.methods.initializeComponent;
+ const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
+ sideDoorOptionsWrapper.vm.initializeComponent =
+ sideDoorOptions.methods.initializeComponent;
+
+ const windshieldOptionsWrapper = wrapper.findComponent({
+ name: "windshieldOptions",
+ });
+
+ windshieldOptionsWrapper.vm.initializeComponent =
+ windshieldOptions.methods.initializeComponent;
+
const funnelSubHeaderWrapper = wrapper.findComponent({
name: "funnelSubHeader",
});
funnelSubHeaderWrapper.vm.initializeComponent =
funnelSubHeader.methods.initializeComponent;
- const driverSideOptionsWrapper = wrapper.findComponent({
+ const backGlassOptionsWrapper = wrapper.findComponent({
name: "replaceOptionsQuestion",
});
- driverSideOptionsWrapper.vm.initializeComponent =
+ backGlassOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9f6a38650..aa888e14a 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -3,8 +3,28 @@
-
-
+
+
+
+
@@ -15,8 +35,10 @@ import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
-import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
+import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -62,21 +84,42 @@ export default {
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
- vm.$refs.driverSideOptions.initializeComponent(
- resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
- );
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
+ vm.$refs.sideDoorOptions.initializeComponent(
+ resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+ );
+ vm.$refs.windshieldOptions.initializeComponent(
+ resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
+ resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+ );
+ vm.$refs.backGlassOptions.initializeComponent(
+ resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+ );
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
});
},
+ computed: {
+ isRearWindowDamageLocation() {
+ return this.selectedDamageLocations.some(selectedDamages =>
+ {
+ return selectedDamages.toUpperCase() === "REARWINDOW";
+ });
+ },
+ },
data(){
return {
selectedDamageLocations: [],
- driverSideOptionsData: [],
+ sideDoorOptionsData: {
+ selectedDoorSides: [],
+ selectedDriverSideReplaceOptions: [],
+ selectedPassengerSideReplaceOptions: []
+ },
+ selectedWindshieldOptions: [],
+ selectedRearReplaceOptions: [],
}
},
methods: {
@@ -100,8 +143,10 @@ export default {
funnelFooter,
vehicleBanner,
funnelSubHeader,
- replaceOptionsQuestion,
+ sideDoorOptions,
damageLocationQuestion,
+ windshieldOptions,
+ replaceOptionsQuestion,
},
};
diff --git a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
deleted file mode 100644
index 686f10de9..000000000
--- a/src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
new file mode 100644
index 000000000..123051d35
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-chip-count-question.vue", () => {
+ test("Selected chip count is emitted upon selection.", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({modelValueProp: ["One"]});
+
+ //Act
+ wrapper.setValue({ modelValue: ["Two"] });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.vm.selectedChipCountValues).toEqual(["One"]);
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Two"] }]);
+ });
+ });
+
+ describe("Windshield-chip-count-question.vue", () => {
+ test("Should display question and answers from api.", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent } = setupMocks({modelValueProp: ["One"]});
+
+ //Act
+ windshieldChipCountQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+
+ //Assert
+ expect(wrapper.vm.questionText).toStrictEqual("How many chips are we repairing?");
+ expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'One' }, { Name: 'Two' }, { Name: 'Three'} ]);
+ });
+ });
+
+ function setupMocks({
+ modelValueProp = ["Two"],
+ groupName = "WindshieldChipCountQuestion",
+ cmsQuestionText = "How many chips are we repairing?",
+ cmsAnswers = [{Name: "One"}, {Name: "Two"}, {Name: "Three"}],
+ dataFromStoreApi = [],
+ }) {
+
+ //Mock store
+ store.dispatch = jest.fn(() => dataFromStoreApi);
+ store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+ const mountOptions = getMountOptions({
+ store: {
+ dispatch: store.dispatch,
+ getters: store.getters,
+ },
+ });
+
+ //Mock props
+ mountOptions.propsData = {
+ modelValue: modelValueProp
+ };
+
+ const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions);
+
+ //Mock CMS content
+ const cmsContent = {
+ groupName: groupName,
+ QuestionText: cmsQuestionText,
+ Answers: cmsAnswers,
+ };
+ const damageOptions = dataFromStoreApi;
+ return { wrapper, cmsContent, damageOptions };
+ }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
new file mode 100644
index 000000000..347ee2fdf
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
new file mode 100644
index 000000000..3bb64d695
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js
@@ -0,0 +1,71 @@
+import { shallowMount } from "@vue/test-utils";
+import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("windshield-damage-type-question.vue", () => {
+ test("Selected chip count is emitted upon selection.", async () => {
+ //Arrange
+ const { wrapper } = setupMocks({modelValueProp: ["Repair"]});
+
+ //Act
+ wrapper.setValue({ modelValue: ["Replace"] });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.vm.selectedValues).toEqual(["Repair"]);
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Replace"] }]);
+ });
+ });
+
+ describe("windshield-damage-type-question.vue", () => {
+ test("Should display question and answers from api.", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent } = setupMocks({modelValueProp: ["Repair"]});
+
+ //Act
+ windshieldDamageTypeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent);
+
+ //Assert
+ expect(wrapper.vm.questionText).toStrictEqual("What's your windshield damage?");
+ expect(wrapper.vm.answersFromCms).toStrictEqual([ { Name: 'Repair' }, { Name: 'Replace' } ]);
+ });
+ });
+
+ function setupMocks({
+ modelValueProp = ["Two"],
+ groupName = "WindshieldDamageTypeQuestion",
+ cmsQuestionText = "What's your windshield damage?",
+ cmsAnswers = [{Name: "Repair"}, {Name: "Replace"}],
+ dataFromStoreApi = [],
+ }) {
+
+ //Mock store
+ store.dispatch = jest.fn(() => dataFromStoreApi);
+ store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
+ const mountOptions = getMountOptions({
+ store: {
+ dispatch: store.dispatch,
+ getters: store.getters,
+ },
+ });
+
+ //Mock props
+ mountOptions.propsData = {
+ modelValue: modelValueProp
+ };
+
+ const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions);
+
+ //Mock CMS content
+ const cmsContent = {
+ groupName: groupName,
+ QuestionText: cmsQuestionText,
+ Answers: cmsAnswers,
+ };
+ const damageOptions = dataFromStoreApi;
+ return { wrapper, cmsContent, damageOptions };
+ }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
new file mode 100644
index 000000000..8031db546
--- /dev/null
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
index 68cce08eb..ed214158e 100644
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@@ -1,26 +1,110 @@
-
+
+
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 133a4106e..b564b7e94 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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",
diff --git a/src/styles/common-animations.scss b/src/styles/common-animations.scss
new file mode 100644
index 000000000..92f5407ed
--- /dev/null
+++ b/src/styles/common-animations.scss
@@ -0,0 +1,12 @@
+.fade-enter-active{
+ transition: opacity 0.6s ease;
+}
+
+.fade-leave-active {
+ transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+ opacity: 0;
+}
\ No newline at end of file
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index 880d54acc..2c26e69d7 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -1,10 +1,10 @@
.has-error {
&.list-button,
&.list-card {
- border: 1px solid transparent;
+ border: 1px solid $gray-500;
color: $red;
label {
- border: 1px solid $red;
+ box-shadow: 0 0 1px $red;
border-radius: .5rem;
}
}
@@ -20,6 +20,31 @@
border: 1px solid $red;
}
}
+ &.ui-radio,
+ &.ui-checkbox {
+ input[type=checkbox],
+ input[type=radio],
+ input[type=radio]+label:before,
+ input[type=checkbox]+label:before {
+ border: 1px solid $red;
+ }
+ input[type=checkbox]:checked + label:before {
+ border: 1px solid $blue;
+ }
+ }
+ &.textbox-question,
+ &.dropdown-question {
+ p {
+ color: $red;
+ }
+ input,
+ select {
+ border: 1px solid $red;
+ &:focus {
+ border: 1px solid transparent;
+ }
+ }
+ }
}
.form-test-error {
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index bbdbbe134..ee5589a1d 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -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");
- });
});
diff --git a/src/ux-components/button-main/button-main.vue b/src/ux-components/button-main/button-main.vue
index 3b8b744f5..c1f65dac1 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -9,7 +9,6 @@
@@ -25,7 +24,6 @@ export default {
isDisabled: Boolean,
loaderColor: String,
loaderPosition: String,
- sizeInRem: [Number, String],
isFloat: Boolean,
},
data() {
@@ -56,6 +54,7 @@ export default {
border-radius: $border-radius-lg;
color: $white;
justify-content: center;
+ font-weight: 500;
&:hover {
background: linear-gradient(
270deg,
@@ -82,7 +81,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 +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;
@@ -118,10 +119,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;
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index ca30ab330..73eb562bf 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,15 @@
-