diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 630b2dd3d..417230464 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -7,9 +7,9 @@
{{groupName}}
- diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index 7df1b3994..05409f738 100644 --- a/src/common-components/funnel-footer/funnel-footer.vue +++ b/src/common-components/funnel-footer/funnel-footer.vue @@ -28,7 +28,12 @@ />
- +
@@ -73,10 +78,10 @@ export default { this.buttonText = cmsContent.ForwardButtonText; }, buttonClick() { - this.$emit("forwardClicked"); + this.$emit("ForwardClicked"); }, linkClick() { - this.$emit("backClicked"); + this.$emit("BackClicked"); }, } }; diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index e20892105..3f1ae5ad9 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -2,7 +2,7 @@
-

Inputs

+

Checkbox

@@ -15,6 +15,36 @@ />
+
+
+

Radio Button

+

Sample radio button group

+
+
+
+
+ +
+
+ +
+

Buttons

@@ -50,14 +80,17 @@





-
- - - - - - - - - + + +
@@ -59,11 +17,6 @@ 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 damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question"; -import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options"; -import alert from "@/ux-components/alert/alert"; - -import { Form } from 'vee-validate'; - // Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; @@ -127,15 +80,12 @@ export default { } }, components: { - Form, funnelHeader, vehicleBanner, funnelSubHeader, damageLocationQuestion, replaceOptionsQuestion, funnelFooter, - windshieldOptions, - alert, }, methods: { arePagePrerequisitesValid() { @@ -145,24 +95,21 @@ export default { // Invokes store.dispatch(storeActions.RESET_PARTS_AND_DEPS); }, - onSubmit(values) { - window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2)) - console.log('submitted: ', JSON.stringify(values, null ,2)); - }, - onInvalidSubmit({ values, errors, results }) { - // identify the first error field and put focus on it - console.log("values: ", values); - console.log("errors: ", errors); - console.log("results: ", results); - // get error names array - const errorNames = errors ? Object.keys(errors) : []; - const firstErrorEl = errorNames[0]; - if (firstErrorEl) { - console.log('firstErrorEl: ', firstErrorEl); - const qsString = "[data-focus-target='" + firstErrorEl + "']"; - document.querySelector(qsString).focus(); - } + backButtonAction() { + // route to move backwards + this.$router.navigate( + this.navigationScenarios.CLICKED_BACK, + this.$route + ); }, }, + components: { + funnelHeader, + funnelFooter, + vehicleBanner, + funnelSubHeader, + replaceOptionsQuestion, + damageLocationQuestion, + }, }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 17f05b304..88c47563c 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -50,6 +50,15 @@ const routingTable = [ }, ], }, + { + fmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.VEHICLE_STYLE, + }, + ], + }, ]; export { routingTable }; diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue index dca64e689..ca30ab330 100644 --- a/src/ux-components/checkbox/checkbox.vue +++ b/src/ux-components/checkbox/checkbox.vue @@ -44,12 +44,15 @@ export default { + label { display: block; position: relative; + &:hover { + cursor: pointer; + } } + label::before { content: ""; position: relative; display: inline-block; - margin-right: 10px; + margin-right: 8px; width: 16px; height: 16px; background: white; @@ -71,7 +74,7 @@ export default { transform: rotate(-45deg); } &:hover + label::before { - box-shadow: 0 0 0 4px $blue-100; + box-shadow: 0 0 0 4px $blue-300; } &:focus + label::before { box-shadow: 0 0 0 2px $blue; diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js new file mode 100644 index 000000000..a7c3318ed --- /dev/null +++ b/src/ux-components/radio/radio.spec.js @@ -0,0 +1,63 @@ +import { shallowMount } from "@vue/test-utils"; +import radio from "./radio"; +import { nextTick } from "vue"; + +describe("radio.vue", () => { + it("Should return group name", async () => { + // Act + const wrapper = shallowMount(radio, { + propsData: { + groupName: "radio-button-test", + }, + }); + + // Assert + const input = wrapper.find("input"); + + // Expect + expect(input.attributes().name).toEqual("radio-button-test"); + }); + + it("Should return checkbox id", async () => { + // Act + const wrapper = shallowMount(radio, { + propsData: { + buttonID: "Radio ID", + }, + }); + + // Assert + const input = wrapper.find("input"); + + // Expect + expect(input.attributes().id).toEqual("Radio ID"); + }); + + it("Should return label text", async () => { + // Act + const wrapper = shallowMount(radio, { + propsData: { + buttonLabel: "label text", + }, + }); + + // Assert + const paragraph = wrapper.find("p"); + + expect(paragraph.text()).toEqual("label text"); + }); + + it("Should return label text", async () => { + // Act + const wrapper = shallowMount(radio, { + propsData: { + screenReaderOnlyText: "screenreader text", + }, + }); + + // Assert + const paragraph = wrapper.find("span"); + + expect(paragraph.text()).toEqual("screenreader text"); + }); +}); diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue new file mode 100644 index 000000000..5d5da19f7 --- /dev/null +++ b/src/ux-components/radio/radio.vue @@ -0,0 +1,138 @@ + + + + + diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue index 2297b9c71..a03fc52a6 100644 --- a/src/ux-components/text-link/text-link.vue +++ b/src/ux-components/text-link/text-link.vue @@ -13,11 +13,10 @@ export default { text: String, href: { type: String, - default: `javascript:void(0)`, //Prevents page jump when value is empty or # }, }, methods: { - handleClick() { + handleClick(event) { this.$emit("click-event"); }, },