@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/checkbox.css.ts

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

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

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

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

@@ -0,0 +1,14 @@
+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%',
+    }),
+]);