From 93e576a012cc62dfe49aa1521faa840eccdf0adf Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 26 Oct 2022 10:02:41 -0400 Subject: [PATCH] commit --- src/App.vue | 8 +- .../button-question/button-question.spec.js | 77 +-------- src/layouts/vehicle-year/vehicle-year.spec.js | 0 .../year-question/year-question.spec.js | 0 src/styles/common-error-styles.scss | 151 ++++++++++++++++++ src/styles/common-styles.scss | 60 +++++++ src/styles/common-typography-styles.scss | 67 ++++++++ src/ux-components/radio/radio.spec.js | 1 - 8 files changed, 285 insertions(+), 79 deletions(-) delete mode 100644 src/layouts/vehicle-year/vehicle-year.spec.js delete mode 100644 src/layouts/vehicle-year/year-question/year-question.spec.js create mode 100644 src/styles/common-error-styles.scss create mode 100644 src/styles/common-styles.scss create mode 100644 src/styles/common-typography-styles.scss diff --git a/src/App.vue b/src/App.vue index 2284217c..554b3117 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,9 @@ \ No newline at end of file diff --git a/src/common-components/button-question/button-question.spec.js b/src/common-components/button-question/button-question.spec.js index 3002920e..ae556efe 100644 --- a/src/common-components/button-question/button-question.spec.js +++ b/src/common-components/button-question/button-question.spec.js @@ -1,6 +1,5 @@ import { shallowMount } from "@vue/test-utils"; import buttonQuestion from "@/common-components/button-question/button-question"; -import { getMountOptions } from "@/helpers/unit-test-helper.js"; jest.mock("@/store", () => { return {}; }, { virtual: true }); @@ -111,80 +110,8 @@ describe("buttonQuestion.vue", () => { }); }); -describe("buttonQuestion.vue", () => { - it("Should trigger event modelValue change to new value on when radio button selected", async () => { - // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({propsData: {groupName: "group-name"}})); - await wrapper.setProps({ - answers: ["2022", "2021", "2020"], - isMultiSelect: false, - modelValue: [] - }); - const val = { checkValue: true, value: "2021", } - wrapper.vm.handleCheckedChanged(val); - // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should add values to array on checkbox click", () => { - // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({ - propsData: { - modelValue: ["2022", "2021", "2020"], - isMultiSelect: true, - groupName: "group-name" - } - })); - const val = { checkValue: true, value: "2019", } - wrapper.vm.handleCheckedChanged(val); - // Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should add a value to this.selectedValues if prop isMultiSelect is true, checkValue is true and this.selectedValues already exists", () => { - // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({ - propsData: { - isMultiSelect: true, - modelValue: ['a', 'b'], - groupName: "group-name" - } - })); - const val = { checkValue: true, value: "2021", } - wrapper.vm.handleCheckedChanged(val); - - // Assert - expect(wrapper.vm.selectedValues).toEqual(["a", "b", "2021"]); - }); -}); - -describe("buttonQuestion.vue", () => { - it("Should remove a value to this.selectedValues if prop isMultiSelect is true, checkValue is false and this.selectedValues already exists", () => { - // Act - const wrapper = shallowMount(buttonQuestion, setupMocks({ - propsData: { - isMultiSelect: true, - modelValue: ['a', 'b'], - groupName: "group-name" - } - })); - - const val = { checkValue: false, value: "a", } - wrapper.vm.handleCheckedChanged(val); - - // Assert - expect(wrapper.vm.selectedValues).toEqual(["b"]); - }); -}); - function setupMocks(mountOptionsMockData = {}) { - const defaultMountOptions = { route: { query: { fmgPage: 'page-name' } } }; - const baseMountOptions = getMountOptions(Object.assign(defaultMountOptions, mountOptionsMockData)); - const allMountOptions = Object.assign(defaultMountOptions, baseMountOptions); + const defaultMountOptions = { route: { query: { issPage: 'page-name' } } }; - return allMountOptions; + return defaultMountOptions; } diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss new file mode 100644 index 00000000..def634dc --- /dev/null +++ b/src/styles/common-error-styles.scss @@ -0,0 +1,151 @@ +html { + .has-error { + &.list-button, + &.list-card, + &.list-card.list-button { + border: none; + color: $red; + input[type=checkbox]:focus + label, + input[type=radio]:focus + label { + box-shadow: 0 0 0 2.5px $red; + } + input[type=checkbox]:checked + label { + box-shadow: 0 0 0 1px $red; + } + &:hover { + box-shadow: 0px 0px 0px 4px $red-200; + border-radius: .5rem; + } + label { + border: 1px solid $red; + border-radius: .5rem; + } + label:hover { + box-shadow: 0px 0px 0px 4px $red-200; + border-radius: 10px; + border: 1px solid $red; + } + } + &.list-button-horizontal { + color: $red; + label { + border: 1px solid $red; + &:hover { + box-shadow: 0px 0px 0px 4px $red-200; + } + } + input[type=checkbox]:focus + label, + input[type=radio]:focus + label { + box-shadow: 0 0 1px $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; + background-color: initial; + } + input[type=checkbox]:checked + label:before { + border: 1px solid $blue; + } + } + &.textbox-question, + &.dropdown-question { + input:hover { + box-shadow: 0px 0px 0px 4px $red-200; + border-radius: .5rem; + border: 1px solid $red; + } + input:focus { + box-shadow: 0 0 0 2.5px $red; + } + p { + color: $red; + } + input, + select { + border: 1px solid transparent; + box-shadow: 0 0 0 1px $red; + &:focus { + border: 1px solid transparent; + } + } + select { + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 0.75rem center; + background-size: 16px 12px; + } + } + } + //Restore to default style if alert box is present + .alertError { + .has-error { + &.list-button, + &.list-card { + border: 1px solid $gray-500; + input:not(:focus) { + + label { + border: none; + box-shadow: 0 0 0 1px $gray-500; + border-radius: .5rem; + } + } + input:checked:focus { + + label { + border: none; + box-shadow: 0 0 0 2.5px $blue; + border-radius: .5rem; + } + } + input:checked:not(:focus) { + + label { + box-shadow: 0 0 0 1px $blue; + border-radius: .5rem; + } + } + input:focus { + border: 1px solid $gray-500; + + label { + box-shadow: 0 0 0 2.5px transparent; + } + } + &:hover { + box-shadow: 0 0 0 4px $blue-300; + + label { + box-shadow: 0 0 0 2.5px transparent; + border: 1px solid $blue; + } + } + } + } + } + + .form-test-error { + color: $red; + font-size: .875rem; + font-weight: 500; + } + + .form-test-invalid { + &.btn.btn-primary { + color: $gray-600; + background: $gray-200; + cursor: pointer; + pointer-events: all; + font-weight: $font-weight-normal; + } + &.btn.btn-primary:hover { + background: $gray-200; + box-shadow: none; + } + &.btn.btn-primary:focus, + &.btn.btn-primary:focus-visible { + box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700; + } + } + } + \ No newline at end of file diff --git a/src/styles/common-styles.scss b/src/styles/common-styles.scss new file mode 100644 index 00000000..a516165f --- /dev/null +++ b/src/styles/common-styles.scss @@ -0,0 +1,60 @@ +// Common/Global Styles +// Use this file for global styles that don't or won't have their own stylesheet +body { + font-size: 16px; + background-color: #fff; + color: #4D5151; + .container-fluid { + max-width: 576px; //Remove once desktop app is complete + &.container-shadow { + box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15); //Use instead of Bootstrap's helper + } + &.make-tall { + height: 100vh; + display: flex; + flex-direction: column; + } + .prevent-squish{ + overflow-x: unset; + } + } + .pointer { + cursor: pointer; + } + .container, + .container-fluid { + overflow-x: hidden; + } + + .sub-container{ + &.make-tall { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + } + } + + .sr-only { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + } + + .page-container-grouped-styles { + @extend .container-fluid, .shadow, .rounded-3, .p-2, .position-relative, .make-tall, .px-5; + } + + //Footer modal backdrop adjustments for positioning + .modal-backdrop { + left: 50%; + transform: translateX(-50%); + max-width: 576px; + height: calc(100% - 72px); + } + + } + \ No newline at end of file diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss new file mode 100644 index 00000000..9ee9aa28 --- /dev/null +++ b/src/styles/common-typography-styles.scss @@ -0,0 +1,67 @@ +//Typography +p, +body { + font-size: 1rem; + line-height: 1.625; + font-weight: 400; +} + +//Headings +//add helper fw-bold to any element to get bold style (500) +h1,.h1 { + line-height: 1.325; + font-weight: 300; +} +h2,.h2 { + line-height: 1.325; + font-weight: 300; +} +h3,.h3 { + line-height: 1.375; + font-weight: 300; +} +h4,.h4 { + line-height: 1.6; + font-weight: 300; +} +h5,.h5 { + line-height: 1.325; + font-weight: 400; +} +h6,.h6 { + line-height: 1.7; + letter-spacing: .75px; + text-transform: uppercase; +} + +.small { + font-size: .875rem; + line-height: 1.7; + font-weight: 400; +} + +label, +.label { + font-size: 1rem; + line-height: 1.5; + font-weight: 400; +} + +caption, +.caption { + font-size: .75rem; + line-height: 1.7; + font-weight: 400; +} + + +// Font size +.fs-5 { + line-height: 2; +} + +.fs-6 { + font-size: 1rem !important; + line-height: 1.4; + font-weight: 500; +} \ No newline at end of file diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js index e5e5c7d3..bf2594e0 100644 --- a/src/ux-components/radio/radio.spec.js +++ b/src/ux-components/radio/radio.spec.js @@ -82,7 +82,6 @@ describe("radio.vue", () => { wrapper.vm.handleCheckChange(); // Assert expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{"buttonID": "List Card Checkbox", value: "List Card Checkbox", checkValue: false}]);; - expect(wrapper.vm.pushEventToGA).toHaveBeenCalled(); }); it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {