@telefonica/mistica 17.2.0 → 17.4.0

package/src/logo-movistar.tsx

@@ -77,7 +77,7 @@ const MovistarLogoImage = ({
 
     return (
         <g fill={color}>
-            <path d="M17.2797 17.2124C14.4995 17.2572 9.36782 18.6502 7.02384 28.3781C6.00256 32.6168 5.60793 37.0347 6.4823 42.2938C7.28828 47.1441 8.71635 51.3303 9.67886 53.6376C10.0107 54.4324 10.5244 55.2617 10.9215 55.7719C12.0639 57.239 13.9651 57.1453 14.764 56.7453C15.6348 56.3098 16.6358 55.2581 16.2736 52.8561C16.0983 51.6958 15.5933 49.9981 15.3091 49.0545C14.4367 46.1588 13.2756 42.6649 13.1743 40.176C13.039 36.8468 14.3308 36.4108 15.1885 36.2193C16.6312 35.8965 17.8405 37.5063 18.9894 39.5237C20.3607 41.9314 22.7108 46.1974 24.6277 49.456C26.3582 52.3975 29.5517 55.5469 34.6804 55.3307C39.9089 55.1109 43.763 53.0837 45.7483 46.7014C47.2341 41.9267 48.2468 38.3588 49.8765 34.7048C51.7503 30.5031 54.2498 28.254 56.3547 28.9408C58.3091 29.5781 58.7969 31.5193 58.8202 34.3728C58.841 36.8968 58.5538 39.6792 58.3304 41.7234C58.2493 42.4652 58.1024 43.9576 58.1622 44.7859C58.2802 46.4146 58.9742 48.0414 60.7792 48.3018C62.7017 48.5788 64.2443 47.0174 64.8603 45.1302C65.1034 44.3864 65.3106 43.2482 65.4226 42.4405C65.9874 38.3618 66.1338 35.6206 65.8795 31.4473C65.5811 26.5676 64.6414 22.1178 63.0021 18.2667C61.4337 14.5839 58.9145 12.2236 55.6835 12.0151C52.107 11.7845 48.0026 14.1958 45.8496 18.8741C43.8648 23.1865 42.2772 27.6136 41.3141 29.873C40.3374 32.1643 38.9018 33.5764 36.6946 33.8127C33.996 34.101 31.6708 32.1103 29.9676 29.2718C28.4828 26.7977 25.5401 22.0869 23.9656 20.5039C22.4864 19.0167 20.7969 17.1558 17.2797 17.2124Z" />
+            <path d="M63.9489 19.7664C62.3545 16.0836 59.7935 13.7229 56.5087 13.5152C52.8722 13.2842 48.7008 15.6958 46.5119 20.3736C44.4945 24.6854 42.8797 29.1134 41.9015 31.3724C40.9088 33.6634 39.4496 35.0755 37.2054 35.3123C34.4613 35.6014 32.098 33.6097 30.367 30.7724C28.8568 28.2984 25.8656 23.5871 24.2654 22.0036C22.7611 20.5175 21.0445 18.655 17.4676 18.7131C14.6407 18.7582 9.42423 20.1514 7.04057 29.879C6.00281 34.1181 5.60166 38.536 6.48971 43.7935C7.30946 48.6442 8.76145 52.8311 9.73962 55.1381C10.0768 55.9327 10.5986 56.7622 11.0027 57.2721C12.164 58.7394 14.0971 58.645 14.9095 58.2455C15.7947 57.8097 16.8121 56.7579 16.4444 54.3565C16.2671 53.1957 15.7525 51.4989 15.4633 50.5546C14.5767 47.6593 13.3965 44.1654 13.2933 41.6768C13.1552 38.3486 14.4691 37.9127 15.3412 37.721C16.8077 37.3985 18.0374 39.0081 19.2059 41.026C20.5998 43.4332 22.9893 47.6999 24.9383 50.9585C26.697 53.9003 29.944 57.0499 35.159 56.8334C40.4742 56.6141 44.3927 54.586 46.4116 48.2041C47.9217 43.4288 48.9522 39.8609 50.6077 36.2072C52.5132 32.0058 55.0538 29.757 57.1933 30.4427C59.1801 31.0804 59.6758 33.0213 59.7005 35.8745C59.7223 38.398 59.4301 41.1814 59.2019 43.2255C59.1191 43.9678 58.9708 45.4598 59.0319 46.2879C59.1525 47.9164 59.8574 49.5435 61.6917 49.8035C63.6466 50.081 65.2148 48.5193 65.8413 46.6322C66.0884 45.8884 66.2991 44.7494 66.4125 43.9417C66.9866 39.8638 67.1363 37.1224 66.8776 32.9487C66.5738 28.0689 65.6189 23.6191 63.9518 19.7678L63.9489 19.7664Z" />
         </g>
     );
 };

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}),