@telefonica/mistica 17.3.0 → 17.4.0

package/src/navigation-shared.css.ts

@@ -0,0 +1,289 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {NAVBAR_HEIGHT_DESKTOP, NAVBAR_HEIGHT_MOBILE} from './theme';
+import * as mq from './media-queries.css';
+import {vars} from './skins/skin-contract.css';
+
+/*
+ * Styles of the parts that every navigation surface shares: the header of a bar, the content of that
+ * header, the burger icon, the panel that the burger opens, and the spacer of a fixed bar. `NavigationBar`,
+ * `MainNavigationBar`, `FunnelNavigationBar` and `SidenavBar` all read them, so a change here reaches the
+ * four of them.
+ *
+ * The styles of the desktop menu of `MainNavigationBar` stay in `navigation-bar.css.ts`, because that menu
+ * belongs to that component alone.
+ */
+
+export const NAVBAR_ZINDEX = 25;
+
+export const BURGER_MENU_ANIMATION_DURATION_MS = 300;
+
+const borderWidth = 1;
+
+// Header ----------------------------------------------------------------------
+
+export const topFixed = style([
+    sprinkles({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+    }),
+    {
+        zIndex: NAVBAR_ZINDEX,
+    },
+]);
+
+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 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 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,
+    },
+]);
+
+export const desktopOnly = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            display: 'none',
+        },
+    },
+});
+
+export const logoContainer = style([
+    sprinkles({
+        display: 'flex',
+        justifyContent: 'center',
+    }),
+    {
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                marginRight: 0,
+            },
+        },
+    },
+]);
+
+// The spacer keeps the content of the page below a bar that is fixed to the top of the viewport.
+export const spacerMobile = style({
+    '@media': {
+        [mq.tabletOrSmaller]: {
+            height: NAVBAR_HEIGHT_MOBILE,
+        },
+    },
+});
+
+export const spacer = style([
+    sprinkles({
+        height: NAVBAR_HEIGHT_DESKTOP,
+    }),
+    spacerMobile,
+]);
+
+// Burger icon -----------------------------------------------------------------
+
+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 burgerMenuButton = style({
+    marginRight: 24,
+    width: 'fit-content',
+    '@media': {
+        [mq.desktopOrBigger]: {
+            display: 'none',
+        },
+    },
+});
+
+// Burger menu panel -----------------------------------------------------------
+
+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 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',
+            },
+        },
+    }),
+};

package/src/navigation-shared.tsx

@@ -0,0 +1,262 @@
+'use client';
+import * as React from 'react';
+import classnames from 'classnames';
+import ResponsiveLayout from './responsive-layout';
+import Inline from './inline';
+import Box from './box';
+import {Text3} from './text';
+import {IconButton} from './icon-button';
+import IconMenuRegular from './generated/mistica-icons/icon-menu-regular';
+import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
+import IconChevronLeftRegular from './generated/mistica-icons/icon-chevron-left-regular';
+import {ThemeVariant, normalizeVariant} from './theme-variant-context';
+import {useTheme} from './hooks';
+import {vars} from './skins/skin-contract.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as tokens from './text-tokens';
+import * as styles from './navigation-shared.css';
+
+import type {BoxProps} from './box';
+import type {NonDeprecatedVariant, Variant} from './theme-variant-context';
+import type {DataAttributes, HeadingType} from './utils/types';
+import type {ExclusifyUnion} from './utils/utility-types';
+
+/*
+ * The parts that every navigation surface shares. `NavigationBar`, `MainNavigationBar` and
+ * `FunnelNavigationBar` build their bars with them, and so does the mobile `SidenavBar`. A change here
+ * reaches the four components, so every one of them carries screenshot tests.
+ *
+ * The desktop menu of `MainNavigationBar` stays in `navigation-bar.tsx`, because that menu belongs to that
+ * component alone. The panel of a burger menu lives in `mobile-navigation-menu.tsx`.
+ */
+
+export const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}): JSX.Element => {
+    return (
+        <div className={styles.burgerIconContainer} role="presentation" data-testid="BurgerMenuIcon">
+            <div className={isOpen ? styles.iconCloseOpen : styles.iconCloseHidden}>
+                <IconCloseRegular />
+            </div>
+            <div className={isOpen ? styles.iconMenuHidden : styles.iconMenuOpen}>
+                <IconMenuRegular />
+            </div>
+        </div>
+    );
+};
+
+type HeaderProps = {
+    children: React.ReactNode;
+    topFixed?: boolean;
+    variant: NonDeprecatedVariant;
+    withBorder?: boolean;
+    isBurgerMenuOpen?: boolean;
+    dataAttributes?: DataAttributes;
+    isBottomRow?: boolean;
+};
+
+export const Header = ({
+    children,
+    topFixed,
+    withBorder,
+    isBurgerMenuOpen,
+    variant,
+    dataAttributes,
+}: HeaderProps): JSX.Element => {
+    const {isDarkMode} = useTheme();
+
+    const getBorderClass = () => {
+        const isBrandVariant = (variant === 'brand' || variant === 'negative') && !isDarkMode;
+        if (isBrandVariant || !withBorder) return styles.navbarBorderColorVariants.noBorder;
+        if (isBurgerMenuOpen) return styles.navbarBorderColorVariants.menuOpen;
+
+        return styles.navbarBorderColorVariants.default;
+    };
+
+    const backgroundColor = {
+        default: vars.colors.background,
+        brand: vars.colors.navigationBarBackground,
+        negative: vars.colors.backgroundNegative,
+        alternative: vars.colors.backgroundAlternative,
+        media: vars.colors.navigationBarBackground,
+    } as const;
+
+    return (
+        <header
+            className={classnames(getBorderClass(), {[styles.topFixed]: topFixed})}
+            style={{
+                background: backgroundColor[variant],
+            }}
+            {...getPrefixedDataAttributes(dataAttributes)}
+        >
+            {children}
+        </header>
+    );
+};
+
+type NavigationBarContentContainerProps = {
+    right?: React.ReactNode;
+    children?: React.ReactNode;
+    desktopOnly?: boolean;
+    expandRightContent?: boolean;
+};
+
+export const NavigationBarContentContainer = React.forwardRef<
+    HTMLDivElement,
+    NavigationBarContentContainerProps
+>(({right, children, desktopOnly, expandRightContent}, ref) => {
+    return (
+        <div
+            ref={ref}
+            className={classnames(styles.navigationBarContent, {[styles.desktopOnly]: desktopOnly})}
+        >
+            {children}
+            {right && (
+                <div
+                    className={
+                        expandRightContent
+                            ? styles.navigationBarContentRightExpanded
+                            : styles.navigationBarContentRight
+                    }
+                >
+                    {right}
+                </div>
+            )}
+        </div>
+    );
+});
+
+type WideConfig = {
+    paddingX: BoxProps['paddingX'];
+};
+
+export const NavigationBarSideMargins = ({
+    children,
+    wide,
+    backgroundColor,
+}: {
+    children: React.ReactNode;
+    wide: boolean | WideConfig;
+    backgroundColor?: string;
+}): JSX.Element => {
+    if (!wide) {
+        return <ResponsiveLayout backgroundColor={backgroundColor}>{children}</ResponsiveLayout>;
+    }
+
+    const defaultWidePaddingX: BoxProps['paddingX'] = {
+        mobile: 16,
+        tablet: 24,
+        desktop: 24,
+    };
+
+    return (
+        <Box
+            width="100%"
+            paddingX={
+                wide === true
+                    ? defaultWidePaddingX
+                    : typeof wide.paddingX === 'number'
+                      ? wide.paddingX
+                      : {
+                            ...defaultWidePaddingX,
+                            ...wide.paddingX,
+                        }
+            }
+            background={backgroundColor}
+        >
+            {children}
+        </Box>
+    );
+};
+
+type InteractiveProps = ExclusifyUnion<{href: string} | {to: string} | {onPress: () => void}>;
+
+type MaybeInteractiveProps = ExclusifyUnion<{href?: string} | {to?: string} | {onPress?: () => void}>;
+
+interface NavigationBarCommonProps {
+    variant?: Variant;
+    onBack?: () => void;
+    title?: string;
+    titleAs?: HeadingType;
+    right?: React.ReactElement;
+    withBorder?: boolean;
+    children?: undefined;
+    wide?: boolean | WideConfig;
+}
+
+interface NavigationBarTopFixedProps extends NavigationBarCommonProps {
+    topFixed?: true;
+}
+
+interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
+    topFixed: false;
+}
+
+type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
+
+export const NavigationBar = ({
+    onBack,
+    title,
+    titleAs,
+    right,
+    variant = 'default',
+    topFixed = true,
+    withBorder = true,
+    wide = false,
+}: NavigationBarProps): JSX.Element => {
+    const {texts, t} = useTheme();
+    const content = (
+        <NavigationBarContentContainer right={right} expandRightContent>
+            <Inline space={24} alignItems="center">
+                {onBack && (
+                    <IconButton
+                        aria-label={texts.backNavigationBar || t(tokens.backNavigationBar)}
+                        onPress={onBack}
+                        Icon={IconChevronLeftRegular}
+                        bleedLeft
+                        bleedRight
+                    />
+                )}
+                <Text3 regular truncate as={titleAs}>
+                    {title}
+                </Text3>
+            </Inline>
+        </NavigationBarContentContainer>
+    );
+
+    const calcPaddingXWhenNotTopFixed = (): BoxProps['paddingX'] => {
+        if (typeof wide !== 'object') {
+            return 0;
+        }
+        return wide.paddingX ?? 0;
+    };
+
+    const normalizedVariant = normalizeVariant(variant);
+
+    return (
+        <ThemeVariant variant={normalizedVariant}>
+            <Header
+                topFixed={topFixed}
+                withBorder={withBorder}
+                variant={normalizedVariant}
+                dataAttributes={{testid: 'NavigationBar'}}
+            >
+                {topFixed ? (
+                    <NavigationBarSideMargins wide={wide}>{content}</NavigationBarSideMargins>
+                ) : (
+                    <Box width="100%" paddingX={calcPaddingXWhenNotTopFixed()}>
+                        {content}
+                    </Box>
+                )}
+            </Header>
+            {topFixed && <div className={styles.spacer} />}
+        </ThemeVariant>
+    );
+};
+
+export type {
+    HeaderProps,
+    NavigationBarContentContainerProps,
+    WideConfig,
+    NavigationBarProps,
+    InteractiveProps,
+    MaybeInteractiveProps,
+};

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '17.3.0' as string;
+export const PACKAGE_VERSION = '17.4.0' as string;

package/src/portal.tsx

@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom';
  * This is useful for components that need position fixed, for example
  * for menus, alerts, overlays, etc.
  *
- * See https://reactjs.org/docs/portals.html
+ * @see https://react.dev/reference/react-dom/createPortal#usage
  */
 
 type Props = {

package/src/sidenav-bar-context.tsx

@@ -0,0 +1,41 @@
+'use client';
+import * as React from 'react';
+
+import type {SidenavCollapseState} from './sidenav-bar-types';
+
+type SidenavBarContextValue = {
+    /** Target collapsed state. It flips at the first frame of the motion. */
+    collapsed: boolean;
+    /** Phase of the collapse motion, for the parts of a row that must wait until the rail rests. */
+    collapseState: SidenavCollapseState;
+    /** True when every movement of the sidenav takes zero time. See `useIsMotionOff`. */
+    isMotionOff: boolean;
+    doublePanel: boolean;
+    /** The first-level item whose children show in the panel. One panel opens at a time. */
+    panelOpenForItemId: string | null;
+    setPanelOpenForItemId: (id: string | null) => void;
+    /**
+     * The press of an item that navigates: it closes the open panel, then it reports the item as the
+     * new selection. One call does both, because the selection alone would reopen the second column that
+     * the press just closed. The item passes `null` when it has no id.
+     */
+    selectItemAndClosePanel: (itemId: string | null) => void;
+    containerRef: React.RefObject<HTMLElement | null>;
+    selectedItemId: string | null;
+};
+
+const SidenavBarContext = React.createContext<SidenavBarContextValue>({
+    collapsed: false,
+    collapseState: 'expanded',
+    isMotionOff: false,
+    doublePanel: false,
+    panelOpenForItemId: null,
+    setPanelOpenForItemId: () => {},
+    selectItemAndClosePanel: () => {},
+    containerRef: React.createRef(),
+    selectedItemId: null,
+});
+
+const useSidenavBarContext = (): SidenavBarContextValue => React.useContext(SidenavBarContext);
+
+export {SidenavBarContext, useSidenavBarContext};

package/src/sidenav-bar-data.ts

@@ -0,0 +1,49 @@
+import type {
+    SidenavEntry,
+    SidenavFirstLevelItem,
+    SidenavLogo,
+    SidenavSection,
+    SidenavSectionTitle,
+    SidenavSlot,
+    SidenavSlotRenderProps,
+} from './sidenav-bar-types';
+
+/** Tells a first-level section apart from a first-level stand-alone item. */
+const isSidenavSection = (entry: SidenavEntry): entry is SidenavSection =>
+    Array.isArray((entry as SidenavSection).items);
+
+/** The items of the first level, in order: the items of every section, and every stand-alone item. */
+const getFirstLevelItems = (entries: ReadonlyArray<SidenavEntry>): Array<SidenavFirstLevelItem> =>
+    entries.flatMap((entry) =>
+        isSidenavSection(entry) ? [...entry.items] : [entry as SidenavFirstLevelItem]
+    );
+
+/** Reads the two shapes of a section title as one pair: the text, and the visibility of the heading. */
+const getSidenavSectionTitle = (title: SidenavSectionTitle): {text: string; isHeadingVisible: boolean} =>
+    typeof title === 'string'
+        ? {text: title, isHeadingVisible: true}
+        : {text: title.text, isHeadingVisible: !title.hidden};
+
+/** Resolves the function form of a slot with the props of the current state. */
+const renderSidenavSlot = (slot: SidenavSlot, props: SidenavSlotRenderProps): React.ReactNode =>
+    typeof slot === 'function' ? slot(props) : slot;
+
+/** Resolves the four forms of the logo prop. `defaultLogo` is the logo of the skin, sized by the caller. */
+const renderSidenavLogo = (
+    logo: SidenavLogo | undefined,
+    props: SidenavSlotRenderProps,
+    defaultLogo: React.ReactNode
+): React.ReactNode => {
+    if (logo === false) {
+        return null;
+    }
+    if (typeof logo === 'function') {
+        return logo(props);
+    }
+    if (logo === undefined || logo === true) {
+        return defaultLogo;
+    }
+    return logo;
+};
+
+export {isSidenavSection, getFirstLevelItems, getSidenavSectionTitle, renderSidenavSlot, renderSidenavLogo};