Merge branch 'develop' into feature/CSR-270

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: {

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,

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"

src/layouts/component-test/component-test.vue

@@ -1,4 +1,4 @@
-<template>
+  <template>
     <div class="container-fluid container-shadow p-2 rounded-3">
       <div class="row my-4">
         <div class="col">
@@ -13,7 +13,8 @@
           tabIndex="1"
           checkboxLabel="I'm a checkbox"
           />
-        <p class="my-3">With Error:</p>
+          <p class="mt-3 mb-0">With Error:</p>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
           <checkbox
           checkboxName="demo checkbox"
           buttonID="checkbox-2"
@@ -50,7 +51,8 @@
       </div>
       <div class="row">
         <div class="col">
-        <p class="my-3">With Error:</p>
+          <p class="mt-3 mb-0">With Error:</p>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
           <radio
           groupName="radio-demo-3"
           buttonLabel="Error!"
@@ -73,7 +75,7 @@
           isPrimary
           buttonText="Primary"
           loaderColor="white"
-          sizeInRem="1"
+
           />
         </div>
       </div>
@@ -83,7 +85,7 @@
           isPrimary
           buttonText="Primary Disabled"
           loaderColor="white"
-          sizeInRem="1"
+
           disabled
           />
         </div>
@@ -93,7 +95,7 @@
           <buttonMain
           buttonText="Secondary"
           loaderColor="white"
-          sizeInRem="1"
+
           />
         </div>
       </div>
@@ -102,7 +104,7 @@
           <buttonMain
           buttonText="Secondary Disabled"
           loaderColor="white"
-          sizeInRem="1"
+
           disabled
           />
         </div>
@@ -146,7 +148,7 @@
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
+          <h6 class="mx-0 px-0 my-0">Functioning as Checkbox</h6>
         </div>
       </div>
       <div class="row g-2">
@@ -167,7 +169,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Checkbox No Description</h6>
+          <h6 class="mx-0 px-0 my-4">Checkbox No Description</h6>
           <fieldset>
             <legend class="sr-only">Checkbox no Description</legend>
             <listCard
@@ -184,7 +186,8 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Checkbox with Error</h6>
+          <h6 class="mx-0 px-0 mt-4 mb-0">Checkbox with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
           <fieldset>
             <legend class="sr-only">Checkbox with Error</legend>
             <listCard
@@ -202,7 +205,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Functioning as Radio Button</h6>
+          <h6 class="mx-0 px-0 my-4">Functioning as Radio Button</h6>
           <fieldset>
             <legend class="sr-only">Functioning as Radio Button</legend>
             <listCard
@@ -219,7 +222,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
           <fieldset>
             <legend class="sr-only">Radio Button no Description</legend>
             <listCard
@@ -236,7 +239,8 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+          <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
           <fieldset>
             <legend class="sr-only">Radio Button with Error</legend>
             <listCard
@@ -254,7 +258,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Horizontal as Checkbox</h6>
+          <h6 class="mx-0 px-0 my-4">Horizontal as Checkbox</h6>
           <fieldset>
             <legend class="sr-only">Horizontal Checkbox</legend>
             <listCard
@@ -272,7 +276,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Checkbox no Description</h6>
+          <h6 class="mx-0 px-0 my-4">Checkbox no Description</h6>
           <fieldset>
             <legend class="sr-only">Checkbox no Description</legend>
             <listCard
@@ -290,7 +294,8 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
           <fieldset>
             <legend class="sr-only">Horizontal with Error</legend>
             <listCard
@@ -309,7 +314,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Horizontal as Radio Button</h6>
+          <h6 class="mx-0 px-0 my-4">Horizontal as Radio Button</h6>
           <fieldset>
             <legend class="sr-only">Horizontal Radio Button</legend>
             <listCard
@@ -326,7 +331,7 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Radio Button no Description</h6>
+          <h6 class="mx-0 px-0 my-4">Radio Button no Description</h6>
           <fieldset>
             <legend class="sr-only">Radio Button no Description</legend>
             <listCard
@@ -343,7 +348,8 @@
       </div>
       <div class="row g-2">
         <div class="col">
-        <h6 class="mx-2 my-4">Horizontal with Error</h6>
+          <h6 class="mx-0 px-0 mt-4 mb-0">Horizontal with Error</h6>
+          <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
           <fieldset>
             <legend class="sr-only">Horizontal with Error</legend>
             <listCard
@@ -362,7 +368,7 @@
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+          <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
         </div>
       </div>
       <div class="row">
@@ -384,7 +390,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-          sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <listButton
@@ -397,7 +402,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-          sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
         <listButton
@@ -410,10 +414,10 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-          sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         />
-        <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+        <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
+        <small class="d-flex align-self-start">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
         <listButton
         isMultiSelect
         groupName="demo-2"
@@ -424,7 +428,6 @@
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-          sizeInRem="1"
         screenReaderOnlyText=" opens new window"
         hasError
         />
@@ -437,7 +440,7 @@
       aria-labelledby="demo-1-checkbox-group"
       class="col my-3 d-flex flex-column"
       >
-        <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
       <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
       <h3 class="sr-only" id="demo-1-checkbox-group">Select Vehicle Year</h3>
       <listButton
@@ -449,7 +452,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -461,7 +463,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -473,10 +474,10 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
-        <h6 class="mx-2 my-4">Radio Button with Error</h6>
+      <h6 class="mx-0 px-0 mt-4 mb-0">Radio Button with Error</h6>
+      <small>(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
       <listButton
       groupName="demo-1-checkbox"
       ariaLabelBy="vehicle-year"
@@ -486,7 +487,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       hasError
       />
@@ -495,7 +495,7 @@
   <div class="row my-4">
     <div class="col">
       <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
     </div>
   </div>
     <div class="row">
@@ -517,7 +517,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -530,7 +529,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -543,14 +541,14 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
   </div>
   <div class="row">
+    <div class="col">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+      <h6 class="mx-0 px-0 my-0">Functioning as Radio Buttons</h6>
       <div
       role="radiogroup"
       aria-labelledby="demo-2-checkbox-group"
@@ -567,7 +565,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -579,7 +576,6 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -591,17 +587,17 @@
       textPosition="text-start"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
   </div>
+  </div>
   <div class="row my-4">
     <div class="col">
       <h4 class="m-0 p-2 bg-light rounded">
         List Button - Multi-Line Centered
       </h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
     </div>
   </div>
   <div class="row">
@@ -623,7 +619,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
     <listButton
@@ -636,7 +631,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
     <listButton
@@ -649,14 +643,14 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     screenReaderOnlyText=" opens new window"
     />
   </div>
   </div>
   <div class="row">
+    <div class="col">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+      <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
       <div
       role="radiogroup"
       aria-labelledby="demo-3-checkbox-group"
@@ -673,7 +667,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -685,7 +678,6 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
       <listButton
@@ -697,15 +689,15 @@
       textPosition="text-center"
       loaderColor="blue"
       loaderPosition="right"
-          sizeInRem="1"
       screenReaderOnlyText=" opens new window"
       />
     </div>
   </div>
+  </div>
   <div class="row my-4">
     <div class="col">
       <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
-        <h6 class="mx-2 my-0">Functioning as Checkboxes</h6>
+      <h6 class="mx-0 px-0 my-0">Functioning as Checkboxes</h6>
     </div>
   </div>
   <div class="row px-3">
@@ -726,7 +718,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -740,7 +731,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -754,7 +744,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -762,7 +751,8 @@
   </div>
   </div>
   <div class="row px-3">
-      <h6 class="mx-2 my-4 d-flex align-self-start">Checkbox with Error</h6>
+    <h6 class="mx-0 px-0 mt-4 mb-0 d-flex align-self-start">Checkbox with Error</h6>
+    <small class="p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
     <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
     <div
     role="radiogroup"
@@ -780,7 +770,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -795,7 +784,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -810,7 +798,6 @@
     textPosition="text-center"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -820,7 +807,7 @@
   </div>
   <div class="row px-3">
     <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
-      <h6 class="mx-2 my-0">Functioning as Radio Buttons</h6>
+    <h6 class="mx-0 my-0 p-0">Functioning as Radio Buttons</h6>
     <div
     role="radiogroup"
     aria-labelledby="demo-4-checkbox-group"
@@ -837,7 +824,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -851,7 +837,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -865,7 +850,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -873,7 +857,8 @@
   </div>
   </div>
   <div class="row px-3">
-      <h6 class="mx-2 my-4 d-flex align-self-start">Radio Button with Error</h6>
+    <h6 class="mx-0 mt-4 mb-0 p-0 d-flex align-self-start">Radio Button with Error</h6>
+    <small class="m-0 p-0">(NOTE: Error states are styled only and not a demo of the full functionality.)</small>
     <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
     <div
     role="radiogroup"
@@ -891,7 +876,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="1"
     screenReaderOnlyText=" opens new window"
@@ -906,7 +890,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="2"
     screenReaderOnlyText=" opens new window"
@@ -921,7 +904,6 @@
     loaderEnabled="true"
     loaderColor="blue"
     loaderPosition="right"
-          sizeInRem="1"
     v-bind:totalInGroup="3"
     v-bind:positionInGroup="3"
     screenReaderOnlyText=" opens new window"
@@ -1046,19 +1028,19 @@
     </div>
   </div>
   </div>
-</template>
+  </template>
 
-<script>
+  <script>
-import buttonMain from "@/ux-components/button-main/button-main";
+  import buttonMain from "@/ux-components/button-main/button-main";
-import buttonBack from "@/common-components/button-back/button-back";
+  import buttonBack from "@/common-components/button-back/button-back";
-import listCard from "@/ux-components/list-card/list-card";
+  import listCard from "@/ux-components/list-card/list-card";
-import listButton from "@/ux-components/list-button/list-button";
+  import listButton from "@/ux-components/list-button/list-button";
-import alert from "@/ux-components/alert/alert";
+  import alert from "@/ux-components/alert/alert";
-import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+  import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
-import checkbox from "@/ux-components/checkbox/checkbox";
+  import checkbox from "@/ux-components/checkbox/checkbox";
-import radio from "@/ux-components/radio/radio";
+  import radio from "@/ux-components/radio/radio";
-import textLink from "@/ux-components/text-link/text-link";
+  import textLink from "@/ux-components/text-link/text-link";
-export default {
+  export default {
     name: "App",
     components: {
       buttonMain,
@@ -1162,5 +1144,5 @@ export default {
         ],
       };
     },
-};
+  };
-</script>
+  </script>

src/layouts/nested-radio-poc/nested-radio.vue

@@ -0,0 +1,27 @@
+<template>
+<h5>POC</h5>
+
+</template>
+
+<script>
+
+import listCard from "@/ux-components/list-card/list-card";
+import radio from "@/ux-components/radio/radio";
+
+export default {
+  name: "nestedRadio",
+  props: {
+    groupName: String,
+    buttonLabel: String,
+    buttonID: String,
+    isRequired: Boolean,
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    screenReaderOnlyText: String,
+    hasError: Boolean,
+  },
+};
+
+</script>

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",

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");
-  });
 });

src/ux-components/button-main/button-main.vue

@@ -9,7 +9,6 @@
     <loader
       class="ms-2"
       v-if="isLoaderDisplayed"
-      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
       v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </button>
@@ -25,7 +24,6 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
     isFloat: Boolean,
   },
   data() {

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, {

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -13,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
     <label
       tabindex="-1"
@@ -39,7 +39,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
         :class="[loaderColor, loaderPosition]"
       />
     </label>
@@ -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;

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, {

src/ux-components/list-button/list-button.vue

@@ -13,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="!selectingInitiatesLoad ? handleCheckChange : ''"
+      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
     <label
       tabindex="-1"
@@ -42,7 +42,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
         :class="[this.loaderColor, this.loaderPosition]"
       />
     </label>
@@ -67,7 +66,6 @@ export default {
     selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String],
     value: {
     // Field initial value
       type: [String, Number],

src/ux-components/list-card/list-card.vue

@@ -13,7 +13,7 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
-        @change="handleCheckChange"
+        @change="handleCheckChange()"
       />
       <label
         :for="buttonID"

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]"
   ></div>
 </template>
@@ -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%;
+    width: 1rem;
-    height: 100%;
+    height: 1rem;
     animation: rotation 1s infinite linear;
     @keyframes rotation {
       100% {

src/ux-components/radio/radio.vue

@@ -9,7 +9,7 @@
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged"
+    @change="handleCheckChanged()"
     />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>