@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/progress-bar.tsx

@@ -1,174 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useTheme} from './hooks';
-import {vars} from './skins/skin-contract.css';
-import * as styles from './progress-bar.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import classNames from 'classnames';
-import Inline from './inline';
-import * as tokens from './text-tokens';
-import {useThemeVariant} from './theme-variant-context';
-
-import type {DataAttributes} from './utils/types';
-
-type ProgressBarProps = {
-    progressPercent: number;
-    color?: string;
-    children?: void;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-hidden'?: React.HTMLAttributes<HTMLDivElement>['aria-hidden'];
-    dataAttributes?: DataAttributes;
-    reverse?: boolean;
-};
-
-export const ProgressBar = ({
-    progressPercent,
-    color,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    'aria-hidden': ariaHidden,
-    dataAttributes,
-    reverse = false,
-}: ProgressBarProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const themeVariant = useThemeVariant();
-    const progressValue = Math.max(0, Math.min(100, progressPercent));
-
-    const getFormattedValueText = () => {
-        const completedText = texts.progressBarCompletedLabel || t(tokens.progressBarCompletedLabel);
-
-        return `${progressValue.toFixed(1)}% ${completedText}`;
-    };
-
-    const a11yProps =
-        ariaHidden && ariaHidden !== 'false'
-            ? {'aria-hidden': ariaHidden}
-            : {
-                  role: 'progressbar',
-                  'aria-valuenow': progressValue,
-                  'aria-valuemin': 0,
-                  'aria-valuemax': 100,
-                  'aria-valuetext': getFormattedValueText(),
-                  'aria-label': ariaLabelledBy ? undefined : ariaLabel || texts.loading || t(tokens.loading),
-                  'aria-labelledby': ariaLabelledBy,
-              };
-
-    return (
-        <div
-            {...getPrefixedDataAttributes(dataAttributes, 'ProgressBar')}
-            className={styles.barBackground[themeVariant]}
-            {...a11yProps}
-        >
-            <div
-                className={classNames(styles.bar, reverse ? styles.inverse : styles.normal)}
-                style={{
-                    maxWidth: `${progressValue}%`,
-                    backgroundColor:
-                        color ??
-                        {
-                            default: vars.colors.controlActivated,
-                            alternative: vars.colors.controlActivated,
-                            brand: vars.colors.controlActivatedBrand,
-                            media: vars.colors.controlActivatedBrand,
-                            negative: vars.colors.controlActivatedNegative,
-                        }[themeVariant],
-                }}
-            />
-        </div>
-    );
-};
-
-type ProgressBarSteppedProps = {
-    steps: number;
-    currentStep?: number;
-    color?: string;
-    dataAttributes?: DataAttributes;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-hidden'?: React.HTMLAttributes<HTMLDivElement>['aria-hidden'];
-};
-
-export const ProgressBarStepped = ({
-    steps,
-    currentStep = 0,
-    color,
-    dataAttributes,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    'aria-hidden': ariaHidden,
-}: ProgressBarSteppedProps): JSX.Element => {
-    const {texts, t} = useTheme();
-    const themeVariant = useThemeVariant();
-
-    const [step, setStep] = React.useState(Math.ceil(currentStep));
-    const [isBack, setIsBack] = React.useState(false);
-
-    React.useEffect(() => {
-        const newStep = Math.ceil(currentStep);
-        if (step !== newStep) {
-            setIsBack(newStep < step);
-            setStep(newStep);
-        }
-    }, [currentStep, steps, step]);
-
-    const getFormattedValueText = () => {
-        const stepText = t(texts.progressBarStepLabel || tokens.progressBarStepLabel, step, steps);
-        return stepText;
-    };
-
-    const a11yProps =
-        ariaHidden && ariaHidden !== 'false'
-            ? {'aria-hidden': ariaHidden}
-            : {
-                  role: 'progressbar',
-                  'aria-valuenow': step,
-                  'aria-valuemin': 0,
-                  'aria-valuemax': steps,
-                  'aria-valuetext': getFormattedValueText(),
-                  'aria-label': ariaLabelledBy ? undefined : ariaLabel,
-                  'aria-labelledby': ariaLabelledBy,
-              };
-
-    return (
-        <div
-            {...getPrefixedDataAttributes(dataAttributes, 'ProgressBarStepped')}
-            role="progressbar"
-            {...a11yProps}
-            className={styles.progressBarSteppedContainer}
-        >
-            <Inline space={8} fullWidth>
-                {Array.from({length: steps}, (_, index) => {
-                    const isCurrent = index === step;
-                    const isCompleted = index < step;
-                    const hasAnimation = index === step - 1;
-
-                    return (
-                        <div key={index} className={styles.barBackground[themeVariant]} aria-hidden="true">
-                            {(isCompleted || isCurrent) && (
-                                <div
-                                    className={classNames(styles.bar, {
-                                        [styles.normal]: hasAnimation && !isBack,
-                                        [styles.inverse]: isCurrent && isBack,
-                                    })}
-                                    style={{
-                                        backgroundColor:
-                                            color ??
-                                            {
-                                                default: vars.colors.controlActivated,
-                                                alternative: vars.colors.controlActivated,
-                                                brand: vars.colors.controlActivatedBrand,
-                                                media: vars.colors.controlActivatedBrand,
-                                                negative: vars.colors.controlActivatedNegative,
-                                            }[themeVariant],
-                                        maxWidth: isCompleted || (hasAnimation && !isBack) ? '100%' : '0',
-                                    }}
-                                />
-                            )}
-                        </div>
-                    );
-                })}
-            </Inline>
-        </div>
-    );
-};

package/src/radio-button.css.ts

@@ -1,174 +0,0 @@
-import {style, styleVariants} from '@vanilla-extract/css';
-import {vars} from './skins/skin-contract.css';
-import {sprinkles} from './sprinkles.css';
-
-const outerCircleBase = style([
-    sprinkles({
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        cursor: 'pointer',
-        flexShrink: 0,
-        borderRadius: '50%',
-    }),
-    {
-        width: 20,
-        height: 20,
-        verticalAlign: 'middle',
-        transition: 'background 0.3s, box-shadow 0.3s',
-    },
-]);
-
-export const outerCircleVariants = styleVariants({
-    default: [
-        outerCircleBase,
-        {background: vars.colors.background, boxShadow: `inset 0 0 0 2px ${vars.colors.control}`},
-    ],
-    ios: [
-        outerCircleBase,
-        {background: vars.colors.background, boxShadow: `inset 0 0 0 1px ${vars.colors.control}`},
-    ],
-    checked: [
-        outerCircleBase,
-        {
-            boxShadow: `inset 0 0 0 2px ${vars.colors.controlActivated}`,
-            // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
-            background: vars.colors.background,
-        },
-    ],
-    checkedIos: [
-        outerCircleBase,
-        {
-            boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivated}`,
-            background: `radial-gradient(circle, ${vars.colors.iosControlKnob} 0%, ${vars.colors.iosControlKnob} 64%, transparent 64%, transparent 100%)`,
-        },
-    ],
-});
-
-export const overBrandOuterCircleVariants = styleVariants({
-    default: [
-        outerCircleBase,
-        {background: 'transparent', boxShadow: `inset 0 0 0 2px ${vars.colors.controlBrand}`},
-    ],
-    ios: [
-        outerCircleBase,
-        {background: 'transparent', boxShadow: `inset 0 0 0 1px ${vars.colors.controlBrand}`},
-    ],
-    checked: [
-        outerCircleBase,
-        {
-            boxShadow: `inset 0 0 0 2px ${vars.colors.controlActivatedBrand}`,
-            // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
-            background: 'transparent',
-        },
-    ],
-    checkedIos: [
-        outerCircleBase,
-        {
-            boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivatedBrand}`,
-            background: `radial-gradient(circle, ${vars.colors.controlKnobBrand} 0%, ${vars.colors.controlKnobBrand} 64%, transparent 64%, transparent 100%)`,
-        },
-    ],
-});
-
-export const overNegativeOuterCircleVariants = styleVariants({
-    default: [
-        outerCircleBase,
-        {background: 'transparent', boxShadow: `inset 0 0 0 2px ${vars.colors.controlBrand}`},
-    ],
-    ios: [
-        outerCircleBase,
-        {background: 'transparent', boxShadow: `inset 0 0 0 1px ${vars.colors.controlBrand}`},
-    ],
-    checked: [
-        outerCircleBase,
-        {
-            boxShadow: `inset 0 0 0 2px ${vars.colors.controlActivatedBrand}`,
-            // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
-            background: 'transparent',
-        },
-    ],
-    checkedIos: [
-        outerCircleBase,
-        {
-            boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivatedBrand}`,
-            background: `radial-gradient(circle, ${vars.colors.controlKnobBrand} 0%, ${vars.colors.controlKnobBrand} 64%, transparent 64%, transparent 100%)`,
-        },
-    ],
-});
-
-const innerCircleBase = style([
-    sprinkles({
-        display: 'flex',
-        borderRadius: '50%',
-    }),
-    {
-        height: 10,
-        width: 10,
-        opacity: 0,
-        transition: `transform 0.2s, opacity 0.2s`,
-        transform: 'scale(0)',
-    },
-]);
-
-export const innerCircleVariant = styleVariants({
-    default: [innerCircleBase],
-    checked: [
-        innerCircleBase,
-        sprinkles({
-            background: vars.colors.controlActivated,
-        }),
-        {
-            opacity: 1,
-            transform: 'none',
-        },
-    ],
-});
-
-export const overBrandInnerCircleVariant = styleVariants({
-    default: [innerCircleBase],
-    checked: [
-        innerCircleBase,
-        sprinkles({
-            background: vars.colors.controlActivatedBrand,
-        }),
-        {
-            opacity: 1,
-            transform: 'none',
-        },
-    ],
-});
-
-export const overNegativeInnerCircleVariant = styleVariants({
-    default: [innerCircleBase],
-    checked: [
-        innerCircleBase,
-        sprinkles({
-            background: vars.colors.controlActivatedNegative,
-        }),
-        {
-            opacity: 1,
-            transform: 'none',
-        },
-    ],
-});
-
-const radioButtonBase = style({
-    WebkitTapHighlightColor: 'transparent',
-});
-
-export const radioButton = style([
-    radioButtonBase,
-    {
-        cursor: 'pointer',
-    },
-]);
-
-export const radioButtonContainerDisabled = style([
-    radioButtonBase,
-    {
-        cursor: 'default',
-    },
-]);
-
-export const disabled = style({cursor: 'default', opacity: 0.5});

package/src/radio-button.tsx

@@ -1,322 +0,0 @@
-'use client';
-import * as React from 'react';
-import {SPACE, LEFT, UP, DOWN, RIGHT} from './utils/keys';
-import {useControlProps} from './form-context';
-import {combineRefs} from './utils/common';
-import {Text3} from './text';
-import Inline from './inline';
-import classnames from 'classnames';
-import {useTheme} from './hooks';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './radio-button.css';
-import {useThemeVariant} from './theme-variant-context';
-
-import type {DataAttributes} from './utils/types';
-
-type RadioContextType = {
-    id: string;
-    disabled?: boolean;
-    selectedValue?: string | null;
-    focusableValue?: string | null;
-    select: (value: string) => void;
-    selectNext: () => void;
-    selectPrev: () => void;
-};
-const RadioContext = React.createContext<RadioContextType>({
-    id: '',
-    disabled: false,
-    selectedValue: null,
-    focusableValue: null,
-    select: () => {},
-    selectNext: () => {},
-    selectPrev: () => {},
-});
-export const useRadioContext = (): RadioContextType => React.useContext(RadioContext);
-
-type PropsRender = {
-    value: string;
-    id?: string;
-    render: (renderProps: {
-        controlElement: React.ReactElement;
-        labelId: string;
-        disabled: boolean;
-        checked: boolean;
-    }) => React.ReactNode;
-    children?: undefined;
-    dataAttributes?: DataAttributes;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-};
-
-type PropsChildren = {
-    value: string;
-    id?: string;
-    children?: React.ReactNode;
-    render?: undefined;
-    dataAttributes?: DataAttributes;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-};
-
-const RadioButton = ({
-    value,
-    id,
-    dataAttributes,
-    'aria-labelledby': ariaLabelledby,
-    'aria-label': ariaLabel,
-    ...rest
-}: PropsRender | PropsChildren): JSX.Element => {
-    const {
-        id: groupId,
-        disabled,
-        selectedValue,
-        focusableValue,
-        select,
-        selectNext,
-        selectPrev,
-    } = useRadioContext();
-    const [isFirstRadio, setIsFirstRadio] = React.useState(false);
-    const reactId = React.useId();
-    const labelId = ariaLabelledby || reactId;
-    const ref = React.useRef<HTMLDivElement>(null);
-    const checked = value === selectedValue;
-    const {isIos} = useTheme();
-    const themeVariant = useThemeVariant();
-
-    /**
-     * The radio will gain focus with tab navigation if:
-     * - it is not disabled
-     * - it is the currently selected radio -OR- it is the first radio in the group and no radio is selected
-     */
-    const tabIndex = disabled
-        ? undefined
-        : focusableValue === value || (isFirstRadio && !selectedValue)
-          ? 0
-          : -1;
-
-    React.useEffect(() => {
-        const firstRadio = document.getElementById(groupId)?.querySelector('[role=radio]');
-        setIsFirstRadio(firstRadio === ref.current);
-    }, [groupId]);
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        switch (event.key) {
-            case SPACE:
-                select(value);
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case RIGHT:
-            case DOWN:
-                selectNext();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            case LEFT:
-            case UP:
-                selectPrev();
-                event.preventDefault();
-                event.stopPropagation();
-                break;
-            default:
-            // do nothing
-        }
-    };
-
-    const outerCircleVariant = isIos ? (checked ? 'checkedIos' : 'ios') : checked ? 'checked' : 'default';
-    const innerCircleVariant = checked ? 'checked' : 'default';
-
-    const radio = (
-        <div
-            className={classnames(
-                themeVariant === 'brand' || themeVariant === 'media'
-                    ? styles.overBrandOuterCircleVariants[outerCircleVariant]
-                    : themeVariant === 'negative'
-                      ? styles.overNegativeOuterCircleVariants[outerCircleVariant]
-                      : styles.outerCircleVariants[outerCircleVariant],
-                {
-                    [styles.disabled]: disabled,
-                }
-            )}
-        >
-            {!isIos && (
-                <div
-                    className={
-                        themeVariant === 'brand' || themeVariant === 'media'
-                            ? styles.overBrandInnerCircleVariant[innerCircleVariant]
-                            : themeVariant === 'negative'
-                              ? styles.overNegativeInnerCircleVariant[innerCircleVariant]
-                              : styles.innerCircleVariant[innerCircleVariant]
-                    }
-                />
-            )}
-        </div>
-    );
-
-    return (
-        <span
-            ref={ref}
-            id={id}
-            tabIndex={tabIndex}
-            role="radio"
-            data-value={value}
-            aria-checked={checked}
-            aria-disabled={disabled}
-            aria-label={ariaLabel}
-            aria-labelledby={ariaLabel ? undefined : labelId}
-            onClick={(e) => {
-                e.stopPropagation();
-                if (!disabled) {
-                    select(value);
-                }
-            }}
-            onKeyDown={disabled ? undefined : handleKeyDown}
-            className={disabled ? styles.radioButtonContainerDisabled : styles.radioButton}
-            {...getPrefixedDataAttributes(dataAttributes, 'RadioButton')}
-        >
-            {rest.render ? (
-                rest.render({controlElement: radio, disabled: !!disabled, checked, labelId})
-            ) : (
-                <Inline space={16}>
-                    {/* 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}}>{radio}</div>
-                    </Text3>
-                    <Text3 regular as="div" id={labelId}>
-                        <span className={disabled ? styles.disabled : ''}>{rest.children}</span>
-                    </Text3>
-                </Inline>
-            )}
-        </span>
-    );
-};
-
-type RadioGroupProps = {
-    name: string;
-    disabled?: boolean;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    children: React.ReactNode;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    dataAttributes?: DataAttributes;
-};
-
-export const RadioGroup = (props: RadioGroupProps): JSX.Element => {
-    const {
-        value: valueContext,
-        defaultValue,
-        onChange: onChangeContext,
-        focusableRef,
-        disabled,
-    } = useControlProps({
-        name: props.name,
-        value: props.value,
-        defaultValue: props.defaultValue,
-        onChange: props.onChange,
-        disabled: props.disabled,
-    });
-
-    const id = React.useId();
-
-    const isControlledByParent = typeof valueContext !== 'undefined';
-
-    // This state is needed because the component should be able to work outside a Form context
-    const [value, setValue] = React.useState<string>(valueContext ?? defaultValue ?? '');
-
-    // Propagate context value to inner state
-    React.useEffect(() => {
-        if (valueContext !== undefined) {
-            setValue(valueContext);
-        }
-    }, [valueContext]);
-
-    const onChange = (value: string) => {
-        if (!isControlledByParent) {
-            setValue(value);
-        }
-        onChangeContext(value);
-    };
-
-    const [firstRadioValue, setFirstRadioValue] = React.useState<string | null>(null);
-    const ref = React.useRef<HTMLDivElement>(null);
-
-    const selectNext = () => {
-        if (ref.current) {
-            const checkedRadio: null | HTMLElement = ref.current.querySelector(
-                '[role=radio][aria-checked=true]'
-            );
-            const allRadios: Array<HTMLElement> = Array.from(ref.current.querySelectorAll('[role=radio]'));
-            if (allRadios.length === 0) {
-                return;
-            }
-            const index = checkedRadio ? allRadios.indexOf(checkedRadio) : 0;
-            const nextIndex = (index + 1) % allRadios.length;
-            const nextRadio = allRadios[nextIndex];
-            const value = nextRadio.dataset.value;
-            if (value) {
-                nextRadio.focus();
-                onChange(value);
-            }
-        }
-    };
-
-    const selectPrev = () => {
-        if (ref.current) {
-            const checkedRadio: null | HTMLElement = ref.current.querySelector(
-                '[role=radio][aria-checked=true]'
-            );
-            const allRadios: Array<HTMLElement> = Array.from(ref.current.querySelectorAll('[role=radio]'));
-            if (allRadios.length === 0) {
-                return;
-            }
-            const index = checkedRadio ? allRadios.indexOf(checkedRadio) : 0;
-            const prevIndex = (allRadios.length + index - 1) % allRadios.length;
-            const prevRadio = allRadios[prevIndex];
-            const value = prevRadio.dataset.value;
-            if (value) {
-                prevRadio.focus();
-                onChange(value);
-            }
-        }
-    };
-
-    React.useEffect(() => {
-        if (ref.current) {
-            const radio: null | HTMLElement = ref.current.querySelector('[role=radio]');
-            if (radio) {
-                setFirstRadioValue(radio.dataset.value ?? null);
-            }
-        }
-    }, []);
-
-    const focusableValue = value ?? firstRadioValue ?? null;
-
-    return (
-        <div
-            ref={combineRefs(ref, focusableRef)}
-            id={id}
-            role="radiogroup"
-            aria-label={props['aria-label']}
-            aria-labelledby={props['aria-label'] ? undefined : props['aria-labelledby']}
-            {...getPrefixedDataAttributes(props.dataAttributes, 'RadioGroup')}
-        >
-            <RadioContext.Provider
-                value={{
-                    id,
-                    disabled,
-                    selectedValue: value ?? defaultValue,
-                    focusableValue,
-                    select: onChange,
-                    selectNext,
-                    selectPrev,
-                }}
-            >
-                {props.children}
-            </RadioContext.Provider>
-        </div>
-    );
-};
-
-export default RadioButton;