From e7e0f234d44c0157815b9d9c6327ec9f0b83debe Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 14 Dec 2021 08:49:46 -0500
Subject: [PATCH] Renam radio components, css naming.

---
 src/layouts/component-test/component-test.vue | 30 +++++++++----------
 ...io-styles.scss => common-list-styles.scss} |  4 +--
 .../list-button-horizontal.spec.js}           |  0
 .../list-button-horizontal.vue}               |  6 ++--
 src/ux-components/list-button/list-button.vue |  2 +-
 .../list-card.spec.js}                        |  0
 .../list-card.vue}                            |  6 ++--
 src/ux-components/loader/loader.vue           |  1 +
 vue.config.js                                 |  2 +-
 vue.release.config.js                         |  2 +-
 10 files changed, 27 insertions(+), 26 deletions(-)
 rename src/styles/{common-radio-styles.scss => common-list-styles.scss} (95%)
 rename src/ux-components/{radio-horizontal/radio-horizontal.spec.js => list-button-horizontal/list-button-horizontal.spec.js} (100%)
 rename src/ux-components/{radio-horizontal/radio-horizontal.vue => list-button-horizontal/list-button-horizontal.vue} (96%)
 rename src/ux-components/{radio-card/radio-card.spec.js => list-card/list-card.spec.js} (100%)
 rename src/ux-components/{radio-card/radio-card.vue => list-card/list-card.vue} (95%)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 9729477d1..5ce2f5590 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/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() {
diff --git a/src/styles/common-radio-styles.scss b/src/styles/common-list-styles.scss
similarity index 95%
rename from src/styles/common-radio-styles.scss
rename to src/styles/common-list-styles.scss
index 2bee198bf..4eb174a02 100644
--- a/src/styles/common-radio-styles.scss
+++ b/src/styles/common-list-styles.scss
@@ -1,5 +1,5 @@
-.radiogroup {
-  &.radio-list-button {
+.list-group {
+  &.list-button {
     input[type="radio"] {
       opacity: 0;
       position: fixed;
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
similarity index 100%
rename from src/ux-components/radio-horizontal/radio-horizontal.spec.js
rename to src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
diff --git a/src/ux-components/radio-horizontal/radio-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
similarity index 96%
rename from src/ux-components/radio-horizontal/radio-horizontal.vue
rename to src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 9f04efe04..960a7b0e9 100644
--- a/src/ux-components/radio-horizontal/radio-horizontal.vue
+++ b/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;
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 0dd49926f..70ee0528c 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/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>
diff --git a/src/ux-components/radio-card/radio-card.spec.js b/src/ux-components/list-card/list-card.spec.js
similarity index 100%
rename from src/ux-components/radio-card/radio-card.spec.js
rename to src/ux-components/list-card/list-card.spec.js
diff --git a/src/ux-components/radio-card/radio-card.vue b/src/ux-components/list-card/list-card.vue
similarity index 95%
rename from src/ux-components/radio-card/radio-card.vue
rename to src/ux-components/list-card/list-card.vue
index 0789827ef..d0ecb74b6 100644
--- a/src/ux-components/radio-card/radio-card.vue
+++ b/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;
diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue
index 68dba4974..37477d83a 100644
--- a/src/ux-components/loader/loader.vue
+++ b/src/ux-components/loader/loader.vue
@@ -62,6 +62,7 @@ export default {
   &.center {
     position: absolute;
     right: 50%;
+    transform: translateX(50%);
   }
   &.right {
     position: absolute;
diff --git a/vue.config.js b/vue.config.js
index aba5fd140..9d9b2401b 100644
--- a/vue.config.js
+++ b/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";
         `,
       },
diff --git a/vue.release.config.js b/vue.release.config.js
index 6cf78123c..c4b18d5dd 100644
--- a/vue.release.config.js
+++ b/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";
         `,
       },