Skip to content

Commit

Permalink
feat: add privacy choices link and icon to footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@hroth1994
hroth1994 committed Jan 14, 2025
1 parent be29195 commit 5689a70
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 3 deletions.
37 changes: 34 additions & 3 deletions es-vue-base/src/lib-components/EsFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
<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 -->
</div>
Expand Down Expand Up @@ -155,5 +165,26 @@ 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.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>
102 changes: 102 additions & 0 deletions es-vue-base/src/lib-icons/icon-ccpa-opt-out.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<template>
<svg
id="Layer_1"
:style="{
height: height,
width: width,
}"
aria-labelledby="California Consumer Privacy Act (CCPA) Opt-Out Icon"
role="img"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 30 14"
style="enable-background: new 0 0 30 14"
xml:space="preserve">
<g>
<g id="final---dec.11-2020_1_">
<g
id="_x30_208-our-toggle_2_"
transform="translate(-1275.000000, -200.000000)">
<g
id="Final-Copy-2_2_"
transform="translate(1275.000000, 200.000000)">
<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" />
</g>
</g>
</g>
<g id="final---dec.11-2020">
<g
id="_x30_208-our-toggle"
transform="translate(-1275.000000, -200.000000)">
<g
id="Final-Copy-2"
transform="translate(1275.000000, 200.000000)">
<path
class="st1"
d="M22.6,0H7.4c-3.9,0-7,3.1-7,7s3.1,7,7,7h15.2c3.9,0,7-3.1,7-7S26.4,0,22.6,0z M1.6,7c0-3.2,2.6-5.8,5.8-5.8
h9.9l-3.1,11.6H7.4C4.2,12.8,1.6,10.2,1.6,7z" />
<path
id="x"
class="st2"
d="M24.6,4c0.2,0.2,0.2,0.6,0,0.8l0,0L22.5,7l2.2,2.2c0.2,0.2,0.2,0.6,0,0.8c-0.2,0.2-0.6,0.2-0.8,0
l0,0l-2.2-2.2L19.5,10c-0.2,0.2-0.6,0.2-0.8,0c-0.2-0.2-0.2-0.6,0-0.8l0,0L20.8,7l-2.2-2.2c-0.2-0.2-0.2-0.6,0-0.8
c0.2-0.2,0.6-0.2,0.8,0l0,0l2.2,2.2L23.8,4C24,3.8,24.4,3.8,24.6,4z" />
<path
id="y"
class="st3"
d="M12.7,4.1c0.2,0.2,0.3,0.6,0.1,0.8l0,0L8.6,9.8C8.5,9.9,8.4,10,8.3,10c-0.2,0.1-0.5,0.1-0.7-0.1l0,0
L5.4,7.7c-0.2-0.2-0.2-0.6,0-0.8c0.2-0.2,0.6-0.2,0.8,0l0,0L8,8.6l3.8-4.5C12,3.9,12.4,3.9,12.7,4.1z" />
</g>
</g>
</g>
</g>
</svg>
</template>

<script>
export default {
name: 'IconCcpaOptOut',
props: {
/**
* Width
*/
width: {
type: String,
default: '29px',
required: false,
},
/**
* Height
*/
height: {
type: String,
default: '14px',
required: false,
},
},
};
</script>

<style type="text/css">
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #ffffff;
}
.st1 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #0066ff;
}
.st2 {
fill: #ffffff;
}
.st3 {
fill: #0066ff;
}
</style>
1 change: 1 addition & 0 deletions es-vue-base/src/lib-icons/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions es-vue-base/src/lib-utils/footer-content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit 5689a70

Please sign in to comment.