From fc867ac32b6f91122198130f6d7ab66a1da38176 Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Thu, 17 Nov 2022 09:28:25 -0500
Subject: [PATCH] commit

---
 src/ux-components/checkbox/checkbox.vue | 169 +++++++-----------------
 1 file changed, 47 insertions(+), 122 deletions(-)

diff --git a/src/ux-components/checkbox/checkbox.vue b/src/ux-components/checkbox/checkbox.vue
index 29234e1c..cbc1120c 100644
--- a/src/ux-components/checkbox/checkbox.vue
+++ b/src/ux-components/checkbox/checkbox.vue
@@ -1,140 +1,65 @@
 <template>
-    <button
-        :aria-disabled="isDisabled"
-        class="btn d-flex align-items-center py-3 px-4 delay"
-        :class="[
-            isPrimary ? 'btn-primary' : 'btn-secondary',
-            isFloat ? 'float-end' : '',
-            isLoaderDisplayed ? 'has-loader' : '',
-        ]"
-        @click="clicked">
-        <span class="m-0">{{ this.buttonText }}</span>
-        <loader
-            class="ms-2"
-            v-if="isLoaderDisplayed"
-            v-bind:class="[this.loaderColor, this.loaderPosition]" />
-    </button>
+    <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag -->
+    <div class="form-check ui-checkbox" :class="[hasError ? 'has-error' : '']">
+        <input
+            class="form-check-input"
+            type="checkbox"
+            aria-checked="false"
+            :name="checkboxName"
+            :id="buttonID"
+            :tabindex="tabIndex"
+            :aria-required="isRequired" />
+        <label class="d-flex align-items-start" :for="buttonID">
+            <p v-if="checkboxLabel" class="m-0">{{ checkboxLabel }}</p>
+            <span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
+        </label>
+    </div>
 </template>
 
 <script>
-import loader from "@/ux-components/loader/loader";
-
 export default {
-    name: "buttonMain",
+    name: "checkbox",
     props: {
-        isPrimary: Boolean,
-        buttonText: String,
-        isDisabled: Boolean,
-        loaderColor: String,
-        loaderPosition: String,
-        isFloat: Boolean,
-    },
-    data() {
-        return {
-            isLoaderDisplayed: false,
-        };
-    },
-    methods: {
-        removeLoader() {
-            this.isLoaderDisplayed = false;
-        },
-        clicked() {
-            if (!this.isDisabled) {
-                this.isLoaderDisplayed = true;
-                this.$emit("click-event");
-            }
-        },
-    },
-    components: {
-        loader,
+        checkboxName: String,
+        buttonID: String,
+        tabIndex: Number,
+        checkboxLabel: String,
+        screenReaderOnlyText: String,
+        isRequired: Boolean,
+        hasError: Boolean,
     },
 };
 </script>
 
-<style lang="scss">
-.btn {
-    &.btn-primary {
-        position: relative;
-        background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
-        border: none;
-        border-radius: $border-radius-lg;
-        color: $white;
-        justify-content: center;
-        font-weight: 500;
-        @media (hover: hover) {
-            background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
+<style lang="scss" scoped>
+.form-check {
+    .form-check-input {
+        border: 1px solid $gray-500;
+        border-radius: 2px;
+        &:checked {
+            background-size: 125%;
+            border: 1px solid $blue;
+            + label {
+                p {
+                    font-weight: 500;
+                    font-size: 0.875rem;
+                    color: $black;
+                }
+            }
         }
         &:focus {
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-        }
-        &:focus, // Mouse, touch, stylus focus
-    &:focus-visible {
-            // Keyboard focus for accessibility
-            outline: none;
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-            color: $white;
-            background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
-        }
-        &:disabled {
-            background: $gray-200 !important;
-            background: linear-gradient(270deg, $gray-200 0%, $gray-200 100%) !important;
-            color: $gray-600 !important;
-            font-weight: 400;
-            height: 48px;
-            border: none;
-            border-radius: $border-radius-lg;
-            cursor: pointer;
-            pointer-events: all;
-        }
-        &.has-loader {
-            color: $white;
-            background: $blue-700;
-            box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
-        }
-        &.delay {
-            // fixes flicker while transitioning between states
-            transition: background 0s 0s ease-in-out;
+            box-shadow: 0 0 0 2.5px $blue;
         }
     }
-    &.btn-secondary {
-        position: relative;
-        background: transparent;
-        border: 1px solid $blue;
-        border-radius: $border-radius-lg;
-        color: $blue;
-        font-weight: 500;
-        transition: all 150ms linear;
-        height: 3rem;
-        &:hover {
-            color: $white;
-            @include blue-gradient;
-        }
-        &:focus, // Mouse, touch, stylus focus
-    &:focus-visible {
-            // Keyboard focus for accessibility
-            outline: none;
-            box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
-            color: $white;
-            @include blue-gradient;
-        }
-        &:disabled {
-            background: transparent;
-            color: $gray-550 !important;
-            font-weight: 400;
-            height: 48px;
-            border: 1px solid $gray-550;
-            border-radius: $border-radius-lg;
-            cursor: pointer;
-            pointer-events: all;
-        }
-        &.has-loader {
-            color: $white;
-            @include blue-gradient;
-        }
-        &.delay {
-            // fixes flicker while transitioning between states
-            transition: background 0s 0s ease-in-out;
+    &:hover {
+        .form-check-input {
+            box-shadow: 0 0 0 4px $blue-300;
         }
     }
+    p {
+        font-weight: 400;
+        font-size: 0.875rem;
+        color: $gray-600;
+    }
 }
 </style>