@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/stepper.css.ts

@@ -1,233 +0,0 @@
-import {createVar, globalStyle, keyframes, style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import {vars as skinVars} from './skins/skin-contract.css';
-import * as mq from './media-queries.css';
-import {pxToRem} from './utils/css';
-
-const transition = '1s cubic-bezier(0.75, 0, 0.27, 1)';
-
-const stepperMinHeight = createVar();
-
-export const vars = {
-    stepperMinHeight,
-};
-
-const filledBarKeyframes = keyframes({
-    '0%': {
-        width: 0,
-    },
-});
-
-const reverseFilledBarKeyframes = keyframes({
-    '0%': {
-        width: '100%',
-    },
-    // Needed this opacity trick to avoid a tiny bar that appear when the animation end
-    '99%': {
-        opacity: 1,
-    },
-    '100%': {
-        opacity: 0,
-    },
-});
-
-const currentNumberKeyframes = keyframes({
-    '0%': {
-        borderColor: skinVars.colors.borderHigh,
-        backgroundColor: 'transparent',
-    },
-    '100%': {
-        borderColor: skinVars.colors.completedStep,
-        backgroundColor: skinVars.colors.completedStep,
-    },
-});
-
-const currentNumberTextKeyframes = keyframes({
-    '0%': {
-        color: skinVars.colors.textSecondary,
-    },
-    '100%': {
-        color: skinVars.colors.textPrimaryInverse,
-    },
-});
-
-const stepIconKeyframes = keyframes({
-    '0%': {
-        backgroundColor: skinVars.colors.completedStep,
-        transform: 'scale(1)',
-    },
-    '100%': {
-        backgroundColor: skinVars.colors.completedStep,
-        transform: 'scale(0)',
-    },
-});
-
-export const stepper = style([
-    sprinkles({
-        display: 'flex',
-        alignItems: 'flex-start',
-        minHeight: 24,
-    }),
-    {
-        listStyle: 'none',
-        margin: 0,
-        padding: 0,
-        '@media': {
-            [mq.desktopOrBigger]: {
-                minHeight: stepperMinHeight,
-            },
-            [mq.tabletOrSmaller]: {
-                alignItems: 'center',
-            },
-        },
-    },
-]);
-
-export const listItem = sprinkles({
-    display: 'flex',
-    alignItems: 'center',
-});
-
-export const step = style([
-    sprinkles({
-        position: 'relative',
-        display: 'inline-flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-    }),
-    {
-        textAlign: 'center',
-        selectors: {
-            ':first-child > &': {
-                alignItems: 'flex-start',
-                textAlign: 'left',
-            },
-            ':last-child > &': {
-                alignItems: 'flex-end',
-                textAlign: 'right',
-            },
-        },
-    },
-]);
-
-const stepIconDesktopSize = `calc(${pxToRem(16)} + 16px)`;
-
-export const stepIconNumber = style([
-    sprinkles({
-        position: 'relative',
-        display: 'flex',
-    }),
-    {
-        height: `calc(${pxToRem(8)} + 16px)`,
-        width: `calc(${pxToRem(8)} + 16px)`,
-        '@media': {
-            [mq.desktopOrBigger]: {
-                height: stepIconDesktopSize,
-                width: stepIconDesktopSize,
-            },
-        },
-    },
-]);
-
-export const iconAnimation = style({
-    ':after': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        borderRadius: '50%',
-        animation: `${stepIconKeyframes} .3s ease-in-out`,
-        willChange: 'transform',
-        transition: 'transform .3s ease-in-out',
-    },
-});
-
-export const number = style([
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '50%',
-    }),
-    {
-        border: `2px solid ${skinVars.colors.borderHigh}`,
-    },
-]);
-
-export const currentNumber = style({
-    transition: 'border-color .3s ease-in-out, background-color .3s ease-in-out',
-    willChange: 'border-color, background-color',
-    animation: `${currentNumberKeyframes} .3s ease-in-out`,
-    background: skinVars.colors.completedStep,
-    borderColor: skinVars.colors.completedStep,
-});
-
-globalStyle(`${currentNumber} span`, {
-    animation: `${currentNumberTextKeyframes} .3s ease-in-out`,
-    willChange: 'color',
-    transition: 'color .3s ease-in-out',
-});
-
-export const textContainer = style([
-    sprinkles({
-        position: 'absolute',
-    }),
-    {
-        width: 200,
-        top: `calc(${stepIconDesktopSize} + 16px)`,
-        '@media': {
-            [mq.tabletOrSmaller]: {
-                display: 'none',
-            },
-        },
-    },
-]);
-
-export const barContainer = sprinkles({
-    position: 'absolute',
-    left: 16,
-    height: '100%',
-    width: '100%',
-});
-
-export const bar = style([
-    sprinkles({
-        height: 4,
-        width: '100%',
-        borderRadius: skinVars.borderRadii.bar,
-        overflow: 'hidden',
-    }),
-    {
-        margin: '0 8px',
-        background: skinVars.colors.barTrack,
-    },
-]);
-
-export const barFilled = style([
-    sprinkles({
-        height: 4,
-        width: '100%',
-        borderRadius: skinVars.borderRadii.bar,
-        overflow: 'hidden',
-    }),
-    {
-        background: skinVars.colors.controlActivated,
-    },
-]);
-
-export const barFilledAnimation = style({
-    transition: `width ${transition}`,
-    animation: `${filledBarKeyframes} ${transition}`,
-});
-
-export const barFilledReverseAnimation = style([
-    sprinkles({
-        width: 0,
-    }),
-    {
-        transition: `width ${transition}`,
-        animation: `${reverseFilledBarKeyframes} ${transition}`,
-    },
-]);

package/src/stepper.tsx

@@ -1,156 +0,0 @@
-'use client';
-import * as React from 'react';
-import classnames from 'classnames';
-import {Text, Text1, getTextSizes} from './text';
-import {useElementDimensions, useTheme} from './hooks';
-import * as tokens from './text-tokens';
-import IconSuccess from './icons/icon-success';
-import * as styles from './stepper.css';
-import {pxToRem, applyCssVars} from './utils/css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import ScreenReaderOnly from './screen-reader-only';
-
-import type {DataAttributes} from './utils/types';
-
-type StepperProps = {
-    steps: ReadonlyArray<string>;
-    currentIndex: number;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    dataAttributes?: DataAttributes;
-};
-
-const Stepper = ({
-    steps,
-    currentIndex,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    'aria-description': ariaDescription,
-    'aria-describedby': ariaDescribedby,
-    dataAttributes,
-}: StepperProps): JSX.Element => {
-    const {texts, t, textPresets} = useTheme();
-    const {height, ref} = useElementDimensions();
-    const textContainerHeight = height;
-
-    const [step, setStep] = React.useState(Math.ceil(currentIndex));
-    const [isBack, setIsBack] = React.useState(false);
-
-    React.useEffect(() => {
-        const newStep = Math.ceil(currentIndex);
-        if (step !== newStep) {
-            setIsBack(newStep < step);
-            setStep(newStep);
-        }
-    }, [currentIndex, steps, step]);
-
-    const completedText = texts.stepperCompletedStep || t(tokens.stepperCompletedStep);
-    const currentText = texts.stepperCurrentStep || t(tokens.stepperCurrentStep);
-
-    return (
-        // The explicit role="list" is needed for Safari VoiceOver when setting css list-style: none
-        // aria-description is not supported by the eslint rule
-        // eslint-disable-next-line jsx-a11y/no-redundant-roles, jsx-a11y/role-supports-aria-props
-        <ol
-            role="list"
-            className={styles.stepper}
-            style={applyCssVars({
-                [styles.vars.stepperMinHeight]: pxToRem(40 + textContainerHeight),
-            })}
-            {...getPrefixedDataAttributes(dataAttributes, 'Stepper')}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabelledby}
-            aria-description={ariaDescription}
-            aria-describedby={ariaDescribedby}
-        >
-            {steps.map((text, index) => {
-                const isCurrent = index === step;
-                const isLastStep = index === steps.length - 1;
-                const isCompleted = index < step;
-                const hasAnimation = index === step - 1;
-
-                return (
-                    <li
-                        key={index}
-                        className={styles.listItem}
-                        style={isLastStep ? undefined : {flex: 1}}
-                        aria-current={isCurrent ? 'step' : undefined}
-                    >
-                        <div className={styles.step}>
-                            {isCompleted ? (
-                                <div
-                                    className={classnames(styles.stepIconNumber, {
-                                        [styles.iconAnimation]: hasAnimation && !isBack,
-                                    })}
-                                    aria-hidden="true"
-                                >
-                                    <IconSuccess
-                                        color={vars.colors.controlActivated}
-                                        size="100%"
-                                        skipAnimation={!hasAnimation || isBack}
-                                    />
-                                </div>
-                            ) : (
-                                <div
-                                    className={classnames(styles.stepIconNumber, styles.number, {
-                                        [styles.currentNumber]: isCurrent || isCurrent,
-                                    })}
-                                >
-                                    <Text1
-                                        as="span"
-                                        weight={textPresets.indicator.weight}
-                                        color={
-                                            isCurrent
-                                                ? vars.colors.textPrimaryInverse
-                                                : vars.colors.textSecondary
-                                        }
-                                        aria-hidden="true"
-                                    >
-                                        {index + 1}
-                                    </Text1>
-                                </div>
-                            )}
-
-                            <div className={styles.textContainer} aria-hidden="true" ref={ref}>
-                                <Text
-                                    {...getTextSizes({textPreset: textPresets.stepperStepLabel})}
-                                    weight="regular"
-                                    as="div"
-                                    color={
-                                        isCompleted || isCurrent
-                                            ? vars.colors.textPrimary
-                                            : vars.colors.textSecondary
-                                    }
-                                >
-                                    {text}
-                                </Text>
-                            </div>
-
-                            <ScreenReaderOnly>
-                                <span>{`${isCompleted ? `${completedText}: ` : isCurrent ? `${currentText}: ` : ''}${text}`}</span>
-                            </ScreenReaderOnly>
-                        </div>
-                        {!isLastStep && (
-                            <div className={styles.bar} aria-hidden="true">
-                                {(isCompleted || isCurrent) && (
-                                    <div
-                                        className={classnames({
-                                            [styles.barFilled]: (isBack && isCurrent) || isCompleted,
-                                            [styles.barFilledAnimation]: hasAnimation && !isBack,
-                                            [styles.barFilledReverseAnimation]: isCurrent && isBack,
-                                        })}
-                                    />
-                                )}
-                            </div>
-                        )}
-                    </li>
-                );
-            })}
-        </ol>
-    );
-};
-
-export default Stepper;

package/src/switch-component.css.ts

@@ -1,181 +0,0 @@
-import {style, styleVariants, createVar} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import {vars as colorsVars} from './skins/skin-contract.css';
-import * as mq from './media-queries.css';
-
-const SWITCH_ANIMATION = '.25s cubic-bezier(.5, 1.35, .77, 1)';
-
-const top = createVar();
-const left = createVar();
-const transformOrigin = createVar();
-const minWidth = createVar();
-const maxHeight = createVar();
-
-export const vars = {
-    top,
-    left,
-    transformOrigin,
-    minWidth,
-    maxHeight,
-};
-
-const checkboxBase = sprinkles({
-    display: 'inline-block',
-    cursor: 'pointer',
-});
-
-export const checkboxVariants = styleVariants({
-    default: [checkboxBase, {cursor: 'pointer', padding: 4}],
-    ios: [checkboxBase, {cursor: 'pointer', padding: 0}],
-    disabled: [checkboxBase, {cursor: 'default', opacity: 0.5, padding: 4}],
-    disabledIos: [checkboxBase, {cursor: 'default', opacity: 0.5, padding: 0}],
-});
-
-const switchCheckboxContainerBase = style([
-    sprinkles({position: 'relative'}),
-    {
-        userSelect: 'none',
-    },
-]);
-
-export const switchCheckboxContainerVariants = styleVariants({
-    default: [switchCheckboxContainerBase, {width: 34}],
-    ios: [switchCheckboxContainerBase, {width: 51}],
-});
-
-export const switchCheckboxLabel = style([
-    sprinkles({display: 'block', overflow: 'hidden'}),
-    {
-        borderRadius: 40,
-    },
-]);
-
-const barBase = style([
-    sprinkles({
-        display: 'block',
-    }),
-    {
-        pointerEvents: 'none',
-        transition: `background ${SWITCH_ANIMATION}`,
-    },
-]);
-
-export const barVariants = styleVariants({
-    default: [barBase, {background: colorsVars.colors.control, height: 14}],
-    // Hardcoded color because the native switch in iOS doesn't allow modification of this color
-    ios: [barBase, {background: '#E9E9EA', height: 31}],
-    iosDark: [barBase, {background: '#39393D', height: 31}],
-    checked: [barBase, {background: colorsVars.colors.toggleAndroidBackgroundActive, height: 14}],
-    checkedIos: [barBase, {background: colorsVars.colors.controlActivated, height: 31}],
-});
-
-export const overBrandBarVariants = styleVariants({
-    default: [barBase, {background: colorsVars.colors.controlBrand, height: 14}],
-    // Hardcoded color because the native switch in iOS doesn't allow modification of this color
-    ios: [barBase, {background: '#E9E9EA', height: 31}],
-    iosDark: [barBase, {background: '#39393D', height: 31}],
-    checked: [barBase, {background: colorsVars.colors.toggleAndroidBackgroundActive, height: 14}],
-    checkedIos: [barBase, {background: colorsVars.colors.controlActivatedBrand, height: 31}],
-});
-
-export const overNegativeBarVariants = styleVariants({
-    default: [barBase, {background: colorsVars.colors.controlNegative, height: 14}],
-    // Hardcoded color because the native switch in iOS doesn't allow modification of this color
-    ios: [barBase, {background: '#E9E9EA', height: 31}],
-    iosDark: [barBase, {background: '#39393D', height: 31}],
-    checked: [barBase, {background: colorsVars.colors.toggleAndroidBackgroundActive, height: 14}],
-    checkedIos: [barBase, {background: colorsVars.colors.controlActivatedNegative, height: 31}],
-});
-
-const containerBase = style({
-    WebkitTapHighlightColor: 'transparent',
-});
-
-const MIN_TOUCHABLE_AREA = 48;
-
-export const interactiveArea = style({
-    '@media': {
-        [mq.touchableOnly]: {
-            /** In touchable devices, we force a minimum touchable area of 48px (without affecting content layout) */
-            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% - ${MIN_TOUCHABLE_AREA}px) / 2))`],
-                bottom: [0, `min(0px, calc((100% - ${MIN_TOUCHABLE_AREA}px) / 2))`],
-                left: [0, `min(0px, calc((100% - ${MIN_TOUCHABLE_AREA}px) / 2))`],
-                right: [0, `min(0px, calc((100% - ${MIN_TOUCHABLE_AREA}px) / 2))`],
-            },
-        },
-    },
-});
-
-export const container = style([
-    containerBase,
-    {
-        cursor: 'pointer',
-    },
-]);
-export const containerDisabled = style([
-    containerBase,
-    {
-        cursor: 'default',
-    },
-]);
-
-export const disabled = style({
-    cursor: 'default',
-    opacity: 0.5,
-});
-
-const ballBase = style([
-    sprinkles({
-        position: 'absolute',
-        bottom: 0,
-        display: 'block',
-        borderRadius: '50%',
-    }),
-    {margin: -4, transition: `all ${SWITCH_ANIMATION}`},
-]);
-
-const ballVariantsBase = styleVariants({
-    default: [ballBase, {top: 1, width: 20, height: 20, boxShadow: '1px 1px 2px rgba(0, 0, 0, 0.3)'}],
-    ios: [ballBase, {top: 6, width: 27, height: 27, boxShadow: '1px 2px 4px rgba(0, 0, 0, 0.3)'}],
-});
-
-export const ballVariants = styleVariants({
-    default: [
-        ballVariantsBase.default,
-        {right: 21, backgroundColor: colorsVars.colors.toggleAndroidInactive},
-    ],
-    ios: [ballVariantsBase.ios, {right: 26, backgroundColor: colorsVars.colors.iosControlKnob}],
-    checked: [ballVariantsBase.default, {right: 1, backgroundColor: colorsVars.colors.controlActivated}],
-    checkedIos: [ballVariantsBase.ios, {right: 6, backgroundColor: colorsVars.colors.iosControlKnob}],
-});
-
-export const overBrandBallVariants = styleVariants({
-    default: [
-        ballVariantsBase.default,
-        {right: 21, backgroundColor: colorsVars.colors.toggleAndroidInactive},
-    ],
-    ios: [ballVariantsBase.ios, {right: 26, backgroundColor: colorsVars.colors.iosControlKnob}],
-    checked: [ballVariantsBase.default, {right: 1, backgroundColor: colorsVars.colors.controlActivatedBrand}],
-    checkedIos: [ballVariantsBase.ios, {right: 6, backgroundColor: colorsVars.colors.controlKnobBrand}],
-});
-
-export const overNegativeBallVariants = styleVariants({
-    default: [
-        ballVariantsBase.default,
-        {right: 21, backgroundColor: colorsVars.colors.toggleAndroidInactive},
-    ],
-    ios: [ballVariantsBase.ios, {right: 26, backgroundColor: colorsVars.colors.iosControlKnob}],
-    checked: [
-        ballVariantsBase.default,
-        {right: 1, backgroundColor: colorsVars.colors.controlActivatedNegative},
-    ],
-    checkedIos: [ballVariantsBase.ios, {right: 6, backgroundColor: colorsVars.colors.controlKnobNegative}],
-});