Merge pull request #66 from Safelite/CSR-186-radio-button-variations

CSR-186 Add multi-line radio variation.

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/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"
+        radioSubID="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Dodge"
+        radioSubID="Test sub-headline"
+        textPosition="text-start"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-2"
+        ariaLabelBy="vehicle-make"
+        radioID="Ford"
+        radioSubID="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"
+        radioSubID="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="Testarosa"
+        radioSubID="Test sub-headline"
+        textPosition="text-center"
+        loaderColor="blue"
+        loaderPosition="right"
+        sizeInRem="1"
+        />
+        <radio
+        groupName="demo-3"
+        ariaLabelBy="vehicle-model"
+        radioID="S600"
+        radioSubID="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/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

@@ -18,7 +18,6 @@
     label {
       position: relative;
       background: $white;
-      min-height: 3rem;
       transition: all 150ms linear;
       border-radius: $border-radius-lg;
       border: 1px solid $gray-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 }}
+    <p class="m-0">{{ this.buttonText }}</p>
     <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 }}
+    <p class="m-0">{{ this.buttonText }}</p>
     <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 }}
+    <p class="m-0">{{ this.buttonText }}</p>
     <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

@@ -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,14 +1,19 @@
 <template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
+  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
     <input type="radio"
     :id="radioID"
     :name="groupName"
     :value="radioID">
     <label role="radio" tabindex="0" aria-checked="false"
     :for="radioID"
-    class="d-flex align-items-center justify-content-between p-2"
+    class="d-flex flex-column justify-content-center py-3 px-4"
     @click='displayComponent'
-    >{{radioID}}
+    ><p class="m-0"
+    :class="[this.textPosition]"
+    >{{radioID}}</p>
+    <p class="m-0 small"
+    :class="[this.textPosition]"
+    >{{radioSubID}}</p>
     <loader
     v-if="display"
     :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
@@ -26,6 +31,8 @@ export default {
   props: [
     "groupName",
     "radioID",
+    "radioSubID",
+    "textPosition", /* Use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     "errorMessage",
     "loaderColor",
     "loaderPosition",