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 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">
                    <span
                        id="buttonLabelSpan"
                        class="m-0 button-label-copy"
                        :class="textPosition">{{ buttonLabel }}
                    </span>
                    <span
                        id="buttonLabelSubCopySpan"
                        class="m-0 caption ms-2"
                        :class="textPosition">{{ buttonLabelSubCopy }}
                    </span>
                    <div
                        v-if="displayAvailabilityIndicators"
                        id="availabilityIndicatorBlock"
                        class="availability-indicator rounded-pill"
                        :class="availabilityRatingClass">
                        <loader
                            v-if="isLoaderDisplayed"
                            ref="availabilityIndicatorLoader"
                            loaderPosition="left"
                            :allowPageInteraction="true" />
                        <div
                            v-else
                            id="availabilityIndicator">
                            <div
                                id="availabilityBadge"
                                class="availability-badge"
                                :class="availabilityRating == 'high' ? 'green' : 'orange'">
                            </div>
                            <span class="m-0 button-auxillary-copy">{{ badgeText }}</span>
                        </div>
                    </div>
                </div>
                <div class="row-two">
                    <span
                        v-if="buttonBodyCopy"
                        id="buttonBodyCopy"
                        class="m-0 button-label-sub-copy small"
                        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';
import loader from '@/ux-components/loader/loader.vue';

export default {
    name: 'shop-list-button',
    components: {
        baseInputButton,
        loader
    },
    mixins: [inputButtonWrapperMixin],
    data() {
        return {
            availabilityRating: null,
            displayAvailabilityIndicators: this.additionalButtonData?.displayAvailabilityIndicators ?? false
        };
    },
    computed: {
        isLoaderDisplayed() {
            return this.availabilityRating == null;
        },
        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";

.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;
      }
  }
}
.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 {
      &.small {
          font-size: 0.75rem;
          color: $gray-550;
      }
  }
}
.button-content {
  row-gap: 0.25rem;

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

      .button-label-copy {
          font-weight: 500;
      }

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

          .availability-badge {
              display: inline;
              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);
              }
          }
          .button-auxillary-copy {
              box-sizing: border-box;
              justify-content: right;
              line-height: 1.25rem;
              font-weight: 500;
              font-size: 0.75rem;
              align-items: center;
          }

          .loader {
              padding: 0 0.25rem 0 0.25rem;
              padding-top: 0.125rem;
              padding-bottom: 0.125rem;
          }

          .loader:after {
              background-color: $gray-550;
              height: 1rem;
              width: 1rem;
          }

          &.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: left;
  }
}
</style>