@energysage/es-ds-components 3.0.0-alpha.5 → 3.0.0-alpha.7

package/components/es-nav-bar-topic-menu.vue

@@ -0,0 +1,194 @@
+<script lang="js">
+export default {
+    name: 'EsNavBarTopicMenu',
+    props: {
+        homeName: {
+            type: String,
+            required: true,
+        },
+        homeLink: {
+            type: String,
+            required: true,
+        },
+        closeButtonText: {
+            type: String,
+            required: true,
+        },
+        items: {
+            type: Array,
+            required: true,
+        },
+        link: {
+            type: String,
+            default: '',
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        showItemsOnMobile: {
+            type: Boolean,
+            default: true,
+        },
+        subHeading: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        checkboxId() {
+            return `topMenu-${this.name}`;
+        },
+    },
+};
+</script>
+
+<template>
+    <li
+        class="topic-group border-0 mb-lg-200"
+        :class="{ 'nav-item': showItemsOnMobile }">
+        <!-- desktop header, if it's a link -->
+        <es-nav-bar-link
+            v-if="link"
+            class="dropdown-item nav-link topic-menu-header d-none d-lg-block font-size-sm mb-lg-50 position-relative px-lg-0 py-lg-50 text-gray"
+            :href="link"
+            :target="newTab ? '_blank' : null">
+            <span class="align-items-center eyebrow d-flex link-name">
+                {{ name }}
+                <icon-arrow-right
+                    class="d-none d-lg-inline-block ml-25"
+                    height="24px"
+                    width="24px" />
+            </span>
+            <span
+                v-if="subHeading"
+                class="d-block link-subheading">
+                {{ subHeading }}
+            </span>
+        </es-nav-bar-link>
+        <!-- desktop header, if it's not a link -->
+        <p
+            v-else
+            class="dropdown-toggle topic-menu-header eyebrow align-items-center d-none d-lg-block mb-lg-50 position-relative px-lg-0 py-lg-50">
+            <span class="d-block">
+                {{ name }}
+            </span>
+            <span
+                v-if="subHeading"
+                class="d-block">
+                {{ subHeading }}
+            </span>
+        </p>
+        <!-- mobile nav item, tapping which drills down to submenu -->
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="checkboxId"
+            class="dropdown-label nav-item-border-mobile nav-link align-items-center d-lg-none justify-content-between w-100 h-100 font-weight-bold"
+            :class="{
+                'd-flex': showItemsOnMobile,
+                'd-none': !showItemsOnMobile,
+            }">
+            {{ name }}
+            <icon-chevron-right
+                class="expand-icon"
+                style="height: 24px" />
+        </label>
+        <input
+            :id="checkboxId"
+            :name="checkboxId"
+            type="checkbox"
+            class="menu-checkbox" />
+        <div class="menu submenu">
+            <div class="menu-header">
+                <div class="col-3" />
+                <div class="col-6 align-self-center text-center py-100">
+                    <div class="nav-es-logo-mobile align-items-center d-flex">
+                        <slot name="logo" />
+                    </div>
+                    <span class="sr-only">
+                        {{ homeName }}
+                    </span>
+                </div>
+                <div class="d-flex col-3 justify-content-end">
+                    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                    <label
+                        for="data--main-menu"
+                        class="mb-0">
+                        <icon-x class="menu-toggle align-self-center" />
+                        <span class="sr-only">
+                            {{ closeButtonText }}
+                        </span>
+                    </label>
+                </div>
+            </div>
+            <ul
+                class="visible-lg list-unstyled"
+                style="top: 0">
+                <li class="nav-item col-lg-12 d-lg-none mb-50">
+                    <div class="col-2">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            :for="checkboxId"
+                            class="menu-toggle d-flex w-100 h-100 mb-0 align-items-center font-size-sm">
+                            <icon-arrow-left
+                                class="expand-icon"
+                                style="height: 24px" />
+                        </label>
+                    </div>
+                    <div class="col-8 align-self-center text-center py-100">
+                        <es-nav-bar-link
+                            v-if="link"
+                            class="nav-link font-weight-bold d-flex w-100 h-100 justify-content-center align-items-center"
+                            :href="link"
+                            :target="newTab ? '_blank' : null">
+                            {{ name }}
+                        </es-nav-bar-link>
+                        <div
+                            v-else
+                            class="h-100">
+                            <span
+                                class="nav-item justify-content-center align-items-center d-flex font-weight-boldest h-100 text-decoration-none w-100">
+                                {{ name }}
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-2">&nbsp;</div>
+                </li>
+                <li
+                    v-for="item in items"
+                    :key="item.name">
+                    <es-nav-bar-link
+                        class="dropdown-item nav-item nav-item-border-mobile nav-link d-flex align-items-center ml-lg-0 px-lg-0 py-lg-50"
+                        :class="{ 'font-weight-bold': item.emphasize }"
+                        :href="item.link"
+                        :target="item.newTab ? '_blank' : null">
+                        {{ item.name }}
+                    </es-nav-bar-link>
+                </li>
+            </ul>
+        </div>
+        <!-- mobile link, shown only if we have a link and don't want to show child items on mobile -->
+        <es-nav-bar-link
+            v-if="link"
+            class="nav-item nav-item-menu nav-item-border-mobile nav-link d-lg-none w-100 text-decoration-none"
+            :class="{
+                'd-none': showItemsOnMobile,
+                'd-block': !showItemsOnMobile,
+            }"
+            :href="link"
+            :target="newTab ? '_blank' : null">
+            <span class="d-block eyebrow link-name">
+                {{ name }}
+            </span>
+            <span
+                v-if="subHeading"
+                class="d-block font-size-sm link-subheading">
+                {{ subHeading }}
+            </span>
+        </es-nav-bar-link>
+    </li>
+</template>

package/components/es-nav-bar.vue

@@ -0,0 +1,396 @@
+<script lang="js">
+export default {
+    name: 'EsNavBar',
+    props: {
+        accountContent: {
+            type: Object,
+            required: true,
+        },
+        globalContent: {
+            type: Object,
+            required: true,
+        },
+    },
+    mounted() {
+        // CUSTOM GLOBAL-NAV SCRIPT STARTS
+
+        // Function to collapse all open menus
+        function uncheck_menus() {
+            document.querySelectorAll('.menu-checkbox').forEach((element) => {
+                const checkbox = element;
+                checkbox.checked = false;
+            });
+        }
+
+        // Create an overlay to obscure page contents
+        const overlay = document.querySelector('.content-overlay');
+
+        // Function to show/hide overlay
+        function show_overlay(overlay_visible) {
+            if (overlay_visible) {
+                overlay.classList.add('show');
+            } else {
+                overlay.classList.remove('show');
+            }
+        }
+
+        // Show overlay and lock scrolling on body when menu is open
+        function show_mobile_menus() {
+            show_overlay(true);
+            document.body.style.overflow = 'hidden';
+        }
+
+        // Close all submenus, hide overlay, and unlock scrolling when menu is closed
+        function collapse_mobile_menus() {
+            uncheck_menus();
+            show_overlay(false);
+            document.body.style.overflow = 'visible';
+        }
+
+        // Create a checkbox used to determine if any mobile menus are open
+        const mainMenuCheckbox = document.querySelector('.main-menu-checkbox');
+        const accountMenuCheckbox = document.querySelector('.account-menu-checkbox');
+
+        // Collapse all open menus on window resize
+        window.addEventListener('resize', () => {
+            if (mainMenuCheckbox.checked || accountMenuCheckbox.checked) {
+                collapse_mobile_menus();
+            }
+        });
+
+        // Collapse all open menus on overlay click
+        overlay.addEventListener('click', () => {
+            collapse_mobile_menus();
+        });
+
+        // Show overlay on hovers for desktop only
+        document
+            .querySelectorAll(
+                // eslint-disable-next-line max-len
+                '.nav-es-container .nav-item .dropdown-toggle, .nav-es-container .nav-item .dropdown-menu, .nav-es-container .nav-item.has-dropdown',
+            )
+            .forEach((element) => {
+                element.addEventListener('mouseover', () => {
+                    show_overlay(true);
+                });
+                element.addEventListener('mouseout', () => {
+                    // Hide overlay on mouseout on desktop not mobile
+                    show_overlay(mainMenuCheckbox.checked || accountMenuCheckbox.checked);
+                });
+            });
+
+        // Toggle menu display on main menu open/close
+        mainMenuCheckbox.addEventListener('change', (event) => {
+            if (event.target.checked) {
+                show_mobile_menus();
+            } else {
+                collapse_mobile_menus();
+            }
+        });
+
+        // Toggle menu display on account menu open/close
+        accountMenuCheckbox.addEventListener('change', (event) => {
+            if (event.target.checked) {
+                show_mobile_menus();
+            } else {
+                collapse_mobile_menus();
+            }
+        });
+
+        // get logged in/out state and display appropriate menu
+        const menuDisplay = ({ loggedOut }) => {
+            if (loggedOut) {
+                // logged out so allow loggedOut menu and the compare buttons to be visible
+                document.querySelectorAll('.nav-es-container .loggedOut').forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.style.display = null;
+                });
+            } else {
+                // logged in so allow logged in menu to be visible, and show name with appropriate layout
+                document.querySelectorAll('.nav-es-container .loggedIn').forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.style.display = null;
+                });
+                document.querySelector('.nav-es-container .icon-dropdown .dropdown-toggle').style.display = 'flex';
+                const selector = '.nav-es-container .icon-dropdown .dropdown-toggle .first-name';
+                document.querySelectorAll(selector).forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.style.display = 'block';
+                });
+            }
+        };
+
+        fetch('/api/account-first-name/', {
+            headers: { Accept: 'application/json' },
+            method: 'GET',
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                const name = data?.first_name || null;
+                const selector = '.nav-es-container .icon-dropdown .dropdown-toggle .first-name';
+                document.querySelectorAll(selector).forEach((element) => {
+                    // eslint-disable-next-line no-param-reassign
+                    element.innerHTML = name;
+                });
+                menuDisplay({ loggedOut: name === null });
+            })
+            .catch((e) => {
+                // eslint-disable-next-line no-console
+                console.log('error', e);
+                menuDisplay({ loggedOut: true });
+            });
+
+        // closes mobile menus upon navigating 'back' to the site
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event
+        window.addEventListener('pageshow', () => {
+            collapse_mobile_menus();
+        });
+
+        // set up options for sticky nav intersection observer
+        const intersectionOptions = {
+            rootMargin: '0px',
+            threshold: 0.0,
+        };
+
+        // set up callback for sticky nav intersection observer
+        const intersectionCallback = (entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.remove('scrolled');
+                } else {
+                    entry.target.classList.add('scrolled');
+                }
+            });
+        };
+
+        // initialize intersection observer to detect when nav scrolls out of viewport
+        // https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
+        const observer = new IntersectionObserver(intersectionCallback, intersectionOptions);
+        const targetEl = document.querySelector('#nav-main');
+        observer.observe(targetEl);
+
+        // CUSTOM GLOBAL-NAV SCRIPT ENDS
+    },
+};
+</script>
+
+<template>
+    <div
+        id="nav-main"
+        class="nav-es-container">
+        <div class="content-overlay" />
+        <nav class="nav-es-global navbar navbar-expand navbar-light py-0 font-size-base">
+            <!-- mobile hamburger menu button -->
+            <div class="d-flex d-lg-none col-2 px-0">
+                <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                <label
+                    for="data--main-menu"
+                    class="mb-0">
+                    <icon-hamburger class="menu-toggle align-self-center" />
+                    <span class="sr-only">
+                        {{ globalContent.mobileNavButtonAltText }}
+                    </span>
+                </label>
+            </div>
+            <!-- mobile logo -->
+            <es-nav-bar-link
+                class="d-flex d-lg-none col-8 align-self-center justify-content-center px-0"
+                :href="globalContent.home.link">
+                <div class="nav-es-logo-mobile align-items-center d-flex">
+                    <slot name="logo" />
+                </div>
+                <span class="sr-only">
+                    {{ globalContent.home.name }}
+                </span>
+            </es-nav-bar-link>
+            <!-- mobile account menu trigger -->
+            <div class="d-flex d-lg-none justify-content-end col-2 px-0">
+                <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                <label
+                    class="mb-0 text-decoration-none"
+                    for="data--account-menu">
+                    <icon-person class="align-self-center account-icon" />
+                    <span class="sr-only">
+                        {{ accountContent.mobileAccountButtonAltText }}
+                    </span>
+                </label>
+            </div>
+            <input
+                id="data--main-menu"
+                class="menu-checkbox main-menu-checkbox"
+                aria-labelledby="data--main-menu"
+                type="checkbox" />
+            <!-- first-level menu on mobile, the whole nav on desktop-->
+            <div
+                id="navbarNavDropdown"
+                class="menu top-level-menu align-items-start d-flex flex-grow-1">
+                <!-- mobile menu header -->
+                <div class="menu-header d-lg-none d-flex align-items-center justify-content-center h-100 mb-50">
+                    <div class="col-3" />
+                    <div class="col-6 align-self-center text-center py-100">
+                        <div class="nav-es-logo-mobile align-items-center d-flex">
+                            <slot name="logo" />
+                        </div>
+                    </div>
+                    <div class="d-flex col-3 justify-content-end">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            for="data--main-menu"
+                            class="mb-0">
+                            <icon-x class="menu-toggle align-self-center" />
+                            <span class="sr-only">
+                                {{ globalContent.mobileCloseButtonAltText }}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+                <div class="navbar-nav d-flex flex-column w-100">
+                    <!-- top-level items on mobile, full top bar on desktop -->
+                    <es-container
+                        class="align-items-start d-flex flex-lg-nowrap justify-content-between top-level-nav">
+                        <es-nav-bar-link
+                            class="navbar-brand d-none d-lg-block"
+                            :href="globalContent.home.link">
+                            <div class="nav-es-logo-desktop pt-100">
+                                <slot name="logo" />
+                            </div>
+                            <span class="sr-only">
+                                {{ globalContent.home.name }}
+                            </span>
+                        </es-nav-bar-link>
+                        <!-- top level menus -->
+                        <es-nav-bar-top-level-menu
+                            v-for="topLevelMenu in globalContent.topLevelMenus"
+                            :key="topLevelMenu.name"
+                            :home-name="globalContent.home.name"
+                            :home-link="globalContent.home.link"
+                            :close-button-text="globalContent.mobileCloseButtonAltText"
+                            :featured-article="topLevelMenu.featuredArticle"
+                            :icon="topLevelMenu.icon"
+                            :link="topLevelMenu.link"
+                            :main-menu-text="globalContent.mainMenuText"
+                            :name="topLevelMenu.name"
+                            :sub-heading="topLevelMenu.subHeading"
+                            :topics="topLevelMenu.topics">
+                            <template #logo>
+                                <slot name="logo" />
+                            </template>
+                        </es-nav-bar-top-level-menu>
+                        <!-- desktop account menu -->
+                        <es-nav-bar-account-menu
+                            :auth-items="accountContent.loggedIn.items"
+                            class="d-none d-lg-block pt-100"
+                            :logged-out="accountContent.loggedOut" />
+                    </es-container>
+                    <!-- mobile+desktop product menus -->
+                    <es-container class="d-flex flex-lg-nowrap justify-content-lg-end product-menu">
+                        <div class="row">
+                            <es-nav-bar-product-menu
+                                v-for="product in globalContent.products"
+                                :key="product.name"
+                                :home-name="globalContent.home.name"
+                                :home-link="globalContent.home.link"
+                                :close-button-text="globalContent.mobileCloseButtonAltText"
+                                :featured-article="product.featuredArticle"
+                                :items="product.items"
+                                :link="product.link"
+                                :main-menu-text="globalContent.mainMenuText"
+                                :new-tab="product.newTab"
+                                :name="product.name"
+                                :see-all-text="globalContent.seeAllText"
+                                :topics="product.topics">
+                                <template #logo>
+                                    <slot name="logo" />
+                                </template>
+                            </es-nav-bar-product-menu>
+                        </div>
+                    </es-container>
+                </div>
+            </div>
+            <!-- mobile account menu checkbox -->
+            <input
+                id="data--account-menu"
+                class="menu-checkbox account-menu-checkbox"
+                aria-labelledby="data--account-menu"
+                type="checkbox" />
+            <!-- mobile account menu -->
+            <div class="menu top-level-menu align-items-start d-flex d-lg-none flex-grow-1">
+                <!-- menu header -->
+                <div class="menu-header d-lg-none d-flex align-items-center justify-content-center h-100">
+                    <div class="col-3" />
+                    <div class="col-6 align-self-center text-center py-100">
+                        <div class="nav-es-logo-mobile align-items-center d-flex">
+                            <slot name="logo" />
+                        </div>
+                    </div>
+                    <div class="d-flex col-3 justify-content-end">
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            for="data--account-menu"
+                            class="mb-0">
+                            <icon-x class="menu-toggle align-self-center" />
+                            <span class="sr-only">
+                                {{ globalContent.mobileCloseButtonAltText }}
+                            </span>
+                        </label>
+                    </div>
+                </div>
+                <!-- logged in menu -->
+                <ul
+                    class="loggedIn navbar-nav w-100"
+                    style="display: none">
+                    <li
+                        v-for="item in accountContent.loggedIn.items"
+                        :key="item.name">
+                        <es-nav-bar-link
+                            class="dropdown-item nav-item nav-item-border-mobile nav-link align-items-center d-flex px-lg-100 py-lg-50 font-weight-bold"
+                            :href="item.link">
+                            {{ item.name }}
+                        </es-nav-bar-link>
+                    </li>
+                </ul>
+                <!-- logged out menu -->
+                <ul
+                    class="loggedOut navbar-nav w-100"
+                    style="display: none">
+                    <li>
+                        <es-button
+                            :href="accountContent.loggedOut.signIn.link"
+                            class="m-100 w-100 text-white font-weight-bold">
+                            {{ accountContent.loggedOut.signIn.name }}
+                        </es-button>
+                    </li>
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="accountContent.loggedOut.createAccount.link"
+                            :outline="true"
+                            class="mx-100 w-100 font-weight-bold">
+                            {{ accountContent.loggedOut.createAccount.name }}
+                        </es-button>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+        <!-- sticky nav bar -->
+        <nav class="nav-es-sticky bg-white d-none d-lg-block position-fixed py-25">
+            <es-container class="align-items-center d-flex justify-content-between">
+                <!-- EnergySage logo -->
+                <es-nav-bar-link
+                    class="navbar-brand d-none d-lg-block"
+                    :href="globalContent.home.link">
+                    <div class="nav-es-logo-desktop-sticky">
+                        <slot name="logo" />
+                    </div>
+                    <span class="sr-only">
+                        {{ globalContent.home.name }}
+                    </span>
+                </es-nav-bar-link>
+                <!-- desktop account menu -->
+                <es-nav-bar-account-menu
+                    :auth-items="accountContent.loggedIn.items"
+                    class="d-none d-lg-block"
+                    :logged-out="accountContent.loggedOut" />
+            </es-container>
+        </nav>
+    </div>
+</template>

package/components/es-pagination.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Paginator from 'primevue/paginator';
+
+const props = defineProps({
+    totalRows: {
+        type: Number,
+        required: true,
+    },
+    perPage: {
+        type: Number,
+        required: true,
+    },
+    listId: {
+        type: String,
+        required: true,
+    },
+    align: {
+        type: String,
+        default: 'left',
+    },
+});
+
+const model = defineModel<number>();
+const first = ref();
+
+watch(model, (newVal) => {
+    first.value = (newVal - 1) * props.perPage;
+});
+
+const updatePage = (newFirst: number) => {
+    model.value = newFirst / props.perPage + 1;
+};
+
+const passThrough = {
+    root: {
+        class: [
+            'pagination',
+            { 'justify-content-center': props.align === 'center', 'justify-content-end': props.align === 'right' },
+        ],
+    },
+    firstPageButton: { class: 'paginator-button' },
+    previousPageButton: { class: 'paginator-button' },
+    nextPageButton: { class: 'paginator-button' },
+    lastPageButton: { class: 'paginator-button' },
+    current: { class: 'px-100 current-page-report' },
+};
+</script>
+
+<template>
+    <paginator
+        v-model:first="first"
+        :rows="perPage"
+        :total-records="totalRows"
+        template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        current-page-report-template="{currentPage} of {totalPages}"
+        :aria-controls="listId"
+        :pt="passThrough"
+        @update:first="updatePage">
+        <template #prevpagelinkicon>
+            <icon-chevron-left />
+        </template>
+        <template #nextpagelinkicon>
+            <icon-chevron-right />
+        </template>
+    </paginator>
+</template>