@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/es-reviews-io-card-carousel.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+useHead({
+    link: [
+        {
+            // https://web.dev/defer-non-critical-css/
+            href: 'https://assets.reviews.io/css/widgets/carousel-widget.css?_t=2023040418',
+            rel: 'preload',
+            as: 'style',
+            onload: "this.onload=null;this.rel='stylesheet'",
+        },
+        {
+            // https://web.dev/defer-non-critical-css/
+            href: 'https://assets.reviews.io/iconfont/reviewsio-icons/style.css?_t=2023040418',
+            rel: 'preload',
+            as: 'style',
+            onload: "this.onload=null;this.rel='stylesheet'",
+        },
+    ],
+    script: [
+        {
+            // https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/#how-to-eliminate-render-blocking-scripts
+            src: 'https://widget.reviews.io/carousel-inline-iframeless/dist.js?_t=2023040418',
+            async: true,
+        },
+    ],
+});
+
+onBeforeUnmount(() => {
+    const widgetPrefixes = document.querySelectorAll('.CarouselWidget-prefix');
+    widgetPrefixes.forEach((prefix) => {
+        prefix.remove();
+    });
+});
+
+const initializeWidget = () => {
+    // if the Reviews.io script loaded before
+    // @ts-expect-error global-scoped ReviewsIO stuff
+    if (typeof window !== 'undefined' && window.carouselInlineWidget) {
+        // @ts-expect-error global-scoped ReviewsIO stuff
+        // eslint-disable-next-line no-new, new-cap
+        new window.carouselInlineWidget('reviewsio-carousel-widget', {
+            /* Your REVIEWS.io account ID: */
+            store: 'energy-sage',
+            sku: '',
+            lang: 'en',
+            carousel_type: 'topHeader',
+            styles_carousel: 'CarouselWidget--topHeader--withcards',
+
+            /* Widget settings: */
+            options: {
+                general: {
+                    // UNDOCUMENTED??
+                    // Disables rich snippet injection; ls+json data and what else who knows....
+                    enable_richsnippets_company: false,
+                    /* What reviews should the widget display? Available options: company, product,
+                    third_party. You can choose one type or multiple separated by comma. */
+                    review_type: 'company',
+                    /* Minimum number of reviews required for widget to be displayed */
+                    min_reviews: '1',
+                    /* Maximum number of reviews to include in the carousel widget. */
+                    max_reviews: '10',
+                    address_format: 'CITY, COUNTRY',
+                    /* Carousel auto-scrolling speed. 3000 = 3 seconds. If you want to disable auto-scroll,
+                    set this value to false. */
+                    enable_auto_scroll: false,
+                },
+                header: {
+                    /* Show overall rating stars */
+                    enable_overall_stars: true,
+                    rating_decimal_places: 2,
+                },
+                reviews: {
+                    /* Show customer name */
+                    enable_customer_name: true,
+                    /* Show customer location */
+                    enable_customer_location: true,
+                    /* Show "verified review" badge */
+                    enable_verified_badge: true,
+                    /* Show "verified subscriber" badge */
+                    enable_subscriber_badge: true,
+                    /* Show "I recommend this product" badge (Only for product reviews) */
+                    enable_recommends_badge: true,
+                    /* Show photos attached to reviews */
+                    enable_photos: false,
+                    /* Show videos attached to reviews */
+                    enable_videos: false,
+                    /* Show when review was written */
+                    enable_review_date: true,
+                    /* Hide reviews written by the same customer
+                    (This may occur when customer reviews multiple products) */
+                    disable_same_customer: true,
+                    /* Minimum star rating */
+                    min_review_percent: 4,
+                    /* Show 3rd party review source */
+                    third_party_source: true,
+                    /* Hide reviews without comments (still shows if review has a photo) */
+                    hide_empty_reviews: true,
+                    /* Show product name */
+                    enable_product_name: true,
+                    /* Show only reviews which have specific tags (multiple semicolon
+                    separated tags allowed i.e tag1;tag2) */
+                    tags: 'es-featured',
+                    /* Show branch, only one input */
+                    branch: '',
+                    enable_branch_name: false,
+                },
+                popups: {
+                    /* Make review items clickable (When they are clicked, a popup appears
+                    with more information about a customer and review) */
+                    enable_review_popups: true,
+                    /* Show "was this review helpful" buttons */
+                    enable_helpful_buttons: false,
+                    /* Show how many times review was upvoted as helpful */
+                    enable_helpful_count: false,
+                    /* Show share buttons */
+                    enable_share_buttons: false,
+                },
+            },
+            translations: {
+                verified_customer: 'Verified Customer',
+            },
+            /**
+             * The styles below, if uncommented, are inserted via JS, which violates our CSP.
+             * They are only used for customization, and we are only customizing one of these variables.
+             * See _reviews.scss for the place to safely include the necessary variables.
+             * This list is preserved here for reference, in case more customization is needed.
+             */
+            /* styles: {
+                // Base font size is a reference size for all text elements. When base value gets changed,
+                all TextHeading and TexBody elements get proportionally adjusted.
+                '--base-font-size': '16px',
+                '--base-maxwidth': '100%',
+
+                // Logo styles:
+                '--reviewsio-logo-style': 'var(--logo-normal)',
+
+                // Star styles
+                '--common-star-color': ' #0E1311',
+                '--common-star-disabled-color': ' rgba(0,0,0,0.25)',
+                '--medium-star-size': ' 22px',
+                '--small-star-size': '19px', // Modal
+                '--x-small-star-size': '16px',
+                '--x-small-star-display': 'inline-flex',
+
+                // Header styles:
+                '--header-order': '1',
+                '--header-width': '160px',
+                '--header-bg-start-color': 'transparent',
+                '--header-bg-end-color': 'transparent',
+                '--header-gradient-direction': '135deg',
+                '--header-padding': '0.5em',
+                '--header-border-width': '0px',
+                '--header-border-color': 'rgba(0,0,0,0.1)',
+                '--header-border-radius': '0px',
+                '--header-shadow-size': '0px',
+                '--header-shadow-color': 'rgba(0, 0, 0, 0.1)',
+
+                // Header content styles:
+                '--header-star-color': 'inherit',
+                '--header-disabled-star-color': 'inherit',
+                '--header-heading-text-color': 'inherit',
+                '--header-heading-font-size': 'inherit',
+                '--header-heading-font-weight': 'inherit',
+                '--header-heading-line-height': 'inherit',
+                '--header-heading-text-transform': 'inherit',
+                '--header-subheading-text-color': 'inherit',
+                '--header-subheading-font-size': 'inherit',
+                '--header-subheading-font-weight': 'inherit',
+                '--header-subheading-line-height': 'inherit',
+                '--header-subheading-text-transform': 'inherit',
+
+                // Review item styles:
+                '--item-maximum-columns': '5', // Must be 3 or larger
+                '--item-background-start-color': '#ffffff',
+                '--item-background-end-color': '#ffffff',
+                '--item-gradient-direction': '135deg',
+                '--item-padding': '1.5em',
+                '--item-border-width': '0px',
+                '--item-border-color': 'rgba(0,0,0,0.1)',
+                '--item-border-radius': '12px',
+                '--item-shadow-size': '10px',
+                '--item-shadow-color': 'rgba(0,0,0,0.05)',
+
+                // Heading styles:
+                '--heading-text-color': ' #0E1311',
+                '--heading-text-font-weight': ' 600',
+                '--heading-text-font-family': ' inherit',
+                '--heading-text-line-height': ' 1.4',
+                '--heading-text-letter-spacing': '0',
+                '--heading-text-transform': 'none',
+
+                // Body text styles:
+                '--body-text-color': ' #0E1311',
+                '--body-text-font-weight': '400',
+                '--body-text-font-family': ' inherit',
+                '--body-text-line-height': ' 1.4',
+                '--body-text-letter-spacing': '0',
+                '--body-text-transform': 'none',
+
+                // Scroll button styles:
+                '--scroll-button-icon-color': '#0E1311',
+                '--scroll-button-icon-size': '24px',
+                '--scroll-button-bg-color': 'transparent',
+
+                '--scroll-button-border-width': '0px',
+                '--scroll-button-border-color': 'rgba(0,0,0,0.1)',
+
+                '--scroll-button-border-radius': '60px',
+                '--scroll-button-shadow-size': '0px',
+                '--scroll-button-shadow-color': 'rgba(0,0,0,0.1)',
+                '--scroll-button-horizontal-position': '0px',
+                '--scroll-button-vertical-position': '0px',
+
+                // Badge styles:
+                '--badge-icon-color': '#0E1311',
+                '--badge-icon-font-size': '15px',
+                '--badge-text-color': '#0E1311',
+                '--badge-text-font-size': 'inherit',
+                '--badge-text-letter-spacing': 'inherit',
+                '--badge-text-transform': 'inherit',
+
+                // Author styles:
+                '--author-font-size': 'inherit',
+                '--author-font-weight': 'inherit',
+                '--author-text-transform': 'inherit',
+
+                // Product photo or review photo styles:
+                '--photo-video-thumbnail-size': '60px',
+                '--photo-video-thumbnail-border-radius': '0px',
+
+                // Popup styles:
+                '--popup-backdrop-color': 'rgba(0,0,0,0.75)',
+                '--popup-color': '#ffffff',
+                '--popup-star-color': 'inherit',
+                '--popup-disabled-star-color': 'inherit',
+                '--popup-heading-text-color': 'inherit',
+                '--popup-body-text-color': 'inherit',
+                '--popup-badge-icon-color': 'inherit',
+                '--popup-badge-icon-font-size': '19px',
+                '--popup-badge-text-color': 'inherit',
+                '--popup-badge-text-font-size': '14px',
+                '--popup-border-width': '0px',
+                '--popup-border-color': 'rgba(0,0,0,0.1)',
+                '--popup-border-radius': '0px',
+                '--popup-shadow-size': '0px',
+                '--popup-shadow-color': 'rgba(0,0,0,0.1)',
+                '--popup-icon-color': '#0E1311',
+
+                // Tooltip styles:
+                '--tooltip-bg-color': '#0E1311',
+                '--tooltip-text-color': '#ffffff',
+            }, */
+        });
+    }
+};
+
+onMounted(async () => {
+    // if we're server-side, get out
+    if (typeof window === 'undefined') return;
+
+    // @ts-expect-error global-scoped ReviewsIO stuff
+    if (window.carouselInlineWidget) {
+        // if the Reviews.io script has loaded, initialize the widget
+        initializeWidget();
+    } else {
+        // if the Reviews.io script has not loaded, set its callback function to trigger widget initialization
+        // @ts-expect-error global-scoped ReviewsIO stuff
+        window.carouselInlineWidgetCallback = () => {
+            initializeWidget();
+        };
+    }
+});
+</script>
+
+<template>
+    <div
+        id="reviewsio-carousel-widget"
+        class="EsReviewsIoCardCarousel" />
+</template>

package/components/es-row.vue

@@ -0,0 +1,5 @@
+<template>
+    <div class="row">
+        <slot />
+    </div>
+</template>

package/components/es-skeleton-img.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps({
+    aspect: {
+        type: String,
+        default: '16:9',
+    },
+    noAspect: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const aspects = props.aspect.split(':');
+const aspectRatio = computed(() => `${(parseFloat(aspects[1]) / parseFloat(aspects[0])) * 100}%`);
+</script>
+
+<template>
+    <!-- if noAspect is set, pass along to esSkeleton with all other props -->
+    <es-skeleton
+        v-if="noAspect"
+        v-bind="$attrs" />
+    <!-- if setting the aspect ratio, wrap skeleton in containers to determine responsive size  -->
+    <!-- based on Bootstrap Aspect -->
+    <div
+        v-else
+        class="d-flex">
+        <div
+            class="flex-grow-1"
+            :style="{ 'padding-bottom': aspectRatio, height: '0px' }" />
+        <div
+            class="flex-grow-1 w-100 mw-100"
+            style="margin-left: -100%">
+            <es-skeleton
+                v-bind="$attrs"
+                class="h-100 w-100" />
+        </div>
+    </div>
+</template>

package/components/es-skeleton-wrapper.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps({
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
+<template>
+    <div>
+        <slot
+            v-if="loading"
+            name="loading" />
+        <slot v-else />
+    </div>
+</template>

package/components/es-skeleton.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton';
+
+defineProps({
+    animation: {
+        type: String,
+        default: 'wave',
+        validator: (val: string) => ['wave', 'fade', 'none'].includes(val as string),
+    },
+    height: {
+        type: String,
+        default: '1rem',
+    },
+    width: {
+        type: String,
+        default: 'auto',
+    },
+    size: {
+        type: String,
+        default: null,
+    },
+});
+</script>
+
+<template>
+    <skeleton
+        :height="size ? size : height"
+        :width="size ? size : width"
+        class="es-skeleton rounded-xs mb-25 bg-gray-200"
+        :class="{
+            'es-skeleton-wave': animation == 'wave',
+            'es-skeleton-fade': animation == 'fade',
+        }" />
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+@keyframes skeleton-animate-wave {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+@keyframes skeleton-animate-fade {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.4;
+    }
+}
+
+.es-skeleton {
+    overflow: hidden;
+
+    &-wave:after {
+        content: '';
+        height: 100%;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        z-index: 1;
+        // wave animation from PrimeVue Skeleton
+        background-image: linear-gradient(
+            90deg,
+            rgba(variables.$white, 0),
+            rgba(variables.$white, 0.4),
+            rgba(variables.$white, 0)
+        );
+        animation-name: skeleton-animate-wave;
+        animation-duration: 1.2s;
+        animation-timing-function: ease;
+        animation-delay: 0s;
+        animation-iteration-count: infinite;
+        animation-direction: normal;
+        animation-fill-mode: none;
+        animation-play-state: running;
+    }
+
+    &-fade {
+        // fade animation from Bootstrap Skeleton
+        animation-name: skeleton-animate-fade;
+        animation-duration: 0.875s;
+        animation-timing-function: ease-in-out;
+        animation-delay: 0s;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+        animation-fill-mode: none;
+        animation-play-state: running;
+    }
+}
+</style>

package/components/es-slider.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import Slider from 'primevue/slider';
+
+const props = defineProps({
+    /**
+     * Aria label for slider handle
+     */
+    ariaLabel: {
+        type: String,
+        default: null,
+    },
+    /**
+     * An id of the element whose contents describe this slider
+     */
+    ariaLabelledby: {
+        type: String,
+        default: null,
+    },
+    /**
+     * Indicates whether or not the slider should be disabled
+     */
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Function that modifies label value
+     */
+    labelFormatter: {
+        type: Function,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        default: (val: any) => val,
+    },
+    /**
+     * Maximum value of slider
+     */
+    max: {
+        type: Number,
+        required: true,
+        default: 100,
+    },
+    /**
+     * Minimum value of slider
+     */
+    min: {
+        type: Number,
+        required: true,
+        default: 1,
+    },
+    /**
+     * Starting value of slider thumb
+     */
+    startingValue: {
+        type: Number,
+        default: null,
+    },
+    /**
+     * Step increment
+     */
+    step: {
+        type: Number,
+        default: 1,
+    },
+    /**
+     * Function that modifies tooltip value
+     */
+    tooltipFormatter: {
+        type: Function,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        default: (val: any) => val,
+    },
+});
+
+// allow use of v-model on this component
+// and only use props.startingValue if it's provided, otherwise use the value from the v-model
+const model = defineModel<number | number[]>();
+model.value = props.startingValue !== null ? props.startingValue : model.value;
+</script>
+
+<template>
+    <div :class="{ 'es-slider--disabled': props.disabled }">
+        <slider
+            v-model="model"
+            v-bind="$attrs"
+            :aria-disabled="disabled"
+            :disabled="disabled"
+            :min="min"
+            :max="max"
+            :step="step"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :pt="{
+                root: {
+                    class: 'es-slider-root',
+                },
+                range: {
+                    class: 'es-slider-range',
+                },
+                handle: {
+                    class: 'es-slider-handle',
+                },
+            }" />
+        <!--
+            this is aria-hidden because the slider already uses the aria-valuemin and aria-value-max
+            attributes to indicate the minimum and maximum value, so these labels are just for visual users
+        -->
+        <div
+            aria-hidden
+            class="es-slider-labels d-flex flex-row font-weight-bold justify-content-between text-gray-700">
+            <span>{{ labelFormatter(min) }}</span>
+            <span>{{ labelFormatter(max) }}</span>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+$hover-focus-animation-duration: 0.15s;
+$slide-animation-duration: 0.05s;
+
+:deep(.es-slider-root) {
+    background-color: variables.$gray-200;
+    border-radius: 15px;
+    height: 10px;
+    margin-bottom: 1rem;
+    position: relative;
+
+    &[data-p-sliding='true'] .slider-handle {
+        box-shadow: 0 0 0 9px variables.$blue-50;
+    }
+}
+
+:deep(.es-slider-range) {
+    background: linear-gradient(90deg, variables.$blue-400, variables.$blue-800);
+    border-radius: 15px;
+    height: 10px;
+
+    @media not (prefers-reduced-motion) {
+        transition: width $slide-animation-duration ease-in-out;
+    }
+}
+
+:deep(.es-slider-handle) {
+    background-color: variables.$white;
+    border: 9px solid variables.$blue-700;
+    border-radius: 50%;
+    box-shadow: 0 1px 6px 0 rgba(34, 38, 51, 0.25);
+    cursor: pointer;
+    height: 28px;
+    /* important to prevent sliding from attempting to horizontally scroll on mobile */
+    touch-action: none;
+    transform: translate(-54%, -32%);
+    width: 28px;
+
+    @media not (prefers-reduced-motion) {
+        transition:
+            box-shadow $hover-focus-animation-duration ease-in-out,
+            left $slide-animation-duration ease-in-out;
+    }
+
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:hover {
+        box-shadow: 0 0 0 9px variables.$blue-50;
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 9px variables.$blue-300;
+    }
+}
+
+// "tooltip"
+:deep(.es-slider-handle::before) {
+    align-items: center;
+    background-color: variables.$blue-600;
+    border-radius: 50%;
+    bottom: 32px;
+    box-shadow: 0 1px 6px 0 rgba(34, 38, 51, 0.25);
+    color: variables.$white;
+    content: v-bind("`'${tooltipFormatter(model)}'`");
+    display: flex;
+    font-weight: variables.$font-weight-bold;
+    height: 52px;
+    justify-content: center;
+    padding-bottom: 2px;
+    position: absolute;
+    right: -22px;
+    width: 52px;
+}
+
+.es-slider--disabled {
+    /* at least prevents click/tap from giving it focus, if not keyboard */
+    pointer-events: none;
+
+    :deep(.es-slider-range) {
+        /* use background instead of background-color here to clear out the linear-gradient */
+        background: variables.$gray-400;
+    }
+
+    :deep(.es-slider-handle) {
+        border-color: variables.$gray-400;
+        box-shadow: none;
+
+        &::before {
+            background-color: variables.$gray-300;
+            color: variables.$gray-500;
+        }
+    }
+
+    .es-slider-labels {
+        /* use important to override the utility class */
+        color: variables.$gray-500 !important;
+    }
+}
+</style>

package/components/es-spinner.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    role: {
+        type: String,
+        default: 'status',
+    },
+});
+</script>
+
+<template>
+    <span
+        :role="role"
+        class="spinner-border">
+        <span class="sr-only">
+            {{ label }}
+        </span>
+    </span>
+</template>