CSR-241 commit initial list-button functionality.

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">
+      <div class="col">
-        <legend class="sr-only">List Card Demo</legend>
+        <fieldset>
-        <listCard
+          <legend class="sr-only">List Card Demo</legend>
-          isMultiSelect
+          <listCard
-          buttonLabel="Windshield"
           buttonImage="windshield-damage.svg"
+          buttonLabel="Windshield"
           altText="Windshield"
-          groupName="damageKey"
+          buttonID="Damage Location"
-          buttonID="windshield"
+          groupID="checkbox-demo-1"
-          tabIndex="1"
+          />
-        />
+        </fieldset>
-        <listCard
+      </div>
-          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">

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

@@ -1,18 +1,9 @@
 <template>
-  <div class="list-card w-100">
+  <div class="list-card w-100 rounded-3 d-flex align-items-center" :class="[this.invalid]">
-    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100">
+    <input type="checkbox" :id="buttonID" :name="groupName" :value="buttonLabel" :aria-required="isRequired" />
-      <div class="item-container d-flex flex-column align-items-center">
+    <label :for="buttonID" class="d-flex flex-column w-100 align-items-center pt-4 pb-2" tabindex="1">
-        <div class="d-flex align-items-center">
+      <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-          <img v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
+      <p class="m-0 order-3">{{buttonLabel}}</p>
-        </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>
@@ -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,
+    groupName: String
-    className: String,
+  }
-  },
-  data() {
-    return {
-      picked: "picked",
-    };
-  },
 };
 </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"] {
+  &:hover {
-    &:focus + label {
+    box-shadow: 0px 0px 0px 6px $blue-100;
-      background-color: $white;
+    border: 1px solid transparent;
-      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;
-    }
   }
-  label {
+  input[type='checkbox'] {
-    background: $white;
+    position: absolute !important;
-    border: 1px solid $gray;
+    height: 1px;
-    padding: 1rem 0 .75rem 0;
+    width: 1px;
-    &:hover {
+    overflow: hidden;
-      cursor: pointer;
+    clip: rect(1px, 1px, 1px, 1px);
-      box-shadow: 0px 0px 0px 6px $blue-100;
+    + label {
-    }
+     display: block;
-
+     position: relative;
-  }
+     &:hover {
-  .item-container {
+       cursor: pointer;
-    div {
+     }
-      &:nth-child(2) {
+   }
-        padding: 18px 0 12px 0;
+   &: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>