@telefonica/mistica 16.60.0 → 16.61.0

package/src/loading-bar.css.ts

@@ -0,0 +1,69 @@
+import {style, keyframes} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars} from './skins/skin-contract.css';
+
+const TRANSITION_DURATION_MS = 400;
+const ANIMATION_DURATION_MS = 1800;
+
+const enterAnimation = keyframes({
+    from: {
+        transform: 'translateY(-4px)',
+    },
+    to: {
+        transform: 'translateY(0)',
+    },
+});
+
+export const portal = style([
+    sprinkles({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+    }),
+    {
+        zIndex: 1, // Render above everything, including other portals
+        animation: `${enterAnimation} ${TRANSITION_DURATION_MS}ms ease-out`,
+        transition: `transform ${TRANSITION_DURATION_MS}ms ease-out`,
+    },
+]);
+
+export const hidden = style({
+    transform: 'translateY(-4px)',
+});
+
+export const progressContainer = sprinkles({
+    width: '100%',
+    overflow: 'hidden',
+    position: 'relative',
+    background: vars.colors.loadingBar,
+    height: 4,
+});
+
+const progressIndicator = keyframes({
+    '0%': {
+        transform: 'translateX(0%)',
+    },
+    '50%': {
+        transform: 'translateX(100%)',
+        animationTimingFunction: 'ease-in-out',
+    },
+    '100%': {
+        transform: 'translateX(200%)',
+        animationTimingFunction: 'ease-in-out',
+    },
+});
+
+export const progress = style([
+    sprinkles({
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    }),
+    {
+        left: '-100%',
+        animation: `${progressIndicator} ${ANIMATION_DURATION_MS}ms infinite`,
+        animationDelay: `${TRANSITION_DURATION_MS}ms`,
+        background: vars.colors.loadingBarBackground,
+    },
+]);

package/src/loading-bar.tsx

@@ -0,0 +1,25 @@
+'use client';
+import * as React from 'react';
+import {Portal} from './portal';
+import * as styles from './loading-bar.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import classnames from 'classnames';
+
+import type {DataAttributes} from './utils/types';
+
+type Props = {visible: boolean; children?: void; dataAttributes?: DataAttributes};
+
+const LoadingBar = ({visible, dataAttributes}: Props): JSX.Element => {
+    return (
+        <Portal className={classnames(styles.portal, {[styles.hidden]: !visible})}>
+            <div
+                className={styles.progressContainer}
+                {...getPrefixedDataAttributes(dataAttributes, 'LoadingBar')}
+            >
+                <div className={styles.progress} />
+            </div>
+        </Portal>
+    );
+};
+
+export default LoadingBar;

package/src/loading-screen.css.ts

@@ -0,0 +1,114 @@
+import {keyframes, style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+import * as mq from './media-queries.css';
+
+export const loadingScreen = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    }),
+    {
+        minHeight: '100vh',
+    },
+]);
+
+export const inOutAnimationMs = 500;
+const backgroundAnimationTiming = `${inOutAnimationMs}ms cubic-bezier(.1,0,.7,1)`;
+const backgroundFadeIn = keyframes({
+    '0%': {
+        opacity: 0,
+    },
+    '100%': {
+        opacity: 1,
+    },
+});
+
+export const screenBackgroundAnimated = style({
+    animation: `${backgroundFadeIn} ${backgroundAnimationTiming}`,
+});
+
+export const screenBackground = styleVariants({
+    default: {
+        background: skinVars.colors.background,
+    },
+    brand: {
+        background: skinVars.colors.backgroundBrand,
+    },
+});
+
+export const screenBackgroundFadeOut = style({
+    transition: `opacity ${backgroundAnimationTiming}`,
+    opacity: 0,
+});
+
+export const loadingScreenChildren = sprinkles({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+
+export const loadingScreenText = style([
+    sprinkles({
+        paddingTop: 24,
+    }),
+    {
+        margin: '0 auto',
+        '@media': {
+            [mq.tablet]: {
+                maxWidth: 496,
+            },
+            [mq.desktopOrBigger]: {
+                maxWidth: 600,
+            },
+        },
+    },
+]);
+
+const textInOutAnimationMs = 1000;
+const textAnimationTiming = `${textInOutAnimationMs}ms cubic-bezier(.215,.61,.355,1)`;
+
+const textIn = keyframes({
+    '0%': {
+        transform: 'translateY(50px)',
+        opacity: 0,
+    },
+    '100%': {
+        transform: 'translateY(0)',
+        opacity: 1,
+    },
+});
+
+export const loadingScreenTextAnimated = style({
+    animation: `${textIn} ${textAnimationTiming}`,
+    animationFillMode: 'both',
+});
+
+export const loadingScreenTextAnimatedOut = style({
+    transition: `opacity ${textAnimationTiming}`,
+    opacity: 0,
+});
+
+const pulseAnimation = keyframes({
+    '0%': {
+        transform: 'scale3d(.95, .95, .95)',
+    },
+    '50%': {
+        transform: 'scale3d(1, 1, 1)',
+    },
+    '100%': {
+        transform: 'scale3d(.95, .95, .95)',
+    },
+});
+
+export const pulseLogo = style({
+    animation: `${pulseAnimation} 1.4s infinite ease-out`,
+    transformOrigin: 'center',
+});
+
+export const logo = style({
+    transform: 'scale3d(.95, .95, .95)',
+});

package/src/loading-screen.tsx

@@ -0,0 +1,376 @@
+'use client';
+import * as React from 'react';
+import {useSetOverscrollColor} from './overscroll-color-context';
+import {ThemeVariant} from './theme-variant-context';
+import {vars} from './skins/skin-contract.css';
+import ResponsiveLayout from './responsive-layout';
+import {Text2, Text, getTextSizes} from './text';
+import Stack from './stack';
+import * as styles from './loading-screen.css';
+import Spinner from './spinner';
+import classnames from 'classnames';
+import {Logo} from './logo';
+import ScreenReaderOnly from './screen-reader-only';
+import {useTheme} from './hooks';
+import {VIVO_NEW_SKIN} from './skins/constants';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as tokens from './text-tokens';
+
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {DataAttributes} from './utils/types';
+
+const BackgroundColor = ({isBrandVariant}: {isBrandVariant: boolean}) => {
+    const css = `body {background:${isBrandVariant ? vars.colors.backgroundBrand : vars.colors.background}}`;
+    return <style>{css}</style>;
+};
+
+type TextProps = ExclusifyUnion<
+    | {
+          title?: string;
+          description?: string;
+      }
+    | {
+          texts: ReadonlyArray<{
+              title?: string;
+              description?: string;
+              duration?: number;
+          }>;
+      }
+>;
+
+type LoadingScreenTextsProps = {
+    animateText?: boolean;
+    isLoading?: boolean;
+    onClose?: () => void;
+    texts: ReadonlyArray<{
+        title?: string;
+        description?: string;
+        duration?: number;
+    }>;
+};
+
+const LoadingScreenTexts = ({animateText, isLoading, onClose, texts}: LoadingScreenTextsProps) => {
+    const {textPresets} = useTheme();
+    const [currentTextsIndex, setCurrentTextsIndex] = React.useState(0);
+    const [isClosing, setIsClosing] = React.useState(false);
+
+    const showNextText = React.useCallback(() => {
+        setCurrentTextsIndex((currentTextsIndex + 1) % texts.length);
+        setIsClosing(false);
+    }, [currentTextsIndex, texts.length]);
+
+    React.useEffect(() => {
+        if (!isLoading) {
+            return;
+        }
+
+        if (texts.length === 1) {
+            return;
+        }
+
+        const timeout = setTimeout(() => {
+            if (animateText) {
+                setIsClosing(true);
+            } else {
+                showNextText();
+            }
+        }, texts[currentTextsIndex].duration ?? 5000);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [animateText, currentTextsIndex, isClosing, isLoading, showNextText, texts]);
+
+    const handleOutTransitionEnd = () => {
+        if (!isLoading) {
+            onClose?.();
+            return;
+        }
+        if (!isClosing) {
+            return;
+        }
+
+        showNextText();
+    };
+
+    const {title: currentTitle, description: currentDescription} = texts[currentTextsIndex % texts.length];
+
+    return (
+        <ResponsiveLayout>
+            <div
+                // changing the key triggers the css animation for next texts
+                key={currentTextsIndex}
+                className={classnames(styles.loadingScreenText, {
+                    [styles.loadingScreenTextAnimatedOut]: animateText && (!isLoading || isClosing),
+                })}
+                onTransitionEnd={handleOutTransitionEnd}
+            >
+                <Stack space={8}>
+                    {currentTitle && (
+                        <div className={animateText ? styles.loadingScreenTextAnimated : undefined}>
+                            <Text
+                                {...getTextSizes({textPreset: textPresets.loadingScreenTitle})}
+                                textAlign="center"
+                                weight="regular"
+                                as="h1"
+                            >
+                                {currentTitle}
+                            </Text>
+                        </div>
+                    )}
+                    {currentDescription && (
+                        <div
+                            className={animateText ? styles.loadingScreenTextAnimated : undefined}
+                            style={{animationDelay: '200ms'}}
+                        >
+                            <Text2 textAlign="center" regular as="p" color={vars.colors.textSecondary}>
+                                {currentDescription}
+                            </Text2>
+                        </div>
+                    )}
+                </Stack>
+            </div>
+        </ResponsiveLayout>
+    );
+};
+
+type Props = {
+    variant: 'default' | 'brand';
+    isLoading?: boolean;
+    animateText?: boolean;
+    animateBackground?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+
+const BaseLoadingScreen = React.forwardRef<HTMLDivElement, Props>(
+    (
+        {
+            variant,
+            children,
+            isLoading = true,
+            animateText,
+            animateBackground,
+            onClose,
+            dataAttributes,
+            title,
+            description,
+            texts = [{title, description}],
+        },
+        ref
+    ) => {
+        const [inAnimationEnd, setInAnimationEnd] = React.useState(false);
+
+        // just in case the animationend event is not fired
+        React.useEffect(() => {
+            if (!isLoading) {
+                return;
+            }
+            const timeout = setTimeout(() => {
+                setInAnimationEnd(true);
+            }, styles.inOutAnimationMs);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }, [isLoading]);
+
+        const closeCalled = React.useRef(false);
+
+        const handleTransitionEnd = React.useCallback(() => {
+            if (!isLoading && !closeCalled.current) {
+                closeCalled.current = true;
+                onClose?.();
+            }
+        }, [isLoading, onClose]);
+
+        React.useEffect(() => {
+            if (isLoading) {
+                return;
+            }
+            if (!animateText && !animateBackground) {
+                onClose?.();
+                return;
+            }
+
+            // just in case the transitionend event is not fired
+            const timeout = setTimeout(() => {
+                handleTransitionEnd();
+            }, styles.inOutAnimationMs);
+            return () => {
+                clearTimeout(timeout);
+            };
+        }, [animateBackground, animateText, handleTransitionEnd, isLoading, onClose]);
+
+        const centerContent = !children;
+
+        useSetOverscrollColor(variant === 'brand' ? {topColor: vars.colors.backgroundBrandTop} : {});
+
+        return (
+            <ThemeVariant variant={variant}>
+                <div
+                    ref={ref}
+                    {...getPrefixedDataAttributes(dataAttributes)}
+                    className={classnames(styles.loadingScreen, styles.screenBackground[variant], {
+                        [styles.screenBackgroundFadeOut]: !isLoading && animateBackground,
+                        [styles.screenBackgroundAnimated]: animateBackground,
+                    })}
+                    style={{
+                        justifyContent: centerContent ? 'center' : 'space-between',
+                    }}
+                    onAnimationEnd={() => {
+                        setInAnimationEnd(true);
+                    }}
+                    onTransitionEnd={handleTransitionEnd}
+                >
+                    {children ? (
+                        <div className={styles.loadingScreenChildren}>{children}</div>
+                    ) : (
+                        <Spinner
+                            delay="0s"
+                            size={32}
+                            color={variant === 'brand' ? vars.colors.inverse : undefined}
+                        />
+                    )}
+                    <LoadingScreenTexts
+                        animateText={animateText}
+                        isLoading={isLoading}
+                        texts={texts}
+                        onClose={handleTransitionEnd}
+                    />
+                    {!centerContent && <div style={{height: 104}} />}
+                </div>
+                {/* needed for overscroll. TODO: review the case for brands with gradient like O2 */}
+                {isLoading && inAnimationEnd && <BackgroundColor isBrandVariant={variant === 'brand'} />}
+            </ThemeVariant>
+        );
+    }
+);
+
+type LoadingScreenProps = {
+    /** @deprecated use variant="brand" instead */
+    isInverse?: boolean;
+    variant?: 'default' | 'brand';
+    isLoading?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+
+export const LoadingScreen = React.forwardRef<HTMLDivElement, LoadingScreenProps>((props, ref) => {
+    return (
+        <BaseLoadingScreen
+            ref={ref}
+            {...props}
+            variant={props.variant ?? (props.isInverse ? 'brand' : 'default')}
+            dataAttributes={{'component-name': 'LoadingScreen', ...props.dataAttributes}}
+            animateBackground
+        />
+    );
+});
+
+type BrandLoadingAnimationProps = {
+    isLoading?: boolean;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+};
+
+const PulseBrandLogoAnimation = ({isLoading, onCloseStart, onCloseEnd}: BrandLoadingAnimationProps) => {
+    const {texts, t} = useTheme();
+    const [pulse, setPulse] = React.useState(true);
+
+    const handleAnimationIteration = () => {
+        if (!isLoading) {
+            onCloseStart?.();
+            setPulse(false);
+            onCloseEnd?.();
+        }
+    };
+
+    return (
+        <div
+            className={classnames(styles.logo, {[styles.pulseLogo]: pulse})}
+            onAnimationIteration={handleAnimationIteration}
+        >
+            <ScreenReaderOnly>
+                <div>{texts.loading || t(tokens.loading)}</div>
+            </ScreenReaderOnly>
+            <Logo size={128} />
+        </div>
+    );
+};
+
+const VivinhoLoadingAnimation = React.lazy(() => import('./vivinho-loading-animation'));
+
+const BrandLoadingAnimation = ({isLoading, onCloseStart, onCloseEnd}: BrandLoadingAnimationProps) => {
+    const {skinName} = useTheme();
+
+    if (skinName === VIVO_NEW_SKIN) {
+        return (
+            <React.Suspense fallback={null}>
+                <VivinhoLoadingAnimation
+                    isLoading={isLoading}
+                    onCloseStart={onCloseStart}
+                    onCloseEnd={onCloseEnd}
+                />
+            </React.Suspense>
+        );
+    }
+    return (
+        <PulseBrandLogoAnimation isLoading={isLoading} onCloseStart={onCloseStart} onCloseEnd={onCloseEnd} />
+    );
+};
+
+type BrandLoadingScreenProps = {
+    isLoading?: boolean;
+    onClose?: () => void;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+
+export const BrandLoadingScreen = React.forwardRef<HTMLDivElement, BrandLoadingScreenProps>(
+    ({isLoading = true, onClose, dataAttributes, ...textProps}, ref) => {
+        const {themeVariants} = useTheme();
+        const [isClosing, setIsClosing] = React.useState(false);
+        const logoClosedRef = React.useRef(false);
+        const textClosedRef = React.useRef(false);
+
+        const handleCloseStart = () => {
+            setIsClosing(true);
+        };
+
+        const handleCloseEnd = () => {
+            if (logoClosedRef.current && textClosedRef.current) {
+                onClose?.();
+            }
+        };
+
+        return (
+            <BaseLoadingScreen
+                ref={ref}
+                variant={
+                    themeVariants.brandLoadingScreen === 'inverse' ||
+                    themeVariants.brandLoadingScreen === 'brand'
+                        ? 'brand'
+                        : 'default'
+                }
+                {...textProps}
+                isLoading={isLoading || !isClosing}
+                onClose={() => {
+                    textClosedRef.current = true;
+                    handleCloseEnd();
+                }}
+                animateText
+                dataAttributes={{'component-name': 'BrandLoadingScreen', ...dataAttributes}}
+            >
+                <BrandLoadingAnimation
+                    isLoading={isLoading}
+                    onCloseStart={handleCloseStart}
+                    onCloseEnd={() => {
+                        logoClosedRef.current = true;
+                        handleCloseEnd();
+                    }}
+                />
+            </BaseLoadingScreen>
+        );
+    }
+);

package/src/logo-blau-shell.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as styles from './logo.css';
+import {calcInlineVars} from './logo-common';
+import {applyCssVars} from './utils/css';
+
+import type {ByBreakpoint} from './utils/types';
+import type {LogoType} from './logo-common';
+
+type Props = {
+    size: ByBreakpoint<number>;
+    type: LogoType;
+    children: React.ReactNode;
+};
+
+const BlauLogoShell = ({size, type, children}: Props): JSX.Element => {
+    const viewBox = type === 'imagotype' ? '0 0 138 72' : type === 'vertical' ? '0 0 73 72' : '0 0 72 72';
+
+    return (
+        <svg
+            className={styles.svg}
+            style={applyCssVars(calcInlineVars(size))}
+            viewBox={viewBox}
+            role="presentation"
+        >
+            {children}
+        </svg>
+    );
+};
+
+export default BlauLogoShell;

package/src/logo-blau.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {getBlauSkin} from './skins/blau';
+
+import type {LogoImageProps} from './logo-common';
+
+const BlauLogoImage = ({type, isDarkMode, themeVariant, color: colorProp}: LogoImageProps): JSX.Element => {
+    const {colors} = getBlauSkin();
+    const color =
+        colorProp ||
+        (isDarkMode
+            ? colors.brand
+            : {
+                  default: colors.brand,
+                  alternative: colors.brand,
+                  brand: colors.neutralHighNegative,
+                  media: colors.neutralHighNegative,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+    const colorSecondary =
+        colorProp ||
+        (isDarkMode
+            ? colors.promo
+            : {
+                  default: colors.promo,
+                  alternative: colors.promo,
+                  brand: colors.promo,
+                  media: colors.promo,
+                  negative: colors.neutralHighNegative,
+              }[themeVariant]);
+
+    if (type === 'vertical') {
+        return (
+            <g fill={color}>
+                <path d="M56.42 52.2003H18.2V63.0003H56.42V52.2003Z" fill={colorSecondary} />
+                <path d="M38.8069 36.431H35.0651V31.658H38.8069C40.7615 31.658 41.5432 32.865 41.5432 34.0171C41.5432 35.2789 40.7615 36.431 38.8069 36.431ZM35.121 19.0948H37.9132C40.6496 19.0948 40.4821 23.0447 37.9132 23.0447H35.121V19.0948ZM49.6963 26.2267C52.7119 25.1844 54.3312 22.3864 54.3871 19.369C54.5546 13.7182 50.0316 9 44.3355 9H18.2V19.0398H21.8859V36.7602H18.2V46.8H44.2237C50.925 46.8 56.1188 42.3013 56.3981 35.8276C56.6773 30.89 54.2756 27.9275 49.6963 26.2267Z" />
+            </g>
+        );
+    }
+
+    if (type === 'imagotype') {
+        return (
+            <g fill={color}>
+                <path d="M135.557 54.5729H6.16162V65.184H135.557V54.5729Z" fill={colorSecondary} />
+                <path d="M37.7269 25.9921C42.1878 27.7129 44.5575 30.6343 44.2869 35.6127C44.0163 42.0913 38.9696 46.5732 32.3623 46.5732H6.83155V36.5296H10.4229V18.8042H6.83155V8.75793H32.47C38.0579 8.75793 42.5215 13.5131 42.3507 19.1299C42.2929 22.1512 40.6877 24.9701 37.7269 25.9921ZM26.1359 17.9477H22.7942V23.2703H26.1359C29.4277 23.2703 29.6484 17.9477 26.1359 17.9477ZM30.3393 34.0259C30.3393 32.4812 29.3437 30.9443 27.0449 30.9443H22.7915V37.1076H27.0423C29.2806 37.1102 30.3393 35.5917 30.3393 34.0259Z" />
+                <path d="M45.2905 8.75794V18.8042H48.8477V46.5732H61.8442V8.75794H45.2905Z" />
+                <path d="M99.2576 46.5732H87.0676L86.7996 43.7674C84.8108 46.1975 81.8553 47.0592 79.0705 47.117C60.5884 47.3325 60.5884 16.6525 79.0705 16.8627C81.8553 16.8627 84.8108 17.727 86.7996 20.1572L87.0676 17.3435H99.2576V46.5732ZM86.3188 31.9846C86.3188 26.3126 78.3191 26.3704 78.3191 31.9846C78.3191 37.6067 86.3188 37.6619 86.3188 31.9846Z" />
+                <path d="M134.858 17.3435H121.972V33.1222C121.972 35.2844 120.359 36.309 118.748 36.309C117.13 36.309 115.843 35.2345 115.843 33.1774V17.3435H102.949V33.2378C102.949 41.072 106.009 46.9043 114.661 47.1171C117.506 47.1696 120.467 46.2501 122.5 43.6571L122.773 46.5733L134.861 46.5917L134.858 17.3435Z" />
+            </g>
+        );
+    }
+
+    return (
+        <g fill={color}>
+            <path d="M55.8 52.2003H18V63.0003H55.8V52.2003Z" fill={colorSecondary} />
+            <path d="M38.3805 36.431H34.6798V31.658H38.3805C40.3136 31.658 41.0868 32.865 41.0868 34.0171C41.0868 35.2789 40.3136 36.431 38.3805 36.431ZM34.7351 19.0948H37.4966C40.2029 19.0948 40.0373 23.0447 37.4966 23.0447H34.7351V19.0948ZM49.1503 26.2267C52.1327 25.1844 53.7342 22.3864 53.7895 19.369C53.9552 13.7182 49.4819 9 43.8483 9H18V19.0398H21.6454V36.7602H18V46.8H43.7377C50.3654 46.8 55.5022 42.3013 55.7784 35.8276C56.0545 30.89 53.6792 27.9275 49.1503 26.2267Z" />
+        </g>
+    );
+};
+
+export default BlauLogoImage;