@energysage/es-ds-components 5.1.0 → 5.3.0

package/app/components/es-mobile-nav.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core';
+import { type NavigationMenuContent, NavigationMenuItem, NavigationMenuList, NavigationMenuRoot } from 'reka-ui';
+import type { ShallowRef } from 'vue';
+
+interface IProps {
+    from?: 'left' | 'right';
+    width?: number;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    from: 'left',
+    width: 400,
+});
+
+const ANIMATION_DURATION = 200;
+const ANIMATION_DURATION_MS = `${ANIMATION_DURATION}ms`;
+
+const activeMenuId = ref('');
+const navTriggerElement = ref<HTMLElement | null>(null);
+const nameStack: Ref<string[]> = ref([]);
+const scrollableContentAreaTemplateRef: Ref<Readonly<
+    ShallowRef<InstanceType<typeof NavigationMenuContent> | null>
+> | null> = ref(null);
+const subNavCloseHandlers: Ref<Function[]> = ref([]);
+
+const displayedName = computed(() => nameStack.value.at(-1) ?? '');
+const isScrollLocked = useScrollLock(import.meta.client ? document.body : null);
+const widthPx = computed(() => `${props.width}px`);
+
+// closes the top-level menu
+const closeMenu = () => {
+    // focus the trigger before closing so assistive technologies (e.g. VoiceOver)
+    // don't lose focus when the menu content is removed from the DOM.
+    navTriggerElement.value?.focus();
+
+    // close the menu
+    activeMenuId.value = '';
+};
+
+// provides a read-only variable indicating the current depth
+const currentDepth = computed(() => nameStack.value.length);
+
+// closes the currently-visible menu
+const goBack = () => {
+    const closeCurrentMenu = subNavCloseHandlers.value.pop();
+    if (closeCurrentMenu) {
+        closeCurrentMenu();
+    }
+};
+
+// animates up/back one level
+const decreaseDepth = () => {
+    if (currentDepth.value > 0) {
+        nameStack.value = nameStack.value.slice(0, nameStack.value.length - 1);
+
+        // if we can, scroll to the top of the content area so the parent menu starts at the top
+        if (scrollableContentAreaTemplateRef.value?.value?.$el?.scrollTop) {
+            scrollableContentAreaTemplateRef.value.value.$el.scrollTop = 0;
+        }
+    }
+};
+
+// animates down/forward one level
+const increaseDepth = (name: string) => {
+    nameStack.value.push(name);
+
+    // if we can, scroll to the top of the content area so the submenu starts at the top
+    if (scrollableContentAreaTemplateRef.value?.value?.$el?.scrollTop) {
+        scrollableContentAreaTemplateRef.value.value.$el.scrollTop = 0;
+    }
+};
+
+// allows the nav trigger to register itself so closeMenu can return focus to it
+const registerNavTrigger = (el: HTMLElement) => {
+    navTriggerElement.value = el;
+};
+
+// allows us to scroll the content area up to the top when opening a submenu
+const registerScrollableContentArea = (
+    areaTemplateRef: Readonly<ShallowRef<InstanceType<typeof NavigationMenuContent> | null>>,
+) => {
+    scrollableContentAreaTemplateRef.value = areaTemplateRef;
+};
+
+// provides the back button with a function to call in order to close the active submenu
+// (this is called by submenus when they are opened)
+const registerSubNavCloseHandler = (callback: Function) => subNavCloseHandlers.value.push(callback);
+
+// provides a way to wait for animation to complete prior to doing something
+const waitForAnimationDuration = async () => {
+    return new Promise((resolve) => {
+        setTimeout(() => resolve(true), ANIMATION_DURATION);
+    });
+};
+
+provide('animationDuration', ANIMATION_DURATION);
+provide('closeMenu', closeMenu);
+provide('currentDepth', currentDepth);
+provide('decreaseDepth', decreaseDepth);
+provide('displayedName', displayedName);
+provide('from', toRef(props, 'from'));
+provide('goBack', goBack);
+provide('increaseDepth', increaseDepth);
+provide('registerNavTrigger', registerNavTrigger);
+provide('registerScrollableContentArea', registerScrollableContentArea);
+provide('registerSubNavCloseHandler', registerSubNavCloseHandler);
+provide('waitForAnimationDuration', waitForAnimationDuration);
+provide('width', toRef(props, 'width'));
+provide('widthPx', widthPx);
+
+watch(activeMenuId, async (newVal: string, oldVal: string) => {
+    isScrollLocked.value = !!newVal;
+
+    // if the menu is closing
+    if (!newVal && oldVal) {
+        // wait until the mobile nav closing animation is complete
+        await waitForAnimationDuration();
+
+        // reset the state of all submenus by closing all open ones (without animation)
+        subNavCloseHandlers.value.forEach((callback: Function) => {
+            callback(false);
+        });
+
+        // clear out all subnav close handlers since all of them are closed
+        subNavCloseHandlers.value = [];
+
+        // clear nameStack to set the animation "window" to first position
+        nameStack.value = [];
+    }
+});
+</script>
+
+<template>
+    <navigation-menu-root
+        v-model="activeMenuId"
+        v-bind="$attrs"
+        class="es-mobile-nav d-flex"
+        disable-hover-trigger
+        disable-pointer-leave-close>
+        <!-- overlay -->
+        <teleport to="body">
+            <div
+                class="es-mobile-nav-overlay position-fixed"
+                :class="{
+                    active: !!activeMenuId,
+                }"
+                @click="activeMenuId = ''" />
+        </teleport>
+
+        <!--
+            since the first level is a single item - the trigger to open the mobile nav -
+            prevent it from being a <ul> and <li>
+        -->
+        <navigation-menu-list
+            as="div"
+            class="es-mobile-nav-list d-flex">
+            <navigation-menu-item
+                as="div"
+                class="d-flex">
+                <slot />
+            </navigation-menu-item>
+        </navigation-menu-list>
+    </navigation-menu-root>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables';
+
+$animation-duration: v-bind(ANIMATION_DURATION_MS);
+
+.es-mobile-nav {
+    --mobile-nav-width: v-bind(widthPx);
+
+    &-overlay {
+        opacity: 0;
+        pointer-events: none;
+
+        &.active {
+            opacity: 0.3;
+            pointer-events: all;
+        }
+
+        @include breakpoints.media-breakpoint-up(sm) {
+            background-color: variables.$gray-900;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            z-index: 1010;
+
+            @media not (prefers-reduced-motion) {
+                transition: opacity $animation-duration ease-in-out;
+            }
+        }
+    }
+
+    :deep(> div) {
+        /* ensure the button is full-height with the rest of the nav bar items */
+        display: flex;
+    }
+
+    :deep(.es-mobile-nav-list) {
+        display: flex;
+    }
+
+    :deep(.es-mobile-nav-trigger) {
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        color: variables.$dark-blue;
+        min-height: 40px;
+        margin: 0;
+        padding: 0 variables.$spacer;
+        position: relative;
+    }
+}
+</style>

package/app/components/es-mobile-sub-nav.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import {
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuList,
+    NavigationMenuSub,
+    NavigationMenuTrigger,
+} from 'reka-ui';
+
+interface IProps {
+    name: string;
+}
+const props = defineProps<IProps>();
+
+const subNavParentElement = useTemplateRef('subNavParentElement');
+const subNavTrigger = useTemplateRef('subNavTrigger');
+
+const activeMenuId = ref('');
+
+const backButtonSimulatedFocus = inject('backButtonSimulatedFocus', ref(false));
+const closeButtonSimulatedFocus = inject('closeButtonSimulatedFocus', ref(false));
+const closeMenu: (...args: any[]) => void = inject('closeMenu', () => {});
+const decreaseDepth = inject('decreaseDepth', () => {});
+const goBack = inject('goBack', () => {});
+const increaseDepth: (...args: any[]) => void = inject('increaseDepth', () => {});
+const isElementWithinMenu: (...args: any[]) => boolean = inject('isElementWithinMenu', () => true);
+const registerSubNavCloseHandler: Function | undefined = inject('registerSubNavCloseHandler');
+const waitForAnimationDuration = inject('waitForAnimationDuration', () => Promise.resolve(true));
+const widthPx = inject(
+    'widthPx',
+    computed(() => '400px'),
+);
+
+const escapeKeyDown = (e: any) => {
+    // prevent the Esc key from immediately closing all submenus prior to the mobile nav animating closed
+    // (i.e. the visible submenu disappears, then the mobile nav animates closed, which is jarring)
+    e.preventDefault();
+
+    // close the mobile nav in a controlled way
+    closeMenu();
+};
+
+const handleTriggerClick = () => {
+    // if the menu was open and is being closed by clicking the trigger
+    // (which should only be possible via keyboard), close the menu
+    if (activeMenuId.value) {
+        decreaseDepth();
+    }
+};
+
+let focusOutsideHandled = false;
+
+const focusOutside = (e: any) => {
+    // some browsers can cycle focus through body when shifting focus, causing
+    // this handler to be fired twice. to prevent goBack() from being called
+    // more times than we want, we have this guard to prevent focusOutside
+    // from being called more than once within the same tick
+    if (focusOutsideHandled) return;
+    focusOutsideHandled = true;
+    nextTick(() => {
+        focusOutsideHandled = false;
+    });
+
+    // we only need to do anything with this submenu if it's actually open
+    if (activeMenuId.value) {
+        const classesOnTarget = [...e.target.classList];
+
+        if (classesOnTarget.includes('es-mobile-sub-nav-item-trigger')) {
+            // if the user has moved focus outside of the this submenu and onto
+            // another submenu trigger, close this submenu
+            const triggerSubNav = e.target.closest('.es-mobile-sub-nav');
+            if (triggerSubNav !== subNavParentElement?.value?.$el) {
+                goBack();
+            }
+        } else if (!isElementWithinMenu(e.target)) {
+            // if focus is on something outside of the overall menu, close it
+            closeMenu();
+        }
+    }
+};
+
+const handleSrBackClick = () => {
+    // explicitly focus the trigger before closing the submenu. without this,
+    // assistive technologies (e.g. VoiceOver) lose focus when the submenu content
+    // (which contains the sr-only button) is removed from the DOM.
+    (subNavTrigger.value as any)?.$el?.focus();
+    goBack();
+};
+
+const subNavCloseMenu = async (waitForAnimation: boolean = true) => {
+    // start animating up to the parent menu
+    decreaseDepth();
+
+    // wait for animation to complete
+    if (waitForAnimation) {
+        await waitForAnimationDuration();
+    }
+
+    // close the menu
+    activeMenuId.value = '';
+};
+
+watch(activeMenuId, (newVal: string, oldVal: string) => {
+    // if the menu is opening
+    if (newVal && !oldVal) {
+        increaseDepth(props.name);
+
+        if (registerSubNavCloseHandler) {
+            registerSubNavCloseHandler(subNavCloseMenu);
+        }
+    }
+});
+</script>
+
+<template>
+    <navigation-menu-item>
+        <navigation-menu-sub
+            ref="subNavParentElement"
+            v-bind="$attrs"
+            v-model="activeMenuId"
+            class="es-mobile-sub-nav"
+            orientation="vertical">
+            <navigation-menu-trigger
+                ref="subNavTrigger"
+                class="es-mobile-sub-nav-item-trigger d-block font-size-75 font-weight-bolder m-0 p-0 text-left w-100"
+                @click="handleTriggerClick">
+                <span class="d-flex justify-content-between p-100 rounded-sm w-100">
+                    {{ name }}
+                    <icon-chevron-right
+                        height="20px"
+                        width="20px" />
+                </span>
+            </navigation-menu-trigger>
+            <navigation-menu-content
+                v-bind="$attrs"
+                class="es-mobile-sub-nav-item-content bg-white"
+                @escape-key-down="escapeKeyDown"
+                @focus-outside.prevent.stop="focusOutside"
+                @interact-outside.prevent.stop
+                @pointer-down-outside.prevent.stop>
+                <navigation-menu-list class="es-mobile-sub-nav-list list-unstyled m-0 p-0">
+                    <slot />
+                </navigation-menu-list>
+
+                <!--
+                    back button for keyboard / screen readers only,
+                    so you can go back when in this subnav's focus trap.
+                    when given focus, the visible back button in the
+                    nav content header will get a visible focus outline.
+                -->
+                <es-button
+                    class="sr-only"
+                    inline
+                    variant="link"
+                    @blur="backButtonSimulatedFocus = false"
+                    @click="handleSrBackClick"
+                    @focus="backButtonSimulatedFocus = true">
+                    Back
+                </es-button>
+
+                <!--
+                    close button for keyboard / screen readers only,
+                    so you can go back when in this subnav's focus trap.
+                    when given focus, the visible close button in the
+                    nav content header will get a visible focus outline.
+                -->
+                <es-button
+                    class="sr-only"
+                    inline
+                    variant="link"
+                    @blur="closeButtonSimulatedFocus = false"
+                    @click="closeMenu"
+                    @focus="closeButtonSimulatedFocus = true">
+                    Close
+                </es-button>
+            </navigation-menu-content>
+        </navigation-menu-sub>
+    </navigation-menu-item>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables';
+
+$transition-duration: 100ms;
+
+.es-mobile-sub-nav {
+    :deep(.es-mobile-sub-nav-list) {
+        li {
+            margin: 0;
+        }
+    }
+
+    :deep(.es-mobile-sub-nav-item-trigger) {
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        border-bottom: 1px solid variables.$gray-100;
+        /* specify color here so it can be overridden in active state */
+        color: variables.$dark-blue;
+
+        @media not (prefers-reduced-motion) {
+            transition:
+                border-color $transition-duration ease-in-out,
+                color $transition-duration ease-in-out;
+
+            & > span {
+                transition: background-color $transition-duration ease-in-out;
+
+                & > svg {
+                    transition: color $transition-duration ease-in-out;
+                }
+            }
+
+            &[data-state='open'] {
+                border-bottom-color: transparent;
+                color: variables.$white;
+
+                & > span {
+                    background-color: variables.$dark-blue;
+
+                    & > svg {
+                        color: variables.$white;
+                    }
+                }
+            }
+        }
+    }
+
+    :deep(.es-mobile-sub-nav-item-content[data-state='open']) {
+        bottom: 0;
+        left: 100vw;
+        position: absolute;
+        top: 0;
+        width: 100%;
+
+        @include breakpoints.media-breakpoint-up(sm) {
+            left: v-bind(widthPx);
+        }
+    }
+}
+</style>

package/app/components/es-nav-cta-card.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+interface Props {
+    heading: string;
+    href: string;
+    subtitle?: string;
+    target?: string;
+}
+withDefaults(defineProps<Props>(), {
+    subtitle: '',
+    target: '_self',
+});
+</script>
+
+<template>
+    <es-card
+        class="es-nav-cta-card d-flex p-100"
+        :class="{
+            'align-items-center': !subtitle,
+        }"
+        :href="href"
+        :target="target"
+        variant="interactive">
+        <div
+            v-if="$slots.icon"
+            class="mr-100">
+            <div class="es-nav-cta-card-icon bg-blue-50 p-50 position-relative rounded-xs text-blue-600">
+                <slot name="icon" />
+            </div>
+        </div>
+        <div>
+            <p class="align-items-center d-flex font-weight-bold mb-0 text-blue-600">
+                {{ heading }}
+                <icon-arrow-right
+                    aria-hidden="true"
+                    class="es-nav-cta-card-arrow flex-shrink-0 ml-25" />
+            </p>
+            <p
+                v-if="subtitle"
+                class="font-size-75 mb-0">
+                {{ subtitle }}
+            </p>
+        </div>
+    </es-card>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+.es-nav-cta-card {
+    border-width: 1px;
+
+    /* only apply a hover state if the device supports mouse hover */
+    @media (hover) {
+        &:hover {
+            border-color: variables.$blue-600;
+
+            .es-nav-cta-card-icon {
+                color: variables.$white !important;
+
+                &::after {
+                    opacity: 1;
+                }
+            }
+
+            .es-nav-cta-card-arrow {
+                margin-left: 0.75rem !important;
+            }
+        }
+    }
+
+    &-icon {
+        /* you cannot animate radial gradient backgrounds, so apply it to a pseudo element and fade it in on hover */
+        &::after {
+            background: radial-gradient(
+                156.04% 117.56% at 0% 0%,
+                variables.$blue-500 0%,
+                #5a4386 53.85%,
+                #1c1767 100%
+            );
+            border-radius: 0.25rem;
+            bottom: 0;
+            content: '';
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            z-index: 2;
+
+            @media not (prefers-reduced-motion) {
+                transition: variables.$transition-base;
+            }
+        }
+
+        /* ensure the icon appears above the gradient pseudo element */
+        :deep(svg) {
+            position: relative;
+            z-index: 3;
+        }
+
+        @media not (prefers-reduced-motion) {
+            transition: variables.$transition-base;
+        }
+    }
+
+    &-arrow {
+        @media not (prefers-reduced-motion) {
+            transition: variables.$transition-base;
+        }
+    }
+}
+</style>

package/app/components/es-sticky-bar.vue

@@ -115,7 +115,8 @@ onUnmounted(() => {
     <div
         ref="bar"
         class="es-sticky-bar bg-white"
-        :class="[`es-sticky-bar--${barState}`, { 'es-sticky-bar--no-transition': suppressTransition }]">
+        :class="[`es-sticky-bar--${barState}`, { 'es-sticky-bar--no-transition': suppressTransition }]"
+        v-bind="$attrs">
         <slot />
     </div>
     <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned -->
@@ -161,6 +162,7 @@ $shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
 
     // translated off screen above the viewport
     &--fixed-hidden {
+        box-shadow: none;
         transform: translateY(-100%);
     }
 

package/app/components/icon/arrow-clockwise.vue

@@ -1,51 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconArrowClockwise',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        orientation: {
-            type: String,
-            default: 'clockwise',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowClockwise } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :class="{
-            'counter-clockwise': orientation === 'counter-clockwise',
-        }"
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <!-- eslint-disable-next-line max-len -->
-        <path
-            d="M3.246 7.123c.997-1.81 2.591-3.418 4.485-4.222 1.894-.905 4.087-1.106 6.08-.704 2.193.403 3.788 1.408 5.183 3.016.2.201.4.503.598.704l.4-2.513c.099-.603.597-.905 1.195-.905.499.1.897.704.798 1.206l-.897 5.127c0 .301-.2.502-.4.603-.198.1-.398.201-.597.201h-.2l-4.983-.905a1.042 1.042 0 0 1-.798-1.206c.1-.503.598-.905 1.197-.804l2.79.603c-.1-.302-.299-.503-.598-.804-1.096-1.307-2.492-2.111-4.086-2.413-1.595-.402-3.39-.2-4.884.503A7.896 7.896 0 0 0 4.94 8.028c-.797 1.507-1.096 3.216-.897 4.925.2 1.709.897 3.317 2.093 4.524 1.097 1.206 2.692 2.11 4.286 2.311 1.595.302 3.39 0 4.785-.703a8.444 8.444 0 0 0 3.488-3.518c.2-.503.798-.704 1.296-.503.498.201.698.804.498 1.307-.797 2.11-2.292 3.619-4.186 4.624-1.395.703-2.89 1.005-4.485 1.005-.598 0-1.096 0-1.695-.1-2.093-.403-3.987-1.408-5.382-2.916a10.256 10.256 0 0 1-2.691-5.629c-.2-2.211.2-4.322 1.196-6.232Z" />
-    </svg>
+    <ph-arrow-clockwise :size="width" />
 </template>
-
-<style lang="scss" scoped>
-.counter-clockwise {
-    transform: scale(-1, 1);
-}
-</style>