From ecae48e730984de777e02818f6c7e9bded515798 Mon Sep 17 00:00:00 2001 From: bmauger Date: Wed, 16 Feb 2022 17:04:39 -0500 Subject: [PATCH 1/5] Component-test page cleanup. --- src/layouts/component-test/component-test.vue | 1976 +++++++++-------- 1 file changed, 995 insertions(+), 981 deletions(-) diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 8812fe58a..062a6d608 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -1,57 +1,59 @@ - - + From b606dbcb0a2051574a7873f781b9db91f9551608 Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 17 Feb 2022 08:34:32 -0500 Subject: [PATCH 2/5] CSR-341 qa bug fix - z-index update. --- .../list-button-horizontal/list-button-horizontal.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index f934ca94d..18d6c586d 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -142,6 +142,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; @@ -158,7 +159,7 @@ export default { &:hover { box-shadow: 0 0 0 4px $blue-300; cursor: pointer; - z-index: 2; + z-index: 3 !important; } + p { display: none; From acd770db5e54e8d39ed56af649208f8678a990fd Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 17 Feb 2022 09:11:10 -0500 Subject: [PATCH 3/5] Fix bug with button loader/spinner. --- .../button-question/button-question.vue | 5 --- .../funnel-footer/funnel-footer.vue | 1 - src/layouts/component-test/component-test.vue | 40 ++----------------- .../button-main/button-main.spec.js | 23 ----------- src/ux-components/button-main/button-main.vue | 2 - .../list-button-horizontal.spec.js | 23 ----------- .../list-button-horizontal.vue | 2 - .../list-button/list-button.spec.js | 23 ----------- src/ux-components/list-button/list-button.vue | 2 - src/ux-components/loader/loader.vue | 9 +---- 10 files changed, 6 insertions(+), 124 deletions(-) diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 823ce79fd..e8cf4a967 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -22,7 +22,6 @@ :selectingInitiatesLoad="selectingInitiatesLoad" :loaderColor="loaderColor" :loaderPosition="loaderPosition" - :sizeInRem="sizeInRem" :isWide="isWide" :isRequired="isRequired" :buttonImage="answer.AnswerImageUrl" @@ -74,10 +73,6 @@ export default { type: String, default: "right", }, - sizeInRem: { - type: [String, Number], - default: 1.5, - }, isRequired: Boolean, isOverflowScrollable: Boolean, isWide: Boolean, diff --git a/src/common-components/funnel-footer/funnel-footer.vue b/src/common-components/funnel-footer/funnel-footer.vue index cd9ad0975..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" diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index 062a6d608..e18664bec 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -75,7 +75,7 @@ isPrimary buttonText="Primary" loaderColor="white" - sizeInRem="1" + /> @@ -85,7 +85,7 @@ isPrimary buttonText="Primary Disabled" loaderColor="white" - sizeInRem="1" + disabled /> @@ -95,7 +95,7 @@ @@ -104,7 +104,7 @@ @@ -390,7 +390,6 @@ textPosition="text-start" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" />
Checkbox with Error
@@ -431,7 +428,6 @@ textPosition="text-start" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" hasError /> @@ -456,7 +452,6 @@ textPosition="text-start" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" />
Radio Button with Error
@@ -494,7 +487,6 @@ textPosition="text-start" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" hasError /> @@ -525,7 +517,6 @@ textPosition="text-start" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" /> @@ -576,7 +565,6 @@ textPosition="text-start" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" /> @@ -633,7 +619,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" /> @@ -684,7 +667,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" screenReaderOnlyText=" opens new window" /> @@ -738,7 +718,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="1" screenReaderOnlyText=" opens new window" @@ -752,7 +731,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="2" screenReaderOnlyText=" opens new window" @@ -766,7 +744,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="3" screenReaderOnlyText=" opens new window" @@ -793,7 +770,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="1" screenReaderOnlyText=" opens new window" @@ -808,7 +784,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="2" screenReaderOnlyText=" opens new window" @@ -823,7 +798,6 @@ textPosition="text-center" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="3" screenReaderOnlyText=" opens new window" @@ -850,7 +824,6 @@ loaderEnabled="true" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="1" screenReaderOnlyText=" opens new window" @@ -864,7 +837,6 @@ loaderEnabled="true" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="2" screenReaderOnlyText=" opens new window" @@ -878,7 +850,6 @@ loaderEnabled="true" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="3" screenReaderOnlyText=" opens new window" @@ -905,7 +876,6 @@ loaderEnabled="true" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="1" screenReaderOnlyText=" opens new window" @@ -920,7 +890,6 @@ loaderEnabled="true" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="2" screenReaderOnlyText=" opens new window" @@ -935,7 +904,6 @@ loaderEnabled="true" loaderColor="blue" loaderPosition="right" - sizeInRem="1" v-bind:totalInGroup="3" v-bind:positionInGroup="3" screenReaderOnlyText=" opens new window" diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index bbdbbe134..f72040736 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -76,26 +76,3 @@ 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 2621d6bcd..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() { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index ba1f12d23..d1175620c 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -155,29 +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, - selectingInitiatesLoad: true, - }, - }); - - // Assert - - const label = wrapper.find("label"); - - wrapper.vm.handleCheckChange = jest.fn(); - 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, { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 18d6c586d..cc712e613 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -39,7 +39,6 @@ @@ -64,7 +63,6 @@ export default { selectingInitiatesLoad: Boolean, loaderColor: String, loaderPosition: String, - sizeInRem: [Number, String], isRequired: Boolean, value: { // Field initial value diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js index d643201ef..1e900ce62 100644 --- a/src/ux-components/list-button/list-button.spec.js +++ b/src/ux-components/list-button/list-button.spec.js @@ -153,29 +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, - selectingInitiatesLoad: true, - }, - }); - - // Assert - - const label = wrapper.find("label"); - - wrapper.vm.handleCheckChange = jest.fn(); - 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, { diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 4c3e2d7b3..3c5c4c27e 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -42,7 +42,6 @@ @@ -67,7 +66,6 @@ export default { selectingInitiatesLoad: Boolean, loaderColor: String, loaderPosition: String, - sizeInRem: [Number,String], value: { // Field initial value type: [String, Number], diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index 247e15665..9b3473eb1 100644 --- a/src/ux-components/loader/loader.vue +++ b/src/ux-components/loader/loader.vue @@ -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]" > @@ -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% { From 5a31488294b64da05aa5fb6a056b1b28e7b996a5 Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 17 Feb 2022 09:21:43 -0500 Subject: [PATCH 4/5] Fix unit test. --- src/ux-components/button-main/button-main.spec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js index f72040736..ee5589a1d 100644 --- a/src/ux-components/button-main/button-main.spec.js +++ b/src/ux-components/button-main/button-main.spec.js @@ -76,3 +76,4 @@ describe("buttonMain.vue", () => { expect(loader.attributes("class")).toContain("right"); }); +}); From 9e1273375676868f99ada56b9b84c45c274ce9cd Mon Sep 17 00:00:00 2001 From: bmauger Date: Thu, 17 Feb 2022 13:59:40 -0500 Subject: [PATCH 5/5] CSR-342 WIP & QA fix. --- jest.config.js | 1 + src/layouts/nested-radio-poc/nested-radio.vue | 27 +++++++++++++++++++ src/router/index.js | 6 +++++ .../list-button-horizontal.vue | 2 ++ 4 files changed, 36 insertions(+) create mode 100644 src/layouts/nested-radio-poc/nested-radio.vue diff --git a/jest.config.js b/jest.config.js index b8beb88cc..4a2601c8f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -16,6 +16,7 @@ module.exports = { "!src/layouts/vehicle-damage/windshield-damage-type-question/windshield-damage-type-question.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/address-poc/address-poc.vue", + "!src/layouts/nested-radio-poc/nested-radio.vue", ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], coverageThreshold: { 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..6d05c4009 --- /dev/null +++ b/src/layouts/nested-radio-poc/nested-radio.vue @@ -0,0 +1,27 @@ + + + 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/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index cc712e613..52cad7e91 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -133,9 +133,11 @@ export default { height: 0; &:focus-visible + label { box-shadow: 0 0 0 2px $blue; + z-index: 3; } &:focus + label { box-shadow: 0 0 0 2px $blue; + z-index: 3; } &:checked + label { background: $blue-100;