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

<template>
<div :class="'col' + colLength">
    <div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']">
        <input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" @click="handleChange(value)" v-model="checkValue" @change="handleCheckChange()" />
        <label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
            <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";

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,
        selectedButtonIDs: [Array, String],
        hasError: Boolean,
    },
    data() {
        return {
            checkValue: Boolean,
        }
    },
    created() {
        if (this.selectedButtonIDs) {
            this.checkValue = this.isMultiSelect ? this.selectedButtonIDs.includes(this.buttonID) : this.selectedButtonIDs[0];
        }
    },
    computed: {
        getLabelClasses() {
            if (this.isWide) {
                let classes = "flex-row py-r ps-3 pe-8";
                if (this.buttonLabelSubCopy) {
                    classes += " checkboxTop";
                }
                return classes;
            } else {
                return "flex-column pt-4 pb-2";
            }
        },
    },
    methods: {
        handleCheckChange() {
            this.$emit('isCheckedChanged', {
                isChecked: this.checkValue,
                buttonId: this.buttonID.toString()
            });
        }
    },
    setup(props) {
        const inputType = props.isMultiSelect ? "checkbox" : "radio";

        const {
            value: inputValue,
            handleChange,
            errors,
        } = useField(props.groupName, props.validationRules, {
            type: inputType,
            checkedValue: props.value,
        });
        return {
            handleChange,
            errors,
        };
    },
};
</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: 3rem;
        max-width: 100%;
    }

    &:hover {
        box-shadow: 0px 0px 0px 4px $blue-300;
        border: 1px solid transparent;
    }

    input[type="checkbox"],
    input[type="radio"] {
        opacity: 0;
        width: 0;
        height: 0;

        +label {
            display: block;
            position: relative;

            &:hover {
                cursor: pointer;
            }

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

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

        &:focus+label {
            box-shadow: 0 0 0 2.5px $blue;
            border-radius: 0.5rem;
        }

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

        &:checked+label {
            p {
                color: $black;
                font-weight: 500;
            }

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

        +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);
        }
    }

    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.25rem 0 0 0;
                left: 0.875rem;
            }

            +label {
                min-height: 48px;
                color: $gray-600;

                img {
                    margin-bottom: 0;
                }

                p {
                    text-align: left;

                    &.sub-copy {
                        color: $gray-550;
                    }
                }
            }
        }
    }
}
</style>