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

package/src/inline.css.ts

@@ -0,0 +1,131 @@
+import {style, createVar, globalStyle, fallbackVar} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+
+const space = createVar();
+const spaceMobile = createVar();
+const spaceTablet = createVar();
+const spaceDesktop = createVar();
+
+const verticalSpace = createVar();
+const verticalSpaceMobile = createVar();
+const verticalSpaceTablet = createVar();
+const verticalSpaceDesktop = createVar();
+
+export const vars = {
+    space,
+    spaceMobile,
+    spaceTablet,
+    spaceDesktop,
+    verticalSpace,
+    verticalSpaceMobile,
+    verticalSpaceTablet,
+    verticalSpaceDesktop,
+};
+
+export const marginInline = style({
+    marginTop: `calc(${verticalSpace} * -1)`,
+    marginLeft: `calc(${space} * -1)`,
+    '@media': {
+        [mq.mobile]: {
+            vars: {
+                [space]: spaceMobile,
+                [verticalSpace]: verticalSpaceMobile,
+            },
+        },
+        [mq.tablet]: {
+            vars: {
+                [space]: fallbackVar(spaceTablet, spaceMobile),
+                [verticalSpace]: fallbackVar(verticalSpaceTablet, verticalSpaceMobile),
+            },
+        },
+        [mq.desktopOrBigger]: {
+            vars: {
+                [space]: spaceDesktop,
+                [verticalSpace]: verticalSpaceDesktop,
+            },
+        },
+    },
+});
+
+/**
+ * https://caniuse.com/flexbox-gap
+ * chrome 84; safari 14.1
+ */
+const supportsFlexGap = '(display: flex) and (gap: 0px)';
+
+export const inline = style({
+    pointerEvents: 'none', // to prevent negative margins from affecting clickable areas
+    gridAutoFlow: 'column',
+    marginTop: `calc(${fallbackVar(verticalSpace, space)} * -1)`,
+    marginLeft: `calc(${space} * -1)`,
+    '@supports': {
+        [supportsFlexGap]: {
+            margin: 0, // restore
+            pointerEvents: 'auto', // restore
+            flexDirection: 'row',
+            gap: space,
+            rowGap: fallbackVar(verticalSpace, space),
+        },
+    },
+});
+
+export const fullWidth = style({
+    /**
+     * @deprecated - this should be "flex"
+     * Once changed, the usages that depend on this behavior should be migrated to use <Grid>
+     * See "inline-cases" private story
+     */
+    display: ['flex', 'grid'],
+});
+
+export const wrap = style({
+    display: 'inline-flex',
+    flexWrap: 'wrap',
+});
+
+export const noFullWidth = style({
+    display: ['inline-flex', 'inline-grid'],
+});
+
+export const stringSpace = style({
+    display: ['flex', 'grid'],
+    justifyContent: space,
+});
+
+export const stringSpaceWithWrap = style({
+    // if we use display: grid, the content doesn't wrap
+    display: 'flex',
+    justifyContent: space,
+});
+
+globalStyle(`${marginInline} > div`, {
+    marginLeft: space,
+    marginTop: fallbackVar(verticalSpace, space),
+});
+
+globalStyle(`${inline} > div`, {
+    pointerEvents: 'auto', // restore pointer events for children
+    // Hack to fix https://jira.tid.es/browse/WEB-1683
+    // In iOS the inline component sometimes cuts the last line of the content
+    paddingBottom: 1,
+    '@supports': {
+        [supportsFlexGap]: {
+            padding: 0, // restore
+            // negative gap is not supported in flexbox, so we use negative margins instead
+            margin: `0 0 0 calc(min(${space}, 0px))`,
+        },
+    },
+});
+
+globalStyle(`${inline} > div:first-child`, {
+    marginLeft: space,
+    '@supports': {
+        [supportsFlexGap]: {
+            marginLeft: 0,
+        },
+    },
+});
+
+globalStyle(`${inline} > div:empty`, {
+    display: 'none',
+});

package/src/inline.tsx

@@ -0,0 +1,135 @@
+'use client';
+import * as React from 'react';
+import classnames from 'classnames';
+import {getPrefixedDataAttributes} from './utils/dom';
+import * as styles from './inline.css';
+import {applyCssVars} from './utils/css';
+import {isIos, isRunningAcceptanceTest} from './utils/platform';
+import {useTheme} from './hooks';
+
+import type {ByBreakpoint, DataAttributes} from './utils/types';
+
+type NumericSpace = -16 | -12 | -8 | -4 | -2 | 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64;
+type FlexSpace = 'between' | 'around' | 'evenly';
+
+const calcSpaceValue = (space: NumericSpace | FlexSpace) => {
+    if (typeof space === 'number') {
+        return `${space}px`;
+    } else {
+        return `space-${space}`;
+    }
+};
+
+const calcInlineVars = (
+    space: FlexSpace | ByBreakpoint<NumericSpace>,
+    verticalSpace?: ByBreakpoint<NumericSpace>
+) => {
+    const calcSpaceVars = (
+        space: FlexSpace | ByBreakpoint<NumericSpace>,
+        varNames: {default: string; mobile: string; tablet: string; desktop: string}
+    ) => {
+        if (typeof space === 'number' || typeof space === 'string') {
+            return {
+                [varNames.default]: calcSpaceValue(space),
+            };
+        }
+        const vars = {
+            [varNames.mobile]: calcSpaceValue(space.mobile),
+            [varNames.desktop]: calcSpaceValue(space.desktop),
+        };
+        if (space.tablet) {
+            vars[varNames.tablet] = calcSpaceValue(space.tablet);
+        }
+        return vars;
+    };
+
+    const spaceVars = calcSpaceVars(space, {
+        default: styles.vars.space,
+        mobile: styles.vars.spaceMobile,
+        tablet: styles.vars.spaceTablet,
+        desktop: styles.vars.spaceDesktop,
+    });
+
+    if (verticalSpace) {
+        const verticalSpaceVars = calcSpaceVars(verticalSpace, {
+            default: styles.vars.verticalSpace,
+            mobile: styles.vars.verticalSpaceMobile,
+            tablet: styles.vars.verticalSpaceTablet,
+            desktop: styles.vars.verticalSpaceDesktop,
+        });
+
+        return {
+            ...spaceVars,
+            ...verticalSpaceVars,
+        };
+    }
+
+    return spaceVars;
+};
+
+type Props = {
+    space: FlexSpace | ByBreakpoint<NumericSpace>;
+    verticalSpace?: ByBreakpoint<NumericSpace>;
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    children: React.ReactNode;
+    className?: string;
+    role?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    fullWidth?: boolean;
+    dataAttributes?: DataAttributes;
+    wrap?: boolean;
+};
+
+const Inline = ({
+    space,
+    verticalSpace,
+    className,
+    children,
+    role,
+    alignItems = 'stretch',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    fullWidth,
+    wrap,
+    dataAttributes,
+}: Props): JSX.Element => {
+    const {platformOverrides} = useTheme();
+    const isStringSpace = typeof space === 'string';
+
+    return (
+        <div
+            className={classnames(
+                className,
+                styles.inline,
+                wrap ? styles.wrap : fullWidth ? styles.fullWidth : styles.noFullWidth,
+                isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline
+            )}
+            style={{...applyCssVars(calcInlineVars(space, verticalSpace)), alignItems}}
+            role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}
+            {...getPrefixedDataAttributes(dataAttributes, 'Inline')}
+        >
+            {React.Children.map(children, (child) =>
+                !!child || child === 0 ? (
+                    <div
+                        role={role === 'list' ? 'listitem' : undefined}
+                        style={{
+                            // Hack to fix https://jira.tid.es/browse/WEB-1683
+                            // In iOS the inline component sometimes cuts the last line of the content
+                            paddingBottom:
+                                isIos(platformOverrides) && !isRunningAcceptanceTest(platformOverrides)
+                                    ? 1
+                                    : undefined,
+                        }}
+                    >
+                        {child}
+                    </div>
+                ) : null
+            )}
+        </div>
+    );
+};
+
+export default Inline;

package/src/integer-field.tsx

@@ -0,0 +1,93 @@
+'use client';
+import * as React from 'react';
+import {useFieldProps} from './form-context';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+
+import type {CommonFormFieldProps} from './text-field-base';
+
+type IntegerInputProps = Omit<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    'inputMode' | 'pattern' | 'onInput' | 'type'
+> & {
+    inputRef: React.ForwardedRef<HTMLInputElement>;
+    type?: 'text' | 'password';
+};
+
+export const IntegerInput = ({
+    inputRef,
+    value,
+    defaultValue,
+    type = 'text',
+    ...rest
+}: IntegerInputProps): React.ReactElement => {
+    const format = (v?: unknown) => String(v ?? '').replace(/[^\d]/g, '');
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+        // strip all non numeric characters
+        e.currentTarget.value = format(e.currentTarget.value);
+    };
+    return (
+        <input
+            {...rest}
+            inputMode="numeric" // shows numeric keypad in Chrome for Android
+            pattern="[0-9]*" // shows numeric keypad in iOS
+            onInput={handleInput}
+            ref={inputRef}
+            type={type}
+            value={value === undefined ? undefined : format(value)}
+            defaultValue={defaultValue === undefined ? undefined : format(defaultValue)}
+        />
+    );
+};
+
+export interface IntegerFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+}
+
+const IntegerField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue,
+    onBlur,
+    value,
+    defaultValue,
+    dataAttributes,
+    ...rest
+}: IntegerFieldProps): JSX.Element => {
+    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}
+            inputComponent={IntegerInput}
+            dataAttributes={{'component-name': 'IntegerField', testid: 'IntegerField', ...dataAttributes}}
+        />
+    );
+};
+
+export default IntegerField;

package/src/list.css.ts

@@ -0,0 +1,281 @@
+import {style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+import {vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+
+export const disabled = style({
+    opacity: 0.5,
+});
+
+export const row = sprinkles({
+    width: '100%',
+});
+
+export const boxed = style({});
+
+export const touchableBackground = style({
+    transition: 'background-color 0.1s ease-in-out',
+    ':active': {
+        background: vars.colors.backgroundContainerPressed,
+    },
+    '@media': {
+        [mq.supportsHover]: {
+            ':hover': {
+                background: vars.colors.backgroundContainerHover,
+            },
+            ':active': {
+                background: vars.colors.backgroundContainerPressed,
+            },
+        },
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+});
+
+export const touchableBackgroundBrand = style({
+    transition: 'background-color 0.1s ease-in-out',
+    ':active': {
+        background: vars.colors.backgroundContainerBrandPressed,
+    },
+    '@media': {
+        [mq.supportsHover]: {
+            ':hover': {
+                background: vars.colors.backgroundContainerBrandHover,
+            },
+            ':active': {
+                background: vars.colors.backgroundContainerBrandPressed,
+            },
+        },
+        [mq.touchableOnly]: {
+            transition: 'none',
+        },
+    },
+});
+
+export const pointer = sprinkles({cursor: 'pointer'});
+
+export const rowContent = style([
+    sprinkles({
+        width: '100%',
+        border: 'none',
+        background: 'transparent',
+        padding: 0,
+        display: 'block',
+        height: '100%',
+        position: 'relative',
+    }),
+    {
+        selectors: {
+            [`${boxed} &:active`]: {
+                // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
+                borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
+            },
+            [`${boxed} &:hover`]: {
+                // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
+                borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
+            },
+        },
+    },
+]);
+
+export const rowContentPadding = sprinkles({
+    paddingX: 16,
+});
+
+export const content = sprinkles({
+    display: 'flex',
+    width: '100%',
+    minHeight: 72,
+    paddingY: 16,
+});
+
+export const assetContainer = sprinkles({
+    paddingRight: 16,
+});
+
+export const asset = sprinkles({
+    display: 'flex',
+    flexShrink: 0,
+    flexGrow: 0,
+});
+
+export const rowBody = sprinkles({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+});
+
+export const center = sprinkles({
+    display: 'flex',
+    alignItems: 'center',
+});
+
+export const badge = style([
+    center,
+    sprinkles({
+        justifyContent: 'center',
+        minWidth: 16,
+        height: '100%',
+        flexShrink: 0,
+    }),
+]);
+
+export const rightContent = style({display: 'flex', marginLeft: 16});
+export const rightRestrictedWidth = style({maxWidth: '40%'});
+
+export const detailRight = style({paddingLeft: 8});
+
+export const detail = style([center, {textAlign: 'right'}]);
+
+export const dualActionContainer = sprinkles({
+    display: 'flex',
+    flexDirection: 'row',
+    height: '100%',
+});
+
+const dualActionBase = sprinkles({padding: 0, border: 'none', background: 'transparent'});
+
+export const dualActionLeft = style([
+    dualActionBase,
+    sprinkles({
+        display: 'block',
+        flexGrow: 1,
+        paddingX: 16,
+    }),
+    {
+        selectors: {
+            [`${boxed} &:active`]: {
+                // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
+                borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+            },
+            [`${boxed} &:hover`]: {
+                // needed because we can't use overflow: hidden on the boxed container for the focus ring to be visible
+                borderRadius: `calc(${vars.borderRadii.container} - 1px)`,
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0,
+            },
+        },
+    },
+]);
+
+export const dualActionDivider = style([
+    sprinkles({display: 'flex'}),
+    {
+        margin: '16px 0',
+        borderLeft: `1px solid ${vars.colors.divider}`,
+    },
+]);
+
+export const dualActionRight = style([
+    dualActionBase,
+    sprinkles({
+        paddingX: 16,
+        display: 'flex',
+        alignItems: 'center',
+        flexGrow: 0,
+        width: 'auto',
+        height: '100%',
+    }),
+    {
+        lineHeight: 0,
+    },
+]);
+
+const ulVerticalGap = 8;
+const ulVerticalGapDesktop = 16;
+
+export const ul = style({
+    display: 'block',
+    margin: 0,
+    padding: 0,
+
+    selectors: {
+        'li &': {
+            paddingTop: ulVerticalGap,
+            '@media': {
+                [mq.desktopOrBigger]: {
+                    paddingTop: ulVerticalGapDesktop,
+                },
+            },
+        },
+    },
+});
+
+export const liWithCustomIcon = style({
+    display: 'flex',
+    alignItems: 'flex-start',
+    paddingLeft: 8,
+    paddingBottom: ulVerticalGap,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            paddingLeft: 16,
+            paddingBottom: ulVerticalGapDesktop,
+        },
+    },
+    ':last-child': {
+        paddingBottom: 0,
+    },
+});
+
+export const liWithoutMarker = style({
+    display: 'flex',
+    alignItems: 'flex-start',
+    paddingLeft: 'calc(16px + 1em)',
+    paddingBottom: ulVerticalGap,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            paddingLeft: 'calc(32px + 1em)',
+            paddingBottom: ulVerticalGapDesktop,
+        },
+    },
+    ':last-child': {
+        paddingBottom: 0,
+    },
+});
+
+export const li = style({
+    marginLeft: 24,
+    paddingBottom: ulVerticalGap,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            marginLeft: 32,
+            paddingLeft: 8,
+            paddingBottom: ulVerticalGapDesktop,
+        },
+    },
+    ':last-child': {
+        paddingBottom: 0,
+    },
+
+    selectors: {
+        'ul > &': {
+            listStyleType: 'disc',
+        },
+        'ol > &': {
+            listStyleType: 'decimal',
+        },
+        'ul ul > &': {
+            listStyleType: 'circle',
+        },
+        'ul ul ul > &': {
+            listStyleType: 'square',
+        },
+        'ol ol > &': {
+            listStyleType: 'lower-alpha',
+        },
+        'ol ol ol > &': {
+            listStyleType: 'lower-roman',
+        },
+    },
+});
+
+export const liContent = style({
+    selectors: {
+        [`${liWithCustomIcon} &`]: {
+            flex: 1,
+        },
+    },
+});