@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/progress-bar.tsx

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

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

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