@telefonica/mistica 16.60.0 → 16.61.0

package/src/hero.tsx

@@ -0,0 +1,318 @@
+'use client';
+import * as React from 'react';
+import classnames from 'classnames';
+import {useScreenSize} from './hooks';
+import {Text3, Text8} from './text';
+import GridLayout from './grid-layout';
+import Box from './box';
+import Stack from './stack';
+import ButtonGroup from './button-group';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as styles from './hero.css';
+import * as mediaStyles from './image.css';
+import {useSlideshowContext} from './carousel';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {useThemeVariant} from './theme-variant-context';
+import {applyCssVars} from './utils/css';
+import {InternalResponsiveLayout, ResetResponsiveLayout} from './responsive-layout';
+import {
+    type DataAttributes,
+    type HeadingType,
+    type RendersElement,
+    type RendersNullableElement,
+} from './utils/types';
+import {isBiggerHeading} from './utils/headings';
+
+import type {NonDeprecatedVariant} from './theme-variant-context';
+import type Image from './image';
+import type Video from './video';
+import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
+import type Tag from './tag';
+
+const CONTENT_BACKGROUND_COLOR = {
+    default: skinVars.colors.background,
+    alternative: skinVars.colors.backgroundAlternative,
+    brand: skinVars.colors.backgroundBrand,
+    'brand-secondary': skinVars.colors.backgroundBrandSecondary,
+    none: 'transparent',
+};
+
+type LayoutProps = {children: React.ReactNode; variant: NonDeprecatedVariant; backgroundColor?: string};
+
+const Layout = ({children, variant, backgroundColor}: LayoutProps) => {
+    return (
+        <InternalResponsiveLayout
+            variant={variant}
+            className={styles.layout}
+            innerDivClassName={styles.layout}
+            shouldExpandWhenNested
+            backgroundColor={backgroundColor ?? 'transparent'}
+        >
+            {children}
+        </InternalResponsiveLayout>
+    );
+};
+
+type HeroContentProps = {
+    headline?: RendersNullableElement<typeof Tag>;
+    pretitle?: string;
+    pretitleAs?: HeadingType;
+    title?: string;
+    titleAs?: HeadingType;
+    description?: string;
+    descriptionLinesMax?: number;
+    extra?: React.ReactNode;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
+    buttonLink?: RendersNullableElement<typeof ButtonLink>;
+};
+
+const HeroContent = ({
+    headline,
+    title,
+    titleAs = 'h1',
+    pretitle,
+    pretitleAs,
+    description,
+    descriptionLinesMax,
+    extra,
+    button,
+    secondaryButton,
+    buttonLink,
+}: HeroContentProps) => {
+    const titleContent = title ? (
+        <Text8 as={titleAs} dataAttributes={{testid: 'title'}}>
+            {title}
+        </Text8>
+    ) : undefined;
+
+    const pretitleContent = pretitle ? (
+        <Text3 as={pretitleAs} regular dataAttributes={{testid: 'pretitle'}}>
+            {pretitle}
+        </Text3>
+    ) : undefined;
+
+    const headlineContent = headline ? (
+        <div
+            data-testid="headline"
+            style={{paddingBottom: pretitle || title || description ? 16 : 0, order: -1}}
+        >
+            {headline}
+        </div>
+    ) : undefined;
+
+    return (
+        <section className={styles.contentContainer}>
+            <div>
+                <Stack space={16}>
+                    {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
+                    <div className={styles.flexColumn}>
+                        {isBiggerHeading(titleAs, pretitleAs) ? (
+                            <>
+                                {titleContent}
+                                {headlineContent}
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title ? 8 : 0, order: -1}}>
+                                        {pretitleContent}
+                                    </div>
+                                )}
+                            </>
+                        ) : (
+                            <>
+                                {pretitleContent && (
+                                    <div style={{paddingBottom: title ? 8 : 0}}>{pretitleContent}</div>
+                                )}
+                                {headlineContent}
+                                {titleContent}
+                            </>
+                        )}
+                    </div>
+
+                    {description && (
+                        <Text3
+                            as="p"
+                            regular
+                            color={skinVars.colors.textSecondary}
+                            truncate={descriptionLinesMax}
+                            dataAttributes={{testid: 'description'}}
+                        >
+                            {description}
+                        </Text3>
+                    )}
+                </Stack>
+                {extra && <div data-testid="slot">{extra}</div>}
+            </div>
+            {(button || buttonLink) && (
+                <div className={styles.actions}>
+                    <ButtonGroup primaryButton={button} secondaryButton={secondaryButton} link={buttonLink} />
+                </div>
+            )}
+        </section>
+    );
+};
+
+type HeroProps = {
+    height?: string | number;
+    background?: 'default' | 'alternative' | 'brand' | 'brand-secondary' | 'none';
+    noPaddingY?: boolean;
+    media: RendersElement<typeof Image> | RendersElement<typeof Video>;
+    headline?: RendersNullableElement<typeof Tag>;
+    pretitle?: string;
+    pretitleAs?: HeadingType;
+    title?: string;
+    titleAs?: HeadingType;
+    description?: string;
+    descriptionLinesMax?: number;
+    extra?: React.ReactNode;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    buttonLink?: RendersNullableElement<typeof ButtonLink>;
+    dataAttributes?: DataAttributes;
+    desktopMediaPosition?: 'left' | 'right';
+};
+
+const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
+    (
+        {
+            height,
+            background = 'default',
+            media,
+            desktopMediaPosition = 'left',
+            dataAttributes,
+            noPaddingY,
+            ...rest
+        },
+        ref
+    ) => {
+        const {isTabletOrSmaller} = useScreenSize();
+        const slideshowContext = useSlideshowContext();
+        const hasSlideshowBullets = !!slideshowContext?.withBullets;
+        const outsideVariant = useThemeVariant();
+        const variant =
+            background === 'none'
+                ? outsideVariant
+                : (
+                      {
+                          default: 'default',
+                          alternative: 'alternative',
+                          brand: 'brand',
+                          'brand-secondary': 'negative',
+                      } as const
+                  )[background];
+
+        if (isTabletOrSmaller) {
+            return (
+                <ResetResponsiveLayout>
+                    <div style={applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})}>
+                        <div
+                            {...getPrefixedDataAttributes(dataAttributes, 'Hero')}
+                            ref={ref}
+                            style={{
+                                ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
+                                ...applyCssVars({
+                                    [styles.vars.height]:
+                                        typeof height === 'number' ? `${height}px` : height ?? '100%',
+                                    [mediaStyles.vars.mediaBorderRadius]: '0px',
+                                }),
+                            }}
+                            className={classnames(styles.container, styles.containerMobile, {
+                                [styles.containerMinHeight]: !noPaddingY,
+                            })}
+                        >
+                            {media}
+
+                            <Layout variant={variant} backgroundColor={CONTENT_BACKGROUND_COLOR[background]}>
+                                <div className={styles.expandedContent}>
+                                    <div
+                                        style={{
+                                            paddingTop: skinVars.spacing.heroPadding.top,
+                                            paddingBottom: hasSlideshowBullets
+                                                ? 48
+                                                : noPaddingY
+                                                  ? 0
+                                                  : skinVars.spacing.heroPadding.bottom,
+                                        }}
+                                        className={styles.layout}
+                                    >
+                                        <HeroContent {...rest} />
+                                    </div>
+                                </div>
+                            </Layout>
+                        </div>
+                    </div>
+                </ResetResponsiveLayout>
+            );
+        }
+
+        const left =
+            desktopMediaPosition === 'left' ? (
+                media
+            ) : (
+                <Box paddingRight={24}>
+                    <HeroContent {...rest} />
+                </Box>
+            );
+
+        const right =
+            desktopMediaPosition === 'right' ? (
+                media
+            ) : (
+                <Box paddingLeft={24}>
+                    <HeroContent {...rest} />
+                </Box>
+            );
+
+        return (
+            <div
+                {...getPrefixedDataAttributes(dataAttributes, 'Hero')}
+                ref={ref}
+                style={{
+                    ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
+                    ...applyCssVars({
+                        [styles.vars.height]: typeof height === 'number' ? `${height}px` : height ?? '100%',
+                        [mediaStyles.vars.mediaBorderRadius]: skinVars.borderRadii.container,
+                    }),
+                    background: CONTENT_BACKGROUND_COLOR[background],
+                }}
+                className={styles.hero}
+            >
+                <Layout variant={variant}>
+                    <GridLayout
+                        template="6+6"
+                        left={
+                            <div
+                                style={{
+                                    paddingTop: noPaddingY ? 0 : skinVars.spacing.heroPadding.top,
+                                    paddingBottom:
+                                        noPaddingY && !hasSlideshowBullets
+                                            ? 0
+                                            : skinVars.spacing.heroPadding.bottom,
+                                }}
+                                className={classnames(styles.container, styles.containerDesktop, {
+                                    [styles.containerMinHeight]: !noPaddingY,
+                                })}
+                            >
+                                {left}
+                            </div>
+                        }
+                        right={
+                            <div
+                                style={{
+                                    paddingTop: noPaddingY ? 0 : skinVars.spacing.heroPadding.top,
+                                    paddingBottom:
+                                        noPaddingY && !hasSlideshowBullets
+                                            ? 0
+                                            : skinVars.spacing.heroPadding.bottom,
+                                }}
+                                className={classnames(styles.container, styles.containerDesktop)}
+                            >
+                                {right}
+                            </div>
+                        }
+                    />
+                </Layout>
+            </div>
+        );
+    }
+);
+
+export default Hero;

package/src/hooks.tsx

@@ -0,0 +1,313 @@
+// this is a false positive, because there isn't any component in this module
+/* eslint-disable mistica-local-rules/use-client */
+import * as React from 'react';
+import ThemeContext from './theme-context';
+import ScreenSizeContext from './screen-size-context';
+import {listenResize} from './utils/dom';
+import {isClientSide} from './utils/environment';
+import {isEqual} from './utils/helpers';
+
+import type {Theme} from './theme';
+import type {ScreenSizeContextType} from './screen-size-context';
+
+export const useTheme = (): Theme => {
+    const theme = React.useContext(ThemeContext);
+    if (!theme) {
+        throw Error(
+            `To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.`
+        );
+    }
+    return theme;
+};
+
+let bodyStyles = '';
+let bodyScrollTop = 0;
+let disableBodyDepth = 0;
+
+export const useDisableBodyScroll = (disable: boolean): void => {
+    React.useEffect(() => {
+        if (disable) {
+            const scrollContainer = document.scrollingElement || document.documentElement;
+
+            const disableBodyScroll = () => {
+                disableBodyDepth++;
+                if (disableBodyDepth > 1) {
+                    return;
+                }
+                bodyScrollTop = scrollContainer?.scrollTop ?? 0;
+                bodyStyles = document.body?.style.cssText ?? '';
+                if (document.body) {
+                    const hasScrollbar =
+                        window.innerWidth > (scrollContainer?.clientWidth ?? window.innerWidth);
+
+                    // if the scrollbar is visible, we don't want to hide it because content will be resized
+                    const overflowY = hasScrollbar ? 'scroll' : 'hidden';
+
+                    document.body.style.cssText =
+                        bodyStyles +
+                        (bodyStyles.endsWith(';') ? '' : ';') +
+                        [
+                            'overflow: hidden;',
+                            `overflow-y: ${overflowY};`,
+                            'position: fixed;',
+                            `top: ${-bodyScrollTop}px;`,
+                            'left: 0px;',
+                            'right: 0px;',
+                            'overscroll-behavior-y: contain;', // disable overscroll
+                        ].join('');
+                }
+            };
+            const enableBodyScroll = () => {
+                disableBodyDepth--;
+                if (disableBodyDepth > 0) {
+                    return;
+                }
+                if (document.body) {
+                    document.body.style.cssText = bodyStyles;
+                }
+                if (scrollContainer) {
+                    scrollContainer.scrollTop = bodyScrollTop;
+                }
+            };
+            disableBodyScroll();
+            return enableBodyScroll;
+        }
+        return () => {};
+    }, [disable]);
+};
+
+export const useScreenSize = (): ScreenSizeContextType => React.useContext(ScreenSizeContext);
+
+export const useElementDimensions = ({includeMargins = false}: {includeMargins?: boolean} = {}): {
+    width: number;
+    height: number;
+    ref: (node: HTMLElement | null) => void;
+} => {
+    const [width, setWidth] = React.useState(0);
+    const [height, setHeight] = React.useState(0);
+    const [element, setElement] = React.useState<HTMLElement | null>(null);
+
+    const updateSize = React.useCallback(
+        (entries: Array<ResizeObserverEntry>) => {
+            if (!entries) {
+                setWidth(0);
+                setHeight(0);
+                return;
+            }
+
+            const {width, height} = entries[0].contentRect;
+            if (includeMargins) {
+                const style = window.getComputedStyle(entries[0].target);
+                const marginTop = parseInt(style.marginTop, 10);
+                const marginBottom = parseInt(style.marginBottom, 10);
+                const marginLeft = parseInt(style.marginLeft, 10);
+                const marginRight = parseInt(style.marginRight, 10);
+                setWidth(width + marginLeft + marginRight);
+                setHeight(height + marginTop + marginBottom);
+            } else {
+                setWidth(width);
+                setHeight(height);
+            }
+        },
+        [includeMargins]
+    );
+
+    const ref = React.useCallback((node: HTMLElement | null) => {
+        setElement(node);
+    }, []);
+
+    React.useEffect(() => {
+        if (!element) {
+            setWidth(0);
+            setHeight(0);
+            return;
+        }
+
+        return listenResize(element, updateSize);
+    }, [element, updateSize]);
+
+    return {width, height, ref};
+};
+
+export const useWindowSize = (): {
+    height: number;
+    width: number;
+    screenHeight: number;
+    screenWidth: number;
+    /** Size of the available window size, removing virtual keyboard and native navigation bar or status bar */
+    visualHeight: number;
+} => {
+    const [windowHeight, setWindowHeight] = React.useState<number>(
+        isClientSide() ? window.innerHeight : 1200 // Best guess
+    );
+    const [windowWidth, setWindowWidth] = React.useState<number>(
+        isClientSide() ? window.innerWidth : 800 // Best guess
+    );
+
+    const [screenHeight, setScreenHeight] = React.useState<number>(
+        isClientSide() ? window.screen.availHeight : 1200
+    );
+    const [screenWidth, setScreenWidth] = React.useState<number>(
+        isClientSide() ? window.screen.availWidth : 800
+    );
+
+    const [visualHeight, setVisualHeight] = React.useState<number>(
+        isClientSide() ? window.visualViewport?.height || window.screen.availHeight : 1200
+    );
+
+    React.useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+            setWindowWidth(window.innerWidth);
+            setScreenHeight(window.screen.availHeight);
+            setScreenWidth(window.screen.availWidth);
+            setVisualHeight(window.visualViewport?.height || window.screen.availHeight);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    // do not create new result instances if values don't change
+    return React.useMemo(
+        () => ({
+            height: windowHeight,
+            width: windowWidth,
+            screenHeight,
+            screenWidth,
+            visualHeight,
+        }),
+        [windowHeight, windowWidth, screenHeight, screenWidth, visualHeight]
+    );
+};
+
+export const useWindowHeight = (): number => {
+    const {height} = useWindowSize();
+    return height;
+};
+
+export const useWindowWidth = (): number => {
+    const {width} = useWindowSize();
+    return width;
+};
+
+export const useScreenHeight = (): number => {
+    const {screenHeight} = useWindowSize();
+    return screenHeight;
+};
+
+export const useIsWithinIFrame = (): boolean => {
+    return isClientSide() && window.top !== window.self;
+};
+
+// React currently throws a warning when using useLayoutEffect on the server.
+// To get around it, we can conditionally useEffect on the server (no-op) and
+// useLayoutEffect in the browser
+export const useIsomorphicLayoutEffect = isClientSide() ? React.useLayoutEffect : React.useEffect;
+
+type IntersectionObserverOptions = {
+    root?: Element | Document | null;
+    rootMargin?: string;
+    threshold?: number | Array<number>;
+};
+
+export const useIsInViewport = (
+    ref: React.RefObject<Element | null>,
+    defaultValue: boolean,
+    options?: IntersectionObserverOptions
+): boolean => {
+    const [isInViewport, setIsInViewport] = React.useState<boolean>(defaultValue);
+
+    React.useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        if (typeof window.IntersectionObserver === 'undefined') {
+            return () => {};
+        }
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                setIsInViewport(entries[0].isIntersecting);
+            },
+            {root: options?.root, rootMargin: options?.rootMargin, threshold: options?.threshold}
+        );
+
+        observer.observe(ref.current);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, options?.root, options?.rootMargin, options?.threshold]);
+
+    return isInViewport;
+};
+
+export type BoundingRect = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+
+const getBoundingClientRect = (element: Element): BoundingRect => {
+    const {top, right, bottom, left, width, height, x, y} = element.getBoundingClientRect();
+    return {top, right, bottom, left, width, height, x, y};
+};
+
+export const useBoundingRect = (
+    ref: React.RefObject<Element | null>,
+    computeOnEveryFrame = true,
+    trackIfNotVisible = false
+): BoundingRect | undefined => {
+    const [rect, setRect] = React.useState<BoundingRect>();
+    const isVisible = useIsInViewport(ref, false);
+
+    React.useEffect(() => {
+        let id: number;
+
+        const check = () => {
+            if (ref.current && (isVisible || trackIfNotVisible)) {
+                const current = getBoundingClientRect(ref.current);
+                if (!isEqual(rect, current)) {
+                    setRect(current);
+                }
+
+                if (computeOnEveryFrame) {
+                    id = requestAnimationFrame(check);
+                }
+            } else {
+                setRect(undefined);
+            }
+        };
+
+        id = requestAnimationFrame(check);
+
+        return () => {
+            cancelAnimationFrame(id);
+        };
+    }, [ref, rect, isVisible, computeOnEveryFrame, trackIfNotVisible]);
+
+    return rect;
+};
+
+export const useInnerText = (): {text: string; ref: (instance: HTMLElement | null) => void} => {
+    const [text, setText] = React.useState('');
+
+    const ref: React.LegacyRef<HTMLElement> = React.useCallback((node: HTMLElement) => {
+        if (node) {
+            // jsdom doesn't implements innerText. Using textContent as fallback in unit tests although it's not the same
+            setText((process.env.NODE_ENV === 'test' ? node.textContent : node.innerText) || '');
+        }
+    }, []);
+
+    return {text, ref};
+};

package/src/horizontal-scroll.css.ts

@@ -0,0 +1,43 @@
+import {fallbackVar, globalStyle, style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {vars as responsiveLayoutVars} from './responsive-layout.css';
+import {sprinkles} from './sprinkles.css';
+
+const responsiveLayoutSideMargin = fallbackVar(responsiveLayoutVars.sideMargin, '0px');
+
+const sideMarginSpacer = {
+    content: '""',
+    display: 'block',
+    flexShrink: 0,
+    width: responsiveLayoutSideMargin,
+};
+
+const hideScrollbar = {
+    scrollbarWidth: 'none', // Firefox
+    '::-webkit-scrollbar': {
+        display: 'none', // Safari + Chrome
+    },
+} as const;
+
+export const scroll = style([
+    sprinkles({
+        display: 'flex',
+    }),
+    {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        margin: `0 calc(${responsiveLayoutSideMargin} * -1)`,
+        ':after': sideMarginSpacer,
+        ':before': sideMarginSpacer,
+
+        '@media': {
+            [mq.touchableOnly]: hideScrollbar,
+        },
+    },
+]);
+
+export const noScrollbar = style(hideScrollbar);
+
+globalStyle(`${scroll} > *`, {
+    flexShrink: 0,
+});

package/src/horizontal-scroll.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import * as React from 'react';
+import * as styles from './horizontal-scroll.css';
+
+type Props = {
+    children: React.ReactNode;
+    noScrollbar?: boolean;
+};
+
+const HorizontalScroll = React.forwardRef<HTMLDivElement, Props>(({children, noScrollbar}: Props, ref) => {
+    return (
+        <div className={classNames(styles.scroll, {[styles.noScrollbar]: noScrollbar})} ref={ref}>
+            {children}
+        </div>
+    );
+});
+
+export default HorizontalScroll;