Shop selection styling

src/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue

@@ -0,0 +1,245 @@
+<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-4 no-hover">
+            <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"
+                            class="d-flex align-items-center">
+                            <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"
+                        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: 'tpa-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 {
+          background: $blue-100;
+          box-shadow: 0 0 0 1px $blue;
+      }
+    //   &:checked:focus + .list-button-content {
+    //       box-shadow: 0 0 0 2.5px $blue;
+    //   }
+  }
+}
+.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;
+  color: #4d4e53;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 26px;
+
+  .row-one {
+      display: flex;
+      align-items: center;
+      line-height: 1.5rem;
+
+      .button-label-copy {
+          font-weight: 600;
+          line-height: 24px;
+          text-transform: capitalize;
+      }
+      #buttonLabelSubCopySpan {
+          font-size: 12px;
+          line-height: 24px;
+      }
+
+      .availability-indicator {
+          background-repeat: no-repeat;
+          display: flex;
+          align-items: center;
+          margin-left: auto;
+          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);
+              }
+          }
+          .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>

src/layouts/tpa-search/tpa-search.vue

@@ -73,7 +73,7 @@
                                     id="selectProviderQuestion"
                                     v-model="selectedProviderNumber"
                                     buttonTypeString="shopListButton"
-                                    :buttonTypeObject="shopListButton"
+                                    :buttonTypeObject="tpaShopListButton"
                                     class="radioQuestion"
                                     :answers="providerButtonData"
                                     groupName="chooseShop"
@@ -123,7 +123,7 @@ import textLink from '@/ux-components/text-link/text-link.vue';
 import alert from '@/ux-components/alert/alert.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import googleMap from '@/iss-components/google-map/google-map.vue';
-import shopListButton from '@/iss-components/shop-list-button/shop-list-button.vue';
+import tpaShopListButton from '@/iss-components/tpa-shop-list-button/tpa-shop-list-button.vue';
 import loader from '@/ux-components/loader/loader.vue';
 
 // Supporting files
@@ -202,7 +202,7 @@ export default {
                 filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
                 provider: globalRules.OPTION_REQUIRED
             },
-            shopListButton: shallowRef(shopListButton)
+            tpaShopListButton: shallowRef(tpaShopListButton)
         };
     },
     computed: {
@@ -246,7 +246,7 @@ export default {
         },
         providerAddresses() {
             return this.radiusFilteredAndCappedProviders?.map((provider) => ({
-                title: provider.companyName,
+                title: provider.companyName.toLowerCase(),
                 fullAddress: this.getFullProviderAddress(provider),
                 addressLines: [this.getProviderAddress(provider), this.getProviderCityZipState(provider)]
             })) ?? [];
@@ -373,7 +373,7 @@ export default {
                     : null;
 
             return {
-                buttonLabel: provider?.companyName ?? '',
+                buttonLabel: provider?.companyName.toLowerCase() ?? '',
                 buttonLabelSubCopy: distance === null ? '' : `${distance} mi`,
                 buttonBodyCopy: `${this.getFullProviderAddress(provider)}<br>${
                     cellNumber ?? ''