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

package/src/autocomplete.tsx

@@ -0,0 +1,239 @@
+'use client';
+
+import * as React from 'react';
+import TextField from './text-field';
+import * as styles from './autocomplete.css';
+import {Text3} from './text';
+import {combineRefs} from './utils/common';
+import {DOWN, ENTER, ESC, TAB, UP} from './utils/keys';
+import {cancelEvent} from './utils/dom';
+import classnames from 'classnames';
+import {vars} from './skins/skin-contract.css';
+import * as tokens from './text-tokens';
+import {useTheme} from './hooks';
+
+import type {CommonFormFieldProps} from './text-field-base';
+
+const mod = (n: number, m: number) => ((n % m) + m) % m;
+
+const getOptionId = (baseId: string, index: number) => `${baseId}-option-${index}`;
+
+export interface AutocompleteProps extends CommonFormFieldProps {
+    autoComplete?: never;
+    defaultValue?: never;
+    suggestionEmptyCase?: string;
+    getSuggestions: (value: string) => ReadonlyArray<string>;
+    value: string;
+    onChangeValue: (value: string, rawValue: string) => void;
+}
+
+const Autocomplete = React.forwardRef<any, AutocompleteProps>(
+    ({getSuggestions, onChangeValue, suggestionEmptyCase, ...rest}, refProp) => {
+        const [showOptions, setShowOptions] = React.useState(false);
+        const menuId = React.useId();
+        const statusId = React.useId();
+        const containerRef = React.useRef<HTMLDivElement | null>(null);
+        const inputRef = React.useRef<HTMLInputElement | null>(null);
+        const menuRef = React.useRef<HTMLUListElement | null>(null);
+        const [focusIndex, setFocusIndex] = React.useState<number>(-1);
+        const [top, setTop] = React.useState<number | undefined>(undefined);
+        const {texts, t} = useTheme();
+
+        const options = getSuggestions(rest.value);
+
+        React.useLayoutEffect(() => {
+            if (showOptions) {
+                const {height: menuHeight = 0} = menuRef.current?.getBoundingClientRect() || {};
+                const {
+                    top: comboboxTop = 0,
+                    bottom: comboboxBottom = 0,
+                    height: comboboxHeight = 0,
+                } = containerRef.current?.getBoundingClientRect() || {};
+
+                const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+                const menuSpacing = 8;
+
+                if (
+                    comboboxBottom + menuHeight + menuSpacing > viewportHeight &&
+                    comboboxTop - menuHeight - menuSpacing >= 0
+                ) {
+                    setTop(-menuHeight - menuSpacing);
+                    return;
+                }
+                setTop(comboboxHeight + menuSpacing);
+            }
+        }, [showOptions, rest.value]);
+
+        const showOptionsList = () => {
+            if (rest.readOnly) {
+                return;
+            }
+            setShowOptions(true);
+        };
+
+        const hideOptionsList = () => {
+            setShowOptions(false);
+            setFocusIndex(-1);
+        };
+
+        const updateTextFieldValue = React.useCallback(
+            (val: string, rawVal: string) => {
+                onChangeValue(val, rawVal);
+                setFocusIndex(-1);
+            },
+            [onChangeValue]
+        );
+
+        const validateFieldValue = React.useCallback(() => {
+            if (!options.includes(rest.value)) {
+                updateTextFieldValue('', '');
+            }
+        }, [options, rest.value, updateTextFieldValue]);
+
+        React.useEffect(() => {
+            if (focusIndex !== -1) {
+                containerRef.current
+                    ?.querySelectorAll('li')
+                    ?.[focusIndex]?.scrollIntoView({block: 'nearest'});
+            }
+        }, [focusIndex]);
+
+        React.useEffect(() => {
+            const handleClickOutside = (event: MouseEvent) => {
+                if (!containerRef.current?.contains(event.target as Node)) {
+                    hideOptionsList();
+                    validateFieldValue();
+                }
+            };
+
+            document.addEventListener('pointerup', handleClickOutside);
+            return () => {
+                document.removeEventListener('pointerup', handleClickOutside);
+            };
+        }, [options, rest.value, validateFieldValue]);
+
+        return (
+            <div
+                tabIndex={-1}
+                className={styles.autocompleteContainer}
+                ref={containerRef}
+                onKeyDown={(e) => {
+                    switch (e.key) {
+                        case DOWN:
+                        case UP: {
+                            const dir = e.key === DOWN ? 1 : -1;
+                            const initialFocusIndex = e.key === DOWN ? 0 : options.length - 1;
+                            cancelEvent(e);
+                            if (!showOptions) {
+                                showOptionsList();
+                            }
+                            if (!options.length) {
+                                return;
+                            }
+                            const nextIndex =
+                                focusIndex === -1 ? initialFocusIndex : mod(focusIndex + dir, options.length);
+                            setFocusIndex(nextIndex);
+                            break;
+                        }
+                        case ENTER: {
+                            const option = options[focusIndex];
+                            if (option) {
+                                cancelEvent(e);
+                                updateTextFieldValue(option, option);
+                                hideOptionsList();
+                            }
+                            break;
+                        }
+                        case ESC: {
+                            cancelEvent(e);
+                            if (!showOptions) {
+                                updateTextFieldValue('', '');
+                                return;
+                            }
+                            hideOptionsList();
+                            break;
+                        }
+                        case TAB: {
+                            hideOptionsList();
+                            // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role#tab
+                            const option = options[focusIndex];
+                            if (!option) {
+                                validateFieldValue();
+                                return;
+                            }
+                            updateTextFieldValue(option, option);
+                            break;
+                        }
+                        default:
+                    }
+                }}
+            >
+                <TextField
+                    {...rest}
+                    ref={combineRefs(inputRef, refProp)}
+                    autoComplete="off"
+                    role="combobox"
+                    aria-controls={menuId}
+                    aria-expanded={showOptions}
+                    aria-autocomplete="list"
+                    aria-activedescendant={focusIndex > -1 ? getOptionId(menuId, focusIndex) : undefined}
+                    onChangeValue={(val, rawVal) => {
+                        showOptionsList();
+                        updateTextFieldValue(val, rawVal);
+                    }}
+                    onFocus={() => {
+                        showOptionsList();
+                    }}
+                />
+                <ul
+                    ref={menuRef}
+                    id={menuId}
+                    role="listbox"
+                    aria-label={rest.label}
+                    className={styles.optionsList}
+                    style={{display: showOptions && options.length !== 0 ? 'block' : 'none', top}}
+                >
+                    {options.map((option, index) => (
+                        <li
+                            id={getOptionId(menuId, index)}
+                            key={index}
+                            role="option"
+                            aria-selected={focusIndex === index}
+                            className={classnames(styles.optionItem, {
+                                [styles.optionItemSelected]: focusIndex === index,
+                            })}
+                            onMouseDown={(e) => {
+                                // Prevent blur and lost input focus
+                                e.preventDefault();
+                            }}
+                            onClick={() => {
+                                updateTextFieldValue(option, option);
+                                hideOptionsList();
+                            }}
+                        >
+                            <Text3 regular>{option}</Text3>
+                        </li>
+                    ))}
+                </ul>
+                <div role="status" aria-labelledby={statusId}>
+                    <div
+                        className={styles.optionsList}
+                        style={{display: showOptions && options.length === 0 ? 'block' : 'none', top}}
+                    >
+                        {options.length === 0 && showOptions && (
+                            <div className={styles.optionBaseItem}>
+                                <Text3 regular color={vars.colors.textSecondary} id={statusId}>
+                                    {suggestionEmptyCase ||
+                                        texts.autocompleteEmptyCase ||
+                                        t(tokens.autocompleteEmptyCase)}
+                                </Text3>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+);
+
+export default Autocomplete;

package/src/avatar.css.ts

@@ -0,0 +1,14 @@
+import {sprinkles} from './sprinkles.css';
+import {vars} from './skins/skin-contract.css';
+
+export const avatar = sprinkles({
+    borderRadius: vars.borderRadii.avatar,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+});
+
+export const image = sprinkles({
+    objectFit: 'cover',
+});

package/src/avatar.tsx

@@ -0,0 +1,120 @@
+// https://www.figma.com/file/U4ipIXOk64bdM5tSvaqPKS/%5BREADY%5D--Avatar?node-id=2%3A61
+
+'use client';
+import * as React from 'react';
+import Badge from './badge';
+import IconUserAccountRegular from './generated/mistica-icons/icon-user-account-regular';
+import {useThemeVariant} from './theme-variant-context';
+import * as classes from './avatar.css';
+import {vars} from './skins/skin-contract.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {pxToRem} from './utils/css';
+
+import type {DataAttributes, IconProps} from './utils/types';
+
+/**
+ * Returns a right/top distance for the badge.
+ * The badge will be placed over the avatar's edge
+ * This is calculated using the `radius * (1 - sin(45deg))` distance minus a
+ * constant offset that depends on the badge size
+ */
+const getBadgeDistance = (size: number, badge?: boolean | number): number | string => {
+    if (!badge) {
+        return 0;
+    }
+    const radius = size / 2;
+    const badgeOffset = pxToRem(badge === true ? 5 : 10); // badge=true renders a small circle
+    return `calc(${radius * (1 - Math.sin(Math.PI / 4))}px - ${badgeOffset})`;
+};
+
+type AvatarProps = {
+    size: number;
+    src?: string;
+    initials?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    Icon?: (props: IconProps) => JSX.Element;
+    badge?: boolean | number;
+    'aria-label'?: string;
+    dataAttributes?: DataAttributes;
+    border?: boolean;
+};
+
+/**
+ * Not using TextPresets here because we don't want to scale the avatar text with the device settings
+ */
+export const renderText = (size: number, text: string): JSX.Element | null => {
+    if (!text) {
+        return null;
+    }
+    let fontSize;
+    if (size <= 40) {
+        fontSize = 14;
+    } else if (size <= 64) {
+        fontSize = 16;
+    } else {
+        fontSize = 18;
+    }
+    return <span style={{fontSize, textTransform: 'uppercase'}}>{text}</span>;
+};
+const Avatar = ({
+    size,
+    src,
+    Icon = IconUserAccountRegular,
+    badge,
+    initials = '',
+    'aria-label': ariaLabel,
+    dataAttributes,
+    ...props
+}: AvatarProps): JSX.Element => {
+    const variant = useThemeVariant();
+    const isOverBrand = variant === 'brand' || variant === 'media' || variant === 'negative';
+    const backgroundColor =
+        props.backgroundColor ?? (isOverBrand ? vars.colors.brandHigh : vars.colors.brandLow);
+    const textColor =
+        props.textColor ?? (isOverBrand ? vars.colors.textPrimaryNegative : vars.colors.textBrand);
+    const [imgLoadError, setImgLoadError] = React.useState(false);
+    React.useEffect(() => {
+        setImgLoadError(false); // reset error state when url changes
+    }, [src]);
+    const border = props.border ? `1px solid ${vars.colors.borderLow}` : 'none';
+    const letters = initials.trim().slice(0, 2);
+    const badgePosition = getBadgeDistance(size, badge);
+    const badgeValue = badge === true ? undefined : badge || 0;
+    const shouldRenderImage = !!src && !imgLoadError;
+    const iconSize = size <= 40 ? 16 : 24;
+
+    return (
+        <Badge value={badgeValue} top={badgePosition} right={badgePosition}>
+            <div
+                className={classes.avatar}
+                role="img"
+                aria-label={ariaLabel ?? initials}
+                style={{
+                    width: size,
+                    height: size,
+                    color: textColor,
+                    background: backgroundColor,
+                    boxSizing: 'border-box',
+                    border,
+                }}
+                {...getPrefixedDataAttributes(dataAttributes, 'Avatar')}
+            >
+                {shouldRenderImage ? (
+                    <img
+                        src={src}
+                        className={classes.image}
+                        onError={() => setImgLoadError(true)}
+                        role="none"
+                        width={size}
+                        height={size}
+                    />
+                ) : (
+                    renderText(size, letters) || <Icon size={iconSize} color="currentColor" />
+                )}
+            </div>
+        </Badge>
+    );
+};
+
+export default Avatar;

package/src/badge.css.ts

@@ -0,0 +1,51 @@
+import {style} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars} from './skins/skin-contract.css';
+import {pxToRem} from './utils/css';
+
+export const container = sprinkles({
+    position: 'relative',
+    display: 'inline-block',
+});
+
+export const badge = style([
+    sprinkles({
+        background: vars.colors.badge,
+    }),
+    {
+        width: pxToRem(8),
+        height: pxToRem(8),
+        top: pxToRem(-2),
+        right: pxToRem(-6),
+        borderRadius: '50%',
+    },
+]);
+
+export const badgeBorder = style({
+    boxShadow: `0px 0px 0px ${pxToRem(1.5)} ${vars.colors.borderLow}`,
+});
+
+export const badgeNumber = style([
+    badge,
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }),
+    {
+        top: pxToRem(-8),
+        right: pxToRem(-9),
+        width: pxToRem(18),
+        height: pxToRem(18),
+    },
+]);
+
+export const badgeWithChildren = sprinkles({
+    position: 'absolute',
+});
+
+export const badgeBigNumber = style({
+    width: pxToRem(24),
+    right: pxToRem(-14),
+    borderRadius: vars.borderRadii.indicator,
+});

package/src/badge.tsx

@@ -0,0 +1,79 @@
+'use client';
+import * as React from 'react';
+import classnames from 'classnames';
+import * as classes from './badge.css';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {Text1} from './text';
+import {useTheme} from './hooks';
+import {vars} from './skins/skin-contract.css';
+import {useThemeVariant} from './theme-variant-context';
+
+import type {DataAttributes} from './utils/types';
+
+type Props = {
+    children?: React.ReactNode;
+    value?: number;
+    right?: number | string;
+    top?: number | string;
+    dataAttributes?: DataAttributes;
+};
+
+/**
+ * This Component is decorative and won't be read by screenreaders, to make it accessible,
+ * set the label to the child element
+ *
+ * <Badge value={2}>
+ *   <IconButton aria-label="Shopping Cart with 2 items" Icon={IconShoppingCartFilled}/>
+ * </Badge>
+ */
+const Badge = ({children, value, right, top, dataAttributes}: Props): JSX.Element | null => {
+    const themeVariant = useThemeVariant();
+    const {textPresets} = useTheme();
+    if (children && value === 0) {
+        return <>{children}</>;
+    }
+
+    if (value === 0) {
+        return null;
+    }
+
+    const isBigNumber = value && value > 9;
+    const hasBorder =
+        themeVariant === 'brand' || themeVariant === 'negative' || themeVariant === 'media' || !!children;
+
+    return (
+        <div className={classes.container} {...getPrefixedDataAttributes(dataAttributes, 'Badge')}>
+            {children}
+            {value ? (
+                <div
+                    role="presentation"
+                    aria-hidden="true" // otherwise OSX VoiceOver reads this number
+                    className={classnames(classes.badgeNumber, {
+                        [classes.badgeWithChildren]: !!children,
+                        [classes.badgeBigNumber]: isBigNumber,
+                        [classes.badgeBorder]: hasBorder,
+                    })}
+                    style={{right, top}}
+                >
+                    <Text1
+                        forceMobileSizes
+                        weight={textPresets.indicator.weight}
+                        color={vars.colors.textPrimaryNegative}
+                    >
+                        {isBigNumber ? '+9' : value}
+                    </Text1>
+                </div>
+            ) : (
+                <div
+                    style={{right, top}}
+                    className={classnames(classes.badge, {
+                        [classes.badgeWithChildren]: !!children,
+                        [classes.badgeBorder]: hasBorder,
+                    })}
+                />
+            )}
+        </div>
+    );
+};
+
+export default Badge;

package/src/box.css.ts

@@ -0,0 +1,51 @@
+import {createVar, style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+
+const paddingTop = {
+    desktop: createVar(),
+    tablet: createVar(),
+    mobile: createVar(),
+};
+
+const paddingBottom = {
+    desktop: createVar(),
+    tablet: createVar(),
+    mobile: createVar(),
+};
+
+const paddingLeft = {
+    desktop: createVar(),
+    tablet: createVar(),
+    mobile: createVar(),
+};
+
+const paddingRight = {
+    desktop: createVar(),
+    tablet: createVar(),
+    mobile: createVar(),
+};
+
+export const vars = {paddingTop, paddingBottom, paddingLeft, paddingRight};
+
+export const box = style({
+    paddingTop: paddingTop.mobile,
+    paddingBottom: paddingBottom.mobile,
+    paddingLeft: paddingLeft.mobile,
+    paddingRight: paddingRight.mobile,
+
+    '@media': {
+        [mq.tablet]: {
+            paddingTop: paddingTop.tablet,
+            paddingBottom: paddingBottom.tablet,
+            paddingLeft: paddingLeft.tablet,
+            paddingRight: paddingRight.tablet,
+        },
+
+        [mq.desktopOrBigger]: {
+            paddingTop: paddingTop.desktop,
+            paddingBottom: paddingBottom.desktop,
+            paddingLeft: paddingLeft.desktop,
+            paddingRight: paddingRight.desktop,
+        },
+    },
+});

package/src/box.tsx

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import classnames from 'classnames';
+import * as styles from './box.css';
+import {applyCssVars} from './utils/css';
+import {getPrefixedDataAttributes} from './utils/dom';
+
+import type {ByBreakpoint, DataAttributes} from './utils/types';
+
+export type PadSize = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
+
+export type BoxProps = {
+    width?: number | string;
+    padding?: ByBreakpoint<PadSize>;
+    paddingX?: ByBreakpoint<PadSize>;
+    paddingY?: ByBreakpoint<PadSize>;
+    paddingTop?: ByBreakpoint<PadSize>;
+    paddingBottom?: ByBreakpoint<PadSize>;
+    paddingLeft?: ByBreakpoint<PadSize>;
+    paddingRight?: ByBreakpoint<PadSize>;
+    background?: string;
+    as?: React.ComponentType<any> | string;
+    children?: React.ReactNode;
+    /**
+     * @deprecated this component is meant to be used only to add padding.
+     * Consider using a div (or similar) instead if you need to add extra styles
+     */
+    className?: string;
+    role?: string;
+    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
+    dataAttributes?: DataAttributes;
+    'aria-label'?: string;
+    'aria-hidden'?: React.HTMLAttributes<HTMLAnchorElement>['aria-hidden'];
+    id?: string;
+};
+
+const Box = React.forwardRef<HTMLDivElement, BoxProps>(
+    (
+        {
+            className,
+            children,
+            as: Component = 'div',
+            width,
+            padding = 0,
+            paddingX = padding,
+            paddingY = padding,
+            paddingTop = paddingY,
+            paddingBottom = paddingY,
+            paddingLeft = paddingX,
+            paddingRight = paddingX,
+            background,
+            role,
+            id,
+            dataAttributes,
+            'aria-label': ariaLabel,
+            'aria-hidden': ariaHidden,
+        },
+        ref
+    ) => {
+        const paddingTopValues =
+            typeof paddingTop === 'object'
+                ? paddingTop
+                : {mobile: paddingTop, tablet: paddingTop, desktop: paddingTop};
+
+        const paddingBottomValues =
+            typeof paddingBottom === 'object'
+                ? paddingBottom
+                : {mobile: paddingBottom, tablet: paddingBottom, desktop: paddingBottom};
+
+        const paddingLeftValues =
+            typeof paddingLeft === 'object'
+                ? paddingLeft
+                : {mobile: paddingLeft, tablet: paddingLeft, desktop: paddingLeft};
+
+        const paddingRightValues =
+            typeof paddingRight === 'object'
+                ? paddingRight
+                : {mobile: paddingRight, tablet: paddingRight, desktop: paddingRight};
+
+        const applyPaddingVars = (
+            vars: (typeof styles.vars)[keyof typeof styles.vars],
+            values: {mobile: PadSize; tablet?: PadSize; desktop: PadSize}
+        ) => {
+            return applyCssVars({
+                [vars.mobile]: `${values.mobile}px`,
+                [vars.tablet]: `${values.tablet ?? values.mobile}px`,
+                [vars.desktop]: `${values.desktop}px`,
+            });
+        };
+
+        return (
+            <Component
+                {...getPrefixedDataAttributes(dataAttributes)}
+                role={role}
+                aria-label={ariaLabel}
+                aria-hidden={ariaHidden}
+                ref={ref}
+                className={classnames(className, styles.box)}
+                style={{
+                    ...applyPaddingVars(styles.vars.paddingTop, paddingTopValues),
+                    ...applyPaddingVars(styles.vars.paddingBottom, paddingBottomValues),
+                    ...applyPaddingVars(styles.vars.paddingLeft, paddingLeftValues),
+                    ...applyPaddingVars(styles.vars.paddingRight, paddingRightValues),
+                    ...(width !== undefined ? {width, boxSizing: 'border-box'} : {}),
+                    background,
+                }}
+                id={id}
+            >
+                {children}
+            </Component>
+        );
+    }
+);
+
+export default Box;