From 64e08af52b2531f800a99ffd629368586ec720ba Mon Sep 17 00:00:00 2001
From: Kulbhushan Kaushik <kulbhushan.kaushik@safelite.com>
Date: Tue, 25 Oct 2022 09:02:01 -0400
Subject: [PATCH] commit

---
 .../list-button-horizontal.spec.js            | 264 ++++++++++++
 .../list-button-horizontal.vue                | 344 +++++++++++++++
 src/ux-components/list-button/list-button-vue |   0
 .../list-button/list-button.spec.js           | 256 +++++++++++
 src/ux-components/list-button/list-button.vue | 241 +++++++++++
 src/ux-components/list-card/list-card.spec.js | 329 +++++++++++++++
 src/ux-components/list-card/list-card.vue     | 399 ++++++++++++++++++
 7 files changed, 1833 insertions(+)
 delete mode 100644 src/ux-components/list-button/list-button-vue
 create mode 100644 src/ux-components/list-button/list-button.vue

diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
index e69de29b..0d51bf57 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js
@@ -0,0 +1,264 @@
+import { shallowMount } from "@vue/test-utils";
+import listButtonHorizontal from "./list-button-horizontal";
+import { nextTick } from "vue";
+
+describe("list-button-horizontal.vue", () => {
+  it("Should return input type checkbox if isMultiSelect is true", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isMultiSelect: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+  });
+
+  it("Should return input type radio if isMultiSelect is false or not specified", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isMultiSelect: false,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("radio");
+  });
+
+  it("Should return primary label text (buttonID)", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        buttonID: "List Card Checkbox",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.attributes().for).toEqual("List Card Checkbox");
+  });
+
+  it("Should return screen reader text", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        screenReaderOnlyText: "Screen Reader Only Text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span.sr-only");
+
+    expect(paragraph.text()).toEqual("Screen Reader Only Text");
+  });
+
+  it("Should return text alignment class", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        textPosition: "text-center",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span.m-0");
+
+    expect(paragraph.attributes("class")).toContain("text-center");
+  });
+
+  it("Should return aria-required state", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isRequired: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes()["aria-required"]).toEqual("true");
+  });
+
+  it("Should return loader enabled true", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.handleCheckChange = jest.fn();
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.exists()).toBe(true);
+  });
+
+  it("Should return loader color", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        loaderColor: "blue",
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.handleCheckChange = jest.fn();
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes("class")).toContain("blue");
+  });
+
+  it("Should return loader position", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        loaderPosition: "right",
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+
+    const label = wrapper.find("label");
+
+    wrapper.vm.handleCheckChange = jest.fn();
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes("class")).toContain("right");
+  });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: undefined, checkValue: false}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+        isMultiSelect: false,
+        value: "Car-Front",
+        selectedValues: ["Car-Front"]
+      },
+    });
+    // Assert
+    expect(wrapper.vm.checkValue).toEqual(true);
+  });
+
+  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        selectingInitiatesLoad: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleInputChange();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+  });
+  
+  it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        isMultiSelect: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleKeyupArrow();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
+  });
+
+  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listButtonHorizontal, {
+      propsData: {
+        selectingInitiatesLoad: false,
+        isMultiSelect: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleKeyupArrow();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+  });
+
+});
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index e69de29b..534448b7 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -0,0 +1,344 @@
+<template>
+    <div
+      class="list-group list-button-horizontal d-flex flex-column w-100"
+      :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
+      @keyup.space="triggerButton()"
+      @keyup.up="handleKeyupArrow()"
+      @keyup.down="handleKeyupArrow()"
+      @keyup.left="handleKeyupArrow()"
+      @keyup.right="handleKeyupArrow()"
+    >
+      <input
+        :type="isMultiSelect ? 'checkbox' : 'radio'"
+        :id="buttonID"
+        :name="groupName"
+        :aria-required="isRequired"
+        v-model="checkValue"
+        :checked="checkValue"
+        @change="handleInputChange()"
+      />
+      <label
+        tabindex="-1"
+        :for="buttonID"
+        :aria-label="buttonLabel"
+        class="d-flex flex-column justify-content-center py-3 px-4"
+        @mouseup="triggerButton()"
+      >
+        <span
+          class="m-0"
+          :class="textPosition"
+        >
+          {{buttonLabel}}
+        </span>
+        <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
+          {{  buttonLabelSubCopy  }}
+        </span>
+        <span v-if="screenReaderOnlyText" class="sr-only">
+          {{  screenReaderOnlyText  }}
+        </span>
+        <loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
+      </label>
+    </div>
+  </template>
+  
+  <script>
+  import { useField } from "vee-validate";
+  import loader from "@/ux-components/loader/loader";
+  import { toRef } from "vue";
+  
+  export default {
+    name: "listButtonHorizontal",
+    props: {
+      isMultiSelect: Boolean,
+      groupName: String,
+      buttonID: String,
+      buttonLabel: String,
+      buttonLabelSubCopy: String,
+      screenReaderOnlyText: String,
+      textPosition: String,
+      selectingInitiatesLoad: Boolean,
+      loaderColor: String,
+      loaderPosition: String,
+      isRequired: Boolean,
+      isCashOrInsurance: Boolean,
+      value: {
+        // Field initial value
+        type: String,
+        default: "",
+      },
+      validationRules: String,
+      selectedValues: [Array, String],
+      hasError: Boolean,
+      valueToLogType: String,
+    },
+    data() {
+      return {
+        isLoaderDisplayed: false,
+        checkValue: Boolean,
+      };
+    },
+    created() {
+      if (Array.isArray(this.selectedValues)) {
+        this.checkValue = this.isMultiSelect
+          ? this.selectedValues.includes(this.value)
+          : this.selectedValues[0] == this.value;
+      }
+      else {
+        this.checkValue = this.selectedValues === this.value;
+      }
+    },
+    methods: {
+      isValueSelectedByArray(arr) {
+        return this.isMultiSelect
+          ? arr.includes(this.value)
+          : arr[0];
+      },
+      displayLoader() {
+        this.isLoaderDisplayed = true;
+      },
+      handleInputChange() {
+        if (!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+      },
+      handleKeyupArrow() {
+        if (this.isMultiSelect) {
+          return; // Prevent arrow keys from doing anything if element is a checkbox
+        }
+  
+        if (!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+      },
+      triggerButton() {
+        if (this.selectingInitiatesLoad) {
+          this.displayLoader();
+          this.handleCheckChange();
+        }
+  
+      },
+      handleCheckChange() {
+        const emitEvent = {
+          checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+          value: this.value,
+          buttonId: this.buttonID && this.buttonID.toString(),
+        };
+  
+        this.handleChange(this.value);
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
+      }
+    },
+    components: {
+      loader,
+    },
+    setup(props) {
+      const inputType = props.isMultiSelect ? "checkbox" : "radio";
+  
+      const fieldOptions = {
+        type: inputType,
+        checkedValue: props.value,
+        potentialInitialValue: props.selectedValues,
+      };
+  
+      // Set initialValue for validation setup if pre-selected
+      // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+      if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
+        fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+      }
+  
+      const {
+        handleChange,
+        errors,
+        value
+      } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
+  
+      const validateValue = value;
+      return {
+        handleChange,
+        errors,
+        validateValue,
+        fieldOptions, // only need to expose this for unit test purposes
+      };
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .list-button-horizontal {
+  
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      height: 0;
+      opacity: 0;
+      width: 0;
+  
+      &:focus-visible+label {
+        box-shadow: 0 0 0 2.5px $blue;
+        z-index: 2;
+      }
+  
+      &:focus+label {
+        box-shadow: 0 0 0 2.5px $blue;
+        z-index: 3;
+      }
+  
+      &:checked+label {
+        background: $blue-100;
+        box-shadow: 0 0 0 1px $blue;
+        outline: none;
+        z-index: 2;
+      }
+  
+      &:checked:focus+label {
+        box-shadow: 0 0 0 2.5px $blue;
+      }
+  
+      &:checked+label p:first-child {
+        font-weight: 500;
+      }
+    }
+  
+    label {
+      outline: none;
+      position: relative;
+      background: $white;
+      transition: all 150ms linear;
+      border: 1px solid $gray-500;
+      border-radius: 0;
+      width: 100%;
+      color: $gray-600;
+  
+      &:hover {
+        @include media-breakpoint-up(sm) {
+          box-shadow: 0 0 0 4px $blue-300;
+          cursor: pointer;
+          z-index: 4 !important;
+        }
+      }
+  
+      +p {
+        display: none;
+      }
+  
+      span {
+        font-size: .875rem;
+      }
+    }
+  
+    // Cash/Insurance option radio button styling
+    &.radio-fancy {
+      label {
+        border: 1px solid $blue-700;
+        z-index: 2;
+        color: $blue;
+  
+        span {
+          font-size: 1rem;
+          font-weight: 500;
+        }
+      }
+  
+      label:hover {
+        background-color: $blue-700;
+        color: $white;
+        box-shadow: none;
+      }
+  
+      input[type="radio"],
+      input[type="checkbox"] {
+        position: absolute;
+        height: 0;
+        opacity: 0;
+        width: 0;
+  
+        &:focus-visible+label {
+          border-radius: 0.5rem;
+          z-index: 2;
+        }
+  
+        &:focus+label {
+          z-index: 3;
+        }
+  
+        &:checked+label {
+          outline: none;
+          box-shadow: none;
+          color: $white;
+          background: linear-gradient(84.45deg, #125B7E 0%, #3B8FB8 100%);
+          border-radius: 0.5rem;
+          z-index: 5;
+        }
+  
+        &:checked:focus+label {
+          box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
+        }
+  
+        &:checked+label p:first-child {
+          font-weight: 500;
+        }
+      }
+    }
+    &.list-button-horizontal {
+      height: 100%;
+      label {
+        height: 100%;
+      }
+    }
+  }
+  
+  .col {
+    &:first-of-type {
+      .list-button-horizontal {
+        label {
+          border-bottom-left-radius: 0.5rem;
+          border-top-left-radius: 0.5rem;
+        }
+      }
+    }
+  
+    &:last-of-type {
+      .list-button-horizontal {
+        label {
+          border-bottom-right-radius: 0.5rem;
+          border-top-right-radius: 0.5rem;
+        }
+      }
+    }
+  
+    //Cash/insurance styling
+    &:first-of-type {
+      .list-button-horizontal.radio-fancy {
+        input[type="radio"] {
+          &:checked+label {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+          }
+  
+          &:checked:focus+label {
+            border-bottom-right-radius: 0.5rem;
+            border-top-right-radius: 0.5rem;
+          }
+        }
+      }
+    }
+  
+    &:last-of-type {
+      .list-button-horizontal.radio-fancy {
+        input[type="radio"] {
+          &:checked+label {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+          }
+  
+          &:checked:focus+label {
+            border-bottom-left-radius: 0.5rem;
+            border-top-left-radius: 0.5rem;
+          }
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/ux-components/list-button/list-button-vue b/src/ux-components/list-button/list-button-vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/ux-components/list-button/list-button.spec.js b/src/ux-components/list-button/list-button.spec.js
index e69de29b..e54710ed 100644
--- a/src/ux-components/list-button/list-button.spec.js
+++ b/src/ux-components/list-button/list-button.spec.js
@@ -0,0 +1,256 @@
+import { shallowMount } from "@vue/test-utils";
+import listButton from "./list-button";
+import { nextTick } from "vue";
+
+describe("list-button.vue", () => {
+  it("Should return input type checkbox if isMultiSelect is true", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isMultiSelect: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("checkbox");
+  });
+
+  it("Should return input type radio if isMultiSelect is false or not specified", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isMultiSelect: false,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes().type).toEqual("radio");
+  });
+
+  it("Should return primary label text (buttonID)", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        buttonID: "List Card Checkbox",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.attributes().for).toEqual("List Card Checkbox");
+  });
+
+  it("Should return screen reader text", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        screenReaderOnlyText: "Screen Reader Only Text",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span.sr-only");
+
+    expect(paragraph.text()).toEqual("Screen Reader Only Text");
+  });
+
+  it("Should return text alignment class", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        textPosition: "text-center",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("span.m-0");
+
+    expect(paragraph.attributes("class")).toContain("text-center");
+  });
+
+  it("Should return aria-required state", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isRequired: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.attributes()["aria-required"]).toEqual("true");
+  });
+
+  it("Should return loader enabled true", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleCheckChange = jest.fn();
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.exists()).toBe(true);
+  });
+
+  it("Should return loader color", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        loaderColor: "blue",
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleCheckChange = jest.fn();
+    wrapper.vm.triggerButton();
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes("class")).toContain("blue");
+  });
+
+  it("Should return loader position", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        loaderPosition: "right",
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleCheckChange = jest.fn();
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    const loader = wrapper.find("loader-stub");
+
+    expect(loader.attributes("class")).toContain("right");
+  });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+        buttonID: 'list-card-id'
+      },
+    });
+
+    wrapper.vm.handleCheckChange();
+
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: false, buttonId: 'list-card-id'}]);
+
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        modelValue: ["List Card Checkbox"],
+        selectedValues: "Car-Front"
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual(false);
+  });
+
+  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        selectingInitiatesLoad: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleInputChange();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+  });
+  
+  it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        isMultiSelect: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleKeyupArrow();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
+  });
+
+  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listButton, {
+      propsData: {
+        selectingInitiatesLoad: false,
+        isMultiSelect: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleKeyupArrow();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+  });
+
+});
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
new file mode 100644
index 00000000..c789060e
--- /dev/null
+++ b/src/ux-components/list-button/list-button.vue
@@ -0,0 +1,241 @@
+<template>
+    <div
+      class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
+      :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
+      @keyup.space="triggerButton"
+      @keyup.enter="triggerButton"
+      @keyup.up="handleKeyupArrow"
+      @keyup.down="handleKeyupArrow"
+      @keyup.left="handleKeyupArrow"
+      @keyup.right="handleKeyupArrow">
+      <input
+        :type="isMultiSelect ? 'checkbox' : 'radio'"
+        :id="buttonID"
+        :name="groupName"
+        :value="value"
+        :aria-required="isRequired"
+        v-model="checkValue"
+        :checked="checkValue"
+        @change="handleInputChange"
+      >
+      <label
+        tabindex="-1"
+        :for="buttonID"
+        :aria-label="buttonLabel"
+        class="d-flex flex-column justify-content-center py-3 px-4"
+        @mouseup="triggerButton"
+      >
+        <span
+          class="m-0"
+          :class="textPosition"
+        >
+          {{ buttonLabel }}
+        </span>
+        <span
+          v-if="buttonLabelSubCopy"
+          class="m-0 small"
+          :class="textPosition"
+        >
+          {{ buttonLabelSubCopy }}
+        </span>
+        <span
+          v-if="screenReaderOnlyText"
+          class="sr-only"
+        >
+          {{ screenReaderOnlyText }}
+        </span>
+        <loader
+          v-if="isLoaderDisplayed && selectingInitiatesLoad"
+          :class="[this.loaderColor, this.loaderPosition]"
+        />
+      </label>
+    </div>
+  </template>
+  
+  <script>
+  import { useField } from "vee-validate";
+  import { toRef } from "vue";
+  import loader from "@/ux-components/loader/loader";
+  
+  export default {
+    name: "listButton",
+    props: {
+      isMultiSelect: Boolean,
+      groupName: String,
+      buttonLabel: [Number, String],
+      buttonID: [Number, String],
+      isRequired: Boolean,
+      textPosition: String,
+      buttonLabelSubCopy: String,
+      screenReaderOnlyText: String,
+      selectingInitiatesLoad: Boolean,
+      loaderColor: String,
+      loaderPosition: String,
+      value: {
+      // Field initial value
+        type: [String, Number],
+        default: "",
+        },
+      
+      validationRules: String,
+      selectedValues: [Array, String],
+      hasError: Boolean,
+      valueToLogType: String,
+    },
+    data() {
+      return {
+        isLoaderDisplayed: false,
+        checkValue: false,
+      };
+    },
+    mounted() {
+      if (Array.isArray(this.validateValue)) {
+        this.checkValue = this.isValueSelectedByArray(this.selectedValues);
+        const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
+        
+        if (this.checkValue != isSelectedByValidator) {
+          this.handleChange(this.value);
+        }
+      }
+      else {
+        this.checkValue = this.selectedValues == this.value;
+      }
+    },
+    methods: {
+      isValueSelectedByArray(arr) {
+        return this.isMultiSelect
+          ? arr.includes(this.value)
+          : arr[0];
+      },
+      displayLoader() {
+        this.isLoaderDisplayed = true;
+      },
+      handleInputChange() {
+        if(!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+      },
+      handleKeyupArrow() {
+        if (this.isMultiSelect) {
+          return; // Prevent arrow keys from doing anything if element is a checkbox
+        }
+      },
+      triggerButton() {
+        if(this.selectingInitiatesLoad) {
+          this.displayLoader();
+          this.handleCheckChange();
+        }
+      },
+      handleCheckChange() {
+        const emitEvent = {
+          checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+          value: this.value.toString(),
+          buttonId: this.buttonID && this.buttonID.toString(),
+        };
+  
+        this.handleChange(this.value);
+        this.$emit("isCheckedChanged", emitEvent);
+        this.$emit("update:modelValue", emitEvent);
+      },
+    },
+    components: {
+      loader,
+    },
+    setup(props) {
+      const inputType = props.isMultiSelect ? "checkbox" : "radio";
+  
+      const fieldOptions = {
+        type: inputType,
+        checkedValue: props.value,
+        potentialInitialValue: props.selectedValues,
+      };
+  
+      // Set initialValue for validation setup if pre-selected
+      // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+      if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
+        fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+      }
+  
+      const {
+        handleChange,
+        errors,
+        value
+      } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
+  
+      const validateValue = value;
+  
+      return {
+        handleChange,
+        errors,
+        validateValue,
+        fieldOptions, // only need to expose this for unit test purposes
+      };
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .list-group {
+    &.list-button {
+      outline: none;
+      input[type="radio"],
+      input[type="checkbox"] {
+        position: static; //override bootstrap
+        height: 0;
+        opacity: 0;
+  
+        &:focus-visible + label {
+          box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + label {
+          box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + label {
+          color: $black;
+          font-weight: 500;
+          background: $blue-100;
+          box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + label {
+          box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + label p,
+        &:checked + label span {
+          font-weight: 500;
+        }
+        &:checked + label span:nth-child(2) {
+          font-weight: 400;
+          color: $gray-600;
+        }
+      }
+    }
+    label {
+      color: $gray-600;
+      position: relative;
+      background: $white;
+      transition: all 150ms linear;
+      border-radius: $border-radius-lg;
+      border: 1px solid $gray-500;
+      width: 100%;
+      outline: none;
+  
+      span {
+        &.small {
+          font-size: .75rem;
+          color: $gray-550;
+        }
+      }
+  
+      &:hover {
+        @include media-breakpoint-up(sm) {
+          box-shadow: 0 0 0 4px $blue-300;
+        }
+        cursor: pointer;
+      }
+      + p {
+        display: none;
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/ux-components/list-card/list-card.spec.js b/src/ux-components/list-card/list-card.spec.js
index e69de29b..9c9e1986 100644
--- a/src/ux-components/list-card/list-card.spec.js
+++ b/src/ux-components/list-card/list-card.spec.js
@@ -0,0 +1,329 @@
+import { shallowMount } from "@vue/test-utils";
+import listCard from "./list-card";
+import { nextTick } from "vue";
+
+describe("list-card.vue", () => {
+  it("Should return input type checkbox if isMultiSelect is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelect: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "checkbox-demo-1",
+        groupName: "Checkbox 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    expect(input.attributes().type).toEqual("checkbox");
+  });
+
+  it("Should return primary label text", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p");
+    expect(paragraph.text()).toEqual("Windshield");
+  });
+
+  it("Should return secondary (sub) label text", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test",
+      },
+    });
+
+    // Assert
+    const paragraph = wrapper.find("p:nth-of-type(2)");
+    expect(paragraph.text()).toEqual("Test");
+  });
+
+  it("Should return value used for various text settings including the label 'for' and input id", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.attributes().for).toEqual("List Card Checkbox");
+  });
+
+  it("Should return input group name used for radio or checkbox", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        buttonLabelSubCopy: "Test",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    expect(input.attributes().name).toEqual("radio 1");
+  });
+
+  it("Should return aria-required state", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+    expect(input.attributes()["aria-required"]).toEqual("true");
+  });
+
+  it("Should return flex row classes if isWide is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: true,
+        buttonLabelSubCopy: "",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4"]);
+  });
+
+  it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: true,
+        buttonLabelSubCopy: "Button Subcopy",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4", "checkboxTop"]);
+  });
+
+  it("Should return flex column classes if isWide is false", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        buttonID: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+    expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
+  });
+
+  it("Should emit button value on click", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        buttonID: 'list-card-id',
+        selectedValues: "List Card Checkbox"
+      },
+    });
+    wrapper.vm.handleCheckChange();
+    // Assert
+    expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: true, buttonId: 'list-card-id'}]);
+  });
+
+  it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isRadioHorizontal: true,
+        buttonLabel: "Windshield",
+        value: "List Card Checkbox",
+        groupID: "radio-demo-1",
+        groupName: "radio 1",
+        buttonImage: "windshield-damage.svg",
+        isRequired: true,
+        isWide: false,
+        selectedValues: "Car-Front"
+      },
+    });
+    // Assert
+    expect(wrapper.componentVM.checkValue).toEqual(false);
+  });
+
+  it("Should set an initial value for validation if selectedValues include the value", async () => {
+    // Arrange
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        value: "Windshield",
+        groupName: "radio 1",
+        selectedValues: ["Windshield"],
+      },
+    });
+
+    // Assert
+    expect(wrapper.vm.fieldOptions.initialValue).toEqual([ 'Windshield' ]);
+  });
+
+  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleInputChange is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        selectingInitiatesLoad: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleInputChange();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+  });
+  
+  it("Should do nothing if isMultiSelect is true and handleKeyupArrow is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        isMultiSelect: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleKeyupArrow();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleKeyupArrow).toHaveReturned;
+  });
+
+  it("Should run handleCheckChange if selectingInitiatesLoad is false and handleKeyupArrow is triggered", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      propsData: {
+        selectingInitiatesLoad: false,
+        isMultiSelect: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.handleKeyupArrow();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+  });
+
+  it("Should run handleChange if triggerButton is triggered", async () => {
+
+    // Act
+    const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        selectingInitiatesLoad: false,
+      },
+    });
+
+    // Assert
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleChange).toBeCalled;
+    expect(wrapper.vm.handleCheckChange).not.toBeCalled;
+    expect(wrapper.vm.displayLoader).not.toBeCalled;
+  });
+
+  it("Should run handleCheckChange and displayLoader if triggerButton is triggered and seletingInitiatesLoad is true", async () => {
+    // Act
+    const wrapper = shallowMount(listCard, {
+      global: {
+        mocks: {
+          '$route': { query: { issPage: 'page-name' } },
+        }
+      },
+      propsData: {
+        selectingInitiatesLoad: true,
+      },
+    });
+
+    // Assert
+    wrapper.vm.triggerButton();
+
+    await nextTick();
+
+    expect(wrapper.vm.handleCheckChange).toBeCalled;
+    expect(wrapper.vm.displayLoader).toBeCalled;
+  });
+
+});
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index e69de29b..eb2897b2 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -0,0 +1,399 @@
+<template>
+    <div :class="{'h-100': !isWide}">
+      <div
+        class="list-card w-100 rounded-3 d-flex align-items-center"
+        :class="[
+          'h-100',
+          isWide ? 'horizontal' : '',
+          (errors.length > 0 || hasError) ? 'has-error' : '',
+        ]"
+        @keyup.space="triggerButton"
+        @keyup.up="handleKeyupArrow"
+        @keyup.down="handleKeyupArrow"
+        @keyup.left="handleKeyupArrow"
+        @keyup.right="handleKeyupArrow"
+      >
+        <input
+          :type="isMultiSelect ? 'checkbox' : 'radio'"
+          :id="buttonID"
+          :name="groupName"
+          :value="value"
+          :aria-required="isRequired"
+          v-model="checkValue"
+          :checked="checkValue"
+          @change="handleInputChange"
+        />
+        <label
+          tabindex="-1"
+          :for="buttonID"
+          :aria-label="buttonLabel"
+          class="d-flex w-100 align-items-center px-2 h-100"
+          :class="getLabelClasses"
+          @mouseup="triggerButton"
+        >
+          <img
+            :id="buttonImageId"
+            :class="!isWide ? 'order-1' : 'ms-auto order-3'"
+            :src="buttonImage"
+            :alt="altText"
+          />
+          <p
+            v-if="!isWide"
+            class="small order-3"
+            :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
+          >
+            {{ buttonLabel }}
+          </p>
+          <p
+            v-if="buttonLabelSubCopy && !isWide"
+            class="fs-7 m-0 order-4 sub-copy"
+          >
+            {{ buttonLabelSubCopy }}
+          </p>
+          <div v-if="isWide" class="order-2">
+            <p class="m-0 small">{{ buttonLabel }}</p>
+            <p v-if="buttonLabelSubCopy" class="m-0 fs-7 sub-copy">
+              {{ buttonLabelSubCopy }}
+            </p>
+          </div>
+        </label>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  import { useField } from "vee-validate";
+  import { toRef } from "vue";
+  
+  export default {
+    name: "listCard",
+    props: {
+      isMultiSelect: Boolean, //Defines use as checkbox
+      isWide: Boolean,
+      buttonImage: String, //Required: File name of image
+      buttonImageId: String,
+      buttonLabel: String, //Required: Label text
+      isRequired: Boolean, //Required: is aria-required required or not?
+      altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
+      buttonID: String, //Required: Unique
+      groupName: String, //Rquired: Unique
+      buttonLabelSubCopy: String, //Optional: sub text
+      value: {
+        // Field initial value
+        type: String,
+        default: "",
+      },
+      colLength: String,
+      validationRules: String,
+      selectedValues: [Array, String],
+      hasError: Boolean,
+      valueToLogType: String,
+    },
+    data() {
+      return {
+        checkValue: null,
+      }
+    },
+    mounted() {
+      if (Array.isArray(this.validateValue)) {
+        this.checkValue = this.isValueSelectedByArray(this.selectedValues);
+        const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
+        
+        if (this.checkValue != isSelectedByValidator) {
+          this.handleChange(this.value);
+        }
+      }
+      else {
+        this.checkValue = this.selectedValues == this.value;
+      }
+    },
+    computed: {
+      getLabelClasses() {
+        if (this.isWide) {
+          let classes = "flex-row py-2 ps-4 pe-4";
+          if (this.buttonLabelSubCopy) {
+            classes += " checkboxTop";
+          }
+          return classes;
+        } else {
+          return "flex-column pt-4 pb-3";
+        }
+      },
+    },
+    methods: {
+      isValueSelectedByArray(arr) {
+        return this.isMultiSelect
+          ? arr.includes(this.value)
+          : arr[0];
+      },
+      handleInputChange() {
+        if(!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+      },
+      handleKeyupArrow() {
+        if (this.isMultiSelect) {
+          return; // Prevent arrow keys from doing anything if element is a checkbox
+        }
+  
+        if(!this.selectingInitiatesLoad) {
+          this.handleCheckChange();
+        }
+      },
+      triggerButton() {
+        if(this.selectingInitiatesLoad) {
+          this.displayLoader();
+          this.handleCheckChange();
+        }
+        
+      },
+      handleCheckChange() {
+        const emitEvent = {
+          checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
+          value: this.value.toString(),
+          buttonId: this.buttonID && this.buttonID.toString(),
+        };
+        
+        this.handleChange(this.value);
+        this.$emit("isCheckedChanged", emitEvent);
+      },
+    },
+    watch: {
+      // Changing this will impact pre-selection data loads on vehicle-parts.
+      // If changed, please regression test that vehicle-parts data still loads correctly with previous selections.
+      selectedValues(newVal) {
+        if (typeof newVal === "string") {
+          this.checkValue = newVal == this.value;
+        }
+        else if (newVal !== undefined) {
+          this.checkValue = newVal.value;
+        }
+      },
+    },
+    setup(props) {
+      const inputType = props.isMultiSelect ? "checkbox" : "radio";
+  
+      const fieldOptions = {
+        type: inputType,
+        checkedValue: props.value, //  EX: "Single" or "Passenger"
+        potentialInitialValue: props.selectedValues,
+      };
+  
+      // Set initialValue for validation setup if pre-selected
+      // NOTE: props.selectedValues could be an array of strings, or an array of integers...
+      if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
+        fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
+      }
+  
+      const {
+          handleChange,
+          errors,
+          value
+      } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions); 
+  
+      // First land on the blank, unselected page, no handleChange
+      // Land on page with initial values, handleChange
+      const validateValue = value;
+      return {
+        handleChange,
+        errors,
+        validateValue,
+        fieldOptions, // only need to expose this for unit test purposes
+      };
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  .list-card {
+    border: 1px solid $gray-500;
+  
+    &.invalid {
+      //Red border if invalid
+      border: 1px solid $red;
+    }
+  
+    img {
+      // svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
+      height: auto;
+      width: 6.5rem;
+      margin-bottom: 2.2rem;
+      max-width: 100%;
+    }
+  
+    &:hover {
+      @include media-breakpoint-up(sm) {
+        box-shadow: 0px 0px 0px 4px $blue-300;
+        border: 1px solid transparent;
+      }
+    }
+  
+    input[type="checkbox"],
+    input[type="radio"] {
+      opacity: 0;
+      width: 0;
+      height: 0.1px; // NOTE: cannot be zero or safari can't put focus on it
+      position: absolute;
+  
+      + label {
+        outline: none;
+        display: block;
+        position: relative;
+  
+        &:hover {
+          cursor: pointer;
+        }
+  
+        p {
+          color: $gray-600;
+          text-align: center;
+  
+          &.sub-copy {
+            color: $gray-550;
+          }
+        }
+      }
+  
+      &:checked + label {
+        background: $blue-100;
+        box-shadow: 0 0 0 1px $blue;
+        border-radius: 0.5rem;
+      }
+      &:focus-visible + label {
+        box-shadow: 0 0 0 2.5px $blue;
+        border-radius: 0.5rem;
+      }
+      &:focus + label {
+        box-shadow: 0 0 0 2.5px $blue;
+        border-radius: 0.5rem;
+      }
+      &:checked:focus + label {
+        box-shadow: 0 0 0 2.5px $blue;
+      }
+      &:checked + label {
+        p {
+          color: $black;
+          font-weight: 500;
+        }
+  
+        .sub-copy {
+          color: $gray-600;
+          font-weight: 400;
+        }
+      }
+  
+      + label::before {
+        content: "";
+        position: absolute;
+        display: flex;
+        margin: 0 auto;
+        width: 1rem;
+        height: 1rem;
+        margin: 3rem 0 0 0;
+        background: white;
+        border: 1px solid $gray-500;
+        border-radius: 2px;
+        order: 2;
+        flex-shrink: 0;
+        color: $gray-600;
+      }
+  
+      + label.checkboxTop::before {
+        margin: -1.25rem 0.5rem 0 0 !important;
+      }
+  
+      + label.checkboxTop::after {
+        margin: -1.5rem 0.5rem 0 0 !important;
+      }
+  
+      &:checked + label::before {
+        background: $blue;
+      }
+  
+      &:checked + label::after {
+        content: "";
+        position: absolute;
+        margin: 3.2rem 0 0 0;
+        border-left: 2px solid $white;
+        border-bottom: 2px solid $white;
+        height: 6px;
+        width: 11px;
+        transform: rotate(-45deg);
+        z-index: 1;
+      }
+    }
+  
+    input[type="radio"] {
+      + label::before {
+        content: "";
+        display: none;
+      }
+  
+      + label::after {
+        content: "";
+        display: none;
+      }
+  
+      + label {
+        img {
+          margin-bottom: 0;
+        }
+      }
+    }
+  
+    &.horizontal {
+      img {
+        margin-bottom: 0;
+        width: 5.5rem;
+      }
+  
+      input[type="checkbox"],
+      input[type="radio"] {
+        + label::before {
+          content: "";
+          position: relative;
+          margin: 0 0.5rem 0 0;
+          order: 1;
+        }
+  
+        &:checked + label::after {
+          content: "";
+          margin: -0.15rem 0 0 0;
+          left: 1.175rem;
+        }
+  
+        &:checked + label {
+          p {
+            color: $black;
+            font-weight: 500;
+          }
+  
+          .sub-copy {
+            color: $gray-600;
+            font-weight: 400;
+          }
+        }
+  
+        + label {
+          outline: none;
+          min-height: 48px;
+          color: $gray-600;
+  
+          img {
+            margin-bottom: 0;
+          }
+  
+          p {
+            color: $gray-600;
+            text-align: left;
+  
+            &.sub-copy {
+              color: $gray-550;
+            }
+          }
+        }
+      }
+    }
+  }
+  </style>
+  
\ No newline at end of file