commit

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

@@ -0,0 +1,78 @@
+import { shallowMount } from "@vue/test-utils";
+import checkbox from "./checkbox";
+import { nextTick } from "vue";
+
+describe("checkbox.vue", () => {
+    it("Should return checkbox name", async () => {
+        // Act
+        const wrapper = shallowMount(checkbox, {
+            propsData: {
+                checkboxName: "Checkbox",
+            },
+        });
+
+        // Assert
+        const input = wrapper.find("input");
+
+        // Expect
+        expect(input.attributes().name).toEqual("Checkbox");
+    });
+
+    it("Should return checkbox id", async () => {
+        // Act
+        const wrapper = shallowMount(checkbox, {
+            propsData: {
+                buttonID: "Checkbox ID",
+            },
+        });
+
+        // Assert
+        const input = wrapper.find("input");
+
+        // Expect
+        expect(input.attributes().id).toEqual("Checkbox ID");
+    });
+
+    it("Should return tabindex value", async () => {
+        // Act
+        const wrapper = shallowMount(checkbox, {
+            propsData: {
+                tabIndex: "1",
+            },
+        });
+
+        // Assert
+        const input = wrapper.find("input");
+
+        // Expect
+        expect(input.attributes().tabindex).toEqual("1");
+    });
+
+    it("Should return label text", async () => {
+        // Act
+        const wrapper = shallowMount(checkbox, {
+            propsData: {
+                checkboxLabel: "label text",
+            },
+        });
+
+        // Assert
+        const paragraph = wrapper.find("p");
+
+        expect(paragraph.text()).toEqual("label text");
+    });
+
+    it("Should return label text", async () => {
+        // Act
+        const wrapper = shallowMount(checkbox, {
+            propsData: {
+                screenReaderOnlyText: "screenreader text",
+            },
+        });
+
+        // Assert
+        const paragraph = wrapper.find("span");
+
+        expect(paragraph.text()).toEqual("screenreader text");
+    });
+});

src/ux-components/checkbox/checkbox.vue

@@ -0,0 +1,65 @@
+<template>
+    <!-- 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>
+export default {
+    name: "checkbox",
+    props: {
+        checkboxName: String,
+        buttonID: String,
+        tabIndex: Number,
+        checkboxLabel: String,
+        screenReaderOnlyText: String,
+        isRequired: Boolean,
+        hasError: Boolean,
+    },
+};
+</script>
+
+<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 2.5px $blue;
+        }
+    }
+    &:hover {
+        .form-check-input {
+            box-shadow: 0 0 0 4px $blue-300;
+        }
+    }
+    p {
+        font-weight: 400;
+        font-size: 0.875rem;
+        color: $gray-600;
+    }
+}
+</style>