@telefonica/mistica 16.58.0 → 16.59.0-beta.1

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

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

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

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

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

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