@energysage/es-ds-components 3.0.0-alpha.9 → 3.0.1

package/components/es-container.vue

@@ -1,5 +1,14 @@
+<script setup lang="ts">
+interface IProps {
+    fluid?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    fluid: false,
+});
+</script>
+
 <template>
-    <div class="container">
+    <div :class="props.fluid ? 'container-fluid' : 'container'">
         <slot />
     </div>
 </template>

package/components/es-data-table-column.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Column from 'primevue/column';
+import type { ComponentOptionsMixin } from 'vue';
+
+// magic solution for wrapping Column successfully
+// https://www.reddit.com/r/vuejs/comments/1g17u7u/comment/lvjv91h/
+defineOptions({
+    name: 'Column',
+    extends: (Column as unknown as ComponentOptionsMixin).extends,
+    inheritAttrs: false,
+});
+</script>
+
+<!-- eslint-disable vue/valid-template-root -->
+<template>
+    <!--
+    While this file needs to exist to keep Nuxt happy, it doesn't actually do anything.
+    Instances of es-data-table-column are placed inside es-data-table, and es-data-table handles their display.
+    -->
+</template>

package/components/es-data-table.vue

@@ -1,75 +1,38 @@
 <script setup lang="ts">
 import DataTable from 'primevue/datatable';
-import Column from 'primevue/column';
 
 const props = defineProps({
-    fields: {
-        type: Array,
-        default: null,
-    },
     items: {
         type: Array,
         required: true,
     },
-    stickyFirstCol: {
+    scrollable: {
         type: Boolean,
         default: false,
     },
-    stickyHeader: {
-        type: [Boolean, String],
-        default: false,
+    scrollHeight: {
+        type: String,
+        default: '',
     },
 });
 
-const checkFrozenRow = (index: any) => {
-    if (index === 0 && props.stickyFirstCol) {
-        return true;
-    }
-    return false;
-};
-
-// Code is taken from BootStrap Vue to implemnt <b-table> feature that automatically
-// samples the first row to extract field name and "humanize" by converting kebab-case,
-// snake_case, and camelCase to individual words and capitalizes each word.
-// Doc: https://bootstrap-vue.org/docs/components/table
-// Source Code: https://github.com/bootstrap-vue/bootstrap-vue/blob/5173dd19f6f46dc9d125cd7233fb59ccd2ef9296/src/utils/string.js#L30
-const startCase = (str: string) =>
-    str
-        .replace(/_/g, ' ')
-        .replace(/([a-z])([A-Z])/g, (_, $1, $2) => `${$1} ${$2}`)
-        .replace(/(\s|^)(\w)/g, (_, $1, $2) => $1 + $2.toUpperCase());
-
-const label = (col: any) => {
-    if (typeof col === 'string') {
-        return startCase(col);
+// avoid passing in default scrollHeight value when scrollable is false
+// otherwise it will limit the height when we don't want it to
+const defaultScrollHeight = computed(() => {
+    if (props.scrollable) {
+        return props.scrollHeight || '305px';
     }
-    return col?.label ? col.label : startCase(col?.key);
-};
 
-const columns = computed(() => {
-    if (props.fields) {
-        return props.fields;
-    }
-    // @ts-expect-error not sure
-    return Object.keys(props.items[0]);
-});
-
-const scrollHeight = computed(() => {
-    if (props.stickyHeader) {
-        if (typeof props.stickyHeader === 'string') {
-            return props.stickyHeader;
-        }
-        return '300px';
-    }
     return '';
 });
 </script>
+
 <template>
     <data-table
-        scrollable
+        class="border table__data-table table-spacing table"
         :pt="{
             table: {
-                class: 'font-size-75 font-size-md-100',
+                class: 'font-size-75 font-size-md-100 w-100',
                 style: 'border-collapse: separate; border-spacing: 0;',
             },
             wrapper: {
@@ -79,50 +42,34 @@ const scrollHeight = computed(() => {
                 style: 'top: 0px; z-index: 2',
             },
         }"
-        :value="props.items"
-        class="border table__data-table table-spacing table"
-        :scroll-height="scrollHeight">
-        <!-- @vue-expect-error -->
-        <column
-            v-for="(col, index) of columns"
-            :key="col?.key ? col.key : col"
-            :field="col?.key ? col.key : col"
-            :header="label(col)"
-            :sortable="col?.sortable"
-            :frozen="checkFrozenRow(index)"
-            align-frozen="left"
-            :pt="{
-                sortIcon: {
-                    style: 'display: none',
-                },
-                headerCell: (options) => ({
-                    class: [
-                        {
-                            sortable: options.props.sortable,
-                            stickyFirstColHeader: options.props.frozen,
-                        },
-                    ],
-                }),
-                bodyCell: (options) => ({
-                    class: [
-                        {
-                            stickyFirstCol: options.props.frozen,
-                        },
-                    ],
-                }),
-            }">
-        </column>
+        :scrollable="scrollable"
+        :scroll-height="defaultScrollHeight"
+        :value="items">
+        <slot />
     </data-table>
 </template>
+
 <style scoped lang="scss">
-:deep(.stickyFirstColHeader) {
-    position: sticky !important;
+:deep(th[data-p-sortable-column='true']) {
+    cursor: pointer;
+    user-select: none;
+
+    div[data-pc-section='headercontent'] {
+        align-items: center;
+        display: flex;
+    }
+    span[data-pc-section='sort'] {
+        display: inline-block;
+        margin-left: 0.5rem;
+    }
 }
-:deep(.stickyFirstCol) {
+
+:deep(td[data-p-frozen-column='true']),
+:deep(th[data-p-frozen-column='true']) {
     position: sticky !important;
-    background: inherit;
 }
-:deep(.sortable) {
-    cursor: pointer !important;
+
+:deep(td[data-p-frozen-column='true']) {
+    background: inherit;
 }
 </style>

package/components/es-error-page.vue

@@ -4,35 +4,44 @@ import IconCommunitySolar from './icon/community-solar.vue';
 import IconInfoBlogPost from './icon/info-blog-post.vue';
 import IconMarketplace from './icon/marketplace.vue';
 
-const ES_DOMAIN = process.env.ES_DOMAIN || 'https://www.energysage.com';
-const linkItems = [
-    {
-        icon: IconContactUs,
-        link: 'mailto:hello@energysage.com',
-        label: 'Contact us',
-    },
-    {
-        icon: IconCommunitySolar,
-        link: `${ES_DOMAIN}/solar/`,
-        label: 'Learn about solar',
-    },
-    {
-        icon: IconInfoBlogPost,
-        link: `${ES_DOMAIN}/blog/`,
-        label: 'EnergySage blog',
-    },
-    {
-        icon: IconMarketplace,
-        link: `${ES_DOMAIN}/shop/home-solar/`,
-        label: 'EnergySage marketplace',
-    },
-];
-
 const props = defineProps({
     errorType: {
         type: String,
         required: true,
     },
+    esDomain: {
+        type: String,
+        default: null,
+    },
+});
+
+const esDomain = computed(() => {
+    return props.esDomain || 'https://www.energysage.com';
+});
+
+const linkItems = computed(() => {
+    return [
+        {
+            icon: IconContactUs,
+            link: 'mailto:hello@energysage.com',
+            label: 'Contact us',
+        },
+        {
+            icon: IconCommunitySolar,
+            link: `${esDomain.value}/solar/`,
+            label: 'Learn about solar',
+        },
+        {
+            icon: IconInfoBlogPost,
+            link: `${esDomain.value}/blog/`,
+            label: 'EnergySage blog',
+        },
+        {
+            icon: IconMarketplace,
+            link: `${esDomain.value}/shop/home-solar/`,
+            label: 'EnergySage marketplace',
+        },
+    ];
 });
 
 interface ErrorCode {

package/components/es-footer.vue

@@ -25,6 +25,25 @@ export default {
             return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
         },
     },
+    mounted() {
+        // https://energysage.atlassian.net/wiki/spaces/FG/pages/1427865649/One-trust+Consent+Initialization+and+GTM
+        window.addEventListener('OneTrustLoadedCb', () => {
+            (window as any).OneTrust.OnConsentChanged(() => {
+                // OneTrust modal should modify cookie values, a hard-refresh will
+                // trigger re-loading GTM with updated cookie values, which in turn
+                // will only fire tags aligned with new preferences
+                window.location.reload();
+                return false;
+            });
+            document.querySelectorAll('.toggle-info-display').forEach((elem) => {
+                // Function closure to ensure event only fires on one elem
+                elem.addEventListener('click', (e) => {
+                    e.stopImmediatePropagation();
+                    (window as any).OneTrust.ToggleInfoDisplay();
+                });
+            });
+        });
+    },
 };
 </script>
 
@@ -120,16 +139,26 @@ export default {
                 <!-- Trademark Info -->
                 <!-- Legal -->
                 <hr class="border-top border-blue-500 m-0" />
-                <div class="row justify-content-center pt-100">
+                <div class="row pt-100">
                     <div
                         v-for="link in content.legalLinks"
                         :key="link.text"
-                        class="col col-6 col-lg-auto font-size-75 font-weight-semibold font-size-md-50 font-weight-md-normal mt-25 mb-50 px-lg-300">
+                        class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300">
                         <es-nav-bar-link
+                            v-if="link.url"
                             :href="link.url"
-                            class="text-reset font-weight-normal">
+                            class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
                             {{ link.text }}
                         </es-nav-bar-link>
+                        <div v-else>
+                            <icon-ccpa-opt-out />
+                            <es-button
+                                inline
+                                class="toggle-info-display text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal ml-1"
+                                variant="link">
+                                {{ link.text }}
+                            </es-button>
+                        </div>
                     </div>
                 </div>
                 <!-- Legal -->

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,7 +6,16 @@ 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
@@ -36,7 +45,6 @@ const updateActiveIndex = (index: number) => {
             panelContainer: 'tab-content',
         }"
         @update:active-index="updateActiveIndex">
-        <!-- @vue-expect-error -->
         <tab-panel
             v-for="(panel, index) in panels"
             :key="index"
@@ -60,7 +68,6 @@ const updateActiveIndex = (index: number) => {
                     ],
                 }),
             }">
-            <!-- @vue-expect-error -->
             <component
                 :is="item"
                 v-for="(item, idx) in panel.children.default()"

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/nuxt.config.ts

@@ -18,6 +18,11 @@ export default defineNuxtConfig({
         },
     },
 
+    // Configure how Nuxt auto-imports composables into your application.
+    imports: {
+        dirs: ['composables', 'types'],
+    },
+
     modules: [
         // https://google-fonts.nuxtjs.org/getting-started/setup
         '@nuxtjs/google-fonts',
@@ -66,6 +71,7 @@ export default defineNuxtConfig({
                 'primevue/progressbar',
                 'primevue/radiobutton',
                 'primevue/rating',
+                'primevue/selectbutton',
                 'primevue/skeleton',
                 'primevue/slider',
                 'primevue/tabpanel',