Renam radio components, css naming.

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

@@ -2,25 +2,25 @@
   <div class="container-fluid container-shadow p-2 rounded-3">
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
       </div>
     </div>
     <div class="row g-2">
-      <radioCard
+      <listCard
         radioLabel="Windshield"
         radioImage="windshield-damage.svg"
         altText="Windshield"
         groupName="damageKey"
         radioID="windshield"
       />
-      <radioCard
+      <listCard
         radioLabel="Side Window"
         radioImage="side-window-damage.svg"
         altText="Side Window"
         groupName="damageKey"
         radioID="sidewindow"
       />
-      <radioCard
+      <listCard
         radioLabel="Back Glass"
         radioImage="back-glass-damage.svg"
         altText="Back Glass"
@@ -57,7 +57,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Single-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
       </div>
     </div>
     <div class="row">
@@ -108,7 +108,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line</h4>
       </div>
     </div>
     <div class="row">
@@ -159,7 +159,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio - Multi-Line Centered</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button - Multi-Line Centered</h4>
       </div>
     </div>
     <div class="row">
@@ -210,7 +210,7 @@
     </div>
     <div class="row my-4">
       <div class="col">
-        <h4 class="m-0 p-2 bg-light rounded">Radio Horizontal</h4>
+        <h4 class="m-0 p-2 bg-light rounded">List Button Horizontal</h4>
       </div>
     </div>
     <div class="row px-3">
@@ -224,7 +224,7 @@
         <h3 class="sr-only" id="demo-4-radio-group">
           Select Vehicle Year
         </h3>
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         radioID="1"
@@ -237,7 +237,7 @@
         v-bind:positionInGroup="1"
         screenReaderOnlyText="(opens new window)"
         />
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         radioID="2"
@@ -250,7 +250,7 @@
         v-bind:positionInGroup="2"
         screenReaderOnlyText="(opens new window)"
         />
-        <radioHorizontal
+        <listButtonHorizontal
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         radioID="3"
@@ -422,23 +422,23 @@
 import buttonPrimary from "@/ux-components/button-primary/button-primary";
 import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
 import buttonBack from "@/ux-components/button-back/button-back";
-import radioCard from "@/ux-components/radio-card/radio-card";
+import listCard from "@/ux-components/list-card/list-card";
 import listButton from "@/ux-components/list-button/list-button";
 import alert from "@/ux-components/alert/alert";
 import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
 import siteHeader from "@/common-components/site-header/site-header";
-import radioHorizontal from "@/ux-components/radio-horizontal/radio-horizontal";
+import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
 export default {
   name: "App",
   components: {
     buttonPrimary,
     buttonSecondary,
     buttonBack,
-    radioCard,
+    listCard,
     listButton,
     alert,
     vehicleBanner,
-    radioHorizontal,
+    listButtonHorizontal,
     siteHeader,
   },
   data() {

src/styles/common-list-styles.scss

@@ -1,5 +1,5 @@
-.radiogroup {
+.list-group {
-  &.radio-list-button {
+  &.list-button {
     input[type="radio"] {
       opacity: 0;
       position: fixed;

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

@@ -1,7 +1,7 @@
 <!-- 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. -->
-  <div class="col radiogroup radio-horizontal d-flex flex-column mb-2">
+  <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"/>
     <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'>
       <span class="m-0" :class="[this.textPosition]">{{radioID}}</span>
@@ -16,7 +16,7 @@
 <script>
 import loader from "@/ux-components/loader/loader";
 export default {
-  name: "radioHorizontal",
+  name: "listButtonHorizontal",
   props: {
     groupName: String, /* Required, unique for each radio button GROUP */
     radioID: String, /* Required, unique for each radio button. Used for button id, label and <label for> */
@@ -58,7 +58,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.radio-horizontal {
+.list-button-horizontal {
   input[type="radio"] {
     opacity: 0;
     position: fixed;

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

@@ -1,6 +1,6 @@
 <template>
   <!-- See the component-test.vue page for example implementation -->
-  <div class="radiogroup radio-list-button d-flex flex-column w-100 mb-2">
+  <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()">
     <label role="radio" tabindex="-1" 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>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="col mb-3 d-flex radio-card">
+  <div class="col mb-3 d-flex list-card">
     <input
       type="radio"
       class="position-absolute opacity-0"
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-  name: "radioCard",
+  name: "listCard",
   props: [
     "groupName",
     "radioLabel",
@@ -46,7 +46,7 @@ export default {
 };
 </script>
 <style lang="scss">
-.radio-card {
+.list-card {
   input[type="radio"] {
     &:focus + label {
       background-color: $white;

src/ux-components/loader/loader.vue

@@ -62,6 +62,7 @@ export default {
   &.center {
     position: absolute;
     right: 50%;
+    transform: translateX(50%);
   }
   &.right {
     position: absolute;

vue.config.js

@@ -17,7 +17,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },

vue.release.config.js

@@ -16,7 +16,7 @@ module.exports = {
         @import "./node_modules/bootstrap/scss/bootstrap";
         @import "@/styles/common-styles.scss";
         @import "@/styles/common-button-styles.scss";
-        @import "@/styles/common-radio-styles.scss";
+        @import "@/styles/common-list-styles.scss";
         @import "@/styles/common-typography-styles.scss";
         `,
       },