@telefonica/mistica 16.60.0 → 16.62.0-beta.1

package/src/stepper.css.ts

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

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

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