Merge pull request #96 from Safelite/update-prop-names

Update references to "radio" where possible/necessary.

src/common-components/button-question/button-question.spec.js

@@ -2,7 +2,7 @@ import { shallowMount } from "@vue/test-utils";
 import buttonQuestion from "@/common-components/button-question/button-question";
 
 describe("buttonQuestion.vue", () => {
-  it("Should render the 'questionText' prop value as a span value for the radio question and  the 'answer' values should render as text values for radio components.", async () => {
+  it("Should render the 'questionText' prop value as a span value for the button question and  the 'answer' values should render as text values for button components.", async () => {
     // Act
     const wrapper = shallowMount(buttonQuestion);
     await wrapper.setProps({
@@ -16,8 +16,8 @@ describe("buttonQuestion.vue", () => {
     expect(wrapper.find(".needed_car_info-text").text()).toEqual(
       "Question Text"
     );
-    const radioButtons = wrapper.findAllComponents('[data-test="radio"]');
+    const buttonButtons = wrapper.findAllComponents('[data-test="button"]');
-    expect(radioButtons.length).toBe(3);
+    expect(buttonButtons.length).toBe(3);
     expect(wrapper.props().modelValue).toBe("2020");
   });
 });

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

@@ -9,12 +9,12 @@
       <fieldset class="car_list overflow-scroll position-absolute container-fluid w-100 pt-1 px-5 py-0" role="radiogroup">
         <legend class="sr-only">{{groupName}}</legend>
           <listButton v-for="answer in answers" :key="answer"
-            :radioID="answer"
+            :buttonID="answer"
             @click="chooseAnswer(answer)"
             loaderColor="blue"
             loaderPosition="right"
             sizeInRem="1.5"
-            data-test="radio"
+            data-test="button"
             :groupName="groupName"
             textPosition="text-start"
             isRequired=true

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

@@ -7,25 +7,25 @@
     </div>
     <div class="row g-2">
       <listCard
-        radioLabel="Windshield"
+        buttonLabel="Windshield"
-        radioImage="windshield-damage.svg"
+        buttonImage="windshield-damage.svg"
         altText="Windshield"
         groupName="damageKey"
-        radioID="windshield"
+        buttonID="windshield"
       />
       <listCard
-        radioLabel="Side Window"
+        buttonLabel="Side Window"
-        radioImage="side-window-damage.svg"
+        buttonImage="side-window-damage.svg"
         altText="Side Window"
         groupName="damageKey"
-        radioID="sidewindow"
+        buttonID="sidewindow"
       />
       <listCard
-        radioLabel="Back Glass"
+        buttonLabel="Back Glass"
-        radioImage="back-glass-damage.svg"
+        buttonImage="back-glass-damage.svg"
         altText="Back Glass"
         groupName="damageKey"
-        radioID="backglass"
+        buttonID="backglass"
       />
     </div>
     <div class="row my-4">
@@ -61,7 +61,7 @@
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-1-radio-group"
@@ -74,7 +74,7 @@
         <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2021"
+        buttonID="2021"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -85,7 +85,7 @@
         <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2020"
+        buttonID="2020"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -96,7 +96,7 @@
         <listButton
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
-        radioID="2019"
+        buttonID="2019"
         isRequired=true
         textPosition="text-start"
         loaderColor="blue"
@@ -112,7 +112,7 @@
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-2-radio-group"
@@ -125,8 +125,8 @@
         <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Chevrolet"
+        buttonID="Chevrolet"
-        radioLabelSubCopy="Test sub-headline"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -136,8 +136,8 @@
         <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Dodge"
+        buttonID="Dodge"
-        radioLabelSubCopy="Test sub-headline"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -147,8 +147,8 @@
         <listButton
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
-        radioID="Ford"
+        buttonID="Ford"
-        radioLabelSubCopy="Test sub-headline"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-start"
         loaderColor="blue"
         loaderPosition="right"
@@ -163,7 +163,7 @@
       </div>
     </div>
     <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-3-radio-group"
@@ -176,8 +176,8 @@
         <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="Corvette"
+        buttonID="Corvette"
-        radioLabelSubCopy="Test sub-headline"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -187,8 +187,8 @@
         <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="Testarosa"
+        buttonID="Testarosa"
-        radioLabelSubCopy="Test sub-headline"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -198,8 +198,8 @@
         <listButton
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
-        radioID="S600"
+        buttonID="S600"
-        radioLabelSubCopy="Test sub-headline"
+        buttonLabelSubCopy="Test sub-headline"
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -214,7 +214,7 @@
       </div>
     </div>
     <div class="row px-3">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the group -->
       <div
         role="radiogroup"
         aria-labelledby="demo-4-radio-group"
@@ -227,8 +227,8 @@
         <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="1"
+        buttonID="1"
-        radioLabelSubCopy=""
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -240,8 +240,8 @@
         <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="2"
+        buttonID="2"
-        radioLabelSubCopy=""
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"
@@ -253,8 +253,8 @@
         <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
-        radioID="3"
+        buttonID="3"
-        radioLabelSubCopy=""
+        buttonLabelSubCopy=""
         textPosition="text-center"
         loaderColor="blue"
         loaderPosition="right"

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

@@ -1,12 +1,12 @@
 import { shallowMount } from "@vue/test-utils";
 import listButtonHorizontal from "./list-button-horizontal";
 
-describe("radio.vue", () => {
+describe("list-button.vue", () => {
-  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
     // Act
     const wrapper = shallowMount(listButtonHorizontal, {
       propsData: {
-        radioID: "2023",
+        buttonID: "2023",
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",

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

@@ -1,11 +1,11 @@
 <!-- See the component-test.vue page for example implementation -->
 <template>
-  <!-- IMPORTANT: Refrain from using more than 4 horizontal radio buttons on desktop, 3 on mobile. -->
+  <!-- IMPORTANT: Refrain from using more than 4 horizontal buttons on desktop, 3 on mobile. -->
   <div class="col list-group list-button-horizontal d-flex flex-column mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" aria-required="true" @keyup.space="displayComponent"/>
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" aria-required="true" @keyup.space="displayComponent"/>
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton" @click='displayComponent'>
-      <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
+      <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
-      <span class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
       <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
     </label>
@@ -18,17 +18,17 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    groupName: String, /* Required, unique for each radio button GROUP */
+    groupName: String, /* Required, unique for each button GROUP */
-    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
+    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */
     loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */
     loaderPosition: String, /* Specify horizontal position of loader/spinner. Options are center, right, left */
     sizeInRem: [Number,String], /* Specify size of loader/spinner in rem. Example: 1.5 (equals 24px (16x1.5)) */
-    totalInGroup: Number, /* Required, total number of radio buttons in group. Used to tell first and last in group to apply border radius. */
+    totalInGroup: Number, /* Required, total number of buttons in group. Used to tell first and last in group to apply border radius. */
-    positionInGroup: Number /* Rquired, position of radio button in group. Example, 1,2,3 */
+    positionInGroup: Number /* Rquired, position of button in group. Example, 1,2,3 */
   },
   data() {
     return {

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

@@ -2,11 +2,11 @@ import { shallowMount } from "@vue/test-utils";
 import listButton from "./list-button";
 
 describe("list-button.vue", () => {
-  it("Should render the 'radioID' prop value as the label and id value as well as the radio button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
+  it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => {
     // Act
     const wrapper = shallowMount(listButton, {
       propsData: {
-        radioID: "2023",
+        buttonID: "2023",
         groupName: "TestGroup",
         loaderColor: "blue",
         loaderPosition: "right",

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

@@ -1,10 +1,10 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
   <div class="list-group list-button d-flex flex-column w-100 mb-2">
-    <input type="radio" :id="radioID" :name="groupName" :value="radioID" :aria-required="isRequired" @keyup.space="displayComponent()">
+    <input type="radio" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" @keyup.space="displayComponent()">
-    <label role="radio" tabindex="-1" aria-checked="false" :for="radioID" class="d-flex flex-column justify-content-center py-3 px-4" @click='displayComponent()'>
+    <label role="radio" tabindex="-1" aria-checked="false" :for="buttonID" 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" :class="[this.textPosition]">{{buttonID}}</span>
-      <span v-if="radioLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{radioLabelSubCopy}}</span>
+      <span v-if="buttonLabelSubCopy" class="m-0 small" :class="[this.textPosition]">{{buttonLabelSubCopy}}</span>
       <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     <loader v-if="display" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[this.loaderColor, this.loaderPosition]" />
   </label>
@@ -17,11 +17,11 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    groupName: String, /* Required, unique for each radio button GROUP */
+    groupName: String, /* Required, unique for each button GROUP */
-    radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
+    buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
     isRequired: Boolean, /* Optional, default is false */
     screenReaderOnlyText: String, /* Optional, copy to be read by screenreader */
-    radioLabelSubCopy: String, /* Optional, used for multi-line radio buttons */
+    buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
     textPosition: String, /* Optional, use Bootstrap classes: text-start, text-center, text-end. Default (empty) is text-start */
     errorMessage: String, /* Optional, if there is an error message to be displayed */
     loaderColor: String, /* Specify color of loader/spinner. Options are blue, red, green, white, black. Default is blue */

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

@@ -4,22 +4,22 @@
       type="radio"
       class="position-absolute opacity-0"
       :class="className"
-      :id="radioID"
+      :id="buttonID"
       :name="groupName"
-      :value="radioLabel"
+      :value="buttonLabel"
       v-model="picked"
       :tabindex="tabIndex"
     />
     <label
-      v-bind:for="radioID"
+      v-bind:for="buttonID"
       class="rounded-3 d-flex flex-column align-items-center w-100"
     >
       <img
         class="px-3 pt-3 pb-2 mt-auto"
-        v-bind:src="require(`@/assets/img/icons/${radioImage}`)"
+        v-bind:src="require(`@/assets/img/icons/${buttonImage}`)"
         v-bind:alt="altText"
       />
-      <span class="mt-auto mb-2 text-center lh-1">{{ radioLabel }}</span>
+      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
     </label>
   </div>
 </template>
@@ -31,10 +31,10 @@ export default {
   name: "listCard",
   props: [
     "groupName",
-    "radioLabel",
+    "buttonLabel",
-    "radioImage",
+    "buttonImage",
     "altText",
-    "radioID",
+    "buttonID",
     "tabIndex",
     "className",
   ],