DigitalConsumer.FixMyGlass/src/layouts/payment-method/add-vaps-modal-buttons/add-vaps-button/add-vaps-button.vue

<template>
    <baseInputButton
        v-bind="$props"
        :buttonWrapperClasses="[
            'add-vaps-button w-100 rounded-3 d-flex align-items-center h-100 base-input-button',
            { horizontal: isWide },
        ]"
        v-model="selectedValue">
        <div
            class="d-flex w-100 align-items-center px-1 h-100 add-vaps-button-content button-content rounded-3"
            :class="labelClasses">
            <img :id="buttonImageId" :src="buttonImage" :alt="altText" />
            <div class="copy-wrapper" :class="isWide ? 'ms-4 me-2' : ''">
                <p class="small mb-0" :class="isWide ? 'mt-0' : 'mt-1'">
                    {{ buttonLabel }}
                </p>
                <p v-if="buttonLabelSubCopy" class="fs-7 m-0 sub-copy">
                    {{ buttonLabelSubCopy }}
                </p>
            </div>
            <p class="fs-7 mb-0 link-styling" :class="isWide ? 'mt-0' : 'mt-2'">View details</p>
        </div>
    </baseInputButton>
</template>

<script>
import baseInputButton from "@/digital-components/base-input-button/base-input-button";
import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";

export default {
    name: "addVapsButton",
    mixins: [inputButtonWrapperMixin],
    components: {
        baseInputButton,
    },
    computed: {
        labelClasses() {
            if (this.isWide) {
                let classes = "flex-row py-2 ps-4 pe-4";
                if (this.buttonLabelSubCopy) {
                    classes += " checkboxTop";
                }
                return classes;
            } else {
                return "flex-column py-2";
            }
        },
    },
};
</script>

<style lang="scss">
@mixin add-vaps-button-focus($box-shadow-color) {
    &:focus-visible + .add-vaps-button-content {
        box-shadow: 0 0 0 2.5px $box-shadow-color;
        border-radius: 0.5rem;
    }
    &:focus + .add-vaps-button-content {
        box-shadow: 0 0 0 2.5px $box-shadow-color;
        border-radius: 0.5rem;
    }
    &:checked:focus + .add-vaps-button-content {
        box-shadow: 0 0 0 2.5px $box-shadow-color;
    }
}
.add-vaps-button {
    border: 1px solid $gray-500;
    &.has-error {
        input[type="checkbox"],
        input[type="radio"] {
            @include add-vaps-button-focus($red);
        }
    }
    img {
        height: auto;
        width: 2.6rem;
        max-width: 100%;
    }
    .copy-wrapper {
        flex: 1 1 auto;
    }

    input[type="checkbox"],
    input[type="radio"] {
        position: absolute;

        + .add-vaps-button-content {
            outline: none;
            display: flex;
            position: relative;
            justify-content: space-between;

            p {
                color: $gray-600;
                text-align: center;

                &.sub-copy {
                    color: $green;
                }
                &.link-styling {
                    font-weight: 500;
                    color: $blue;
                    text-decoration: underline;
                    text-underline-offset: 4px;
                }
            }
        }

        @include add-vaps-button-focus($blue);

        + .add-vaps-button-content::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;
        }

        + .add-vaps-button-content.checkboxTop::before {
            margin: -1.25rem 0.5rem 0 0 !important;
        }

        + .add-vaps-button-content.checkboxTop::after {
            margin: -1.5rem 0.5rem 0 0 !important;
        }

        &:checked + .add-vaps-button-content::before {
            background: $blue;
        }

        &:checked + .add-vaps-button-content::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"] {
        + .add-vaps-button-content::before {
            content: "";
            display: none;
        }

        + .add-vaps-button-content::after {
            content: "";
            display: none;
        }

        + .add-vaps-button-content {
            img {
                margin-bottom: 0;
            }
        }
    }

    &.horizontal {
        input[type="checkbox"],
        input[type="radio"] {
            + .add-vaps-button-content::before {
                content: "";
                position: relative;
                margin: 0 0.5rem 0 0;
                order: 1;
            }

            &:checked + .add-vaps-button-content::after {
                content: "";
                margin: -0.15rem 0 0 0;
                left: 1.175rem;
            }

            &:checked + .add-vaps-button-content {
                p {
                    color: $black;
                    font-weight: 500;
                }

                .sub-copy {
                    color: $gray-600;
                    font-weight: 400;
                }
            }

            + .add-vaps-button-content {
                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>