Merge branch 'develop' into feature/CSR-120_vehicle-banner-2

jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 60,
+      statements: 70,
     },
   },
 };

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

@@ -1,6 +1,6 @@
 <template>
   <div class="radio_question">
-    <div class="needed_car_info mt-4 mb-2 d-flex">
+    <div class="needed_car_info mt-5 mb-2 d-flex">
       <span class="text-center fs-6 fw-bold w-100 needed_car_info-text">{{
         questionText
       }}</span>
@@ -8,7 +8,7 @@
     <div class="w-100 d-flex justify-content-center">
       <div class="car_list overflow-scroll position-absolute container-fluid pt-1" role="radiogroup" aria-labelledby="select-year-radio-group">
         <h3 class="visually-hidden" id="select-year-radio-group">*</h3>
-          <radio v-for="answer in answers" :key="answer" class="mb-2"
+          <radio v-for="answer in answers" :key="answer"
             :radioID="answer"
             @click="chooseAnswer(answer)"
             loaderColor="blue"
@@ -35,4 +35,4 @@ export default {
     radio,
   },
 };
-</script>
+</script>

src/helpers/cms-content-helper.js

@@ -0,0 +1,29 @@
+import { storeActions } from "@/constants/store-actions.js";
+import { widgetNames } from "@/constants/widget-names.js";
+import store from "@/store";
+
+export function fetchCmsContentForPage(fmgPage) {
+    return store.dispatch(storeActions.GET_PAGE_DATA, { pageName: fmgPage }).then((response) => {
+        const pageDataFromCms = {
+            isCmsContentReady: false
+        };
+
+        response.data.Result.forEach((widget) => {
+            if (Object.values(widgetNames).includes(widget.Type)) {
+                // If we already have this widget, push it on the collection
+                if (widget.Type in pageDataFromCms) {
+                    pageDataFromCms[widget.Type].push(widget.Model);
+                    return;
+                }
+
+                pageDataFromCms[widget.Type] = [widget.Model];
+            }
+        });
+
+        // Our 'Page' is ready because we have data now
+        pageDataFromCms.isCmsContentReady = true;
+
+        return pageDataFromCms;
+    });
+}
+

src/helpers/cms-helper.spec.js

@@ -0,0 +1,53 @@
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { dispatch } from "@/store";
+
+jest.mock("@/store", () => ({
+    dispatch: jest.fn()
+}));
+
+it("cms-content-helper: Should return data from CMS", () => {
+
+    // Arrange
+    const cmsMockData = {
+        Result: [
+            {
+                Type: "VehicleBannerWidget",
+                Model: {
+                    ImageId: "28452dcb-7762-4cc9-ab09-7643d0b89203",
+                    GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+                    GenericVehicleImageFilePath: "images/default-source/default-album/blurred-image.jpg"
+                }
+            },
+            {
+                Type: "PageHeaderWidget",
+                Model: {
+                    "HeaderText": "Select a year to get started"
+                }
+            },
+            {
+                Type: "PageHeaderWidget",
+                Model: {
+                    "HeaderText": "Select a model"
+                }
+            },
+            {
+                Type: "RadioQuestionWidget",
+                Model: {
+                    "QuestionText": "What year is your vehicle?"
+                }
+            }
+        ]
+    }
+
+    dispatch.mockImplementation(() => Promise.resolve({ data: cmsMockData }));
+
+    // Act
+    fetchCmsContentForPage('testPage').then((response) => {
+        
+        // Assert
+        expect(response.isCmsContentReady).toBe(true);
+        expect(response.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
+    });
+
+});
+

src/helpers/layout-helper.js

@@ -0,0 +1,29 @@
+export function settleAllPromises(promiseResultMap) {
+
+    // Pull our keys out of the promise 'table'
+    const promiseNames = Object.entries(promiseResultMap);
+
+    return Promise.allSettled(promiseNames.map(e => e[1]).map(n => n.promise))
+        .then(results => {
+
+            const resultMap = {};
+
+            // Build a map of the results
+            for (let i = 0; i < results.length; ++i) {
+                
+                const promiseName = promiseNames[i][1].resultKey;
+                
+                // Some Promises like the cms content call don't have a 'data' field 
+                // when returned, so other promises do. Map the results to the object
+                // so that the object is the return data.
+
+                if (results[i].value.data === undefined) {
+                    resultMap[promiseName] = results[i].value
+                } else {
+                    resultMap[promiseName] = results[i].value.data;
+                }
+            }
+
+            return resultMap;
+        });
+}

src/helpers/layout-helper.spec.js

@@ -0,0 +1,28 @@
+import { settleAllPromises } from "@/helpers/layout-helper";
+
+it("layout-helper: Should settle all promises and return mapped promise results", () => {
+
+    // Arrange
+    const mockPromiseOne = Promise.resolve({ data: "test-data" });
+    const mockPromiseTwo = Promise.resolve({ data: "test-data-two" });
+
+    const promiseResultMap = [
+        {
+            resultKey: "MockResultOne",
+            promise: mockPromiseOne,
+        },
+        {
+            resultKey: "MockResultTwo",
+            promise: mockPromiseTwo,
+        },
+    ];
+
+    // Act
+    settleAllPromises(promiseResultMap).then(results => {
+
+        // Assert
+        expect(results.MockResultOne).toEqual('test-data');
+        expect(results.MockResultTwo).toEqual('test-data-two');
+    });
+
+})

src/helpers/unit-test-helper.js

@@ -1,7 +1,7 @@
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 
-export function getMountOptions(mockData, cmsMockData = null) {
+export function getMountOptions(mockData) {
   // Define our mocks to attached to the 'global' object for Vue/Jest.
   const mocks = {};
 
@@ -18,16 +18,9 @@ export function getMountOptions(mockData, cmsMockData = null) {
     }
   });
 
-  if(cmsMockData){
-    mocks.GetContentFromCms = jest.fn();
-    mocks.GetContentFromCms.mockImplementation(() => 
-    {
-      return cmsMockData;
-    });
-  }
-
   // Mock store actions from js file
   mocks.storeActions = storeActions;
+
   const global = {
     mocks: mocks,
     plugins: [store]

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

@@ -38,7 +38,6 @@
         <buttonPrimary
         buttonText="Primary"
         loaderColor="white"
-        loaderPosition="right"
         sizeInRem="1"
         />
       </div>
@@ -48,7 +47,6 @@
         <buttonSecondary
         buttonText="Secondary"
         loaderColor="white"
-        loaderPosition="right"
         sizeInRem="1"
         />
       </div>
@@ -65,43 +63,125 @@
         errorText="Test error message"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1.5"
+        sizeInRem="1"
         />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group - Single-Line</h4>
       </div>
     </div>
     <div class="row">
       <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
+      <div role="radiogroup" aria-labelledby="demo-1-radio-group" class="col my-3 d-flex align-items-center flex-column">
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
+        <h3 class="visually-hidden" id="demo-1-radio-group">Select Vehicle Year</h3>
-        <radioList
+        <radio
-        groupName="demo"
+        groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
+        textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1.5"
+        sizeInRem="1"
         />
-        <radioList
+        <radio
-        groupName="demo"
+        groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
+        textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1.5"
+        sizeInRem="1"
         />
-        <radioList
+        <radio
-        groupName="demo"
+        groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
+        textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
-        sizeInRem="1.5"
+        sizeInRem="1"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group - Multi-Line</h4>
+      </div>
+    </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <div role="radiogroup" aria-labelledby="demo-2-radio-group" class="col my-3 d-flex align-items-center flex-column">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="visually-hidden" id="demo-2-radio-group">Select Vehicle Year</h3>
+        <radio
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Chevrolet"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Dodge"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Ford"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+      </div>
+    </div>
+    <div class="row">
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <div role="radiogroup" aria-labelledby="demo-3-radio-group" class="col my-3 d-flex align-items-center flex-column">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="visually-hidden" id="demo-3-radio-group">Select Vehicle Year</h3>
+        <radio
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="Corvette"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="Testarosa"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="S600"
+        radioLabelSubCopy="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
         />
       </div>
     </div>
@@ -250,7 +330,7 @@
   import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
   import radioCard from "@/ux-components/radio-card/radio-card";
   import listButton from "@/ux-components/list-button/list-button";
-  import radioList from "@/ux-components/radio-list/radio-list";
+  import radio from "@/ux-components/radio/radio";
   import alert from "@/ux-components/alert/alert";
   import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
   export default {
@@ -260,7 +340,7 @@
       buttonSecondary,
       radioCard,
       listButton,
-      radioList,
+      radio,
       alert,
       vehicleBanner
     },

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

@@ -1,27 +1,56 @@
-import { shallowMount, flushPromises  } from "@vue/test-utils";
+import { shallowMount, flushPromises } from "@vue/test-utils";
 import { getMountOptions } from "@/helpers/unit-test-helper.js";
 import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue";
+import { settleAllPromises } from "@/helpers/layout-helper.js";
+import { nextTick } from 'vue'
+
+// Mock our module for promises.
+jest.mock("@/helpers/layout-helper.js", () => ({ 
+  settleAllPromises: jest.fn()
+}));
 
 describe("vehicle-year.vue", () => {
   test("vehicle-year.vue should render data from CMS", async () => {
 
     // Arrange
-    const cmsMockData = {
+
-      PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+    // Our mock data for our call to settleAllPromises
-      RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+    const mockData = {
+      getPageContent: {
+        PageHeaderWidget: [{ HeaderText: "Select a year to get started" }],
+        RadioQuestionWidget: [{ QuestionText: "What year is your vehicle?" }],
+        isCmsContentReady: true,
+      },
+      getVehicleYear: [2023, 2022, 2021]
     }
 
-    const mountOptions = getMountOptions({}, cmsMockData);
+    // our router information needed.
+    const to = {
+      query: {
+        fmgPage: 'vehicle-year'
+      }
+    };
+
+    const mountOptions = getMountOptions(mockData);
+
+    // our mock implementation of settleAllPromises
+    settleAllPromises.mockImplementation(() => { return Promise.resolve(mockData);});
 
     // Act
     const wrapper = shallowMount(vehicleYear, mountOptions);
-    await flushPromises();
+
+    // Call our beforeRouteEnter on the component.
+    // This passes (c) => c(wrapper.vm) so that next can be called and our
+    // data can be set.
+    vehicleYear.beforeRouteEnter.call(wrapper.vm, to, undefined, (c) => c(wrapper.vm));
+
+    await nextTick(); // Wait for the DOM to update.
 
     // Assert
     const header = await wrapper.find(".Header");
     expect(header.attributes("text")).toEqual("Select a year to get started");
 
-    const yearQuestion = await wrapper.findComponent({name: 'year-question'});
+    const yearQuestion = wrapper.findComponent({ name: 'year-question' });
     expect(yearQuestion.attributes("questiontext")).toEqual("What year is your vehicle?");
   });
 });

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

@@ -1,37 +1,69 @@
 <template v-if="isCmsContentReady">
-<div class="select-car">
+  <div class="select-car">
     <div class="select-car-form rounded text-center">
-        <vehicleBanner />
+      <vehicleBanner />
-        <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
+      <pageHeader :text="pageHeaderWidgets.HeaderText" class="Header" />
-        <yearQuestion :questionText="radioQuestionWidgets.QuestionText" />
+      <yearQuestion :questionText="radioQuestionWidgets.QuestionText" :years="vehicleYears" />
     </div>
-</div>
+  </div>
 </template>
 
 <script>
+// Components
 import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
 import pageHeader from "@/ux-components/header/header";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+
 export default {
-    name: "vehicle-year",
+  name: "vehicle-year",
-    data() {
+  data() {
-        return {
+    return {
-            pageHeaderWidgets: {},
+      pageHeaderWidgets: {},
-            radioQuestionWidgets: {},
+      radioQuestionWidgets: {},
-        };
+      vehicleYears: [],
-    },
+    };
-    computed: {},
+  },
-    async created() {
+  computed: {},
-        const pageContent = await this.GetContentFromCms();
+
-        this.pageHeaderWidgets = pageContent.PageHeaderWidget[0];
+  beforeRouteEnter(to, from, next) {
-        this.radioQuestionWidgets = pageContent.RadioQuestionWidget[0];
+
-    },
+    // Call APIs
-    components: {
+    const contentPromise = fetchCmsContentForPage(to.query.fmgPage);
-        yearQuestion,
+    const getVehicleYearPromise = store.dispatch(storeActions.GET_VEHICLE_YEARS, {});
-        pageHeader,
+
-        vehicleBanner,
+    // Settle promises and get results
-    },
+    const promiseResultMap = [
+      {
+        resultKey: "getPageContent",
+        promise: contentPromise,
+      },
+      {
+        resultKey: "getVehicleYear",
+        promise: getVehicleYearPromise,
+      },
+    ];
+    settleAllPromises(promiseResultMap).then((resultMap) => {
+
+      // Call the "next" function to complete the transition to this page.
+      next((vm) => {
+        vm.pageHeaderWidgets = resultMap.getPageContent.PageHeaderWidget[0];
+        vm.radioQuestionWidgets = resultMap.getPageContent.RadioQuestionWidget[0];
+        vm.vehicleYears = resultMap.getVehicleYear;
+      });      
+    });
+  },
+
+  components: {
+    yearQuestion,
+    pageHeader,
+    vehicleBanner
+  },
 };
 </script>
 

src/layouts/vehicle-year/year-question/year-question.spec.js

@@ -1,28 +1 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
+test.todo("some test to be written in the future");
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-import { storeActions } from "@/constants/store-actions.js";
-import yearQuestion from "@/layouts/vehicle-year/year-question/year-question";
-
-describe('year-question.vue', () => {
-
-    test('year-question should call API to get years', async () => {
-        // Arrange
-        const mockDataAndAction = {
-            actionList: [{ actionName: storeActions.GET_VEHICLE_YEARS, data: ["2023", "2022", "2021"], 
-        },
-            ],
-        };
-
-        const mountOptions = getMountOptions(mockDataAndAction);
-
-        // Act
-        const wrapper = shallowMount(yearQuestion, mountOptions);
-        await wrapper.setProps({questionText: 'What year is your vehicle?'})
-        await flushPromises();
-
-        // Assert
-        const radioQuestion = await wrapper.findComponent({name: 'radioQuestion'});
-        expect(radioQuestion.attributes('questiontext')).toBe("What year is your vehicle?");
-        expect(radioQuestion.attributes('answers')).toBe('2023,2022,2021');
-    });
-});

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

@@ -9,16 +9,9 @@ export default {
     name: "year-question",
     props: {
         questionText: String,
-    },
+        years: Array
-    data() {
-        return {
-            years: [],
-        };
     },
     created() {
-        this.dispatchNonBlockingStoreAction(this.storeActions.GET_VEHICLE_YEARS, {}).then((response) => {
-            this.years = response.data;
-        });
     },
     components: {
         radioQuestion,

src/mixins/base-mixin.js

@@ -23,30 +23,6 @@ export default {
 
       return this.$store.dispatch(type, payload);
     },
-    GetContentFromCms() {
-      return this.dispatchNonBlockingStoreAction(this.storeActions.GET_PAGE_DATA,{ pageName: this.$route.query.fmgPage }).then((response) => {
-
-        const pageDataFromCms = {};
-
-        response.data.Result.forEach((widget) => {
-          if (Object.values(this.widgetNames).includes(widget.Type)) {
-            // If we already have this widget, push it on the collection
-            if (widget.Type in pageDataFromCms) {
-              pageDataFromCms[widget.Type].push(widget.Model);
-              return;
-            }
-
-            pageDataFromCms[widget.Type] = [widget.Model];
-
-          }
-        });
-
-        // Our 'Page' is ready because we have data now
-        this.isCmsContentReady = true;
-
-        return pageDataFromCms;
-      });
-    },
   },
   computed: {
     storeActions() {

src/mixins/base-mixin.spec.js

@@ -1,7 +1,6 @@
 import baseMixin from "@/mixins/base-mixin"
 import { storeActions } from "@/constants/store-actions.js";
 import { widgetNames } from "@/constants/widget-names.js";
-import { flushPromises  } from "@vue/test-utils";
 
 describe("baseMixin.js", () => {
     test('dispatchNonblockingStoreAction: calls dispatch with type and payload', () => {
@@ -23,60 +22,6 @@ describe("baseMixin.js", () => {
 
         expect(mixIn.methods.$store.dispatch).toBeCalledWith(type, payload);
     });
-
-    test('GetContentFromCms: Should return mapped data and call dispatchNonblockingStoreAction', async () => {
-        const mixIn = getMixInInstance({});
-
-        // Mock dispatch action
-        mixIn.methods.dispatchNonBlockingStoreAction = jest.fn();
-        mixIn.methods.dispatchNonBlockingStoreAction.mockImplementation((action) => {
-            if (action === 'getPageData') {
-                return Promise.resolve({
-                    data: {
-                        Result: [
-                            {
-                                Type: "PageConfigWidget",
-                                Model: {
-                                    LayoutNames: [
-                                        "None",
-                                        "vehicle-year"
-                                    ],
-                                    LayoutStyle: "vehicle-year"
-                                }
-                            },
-                            {
-                                Type: "RadioQuestionWidget",
-                                Model: {
-                                    "QuestionText": "What year is your vehicle?"
-                                }
-                            },
-                            {
-                                Type: "RadioQuestionWidget",
-                                Model: {
-                                    "QuestionText": "This is a second radio question"
-                                }
-                            },
-                            {
-                                Type: "PageHeaderWidget",
-                                Model: {
-                                    "HeaderText": "Select a year to get started"
-                                }
-                            }
-                        ]
-                    },
-                });
-            }
-        });
-
-        const result = await mixIn.methods.GetContentFromCms();
-        await flushPromises();
-
-
-        expect(mixIn.methods.dispatchNonBlockingStoreAction).toBeCalledWith(storeActions.GET_PAGE_DATA, { pageName: 'test-page'});
-
-        expect(result.PageHeaderWidget[0].HeaderText).toEqual('Select a year to get started');
-
-    });
 })
 function getMixInInstance({ isDispatchSuccess = true }) {
 

src/store/index.js

@@ -9,6 +9,11 @@ export default createStore({
       storage: window.sessionStorage,
     }),
   ],
+
+  // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
+  //    * The CMS can reference the fields by name
+  //    * Return users may have a previous "version" of the model, and we don't want
+  //      them to have a breaking experience, because the model might have changed.
   state: {
     order: {
       vehicle: {
@@ -63,6 +68,8 @@ export default createStore({
       experiments: null,
     }
   },
+  // See IMPORTANT note at top of "state" declaration.
+
   mutations: {
     updateVehicleImage(state, data) {
       state.order.vehicle.imageSrc = data.imgSrc;

src/styles/common-button-styles.scss

@@ -6,7 +6,6 @@
     @include blue-gradient;
     border: none;
     border-radius: $border-radius-lg;
-    height: 48px;
     color: $white;
     transition: all 150ms linear;
     &:hover {
@@ -33,7 +32,6 @@
     background: transparent;
     border: 1px solid $blue;
     border-radius: $border-radius-lg;
-    height: 48px;
     color: $blue;
     transition: all 150ms linear;
     &:hover {
@@ -58,7 +56,6 @@
   &.list-button {
     position: relative;
     background: $white;
-    height: 48px;
     transition: all 150ms linear;
     border-radius: $border-radius-lg;
     border: 1px solid $gray-500;

src/styles/common-radio-styles.scss

@@ -14,11 +14,13 @@
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
+      &:checked + label p:first-child {
+        font-weight: 500;
+      }
     }
     label {
       position: relative;
       background: $white;
-      min-height: 3rem;
       transition: all 150ms linear;
       border-radius: $border-radius-lg;
       border: 1px solid $gray-500;

src/styles/common-typography-styles.scss

@@ -34,7 +34,7 @@ h6,.h6 {
 }
 
 label {
-  line-height: 1.625;
+  line-height: 1.5;
   font-weight: 400;
 }
 
@@ -54,4 +54,4 @@ caption {
   font-size: 1rem !important;
   line-height: 1.4;
   font-weight: 500;
-}
+}

src/styles/ux-variables.scss

@@ -136,17 +136,18 @@ $border-radius-lg:            .5rem;//Used for buttons. Can be used for other th
 $border-radius-pill:          50rem;
 
 //Spacing
-// Seven spacers available instead of the usual 5
+// 8 spacers available instead of the usual 5
 $spacer: 1rem;
 $spacers: (
   0: 0,
-  1: $spacer * .25,
+  1: $spacer * .25, /* 4px */
-  2: $spacer * .5,
+  2: $spacer * .5, /* 8px */
-  3: $spacer,
+  3: $spacer * .75, /* 12px */
-  4: $spacer * 1.5,
+  4: $spacer * 1, /* 16px */
-  5: $spacer * 2,
+  5: $spacer * 1.5, /* 24px */
-  6: $spacer * 2.5,
+  6: $spacer * 2, /* 32px */
-  7: $spacer * 3,
+  7: $spacer * 2.5, /* 40px */
+  8: $spacer * 3, /* 48px */
 );
 
 //Grid breakpoints

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

@@ -2,10 +2,10 @@
   <button
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
-    class="btn btn-primary d-flex align-items-center"
+    class="btn btn-primary d-flex align-items-center py-3 px-4"
     @click='displayComponent'
     >
-    {{ this.buttonText }}
+    <span class="m-0">{{ this.buttonText }}</span>
     <loader
     class="ms-2"
     v-if="display"

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

@@ -2,10 +2,10 @@
   <button
     :disabled="isDisabled"
     :aria-disabled="isDisabled"
-    class="btn btn-secondary d-flex align-items-center"
+    class="btn btn-secondary d-flex align-items-center py-3 px-4"
     @click='displayComponent'
     >
-    {{ this.buttonText }}
+    <span class="m-0">{{ this.buttonText }}</span>
     <loader
     class="ms-2"
     v-if="display"

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

@@ -1,14 +1,14 @@
 <template>
   <div class="d-flex flex-column w-100">
     <button
-    class="btn list-button d-flex align-items-center justify-content-between"
+    class="btn list-button d-flex align-items-center justify-content-between py-3 px-4"
     @click='displayComponent'
     v-bind:class="[
     this.isLoading ? 'button-loader' : 'not-loading',
     this.isError ? 'error' : '',
     ]"
     >
-    {{ this.buttonText }}
+    <span class="m-0">{{ this.buttonText }}</span>
     <loader
     v-if="display"
     v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"

src/ux-components/loader/loader.vue

@@ -8,7 +8,7 @@
 <script>
 export default {
   name: "loader",
-  /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem */
+  /* Specify size in number value which translates to rem value. For example, 1.5 = 1.5rem = 24px */
   props: {
     sizeInRem: {
       type: Number,
@@ -18,7 +18,7 @@ export default {
     loaderColor: {
       type: String
     },
-    /* Position options: center, right, left (OPTIONAL) */
+    /* Position options: center, right, left (OPTIONAL, do NOT use on btn-* classes) */
     loaderPosition: {
       type: String
     }
@@ -58,15 +58,16 @@ export default {
   }
   //Spinner position
   &.center {
-    left: 0;
+    position: absolute;
-    right: 0;
+    right: 50%;
-    margin: 0 auto;
   }
   &.right {
-    margin: 0 0 0 auto;
+    position: absolute;
+    right: 1rem;
   }
   &.left {
-    margin: 0 auto 0 0;
+    position: absolute;
+    left: 1rem;
   }
   //Spinner color
   &:after { //Default spinner color (blue) if no other color is specified from the options below

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

@@ -1 +0,0 @@
-test.todo("some test to be written in the future");

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

@@ -1,51 +0,0 @@
-<template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio"
-    v-bind:id="radioID"
-    v-bind:name="groupName"
-    v-bind:value="radioID">
-    <label role="radio" tabindex="0" aria-checked="false"
-    v-bind:for="radioID"
-    class="mb-2 d-flex align-items-center justify-content-between p-2"
-    @click='displayComponent'
-    >{{radioID}}
-    <loader
-    v-if="display"
-    v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
-    v-bind:class="[this.loaderColor, this.loaderPosition]"
-    />
-  </label>
-  <p class="small">{{errorMessage}}</p>
-</div>
-</template>
-
-<script>
-import loader from "@/ux-components/loader/loader";
-export default {
-  name: "radioList",
-  props: [
-    "groupName",
-    "ariaLabelBy",
-    "radioID",
-    "errorMessage",
-    "loaderColor",
-    "loaderPosition",
-    "sizeInRem"
-
-  ],
-  data() {
-    return {
-      isError: false,
-      display: false
-    };
-  },
-  methods: {
-    displayComponent() {
-      this.display = true;
-    },
-  },
-  components: {
-    loader,
-  },
-};
-</script>

src/ux-components/radio/radio.spec.js

@@ -18,7 +18,7 @@ describe("radio.vue", () => {
     // Assert
     const input = wrapper.find("input");
     const label = wrapper.find("label");
-    const paragraph = wrapper.find("p");
+    const paragraph = wrapper.find("span");
 
     await label.trigger('click');
 
@@ -33,13 +33,13 @@ describe("radio.vue", () => {
       role: "radio",
       tabindex: "0",
       for: "2023",
-      class: "d-flex align-items-center justify-content-between p-2",
+      class: "d-flex flex-column justify-content-center py-3 px-4",
       "aria-checked": "false"
     });
 
     expect(label.text()).toEqual('2023');
 
-    expect(paragraph.text()).toEqual('null');
+    expect(paragraph.text()).toEqual('2023');
 
     expect(wrapper.vm.display).toBe(true);
 

src/ux-components/radio/radio.vue

@@ -1,19 +1,17 @@
 <template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
+  <!-- See the component-test.vue page for example implementation -->
-    <input type="radio"
+  <!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-    :id="radioID"
+  <!-- Example: -->
-    :name="groupName"
+  <!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
-    :value="radioID">
+  <!-- An h3 with id must be included just before the opening radio button group. ***The id must match the aria-labelledby of the parent div.*** -->
-    <label role="radio" tabindex="0" aria-checked="false"
+  <!-- Example -->
-    :for="radioID"
+  <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
-    class="d-flex align-items-center justify-content-between p-2"
+  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    @click='displayComponent'
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID">
-    >{{radioID}}
+    <label role="radio" tabindex="0" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent'>
-    <loader
+      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-    v-if="display"
+      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-    :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
+    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-    :class="[this.loaderColor, this.loaderPosition]"
-    />
   </label>
   <p class="small">{{errorMessage}}</p>
 </div>
@@ -24,12 +22,14 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "radioList",
   props: [
-    "groupName",
+    "groupName", /* Required, unique for each radio button GROUP */
-    "radioID",
+    "radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
-    "errorMessage",
+    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
-    "loaderColor",
+    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "loaderPosition",
+    "errorMessage", /* Optional */
-    "sizeInRem"
+    "loaderColor", /* Optional */
+    "loaderPosition", /* Optional */
+    "sizeInRem" /* Optional */
   ],
   data() {
     return {