CSR-241 WIP

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

@@ -48,30 +48,36 @@
       </div>
     </div>
     <div class="row g-2">
-      <listCard
+      <fieldset class="d-flex flex-row">
-        isMultiSelect
+        <legend class="sr-only">List Card Demo</legend>
-        buttonLabel="Windshield"
+        <listCard
-        buttonImage="windshield-damage.svg"
+          isMultiSelect
-        altText="Windshield"
+          buttonLabel="Windshield"
-        groupName="damageKey"
+          buttonImage="windshield-damage.svg"
-        buttonID="windshield"
+          altText="Windshield"
-      />
+          groupName="damageKey"
-      <listCard
+          buttonID="windshield"
-        isMultiSelect
+          tabIndex="1"
-        buttonLabel="Side Window"
+        />
-        buttonImage="side-window-damage.svg"
+        <listCard
-        altText="Side Window"
+          isMultiSelect
-        groupName="damageKey"
+          buttonLabel="Side Window"
-        buttonID="sidewindow"
+          buttonImage="side-window-damage.svg"
-      />
+          altText="Side Window"
-      <listCard
+          groupName="damageKey"
-        isMultiSelect
+          buttonID="sidewindow"
-        buttonLabel="Back Glass"
+          tabIndex="1"
-        buttonImage="back-glass-damage.svg"
+        />
-        altText="Back Glass"
+        <listCard
-        groupName="damageKey"
+          isMultiSelect
-        buttonID="backglass"
+          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,23 +1,22 @@
 <template>
-  <div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
+  <div class="list-card w-100">
-    <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" />
+      <div class="item-container d-flex flex-column align-items-center">
-      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
+        <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;
     }
+
   }
-
+  .item-container {
-  /* Hide the browser's default checkbox */
+    div {
-  input[type="checkbox"] {
+      &:nth-child(2) {
-    position: absolute;
+        padding: 18px 0 12px 0;
-    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>