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

package/src/drawer.tsx

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

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

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

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

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