From a1ad878908b2f88c7d92440408646f039f57ca2b Mon Sep 17 00:00:00 2001
From: Katie Kroell <Katie.Kroell@safelite.com>
Date: Thu, 7 Mar 2024 10:41:01 -0500
Subject: [PATCH] calendar modal list button

---
 .../calendar-modal-list-button.vue            | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue

diff --git a/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue
new file mode 100644
index 00000000..1207cdf7
--- /dev/null
+++ b/src/layouts/order-confirmation/add-to-calendar/calendar-modal-question/calendar-modal-list-button/calendar-modal-list-button.vue
@@ -0,0 +1,81 @@
+<template>
+    <baseInputButton
+        v-bind="$props"
+        v-model="selectedValue"
+        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
+        <div
+            :aria-label="buttonLabel"
+            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
+            <span
+                class="m-0 position-relative"
+                :class="textPosition">
+                <img :src="buttonLabel" />
+                <span class="calendar-text">{{ value }}</span>
+            </span>
+        </div>
+    </baseInputButton>
+</template>
+<script>
+import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
+import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin.js';
+
+export default {
+    name: 'calendar-modal-list-button',
+    components: {
+        baseInputButton
+    },
+    mixins: [inputButtonWrapperMixin]
+};
+</script>
+<style lang="scss" scoped>
+.list-button {
+    outline: none;
+    input[type="radio"],
+    input[type="checkbox"] {
+        position: static; //override bootstrap
+
+        &:focus-visible + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content {
+            color: $black;
+            font-weight: 500;
+            background: $blue-100;
+            box-shadow: 0 0 0 1px $blue;
+        }
+        &:checked:focus + .list-button-content {
+            box-shadow: 0 0 0 2.5px $blue;
+        }
+        &:checked + .list-button-content p,
+        &:checked + .list-button-content span {
+            font-weight: 500;
+        }
+        &:checked + .list-button-content span:nth-child(2) {
+            font-weight: 400;
+            color: $gray-600;
+        }
+    }
+}
+.list-button-content {
+    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.calendar-text {
+        margin-left: 5px;
+        padding: 2px 8px;
+    }
+}
+
+.position-relative {
+    position: relative;
+}
+</style>