Merge branch 'develop' into feature/CSR-335

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.spec.js

@@ -3,12 +3,14 @@ import buttonQuestion from "@/common-components/button-question/button-question"
 import { nextTick } from "vue";
 
 describe("buttonQuestion.vue", () => {
-  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
+  it("Should show overflow classes on fieldset if isOverflowScrollable is true", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      isOverflowScrollable: true,
+        isOverflowScrollable: true,
+      }
     });
+
     // Assert
     const fieldSet = wrapper.find('fieldset');
     expect(fieldSet.classes()).toContain("overflow-scroll");
@@ -16,11 +18,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain row if button type is listCard", async () => {
+  it("Fieldset classes should contain row if button type is listCard", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      buttonType: "listCard",
+        buttonType: "listCard",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -29,11 +32,12 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
+  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      buttonType: "listButtonHorizontal",
+        buttonType: "listButtonHorizontal",
+      }
     });
     // Assert
     const Div = wrapper.find('fieldset div');
@@ -57,12 +61,13 @@ describe("buttonQuestion.vue", () => {
 });
 
 describe("buttonQuestion.vue", () => {
-  it("Should add values to array on checkbox click", async () => {
+  it("Should add values to array on checkbox click", () => {
     // Act
-    const wrapper = shallowMount(buttonQuestion);
+    const wrapper = shallowMount(buttonQuestion, {
-    await wrapper.setProps({
+      propsData: {
-      modelValue: ["2022", "2021", "2020"],
+        modelValue: ["2022", "2021", "2020"],
-      isMultiSelect: true
+        isMultiSelect: true,
+      }
     });
     const val = {isChecked: true, buttonId: "2019", }
     wrapper.vm.handleCheckedChanged(val);

src/common-components/button-question/button-question.vue

@@ -19,17 +19,16 @@
               :textPosition="textPosition"
               :isMultiSelect="isMultiSelect"
               :groupName="groupName"
-              :loaderEnabled="loaderEnabled"
+              :selectingInitiatesLoad="selectingInitiatesLoad"
               :loaderColor="loaderColor"
               :loaderPosition="loaderPosition"
-              :sizeInRem="sizeInRem"
               :isWide="isWide"
               :isRequired="isRequired"
               :buttonImage="answer.AnswerImageUrl"
               :buttonImageId="answer.ImageId"
               :altText="answer.Name ? answer.Name : answer"
               screenReaderOnlyText="(opens new window)"
-              :colLength="this.answers.length < 3 ? '' : '-4'"
+              :colLength="getColLength"
               :selectedButtonIDs="selectedValues"
               data-test="button"
               :validationRules="validationRules"
@@ -37,7 +36,7 @@
           </div>
       </fieldset>
     </div>
-    <div class="row px-3 my-6 form-test-error" v-if="!suppressError">
+    <div class="row mt-2 form-test-error" v-if="!suppressError">
         <error-message :name="groupName"></error-message>
     </div>
   </div>
@@ -65,7 +64,7 @@ export default {
       type: String,
       default: "text-center",
     },
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: {
       type: String,
       default: "blue",
@@ -74,17 +73,11 @@ export default {
       type: String,
       default: "right",
     },
-    sizeInRem: {
-      type: [String, Number],
-      default: 1.5,
-    },
     isRequired: Boolean,
     isOverflowScrollable: Boolean,
     isWide: Boolean,
     modelValue: Array,
     validationRules: String,
-    name: String,
-    value: String,
     suppressError: Boolean,
   },
   computed: {
@@ -111,6 +104,13 @@ export default {
       }
       return classes;
     },
+    getColLength(){
+      if(this.isWide) {
+        return "12"
+      } else {
+        return this.answers.length < 3 ? '' : '-4';
+      }
+    },
     selectedValues: {
       get: function() {
         return this.modelValue;
@@ -120,17 +120,7 @@ export default {
       }
     },
   },
-  mounted(){
-    if(Array.isArray(this.answers) && this.answers.length === 1) {
-      const newSelectedValues = this.selectedValues;
-      newSelectedValues.push(typeof(this.answers[0]) === 'object' ? this.answers[0].Name : this.answers[0]);
-      this.selectedValues = newSelectedValues;
-    }
-  },
   methods: {
-    chooseAnswer(answer) {
-      this.$emit("update:modelValue", answer);
-    },
     handleCheckedChanged(val) {
       if(this.isMultiSelect) {
         // Add or remove item to array of data to emit
@@ -138,7 +128,7 @@ export default {
         val.isChecked ? newSelectedValues.push(val.buttonId) : newSelectedValues.splice(newSelectedValues.indexOf(val.buttonId), 1);
         this.selectedValues = newSelectedValues;
       } else {
-        this.selectedValues = [val.buttonId]
+        this.selectedValues = [val.buttonId];
       }
     },
   },

src/common-components/funnel-footer/funnel-footer.vue

@@ -21,9 +21,9 @@
             isPrimary
             :buttonText="buttonText"
             loaderColor="white"
-            sizeInRem="1"
             :class="isDisabled && 'form-test-invalid'"
             :aria-disabled="isDisabled"
+            :isDisabled="isDisabled"
             @click-event="buttonClick"
           />
         </div>
@@ -96,6 +96,10 @@ export default {
   .btn-primary {
     width: 100%;
   }
+  a {
+    display: flex;
+    justify-content: center;
+  }
   @media only screen and (min-width: 340px) {
     .button-col,
     .link-col {
@@ -104,6 +108,10 @@ export default {
     .btn-primary {
       width: auto;
     }
+    a {
+      display: flex;
+      justify-content: flex-start;
+    }
   }
 }
 </style>

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -57,7 +57,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 h5 {
   line-height: 32px;
 

src/layouts/form-test/form-test.vue

@@ -8,7 +8,7 @@
           @invalid-submit="onInvalidSubmit"
           ref="theForm"
           v-slot="{ values, meta, errors }"
-        >        
+        >
             <damageLocationQuestion
               ref="damageLocation"
               v-model="selectedDamageLocations"
@@ -20,6 +20,7 @@
               :suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
             />
             <alert
+              class="my-3"
               v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
               alertClass="alert-danger"
               alertHeadline="You'll need to schedule separate appointments"

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

@@ -0,0 +1,89 @@
+<template>
+
+  <div class="container-fluid nested-radio">
+    <div class="row mb-1 demo-animate"><!-- demo-animate for demo only -->
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint, Blue Shade"
+        buttonID="radio1"
+        />
+      </div>
+    </div>
+    <div class="row mb-1 show-hide"><!-- show-hide for demo only -->
+      <div class="col">
+        <p class="mb-0 fw-bold">Ok, select the features</p>
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, solar, 3rd visor band"
+        buttonID="button1"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, solar, 3rd visor band"
+        />
+        <radio ref="radio"
+        groupName="group1"
+        buttonLabel="rain sensor, heated glass, solar, 3rd visor band"
+        buttonID="button2"
+        isRequired
+        value="test button"
+        screenReaderOnlyText="rain sensor, heated glass, solar, 3rd visor band"
+        />
+      </div>
+    </div>
+    <div class="row mb-2">
+      <div class="col">
+        <listCard
+        groupName="listcard1"
+        isWide="true"
+        buttonImage="https://digitalconsumercms-dev.safelite.com/images/default-source/damage-options/car.svg?sfvrsn=1468d7f1_3"
+        buttonLabel="Green Tint"
+        buttonID="radio2"
+        />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import listCard from "@/ux-components/list-card/list-card";
+import radio from "@/ux-components/radio/radio";
+
+export default {
+  name: "nestedRadio",
+  components: {
+    radio,
+    listCard,
+  }
+};
+</script>
+
+<style lang="scss">
+.nested-radio {
+  padding: 20px; // For demo only
+  .ui-radio {
+    margin: .25rem 0;
+  }
+  p {
+    font-size: .875rem;
+  }
+  // For demo only
+  .show-hide {
+    max-height: 0;
+    transition: max-height 0.35s ease-out;
+    overflow: hidden;
+  }
+  .demo-animate {
+    &:hover {
+      + .show-hide {
+        max-height: 140px;
+        transition: max-height 0.35s ease-in;
+      }
+    }
+  }
+  // END for demo only
+}
+</style>

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="damage-location-question">
         <buttonQuestion
-            v-if="answersToDisplay.length > 1"
             :questionText="questionText"
             isMultiSelect
             :answers="answersToDisplay"

src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js

@@ -24,7 +24,7 @@ describe("replace-options-question.vue", () => {
     test("Answers to display filtered by data from api.", async () => {
   
       //Arrange
-      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+      const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"], filterByVehicleCategory: true});
   
       //Act
       replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,8 +1,9 @@
 <template>
     <transition name="fade">
-        <div class="replace-options-question">
+        <div class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''">
             <buttonQuestion
-                v-if="isAvailable && answersToDisplay.length > 1"
+                v-if="isAvailable"
+                isWide
                 :questionText="questionText"
                 isMultiSelect
                 :answers="answersToDisplay"
@@ -64,11 +65,18 @@ export default ({
                 ? this.answersFromCms.filter(ans => 
                     {
                         const name = ans.Name.split('-');
-                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1])
+                        return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
                     }) 
                 : [];
         },
     },
+    mounted(){
+        if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+            const newSelectedValues = this.selectedValues;
+            newSelectedValues.push(this.answersToDisplay[0].Name);
+            this.selectedValues = newSelectedValues;
+        }
+    },
     components: {
         buttonQuestion,
     }

src/layouts/vehicle-damage/vehicle-damage.spec.js

@@ -175,7 +175,10 @@ function setupMocks({
     return Promise.resolve({
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
-      }
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
+      },
     });
   });
   const apiResponses = {
@@ -193,6 +196,9 @@ function setupMocks({
     damageOptions: {
       driverSideOptions: {
         availableReplacementOptions: ["Front", "Back", "Side"],
+      },
+      windshieldOptions: {
+        availableReplacementOptions: ["Front", "Back", "Side"],
       }
     },
   };
@@ -220,6 +226,11 @@ function setupMocks({
     initializeComponent: jest.fn(),
   };
 
+  const windshieldOptions = replaceOptionsQuestion
+  windshieldOptions.methods = {
+    initializeComponent: jest.fn(),
+  };
+
   damageLocationQuestion.methods = {
     initializeComponent: jest.fn(),
   };
@@ -245,12 +256,18 @@ function setupMocks({
   funnelSubHeaderWrapper.vm.initializeComponent =
     funnelSubHeader.methods.initializeComponent;
 
-  const driverSideOptionsWrapper = wrapper.findComponent({
+  const driverSideOptionsWrapper = wrapper.findAllComponents({
     name: "replaceOptionsQuestion",
-  });
+  }).at(0);
   driverSideOptionsWrapper.vm.initializeComponent =
   replaceOptionsQuestion.methods.initializeComponent;
 
+  const windshieldOptionsWrapper = wrapper.findAllComponents({
+    name: "replaceOptionsQuestion",
+  }).at(1);
+  windshieldOptionsWrapper.vm.initializeComponent =
+  replaceOptionsQuestion.methods.initializeComponent;
+
   const damageLocationQuestionWrapper = wrapper.findComponent({
     name: "damageLocationQuestion",
   });

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -4,7 +4,8 @@
         <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
         <funnelSubHeader ref="funnelSubHeader" />
         <damageLocationQuestion ref="damageLocation" v-model="selectedDamageLocations" groupName="DamageLocationQuestion" />
-        <replaceOptionsQuestion ref="driverSideOptions" isAvailable v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="driverSideOptions" isAvailable filterByVehicleCategory v-model="driverSideOptionsData" groupName="DriverSideReplaceOptionsQuestion" />
+        <replaceOptionsQuestion ref="windshieldOptions" isAvailable  groupName="windshieldOptions" v-model="windshieldOptionsData" />
         <funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
     </div>
 </template>
@@ -68,6 +69,9 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
       );
+      vm.$refs.windshieldOptions.initializeComponent(
+        resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
+      );
       vm.$refs.funnelFooter.initializeComponent(
         resultMap.cmsContent.FunnelFooterWidget
       );
@@ -77,6 +81,7 @@ export default {
     return {
       selectedDamageLocations: [],
       driverSideOptionsData: [],
+      windshieldOptionsData: [],
     }
   },
   methods: {

src/layouts/vehicle-make/make-question/make-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="makes"
     groupName="Choose Vehicle Make"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/layouts/vehicle-model/model-question/model-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="models"
     groupName="Choose Vehicle Model"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/layouts/vehicle-style/style-question/style-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="styles"
     groupName="Choose Vehicle Style"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

src/layouts/vehicle-year/year-question/year-question.vue

@@ -2,11 +2,11 @@
   <buttonQuestion
     class="radioQuestion"
     isOverflowScrollable
+    selectingInitiatesLoad
     :questionText="questionText"
     :answers="years"
     groupName="Choose Vehicle Year"
     textPosition="text-start"
-    :loaderEnabled="true"
     v-model="selectedValueAsArray"
     isRequired=true
   />

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/styles/common-error-styles.scss

@@ -1,24 +1,50 @@
 .has-error {
   &.list-button,
-  &.list-card,
+  &.list-card {
+    border: 1px solid transparent;
+    color: $red;
+    label {
+      border: 1px solid $red;
+      border-radius: .5rem;
+    }
+  }
+  input[type=checkbox]:focus + label,
+  input[type=radio]:focus + label,
+  input[type=checkbox]:checked + label,
+  input[type=radio]:checked + label {
+    box-shadow: 0 0 0 2.5px transparent !important;
+  }
   &.list-button-horizontal {
     color: $red;
     label {
       border: 1px solid $red;
     }
   }
+  &.ui-radio,
+  &.ui-checkbox {
+    input[type=checkbox],
+    input[type=radio]+label:before,
+    input[type=checkbox]+label:before {
+      border: 1px solid $red;
+    }
+    input[type=checkbox]:checked + label:before {
+      border: 1px solid $blue;
+    }
+  }
 }
 
 .form-test-error {
   color: $red;
-  font-weight: bold;
+  font-size: .875rem;
+  font-weight: 500;
 }
 
 .form-test-invalid {
   &.btn.btn-primary {
     color: $gray;
     background: $gray-200;
-    cursor: default;
+    cursor: pointer;
+    pointer-events: all;
   }
   &.btn.btn-primary:hover,
   &.btn.btn-primary:focus,
@@ -28,4 +54,4 @@
     box-shadow: none;
   }
 
-}
+}

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

@@ -1,16 +1,14 @@
 <template>
   <button
-    :disabled="isDisabled"
     :aria-disabled="isDisabled"
-    class="btn d-flex align-items-center py-3 px-2"
+    class="btn d-flex align-items-center py-3 px-4 delay"
-    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '']"
+    :class="[isPrimary ? 'btn-primary' : 'btn-secondary',isFloat ? 'float-end' : '', isLoaderDisplayed ? 'has-loader' : '']"
     @click="clicked()"
   >
     <span class="m-0">{{ this.buttonText }}</span>
     <loader
       class="ms-2"
       v-if="isLoaderDisplayed"
-      v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
       v-bind:class="[this.loaderColor, this.loaderPosition]"
     />
   </button>
@@ -26,8 +24,7 @@ export default {
     isDisabled: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
+    isFloat: Boolean,
-    isFloat: Boolean
   },
   data() {
     return {
@@ -36,8 +33,10 @@ export default {
   },
   methods: {
     clicked() {
-      this.isLoaderDisplayed = true;
+      if (!this.isDisabled) {
-      this.$emit("click-event");
+        this.isLoaderDisplayed = true;
+        this.$emit("click-event");
+      }
     },
   },
   components: {
@@ -50,13 +49,12 @@ export default {
 .btn {
   &.btn-primary {
     position: relative;
-    background: $blue-700;
+    background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
-    @include blue-gradient;
     border: none;
     border-radius: $border-radius-lg;
     color: $white;
-    transition: all 150ms linear;
     justify-content: center;
+    font-weight: 500;
     &:hover {
       background: linear-gradient(
         270deg,
@@ -70,19 +68,33 @@ export default {
       outline: none;
       box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
       color: $white;
-      @include blue-gradient;
-    }
-    &:disabled {
-      background: $gray-100 !important;
       background: linear-gradient(
         270deg,
-        $gray-100 0%,
+        rgba(6, 87, 124, 1) 0%,
-        $gray-100 100%
+        rgba(6, 87, 124, 1) 100%
+      );
+    }
+    &:disabled {
+      background: $gray-200 !important;
+      background: linear-gradient(
+        270deg,
+        $gray-200 0%,
+        $gray-200 100%
       ) !important;
-      color: $gray !important;
+      color: $gray-600 !important;
+      font-weight: 400;
       height: 48px;
       border: none;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
+    }
+    &.has-loader {
+      color: $white;
+      background: $blue-700;
+    }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
     }
   }
   &.btn-secondary {
@@ -91,6 +103,7 @@ export default {
     border: 1px solid $blue;
     border-radius: $border-radius-lg;
     color: $blue;
+    font-weight: 500;
     transition: all 150ms linear;
     &:hover {
       color: $white;
@@ -106,10 +119,20 @@ export default {
     }
     &:disabled {
       background: transparent;
-      color: $gray !important;
+      color: $gray-550 !important;
+      font-weight: 400;
       height: 48px;
-      border: 1px solid $gray-300;
+      border: 1px solid $gray-550;
       border-radius: $border-radius-lg;
+      cursor: pointer;
+      pointer-events: all;
+    }
+    &.has-loader {
+      color: $white;
+      @include blue-gradient;
+    }
+    &.delay {// fixes flicker while transitioning between states
+      transition: background 0s 0s ease-in-out;
     }
   }
 }

src/ux-components/checkbox/checkbox.vue

@@ -1,15 +1,15 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
-  <div class="ui-checkbox d-flex">
+  <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
-    <input
+    <input class="form-check-input"
-      type="checkbox"
+    type="checkbox"
-      aria-checked="false"
+    aria-checked="false"
-      :name="checkboxName"
+    :name="checkboxName"
-      :id="buttonID"
+    :id="buttonID"
-      :tabindex="tabIndex"
+    :tabindex="tabIndex"
-      :aria-required="isRequired"
+    :aria-required="isRequired"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -28,65 +28,27 @@ export default {
     checkboxLabel: String,
     screenReaderOnlyText: String,
     isRequired: Boolean,
+    hasError: Boolean
   },
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.ui-checkbox {
+.form-check {
-  position: relative;
+  .form-check-input {
-  input[type="checkbox"] {
+    border: 1px solid $gray-500;
-    position: absolute !important;
+    border-radius: 2px;
-    height: 1px;
+    &:checked {
-    width: 1px;
+      background-size: 125%;
-    overflow: hidden;
+      border: 1px solid $blue;
-    clip: rect(1px, 1px, 1px, 1px);
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
     }
-    + label::before {
+    &:focus {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 2px;
-    }
-    &:checked + label::before {
-      background: $blue;
-    }
-    &:checked + label::after {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 2px;
-      border-left: 2px solid $white;
-      border-bottom: 2px solid $white;
-      height: 6px;
-      width: 12px;
-      transform: rotate(-45deg);
-    }
-    &:hover + label::before {
       box-shadow: 0 0 0 4px $blue-300;
     }
-    &:focus + label::before {
+  }
-      box-shadow: 0 0 0 2px $blue;
+  &:hover {
-    }
+    .form-check-input {
-    &:focus:checked + label::before {
+      box-shadow: 0 0 0 4px $blue-300;
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
     }
   }
 }

src/ux-components/list-button-horizontal/list-button-horizontal.spec.js

@@ -91,7 +91,7 @@ describe("list-button-horizontal.vue", () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -99,6 +99,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -113,7 +114,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -121,6 +122,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -135,7 +137,7 @@ describe("list-button-horizontal.vue", () => {
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -143,6 +145,7 @@ describe("list-button-horizontal.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -152,28 +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,
-        loaderEnabled: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -12,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
     <label
       tabindex="-1"
@@ -38,7 +39,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
         :class="[loaderColor, loaderPosition]"
       />
     </label>
@@ -60,10 +60,9 @@ export default {
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
     textPosition: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number, String],
     isRequired: Boolean,
     value: {
       // Field initial value
@@ -71,6 +70,7 @@ export default {
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {
@@ -88,8 +88,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },
@@ -132,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;
@@ -155,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;
@@ -165,6 +169,7 @@ export default {
     label {
       border-bottom-left-radius: 0.5rem;
       border-top-left-radius: 0.5rem;
+      z-index: 2;
     }
   }
   &:last-of-type {

src/ux-components/list-button/list-button.spec.js

@@ -91,7 +91,7 @@ describe("list-button.vue", () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -99,6 +99,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -113,16 +114,15 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderColor: "blue",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
     // Assert
 
     const label = wrapper.find("label");
-
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
-
     await nextTick();
 
     const loader = wrapper.find("loader-stub");
@@ -135,7 +135,7 @@ describe("list-button.vue", () => {
     const wrapper = shallowMount(listButton, {
       propsData: {
         loaderPosition: "right",
-        loaderEnabled: true,
+        selectingInitiatesLoad: true,
       },
     });
 
@@ -143,6 +143,7 @@ describe("list-button.vue", () => {
 
     const label = wrapper.find("label");
 
+    wrapper.vm.handleCheckChange = jest.fn();
     wrapper.vm.handleClick();
 
     await nextTick();
@@ -152,28 +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,
-        loaderEnabled: true,
-      },
-    });
-
-    // Assert
-
-    const label = wrapper.find("label");
-
-    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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
+    :class="hasError ? 'has-error' : ''"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -12,7 +13,7 @@
       :aria-required="isRequired"
       :data-focus-target="groupName"
       v-model="checkValue"
-      @change="handleCheckChange"
+      @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
     <label
       tabindex="-1"
@@ -41,7 +42,6 @@
       </span>
       <loader
         v-if="isLoaderDisplayed && !isMultiSelect"
-        :style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
         :class="[this.loaderColor, this.loaderPosition]"
       />
     </label>
@@ -63,16 +63,16 @@ export default {
     textPosition: String,
     buttonLabelSubCopy: String,
     screenReaderOnlyText: String,
-    loaderEnabled: Boolean,
+    selectingInitiatesLoad: Boolean,
     loaderColor: String,
     loaderPosition: String,
-    sizeInRem: [Number,String],
     value: {
     // Field initial value
       type: [String, Number],
       default: "",
     },
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data() {
     return {
@@ -90,8 +90,9 @@ export default {
       this.isLoaderDisplayed = true;
     },
     handleClick(value) {
-      if (this.loaderEnabled) {
+      if(this.selectingInitiatesLoad) {
         this.displayLoader();
+        this.handleCheckChange();
       }
       this.handleChange(value);
     },
@@ -100,7 +101,7 @@ export default {
       if (!isInitialization) {
         this.$emit('isCheckedChanged', { isChecked: this.checkValue, buttonId: this.buttonID.toString() });
       }
-    }
+    },
   },
   components: {
     loader,

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

@@ -1,8 +1,8 @@
 <template>
   <div :class="'col' + colLength">
-    <div 
+    <div
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
-      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
+      :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
     >
       <input
         :type="isMultiSelect ? 'checkbox' : 'radio'"
@@ -13,7 +13,7 @@
         :data-focus-target="groupName"
         @click="handleChange(value)"
         v-model="checkValue"
-        @change="handleCheckChange"
+        @change="handleCheckChange()"
       />
       <label
         :for="buttonID"
@@ -53,10 +53,8 @@ import { useField } from "vee-validate";
 export default {
   name: "listCard",
   props: {
-    //Must choose one of the following four options
     isMultiSelect: Boolean, //Defines use as checkbox
     isWide: Boolean,
-    //end must choose
     buttonImage: String, //Required: File name of image
     buttonImageId: String,
     buttonLabel: String, //Required: Label text
@@ -73,6 +71,7 @@ export default {
     colLength: String,
     validationRules: String,
     selectedButtonIDs: [Array, String],
+    hasError: Boolean,
   },
   data(){
     return {
@@ -108,11 +107,11 @@ export default {
   setup(props) {
     const inputType = props.isMultiSelect ? "checkbox" : "radio";
 
-    const { 
+    const {
         value: inputValue,
         handleChange,
         errors,
-    } = useField(props.groupName, props.validationRules, 
+    } = useField(props.groupName, props.validationRules,
     {
       type: inputType,
       checkedValue: props.value,
@@ -155,6 +154,7 @@ export default {
         cursor: pointer;
       }
       p {
+        color: $gray-600;
         text-align: center;
         &.sub-copy {
           color: $gray-550;
@@ -170,6 +170,15 @@ export default {
       box-shadow: 0 0 0 1px $blue;
       border-radius: 0.5rem;
     }
+    &:checked + label {
+      p {
+        color: $black;
+        font-weight: 500;
+      }
+      .sub-copy {
+        color: $gray-600;
+      }
+    }
     + label::before {
       content: "";
       position: absolute;

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

@@ -1,17 +1,18 @@
 <template>
   <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
-  <div class="ui-radio d-flex">
+  <div class="ui-radio d-flex form-check" :class="[hasError ? 'has-error' : '']">
     <input
     type="radio"
+    class="form-check-input"
     aria-checked="false"
     :name="groupName"
     :id="buttonID"
     :aria-required="isRequired"
     :value="value"
     :v-model="checkValue"
-    @change="handleCheckChanged"
+    @change="handleCheckChanged()"
     />
-    <label class="d-flex align-items-center" :for="buttonID">
+    <label class="d-flex align-items-start form-check-label" :for="buttonID">
       <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
       <span v-if="screenReaderOnlyText" class="sr-only">{{
         screenReaderOnlyText
@@ -35,6 +36,7 @@ export default {
       default: "",
     },
     screenReaderOnlyText: String,
+    hasError: Boolean,
   },
   data() {
     return {
@@ -76,62 +78,25 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
-.ui-radio {
+.form-check {
-  position: relative;
+  .form-check-input {
-  input[type="radio"] {
+    border: 1px solid $gray-500;
-    position: absolute !important;
+    border-radius: 100%;
-    height: 1px;
+    margin-right: .5rem;
-    width: 1px;
+    &:checked {
-    overflow: hidden;
+      background-color: $white;
-    clip: rect(1px, 1px, 1px, 1px);
+      background-size: 71%;
-    + label {
-      display: block;
-      position: relative;
-      &:hover {
-        cursor: pointer;
-      }
-    }
-    + label::before {
-      content: "";
-      position: relative;
-      display: inline-block;
-      margin-right: 8px;
-      width: 16px;
-      height: 16px;
-      background: white;
-      border: 1px solid $gray-500;
-      border-radius: 50%;
-    }
-    &:checked + label::before {
-      background: $white;
       border: 1px solid $blue;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' xml:space='preserve'%3e%3ccircle cx='25' cy='25' r='25' fill='%231574A1'/%3e%3c/svg%3e");
     }
-    &:checked + label::after {
+    &:focus {
-      content: "";
-      position: absolute;
-      top: 8px;
-      left: 3px;
-      height: 6px;
-      width: 6px;
-      transform: rotate(-45deg);
-      border: 5px solid $blue;
-      border-radius: 50%;
-    }
-    &:hover + label::before {
       box-shadow: 0 0 0 4px $blue-300;
     }
-    &:focus + label::before {
+  }
-      box-shadow: 0 0 0 2px $blue;
+  &:hover {
-    }
+    .form-check-input {
-    &:focus:checked + label::before {
+      box-shadow: 0 0 0 4px $blue-300;
-      box-shadow: 0 0 0 2px transparent;
-    }
-    &:disabled + label {
-      color: $gray-200;
-    }
-    &:disabled + label::before {
-      background: $gray-200;
     }
   }
 }