@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/drawer.tsx

@@ -1,304 +0,0 @@
-// https://www.figma.com/design/NfM16IJ4ffPVEdiFbtU0Lu/%F0%9F%94%B8-Drawer-Specs?node-id=10-5397&t=58YG59t526tkk7dP-1
-'use client';
-import * as React from 'react';
-import Stack from './stack';
-import {getTextSizesWithWeight, Text3, Text4, Text} from './text';
-import {vars} from './skins/skin-contract.css';
-import {IconButton} from './icon-button';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import * as styles from './drawer.css';
-import classnames from 'classnames';
-import {Portal} from './portal';
-import {useIsInViewport, useScreenSize, useTheme} from './hooks';
-import FocusTrap from './focus-trap';
-import {useSetModalStateEffect} from './modal-context-provider';
-import ButtonLayout from './button-layout';
-import {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
-import Divider from './divider';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as tokens from './text-tokens';
-
-import type {DataAttributes, HeadingType, TrackingEvent} from './utils/types';
-
-/**
- * Renders divider or a div with transparent border to avoid the small but noticeable layout shift on scroll
- */
-const MaybeDivider = ({show}: {show: boolean}) =>
-    show ? <Divider /> : <div style={{borderBottom: '1px solid transparent'}} />;
-
-/**
- * Restores the focus to the element that was focused before the Drawer was opened
- */
-const useRestoreFocus = () => {
-    const activeElementRef = React.useRef<HTMLElement | null>(document.activeElement as HTMLElement);
-    React.useEffect(() => {
-        const elementToFocus = activeElementRef.current;
-        return () => {
-            elementToFocus?.focus?.();
-        };
-    }, []);
-};
-
-type DrawerLayoutProps = {
-    width?: number;
-    children: React.ReactNode;
-    onClose: () => void;
-    onDismiss?: () => void;
-};
-
-type DrawerPropsRef = {
-    close: () => Promise<void>;
-    dismiss: () => Promise<void>;
-};
-
-const DrawerLayout = React.forwardRef<DrawerPropsRef, DrawerLayoutProps>(
-    ({width, children, onClose, onDismiss}, ref) => {
-        useSetModalStateEffect();
-        useRestoreFocus();
-        const {isMobile} = useScreenSize();
-        const [isOpen, setIsOpen] = React.useState(false);
-        const widthStyle = isMobile ? 'auto' : width;
-
-        const open = React.useCallback((node: HTMLDivElement) => {
-            if (node) {
-                // small delay to allow the Portal to be mounted
-                setTimeout(() => {
-                    setIsOpen(true);
-                }, 50);
-            }
-        }, []);
-
-        const close = React.useCallback(() => {
-            setIsOpen(false);
-            return new Promise((resolve) => {
-                setTimeout(resolve, styles.ANIMATION_DURATION_MS);
-            }).then(onClose);
-        }, [onClose]);
-
-        const dismiss = React.useCallback(() => {
-            return close().then(() => onDismiss?.());
-        }, [onDismiss, close]);
-
-        React.useImperativeHandle(ref, () => ({close, dismiss}));
-
-        React.useEffect(() => {
-            const handleKeyDown = (event: KeyboardEvent) => {
-                if (event.key === 'Escape') {
-                    dismiss();
-                }
-            };
-            document.addEventListener('keydown', handleKeyDown);
-            return () => {
-                document.removeEventListener('keydown', handleKeyDown);
-            };
-        }, [dismiss]);
-
-        return (
-            <Portal>
-                <FocusTrap>
-                    {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-                    <div
-                        data-testid="drawerOverlay"
-                        onClick={onDismiss ? dismiss : undefined}
-                        className={classnames(
-                            styles.overlay,
-                            isOpen ? styles.overlayOpen : styles.overlayClosed
-                        )}
-                    />
-                    <div
-                        data-testid="drawerLayout"
-                        ref={open}
-                        style={{width: widthStyle}}
-                        className={classnames(styles.container, isOpen ? styles.open : styles.closed)}
-                    >
-                        {children}
-                    </div>
-                </FocusTrap>
-            </Portal>
-        );
-    }
-);
-
-type ButtonProps = {
-    text: string;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    trackEvent?: boolean;
-    onPress?: () => unknown;
-    disabled?: boolean;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    'aria-current'?: React.AriaAttributes['aria-current'];
-};
-
-type DrawerProps = {
-    title?: string;
-    subtitle?: string;
-    description?: string;
-    titleAs?: HeadingType;
-    dismissLabel?: string;
-    /**
-     * this handler is mandatory. You should unmount the Drawer component on close.
-     */
-    onClose: () => void;
-    /**
-     * set this handler to enable dismiss:
-     * - touching "X"
-     * - touching overlay
-     * - pressing ESC
-     */
-    onDismiss?: () => void;
-    children?: React.ReactNode;
-    /**
-     * width is ignored in mobile viewport
-     */
-    width?: number;
-    button?: ButtonProps;
-    secondaryButton?: ButtonProps;
-    buttonLink?: ButtonProps;
-    dataAttributes?: DataAttributes;
-};
-
-const Drawer = ({
-    title,
-    subtitle,
-    description,
-    titleAs = 'h2',
-    dismissLabel,
-    width,
-    onClose,
-    onDismiss,
-    children,
-    button,
-    secondaryButton,
-    buttonLink,
-    dataAttributes,
-}: DrawerProps): JSX.Element => {
-    const layoutRef = React.useRef<DrawerPropsRef>(null);
-    const hasActions = !!(button || secondaryButton || buttonLink);
-    const [scrollableParentElement, setScrollableParentElement] = React.useState<HTMLElement | null>(null);
-    const topScrollSignalRef = React.useRef<HTMLDivElement>(null);
-    const bottomScrollSignalRef = React.useRef<HTMLDivElement>(null);
-    const {t, texts, textPresets} = useTheme();
-
-    const handleButtonPress = (pressHandlerFromProps?: () => unknown) => {
-        layoutRef.current?.close().then(() => pressHandlerFromProps?.());
-    };
-
-    const showTitleDivider = !useIsInViewport(topScrollSignalRef, true, {
-        root: scrollableParentElement,
-    });
-
-    const showButtonsDivider = !useIsInViewport(bottomScrollSignalRef, true, {
-        rootMargin: '1px', // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
-        root: scrollableParentElement,
-    });
-
-    return (
-        <DrawerLayout width={width} ref={layoutRef} onClose={onClose} onDismiss={onDismiss}>
-            <section
-                role="dialog"
-                aria-modal="true"
-                className={styles.drawer}
-                ref={setScrollableParentElement}
-                {...getPrefixedDataAttributes(dataAttributes, 'Drawer')}
-            >
-                {onDismiss && (
-                    <div className={styles.closeButtonContainer}>
-                        <IconButton
-                            dataAttributes={{testid: 'dismissButton'}}
-                            onPress={() => layoutRef.current?.dismiss()}
-                            Icon={IconCloseRegular}
-                            aria-label={dismissLabel || texts.modalClose || t(tokens.modalClose)}
-                            type="neutral"
-                            backgroundType="transparent"
-                        />
-                    </div>
-                )}
-                {title && (
-                    <div className={classnames(styles.titleContainer, styles.horizontalPadding)}>
-                        <Text
-                            {...getTextSizesWithWeight({textPreset: textPresets.drawerTitle})}
-                            as={titleAs}
-                            dataAttributes={{testid: 'title'}}
-                        >
-                            {title}
-                        </Text>
-                    </div>
-                )}
-                <MaybeDivider show={showTitleDivider} />
-                <div className={styles.scrollableSection}>
-                    <div ref={topScrollSignalRef} />
-                    <div className={styles.horizontalPadding}>
-                        <Stack space={16}>
-                            {subtitle && (
-                                <Text4 regular dataAttributes={{testid: 'subtitle'}}>
-                                    {subtitle}
-                                </Text4>
-                            )}
-                            {description && (
-                                <Text3
-                                    regular
-                                    color={vars.colors.textSecondary}
-                                    dataAttributes={{testid: 'description'}}
-                                >
-                                    {description}
-                                </Text3>
-                            )}
-                            {children}
-                        </Stack>
-                    </div>
-                    {!hasActions && <div className={styles.bottomPadding} />}
-                    <div ref={bottomScrollSignalRef} />
-                </div>
-                <MaybeDivider show={hasActions && showButtonsDivider} />
-                {hasActions && (
-                    <div className={styles.buttonsLayoutContainer}>
-                        <ButtonLayout
-                            primaryButton={
-                                button && (
-                                    <ButtonPrimary
-                                        trackEvent={button.trackEvent}
-                                        trackingEvent={button.trackingEvent}
-                                        onPress={() => handleButtonPress(button.onPress)}
-                                        disabled={button.disabled}
-                                    >
-                                        {button.text}
-                                    </ButtonPrimary>
-                                )
-                            }
-                            secondaryButton={
-                                secondaryButton && (
-                                    <ButtonSecondary
-                                        trackEvent={secondaryButton.trackEvent}
-                                        trackingEvent={secondaryButton.trackingEvent}
-                                        onPress={() => handleButtonPress(secondaryButton.onPress)}
-                                        disabled={secondaryButton.disabled}
-                                    >
-                                        {secondaryButton.text}
-                                    </ButtonSecondary>
-                                )
-                            }
-                            link={
-                                buttonLink && (
-                                    <ButtonLink
-                                        trackEvent={buttonLink.trackEvent}
-                                        trackingEvent={buttonLink.trackingEvent}
-                                        onPress={() => handleButtonPress(buttonLink.onPress)}
-                                        bleedY
-                                        disabled={buttonLink.disabled}
-                                    >
-                                        {buttonLink.text}
-                                    </ButtonLink>
-                                )
-                            }
-                        />
-                    </div>
-                )}
-            </section>
-        </DrawerLayout>
-    );
-};
-
-export default Drawer;

package/src/email-field.tsx

@@ -1,76 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useFieldProps} from './form-context';
-import {useTheme} from './hooks';
-import {TextFieldBaseAutosuggest} from './text-field-base';
-import * as tokens from './text-tokens';
-
-import type {CommonFormFieldProps} from './text-field-base';
-
-// matches strings like: "x@x.x" (where "x" is any string without spaces)
-const RE_EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-export interface EmailFieldProps extends CommonFormFieldProps {
-    onChangeValue?: (value: string, rawValue: string) => void;
-    getSuggestions?: (value: string) => Array<string>;
-}
-
-const EmailField = ({
-    disabled,
-    error,
-    helperText,
-    name,
-    label,
-    optional,
-    validate: validateProp,
-    validateOnBlurInsideForm,
-    onChange,
-    onChangeValue,
-    onBlur,
-    value,
-    autoComplete = 'email',
-    defaultValue,
-    dataAttributes,
-    ...rest
-}: EmailFieldProps): JSX.Element => {
-    const {texts, t} = useTheme();
-
-    const validate = (value: string | undefined, rawValue: string) => {
-        if (!RE_EMAIL.test(value ?? '')) {
-            return texts.formEmailError || t(tokens.formEmailError);
-        }
-        return validateProp?.(value, rawValue);
-    };
-
-    const processValue = (value: string) => value.trim();
-
-    const fieldProps = useFieldProps({
-        name,
-        label,
-        value,
-        defaultValue,
-        processValue,
-        helperText,
-        optional,
-        error,
-        disabled,
-        onBlur,
-        validate,
-        validateOnBlurInsideForm,
-        onChange,
-        onChangeValue,
-    });
-
-    return (
-        <TextFieldBaseAutosuggest
-            {...rest}
-            {...fieldProps}
-            type="email"
-            inputMode="email"
-            autoComplete={autoComplete}
-            dataAttributes={{'component-name': 'EmailField', testid: 'EmailField', ...dataAttributes}}
-        />
-    );
-};
-
-export default EmailField;

package/src/empty-state-card.css.ts

@@ -1,40 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {sprinkles} from './sprinkles.css';
-
-export const container = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            maxWidth: 392,
-        },
-    },
-});
-
-export const image = style([
-    sprinkles({
-        display: 'block', // to avoid letter's descenders bottom space
-        height: 64,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                height: 80,
-            },
-        },
-    },
-]);
-
-export const assetContainer = style([
-    sprinkles({
-        width: 48,
-        height: 48,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                width: 56,
-                height: 56,
-            },
-        },
-    },
-]);

package/src/empty-state-card.tsx

@@ -1,92 +0,0 @@
-'use client';
-import * as React from 'react';
-import Box from './box';
-import {Boxed} from './boxed';
-import {useTheme} from './hooks';
-import Stack from './stack';
-import {Text2, Text, useTextPresetSizes} from './text';
-import ButtonGroup from './button-group';
-import * as styles from './empty-state-card.css';
-import {vars} from './skins/skin-contract.css';
-
-import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
-import type {DataAttributes, HeadingType, RendersNullableElement} from './utils/types';
-
-interface CommonProps {
-    title: string;
-    titleAs?: HeadingType;
-    button?: RendersNullableElement<typeof ButtonPrimary>;
-    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
-    buttonLink?: RendersNullableElement<typeof ButtonLink>;
-    description?: string;
-    children?: void;
-    'aria-label'?: string;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-}
-
-interface IconProps extends CommonProps {
-    asset: React.ReactElement;
-    imageUrl?: undefined;
-}
-
-interface ImageProps extends CommonProps {
-    imageUrl: string;
-    asset?: undefined;
-}
-
-type Props = IconProps | ImageProps;
-
-const EmptyStateCard = ({
-    title,
-    titleAs = 'h3',
-    description,
-    button,
-    secondaryButton,
-    buttonLink,
-    asset,
-    imageUrl,
-    'aria-label': ariaLabel,
-    dataAttributes,
-}: Props): JSX.Element => {
-    const {textPresets} = useTheme();
-    const text4Sizes = useTextPresetSizes('text4');
-
-    let image;
-    if (imageUrl) {
-        image = <img className={styles.image} alt="" src={imageUrl} />;
-    }
-    if (process.env.NODE_ENV !== 'production' && button && !button?.props?.small) {
-        console.error('button property in EmptyStateCard must be a a small Button. Set small prop to true');
-    }
-    return (
-        <Boxed dataAttributes={dataAttributes}>
-            <Box paddingY={{mobile: 24, desktop: 40}} paddingX={{mobile: 16, desktop: 40}}>
-                <section className={styles.container} aria-label={ariaLabel}>
-                    <Stack space={16}>
-                        {image ?? (asset && <div className={styles.assetContainer}>{asset}</div>)}
-                        <Box>
-                            <Stack space={8}>
-                                <Text {...text4Sizes} weight={textPresets.cardTitle.weight} as={titleAs}>
-                                    {title}
-                                </Text>
-                                <Text2 regular color={vars.colors.textSecondary}>
-                                    {description}
-                                </Text2>
-                            </Stack>
-                        </Box>
-                        {(button || secondaryButton || buttonLink) && (
-                            <ButtonGroup
-                                primaryButton={button}
-                                secondaryButton={secondaryButton}
-                                link={buttonLink}
-                            />
-                        )}
-                    </Stack>
-                </section>
-            </Box>
-        </Boxed>
-    );
-};
-
-export default EmptyStateCard;

package/src/empty-state.css.ts

@@ -1,119 +0,0 @@
-import {style, createVar, styleVariants} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {sprinkles} from './sprinkles.css';
-import * as skin from './skins/skin-contract.css';
-
-const backgroundColor = createVar();
-
-export const vars = {backgroundColor};
-
-export const container = style([
-    sprinkles({
-        display: 'flex',
-        background: 'transparent',
-    }),
-    {
-        flexDirection: 'column-reverse',
-
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                border: 'none',
-                maxWidth: 368,
-            },
-            [mq.desktopOrBigger]: {
-                borderRadius: skin.vars.borderRadii.legacyDisplay,
-                flexDirection: 'row',
-                overflow: 'hidden',
-                backgroundColor,
-            },
-        },
-    },
-]);
-
-export const contentVariants = styleVariants({
-    default: {
-        marginTop: 0,
-        '@media': {
-            [mq.desktopOrBigger]: {
-                margin: 64,
-            },
-        },
-    },
-    largeImage: {
-        marginTop: 24,
-        '@media': {
-            [mq.desktopOrBigger]: {
-                margin: 64,
-            },
-        },
-    },
-});
-
-export const largeImageContainer = style({
-    '@media': {
-        [mq.desktopOrBigger]: {
-            position: 'absolute',
-            height: '100%',
-        },
-    },
-});
-
-export const largeImage = style([
-    sprinkles({
-        height: '100%',
-    }),
-    {
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-
-        '@media': {
-            [mq.desktopOrBigger]: {
-                backgroundSize: 'contain',
-                backgroundPosition: 'bottom right',
-            },
-        },
-    },
-]);
-
-export const assetContainer = style([
-    sprinkles({
-        width: 64,
-        height: 64,
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                width: 80,
-                height: 80,
-            },
-        },
-    },
-]);
-
-export const smallImage = style([
-    sprinkles({
-        display: 'block', // to avoid letter's descenders bottom space
-    }),
-    {
-        height: 112,
-
-        '@media': {
-            [mq.desktopOrBigger]: {
-                height: 128,
-            },
-        },
-    },
-]);
-
-export const border = sprinkles({
-    border: 'regular',
-});
-
-export const borderOverBrand = style({
-    border: `1px solid ${skin.vars.colors.backgroundContainer}`,
-});
-
-export const contentContainer = style({
-    flex: 1,
-});