@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/loading-bar.css.ts

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

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

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

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

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

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