From fb027c281e92b03bcb731918ffb436d8f6e66f25 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Wed, 1 Dec 2021 17:34:51 -0500
Subject: [PATCH 1/2] WIP CSR-186 radio button updates.

---
 src/layouts/component-test/component-test.vue | 21 ++++++---
 src/styles/common-radio-styles.scss           |  3 ++
 src/styles/common-typography-styles.scss      |  4 +-
 .../button-primary/button-primary.vue         |  2 +-
 .../button-secondary/button-secondary.vue     |  2 +-
 src/ux-components/list-button/list-button.vue |  2 +-
 src/ux-components/radio/radio.spec.js         |  2 +-
 src/ux-components/radio/radio.vue             | 47 ++++++++-----------
 8 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index df7578bf0..f4b4047fc 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -81,6 +81,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
+        radioLabelValue="2021"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -90,6 +91,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
+        radioLabelValue="2020"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -99,6 +101,7 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
+        radioLabelValue="2019"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -120,7 +123,8 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Chevrolet"
-        radioSubID="Test sub-headline"
+        radioLabelValue="Chevrolet"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -130,7 +134,8 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Dodge"
-        radioSubID="Test sub-headline"
+        radioLabelValue="Dodge"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -140,7 +145,8 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Ford"
-        radioSubID="Test sub-headline"
+        radioLabelValue="Ford"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -157,7 +163,8 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Corvette"
-        radioSubID="Test sub-headline"
+        radioLabelValue="Corvette"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -167,7 +174,8 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Testarosa"
-        radioSubID="Test sub-headline"
+        radioLabelValue="Testarosa"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -177,7 +185,8 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="S600"
-        radioSubID="Test sub-headline"
+        radioLabelValue="S600"
+        radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-radio-styles.scss
index 5457db992..2bee198bf 100644
--- a/src/styles/common-radio-styles.scss
+++ b/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;
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 05af0defc..7f6163193 100644
--- a/src/styles/common-typography-styles.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/ux-components/button-primary/button-primary.vue b/src/ux-components/button-primary/button-primary.vue
index c129115c4..7da10a107 100644
--- a/src/ux-components/button-primary/button-primary.vue
+++ b/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"
diff --git a/src/ux-components/button-secondary/button-secondary.vue b/src/ux-components/button-secondary/button-secondary.vue
index 9cdf7483f..ddbde2a7d 100644
--- a/src/ux-components/button-secondary/button-secondary.vue
+++ b/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"
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 1a3f49190..6937ea93c 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/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`}"
diff --git a/src/ux-components/radio/radio.spec.js b/src/ux-components/radio/radio.spec.js
index c86de39b1..d98130c33 100644
--- a/src/ux-components/radio/radio.spec.js
+++ b/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');
 
diff --git a/src/ux-components/radio/radio.vue b/src/ux-components/radio/radio.vue
index 78d6e4144..48d70821d 100644
--- a/src/ux-components/radio/radio.vue
+++ b/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"
-    :id="radioID"
-    :name="groupName"
-    :value="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'
-    ><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]"
-    />
+    <input type="radio" :id="radioID" :name="groupName" :value="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'>
+      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
+      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+    <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",
-    "radioID",
-    "radioSubID",
-    "textPosition", /* Use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
-    "errorMessage",
-    "loaderColor",
-    "loaderPosition",
-    "sizeInRem"
+    "groupName", /* Required, unique for each radio button GROUP */
+    "radioID", /* Required, unique for each radio button. Used for button id, label and <label for> */
+    "radioLabelSubCopy", /* Optional, used for multi-line radio buttons */
+    "textPosition", /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
+    "errorMessage", /* Optional */
+    "loaderColor", /* Optional */
+    "loaderPosition", /* Optional */
+    "sizeInRem" /* Optional */
   ],
   data() {
     return {

From 9b65586121b46d017e2214fbe267e503284319d7 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 2 Dec 2021 07:57:14 -0500
Subject: [PATCH 2/2] Remove unneeded prop.

---
 src/layouts/component-test/component-test.vue | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index f4b4047fc..c64a3fe0a 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -81,7 +81,6 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2021"
-        radioLabelValue="2021"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -91,7 +90,6 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2020"
-        radioLabelValue="2020"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -101,7 +99,6 @@
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         radioID="2019"
-        radioLabelValue="2019"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -123,7 +120,6 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Chevrolet"
-        radioLabelValue="Chevrolet"
         radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -134,7 +130,6 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Dodge"
-        radioLabelValue="Dodge"
         radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -145,7 +140,6 @@
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         radioID="Ford"
-        radioLabelValue="Ford"
         radioLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
@@ -163,7 +157,6 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Corvette"
-        radioLabelValue="Corvette"
         radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -174,7 +167,6 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="Testarosa"
-        radioLabelValue="Testarosa"
         radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
@@ -185,7 +177,6 @@
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         radioID="S600"
-        radioLabelValue="S600"
         radioLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"