@telefonica/mistica 16.59.0-beta.1 → 16.59.0

package/src/checkbox.css.ts

@@ -1,94 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-const checkboxContainerBase = style([
-    sprinkles({
-        display: 'inline',
-    }),
-    {
-        WebkitTapHighlightColor: 'transparent',
-    },
-]);
-
-export const checkboxContainer = style([
-    checkboxContainerBase,
-    {
-        cursor: 'pointer',
-    },
-]);
-
-export const checkboxContainerDisabled = style([
-    checkboxContainerBase,
-    {
-        cursor: 'default',
-    },
-]);
-
-const boxBase = style([
-    sprinkles({
-        display: 'inline-flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexShrink: 0,
-        borderRadius: vars.borderRadii.checkbox,
-    }),
-    {
-        height: 18,
-        width: 18,
-        userSelect: 'none',
-        outline: '1px solid transparent',
-        verticalAlign: 'middle',
-        transition: 'box-shadow 0.3s',
-    },
-]);
-
-export const boxVariant = styleVariants({
-    ios: [boxBase, {background: vars.colors.background, boxShadow: `inset 0 0 0 1px ${vars.colors.control}`}],
-    rest: [
-        boxBase,
-        {background: vars.colors.background, boxShadow: `inset 0 0 0 2px ${vars.colors.control}`},
-    ],
-    checked: [
-        boxBase,
-        {background: vars.colors.background, boxShadow: `inset 0 0 0 12px ${vars.colors.controlActivated}`},
-    ],
-});
-
-export const overBrandBoxVariant = styleVariants({
-    ios: [boxBase, {background: 'transparent', boxShadow: `inset 0 0 0 1px ${vars.colors.controlBrand}`}],
-    rest: [boxBase, {background: 'transparent', boxShadow: `inset 0 0 0 2px ${vars.colors.controlBrand}`}],
-    checked: [
-        boxBase,
-        {background: 'transparent', boxShadow: `inset 0 0 0 12px ${vars.colors.controlActivatedBrand}`},
-    ],
-});
-
-export const overNegativeBoxVariant = styleVariants({
-    ios: [boxBase, {background: 'transparent', boxShadow: `inset 0 0 0 1px ${vars.colors.controlNegative}`}],
-    rest: [boxBase, {background: 'transparent', boxShadow: `inset 0 0 0 2px ${vars.colors.controlNegative}`}],
-    checked: [
-        boxBase,
-        {background: 'transparent', boxShadow: `inset 0 0 0 12px ${vars.colors.controlActivatedNegative}`},
-    ],
-});
-
-export const check = style([
-    sprinkles({
-        display: 'block',
-    }),
-    {
-        transform: 'scale(0, 0)',
-        transformOrigin: 'center',
-        transition: 'transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6)', // https://easings.net/#easeInOutBack
-    },
-]);
-
-export const checkChecked = style({
-    transform: 'scale(1, 1)',
-});
-
-export const disabled = style({
-    opacity: 0.5,
-    cursor: 'default',
-});

package/src/checkbox.tsx

@@ -1,192 +0,0 @@
-'use client';
-import * as React from 'react';
-import {SPACE} from './utils/keys';
-import {useControlProps} from './form-context';
-import Inline from './inline';
-import {Text3} from './text';
-import {useTheme} from './hooks';
-import classnames from 'classnames';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './checkbox.css';
-import {vars} from './skins/skin-contract.css';
-import {combineRefs} from './utils/common';
-import {useThemeVariant} from './theme-variant-context';
-
-import type {DataAttributes} from './utils/types';
-
-const IconCheckbox = ({isChecked, disabled}: {isChecked: boolean; disabled?: boolean}) => {
-    const {isIos} = useTheme();
-    const externalVariant = useThemeVariant();
-    const kind = isChecked ? 'checked' : isIos ? 'ios' : 'rest';
-
-    const knobColor = {
-        default: vars.colors.inverse,
-        alternative: vars.colors.inverse,
-        brand: vars.colors.controlKnobBrand,
-        media: vars.colors.controlKnobBrand,
-        negative: vars.colors.controlKnobNegative,
-    }[externalVariant];
-
-    const icon = isIos ? (
-        <svg
-            viewBox="0 0 10 8"
-            width="10"
-            height="8"
-            className={classnames(styles.check, {[styles.checkChecked]: isChecked})}
-        >
-            <path
-                d="M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z"
-                fill={knobColor}
-            />
-        </svg>
-    ) : (
-        <svg
-            viewBox="0 0 14 10"
-            width="14"
-            height="10"
-            className={classnames(styles.check, {[styles.checkChecked]: isChecked})}
-        >
-            <path d="M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z" fill={knobColor} />
-        </svg>
-    );
-
-    return (
-        <div
-            className={classnames(
-                externalVariant === 'brand' || externalVariant === 'media'
-                    ? styles.overBrandBoxVariant[kind]
-                    : externalVariant === 'negative'
-                      ? styles.overNegativeBoxVariant[kind]
-                      : styles.boxVariant[kind],
-                {
-                    [styles.disabled]: disabled,
-                }
-            )}
-        >
-            {icon}
-        </div>
-    );
-};
-
-type RenderProps = {
-    name: string;
-    defaultChecked?: boolean;
-    checked?: boolean;
-    onChange?: (value: boolean) => void;
-    id?: string;
-    render?: (renderProps: {
-        controlElement: React.ReactElement;
-        labelId: string;
-        disabled: boolean;
-        checked: boolean;
-    }) => React.ReactElement;
-    children?: undefined;
-    disabled?: boolean;
-    'aria-labelledby'?: string;
-    'aria-label'?: string;
-    role?: 'checkbox' | 'menuitemcheckbox';
-    dataAttributes?: DataAttributes;
-};
-
-type ChildrenProps = {
-    name: string;
-    defaultChecked?: boolean;
-    checked?: boolean;
-    onChange?: (value: boolean) => void;
-    id?: string;
-    render?: undefined;
-    children: React.ReactNode;
-    disabled?: boolean;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    role?: 'checkbox' | 'menuitemcheckbox';
-    dataAttributes?: DataAttributes;
-};
-
-const Checkbox = React.forwardRef<HTMLDivElement, RenderProps | ChildrenProps>((props, ref) => {
-    const reactId = React.useId();
-    const labelId = props['aria-labelledby'] || reactId;
-    const ariaLabel = props['aria-label'];
-    const hasExternalLabel = ariaLabel || props['aria-labelledby'];
-
-    const {defaultValue, value, onChange, focusableRef, disabled} = useControlProps({
-        name: props.name,
-        value: props.checked,
-        defaultValue: props.defaultChecked,
-        onChange: props.onChange,
-        disabled: props.disabled,
-    });
-
-    const [checkedState, setCheckedState] = React.useState(!!defaultValue);
-
-    const handleChange = () => {
-        if (value === undefined) {
-            setCheckedState(!checkedState);
-            onChange(!checkedState);
-        } else {
-            onChange(!value);
-        }
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === SPACE) {
-            event.preventDefault();
-            event.stopPropagation();
-            handleChange();
-        }
-    };
-
-    const iconCheckbox = <IconCheckbox disabled={disabled} isChecked={value ?? checkedState} />;
-
-    return (
-        // When the checkbox is disabled, it shouldn't be focusable
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-        <div
-            id={props.id}
-            role={props.role || 'checkbox'}
-            aria-checked={value ?? checkedState}
-            onKeyDown={disabled ? undefined : handleKeyDown}
-            onClick={(e) => {
-                e.stopPropagation();
-                if (!disabled) {
-                    handleChange();
-                }
-            }}
-            tabIndex={disabled ? undefined : 0}
-            ref={combineRefs(ref, focusableRef)}
-            className={disabled ? styles.checkboxContainerDisabled : styles.checkboxContainer}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabel ? undefined : labelId}
-            aria-disabled={disabled}
-            {...getPrefixedDataAttributes(props.dataAttributes, 'Checkbox')}
-        >
-            {props.render ? (
-                props.render({
-                    controlElement: iconCheckbox,
-                    labelId,
-                    checked: value ?? checkedState,
-                    disabled: !!disabled,
-                })
-            ) : (
-                <Inline space={8}>
-                    {/* Text3 wrapper added to have the same line-height and center checkbox with text and -2px to perfect pixel center icon */}
-                    <Text3 regular as="div">
-                        <div style={{position: 'relative', top: -2}}>{iconCheckbox}</div>
-                    </Text3>
-                    {props.children && (
-                        <Text3
-                            regular
-                            as="div"
-                            id={labelId}
-                            role={hasExternalLabel ? 'presentation' : undefined}
-                        >
-                            <span className={disabled ? styles.disabled : ''}>{props.children}</span>
-                        </Text3>
-                    )}
-                </Inline>
-            )}
-        </div>
-    );
-});
-
-export default Checkbox;

package/src/chip.css.ts

@@ -1,204 +0,0 @@
-import {createVar, 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';
-
-export const chipWrapper = sprinkles({
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-});
-
-export const wrappedContent = sprinkles({
-    display: 'flex',
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-});
-
-const minButtonArea = {
-    pointer: '48px',
-    touchable: '48px',
-};
-
-const interactiveAreaSize = createVar();
-
-export const minimumInteractiveArea = style({
-    vars: {
-        [interactiveAreaSize]: minButtonArea.pointer,
-    },
-    '@media': {
-        [mq.touchableOnly]: {
-            vars: {
-                [interactiveAreaSize]: minButtonArea.touchable,
-            },
-        },
-    },
-
-    position: 'relative',
-    '::after': {
-        content: '',
-        position: 'absolute',
-        /**
-         * min() is not supported in old browsers (https://caniuse.com/css-math-functions).
-         * We don't force the minimum touchable area in that case.
-         */
-        top: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-        bottom: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-        left: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-        right: [0, `min(0px, calc((100% - ${interactiveAreaSize}) / 2))`],
-    },
-});
-
-const containerBase = style([
-    sprinkles({
-        border: 'regular',
-        minHeight: 40,
-        minWidth: 72,
-    }),
-    {
-        borderRadius: vars.borderRadii.chip,
-        verticalAlign: 'middle',
-        cursor: 'default',
-        borderColor: vars.colors.control,
-    },
-]);
-
-export const containerSmall = style({
-    minHeight: 32,
-    minWidth: 56,
-});
-
-const chipActive = style({});
-
-export const chipVariants = styleVariants({
-    default: [
-        containerBase,
-        sprinkles({
-            background: vars.colors.backgroundContainer,
-            color: vars.colors.textPrimary,
-        }),
-    ],
-    overAlternative: [
-        containerBase,
-        sprinkles({
-            background: vars.colors.backgroundContainerAlternative,
-            color: vars.colors.textPrimary,
-        }),
-    ],
-    active: [
-        chipActive,
-        containerBase,
-        sprinkles({
-            color: vars.colors.textActivated,
-            background: vars.colors.brandLow,
-        }),
-        {
-            borderColor: vars.colors.controlActivated,
-            cursor: 'pointer',
-        },
-    ],
-    navigationActive: [
-        chipActive,
-        containerBase,
-        sprinkles({
-            color: vars.colors.textButtonPrimary,
-            background: vars.colors.buttonPrimaryBackground,
-        }),
-        {
-            borderColor: vars.colors.buttonPrimaryBackground,
-            cursor: 'pointer',
-        },
-    ],
-    navigationActiveOverBrand: [
-        containerBase,
-        sprinkles({
-            color: vars.colors.textActivated,
-            background: vars.colors.brandLow,
-        }),
-        {
-            borderColor: vars.colors.controlActivated,
-            cursor: 'pointer',
-        },
-    ],
-});
-
-export const interactive = style({
-    position: 'relative',
-    userSelect: 'none',
-    cursor: 'pointer',
-});
-
-export const button = style({
-    border: 'none',
-    background: 'transparent',
-    padding: 0,
-});
-
-export const interactiveChipOverlay = style([
-    sprinkles({
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
-        position: 'absolute',
-    }),
-    {
-        backgroundColor: 'transparent',
-        transition: 'background-color 0.1s ease-in-out',
-        borderRadius: vars.borderRadii.chip,
-        selectors: {
-            [`${interactive}:active &`]: {
-                backgroundColor: vars.colors.backgroundContainerPressed,
-            },
-        },
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    [`${interactive}:hover &`]: {
-                        backgroundColor: vars.colors.backgroundContainerHover,
-                    },
-                    [`${interactive}:active &`]: {
-                        backgroundColor: vars.colors.backgroundContainerPressed,
-                    },
-                },
-            },
-            [mq.touchableOnly]: {
-                transition: 'none',
-            },
-        },
-    },
-]);
-
-export const icon = style([
-    sprinkles({paddingRight: 4}),
-    {color: vars.colors.neutralMedium, paddingRight: 4},
-]);
-export const iconNavigation = style([
-    sprinkles({paddingRight: 4}),
-    {color: vars.colors.textPrimaryBrand, paddingRight: 4},
-]);
-
-export const iconNavigationOverBrand = style([
-    sprinkles({paddingRight: 4}),
-    {color: vars.colors.controlActivated, paddingRight: 4},
-]);
-
-export const iconActive = style([
-    sprinkles({paddingRight: 4}),
-    {color: vars.colors.controlActivated, paddingRight: 4},
-]);
-
-export const leftPadding = styleVariants({
-    default: [sprinkles({paddingLeft: 20})],
-    small: [sprinkles({paddingLeft: 12})],
-    withIcon: [sprinkles({paddingLeft: 16})],
-    withIconSmall: [sprinkles({paddingLeft: 8})],
-});
-
-export const rightPadding = styleVariants({
-    default: [sprinkles({paddingRight: 20})],
-    small: [sprinkles({paddingRight: 12})],
-    withIcon: [sprinkles({paddingRight: 16})],
-    withIconSmall: [sprinkles({paddingRight: 8})],
-});

package/src/chip.tsx

@@ -1,191 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {useTheme} from './hooks';
-import Badge from './badge';
-import Box from './box';
-import Text, {getTextSizesWithWeight} from './text';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import {pxToRem} from './utils/css';
-import * as styles from './chip.css';
-import {vars} from './skins/skin-contract.css';
-import {useThemeVariant} from './theme-variant-context';
-import Touchable, {BaseTouchable} from './touchable';
-import * as tokens from './text-tokens';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {TouchableComponentProps} from './touchable';
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {DataAttributes, IconProps} from './utils/types';
-
-interface SimpleChipProps {
-    children: string;
-    Icon?: (props: IconProps) => JSX.Element;
-    id?: string;
-    dataAttributes?: DataAttributes;
-    badge?: boolean | number;
-    small?: boolean;
-}
-
-interface ClosableChipProps extends SimpleChipProps {
-    onClose: () => void;
-    closeButtonLabel?: string;
-}
-
-interface ToggleChipProps extends SimpleChipProps {
-    active: boolean;
-}
-
-interface ToggleChipProps extends SimpleChipProps {
-    active: boolean;
-}
-
-type ClickableChipProps = TouchableComponentProps<SimpleChipProps & {active?: boolean}>;
-
-type ChipProps = ExclusifyUnion<ClosableChipProps | ToggleChipProps | ClickableChipProps>;
-
-const Chip = (props: ChipProps): JSX.Element => {
-    const {Icon, children, id, dataAttributes, badge, active, onClose, closeButtonLabel} = props;
-    const {texts, textPresets, t} = useTheme();
-    const themeVariant = useThemeVariant();
-    const isOverAlternative = themeVariant === 'alternative';
-    const isOverBrand = themeVariant === 'brand' || themeVariant === 'media' || themeVariant === 'negative';
-
-    const isTouchable = props.href || props.onPress || props.to;
-    const isInteractive = active !== undefined || isTouchable;
-
-    const body = (
-        <>
-            {Icon && (
-                <div
-                    className={
-                        active
-                            ? isTouchable
-                                ? isOverBrand
-                                    ? styles.iconNavigationOverBrand
-                                    : styles.iconNavigation
-                                : styles.iconActive
-                            : styles.icon
-                    }
-                >
-                    <Icon color="currentColor" size={pxToRem(16)} />
-                </div>
-            )}
-            <Box paddingRight={badge ? 8 : 0 || onClose ? 4 : 0}>
-                <Text
-                    id={id}
-                    {...getTextSizesWithWeight({textPreset: textPresets.chipLabel})}
-                    truncate={1}
-                    color="currentColor"
-                >
-                    {children}
-                </Text>
-            </Box>
-        </>
-    );
-
-    const chipDataAttributes = {'component-name': 'Chip', testid: 'Chip', ...dataAttributes};
-
-    if (onClose) {
-        return (
-            <div
-                className={classnames(
-                    isOverAlternative ? styles.chipVariants.overAlternative : styles.chipVariants.default,
-                    styles.chipWrapper,
-                    Icon
-                        ? props.small
-                            ? styles.leftPadding.withIconSmall
-                            : styles.leftPadding.withIcon
-                        : props.small
-                          ? styles.leftPadding.small
-                          : styles.leftPadding.default,
-                    props.small ? styles.rightPadding.withIconSmall : styles.rightPadding.withIcon,
-                    {[styles.containerSmall]: props.small}
-                )}
-                {...getPrefixedDataAttributes(chipDataAttributes)}
-            >
-                {body}
-                <Touchable
-                    style={{
-                        display: 'flex',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        width: pxToRem(24),
-                        height: pxToRem(24),
-                    }}
-                    aria-label={closeButtonLabel || texts.closeButtonLabel || t(tokens.closeButtonLabel)}
-                    onPress={() => onClose()}
-                >
-                    <IconCloseRegular size={pxToRem(16)} color={vars.colors.neutralMedium} />
-                </Touchable>
-            </div>
-        );
-    }
-
-    const renderBadge = () => {
-        if (!badge) {
-            return null;
-        }
-        return badge === true ? <Badge /> : <Badge value={badge} />;
-    };
-
-    const renderContent = (dataAttributes?: DataAttributes) => (
-        <div
-            className={classnames(
-                isTouchable ? styles.minimumInteractiveArea : undefined,
-                styles.chipVariants[
-                    active
-                        ? isTouchable
-                            ? isOverBrand
-                                ? 'navigationActiveOverBrand'
-                                : 'navigationActive'
-                            : 'active'
-                        : isOverAlternative
-                          ? 'overAlternative'
-                          : 'default'
-                ],
-
-                isTouchable ? styles.wrappedContent : styles.chipWrapper,
-                {
-                    [styles.interactive]: isInteractive,
-                    [styles.containerSmall]: props.small,
-                },
-                Icon
-                    ? props.small
-                        ? styles.leftPadding.withIconSmall
-                        : styles.leftPadding.withIcon
-                    : props.small
-                      ? styles.leftPadding.small
-                      : styles.leftPadding.default,
-                badge
-                    ? props.small
-                        ? styles.rightPadding.withIconSmall
-                        : styles.rightPadding.withIcon
-                    : props.small
-                      ? styles.rightPadding.small
-                      : styles.rightPadding.default
-            )}
-            {...getPrefixedDataAttributes(dataAttributes)}
-        >
-            {isInteractive && <div className={styles.interactiveChipOverlay} />}
-            {body}
-            {renderBadge()}
-        </div>
-    );
-
-    if (isTouchable) {
-        return (
-            <BaseTouchable
-                {...props}
-                className={classnames(styles.chipWrapper, styles.button)}
-                dataAttributes={chipDataAttributes}
-            >
-                {renderContent()}
-            </BaseTouchable>
-        );
-    }
-
-    return renderContent(chipDataAttributes);
-};
-
-export default Chip;

package/src/circle.css.ts

@@ -1,14 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-
-export const circle = style([
-    {
-        boxSizing: 'border-box',
-    },
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '50%',
-    }),
-]);