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

package/components/es-segmented-control.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import SelectButton from 'primevue/selectbutton';
+
+interface SegmentedControlItem {
+    label: string;
+}
+
+interface Props {
+    disabled?: boolean;
+    label: string;
+    options: SegmentedControlItem[];
+}
+
+interface ButtonDimensionsInterface {
+    options: Partial<CSSStyleDeclaration>[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+});
+const model = defineModel<number>();
+const segmentedControlRef = useTemplateRef('segmentedControl');
+let resizeObserver: ResizeObserver | null = null;
+
+// needed to avoid Content Layout Shift (CLS)
+// as the inkbar is positioned via left and width attributes which are not set until mount
+// meaning the active state would be initially missing and then pop in on mount, causing CLS
+const isMounted = ref(false);
+
+const buttonDimensions: ButtonDimensionsInterface = reactive({
+    options: props.options?.length ? props.options.map(() => ({})) : [],
+});
+
+const inkbarStyle: ComputedRef<Partial<CSSStyleDeclaration>> = computed(
+    () => buttonDimensions.options[model.value || 0],
+);
+
+// assume the provided label is unique and convert to an id
+// by lowercasing and replacing all whitespace with dashes
+const labelId = computed(() => {
+    return props.label ? props.label.toLowerCase().replace(/\s/g, '-') : '';
+});
+
+// return the left/width to use for the active state bubble, for each provided button
+const getButtonDimensions = (buttons: HTMLCollection) => {
+    const result = [];
+    let runningLeftTotal = 0;
+    for (let i = 0; i < buttons.length; i += 1) {
+        const button = buttons[i] as unknown as HTMLElement;
+        result.push({
+            left: `${runningLeftTotal}px`,
+            width: `${button.offsetWidth}px`,
+        });
+
+        runningLeftTotal += button.offsetWidth;
+    }
+
+    return result;
+};
+
+onMounted(() => {
+    isMounted.value = true;
+
+    if (segmentedControlRef.value) {
+        // set the initial button dimensions
+        const buttons = segmentedControlRef.value.querySelectorAll(
+            '.es-segmented-control-button',
+        ) as unknown as HTMLCollection;
+        buttonDimensions.options = getButtonDimensions(buttons);
+
+        // set up a resize observer for whenever the segmented control's button group changes width
+        // this will most commonly happen when changing between desktop and mobile breakpoints
+        // but could also happen if the label text of any options changes
+        resizeObserver = new ResizeObserver((groups) => {
+            groups.forEach((group) => {
+                const updatedButtons = group.target.children;
+                buttonDimensions.options = getButtonDimensions(updatedButtons);
+            });
+        });
+
+        // start the resize observer listening to the segmented control's button group
+        const group = segmentedControlRef.value.querySelector('.es-segmented-control-group');
+        if (group) {
+            resizeObserver.observe(group);
+        }
+    }
+});
+
+onUnmounted(() => {
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
+});
+</script>
+
+<template>
+    <div
+        v-if="options?.length"
+        ref="segmentedControl"
+        :aria-hidden="props.disabled || undefined"
+        class="es-segmented-control d-flex position-relative"
+        :class="{
+            disabled: props.disabled,
+            'before-mount': !isMounted,
+        }">
+        <label
+            :id="labelId"
+            class="sr-only">
+            {{ label }}
+        </label>
+        <span
+            class="es-segmented-control-inkbar rounded-lg position-absolute"
+            :data-left="buttonDimensions.options[model || 0]?.left || 0"
+            :style="inkbarStyle as any" />
+        <select-button
+            v-model="model"
+            :allow-empty="false"
+            :aria-labelledby="labelId"
+            data-key="label"
+            :disabled="props.disabled"
+            :option-label="(option) => option.label"
+            :option-value="(option) => props.options.findIndex((innerOption) => option.label === innerOption.label)"
+            :options="props.options"
+            :pt="{
+                root: 'es-segmented-control-group bg-gray-100 d-flex rounded-lg',
+                button: 'es-segmented-control-button font-size-sm font-weight-bold position-relative px-200 px-lg-300 rounded-lg',
+                label: 'es-segmented-control-label position-relative',
+            }"
+            :unselectable="false" />
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+
+/* avoid Content Layout Shift (CLS) */
+.es-segmented-control.before-mount {
+    .es-segmented-control-inkbar {
+        /* prevent inkbar with left and width of zero from showing up between first paint and mount */
+        opacity: 0;
+    }
+
+    :deep(.es-segmented-control-button) {
+        position: relative;
+
+        /* temporarily replicate the inkbar's active state until mount */
+        &[data-p-highlight='true'] {
+            &::before {
+                border-radius: variables.$border-radius-lg;
+                content: '';
+                left: 0;
+                position: absolute;
+                width: 100%;
+                z-index: 3;
+            }
+        }
+    }
+}
+
+/* active state bubble */
+.es-segmented-control-inkbar,
+.es-segmented-control.before-mount :deep(.es-segmented-control-button[data-p-highlight='true']::before) {
+    /* using style for bg instead of bg-white class so it can be overridden for disabled state */
+    background-color: variables.$white;
+    border: 2px solid variables.$warm-orange;
+    bottom: 2px;
+    top: 2px;
+    /* bring it ~2px away from each side to match the top/bottom */
+    transform: scaleX(0.98);
+
+    @media not (prefers-reduced-motion) {
+        transition:
+            left 250ms cubic-bezier(0.35, 0, 0.25, 1),
+            width 250ms cubic-bezier(0.35, 0, 0.25, 1);
+    }
+}
+
+/* each individual option */
+:deep(.es-segmented-control-button) {
+    color: variables.$gray-700;
+    cursor: pointer;
+    /*
+        need a non-standard padding to cause a specific height that matches
+        better with our "lg" 14px border radius to get the rounded pill look
+    */
+    padding-bottom: 6px;
+    padding-top: 6px;
+    /* don't transition all properties, otherwise responsive bubble width updates will be delayed */
+    transition: color 250ms ease-in-out;
+    /* prevent text from highlighting when you click a bunch of times */
+    user-select: none;
+    white-space: nowrap;
+    z-index: 4;
+
+    &:hover {
+        color: variables.$gray-900;
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 3px variables.$warm-orange inset;
+        outline: none;
+    }
+}
+
+/* bring the label above the active state bubble */
+:deep(.es-segmented-control-label) {
+    z-index: 4;
+}
+
+/* disabled state */
+.es-segmented-control.disabled,
+.es-segmented-control.before-mount.disabled {
+    cursor: default;
+    pointer-events: none;
+    user-select: none;
+
+    /* active bubble */
+    .es-segmented-control-inkbar,
+    :deep(.es-segmented-control-button[data-p-highlight='true']::before) {
+        background-color: variables.$gray-200;
+        border-color: variables.$gray-300;
+    }
+
+    /* text inside active bubble */
+    :deep(.es-segmented-control-button[data-p-highlight='true']) {
+        &,
+        &:hover {
+            color: variables.$gray-500;
+        }
+    }
+
+    /* all other items */
+    :deep(.es-segmented-control-button) {
+        color: variables.$gray-500;
+    }
+}
+</style>

package/components/es-tabs.vue

@@ -6,20 +6,30 @@ import TabView from 'primevue/tabview';
 const model = defineModel<number>();
 
 // get the list of elements provided as children to the default slot
-const panels = useSlots().default?.() || [];
+const initialChildren = useSlots().default?.() || [];
+const panels: any[] = [];
+initialChildren.forEach((child) => {
+    // unless this has a v-for element and we instead need to access its children
+    if (typeof child.type === 'symbol' && Array.isArray(child.children)) {
+        panels.push(...child.children);
+    } else {
+        panels.push(child);
+    }
+});
 
 // 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(model.value || 0);
+const activeIndex: Ref<number> = ref(model.value || 0);
 
 // watch the v-model for changes and update the active index if it does change
 watch(model, (newVal) => {
+    // @ts-expect-error I don't know why
     activeIndex.value = newVal;
 });
 
 // called from the TabView when the user clicks a tab to make it active
-const updateActiveIndex = (index) => {
+const updateActiveIndex = (index: number) => {
     model.value = index;
 };
 </script>

package/components/es-video.vue

@@ -2,10 +2,12 @@
 // Props
 interface IProps {
     altText: string;
-    coverImageUrl: string;
+    coverImageUrl?: string;
     embedUrl: string;
 }
-const props = defineProps<IProps>();
+const props = withDefaults(defineProps<IProps>(), {
+    coverImageUrl: '',
+});
 const showVideo = ref(false);
 
 // Methods

package/components/es-view-more.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+// @ts-expect-error module has no types
 import truncate from 'html-truncate';
 
 const props = defineProps({

package/components/es-zip-code-form.vue

@@ -85,13 +85,13 @@ const rules = {
 
 const { v$, validateState } = useEsForms(rules, state);
 
-const ctaForm = ref<HTMLFormElement>('ctaForm');
+const ctaForm = useTemplateRef<HTMLFormElement>('ctaForm');
 
 const handleSubmit = () => {
     if (v$.value.$invalid) {
         v$.value.$touch();
     } else {
-        ctaForm.value.submit();
+        ctaForm.value?.submit();
     }
 };
 </script>

package/components/icon/arrow-clockwise.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconArrowClockwise',
     props: {

package/components/icon/arrow-counter-clockwise.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowCounterClockwiseIcon',
     props: {

package/components/icon/arrow-cycle.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconArrowCycle',
     props: {

package/components/icon/arrow-left.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowLeftIcon',
     props: {

package/components/icon/arrow-right.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowRightIcon',
     props: {

package/components/icon/arrow-up.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'ArrowUpIcon',
     props: {

package/components/icon/arrow.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconArrow',
     props: {

package/components/icon/bank.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconBank',
     props: {

package/components/icon/bell.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconBell',
     props: {

package/components/icon/block.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconBlock',
     props: {

package/components/icon/calculator.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCalculator',
     props: {

package/components/icon/calendar.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCalendar',
     props: {

package/components/icon/cart.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCart',
     props: {

package/components/icon/ccpa-opt-out.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+export default {
+    name: 'IconCcpaOptOut',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '30px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '14px',
+            required: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        xml:space="preserve"
+        id="Layer_1"
+        :style="{
+            height: height,
+            width: width,
+        }"
+        aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon"
+        role="img"
+        x="0"
+        y="0"
+        version="1.1"
+        viewBox="0 0 30 14">
+        <g
+            id="Final-Copy-2"
+            style="display: inline">
+            <path
+                class="st0"
+                d="M7.4,12.8h6.8l3.1-11.6H7.4C4.2,1.2,1.6,3.8,1.6,7S4.2,12.8,7.4,12.8z"
+                style="fill: #fff" />
+            <path
+                id="path2"
+                d="M22.6 0H7.4c-3.9 0-7 3.1-7 7s3.1 7 7 7h15.2c3.9 0 7-3.1 7-7s-3.2-7-7-7zm-21 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4c-3.2 0-5.8-2.6-5.8-5.8Z"
+                style="clip-rule: evenodd; fill: #06f; fill-rule: evenodd" />
+            <path
+                id="x"
+                d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0l-2.2-2.2-2.2 2.2c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0Z"
+                style="fill: #fff" />
+            <path
+                id="y"
+                d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0z"
+                style="fill: #06f" />
+        </g>
+    </svg>
+</template>

package/components/icon/chat-add.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChatAdd',
     props: {

package/components/icon/chat-approve.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChatApprove',
     props: {

package/components/icon/chat-bubble.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChatBubble',
     props: {

package/components/icon/chat-dots.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChatDots',
     props: {

package/components/icon/check.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCheck',
     props: {

package/components/icon/chevron-down.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChevronDown',
     props: {

package/components/icon/chevron-horizontal.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChevronHorizontal',
     props: {

package/components/icon/chevron-left.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChevronLeft',
     props: {

package/components/icon/chevron-right.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChevronRight',
     props: {

package/components/icon/chevron-up.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconChevronUp',
     props: {

package/components/icon/circle-alert.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleAlert',
     props: {

package/components/icon/circle-check.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleCheck',
     props: {

package/components/icon/circle-chevron-down.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable max-len -->
 
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleChevronDown',
     props: {

package/components/icon/circle-chevron-left.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleChevronLeft',
     props: {

package/components/icon/circle-chevron-right.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleChevronRight',
     props: {

package/components/icon/circle-chevron-up.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleChevronUp',
     props: {

package/components/icon/circle-minus.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleMinus',
     props: {

package/components/icon/circle-plus.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCirclePlus',
     props: {

package/components/icon/circle-x.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircleX',
     props: {

package/components/icon/circle.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconCircle',
     props: {

package/components/icon/clock.vue

@@ -1,5 +1,5 @@
 <!-- eslint-disable max-len -->
-<script>
+<script lang="ts">
 export default {
     name: 'IconClock',
     props: {

package/components/icon/companies.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconCompanies',
     props: {

package/components/icon/contact-us.vue

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 export default {
     name: 'IconContactUs',
     props: {