@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/text-field-components.css.ts

@@ -1,159 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-import {fieldTopPadding, fieldLeftPadding, fieldRightPadding, fieldVars} from './text-field-base.css';
-
-export const DEFAULT_WIDTH = 328;
-
-export const labelContainer = style([
-    sprinkles({
-        position: 'absolute',
-        display: 'flex',
-        flexDirection: 'row',
-    }),
-    {
-        left: fieldLeftPadding,
-        top: fieldTopPadding,
-        pointerEvents: 'none',
-        transformOrigin: '0 0',
-        fontSize: fieldVars.desktopFontSize,
-        transform: `translateY(calc(${fieldVars.shrinkedLabelDesktopLineHeight} / 2)) scale(1)`,
-        lineHeight: fieldVars.desktopLineHeight,
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                fontSize: fieldVars.mobileFontSize,
-                lineHeight: fieldVars.mobileLineHeight,
-                transform: `translateY(calc(${fieldVars.shrinkedLabelMobileLineHeight} / 2)) scale(1)`,
-            },
-        },
-        width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px)`,
-    },
-]);
-
-export const labelText = style([
-    sprinkles({
-        overflow: 'hidden',
-        flexShrink: 1,
-    }),
-    {
-        display: '-webkit-box',
-        wordBreak: 'break-all',
-        WebkitBoxOrient: 'vertical',
-        boxOrient: 'vertical',
-        WebkitLineClamp: 1,
-        lineClamp: 1,
-    },
-]);
-
-export const shrinked = style({
-    transform: `translateY(0) scale(${fieldVars.labelScaleDesktop})`,
-    lineHeight: `calc(${fieldVars.shrinkedLabelDesktopLineHeight} / ${fieldVars.labelScaleDesktop})`,
-    width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleDesktop})`,
-    '@media': {
-        [mq.tabletOrSmaller]: {
-            transform: `translateY(0) scale(${fieldVars.labelScaleMobile})`,
-            lineHeight: `calc(${fieldVars.shrinkedLabelMobileLineHeight} / ${fieldVars.labelScaleMobile})`,
-            width: `calc(100% - ${fieldLeftPadding}px - ${fieldRightPadding}px / ${fieldVars.labelScaleMobile})`,
-        },
-    },
-});
-
-export const fieldContainer = style([
-    sprinkles({
-        display: 'flex',
-        flexDirection: 'column',
-    }),
-    {
-        minWidth: 96,
-    },
-]);
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'default',
-});
-
-export const normalWidth = style([
-    sprinkles({
-        width: '100%',
-    }),
-    {
-        '@media': {
-            [mq.desktopOrBigger]: {
-                width: DEFAULT_WIDTH,
-            },
-        },
-    },
-]);
-
-export const fullWidth = sprinkles({
-    width: '100%',
-});
-
-// See https://css-tricks.com/copy-the-browsers-native-focus-styles/
-export const browserDefaultFocusOutline = [
-    '5px auto Highlight', // Firefox
-    '5px auto -webkit-focus-ring-color', // Chrome / Safari
-];
-
-export const focused = style({
-    outline: browserDefaultFocusOutline,
-});
-
-export const fieldFocusRing = style({
-    ':focus-within': {
-        outline: browserDefaultFocusOutline,
-    },
-    selectors: {
-        // when the field has an end icon button (like the password visibility toggle or the CVV help icon), and it is focused, don't show the focus ring on the field
-        '&:has(button:focus-visible)': {
-            outline: 'none',
-        },
-    },
-});
-
-export const field = style([
-    sprinkles({
-        border: 'input',
-        display: 'flex',
-        borderRadius: vars.borderRadii.input,
-        position: 'relative',
-    }),
-    fieldFocusRing,
-]);
-
-export const helperContainer = sprinkles({
-    paddingLeft: 12,
-    paddingRight: 16,
-    display: 'flex',
-});
-
-export const leftHelperText = style([
-    sprinkles({
-        display: 'flex',
-    }),
-    {
-        margin: 0, // reset p default browser margin
-        lineHeight: '0',
-    },
-]);
-
-export const rightHelperText = sprinkles({paddingLeft: 16});
-
-export const helperText = sprinkles({
-    flexGrow: 1,
-    paddingTop: 4,
-});
-
-export const warnIcon = style({
-    display: 'block',
-    marginRight: 4,
-    width: ['1rem', '1lh'], // some browsers don't support 'lh' unit yet
-    height: ['1rem', '1lh'],
-});
-
-export const background = styleVariants({
-    default: [sprinkles({background: vars.colors.backgroundContainer})],
-    readOnly: [sprinkles({background: vars.colors.neutralLow})],
-});

package/src/text-field-components.tsx

@@ -1,225 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {useTheme} from './hooks';
-import {Text1} from './text';
-import * as styles from './text-field-components.css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as tokens from './text-tokens';
-import IconWarningRegular from './generated/mistica-icons/icon-warning-regular';
-import ScreenReaderOnly from './screen-reader-only';
-import {fieldVars} from './text-field-base.css';
-import {applyCssVars, pxToRem} from './utils/css';
-
-import type {DataAttributes} from './utils/types';
-
-export const useApplyCssVars = (): Record<string, string> => {
-    const {textPresets} = useTheme();
-
-    return applyCssVars({
-        [fieldVars.mobileFontSize]: pxToRem(textPresets.inputValue.size.mobile),
-        [fieldVars.desktopFontSize]: pxToRem(textPresets.inputValue.size.desktop),
-        [fieldVars.mobileLineHeight]: pxToRem(textPresets.inputValue.lineHeight.mobile),
-        [fieldVars.desktopLineHeight]: pxToRem(textPresets.inputValue.lineHeight.desktop),
-
-        [fieldVars.shrinkedLabelMobileFontSize]: pxToRem(textPresets.inputLabel.size.mobile),
-        [fieldVars.shrinkedLabelDesktopFontSize]: pxToRem(textPresets.inputLabel.size.desktop),
-        [fieldVars.shrinkedLabelMobileLineHeight]: pxToRem(textPresets.inputLabel.lineHeight.mobile),
-        [fieldVars.shrinkedLabelDesktopLineHeight]: pxToRem(textPresets.inputLabel.lineHeight.desktop),
-
-        [fieldVars.helperTextMobileFontSize]: pxToRem(textPresets.inputHelperText.size.mobile),
-        [fieldVars.helperTextDesktopFontSize]: pxToRem(textPresets.inputHelperText.size.desktop),
-        [fieldVars.helperTextMobileLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.mobile),
-        [fieldVars.helperTextDesktopLineHeight]: pxToRem(textPresets.inputHelperText.lineHeight.desktop),
-
-        [fieldVars.labelScaleMobile]: `calc(${textPresets.inputLabel.size.mobile} / ${textPresets.inputValue.size.mobile})`,
-        [fieldVars.labelScaleDesktop]: `calc(${textPresets.inputLabel.size.desktop} / ${textPresets.inputValue.size.desktop})`,
-    });
-};
-
-export type InputState = 'focused' | 'filled' | 'default';
-
-type LabelProps = {
-    shrinkLabel?: boolean;
-    forId: string;
-    inputState: InputState;
-    error?: boolean;
-    children: string;
-    style?: React.CSSProperties;
-    showOptional?: boolean;
-};
-
-export const Label = ({
-    shrinkLabel,
-    forId,
-    inputState,
-    error,
-    children,
-    style,
-    showOptional,
-}: LabelProps): JSX.Element => {
-    const isShrinked = shrinkLabel || inputState === 'focused' || inputState === 'filled';
-    const [transitionStyle, setTransitionStyle] = React.useState('initial');
-    const {texts, t} = useTheme();
-
-    // This way we prevent animation when field is filled as initial state
-    React.useEffect(() => {
-        const tid = setTimeout(() => {
-            // Check environment or we will get a warning if this gets executed outside @testing-library/act
-            if (process.env.NODE_ENV !== 'test') {
-                setTransitionStyle('transform 150ms, width 150ms');
-            }
-        });
-        return () => {
-            clearTimeout(tid);
-        };
-    }, []);
-
-    let color = vars.colors.textSecondary;
-    if (error && inputState !== 'default') {
-        color = vars.colors.textError;
-    } else if (inputState === 'focused') {
-        color = vars.colors.textActivated;
-    }
-
-    return (
-        <label
-            className={classnames(styles.labelContainer, {[styles.shrinked]: isShrinked})}
-            htmlFor={forId}
-            style={{color, ...style, transition: transitionStyle}}
-            data-testid="label"
-        >
-            <span className={styles.labelText}>{children}</span>
-            {showOptional ? (
-                <span>
-                    &nbsp;(
-                    {texts.formFieldOptionalLabelSuffix || t(tokens.formFieldOptionalLabelSuffix)})
-                </span>
-            ) : null}
-        </label>
-    );
-};
-
-type HelperTextProps = {
-    leftText?: string;
-    rightText?: string;
-    rightTextLabel?: string;
-    error?: boolean;
-    leftTextId?: string;
-    rightTextId?: string;
-    children?: void;
-};
-
-export const HelperText = ({
-    leftText,
-    leftTextId,
-    rightText,
-    rightTextId,
-    rightTextLabel,
-    error,
-}: HelperTextProps): JSX.Element => {
-    const leftColor = error ? vars.colors.textError : vars.colors.textSecondary;
-
-    return (
-        <>
-            {leftText && (
-                <p
-                    className={classnames(styles.helperText, styles.leftHelperText)}
-                    data-testid={error ? 'errorText' : 'helperText'}
-                >
-                    {error && (
-                        <Text1 regular color={leftColor}>
-                            <IconWarningRegular color="currentColor" className={styles.warnIcon} />
-                        </Text1>
-                    )}
-                    <Text1
-                        color={leftColor}
-                        regular
-                        id={leftTextId}
-                        aria-live={error ? 'assertive' : undefined}
-                    >
-                        {leftText}
-                    </Text1>
-                </p>
-            )}
-            {rightText && (
-                <div
-                    className={classnames(styles.helperText, {[styles.rightHelperText]: !!leftText})}
-                    data-testid="endHelperText"
-                >
-                    <Text1
-                        color={vars.colors.textSecondary}
-                        regular
-                        as="p"
-                        textAlign="right"
-                        wordBreak={false}
-                        id={rightTextId}
-                    >
-                        {rightTextLabel && (
-                            <ScreenReaderOnly>
-                                <span>{rightTextLabel}</span>
-                            </ScreenReaderOnly>
-                        )}
-                        <span aria-hidden={rightTextLabel !== undefined}>{rightText}</span>
-                    </Text1>
-                </div>
-            )}
-        </>
-    );
-};
-
-type FieldContainerProps = {
-    multiline?: boolean;
-    disabled?: boolean;
-    children: React.ReactNode;
-    helperText?: React.ReactNode;
-    className?: string;
-    fieldRef?: React.RefObject<HTMLDivElement | null>;
-    fullWidth?: boolean;
-    readOnly?: boolean;
-    dataAttributes?: DataAttributes;
-    focus?: boolean;
-};
-
-export const FieldContainer = ({
-    multiline,
-    disabled,
-    children,
-    helperText,
-    className,
-    fieldRef,
-    fullWidth,
-    readOnly,
-    dataAttributes,
-    focus,
-}: FieldContainerProps): JSX.Element => {
-    const cssVarStyles = useApplyCssVars();
-    return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <div
-            className={classnames(styles.fieldContainer, fullWidth ? styles.fullWidth : styles.normalWidth, {
-                [styles.disabled]: disabled,
-            })}
-            onClick={(e) => {
-                // We want to focus the input when the user clicks anywhere in the container (like in the label or the prefix)
-                e.currentTarget.querySelector(multiline ? 'textarea' : 'input')?.focus();
-            }}
-            style={cssVarStyles}
-            {...getPrefixedDataAttributes(dataAttributes)}
-        >
-            <div
-                className={classnames(
-                    styles.field,
-                    readOnly ? styles.background.readOnly : styles.background.default,
-                    className,
-                    focus && styles.focused
-                )}
-                ref={fieldRef}
-            >
-                {children}
-            </div>
-            {helperText && <div className={styles.helperContainer}>{helperText}</div>}
-        </div>
-    );
-};

package/src/text-field.tsx

@@ -1,118 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useFieldProps} from './form-context';
-import {TextFieldBaseAutosuggest} from './text-field-base';
-import {combineRefs} from './utils/common';
-import {createChangeEvent} from './utils/dom';
-import {useIsomorphicLayoutEffect} from './hooks';
-
-import type {CommonFormFieldProps} from './text-field-base';
-
-const useKeepMaxLength = (
-    input: HTMLInputElement | null,
-    value?: string,
-    maxLength?: number,
-    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-) => {
-    useIsomorphicLayoutEffect(() => {
-        if (input && value && maxLength && value.length > maxLength && onChange) {
-            onChange(createChangeEvent(input, value.slice(0, maxLength)));
-        }
-    }, [onChange, value, maxLength, input]);
-};
-
-export interface TextFieldProps extends CommonFormFieldProps<HTMLInputElement | HTMLTextAreaElement> {
-    onChangeValue?: (value: string, rawValue: string) => void;
-    onPress?: (event: React.MouseEvent) => void;
-    multiline?: boolean;
-    prefix?: React.ReactNode;
-    endIcon?: React.ReactNode;
-    getSuggestions?: (value: string) => ReadonlyArray<string>;
-    role?: string;
-    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
-}
-
-const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
-    (
-        {
-            disabled,
-            error,
-            helperText,
-            name,
-            label,
-            optional,
-            validate,
-            validateOnBlurInsideForm,
-            onChangeValue,
-            onChange,
-            value,
-            defaultValue,
-            onBlur: onBlurProp,
-            onFocus: onFocusProp,
-            onPress,
-            dataAttributes,
-            ...rest
-        },
-        ref
-    ) => {
-        const inputRef = React.useRef<HTMLInputElement | null>(null);
-        const processValue = (v: string) => v;
-
-        const onBlur = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-            if (rest.multiline && inputRef.current) {
-                // scroll to start
-                inputRef.current.scrollTop = 0;
-            }
-            onBlurProp?.(event);
-        };
-
-        const onFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-            if (rest.multiline) {
-                setTimeout(() => {
-                    if (inputRef.current) {
-                        // place caret to the end
-                        const value = inputRef.current.value;
-                        inputRef.current.value = '';
-                        inputRef.current.value = value;
-                        // scroll to end
-                        inputRef.current.scrollTop = inputRef.current.scrollHeight;
-                    }
-                }, 0);
-            }
-            onFocusProp?.(event);
-        };
-
-        const fieldProps = useFieldProps({
-            name,
-            label,
-            value,
-            defaultValue,
-            processValue,
-            helperText,
-            optional,
-            error,
-            disabled,
-            onBlur,
-            validate,
-            validateOnBlurInsideForm,
-            onChange,
-            onChangeValue,
-        });
-
-        useKeepMaxLength(inputRef.current, fieldProps.value, rest.maxLength, fieldProps.onChange);
-
-        return (
-            <TextFieldBaseAutosuggest
-                {...rest}
-                {...fieldProps}
-                onClick={onPress}
-                inputRef={combineRefs(inputRef, fieldProps.inputRef, ref)}
-                onFocus={onFocus}
-                type="text"
-                dataAttributes={{'component-name': 'TextField', testid: 'TextField', ...dataAttributes}}
-            />
-        );
-    }
-);
-
-export default TextField;

package/src/text-link.css.ts

@@ -1,83 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-const base = style([
-    sprinkles({
-        width: 'auto',
-        display: 'inline',
-        cursor: 'pointer',
-    }),
-    {
-        userSelect: 'text',
-        lineHeight: 'inherit',
-        wordBreak: 'break-word',
-        selectors: {
-            '&[disabled]': {
-                opacity: 0.5,
-                textDecoration: 'none !important',
-            },
-        },
-    },
-]);
-
-const underlineAlways = style({
-    textDecoration: 'underline !important',
-    '@media': {
-        [mq.supportsHover]: {
-            selectors: {
-                '&:hover:not([disabled])': {
-                    // important is needed to override styles in touchable.css.ts
-                    textDecorationThickness: '0.125em !important',
-                },
-            },
-        },
-    },
-});
-
-const underlineOnHover = style({
-    textDecoration: 'none !important',
-    '@media': {
-        [mq.supportsHover]: {
-            selectors: {
-                '&:hover:not([disabled])': {
-                    textDecoration: 'underline !important',
-                    textDecorationThickness: '0.0625em !important',
-                },
-            },
-        },
-    },
-});
-
-export const linkStyles = {
-    underlineAlways,
-    underlineOnHover,
-};
-
-export const variants = styleVariants({
-    default: [
-        base,
-        sprinkles({
-            color: vars.colors.textLink,
-        }),
-    ],
-    brand: [
-        base,
-        sprinkles({
-            color: vars.colors.textLinkBrand,
-        }),
-    ],
-    negative: [
-        base,
-        sprinkles({
-            color: vars.colors.textLinkNegative,
-        }),
-    ],
-    media: [
-        base,
-        sprinkles({
-            color: vars.colors.textLinkMedia,
-        }),
-    ],
-});

package/src/text-link.tsx

@@ -1,85 +0,0 @@
-// Specs: https://www.figma.com/file/koROdh3HpEPG2O8jG52Emh/Buttons-Component-Specs?node-id=0%3A1
-
-'use client';
-import * as React from 'react';
-import {BaseTouchable} from './touchable';
-import classnames from 'classnames';
-import {useThemeVariant} from './theme-variant-context';
-import {useForm} from './form-context';
-import {getTextFromChildren} from './utils/common';
-import {eventActions, eventCategories, eventNames, useTrackingConfig} from './utils/analytics';
-import * as styles from './text-link.css';
-
-import type {AlwaysTouchableComponentProps} from './touchable';
-import type {TrackingEvent, DataAttributes} from './utils/types';
-
-interface CommonProps {
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    classes?: {[className: string]: string};
-    disabled?: boolean;
-    'aria-label'?: string;
-    trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
-    trackEvent?: boolean;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-    /** IMPORTANT: try to avoid using role="link" with onPress and first consider other alternatives like to/href + onNavigate */
-    role?: string;
-    underline?: 'always' | 'on hover';
-}
-
-export type TextLinkProps = AlwaysTouchableComponentProps & CommonProps;
-
-const TextLink = ({
-    children,
-    className = '',
-    disabled,
-    style,
-    trackEvent,
-    underline = 'always',
-    ...props
-}: TextLinkProps): JSX.Element => {
-    const themeVariant = useThemeVariant();
-    const {formStatus} = useForm();
-    const {eventFormat} = useTrackingConfig();
-
-    const underlineStyle =
-        underline === 'always' ? styles.linkStyles.underlineAlways : styles.linkStyles.underlineOnHover;
-
-    const createDefaultTrackingEvent = (): TrackingEvent => {
-        if (eventFormat === 'google-analytics-4') {
-            return {
-                name: eventNames.userInteraction,
-                component_type: 'link',
-                component_copy: getTextFromChildren(children),
-            };
-        } else {
-            return {
-                category: eventCategories.userInteraction,
-                action: eventActions.linkTapped,
-                label: getTextFromChildren(children),
-            };
-        }
-    };
-
-    return (
-        <BaseTouchable
-            {...props}
-            stopPropagation
-            as={props.onPress ? 'a' : undefined}
-            trackingEvent={props.trackingEvent ?? (trackEvent ? createDefaultTrackingEvent() : undefined)}
-            disabled={disabled || formStatus === 'sending'}
-            className={classnames(
-                styles.variants[themeVariant === 'alternative' ? 'default' : themeVariant],
-                underlineStyle,
-                className
-            )}
-            style={style}
-        >
-            {children}
-        </BaseTouchable>
-    );
-};
-
-export default TextLink;