@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/feedback.tsx

@@ -1,432 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useTheme, useScreenSize} from './hooks';
-import ButtonFixedFooterLayout from './button-fixed-footer-layout';
-import {VIVO_NEW_SKIN, VIVO_SKIN} from './skins/constants';
-import {useSetOverscrollColor} from './overscroll-color-context';
-import IconSuccess from './icons/icon-success';
-import IconSuccessVivo from './icons/icon-success-vivo';
-import IconError from './icons/icon-error';
-import IconInfo from './icons/icon-info';
-import {
-    isWebViewBridgeAvailable,
-    requestVibration as requestVibrationNative,
-} from '@tef-novum/webview-bridge';
-import {isRunningAcceptanceTest} from './utils/platform';
-import {Text6, Text2, Text3} from './text';
-import Box from './box';
-import {InternalBoxed} from './boxed';
-import ResponsiveLayout, {ResetResponsiveLayout} from './responsive-layout';
-import Stack from './stack';
-import classnames from 'classnames';
-import ButtonGroup from './button-group';
-import {vars} from './skins/skin-contract.css';
-import * as styles from './feedback.css';
-import IconSuccessVivoNew from './icons/icon-success-vivo-new';
-
-import type {Theme} from './theme';
-import type {DataAttributes, IconProps} from './utils/types';
-import type {ButtonGroupProps} from './button-group';
-
-const areAnimationsSupported = (platformOverrides: Theme['platformOverrides']) =>
-    !isRunningAcceptanceTest(platformOverrides);
-
-const checkHasButtons = ({primaryButton, secondaryButton}: FeedbackButtonsProps) =>
-    !!primaryButton || !!secondaryButton;
-
-type HapticFeedback = 'error' | 'success';
-
-const requestVibration = (type: HapticFeedback) => {
-    if (isWebViewBridgeAvailable()) {
-        requestVibrationNative(type).catch(() => {});
-    }
-};
-
-const useHapticFeedback = (type?: HapticFeedback) => {
-    React.useEffect(() => {
-        let timeoutId: NodeJS.Timeout;
-        if (type === 'success') {
-            timeoutId = setTimeout(() => requestVibration('success'), 700);
-        }
-
-        if (type === 'error') {
-            timeoutId = setTimeout(() => requestVibration('error'), 1000);
-        }
-
-        return () => {
-            clearTimeout(timeoutId);
-        };
-    }, [type]);
-};
-
-const renderFeedbackBody = (
-    {
-        asset,
-        title,
-        description,
-        extra,
-    }: Pick<FeedbackScreenProps, 'asset' | 'title' | 'description' | 'extra'>,
-    animateText: boolean
-) => {
-    const normalizedDescription =
-        description && Array.isArray(description) ? (
-            <Stack space={16}>
-                {description.map((paragraph, i) => (
-                    <p key={i}>{paragraph}</p>
-                ))}
-            </Stack>
-        ) : (
-            description
-        );
-    return (
-        <Stack space={24}>
-            <div className={styles.assetContainer} data-testid="icon">
-                {asset}
-            </div>
-            <Stack space={16} className={classnames(styles.feedbackData)}>
-                <div className={classnames(animateText && styles.feedbackTextAppearFast)} data-testid="title">
-                    <Text6 as="h1">{title}</Text6>
-                </div>
-
-                {normalizedDescription && (
-                    <div
-                        className={classnames(animateText && styles.feedbackTextAppearMedium)}
-                        data-testid="description"
-                    >
-                        {normalizedDescription && (
-                            <Text3 regular color={vars.colors.textSecondary}>
-                                {normalizedDescription}
-                            </Text3>
-                        )}
-                    </div>
-                )}
-
-                {extra && (
-                    <div
-                        className={classnames(
-                            animateText &&
-                                (normalizedDescription
-                                    ? styles.feedbackTextAppearSlow
-                                    : styles.feedbackTextAppearMedium)
-                        )}
-                        data-testid="slot"
-                    >
-                        {extra}
-                    </div>
-                )}
-            </Stack>
-        </Stack>
-    );
-};
-
-const renderInlineFeedbackBody = (feedbackBody: React.ReactNode, buttons: ButtonGroupProps) => {
-    const hasButtons = checkHasButtons(buttons);
-    return (
-        <Stack space={{desktop: 32, mobile: 24}}>
-            {feedbackBody}
-            {hasButtons && <ButtonGroup {...buttons} />}
-        </Stack>
-    );
-};
-
-const renderFeedback = ({
-    isBrandVariant,
-    body,
-    imageFit,
-    imageUrl,
-    dataAttributes,
-}: {
-    isBrandVariant: boolean;
-    body: React.ReactNode;
-    imageFit?: 'fit' | 'fill';
-    imageUrl?: string;
-    dataAttributes?: DataAttributes;
-}) => (
-    <InternalBoxed
-        borderRadius={vars.borderRadii.legacyDisplay}
-        desktopOnly
-        variant={isBrandVariant ? 'brand' : 'default'}
-        dataAttributes={dataAttributes}
-    >
-        <div className={styles.desktopContainer}>
-            <div className={styles.desktopContent}>{body}</div>
-            {imageUrl && (
-                <div
-                    className={styles.desktopImage}
-                    data-testid="image"
-                    style={{
-                        backgroundImage: `url(${imageUrl})`,
-                        backgroundPosition: imageFit === 'fit' ? 'bottom right' : 'center right',
-                        backgroundRepeat: 'no-repeat',
-                        backgroundSize: imageFit === 'fit' ? 'contain' : 'cover',
-                        flex: 1,
-                        maxWidth: 600,
-                    }}
-                />
-            )}
-        </div>
-    </InternalBoxed>
-);
-
-const FeedbackScreenOverscrollColor = () => {
-    useSetOverscrollColor({
-        topColor: vars.colors.backgroundBrandTop,
-        bottomColor: 'transparent',
-    });
-    return null;
-};
-
-type FeedbackButtonsProps = ButtonGroupProps;
-
-interface FeedbackProps extends FeedbackButtonsProps {
-    title: string;
-    description?: string | ReadonlyArray<string>;
-    extra?: React.ReactNode;
-    unstable_inlineInDesktop?: boolean;
-    dataAttributes?: DataAttributes;
-}
-
-interface AssetFeedbackProps extends FeedbackProps {
-    imageUrl?: string;
-    imageFit?: 'fit' | 'fill'; // defaults to 'fill'
-}
-
-interface FeedbackScreenProps extends AssetFeedbackProps {
-    hapticFeedback?: HapticFeedback;
-    asset?: React.ReactNode;
-    animateText?: boolean;
-    /**
-     * @deprecated use variant="brand" instead
-     */
-    isInverse?: boolean;
-    variant?: 'default' | 'brand';
-}
-
-export const FeedbackScreen = ({
-    title,
-    description,
-    extra,
-    primaryButton,
-    secondaryButton,
-    link,
-    hapticFeedback,
-    asset,
-    animateText = false,
-    isInverse = false,
-    variant = 'default',
-    unstable_inlineInDesktop,
-    imageUrl,
-    imageFit,
-    dataAttributes,
-}: FeedbackScreenProps): JSX.Element => {
-    useHapticFeedback(hapticFeedback);
-    const {platformOverrides, isDarkMode} = useTheme();
-    const {isTabletOrSmaller} = useScreenSize();
-
-    const hasButtons = checkHasButtons({primaryButton, secondaryButton, link});
-
-    const feedbackBody = renderFeedbackBody(
-        {asset, title, description, extra},
-        animateText && areAnimationsSupported(platformOverrides)
-    );
-
-    if (!isTabletOrSmaller && unstable_inlineInDesktop) {
-        return renderInlineFeedbackBody(feedbackBody, {
-            primaryButton,
-            secondaryButton,
-            link,
-        });
-    }
-
-    const isBrandVariant = variant === 'brand' || isInverse;
-
-    return (
-        <div style={{position: 'relative'}}>
-            <ResponsiveLayout>
-                {isBrandVariant && <FeedbackScreenOverscrollColor />}
-                <Box paddingTop={{desktop: 64, mobile: 0}}>
-                    {renderFeedback({
-                        isBrandVariant,
-                        body: (
-                            // We need this reset because the ButtonFixedFooterLayout adds a ResponsiveLayout that
-                            // doesn't expand when nested in mobile. This can cause double margin when footer is not fixed
-                            <ResetResponsiveLayout skipDesktop>
-                                <ButtonFixedFooterLayout
-                                    isFooterVisible={hasButtons}
-                                    button={primaryButton}
-                                    secondaryButton={secondaryButton}
-                                    link={link}
-                                    footerBgColor={
-                                        isBrandVariant && !isDarkMode
-                                            ? vars.colors.backgroundBrandBottom
-                                            : undefined
-                                    }
-                                    containerBgColor={
-                                        isBrandVariant ? vars.colors.backgroundBrand : vars.colors.background
-                                    }
-                                >
-                                    <ResponsiveLayout>
-                                        <div className={styles.container}>
-                                            <div
-                                                className={classnames(styles.innerContainer, {
-                                                    [styles.innerContainerWithButtons]:
-                                                        primaryButton || secondaryButton || link,
-                                                })}
-                                            >
-                                                {feedbackBody}
-                                            </div>
-                                        </div>
-                                    </ResponsiveLayout>
-                                </ButtonFixedFooterLayout>
-                            </ResetResponsiveLayout>
-                        ),
-                        imageFit,
-                        imageUrl,
-                        dataAttributes,
-                    })}
-                </Box>
-            </ResponsiveLayout>
-        </div>
-    );
-};
-
-export const SuccessFeedbackScreen = ({dataAttributes, ...props}: AssetFeedbackProps): JSX.Element => {
-    const {isTabletOrSmaller} = useScreenSize();
-    const {skinName, themeVariants} = useTheme();
-
-    return (
-        <FeedbackScreen
-            {...props}
-            variant={
-                (themeVariants.successFeedback === 'brand' || themeVariants.successFeedback === 'inverse') &&
-                (!props.unstable_inlineInDesktop || isTabletOrSmaller)
-                    ? 'brand'
-                    : 'default'
-            }
-            hapticFeedback="success"
-            asset={
-                skinName === VIVO_SKIN ? (
-                    <IconSuccessVivo size="100%" />
-                ) : skinName === VIVO_NEW_SKIN ? (
-                    <IconSuccessVivoNew size="100%" />
-                ) : (
-                    <IconSuccess size="100%" />
-                )
-            }
-            animateText
-            imageUrl={props.imageUrl}
-            imageFit={props.imageFit}
-            dataAttributes={{
-                'component-name': 'SuccessFeedbackScreen',
-                testid: 'SuccessFeedbackScreen',
-                ...dataAttributes,
-            }}
-        />
-    );
-};
-
-interface ErrorFeedbackScreenProps extends FeedbackProps {
-    errorReference?: string;
-}
-
-export const ErrorFeedbackScreen = ({
-    errorReference,
-    dataAttributes,
-    ...otherProps
-}: ErrorFeedbackScreenProps): JSX.Element => {
-    return (
-        <FeedbackScreen
-            {...otherProps}
-            hapticFeedback="error"
-            asset={<IconError size="100%" />}
-            animateText
-            dataAttributes={{
-                'component-name': 'ErrorFeedbackScreen',
-                testid: 'ErrorFeedbackScreen',
-                ...dataAttributes,
-            }}
-            extra={
-                <Stack space={16}>
-                    {otherProps.extra}
-                    {errorReference && (
-                        <Text2 color={vars.colors.textSecondary} regular>
-                            {errorReference}
-                        </Text2>
-                    )}
-                </Stack>
-            }
-        />
-    );
-};
-
-interface InfoFeedbackScreenProps extends FeedbackProps {
-    Icon?: (props: IconProps) => JSX.Element;
-}
-
-export const InfoFeedbackScreen = ({
-    dataAttributes,
-    Icon = IconInfo,
-    ...props
-}: InfoFeedbackScreenProps): JSX.Element => {
-    return (
-        <FeedbackScreen
-            dataAttributes={{
-                'component-name': 'InfoFeedbackScreen',
-                testid: 'InfoFeedbackScreen',
-                ...dataAttributes,
-            }}
-            asset={<Icon size="100%" color={vars.colors.brand} />}
-            {...props}
-        />
-    );
-};
-
-export const SuccessFeedback = ({
-    title,
-    description,
-    extra,
-    primaryButton,
-    secondaryButton,
-    link,
-    imageUrl,
-    imageFit,
-    dataAttributes,
-}: AssetFeedbackProps): JSX.Element => {
-    useHapticFeedback('success');
-    const {skinName, platformOverrides, themeVariants} = useTheme();
-
-    const asset =
-        skinName === VIVO_SKIN ? (
-            <IconSuccessVivo size="100%" />
-        ) : skinName === VIVO_NEW_SKIN ? (
-            <IconSuccessVivoNew size="100%" />
-        ) : (
-            <IconSuccess size="100%" />
-        );
-    const feedbackBody = renderFeedbackBody(
-        {asset, title, description, extra},
-        areAnimationsSupported(platformOverrides)
-    );
-    const inlineFeedbackBody = renderInlineFeedbackBody(feedbackBody, {
-        primaryButton,
-        secondaryButton,
-        link,
-    });
-
-    const isBrandVariant =
-        themeVariants.successFeedback === 'inverse' || themeVariants.successFeedback === 'brand';
-
-    return renderFeedback({
-        isBrandVariant,
-        body: (
-            <div className={isBrandVariant ? styles.backgroundBrand : undefined}>
-                <Box paddingX={{mobile: 16, tablet: 24, desktop: 0}} paddingBottom={{desktop: 0, mobile: 48}}>
-                    <div className={styles.successFeedbackContainer}>{inlineFeedbackBody}</div>
-                </Box>
-            </div>
-        ),
-        imageFit,
-        imageUrl,
-        dataAttributes: {'component-name': 'SuccessFeedback', testid: 'SuccessFeedback', ...dataAttributes},
-    });
-};

package/src/file-upload.css.ts

@@ -1,156 +0,0 @@
-import {style, keyframes, styleVariants, createVar} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-import {browserDefaultFocusOutline} from './text-field-components.css';
-
-export const disabled = style({
-    opacity: 0.5,
-});
-
-const dropZoneBase = style([
-    sprinkles({
-        borderRadius: skinVars.borderRadii.container,
-        paddingY: 32,
-        paddingX: 24,
-    }),
-    {
-        position: 'relative',
-        textAlign: 'center',
-        transition: 'border 200ms ease, background-color 200ms ease',
-        selectors: {
-            [`&:not(.${disabled})`]: {
-                cursor: 'pointer',
-            },
-        },
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                paddingTop: 24,
-                paddingBottom: 24,
-                paddingLeft: 16,
-                paddingRight: 16,
-            },
-        },
-    },
-]);
-
-const dropZoneBorderVar = createVar();
-const dropZoneBackgroundVar = createVar();
-const dropZoneHoverBorderVar = createVar();
-const dropZoneHoverBackgroundVar = createVar();
-const dropZoneActiveBorderVar = createVar();
-const dropZoneActiveBackgroundVar = createVar();
-
-export const dropZoneContainerBase = style([
-    dropZoneBase,
-    {
-        border: `1px dashed ${dropZoneBorderVar}`,
-        backgroundColor: dropZoneBackgroundVar,
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    [`&:hover:not(.${disabled})`]: {
-                        border: `1px solid ${dropZoneHoverBorderVar}`,
-                        backgroundColor: dropZoneHoverBackgroundVar,
-                    },
-                },
-            },
-        },
-    },
-]);
-
-export const dropZoneVariant = styleVariants({
-    default: {
-        vars: {
-            [dropZoneBorderVar]: skinVars.colors.inputBorder,
-            [dropZoneBackgroundVar]: 'transparent',
-            [dropZoneHoverBorderVar]: skinVars.colors.borderSelected,
-            [dropZoneHoverBackgroundVar]: skinVars.colors.backgroundDropZoneHover,
-            [dropZoneActiveBorderVar]: skinVars.colors.borderSelected,
-            [dropZoneActiveBackgroundVar]: skinVars.colors.backgroundDropZoneDragover,
-        },
-    },
-    alternative: {
-        vars: {
-            [dropZoneBorderVar]: skinVars.colors.inputBorder,
-            [dropZoneBackgroundVar]: skinVars.colors.backgroundContainer,
-            [dropZoneHoverBorderVar]: skinVars.colors.borderSelected,
-            [dropZoneHoverBackgroundVar]: skinVars.colors.backgroundDropZoneHover,
-            [dropZoneActiveBorderVar]: skinVars.colors.borderSelected,
-            [dropZoneActiveBackgroundVar]: skinVars.colors.backgroundDropZoneDragover,
-        },
-    },
-    brand: {
-        vars: {
-            [dropZoneBorderVar]: skinVars.colors.inputBorderBrand,
-            [dropZoneBackgroundVar]: 'transparent',
-            [dropZoneHoverBorderVar]: skinVars.colors.controlActivatedBrand,
-            [dropZoneHoverBackgroundVar]: skinVars.colors.backgroundDropZoneBrandHover,
-            [dropZoneActiveBorderVar]: skinVars.colors.controlActivatedBrand,
-            [dropZoneActiveBackgroundVar]: skinVars.colors.backgroundDropZoneBrandDragover,
-        },
-    },
-    negative: {
-        vars: {
-            [dropZoneBorderVar]: skinVars.colors.inputBorderNegative,
-            [dropZoneBackgroundVar]: 'transparent',
-            [dropZoneHoverBorderVar]: skinVars.colors.controlActivatedNegative,
-            [dropZoneHoverBackgroundVar]: skinVars.colors.backgroundDropZoneNegativeHover,
-            [dropZoneActiveBorderVar]: skinVars.colors.controlActivatedNegative,
-            [dropZoneActiveBackgroundVar]: skinVars.colors.backgroundDropZoneNegativeDragover,
-        },
-    },
-    media: {
-        vars: {
-            [dropZoneBorderVar]: skinVars.colors.inputBorderNegative,
-            [dropZoneBackgroundVar]: 'transparent',
-            [dropZoneHoverBorderVar]: skinVars.colors.inputBorderNegative,
-            [dropZoneHoverBackgroundVar]: skinVars.colors.backgroundDropZoneMediaHover,
-            [dropZoneActiveBorderVar]: skinVars.colors.inputBorderNegative,
-            [dropZoneActiveBackgroundVar]: skinVars.colors.backgroundDropZoneMediaDragover,
-        },
-    },
-});
-
-export const dropZoneActive = style({
-    border: `1px solid ${dropZoneActiveBorderVar}`,
-    backgroundColor: dropZoneActiveBackgroundVar,
-});
-
-const scaleAnimation = keyframes({
-    '0%': {
-        transform: 'scale(1)',
-    },
-    '100%': {
-        transform: 'scale(1.08)',
-    },
-});
-
-export const assetScaleActive = style({
-    animation: `${scaleAnimation} 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards`,
-});
-
-export const dropZoneButton = style({
-    position: 'absolute',
-    inset: 0,
-    width: '100%',
-    height: '100%',
-    padding: 0,
-    margin: 0,
-    border: 0,
-    background: 'transparent',
-    cursor: 'inherit',
-    outline: 'none',
-    selectors: {
-        '&:focus-visible': {
-            outline: browserDefaultFocusOutline,
-        },
-    },
-});
-
-export const centeredButton = style([
-    sprinkles({
-        display: 'flex',
-        justifyContent: 'center',
-    }),
-]);