@telefonica/mistica 17.3.0 → 17.4.0

package/src/mobile-navigation-menu.tsx

@@ -0,0 +1,168 @@
+'use client';
+import * as React from 'react';
+import {CSSTransition} from 'react-transition-group';
+import FocusTrap from './focus-trap';
+import {Portal} from './portal';
+import {useTheme} from './hooks';
+import {isRunningAcceptanceTest} from './utils/platform';
+import * as tokens from './text-tokens';
+import * as styles from './navigation-shared.css';
+
+/**
+ * The panel that a burger menu opens on mobile. It holds two panes that slide horizontally: the first
+ * level, and the second level of the item the user pressed. `MainNavigationBar` and `SidenavBar` share it,
+ * so both keep the same animation, the same focus behavior and the same overlay.
+ *
+ * The panel is a shell: each component passes the content of the two panes, because their data models
+ * differ.
+ */
+
+type MobileNavigationMenuStatus = 'opening' | 'opened' | 'closing' | 'closed';
+type MobileNavigationMenuAction = 'open' | 'finishOpen' | 'close' | 'finishClose';
+
+const mobileNavigationMenuTransitions: Record<
+    MobileNavigationMenuStatus,
+    Partial<Record<MobileNavigationMenuAction, MobileNavigationMenuStatus>>
+> = {
+    opening: {
+        close: 'closing',
+        finishOpen: 'opened',
+    },
+    opened: {
+        close: 'closing',
+    },
+    closing: {
+        open: 'opening',
+        finishClose: 'closed',
+    },
+    closed: {
+        open: 'opening',
+    },
+};
+
+const secondLevelReducer = (state: MobileNavigationMenuStatus, action: MobileNavigationMenuAction) => {
+    return mobileNavigationMenuTransitions[state][action] || state;
+};
+
+type MobileNavigationMenuProps = {
+    /** True while the menu shows. The panel animates on every change of this prop. */
+    open: boolean;
+    /** Id of the panel, which the burger button points to with `aria-controls`. */
+    id: string;
+    /** Distance from the top of the viewport, which leaves the top bar visible. */
+    topOffset: number;
+    /** Content of the first pane. */
+    firstLevel: React.ReactNode;
+    /** Content of the second pane. */
+    secondLevel?: React.ReactNode;
+    /** True if the second pane must show. The panel slides both panes on every change of this prop. */
+    showSecondLevel?: boolean;
+    /** Called once the panel finished its exit, so the consumer resets its own state. */
+    onExited?: () => void;
+    /** Accessible name of the navigation landmark. */
+    'aria-label'?: string;
+    /** Group of the focus trap, which the consumer shares with its own top bar. */
+    focusTrapGroup: string;
+    disableFocusTrap: boolean;
+    setDisableFocusTrap: (value: boolean) => void;
+};
+
+const MobileNavigationMenu = ({
+    open,
+    id,
+    topOffset,
+    firstLevel,
+    secondLevel,
+    showSecondLevel = false,
+    onExited,
+    'aria-label': ariaLabel,
+    focusTrapGroup,
+    disableFocusTrap,
+    setDisableFocusTrap,
+}: MobileNavigationMenuProps): JSX.Element => {
+    const {isDarkMode, texts, t} = useTheme();
+    const [secondLevelStatus, dispatch] = React.useReducer(secondLevelReducer, 'closed');
+    const menuRef = React.useRef<HTMLDivElement>(null);
+    const secondLevelRef = React.useRef<HTMLDivElement>(null);
+
+    const shadowAlpha = isDarkMode ? 1 : 0.2;
+    const menuAnimationDuration = isRunningAcceptanceTest() ? 0 : styles.BURGER_MENU_ANIMATION_DURATION_MS;
+
+    React.useEffect(() => {
+        let id: NodeJS.Timeout;
+
+        if (showSecondLevel) {
+            dispatch('open');
+            id = setTimeout(() => dispatch('finishOpen'), menuAnimationDuration);
+        } else {
+            dispatch('close');
+            id = setTimeout(() => dispatch('finishClose'), menuAnimationDuration);
+        }
+
+        return () => clearTimeout(id);
+    }, [showSecondLevel, menuAnimationDuration]);
+
+    React.useEffect(() => {
+        // Make screen reader focus on back button when opening any section's menu
+        if (secondLevelStatus === 'opening') {
+            const backButtonElement = secondLevelRef.current?.querySelector<HTMLButtonElement>(
+                `button[aria-label="${texts.backNavigationBar || t(tokens.backNavigationBar)}"]`
+            );
+
+            backButtonElement?.focus();
+        }
+    }, [secondLevelStatus, t, texts]);
+
+    return (
+        <Portal>
+            <FocusTrap disabled={disableFocusTrap} group={focusTrapGroup}>
+                <CSSTransition
+                    onEntered={() => setDisableFocusTrap(false)}
+                    onExiting={() => setDisableFocusTrap(true)}
+                    onExited={onExited}
+                    classNames={styles.burgerMenuTransition}
+                    in={open}
+                    nodeRef={menuRef}
+                    timeout={menuAnimationDuration}
+                    mountOnEnter
+                    unmountOnExit
+                >
+                    <nav
+                        className={styles.burgerMenu}
+                        style={{
+                            boxShadow: `6px 0 4px -4px rgba(0, 0, 0, ${shadowAlpha})`,
+                            top: topOffset,
+                        }}
+                        id={id}
+                        ref={menuRef}
+                        aria-label={ariaLabel}
+                    >
+                        <div className={styles.burgerMenuContainer}>
+                            <div
+                                className={styles.burgerMenuContentContainer}
+                                style={{
+                                    transform: `translate(${showSecondLevel ? '-100vw' : '0'})`,
+                                }}
+                            >
+                                {secondLevelStatus !== 'opened' && firstLevel}
+                            </div>
+
+                            <div
+                                className={styles.burgerMenuContentContainer}
+                                ref={secondLevelRef}
+                                style={{
+                                    transform: `translate(${showSecondLevel ? '0' : '100vw'})`,
+                                }}
+                            >
+                                {secondLevelStatus !== 'closed' && secondLevel}
+                            </div>
+                        </div>
+                    </nav>
+                </CSSTransition>
+            </FocusTrap>
+        </Portal>
+    );
+};
+
+export {MobileNavigationMenu};
+export type {MobileNavigationMenuProps};

package/src/navigation-bar.css.ts

@@ -1,121 +1,15 @@
 import {style, styleVariants} from '@vanilla-extract/css';
 import {sprinkles} from './sprinkles.css';
-import {NAVBAR_HEIGHT_DESKTOP, NAVBAR_HEIGHT_DESKTOP_LARGE, NAVBAR_HEIGHT_MOBILE} from './theme';
+import {NAVBAR_HEIGHT_DESKTOP, NAVBAR_HEIGHT_DESKTOP_LARGE} from './theme';
 import * as mq from './media-queries.css';
 import {vars} from './skins/skin-contract.css';
-
-const NAVBAR_ZINDEX = 25;
+import {NAVBAR_ZINDEX, spacerMobile} from './navigation-shared.css';
 
 export const DESKTOP_SMALL_MENU_WIDTH = 184;
 
-export const BURGER_MENU_ANIMATION_DURATION_MS = 300;
 export const DESKTOP_MENU_ANIMATION_DURATION_MS = 400;
 const DESKTOP_MENU_CONTENT_ANIMATION_DURATION_MS = 800;
 
-export const burgerIconContainer = style([
-    sprinkles({
-        position: 'relative',
-        width: 24,
-        height: 24,
-    }),
-    {
-        verticalAlign: 'middle',
-        borderRadius: 50,
-    },
-]);
-
-const iconBase = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        top: 0,
-        left: 0,
-        transition: 'transform 300ms, opacity 100ms',
-    },
-]);
-
-export const iconCloseOpen = style([
-    iconBase,
-    {
-        opacity: 1,
-        transform: 'rotate(0) scale(1)',
-    },
-]);
-
-export const iconCloseHidden = style([
-    iconBase,
-    {
-        opacity: 0,
-        transform: 'rotate(-45deg) scale(0.9)',
-    },
-]);
-
-export const iconMenuOpen = style([
-    iconBase,
-    {
-        opacity: 1,
-        transform: 'scale(1)',
-    },
-]);
-
-export const iconMenuHidden = style([
-    iconBase,
-    {
-        opacity: 0,
-        transform: 'scale(0.7)',
-    },
-]);
-
-export const topFixed = style([
-    sprinkles({
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-    }),
-    {
-        zIndex: NAVBAR_ZINDEX,
-    },
-]);
-
-const borderWidth = 1;
-
-const navbarBase = style([
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%',
-    }),
-    {
-        borderWidth,
-        borderBottomStyle: 'solid',
-
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                transition: 'border-color 300ms',
-            },
-        },
-    },
-]);
-
-export const navbarBorderColorVariants = styleVariants({
-    default: [navbarBase, {borderColor: vars.colors.divider}],
-    noBorder: [navbarBase, {borderColor: 'transparent'}],
-    menuOpen: [
-        navbarBase,
-        {
-            borderColor: vars.colors.divider,
-
-            '@media': {
-                [mq.tabletOrSmaller]: {
-                    borderColor: 'transparent',
-                },
-            },
-        },
-    ],
-});
-
 export const desktopMenuFirstSection = style({});
 export const desktopMenuLastSection = style({});
 
@@ -248,89 +142,12 @@ export const textWrapperVariants = styleVariants({
     },
 });
 
-export const navigationBarContent = style([
-    sprinkles({
-        alignItems: 'center',
-        width: '100%',
-        display: 'flex',
-    }),
-    {
-        height: NAVBAR_HEIGHT_DESKTOP,
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                height: NAVBAR_HEIGHT_MOBILE - borderWidth,
-            },
-            [mq.desktopOrBigger]: {
-                ':last-child': {
-                    height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
-                },
-            },
-        },
-    },
-]);
-
 export const navigationBarAction = sprinkles({
     border: 'none',
     background: 'transparent',
     padding: 0,
 });
 
-export const desktopOnly = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            display: 'none',
-        },
-    },
-});
-
-export const navigationBarContentRight = style([
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-    }),
-    {
-        height: NAVBAR_HEIGHT_DESKTOP,
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                paddingLeft: 24,
-                flex: 1,
-                height: NAVBAR_HEIGHT_MOBILE - borderWidth,
-            },
-            [mq.desktopOrBigger]: {
-                ':last-child': {
-                    height: NAVBAR_HEIGHT_DESKTOP - borderWidth,
-                },
-            },
-        },
-    },
-]);
-
-export const navigationBarContentRightExpanded = style([
-    navigationBarContentRight,
-    sprinkles({
-        flex: 1,
-    }),
-    {
-        paddingLeft: 56,
-    },
-]);
-
-const spacerMobile = style({
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            height: NAVBAR_HEIGHT_MOBILE,
-        },
-    },
-});
-
-export const spacer = style([
-    sprinkles({
-        height: NAVBAR_HEIGHT_DESKTOP,
-    }),
-    spacerMobile,
-]);
-
 export const spacerLarge = style([
     {
         height: NAVBAR_HEIGHT_DESKTOP_LARGE,
@@ -338,33 +155,6 @@ export const spacerLarge = style([
     spacerMobile,
 ]);
 
-export const burgerMenuTransition = {
-    enter: style({
-        transform: 'translate(-100vw)',
-    }),
-    enterActive: style({
-        transform: 'translate(0)',
-        transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
-        '@media': {
-            ['(prefers-reduced-motion)']: {
-                transition: 'none',
-            },
-        },
-    }),
-    exit: style({
-        transform: 'translate(0)',
-    }),
-    exitActive: style({
-        transform: 'translate(-100vw)',
-        transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
-        '@media': {
-            ['(prefers-reduced-motion)']: {
-                transition: 'none',
-            },
-        },
-    }),
-};
-
 export const mainNavbarContent = sprinkles({
     display: 'flex',
     alignItems: 'center',
@@ -375,61 +165,6 @@ export const mainNavBarSectionsContainer = style([
     {minWidth: 'fit-content'},
 ]);
 
-export const logoContainer = style([
-    sprinkles({
-        display: 'flex',
-        justifyContent: 'center',
-    }),
-    {
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                marginRight: 0,
-            },
-        },
-    },
-]);
-
-export const burgerMenuButton = style({
-    marginRight: 24,
-    width: 'fit-content',
-    '@media': {
-        [mq.desktopOrBigger]: {
-            display: 'none',
-        },
-    },
-});
-
-export const burgerMenu = sprinkles({
-    position: 'fixed',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    background: vars.colors.background,
-});
-
-export const burgerMenuContainer = sprinkles({
-    height: '100%',
-    position: 'relative',
-});
-
-export const burgerMenuContentContainer = style([
-    sprinkles({
-        overflowY: 'auto',
-        width: '100%',
-        height: '100%',
-        position: 'absolute',
-        top: 0,
-    }),
-    {
-        transition: `transform ${BURGER_MENU_ANIMATION_DURATION_MS}ms ease-out`,
-        '@media': {
-            ['(prefers-reduced-motion)']: {
-                transition: 'none',
-            },
-        },
-    },
-]);
-
 export const iconButtonVariants = styleVariants({
     default: [
         sprinkles({color: vars.colors.neutralHigh}),