From b5f17a41c8c3c976cba19ddec84e236a0d5e9d93 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 16 Dec 2021 17:17:50 -0500
Subject: [PATCH 1/6] CSR-241 WIP Checkbox component.

---
 src/layouts/component-test/component-test.vue |  85 ++++++++------
 src/ux-components/checkbox/checkbox.spec.js   |   1 +
 src/ux-components/checkbox/checkbox.vue       |  79 +++++++++++++
 .../list-button-horizontal.vue                |   4 +-
 src/ux-components/list-button/list-button.vue |   4 +-
 src/ux-components/list-card/list-card.vue     | 110 +++++++++++++-----
 6 files changed, 215 insertions(+), 68 deletions(-)
 create mode 100644 src/ux-components/checkbox/checkbox.spec.js
 create mode 100644 src/ux-components/checkbox/checkbox.vue

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index d33833eb6..af019d944 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -2,31 +2,13 @@
   <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">List Card</h4>
+        <h4 class="m-0 p-2 bg-light rounded">Inputs</h4>
       </div>
     </div>
-    <div class="row g-2">
-      <listCard
-        buttonLabel="Windshield"
-        buttonImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        buttonID="windshield"
-      />
-      <listCard
-        buttonLabel="Side Window"
-        buttonImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        buttonID="sidewindow"
-      />
-      <listCard
-        buttonLabel="Back Glass"
-        buttonImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        buttonID="backglass"
-      />
+    <div class="row">
+      <div class="col">
+        <checkbox/>
+      </div>
     </div>
     <div class="row my-4">
       <div class="col">
@@ -55,6 +37,37 @@
         <buttonBack/>
       </div>
     </div>
+    <div class="row my-4">
+      <div class="col">
+        <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+      </div>
+    </div>
+    <div class="row g-2">
+      <listCard
+        isMultiSelect
+        buttonLabel="Windshield"
+        buttonImage="windshield-damage.svg"
+        altText="Windshield"
+        groupName="damageKey"
+        buttonID="windshield"
+      />
+      <listCard
+        isMultiSelect
+        buttonLabel="Side Window"
+        buttonImage="side-window-damage.svg"
+        altText="Side Window"
+        groupName="damageKey"
+        buttonID="sidewindow"
+      />
+      <listCard
+        isMultiSelect
+        buttonLabel="Back Glass"
+        buttonImage="back-glass-damage.svg"
+        altText="Back Glass"
+        groupName="damageKey"
+        buttonID="backglass"
+      />
+    </div>
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Button - Single-Line</h4>
@@ -69,7 +82,7 @@
           Select Vehicle Year
         </h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2021"
@@ -81,7 +94,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2020"
@@ -93,7 +106,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-1"
         ariaLabelBy="vehicle-year"
         buttonID="2019"
@@ -159,7 +172,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-2-radio-group">Select Vehicle Year</h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Chevrolet"
@@ -171,7 +184,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Dodge"
@@ -183,7 +196,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-2"
         ariaLabelBy="vehicle-make"
         buttonID="Ford"
@@ -249,7 +262,7 @@
         <!-- The h3 and id must be included. The id must match the aria-labelledby of the parent div. -->
         <h3 class="sr-only" id="demo-3-radio-group">Multi-Line Centered</h3>
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Corvette"
@@ -261,7 +274,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="Testarosa"
@@ -273,7 +286,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButton
-        isCheckbox
+        isMultiSelect
         groupName="demo-3"
         ariaLabelBy="vehicle-model"
         buttonID="S600"
@@ -341,7 +354,7 @@
           Select Vehicle Year
         </h3>
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="1"
@@ -355,7 +368,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="2"
@@ -369,7 +382,7 @@
         screenReaderOnlyText="(opens new window)"
         />
         <listButtonHorizontal
-        isCheckbox
+        isMultiSelect
         groupName="demo-4"
         ariaLabelBy="vehicle-model"
         buttonID="3"
@@ -596,6 +609,7 @@ 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 listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
+import checkbox from "@/ux-components/checkbox/checkbox";
 export default {
   name: "App",
   components: {
@@ -608,6 +622,7 @@ export default {
     vehicleBanner,
     listButtonHorizontal,
     siteHeader,
+    checkbox
   },
   data() {
     return {
diff --git a/src/ux-components/checkbox/checkbox.spec.js b/src/ux-components/checkbox/checkbox.spec.js
new file mode 100644
index 000000000..3d0843e10
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.spec.js
@@ -0,0 +1 @@
+test.todo("some test to be written in the future");
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
new file mode 100644
index 000000000..2c145a1ad
--- /dev/null
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="ui-checkbox d-flex">
+    <input type="checkbox" name="Checkbox" id="check_1" tabindex="0" />
+    <label class="d-flex align-items-center" for="check_1">
+      <p class="m-0 lh-1">Checkbox</p>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "checkbox"
+};
+</script>
+
+<style lang="scss">
+.ui-checkbox {
+  position: relative;
+  input[type='checkbox'] {
+    position: absolute;
+  }
+
+  input[type='checkbox'] + label {
+    display: block;
+    position: relative;
+  }
+  input[type='checkbox'] + label::before {
+    content: '';
+    position: relative;
+    display: inline-block;
+    margin-right: 10px;
+    width: 16px;
+    height: 16px;
+    background: white;
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+  }
+  input[type='checkbox']:checked + label::before {
+    background: $blue;
+  }
+  input[type='checkbox']:checked + label::after {
+    content: '';
+    position: absolute;
+    top: 4px;
+    left: 2px;
+    border-left: 2px solid $white;
+    border-bottom: 2px solid $white;
+    height: 6px;
+    width: 12px;
+    transform: rotate(-45deg);
+  }
+  input[type='checkbox']:hover + label::before {
+    //outline: #5d9dd5 solid 1px;
+    box-shadow: 0 0 0 4px $blue-100;
+  }
+  input[type='checkbox']:focus + label::before {
+    //outline: #5d9dd5 solid 1px;
+    box-shadow: 0 0 0 2px $blue;
+  }
+  input[type='checkbox']:focus:checked + label::before {
+    box-shadow: 0 0 0 2px transparent;
+  }
+  input[type='checkbox'] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+  }
+  input[type='checkbox']:disabled + label {
+    color: #575757;
+  }
+
+  input[type='checkbox']:disabled + label::before {
+    background: #ddd;
+  }
+}
+</style>
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index b267f2bbb..5df8261ec 100644
--- a/src/ux-components/list-button-horizontal/list-button-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 buttons on desktop, 3 on mobile. -->
-  <div v-if="isCheckbox" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
+  <div v-if="isMultiSelect" class="list-group list-button-horizontal d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4" :class="isFirstOrLastButton">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -27,7 +27,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButtonHorizontal",
   props: {
-    isCheckbox: Boolean,
+    isMultiSelect: Boolean,
     groupName: String, /* Required, unique for each button GROUP */
     buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
     buttonLabelSubCopy: String, /* Optional, used for multi-line buttons */
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index a8ad64d8c..89de52e64 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 v-if="isCheckbox" class="list-group list-button d-flex flex-column w-100 mb-2">
+  <div v-if="isMultiSelect" class="list-group list-button d-flex flex-column w-100 mb-2">
     <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired">
     <label tabindex="-1" aria-checked="false" :for="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
       <span class="m-0" :class="[this.textPosition]">{{buttonID}}</span>
@@ -26,7 +26,7 @@ import loader from "@/ux-components/loader/loader";
 export default {
   name: "listButton",
   props: {
-    isCheckbox: Boolean,
+    isMultiSelect: Boolean,
     groupName: String, /* Required, unique for each button GROUP */
     buttonID: String, /* Required, unique for each button. Used for button id, label and <label for> */
     isRequired: Boolean, /* Optional, default is false */
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index be7434cc4..14cba0486 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,24 +1,16 @@
 <template>
-  <div class="col mb-3 d-flex list-card">
-    <input
-      type="radio"
-      class="position-absolute opacity-0"
-      :class="className"
-      :id="buttonID"
-      :name="groupName"
-      :value="buttonLabel"
-      v-model="picked"
-      :tabindex="tabIndex"
-    />
-    <label
-      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/${buttonImage}`)"
-        v-bind:alt="altText"
-      />
+  <div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
+    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100 checkbox">
+      <img class="mx-3 mt-3 mb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <input type="checkbox" class="mb-3" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+      <span class="checkmark"></span>
+      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
+    </label>
+  </div>
+  <div v-else class="col mb-3 d-flex list-card">
+    <input type="radio" class="position-absolute opacity-0" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+    <label 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/${buttonImage}`)" v-bind:alt="altText" />
       <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
     </label>
   </div>
@@ -29,15 +21,16 @@
 <script>
 export default {
   name: "listCard",
-  props: [
-    "groupName",
-    "buttonLabel",
-    "buttonImage",
-    "altText",
-    "buttonID",
-    "tabIndex",
-    "className",
-  ],
+  props: {
+    isMultiSelect: Boolean,
+    groupName: String,
+    buttonLabel: String,
+    buttonImage: String,
+    altText: String,
+    buttonID: String,
+    tabIndex: String,
+    className: String,
+  },
   data() {
     return {
       picked: "picked",
@@ -47,6 +40,9 @@ export default {
 </script>
 <style lang="scss">
 .list-card {
+  img {
+    width: 46px;
+  }
   input[type="radio"] {
     &:focus + label {
       background-color: $white;
@@ -73,5 +69,61 @@ export default {
       box-shadow: 0px 0px 0px 6px $blue-100;
     }
   }
+
+  /* Hide the browser's default checkbox */
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  /* Create a custom checkbox */
+  .checkmark {
+    position: relative;
+    top: 0;
+    left: 0;
+    height: 16px;
+    width: 16px;
+    background-color: $white;
+    border: 1px solid $gray-500;
+    border-radius: 2px;
+  }
+
+  /* On mouse-over, add a grey background color */
+  // .checkbox:hover input ~ .checkmark {
+  //   background-color: $white;
+  //   border: 1px solid $gray-300;
+  //   box-shadow: 0px 0px 0px 4px $blue-200;
+  // }
+
+  /* When the checkbox is checked, add a blue background */
+  .checkbox input:checked ~ .checkmark {
+    background-color: $blue;
+  }
+
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  /* Show the checkmark when checked */
+  .checkbox input:checked ~ .checkmark:after {
+    display: block;
+  }
+
+  /* Style the checkmark/indicator */
+  .checkbox .checkmark:after {
+    left: 5px;
+    top: 1px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
 }
 </style>

From 8abe40c7047cb073a2c4e4ef17ac946833c13dcf Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Thu, 16 Dec 2021 17:29:44 -0500
Subject: [PATCH 2/6] CSR-241 WIP checkbox props update.

---
 src/layouts/component-test/component-test.vue |  7 ++++++-
 src/ux-components/checkbox/checkbox.vue       | 14 ++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index af019d944..15aeef9f6 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -7,7 +7,12 @@
     </div>
     <div class="row">
       <div class="col">
-        <checkbox/>
+        <checkbox
+          checkboxName="demo checkbox"
+          buttonID="checkbox-1"
+          tabIndex="1"
+          checkboxLabel="I'm a checkbox"
+        />
       </div>
     </div>
     <div class="row my-4">
diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 2c145a1ad..22d6a6784 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,15 +1,21 @@
 <template>
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" name="Checkbox" id="check_1" tabindex="0" />
-    <label class="d-flex align-items-center" for="check_1">
-      <p class="m-0 lh-1">Checkbox</p>
+    <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
+    <label class="d-flex align-items-center" :for="buttonID">
+      <p class="m-0 lh-1">{{checkboxLabel}}</p>
     </label>
   </div>
 </template>
 
 <script>
 export default {
-  name: "checkbox"
+  name: "checkbox",
+  props: {
+    checkboxName: String,
+    buttonID: String,
+    tabIndex: Number,
+    checkboxLabel: String
+  }
 };
 </script>
 

From f26ab03cdbde3c48b9036fd7985973fafd1fa22e Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 06:35:43 -0500
Subject: [PATCH 3/6] CSR-241 WIP css cleanup.

---
 src/ux-components/checkbox/checkbox.vue | 98 ++++++++++++-------------
 1 file changed, 45 insertions(+), 53 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 22d6a6784..9639f93e8 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -2,7 +2,7 @@
   <div class="ui-checkbox d-flex">
     <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
     <label class="d-flex align-items-center" :for="buttonID">
-      <p class="m-0 lh-1">{{checkboxLabel}}</p>
+      <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
     </label>
   </div>
 </template>
@@ -22,64 +22,56 @@ export default {
 <style lang="scss">
 .ui-checkbox {
   position: relative;
-  input[type='checkbox'] {
-    position: absolute;
-  }
-
-  input[type='checkbox'] + label {
-    display: block;
-    position: relative;
-  }
-  input[type='checkbox'] + label::before {
-    content: '';
-    position: relative;
-    display: inline-block;
-    margin-right: 10px;
-    width: 16px;
-    height: 16px;
-    background: white;
-    border: 1px solid $gray-500;
-    border-radius: 2px;
-  }
-  input[type='checkbox']:checked + label::before {
-    background: $blue;
-  }
-  input[type='checkbox']:checked + label::after {
-    content: '';
-    position: absolute;
-    top: 4px;
-    left: 2px;
-    border-left: 2px solid $white;
-    border-bottom: 2px solid $white;
-    height: 6px;
-    width: 12px;
-    transform: rotate(-45deg);
-  }
-  input[type='checkbox']:hover + label::before {
-    //outline: #5d9dd5 solid 1px;
-    box-shadow: 0 0 0 4px $blue-100;
-  }
-  input[type='checkbox']:focus + label::before {
-    //outline: #5d9dd5 solid 1px;
-    box-shadow: 0 0 0 2px $blue;
-  }
-  input[type='checkbox']:focus:checked + label::before {
-    box-shadow: 0 0 0 2px transparent;
-  }
   input[type='checkbox'] {
     position: absolute !important;
     height: 1px;
     width: 1px;
     overflow: hidden;
-    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
     clip: rect(1px, 1px, 1px, 1px);
-  }
-  input[type='checkbox']:disabled + label {
-    color: #575757;
-  }
-
-  input[type='checkbox']:disabled + label::before {
-    background: #ddd;
+    + label {
+      display: block;
+      position: relative;
+    }
+    + label::before {
+      content: '';
+      position: relative;
+      display: inline-block;
+      margin-right: 10px;
+      width: 16px;
+      height: 16px;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+    }
+    &:checked + label::before {
+      background: $blue;
+    }
+    &:checked + label::after {
+      content: '';
+      position: absolute;
+      top: 8px;
+      left: 2px;
+      border-left: 2px solid $white;
+      border-bottom: 2px solid $white;
+      height: 6px;
+      width: 12px;
+      transform: rotate(-45deg);
+    }
+    &:hover + label::before {
+      box-shadow: 0 0 0 4px $blue-100;
+    }
+    &:focus + label::before {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:focus:checked + label::before {
+      box-shadow: 0 0 0 2px transparent;
+    }
+    &:disabled + label {
+      color: $gray-200;
+    }
+    &:disabled + label::before {
+      background: $gray-200;
+    }
   }
 }
 </style>

From 3fe95f55a9e26691eebea129c7714b25fd55dc40 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 08:59:27 -0500
Subject: [PATCH 4/6] CSR-241 WIP checkbox updates.

---
 src/ux-components/checkbox/checkbox.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 9639f93e8..1b6254d29 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,8 +1,10 @@
 <template>
+  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
   <div class="ui-checkbox d-flex">
-    <input type="checkbox" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" />
+    <input type="checkbox" aria-checked="false" :name="checkboxName" :id="buttonID" :tabindex="tabIndex" :aria-required="isRequired" />
     <label class="d-flex align-items-center" :for="buttonID">
       <p v-if="checkboxLabel" class="m-0">{{checkboxLabel}}</p>
+      <span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
     </label>
   </div>
 </template>
@@ -14,7 +16,9 @@ export default {
     checkboxName: String,
     buttonID: String,
     tabIndex: Number,
-    checkboxLabel: String
+    checkboxLabel: String,
+    screenReaderOnlyText: String,
+    isRequired: Boolean
   }
 };
 </script>

From ed621ae2bb97a27d18abb1663964392ca6352cd0 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Fri, 17 Dec 2021 16:56:08 -0500
Subject: [PATCH 5/6] CSR-241 WIP

---
 src/layouts/component-test/component-test.vue | 54 ++++++-----
 src/ux-components/list-card/list-card.vue     | 95 +++++--------------
 2 files changed, 55 insertions(+), 94 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 15aeef9f6..849bb1cd7 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -48,30 +48,36 @@
       </div>
     </div>
     <div class="row g-2">
-      <listCard
-        isMultiSelect
-        buttonLabel="Windshield"
-        buttonImage="windshield-damage.svg"
-        altText="Windshield"
-        groupName="damageKey"
-        buttonID="windshield"
-      />
-      <listCard
-        isMultiSelect
-        buttonLabel="Side Window"
-        buttonImage="side-window-damage.svg"
-        altText="Side Window"
-        groupName="damageKey"
-        buttonID="sidewindow"
-      />
-      <listCard
-        isMultiSelect
-        buttonLabel="Back Glass"
-        buttonImage="back-glass-damage.svg"
-        altText="Back Glass"
-        groupName="damageKey"
-        buttonID="backglass"
-      />
+      <fieldset class="d-flex flex-row">
+        <legend class="sr-only">List Card Demo</legend>
+        <listCard
+          isMultiSelect
+          buttonLabel="Windshield"
+          buttonImage="windshield-damage.svg"
+          altText="Windshield"
+          groupName="damageKey"
+          buttonID="windshield"
+          tabIndex="1"
+        />
+        <listCard
+          isMultiSelect
+          buttonLabel="Side Window"
+          buttonImage="side-window-damage.svg"
+          altText="Side Window"
+          groupName="damageKey"
+          buttonID="sidewindow"
+          tabIndex="1"
+        />
+        <listCard
+          isMultiSelect
+          buttonLabel="Back Glass"
+          buttonImage="back-glass-damage.svg"
+          altText="Back Glass"
+          groupName="damageKey"
+          buttonID="backglass"
+          tabIndex="1"
+        />
+      </fieldset>
     </div>
     <div class="row my-4">
       <div class="col">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 14cba0486..8afdac8da 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,23 +1,22 @@
 <template>
-  <div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
-    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100 checkbox">
-      <img class="mx-3 mt-3 mb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      <input type="checkbox" class="mb-3" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
-      <span class="checkmark"></span>
-      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
-    </label>
-  </div>
-  <div v-else class="col mb-3 d-flex list-card">
-    <input type="radio" class="position-absolute opacity-0" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+  <div class="list-card w-100">
     <label 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/${buttonImage}`)" v-bind:alt="altText" />
-      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
+      <div class="item-container d-flex flex-column align-items-center">
+        <div class="d-flex align-items-center">
+          <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+        </div>
+        <div>
+          <input type="checkbox" class="d-flex align-self-center" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
+          <span class="checkmark"></span>
+        </div>
+        <div>
+          <span class="mt-auto mb-2 text-center">{{ buttonLabel }}</span>
+        </div>
+      </div>
     </label>
   </div>
 </template>
 
-<!-- tabIndex="x" is available on this component if needed -->
-
 <script>
 export default {
   name: "listCard",
@@ -38,10 +37,12 @@ export default {
   },
 };
 </script>
+
 <style lang="scss">
 .list-card {
   img {
-    width: 46px;
+    height: 26px;
+    width: auto;
   }
   input[type="radio"] {
     &:focus + label {
@@ -64,66 +65,20 @@ export default {
   label {
     background: $white;
     border: 1px solid $gray;
+    padding: 1rem 0 .75rem 0;
     &:hover {
       cursor: pointer;
       box-shadow: 0px 0px 0px 6px $blue-100;
     }
+
   }
-
-  /* Hide the browser's default checkbox */
-  input[type="checkbox"] {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  /* Create a custom checkbox */
-  .checkmark {
-    position: relative;
-    top: 0;
-    left: 0;
-    height: 16px;
-    width: 16px;
-    background-color: $white;
-    border: 1px solid $gray-500;
-    border-radius: 2px;
-  }
-
-  /* On mouse-over, add a grey background color */
-  // .checkbox:hover input ~ .checkmark {
-  //   background-color: $white;
-  //   border: 1px solid $gray-300;
-  //   box-shadow: 0px 0px 0px 4px $blue-200;
-  // }
-
-  /* When the checkbox is checked, add a blue background */
-  .checkbox input:checked ~ .checkmark {
-    background-color: $blue;
-  }
-
-  /* Create the checkmark/indicator (hidden when not checked) */
-  .checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
-
-  /* Show the checkmark when checked */
-  .checkbox input:checked ~ .checkmark:after {
-    display: block;
-  }
-
-  /* Style the checkmark/indicator */
-  .checkbox .checkmark:after {
-    left: 5px;
-    top: 1px;
-    width: 5px;
-    height: 10px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
+  .item-container {
+    div {
+      &:nth-child(2) {
+        padding: 18px 0 12px 0;
+      }
+    }
   }
 }
+
 </style>

From f568a930fdb642a4902cb74e58add59d4e158440 Mon Sep 17 00:00:00 2001
From: bmauger <mauger.bryan@gmail.com>
Date: Tue, 21 Dec 2021 12:00:45 -0500
Subject: [PATCH 6/6] CSR-241 commit initial list-button functionality.

---
 src/layouts/component-test/component-test.vue |  39 ++----
 src/ux-components/list-card/list-card.vue     | 132 ++++++++++--------
 2 files changed, 83 insertions(+), 88 deletions(-)

diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue
index 849bb1cd7..b2452d700 100644
--- a/src/layouts/component-test/component-test.vue
+++ b/src/layouts/component-test/component-test.vue
@@ -45,39 +45,22 @@
     <div class="row my-4">
       <div class="col">
         <h4 class="m-0 p-2 bg-light rounded">List Card</h4>
+        <h6 class="mx-2 my-0">Functioning as Checkbox</h6>
       </div>
     </div>
     <div class="row g-2">
-      <fieldset class="d-flex flex-row">
-        <legend class="sr-only">List Card Demo</legend>
-        <listCard
-          isMultiSelect
-          buttonLabel="Windshield"
+      <div class="col">
+        <fieldset>
+          <legend class="sr-only">List Card Demo</legend>
+          <listCard
           buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
           altText="Windshield"
-          groupName="damageKey"
-          buttonID="windshield"
-          tabIndex="1"
-        />
-        <listCard
-          isMultiSelect
-          buttonLabel="Side Window"
-          buttonImage="side-window-damage.svg"
-          altText="Side Window"
-          groupName="damageKey"
-          buttonID="sidewindow"
-          tabIndex="1"
-        />
-        <listCard
-          isMultiSelect
-          buttonLabel="Back Glass"
-          buttonImage="back-glass-damage.svg"
-          altText="Back Glass"
-          groupName="damageKey"
-          buttonID="backglass"
-          tabIndex="1"
-        />
-      </fieldset>
+          buttonID="Damage Location"
+          groupID="checkbox-demo-1"
+          />
+        </fieldset>
+      </div>
     </div>
     <div class="row my-4">
       <div class="col">
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 8afdac8da..157c15de3 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -1,18 +1,9 @@
 <template>
-  <div class="list-card w-100">
-    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100">
-      <div class="item-container d-flex flex-column align-items-center">
-        <div class="d-flex align-items-center">
-          <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-        </div>
-        <div>
-          <input type="checkbox" class="d-flex align-self-center" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
-          <span class="checkmark"></span>
-        </div>
-        <div>
-          <span class="mt-auto mb-2 text-center">{{ buttonLabel }}</span>
-        </div>
-      </div>
+  <div class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
+      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="m-0 order-3">{{buttonLabel}}</p>
     </label>
   </div>
 </template>
@@ -21,64 +12,85 @@
 export default {
   name: "listCard",
   props: {
-    isMultiSelect: Boolean,
-    groupName: String,
-    buttonLabel: String,
     buttonImage: String,
+    buttonLabel: String,
     altText: String,
     buttonID: String,
-    tabIndex: String,
-    className: String,
-  },
-  data() {
-    return {
-      picked: "picked",
-    };
-  },
+    groupName: String
+  }
 };
 </script>
 
 <style lang="scss">
 .list-card {
+  border: 1px solid $gray-500;
+  &.invalid { //Red border if invalid
+    border: 1px solid $red;
+  }
   img {
-    height: 26px;
+    height: 46px;
     width: auto;
+    order: 1;
+    margin-bottom: 3rem;
   }
-  input[type="radio"] {
-    &:focus + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:focus-visible + label {
-      background-color: $white;
-      box-shadow: 0px 0px 0px 4px $blue;
-    }
-    &:checked + label {
-      background-color: $blue-100;
-      border: 1px solid $blue;
-    }
-    &.invalid + label {
-      background-color: $white;
-      border: 1px solid $red;
-    }
+  &:hover {
+    box-shadow: 0px 0px 0px 6px $blue-100;
+    border: 1px solid transparent;
   }
-  label {
-    background: $white;
-    border: 1px solid $gray;
-    padding: 1rem 0 .75rem 0;
-    &:hover {
-      cursor: pointer;
-      box-shadow: 0px 0px 0px 6px $blue-100;
-    }
-
-  }
-  .item-container {
-    div {
-      &:nth-child(2) {
-        padding: 18px 0 12px 0;
-      }
-    }
+  input[type='checkbox'] {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    + label {
+     display: block;
+     position: relative;
+     &:hover {
+       cursor: pointer;
+     }
+   }
+   &:focus + label {
+     box-shadow: 0 0 0 2.5px $blue;
+     border-radius: .5rem;
+   }
+   &:checked + label {
+     background: $blue-100;
+     box-shadow: 0 0 0 1px $blue;
+     border-radius: .5rem;
+   }
+   + label::before {
+     content: "";
+      position: absolute;
+      display: flex;
+      margin: 0 auto;
+      width: 1rem;
+      height: 1rem;
+      margin: 4rem 0 0 0;
+      background: white;
+      border: 1px solid $gray-500;
+      border-radius: 2px;
+      order: 2;
+   }
+   &:checked + label::before {
+     background: $blue;
+   }
+   &:checked + label::after {
+     content: '';
+     position: absolute;
+     margin: 4.2rem 0 0 0;
+     border-left: 2px solid $white;
+     border-bottom: 2px solid $white;
+     height: 6px;
+     width: 11px;
+     transform: rotate(-45deg);
+   }
+   &:disabled + label {
+     color: #575757;
+   }
+   &:disabled + label::before {
+     background: #ddd;
+   }
   }
 }
-
 </style>