@energysage/es-ds-components 0.0.1 → 3.0.0-alpha.10

package/components/es-modal.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import PrimeDialog from 'primevue/dialog';
+
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+    hideFooter: {
+        type: Boolean,
+        default: false,
+    },
+    size: {
+        type: String,
+        default: 'md',
+        validator: (val: string) => ['sm', 'md', 'lg', 'xl'].includes(val),
+    },
+    bodyClass: {
+        type: String,
+        required: false,
+        default: '',
+    },
+});
+
+const modalPt = {
+    root: {
+        class: 'modal-dialog modal-dialog-scrollable modal-content',
+    },
+    header: {
+        class: 'modal-header',
+    },
+    title: {
+        class: 'modal-title',
+    },
+    closeButton: {
+        class: 'close',
+    },
+    content: {
+        class: `modal-body ${props.bodyClass}`,
+    },
+    footer: {
+        class: 'modal-footer',
+    },
+    mask: {
+        class: 'es-modal-mask',
+    },
+    // https://vuejs.org/guide/built-ins/transition
+    transition: {
+        enterActiveClass: 'es-modal-enter-active',
+        enterFromClass: 'es-modal-enter-from',
+        enterToClass: 'es-modal-enter-to',
+        leaveActiveClass: 'es-modal-leave-active',
+        leaveFromClass: 'es-modal-leave-from',
+        leaveToClass: 'es-modal-leave-to',
+    },
+};
+
+const emit = defineEmits(['hidden']);
+
+const onChange = (visible: boolean) => {
+    if (!visible) {
+        emit('hidden');
+    }
+};
+
+const getSizeClass = computed(() => {
+    const modalSize = props.size === '' ? 'modal-md' : `modal-${props.size}`;
+    return modalSize;
+});
+</script>
+
+<template>
+    <prime-dialog
+        :id="id"
+        modal
+        :class="getSizeClass"
+        :pt="modalPt"
+        dismissable-mask
+        @update:visible="onChange">
+        <template #header>
+            <h5
+                :id="`${id}_header`"
+                class="modal-title h2">
+                <slot name="modal-title" />
+            </h5>
+        </template>
+
+        <template #closeicon>
+            <icon-x
+                class="text-gray-900"
+                height="2rem"
+                width="2rem" />
+        </template>
+
+        <slot />
+
+        <template
+            v-if="!hideFooter"
+            #footer>
+            <slot name="modal-footer" />
+        </template>
+    </prime-dialog>
+</template>

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

@@ -0,0 +1,70 @@
+<script lang="ts">
+export default {
+    name: 'EsNavBarAccountMenu',
+    props: {
+        authItems: {
+            type: Array,
+            default: () => [],
+        },
+        loggedOut: {
+            type: Object,
+            required: true,
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="icon-dropdown">
+        <div class="nav-item">
+            <div class="nav-link dropdown-toggle d-none d-lg-flex flex-nowrap py-100">
+                <icon-person
+                    class="align-self-center account-icon"
+                    width="20px"
+                    height="20px" />
+                <span class="sr-only">
+                    {{ loggedOut.menuButtonText }}
+                </span>
+            </div>
+            <div class="menu">
+                <ul
+                    class="loggedIn dropdown-menu account-menu rounded mt-0 py-100 list-unstyled"
+                    style="display: none">
+                    <!-- @vue-expect-error -->
+                    <li
+                        v-for="item in authItems"
+                        :key="item.name">
+                        <!-- @vue-expect-error -->
+                        <es-nav-bar-link
+                            class="dropdown-item nav-link"
+                            :href="item.link">
+                            <span class="mx-50">
+                                <!-- @vue-expect-error -->
+                                {{ item.name }}
+                            </span>
+                        </es-nav-bar-link>
+                    </li>
+                </ul>
+                <ul
+                    class="loggedOut dropdown-menu account-menu rounded mt-0"
+                    style="display: none">
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="loggedOut.signIn.link"
+                            class="m-100 w-100 text-white font-weight-bold">
+                            {{ loggedOut.signIn.name }}
+                        </es-button>
+                    </li>
+                    <li class="d-flex justify-content-center">
+                        <es-button
+                            :href="loggedOut.createAccount.link"
+                            :outline="true"
+                            class="mx-100 w-100 font-weight-bold">
+                            {{ loggedOut.createAccount.name }}
+                        </es-button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</template>

package/components/es-nav-bar-featured-article.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+export default {
+    name: 'EsNavBarFeaturedArticle',
+    props: {
+        eyebrow: {
+            type: String,
+            required: true,
+        },
+        link: {
+            type: String,
+            required: true,
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        image500: {
+            type: String,
+            required: true,
+        },
+        imageAlt: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        graphicId() {
+            return this.name.replace(/\s/g, '-').replace(/[^a-zA-Z]/g, '');
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="dropdown-cta-right">
+        <es-nav-bar-link
+            class="d-block cta-link text-gray-900 text-decoration-none"
+            :href="link"
+            :target="newTab ? '_blank' : null"
+            :title="name">
+            <nuxt-img
+                :id="graphicId"
+                class="featured-article-image mb-100 w-100 rounded"
+                :alt="imageAlt"
+                loading="lazy"
+                :src="image500" />
+            <div class="eyebrow mb-50 link-name">
+                {{ eyebrow }}
+            </div>
+
+            <p class="font-weight-bold link-subheading">
+                {{ name }}
+            </p>
+        </es-nav-bar-link>
+    </div>
+</template>

package/components/es-nav-bar-link.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// specific workaround for getting a reference to an auto-imported but not globally registered
+// component like NuxtLink, so that it can be used in a <component :is=""> context.
+// this resolves to an import statement, according to:
+// https://github.com/nuxt/nuxt/issues/13659#issuecomment-1573568006
+const NuxtLink = resolveComponent('NuxtLink');
+
+const props = defineProps({
+    href: {
+        type: String,
+        default: '',
+    },
+    tag: {
+        type: String,
+        default: 'nuxt-link',
+    },
+});
+</script>
+
+<template>
+    <component
+        :is="props.tag === 'nuxt-link' ? NuxtLink : props.tag"
+        :href="props.href"
+        v-bind="$attrs">
+        <slot />
+    </component>
+</template>

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

@@ -0,0 +1,219 @@
+<script lang="ts">
+export default {
+    name: 'EsNavBarProductMenu',
+    props: {
+        homeName: {
+            type: String,
+            required: true,
+        },
+        homeLink: {
+            type: String,
+            required: true,
+        },
+        closeButtonText: {
+            type: String,
+            required: true,
+        },
+        featuredArticle: {
+            type: Object,
+            default: () => ({}),
+        },
+        items: {
+            type: Array,
+            default: () => [],
+        },
+        link: {
+            type: String,
+            required: true,
+        },
+        mainMenuText: {
+            type: String,
+            required: true,
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        seeAllText: {
+            type: String,
+            required: true,
+        },
+        topics: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    computed: {
+        checkboxId() {
+            return `productMenu-${this.name}`;
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="dropdown nav-item nav-item-border-mobile">
+        <!-- desktop product link / hover menu trigger -->
+        <es-nav-bar-link
+            class="product-menu-header-link dropdown-toggle d-none d-lg-block px-lg-100 px-xl-200 py-lg-0 text-decoration-none"
+            :href="link"
+            :target="newTab ? '_blank' : null"
+            aria-haspopup="true"
+            aria-expanded="false">
+            <span class="product-menu-header-text d-block position-relative pb-lg-50">
+                {{ name }}
+            </span>
+        </es-nav-bar-link>
+        <!-- mobile flyout menu trigger -->
+        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+        <label
+            :for="checkboxId"
+            class="dropdown-label nav-link d-flex d-lg-none align-items-center justify-content-between w-100 h-100 px-100 font-weight-bold">
+            {{ name }}
+            <icon-chevron-right
+                class="expand-icon"
+                style="height: 24px" />
+        </label>
+        <input
+            :id="checkboxId"
+            :name="checkboxId"
+            type="checkbox"
+            class="menu-checkbox" />
+        <div class="menu">
+            <div class="menu-header d-flex d-lg-none">
+                <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>
+                <!-- closes the entire mobile nav menu -->
+                <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>
+            <!-- mobile+desktop flyout menu -->
+            <!-- TODO: does anything match this aria-labelledby id? -->
+            <ul
+                v-if="items && items.length"
+                class="product-menu-flyout dropdown-menu row border-0 mt-0 py-lg-100">
+                <!-- mobile subnav header -->
+                <li class="nav-link 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 nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
+                            <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
+                            class="font-weight-boldest text-gray-900"
+                            :href="link">
+                            {{ name }}
+                        </es-nav-bar-link>
+                        <span class="font-weight-boldest text-gray-900">{{ name }}</span>
+                        -->
+                        <span
+                            class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
+                            >{{ name }}</span
+                        >
+                    </div>
+                    <div class="col-2" />
+                </li>
+                <!-- subnav items -->
+                <!-- @vue-expect-error -->
+                <li
+                    v-for="item in items"
+                    :key="item.name">
+                    <!-- @vue-expect-error -->
+                    <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 product-menu-link"
+                        :class="{ 'font-weight-bold': item.emphasize }"
+                        :href="item.link"
+                        :target="item.newTab ? '_blank' : null">
+                        <!-- @vue-expect-error -->
+                        {{ item.name }}
+                    </es-nav-bar-link>
+                </li>
+            </ul>
+            <div
+                v-if="topics && topics.length"
+                class="product-menu-flyout product-menu-flyout--large dropdown-menu border-0 flex-wrap mt-0 p-lg-150">
+                <div class="nav-item d-lg-none mb-50">
+                    <!-- mobile subnav header -->
+                    <div class="col-2">
+                        <!-- closes this menu level -->
+                        <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                        <label
+                            :for="checkboxId"
+                            class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
+                            <icon-arrow-left
+                                class="expand-icon"
+                                style="height: 24px" />
+                        </label>
+                    </div>
+                    <div class="col-8 align-self-center text-center py-100">
+                        <p
+                            class="align-items-center d-flex d-lg-none font-weight-bold justify-content-between mb-0 text-decoration-none w-100">
+                            <span
+                                class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
+                                >{{ name }}</span
+                            >
+                        </p>
+                    </div>
+                    <div class="col-2" />
+                </div>
+                <es-row
+                    tag="ul"
+                    class="d-block d-lg-flex list-unstyled">
+                    <!-- @vue-expect-error -->
+                    <es-nav-bar-topic-menu
+                        v-for="topic in topics"
+                        :key="topic.name"
+                        class="col-lg-4 d-block"
+                        :home-name="homeName"
+                        :home-link="homeLink"
+                        :close-button-text="closeButtonText"
+                        :items="topic.subtopics"
+                        :link="topic.link"
+                        :new-tab="topic.newTab"
+                        :name="topic.name"
+                        :show-items-on-mobile="topic.showItemsOnMobile"
+                        :sub-heading="topic.subHeading">
+                        <template #logo>
+                            <slot name="logo" />
+                        </template>
+                    </es-nav-bar-topic-menu>
+                    <li class="nav-item col-lg-4 d-block h-auto my-100 my-lg-0">
+                        <es-nav-bar-featured-article
+                            :eyebrow="featuredArticle.eyebrow"
+                            :link="featuredArticle.link"
+                            :name="featuredArticle.name"
+                            :image500="featuredArticle.image500"
+                            :image-alt="featuredArticle.imageAlt" />
+                    </li>
+                </es-row>
+            </div>
+        </div>
+    </div>
+</template>

package/components/es-nav-bar-top-level-menu.vue

@@ -0,0 +1,194 @@
+<script lang="ts">
+export default {
+    name: 'EsNavBarTopLevelMenu',
+    props: {
+        homeName: {
+            type: String,
+            required: true,
+        },
+        homeLink: {
+            type: String,
+            required: true,
+        },
+        closeButtonText: {
+            type: String,
+            required: true,
+        },
+        featuredArticle: {
+            type: Object,
+            default: () => ({}),
+        },
+        icon: {
+            type: String,
+            default: '',
+        },
+        topics: {
+            type: Array,
+            default: () => [],
+        },
+        link: {
+            type: String,
+            default: '',
+        },
+        mainMenuText: {
+            type: String,
+            required: true,
+        },
+        newTab: {
+            type: Boolean,
+            default: false,
+        },
+        name: {
+            type: String,
+            required: true,
+        },
+        subHeading: {
+            type: String,
+            default: '',
+        },
+    },
+    computed: {
+        checkboxId() {
+            return `menu-${this.name}`;
+        },
+    },
+};
+</script>
+
+<template>
+    <div
+        class="nav-item top-header mx-0"
+        :class="{ 'has-dropdown': !link }">
+        <div class="top-header-inner w-100">
+            <!-- desktop link and fly-out menu trigger -->
+            <es-nav-bar-link
+                class="nav-link d-none d-lg-block py-100 font-weight-bolder"
+                :class="{ 'dropdown-toggle': !link }"
+                :href="link || '#'"
+                :data-toggle="link ? undefined : 'dropdown'"
+                :aria-haspopup="link ? undefined : true"
+                :aria-expanded="link ? undefined : false"
+                :target="link && newTab ? '_blank' : undefined">
+                <div class="d-lg-flex align-items-center">
+                    {{ name }}
+                </div>
+            </es-nav-bar-link>
+            <!-- mobile link and fly-out menu trigger -->
+            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+            <component
+                :is="link ? 'es-nav-bar-link' : 'label'"
+                class="nav-link d-flex d-lg-none align-items-center w-100 h-100 px-0 py-lg-100 px-100 font-weight-bold justify-content-between"
+                :class="{ 'dropdown-label': !link }"
+                :for="link ? undefined : checkboxId"
+                :href="link || undefined"
+                :target="newTab ? '_blank' : undefined">
+                <div class="align-items-center d-flex">
+                    {{ name }}
+                </div>
+                <icon-arrow-right
+                    v-if="!link"
+                    class="expand-icon"
+                    style="height: 24px" />
+            </component>
+            <input
+                v-if="!link"
+                :id="checkboxId"
+                :name="checkboxId"
+                type="checkbox"
+                class="menu-checkbox" />
+            <!-- fly-out menu -->
+            <div
+                v-if="!link"
+                class="menu">
+                <!-- mobile menu header -->
+                <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>
+                <div class="dropdown-menu dropdown-menu-full-page">
+                    <es-container class="dropdown-menu-primary justify-content-lg-center py-lg-100">
+                        <es-row class="flex-grow-1 justify-content-lg-center">
+                            <div
+                                class="mb-3 mb-lg-0"
+                                :class="{
+                                    'col-lg-9': topics.length >= 3,
+                                    'col-lg-9 col-xl-6 col-xxl-5': topics.length == 2,
+                                    'col-lg-4': topics.length == 1,
+                                }">
+                                <ul class="dropdown-list row w-auto">
+                                    <!-- name of top-level menu (won't ever be a link) -->
+                                    <li class="nav-item col-lg-12 d-lg-none mb-50 topic-menu-back">
+                                        <div class="col-2">
+                                            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
+                                            <label
+                                                :for="checkboxId"
+                                                class="menu-toggle nav-link align-items-center d-flex font-size-sm h-100 mb-0 px-0 text-uppercase w-100">
+                                                <icon-arrow-left
+                                                    class="expand-icon"
+                                                    style="height: 24px" />
+                                            </label>
+                                        </div>
+                                        <div class="col-8 align-self-center text-center py-100">
+                                            <span
+                                                class="nav-link justify-content-center align-items-center d-flex font-weight-boldest w-100 h-100"
+                                                >{{ name }}</span
+                                            >
+                                        </div>
+                                        <div class="col-2" />
+                                    </li>
+                                    <!-- @vue-expect-error -->
+                                    <es-nav-bar-topic-menu
+                                        v-for="topic in topics"
+                                        :key="topic.name"
+                                        :class="{
+                                            'col-xl-4': topics.length >= 3,
+                                            'col-lg-6': topics.length >= 2,
+                                            'col-lg-12': topics.length == 1,
+                                        }"
+                                        :home-name="homeName"
+                                        :home-link="homeLink"
+                                        :close-button-text="closeButtonText"
+                                        :items="topic.subtopics"
+                                        :link="topic.link"
+                                        :new-tab="topic.newTab"
+                                        :name="topic.name">
+                                        <template #logo>
+                                            <slot name="logo" />
+                                        </template>
+                                    </es-nav-bar-topic-menu>
+                                </ul>
+                            </div>
+                            <!-- article link with image within menu -->
+                            <es-nav-bar-featured-article
+                                class="col-lg-3"
+                                :eyebrow="featuredArticle.linkName"
+                                :link="featuredArticle.linkUrl"
+                                :new-tab="featuredArticle.newTab"
+                                :name="featuredArticle.lede"
+                                :image500="featuredArticle.image500"
+                                :image-alt="featuredArticle.imageAlt" />
+                        </es-row>
+                    </es-container>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>