@energysage/es-ds-components 3.0.0-alpha.14 → 3.0.0-alpha.16

package/components/es-accordion-list.vue

@@ -14,8 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
     variant: 'default',
 });
 
-// eslint-disable-next-line vue/require-prop-types
-const model = defineModel();
+const model = defineModel<string>();
 
 // get the list of elements provided as children to the default slot
 const initialChildren = useSlots().default?.() || [];
@@ -29,7 +28,9 @@ initialChildren.forEach((child) => {
     }
 });
 
-const activeIndex = ref();
+type ActiveChildren = null | number | number[];
+
+const activeIndex: Ref<ActiveChildren> = ref(null);
 
 watch(model, (newVal) => {
     if (newVal) {
@@ -39,19 +40,30 @@ watch(model, (newVal) => {
 
 const accordionTabs = children.map((child, index) => {
     if (child.props.id === props.initialExpandedId || child.props.id === model.value) {
-        activeIndex.value = index;
+        if (props.allowMultipleExpand) {
+            activeIndex.value = [index];
+        } else {
+            activeIndex.value = index;
+        }
     }
     return child.children;
 });
 
-const updateActiveIndex = (index: any) => {
+const updateActiveIndex = (index: ActiveChildren) => {
     if (model.value) {
-        model.value = children[index]?.props.id || '';
+        if (typeof index === 'number') {
+            model.value = children[index]?.props.id || '';
+        } else if (index === null) {
+            model.value = '';
+        }
+        // There's another case where index will be an array. In that case, v-model is unsupported as specified
+        // in the documentation, so no update is made
     }
 };
 </script>
 
 <template>
+    <!-- @vue-expect-error PrimeVue's type information is wrong -->
     <accordion
         :multiple="allowMultipleExpand"
         :active-index="activeIndex"

package/components/es-carousel.vue

@@ -4,7 +4,6 @@
      - circular has quirky behavior when numVisible doesn't match numScroll
         - you can see this in the circular autoplay example
         - i'm not sure if this is fixable
-     - figure out peek behavior
      - prop to position the arrows at the bottom two corners of a full-width slide, like homepage
 */
 
@@ -35,6 +34,8 @@ interface IProps {
     items: Array<any>;
     numScroll?: number;
     numVisible?: number;
+    peekDesktop?: string;
+    peekMobile?: string;
     showArrows?: boolean;
     showDots?: boolean;
     slideGap?: number;
@@ -50,6 +51,8 @@ const props = withDefaults(defineProps<IProps>(), {
     items: () => [],
     numScroll: 1,
     numVisible: 1,
+    peekDesktop: '',
+    peekMobile: '',
     showArrows: true,
     showDots: true,
     slideGap: 16,
@@ -114,22 +117,34 @@ const dotsMarginTop = computed(() => `${props.controlGap / BASE_FONT_SIZE}rem`);
 
 // the number of dots visible at each breakpoint
 const numDotsXs = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleXs.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleXs.value) / numScrollXs.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsSm = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleSm.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleSm.value) / numScrollSm.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsMd = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleMd.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleMd.value) / numScrollMd.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsLg = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleLg.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleLg.value) / numScrollLg.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsXl = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleXl.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleXl.value) / numScrollXl.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 const numDotsXxl = computed(() =>
-    props.showDots ? Math.ceil(props.items.length / numVisibleXxl.value) : ARROW_SPACING_WHEN_NO_DOTS,
+    props.showDots
+        ? Math.ceil((props.items.length - numVisibleXxl.value) / numScrollXxl.value) + 1
+        : ARROW_SPACING_WHEN_NO_DOTS,
 );
 
 // calculate the arrow position from center based on the number of dots
@@ -292,7 +307,13 @@ onMounted(() => {
                 class: 'd-block',
             },
             itemsContent: {
-                class: 'w-100 overflow-hidden',
+                class: [
+                    'w-100 overflow-hidden',
+                    {
+                        'es-carousel-peek-desktop': peekDesktop,
+                        'es-carousel-peek-mobile': peekMobile,
+                    },
+                ],
             },
             itemsContainer: {
                 class: 'd-flex',
@@ -372,6 +393,18 @@ $num-dots-supported: 8;
 :deep(.es-carousel-container) {
     margin-left: v-bind(negativeMargin);
     margin-right: v-bind(negativeMargin);
+
+    > div.es-carousel-peek-desktop {
+        @include breakpoints.media-breakpoint-up(lg) {
+            padding-right: v-bind(peekDesktop);
+        }
+    }
+
+    > div.es-carousel-peek-mobile {
+        @include breakpoints.media-breakpoint-down(sm) {
+            padding-right: v-bind(peekMobile);
+        }
+    }
 }
 
 /* card sizing, based on num visible at each breakpoint */

package/components/es-footer.vue

@@ -25,6 +25,27 @@ export default {
             return this.content.copyrightText.replace('{currentYear}', new Date().getFullYear());
         },
     },
+    mounted() {
+        // TODO: update with GTM tag in prod once we've gone live
+        // See https://tagmanager.google.com/#/container/accounts/2920232696/containers/8806152/workspaces/126/tags
+        // for GTM script that triggers this event.
+        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 +141,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">
                         <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 mt-25 mb-50 pr-lg-300">
                             {{ 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/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/package.json

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

package/utils/get-es-footer-content.ts

@@ -76,6 +76,7 @@ export default (
         { text: 'Privacy policy', url: `${ES_DOMAIN}/privacy-policy/` },
         { text: 'Mobile terms of use', url: `${ES_DOMAIN}/mobile-terms-of-use/` },
         { text: 'Non-discrimination policy', url: `${ES_DOMAIN}/nondiscrimination/` },
+        { text: 'Your privacy choices' },
     ],
     copyrightText: '© Copyright 2009-{currentYear} EnergySage, Inc. All rights reserved.',
     trademarkText: `ENERGYSAGE is a registered trademark and the EnergySage logo is a trademark of EnergySage, Inc.