From 863d60ee8912713b9f008f6c887a625ab2b81c1c Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 19 Nov 2021 09:06:22 -0500
Subject: [PATCH] Updated files and folders.

---
 src/layouts/component-test/component-test.vue | 284 +++++++++++++-----
 src/layouts/componentTest/componentTest.vue   | 244 ---------------
 src/ux-components/radio-list/radio-list.vue   |  48 +--
 src/uxComponents/radioList/radioList.vue      |  36 ---
 4 files changed, 236 insertions(+), 376 deletions(-)
 delete mode 100644 src/layouts/componentTest/componentTest.vue
 delete mode 100644 src/uxComponents/radioList/radioList.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 7351b2bff..205778e54 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -1,112 +1,244 @@
 <template>
-<div class="container-fluid container-shadow p-2 rounded-3">
+  <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>
+      </div>
+    </div>
     <div class="row g-2">
-        <radioCard radioLabel="Windshield" radioImage="windshield-damage.svg" altText="Windshield" groupName="damageKey" radioID="windshield" />
-        <radioCard radioLabel="Side Window" radioImage="side-window-damage.svg" altText="Side Window" groupName="damageKey" radioID="sidewindow" />
-        <radioCard radioLabel="Back Glass" radioImage="back-glass-damage.svg" altText="Back Glass" groupName="damageKey" radioID="backglass" />
+      <radioCard
+      radioLabel="Windshield"
+      radioImage="windshield-damage.svg"
+      altText="Windshield"
+      groupName="damageKey"
+      radioID="windshield"
+      />
+      <radioCard
+      radioLabel="Side Window"
+      radioImage="side-window-damage.svg"
+      altText="Side Window"
+      groupName="damageKey"
+      radioID="sidewindow"
+      />
+      <radioCard
+      radioLabel="Back Glass"
+      radioImage="back-glass-damage.svg"
+      altText="Back Glass"
+      groupName="damageKey"
+      radioID="backglass"
+      />
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary buttonText="Primary" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonPrimary
+        buttonText="Primary"
+        />
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <buttonSecondary buttonText="Secondary" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <buttonSecondary
+        buttonText="Secondary"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <listButton buttonText="List Button" errorText="Test error message" />
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <listButton
+        buttonText="List Button"
+        errorText="Test error message"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
+      </div>
     </div>
     <div class="row">
-        <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-        <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
-            <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-            <h3 class="visually-hidden" id="select-year-radio-group">
-                Select Vehicle Year
-            </h3>
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2021" errorMessage="Test error message" />
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2020" errorMessage="Test error message" />
-            <radioList groupName="demo" ariaLabelBy="vehicle-year" radioID="2019" errorMessage="Test error message" />
-        </div>
+      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
+      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
+        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
+        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2021"
+        spinnerColor="blue"
+        spinnerPosition="right"
+        />
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2020"
+        spinnerColor="blue"
+        spinnerPosition="right"
+        />
+        <radioList
+        groupName="demo"
+        ariaLabelBy="vehicle-year"
+        radioID="2019"
+        spinnerColor="blue"
+        spinnerPosition="right"
+        />
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
+      </div>
     </div>
     <div class="row">
-        <div class="col my-3 d-flex align-items-center">
-            <a href="#">Text Link</a>
-        </div>
+      <div class="col my-3 d-flex align-items-center">
+        <a href="#">Text Link</a>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <p>This is default body copy font size/weight</p>
-            <p class="small">
-                This is small body copy using <code>.small</code> class
-            </p>
-            <p>
-                <small>This is also small using <code>&lt;small&gt;</code> tag</small>
-            </p>
-        </div>
+      <div class="col">
+        <p>This is default body copy font size/weight</p>
+        <p class="small">This is small body copy using <code>.small</code> class</p>
+        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
+      </div>
+    </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h1>h1 Heading</h1>
-        </div>
+      <div class="col">
+        <h1>h1 Heading</h1>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h2>h2 Heading</h2>
-        </div>
+      <div class="col">
+        <h2>h2 Heading</h2>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h3>h3 Heading</h3>
-        </div>
+      <div class="col">
+        <h3>h3 Heading</h3>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h4>h4 Heading</h4>
-        </div>
+      <div class="col">
+        <h4>h4 Heading</h4>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h5>h5 Heading</h5>
-        </div>
+      <div class="col">
+        <h5>h5 Heading</h5>
+      </div>
     </div>
     <div class="row my-2">
-        <div class="col">
-            <h6>h6 Heading</h6>
-        </div>
+      <div class="col">
+        <h6>h6 Heading</h6>
+      </div>
     </div>
-    <div class="my-3">
-        <div class="select-car">
-            <div class="select-car-form">
-                <radioQuestion questionText="What year is your vehicle?" :answers="this.years" />
-            </div>
-        </div>
+    <div class="row my-4">
+      <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
+      </div>
     </div>
-</div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="Dismissible Alert"
+        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
+        v-bind:isDismissible = "true"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="NON-Dismissible Alert"
+        alertCopy="This is an example of a NON-DISMISSIBLE alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-warning"
+        alertHeadline="Warning Alert"
+        alertCopy="This is an example of a WARNING alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-info"
+        alertHeadline="Info Alert"
+        alertCopy="This is an example of a INFO alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-danger"
+        alertHeadline="Danger Alert"
+        alertCopy="This is an example of a DANGER alert."
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+    <div class="row my-2">
+      <div class="col">
+        <alert
+        alertClass="alert-success"
+        alertHeadline="No Body Copy Alert"
+        alertCopy=""
+        v-bind:isDismissible = "false"
+        />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import buttonPrimary from "@/ux-components/button-primary/button-primary";
-import buttonSecondary from "@/ux-components/button-secondary/button-secondary";
-import radioCard from "@/ux-components/radio-card/radio-card";
-import listButton from "@/ux-components/list-button/list-button";
-import radioList from "@/ux-components/radio-list/radio-list";
-export default {
+  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
+  import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
+  import radioCard from "@/uxComponents/radioCard/radioCard";
+  import listButton from "@/uxComponents/listButton/listButton";
+  import radioList from "@/uxComponents/radioList/radioList";
+  import alert from "@/uxComponents/alert/alert";
+  export default {
     name: "App",
     components: {
-        buttonPrimary,
-        buttonSecondary,
-        radioCard,
-        listButton,
-        radioList,
+      buttonPrimary,
+      buttonSecondary,
+      radioCard,
+      listButton,
+      radioList,
+      alert
     },
     data() {
-        return {
-            years: [2023, 2022, 2021, 2020],
-        };
-    },
-};
+      return {
+        years: [2023, 2022, 2021, 2020],
+      };
+    }
+  };
 </script>
diff --git a/src/layouts/componentTest/componentTest.vue b/src/layouts/componentTest/componentTest.vue
deleted file mode 100644
index 205778e54..000000000
--- a/src/layouts/componentTest/componentTest.vue
+++ /dev/null
@@ -1,244 +0,0 @@
-<template>
-  <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>
-      </div>
-    </div>
-    <div class="row g-2">
-      <radioCard
-      radioLabel="Windshield"
-      radioImage="windshield-damage.svg"
-      altText="Windshield"
-      groupName="damageKey"
-      radioID="windshield"
-      />
-      <radioCard
-      radioLabel="Side Window"
-      radioImage="side-window-damage.svg"
-      altText="Side Window"
-      groupName="damageKey"
-      radioID="sidewindow"
-      />
-      <radioCard
-      radioLabel="Back Glass"
-      radioImage="back-glass-damage.svg"
-      altText="Back Glass"
-      groupName="damageKey"
-      radioID="backglass"
-      />
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Buttons</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonPrimary
-        buttonText="Primary"
-        />
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <buttonSecondary
-        buttonText="Secondary"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">List Button</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <listButton
-        buttonText="List Button"
-        errorText="Test error message"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Radio Button Group</h4>
-      </div>
-    </div>
-    <div class="row">
-      <!-- The role="radiogroup" and aria-labelledby must be included in the parent component for the radio group -->
-      <div role="radiogroup" aria-labelledby="select-year-radio-group" class="col my-3 d-flex align-items-center flex-column">
-        <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
-        <h3 class="visually-hidden" id="select-year-radio-group">Select Vehicle Year</h3>
-        <radioList
-        groupName="demo"
-        ariaLabelBy="vehicle-year"
-        radioID="2021"
-        spinnerColor="blue"
-        spinnerPosition="right"
-        />
-        <radioList
-        groupName="demo"
-        ariaLabelBy="vehicle-year"
-        radioID="2020"
-        spinnerColor="blue"
-        spinnerPosition="right"
-        />
-        <radioList
-        groupName="demo"
-        ariaLabelBy="vehicle-year"
-        radioID="2019"
-        spinnerColor="blue"
-        spinnerPosition="right"
-        />
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Text Link</h4>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col my-3 d-flex align-items-center">
-        <a href="#">Text Link</a>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Typogrophy</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <p>This is default body copy font size/weight</p>
-        <p class="small">This is small body copy using <code>.small</code> class</p>
-        <p><small>This is also small using <code>&lt;small&gt;</code> tag</small></p>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Headings</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h1>h1 Heading</h1>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h2>h2 Heading</h2>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h3>h3 Heading</h3>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h4>h4 Heading</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h5>h5 Heading</h5>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <h6>h6 Heading</h6>
-      </div>
-    </div>
-    <div class="row my-4">
-      <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Alerts</h4>
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-success"
-        alertHeadline="Dismissible Alert"
-        alertCopy="This is an example of a DISMISSIBLE alert. It will fade away and content around it will shift when dismissed."
-        v-bind:isDismissible = "true"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-danger"
-        alertHeadline="NON-Dismissible Alert"
-        alertCopy="This is an example of a NON-DISMISSIBLE alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-warning"
-        alertHeadline="Warning Alert"
-        alertCopy="This is an example of a WARNING alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-info"
-        alertHeadline="Info Alert"
-        alertCopy="This is an example of a INFO alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-danger"
-        alertHeadline="Danger Alert"
-        alertCopy="This is an example of a DANGER alert."
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-    <div class="row my-2">
-      <div class="col">
-        <alert
-        alertClass="alert-success"
-        alertHeadline="No Body Copy Alert"
-        alertCopy=""
-        v-bind:isDismissible = "false"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
-  import buttonSecondary from "@/uxComponents/buttonSecondary/buttonSecondary";
-  import radioCard from "@/uxComponents/radioCard/radioCard";
-  import listButton from "@/uxComponents/listButton/listButton";
-  import radioList from "@/uxComponents/radioList/radioList";
-  import alert from "@/uxComponents/alert/alert";
-  export default {
-    name: "App",
-    components: {
-      buttonPrimary,
-      buttonSecondary,
-      radioCard,
-      listButton,
-      radioList,
-      alert
-    },
-    data() {
-      return {
-        years: [2023, 2022, 2021, 2020],
-      };
-    }
-  };
-</script>
diff --git a/src/ux-components/radio-list/radio-list.vue b/src/ux-components/radio-list/radio-list.vue
index b6a02eca2..24b23effa 100644
--- a/src/ux-components/radio-list/radio-list.vue
+++ b/src/ux-components/radio-list/radio-list.vue
@@ -1,28 +1,36 @@
 <template>
-<div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID" />
-    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2" v-on:click="showLoader()" v-bind:class="[
-        this.isLoading ? 'button-loader' : 'not-loading',
-        this.isError ? 'error' : '',
-      ]">{{ radioID }}</label>
-    <p class="small">{{ errorMessage }}</p>
-</div>
+  <div class="radiogroup radio-list-button d-flex flex-column w-100">
+    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
+    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
+    v-on:click="showLoader()"
+    v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
+    >{{radioID}}</label>
+    <p class="small">{{errorMessage}}</p>
+  </div>
 </template>
 
 <script>
 export default {
-    name: "radioList",
-    props: ["groupName", "ariaLabelBy", "radioID", "errorMessage"],
-    data() {
-        return {
-            isLoading: false,
-            isError: false,
-        };
-    },
-    methods: {
-        showLoader() {
-            this.isLoading = true;
-        },
+  name: "radioList",
+  props: [
+    "groupName",
+    "ariaLabelBy",
+    "radioID",
+    "errorMessage",
+    "spinnerColor",
+    "spinnerPosition"
+
+  ],
+  data() {
+    return {
+      isLoading: false,
+      isError: false
+    };
+  },
+  methods: {
+    showLoader() {
+      this.isLoading = true;
     },
+  },
 };
 </script>
diff --git a/src/uxComponents/radioList/radioList.vue b/src/uxComponents/radioList/radioList.vue
deleted file mode 100644
index 24b23effa..000000000
--- a/src/uxComponents/radioList/radioList.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div class="radiogroup radio-list-button d-flex flex-column w-100">
-    <input type="radio" v-bind:id="radioID" v-bind:name="groupName" v-bind:value="radioID">
-    <label role="radio" tabindex="0" aria-checked="false" v-bind:for="radioID" class="mb-2 d-flex align-items-center p-2"
-    v-on:click="showLoader()"
-    v-bind:class="[this.isLoading ? 'spinner' : 'not-loading',this.isError ? 'error' : '', this.spinnerColor, this.spinnerPosition]"
-    >{{radioID}}</label>
-    <p class="small">{{errorMessage}}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "radioList",
-  props: [
-    "groupName",
-    "ariaLabelBy",
-    "radioID",
-    "errorMessage",
-    "spinnerColor",
-    "spinnerPosition"
-
-  ],
-  data() {
-    return {
-      isLoading: false,
-      isError: false
-    };
-  },
-  methods: {
-    showLoader() {
-      this.isLoading = true;
-    },
-  },
-};
-</script>