@energysage/es-ds-components 3.0.0-alpha.7 → 3.0.0-alpha.8

package/components/es-col.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-defineProps<{
+const props = defineProps<{
     cols?: string;
     sm?: string;
     md?: string;
@@ -7,12 +7,14 @@ defineProps<{
     xl?: string;
     xxl?: string;
 }>();
+
+const undefinedSize = !(props.cols || props.sm || props.md || props.lg || props.xl || props.xxl);
 </script>
 
 <template>
     <div
-        class="col"
         :class="{
+            col: undefinedSize,
             [`col-${cols}`]: cols,
             [`col-sm-${sm}`]: sm,
             [`col-md-${md}`]: md,

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

@@ -3,20 +3,33 @@ import Slider from 'primevue/slider';
 
 const props = defineProps({
     /**
-     * Starting value of slider thumb
+     * Aria label for slider handle
      */
-    startingValue: {
-        type: Number,
-        required: true,
-        default: 1,
+    ariaLabel: {
+        type: String,
+        default: null,
     },
     /**
-     * Minimum value of slider
+     * An id of the element whose contents describe this slider
      */
-    min: {
-        type: Number,
-        required: true,
-        default: 1,
+    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
@@ -27,67 +40,73 @@ const props = defineProps({
         default: 100,
     },
     /**
-     * Step increment
+     * Minimum value of slider
      */
-    step: {
+    min: {
         type: Number,
+        required: true,
         default: 1,
     },
     /**
-     * Aria label for slider handle
+     * Starting value of slider thumb
      */
-    ariaLabel: {
-        type: String,
-        required: false,
-        default: 'Select a number',
+    startingValue: {
+        type: Number,
+        default: null,
     },
     /**
-     * Function that modifies label value
+     * Step increment
      */
-    labelFormatter: {
-        type: Function,
-        required: false,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        default: (val: any) => val,
+    step: {
+        type: Number,
+        default: 1,
     },
     /**
      * Function that modifies tooltip value
      */
     tooltipFormatter: {
         type: Function,
-        required: false,
         // 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;
+model.value = props.startingValue !== null ? props.startingValue : model.value;
 </script>
 
 <template>
-    <div>
+    <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: 'slider-root',
+                    class: 'es-slider-root',
                 },
                 range: {
-                    class: 'slider-range',
+                    class: 'es-slider-range',
                 },
                 handle: {
-                    class: 'slider-handle',
+                    class: 'es-slider-handle',
                 },
             }" />
-
-        <div class="d-flex flex-row justify-content-between">
+        <!--
+            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>
@@ -96,47 +115,74 @@ model.value = props.startingValue;
 
 <style lang="scss" scoped>
 @use '@energysage/es-ds-styles/scss/variables' as variables;
-:deep(.slider-root) {
-    background-color: variables.$gray-300;
+
+$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: 0.75rem;
+    margin-bottom: 1rem;
     position: relative;
+
+    &[data-p-sliding='true'] .slider-handle {
+        box-shadow: 0 0 0 9px variables.$blue-50;
+    }
 }
 
-:deep(.slider-range) {
-    background: linear-gradient(90deg, #688aea, #162676);
+: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(.slider-handle) {
+:deep(.es-slider-handle) {
     background-color: variables.$white;
-    border: 9px solid variables.$blue-600;
+    border: 9px solid variables.$blue-700;
     border-radius: 50%;
-    box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
+    box-shadow: 0 1px 6px 0 rgba(34, 38, 51, 0.25);
     cursor: pointer;
-    filter: drop-shadow(0 1px 6px rgba(34, 38, 51, 0.25));
     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(.slider-handle::before) {
+:deep(.es-slider-handle::before) {
     align-items: center;
     background-color: variables.$blue-600;
     border-radius: 50%;
-    bottom: 27px;
+    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-boldest;
+    font-weight: variables.$font-weight-bold;
     height: 52px;
     justify-content: center;
     padding-bottom: 2px;
@@ -144,4 +190,29 @@ model.value = props.startingValue;
     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-tabs.vue

@@ -11,7 +11,7 @@ const panels = useSlots().default?.() || [];
 // keep track of the active tab index
 //  - from above, if v-model is used
 //  - from below, if the tab component receives a click
-const activeIndex = ref(0);
+const activeIndex = ref(model.value || 0);
 
 // watch the v-model for changes and update the active index if it does change
 watch(model, (newVal) => {

package/components/es-video.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+// Props
+interface IProps {
+    altText: string;
+    coverImageUrl: string;
+    embedUrl: string;
+}
+const props = defineProps<IProps>();
+const showVideo = ref(false);
+
+// Methods
+function getVideoIdFromUrl(url: string) {
+    const embedPattern = /https:\/\/www\.youtube\.com\/embed\/(?<videoId>[A-Za-z0-9-]+)/;
+    const parsedUrl = embedPattern.exec(url);
+    if (parsedUrl) {
+        return parsedUrl?.groups?.videoId;
+    }
+    return '';
+}
+
+// Computed
+const videoId = computed(() => getVideoIdFromUrl(props.embedUrl));
+const embedUrlWithParams = computed(
+    () => `https://www.youtube.com/embed/${videoId.value}?rel=0&autoplay=1&cc_load_policy=1&cc_lang_pref=en`,
+);
+</script>
+
+<template>
+    <div>
+        <div
+            v-if="showVideo"
+            class="embed-responsive embed-responsive-16by9">
+            <iframe
+                :id="`youtube-video-${videoId}`"
+                :src="embedUrlWithParams"
+                class="embed-responsive-item"
+                frameborder="0"></iframe>
+        </div>
+        <es-card
+            v-else
+            :id="`youtube-placeholder-${videoId}`"
+            class="EsVideo-button bg-transparent overflow-hidden p-0 position-relative w-100"
+            variant="interactive"
+            @click="showVideo = true">
+            <slot v-if="$slots.default" />
+            <nuxt-img
+                v-else
+                class="EsVideo-image d-block w-100"
+                sizes="md:530px sm:275px"
+                :src="props.coverImageUrl"
+                :alt="props.altText" />
+            <icon-video-play
+                class="EsVideo-icon position-absolute abs-center"
+                width="74px"
+                height="54px" />
+        </es-card>
+    </div>
+</template>

package/nuxt.config.ts

@@ -66,6 +66,7 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/skeleton',
                 'primevue/slider',
                 'primevue/tabpanel',
                 'primevue/tabview',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "3.0.0-alpha.7",
+    "version": "3.0.0-alpha.8",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",

package/utils/get-es-nav-bar-global-content.js

@@ -306,6 +306,10 @@ export default (
                         },
                         {
                             name: 'Financing',
+                            link: `${ES_DOMAIN}/financing/`,
+                        },
+                        {
+                            name: 'Solar loan providers',
                             link: `${ES_DOMAIN}/solar/financing/loan-providers/`,
                         },
                         {
@@ -398,6 +402,10 @@ export default (
                     name: 'Heat pump incentives',
                     link: `${ES_DOMAIN}/heat-pumps/heat-pump-incentives/`,
                 },
+                {
+                    name: 'Financing',
+                    link: `${ES_DOMAIN}/financing/`,
+                },
                 {
                     name: 'Get personalized quotes',
                     link: `${ES_DOMAIN}/shop/heat-pumps/`,