@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/inline.css.ts

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

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

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

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