CSR-241 WIP Checkbox component.

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">
+    <div class="row">
-      <listCard
+      <div class="col">
-        buttonLabel="Windshield"
+        <checkbox/>
-        buttonImage="windshield-damage.svg"
+      </div>
-        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>
     <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 {

src/ux-components/checkbox/checkbox.spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

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>

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 */

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 */

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

@@ -1,24 +1,16 @@
 <template>
-  <div class="col mb-3 d-flex list-card">
+  <div v-if="isMultiSelect" class="col mb-3 d-flex list-card">
-    <input
+    <label v-bind:for="buttonID" class="rounded-3 d-flex flex-column align-items-center w-100 checkbox">
-      type="radio"
+      <img class="mx-3 mt-3 mb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      class="position-absolute opacity-0"
+      <input type="checkbox" class="mb-3" :class="className" :id="buttonID" :name="groupName" :value="buttonLabel" v-model="picked" :tabindex="tabIndex" />
-      :class="className"
+      <span class="checkmark"></span>
-      :id="buttonID"
+      <span class="mt-auto mb-2 text-center lh-1">{{ buttonLabel }}</span>
-      :name="groupName"
+    </label>
-      :value="buttonLabel"
+  </div>
-      v-model="picked"
+  <div v-else class="col mb-3 d-flex list-card">
-      :tabindex="tabIndex"
+    <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">
-    <label
+      <img class="px-3 pt-3 pb-2 mt-auto" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
-      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: [
+  props: {
-    "groupName",
+    isMultiSelect: Boolean,
-    "buttonLabel",
+    groupName: String,
-    "buttonImage",
+    buttonLabel: String,
-    "altText",
+    buttonImage: String,
-    "buttonID",
+    altText: String,
-    "tabIndex",
+    buttonID: String,
-    "className",
+    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>