DigitalConsumer.FixMyGlass/src/ux-components/list-card/list-card.vue

<template>
    <baseInputButton
        v-bind="$props"
        :buttonWrapperClasses="[
            'list-card 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 list-card-content button-content rounded-3"
            :class="labelClasses">
            <img
                v-if="buttonImage"
                :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', labelBold ? 'p-bold' : '']">
                {{ 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>
        </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: "listCard",
    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 pt-4 pb-3";
            }
        },
    },
};
</script>

<style lang="scss">
@mixin list-card-focus($box-shadow-color) {
    &:focus-visible + .list-card-content {
        box-shadow: 0 0 0 2.5px $box-shadow-color;
        border-radius: 0.5rem;
    }
    &:focus + .list-card-content {
        box-shadow: 0 0 0 2.5px $box-shadow-color;
        border-radius: 0.5rem;
    }
    &:checked:focus + .list-card-content {
        box-shadow: 0 0 0 2.5px $box-shadow-color;
    }
}
.list-card {
    border: 1px solid $gray-500;

    &.has-error {
        input[type="checkbox"],
        input[type="radio"] {
            @include list-card-focus($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: 2rem;
        width: auto;
        margin-bottom: 2.2rem;
        max-width: 100%;
    }

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

        + .list-card-content {
            outline: none;
            display: flex;
            position: relative;
            justify-content: flex-start;

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

                &.sub-copy {
                    color: $gray-550;
                }
            }
        }

        &:checked + .list-card-content {
            background: $blue-100;
            box-shadow: 0 0 0 1px $blue;
            border-radius: 0.5rem;
        }

        @include list-card-focus($blue);

        &:checked + .list-card-content {
            p {
                color: $black;
                font-family: UrbanistSemibold;
            }
            .p-bold {
                font-family: UrbanistSemibold;
                font-weight: 600;
            }

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

        + .list-card-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;
        }

        + .list-card-content.checkboxTop::before {
            margin: -1.25rem 0.5rem 0 0 !important;
        }

        + .list-card-content.checkboxTop::after {
            margin: -1.5rem 0.5rem 0 0 !important;
        }

        &:checked + .list-card-content::before {
            background: $blue;
        }

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

        + .list-card-content::after {
            content: "";
            display: none;
        }

        + .list-card-content {
            img {
                margin-bottom: 0;
            }
        }
    }

    &.horizontal {
        img {
            margin-bottom: 0;
            width: 5.5rem;
        }

        input[type="checkbox"],
        input[type="radio"] {
            + .list-card-content::before {
                content: "";
                position: relative;
                margin: 0 0.5rem 0 0;
                order: 1;
            }

            &:checked + .list-card-content::after {
                content: "";
                margin: -0.15rem 0 0 0;
                left: 1.175rem;
            }

            &:checked + .list-card-content {
                p {
                    color: $black;
                    font-weight: 500;
                }

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

            + .list-card-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>