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/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index c14c027b9..4ca468502 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 8812fe58a..e18664bec 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -1,57 +1,59 @@ - - + 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/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 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 f934ca94d..52cad7e91 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 @@ -135,13 +133,16 @@ 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; 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; 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% {