@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/hero.tsx

@@ -1,318 +0,0 @@
-'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

@@ -1,313 +0,0 @@
-// 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

@@ -1,43 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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;