DigitalConsumer.ISS/src/iss-components/shop-list-button/shop-list-button.vue

<template>
    <transition
        name="fade"
        mode="out-in">
        <baseInputButton
            v-bind="$props"
            v-model="selectedValue"
            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 no-hover mb-2">
            <div
                :aria-label="buttonLabel"
                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
                <div class="row-one">
                    <div
                        v-if="displayAvailabilityIndicators"
                        class="availability-indicator-spacer"></div>
                    <span
                        id="buttonLabelSpan"
                        class="m-0 button-label-copy"
                        :class="textPosition">{{ buttonLabel }}
                    </span>
                    <span class="separator"></span>
                    <span
                        id="buttonLabelSubCopySpan"
                        class="m-0 button-label-sub-copy"
                        :class="textPosition">{{ buttonLabelSubCopy }}
                    </span>
                    <div
                        v-if="displayAvailabilityIndicators"
                        class="availability-indicator-container">
                        <div
                            id="availabilityIndicatorBlock"
                            class="availability-indicator rounded-pill"
                            :class="availabilityRatingClass">
                            <div
                                id="availabilityIndicator"
                                class="d-flex align-items-center">
                                <div
                                    id="availabilityBadge"
                                    class="availability-badge"
                                    :class="availabilityRatingClass">
                                </div>
                                <span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-two">
                    <span
                        v-if="buttonBodyCopy"
                        id="buttonBodyCopy"
                        class="m-0 button-body-copy"
                        v-html="buttonBodyCopy"></span>
                </div>
                <span
                    v-if="screenReaderOnlyText"
                    id="screenReaderOnlyTextSpan"
                    class="sr-only">
                    {{ screenReaderOnlyText }}
                </span>
            </div>
        </baseInputButton>
  </transition>
</template>

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

export default {
    name: 'shop-list-button',
    components: {
        baseInputButton
    },
    mixins: [inputButtonWrapperMixin],
    data() {
        return {
            availabilityRating: null,
            displayAvailabilityIndicators: this.additionalButtonData?.displayAvailabilityIndicators ?? false
        };
    },
    computed: {
        availabilityRatingClass() {
            if (this.availabilityRating != null) {
                return this.availabilityRating === 'high' ? 'green' : 'orange';
            }
            return 'gray';
        },
        badgeText() {
            if (this.availabilityRating != null) {
                return this.availabilityRating === 'high' ? 'Appts available' : 'Appts low';
            }
            return '';
        }
    },
    beforeMount() {
        if (this.displayAvailabilityIndicators) {
            const { startDate } = this.additionalButtonData;
            const { endDate } = this.additionalButtonData;
            const { shopAppointmentType } = this.additionalButtonData;

            this.additionalButtonData
                .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
                .then((data) => {
                    this.availabilityRating = data;
                });
        }
    }
};
</script>

<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";
$heritage-border-radius: 60px;
$heritage-border-color: #CACBCC;
$heritage-box-shadow: 0 1px 5px rgba($black, 0.2);
$heritage-checked-border-color: #0070d1;

.list-button {
    outline: none;
    input[type="radio"],
    input[type="checkbox"] {
        position: static; //override bootstrap
        &:checked + .list-button-content {
            background: $background-color-selected;
            border-color: $heritage-checked-border-color;
            .button-label-copy {
                font-weight: 500;
                color: $black;
            }
        }
        &:focus:checked + .list-button-content {
            border-width: 2.5px;
        }
    }
}
.list-button-content {
    color: $darker-gray;
    font-weight: $font-weight-normal;
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border-radius: $heritage-border-radius;
    border: 1px solid $heritage-border-color;
    box-shadow: $heritage-box-shadow;
    width: 100%;
    outline: none;
}
.button-content {
    row-gap: 0.25rem;

    .row-one {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.5rem;

        .separator {
            height: 1.25rem;
            margin: 0rem .3125rem;
            border-left: 1px solid $heritage-border-color;
        }

        .availability-indicator-spacer {
            width: 8rem;
            margin-right: auto;
        }

        .availability-indicator-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-left: auto;
            width: 8rem;
        }

        .availability-indicator {
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            padding: 0.125rem 0.5rem;

            .availability-badge {
                display: inline-flex;
                width: 13px;
                height: 12px;
                background-position: center;
                background-repeat: no-repeat;
                margin: 0 0.25rem 0 0;

                &.green {
                    background-image: url($svg-shop-list-button-green-availability);
                }

                &.orange {
                    background-image: url($svg-shop-list-button-orange-availability);
                }

                &.gray {
                    background-image: url(~@/assets/img/heritage-loader-blue.gif);
                    background-size: contain;
                }
            }
            .button-auxillary-copy {
                box-sizing: border-box;
                justify-content: right;
                line-height: 1.25rem;
                font-weight: 500;
                font-size: 0.75rem;
                align-items: center;
            }

            &.green {
                color: $green-700;
                background-color: $green-100;
            }

            &.orange {
                color: $orange-600;
                background-color: $orange-100;
            }

            &.gray {
                color: $gray-600;
                background-color: $gray-100;
                padding-left: 0.125rem;
                padding-right: 0.125rem;
            }
        }
    }

    .row-two {
        text-align: center;
    }
}
</style>