+
{
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,
}
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index 949f4811b..0e47eb37f 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -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",
});
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 9f6a38650..8a85de6b5 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -4,7 +4,8 @@
-
+
+
@@ -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: {
diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue
index 9fb2d6ea1..bc8ce5f9f 100644
--- a/src/layouts/vehicle-make/make-question/make-question.vue
+++ b/src/layouts/vehicle-make/make-question/make-question.vue
@@ -2,11 +2,11 @@
diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue
index e79b8bafc..1876630ef 100644
--- a/src/layouts/vehicle-model/model-question/model-question.vue
+++ b/src/layouts/vehicle-model/model-question/model-question.vue
@@ -2,11 +2,11 @@
diff --git a/src/layouts/vehicle-style/style-question/style-question.vue b/src/layouts/vehicle-style/style-question/style-question.vue
index bfec78571..a923c9128 100644
--- a/src/layouts/vehicle-style/style-question/style-question.vue
+++ b/src/layouts/vehicle-style/style-question/style-question.vue
@@ -2,11 +2,11 @@
diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue
index 96d047244..97c2ab618 100644
--- a/src/layouts/vehicle-year/year-question/year-question.vue
+++ b/src/layouts/vehicle-year/year-question/year-question.vue
@@ -2,11 +2,11 @@
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-error-styles.scss b/src/styles/common-error-styles.scss
index 331c508a5..2ca852f66 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -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;
}
-}
\ No newline at end of file
+}
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 975babe17..c1f65dac1 100644
--- a/src/ux-components/button-main/button-main.vue
+++ b/src/ux-components/button-main/button-main.vue
@@ -1,16 +1,14 @@
@@ -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;
}
}
}
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 @@
-