feat: add privacy choices link and icon to footer

es-bs-base/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@energysage/es-bs-base",
   "description": "Base CSS for EnergySage design system based on Bootstrap",
-  "version": "2.2.3",
+  "version": "2.2.5-alpha.0",
   "config": {
     "version_short": "0.1"
   },

es-design-system/package.json

@@ -1,6 +1,6 @@
 {
     "name": "es-design-system",
-    "version": "2.2.3",
+    "version": "2.2.5-alpha.0",
     "private": true,
     "scripts": {
         "dev": "nuxt",
@@ -17,8 +17,8 @@
     },
     "prettier": "eslint-config-energysage/prettier",
     "dependencies": {
-        "@energysage/es-bs-base": "^2.2.3",
-        "@energysage/es-vue-base": "^2.2.3",
+        "@energysage/es-bs-base": "^2.2.5-alpha.0",
+        "@energysage/es-vue-base": "^2.2.5-alpha.0",
         "@nuxtjs/axios": "^5.13.6",
         "@nuxtjs/i18n": "^7.3.1",
         "bootstrap-vue": "^2.23.1",

es-vue-base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energysage/es-vue-base",
-  "version": "2.2.3",
+  "version": "2.2.5-alpha.0",
   "private": false,
   "description": "",
   "scripts": {
@@ -30,7 +30,7 @@
     "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.20.2",
-    "@energysage/es-bs-base": "^2.2.3",
+    "@energysage/es-bs-base": "^2.2.5-alpha.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-image": "^3.0.0",

es-vue-base/src/lib-components/EsFooter.vue

@@ -85,16 +85,26 @@
                 <!-- 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 -->
             </div>
@@ -155,5 +165,24 @@ 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.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.OneTrust.ToggleInfoDisplay();
+                });
+            });
+        });
+    },
 };
 </script>

es-vue-base/src/lib-icons/icon-ccpa-opt-out.vue

@@ -0,0 +1,61 @@
+<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>
+
+<script>
+export default {
+    name: 'IconCcpaOptOut',
+    props: {
+        /**
+         * Width
+         */
+        width: {
+            type: String,
+            default: '30px',
+            required: false,
+        },
+        /**
+         * Height
+         */
+        height: {
+            type: String,
+            default: '14px',
+            required: false,
+        },
+    },
+};
+</script>

es-vue-base/src/lib-icons/index.js

@@ -85,6 +85,7 @@ export { default as IconUpload } from './icon-upload.vue';
 export { default as IconVideoPlay } from './icon-video-play.vue';
 export { default as IconBank } from './icon-bank.vue';
 export { default as IconCreditCard } from './icon-credit-card.vue';
+export { default as IconCcpaOptOut } from './icon-ccpa-opt-out.vue';
 
 // marketing icons
 export { default as IconBattery } from './icon-battery.vue';

es-vue-base/src/lib-utils/footer-content.js

@@ -74,6 +74,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.

es-vue-base/tests/__snapshots__/EsFooter.spec.js.snap

@@ -153,22 +153,30 @@ exports[`EsFooter <EsFooter /> 1`] = `
         Other trademarks are the property of either EnergySage, Inc. or our licensors and are used with permission.
       </p>
       <p class="mb-200 font-size-75">
-        © Copyright 2009-2024 EnergySage, Inc. All rights reserved.
+        © Copyright 2009-2025 EnergySage, Inc. All rights reserved.
       </p>
       <hr class="border-top border-blue-500 m-0">
-      <div class="row justify-content-center pt-100">
-        <div 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"><a href="https://www.energysage.com/terms-of-use/" target="_self" class="text-reset font-weight-normal">
+      <div class="row pt-100">
+        <div class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300"><a href="https://www.energysage.com/terms-of-use/" target="_self" class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
             Terms of use
           </a></div>
-        <div 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"><a href="https://www.energysage.com/privacy-policy/" target="_self" class="text-reset font-weight-normal">
+        <div class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300"><a href="https://www.energysage.com/privacy-policy/" target="_self" class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
             Privacy policy
           </a></div>
-        <div 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"><a href="https://www.energysage.com/mobile-terms-of-use/" target="_self" class="text-reset font-weight-normal">
+        <div class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300"><a href="https://www.energysage.com/mobile-terms-of-use/" target="_self" class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
             Mobile terms of use
           </a></div>
-        <div 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"><a href="https://www.energysage.com/nondiscrimination/" target="_self" class="text-reset font-weight-normal">
+        <div class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300"><a href="https://www.energysage.com/nondiscrimination/" target="_self" class="text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal">
             Non-discrimination policy
           </a></div>
+        <div class="col col-6 col-lg-auto mt-25 mb-50 pr-lg-300">
+          <div>
+            <icon-ccpa-opt-out></icon-ccpa-opt-out>
+            <es-button inline="" variant="link" class="toggle-info-display text-reset font-weight-normal font-size-75 font-size-md-50 font-weight-md-normal ml-1">
+              Your privacy choices
+            </es-button>
+          </div>
+        </div>
       </div>
     </div>
   </div>

es-vue-base/tests/__snapshots__/icons.spec.js.snap

@@ -107,6 +107,17 @@ exports[`icons IconCart renders correctly 1`] = `
 </svg>"
 `;
 
+exports[`icons IconCcpaOptOut renders correctly 1`] = `
+"<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" id="Layer_1" aria-label="California Consumer Privacy Act (CCPA) Opt-Out Icon" role="img" x="0" y="0" version="1.1" viewBox="0 0 30 14" style="height: 14px; width: 30px;">
+  <g id="Final-Copy-2" style="display: inline;">
+    <path 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" class="st0" style="fill: #fff;"></path>
+    <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>
+    <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>
+    <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;"></path>
+  </g>
+</svg>"
+`;
+
 exports[`icons IconChatAdd renders correctly 1`] = `
 "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" style="height: 24px; width: 24px;">
   <path d="M13.905 2.044c3.557 0 5.508 0 6.842 1.344 1.325 1.363 1.325 3.338 1.325 6.914 0 3.575-.11 5.66-1.325 6.886-1.216 1.225-4.075 1.344-7.405 1.344-.41 0-.816.091-1.189.265L7.126 21.98a.902.902 0 0 1-.48.137.848.848 0 0 1-.436-.12.91.91 0 0 1-.472-.795v-2.88a4.089 4.089 0 0 1-2.296-1.134c-1.334-1.335-1.334-3.31-1.334-6.886s.009-5.597 1.334-6.914c1.325-1.317 3.321-1.317 6.833-1.344h3.63Z" fill="none"></path>

lerna.json

@@ -4,5 +4,5 @@
         "es-vue-base",
         "es-design-system"
     ],
-    "version": "2.2.3"
+    "version": "2.2.5-alpha.0"
 }