Merge pull request #69 from Safelite/CSR-186-radio-horizontal

Update prop names to be more descriptive.

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

@@ -120,7 +120,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Chevrolet"
-        radioSubID="Test sub-headline"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -130,7 +130,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Dodge"
-        radioSubID="Test sub-headline"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -140,7 +140,7 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Ford"
-        radioSubID="Test sub-headline"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -157,7 +157,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Corvette"
-        radioSubID="Test sub-headline"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -167,7 +167,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Testarosa"
-        radioSubID="Test sub-headline"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -177,7 +177,7 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="S600"
-        radioSubID="Test sub-headline"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"

src/styles/common-radio-styles.scss

@@ -14,6 +14,9 @@
         background: $blue-100;
         box-shadow: 0 0 0 1px $blue;
       }
+      &:checked + label p:first-child {
+        font-weight: 500;
+      }
     }
     label {
       position: relative;

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/ux-components/button-primary/button-primary.vue

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

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

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

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

@@ -8,7 +8,7 @@
     this.isError ? 'error' : '',
     ]"
     >
-    <p class="m-0">{{ this.buttonText }}</p>
+    <span class="m-0">{{ this.buttonText }}</span>
     <loader
     v-if="display"
     v-bind:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"

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');
 

src/ux-components/radio/radio.vue

@@ -1,24 +1,17 @@
 <template>
+  <!-- See the component-test.vue page for example implementation -->
+  <!-- role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+  <!-- Example: -->
+  <!-- <div role="radiogroup" aria-labelledby="demo-radio-group" class="col my-3 d-flex align-items-center flex-column"> -->
+  <!-- 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.*** -->
+  <!-- Example -->
+  <!-- <h3 class="visually-hidden" id="demo-radio-group">Select Vehicle Year</h3> -->
   <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
-    <input type="radio"
+    <input type="radio" :id="radioID" :name="groupName" :value="radioID">
-    :id="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'>
-    :name="groupName"
+      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
-    :value="radioID">
+      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
-    <label role="radio" tabindex="0" aria-checked="false"
+    <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
-    :for="radioID"
-    class="d-flex flex-column justify-content-center py-3 px-4"
-    @click='displayComponent'
-    ><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`}"
-    :class="[this.loaderColor, this.loaderPosition]"
-    />
   </label>
   <p class="small">{{errorMessage}}</p>
 </div>
@@ -29,14 +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> */
-    "radioSubID",
+    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
-    "textPosition", /* Use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "errorMessage",
+    "errorMessage", /* Optional */
-    "loaderColor",
+    "loaderColor", /* Optional */
-    "loaderPosition",
+    "loaderPosition", /* Optional */
-    "sizeInRem"
+    "sizeInRem" /* Optional */
   ],
   data() {
     return {