@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/feedback.tsx

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

@@ -0,0 +1,156 @@
+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',
+    }),
+]);