@telefonica/mistica 16.58.0-beta.2 → 16.59.0-beta.1

package/src/time-field.tsx

@@ -0,0 +1,99 @@
+'use client';
+import * as React from 'react';
+import {useFieldProps} from './form-context';
+import {TextFieldBaseAutosuggest} from './text-field-base';
+import IconTimeRegular from './generated/mistica-icons/icon-time-regular';
+import {useTheme} from './hooks';
+import * as dateStyles from './date-field.css';
+import {iconSize} from './icon-button.css';
+import * as tokens from './text-tokens';
+
+import type {CommonFormFieldProps} from './text-field-base';
+
+export interface TimeFieldProps extends CommonFormFieldProps {
+    onChangeValue?: (value: string, rawValue: string) => void;
+    min?: string;
+    max?: string;
+}
+
+const TimeField = ({
+    disabled,
+    error,
+    helperText,
+    name,
+    label,
+    optional,
+    validate: validateProp,
+    validateOnBlurInsideForm,
+    onChange,
+    onChangeValue: onChangeValueProp,
+    onBlur,
+    value,
+    defaultValue,
+    min,
+    max,
+    dataAttributes,
+    ...rest
+}: TimeFieldProps): JSX.Element => {
+    const processValue = (value: string) => value;
+    const {texts, t} = useTheme();
+
+    const isInRange = (value: string): boolean => {
+        if (min && value && value < min) {
+            return false;
+        }
+        if (max && value && value > max) {
+            return false;
+        }
+        return true;
+    };
+
+    const validate = (value: string, rawValue: string) => {
+        if (!isInRange(value)) {
+            return texts.formDateOutOfRangeError || t(tokens.formDateOutOfRangeError);
+        }
+        return validateProp?.(value, rawValue);
+    };
+
+    const onChangeValue = (value: string, rawValue: string) => {
+        if (isInRange(value)) {
+            onChangeValueProp?.(value, rawValue);
+        }
+        // if not in range, onChangeValue is not called
+    };
+
+    const fieldProps = useFieldProps({
+        name,
+        label,
+        value,
+        defaultValue,
+        processValue,
+        helperText,
+        optional,
+        error,
+        disabled,
+        onBlur,
+        validate,
+        validateOnBlurInsideForm,
+        onChange,
+        onChangeValue,
+    });
+
+    return (
+        <TextFieldBaseAutosuggest
+            {...rest}
+            {...fieldProps}
+            min={min}
+            max={max}
+            type="time"
+            endIconOverlay={
+                <div className={dateStyles.iconContainer} data-testid="endIcon">
+                    <IconTimeRegular size={iconSize.small} />
+                </div>
+            }
+            dataAttributes={{'component-name': 'TimeField', testid: 'TimeField', ...dataAttributes}}
+        />
+    );
+};
+
+export default TimeField;

package/src/timeline.css.ts

@@ -0,0 +1,135 @@
+import {globalStyle, style, styleVariants} from '@vanilla-extract/css';
+import {vars} from './skins/skin-contract.css';
+import {sprinkles} from './sprinkles.css';
+
+export const timeline = styleVariants({
+    vertical: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    horizontal: {
+        display: 'flex',
+        flexDirection: 'row',
+    },
+});
+
+export const timelineItem = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'stretch',
+    }),
+    {
+        selectors: {
+            [`${timeline.horizontal} &`]: {
+                flex: 1,
+                flexDirection: 'column',
+                marginRight: 16,
+            },
+            [`${timeline.vertical} &`]: {
+                flexDirection: 'row',
+                marginBottom: 16,
+            },
+            '&:last-child': {
+                marginBottom: 0,
+                marginRight: 0,
+            },
+        },
+    },
+]);
+
+export const itemContent = style([
+    sprinkles({
+        flex: 1,
+        minHeight: 72,
+        paddingBottom: 8,
+    }),
+    {
+        minWidth: 240,
+    },
+]);
+
+export const timelineItemState = styleVariants({
+    active: {},
+    inactive: {},
+    completed: {},
+});
+
+export const lineContainer = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+    }),
+    {
+        selectors: {
+            [`${timeline.horizontal} &`]: {
+                flexDirection: 'row',
+                // height: 40,
+                marginBottom: 16,
+            },
+            [`${timeline.vertical} &`]: {
+                flexDirection: 'column',
+                // width: 40,
+                marginRight: 16,
+            },
+        },
+    },
+]);
+
+export const asset = style({
+    selectors: {
+        [`${timeline.horizontal} &`]: {
+            marginRight: 16,
+        },
+        [`${timeline.vertical} &`]: {
+            marginBottom: 16,
+        },
+    },
+});
+
+globalStyle(`${asset} svg`, {
+    display: 'block',
+});
+
+export const assetNumberContainer = style([
+    sprinkles({
+        width: 32,
+        height: 32,
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: vars.colors.backgroundContainer,
+    }),
+    {
+        border: `2px solid ${vars.colors.borderHigh}`,
+        selectors: {
+            [`${timelineItemState.active} &`]: {
+                borderColor: vars.colors.textActivated,
+            },
+        },
+    },
+]);
+
+const lineCommon = style([
+    sprinkles({
+        flex: 1,
+    }),
+    {
+        selectors: {
+            [`${timeline.horizontal} &`]: {
+                height: 2,
+            },
+            [`${timeline.vertical} &`]: {
+                width: 2,
+            },
+            [`${timelineItem}:last-child &`]: {
+                display: 'none',
+            },
+        },
+    },
+]);
+
+export const line = styleVariants({
+    default: [lineCommon, {backgroundColor: vars.colors.barTrack}],
+    overBrand: [lineCommon, {backgroundColor: vars.colors.barTrackBrand}],
+});

package/src/timeline.tsx

@@ -0,0 +1,250 @@
+'use client';
+import * as React from 'react';
+import * as styles from './timeline.css';
+import classNames from 'classnames';
+import Circle from './circle';
+import {vars} from './skins/skin-contract.css';
+import IconCheckFilled from './generated/mistica-icons/icon-check-filled';
+import {Text1} from './text';
+import {useThemeVariant, ThemeVariant} from './theme-variant-context';
+import {useTheme} from './hooks';
+import {getPrefixedDataAttributes} from './utils/dom';
+import {isRunningAcceptanceTest} from './utils/platform';
+
+import type {ExclusifyUnion} from './utils/utility-types';
+import type {IconProps} from './utils/types';
+
+type TimelineItemCommonProps = {
+    children: React.ReactNode;
+    role?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    dataAttributes?: Record<string, string>;
+    state: 'active' | 'inactive' | 'completed';
+};
+
+type TimelineItemProps = TimelineItemCommonProps &
+    ExclusifyUnion<
+        | {
+              state: 'active' | 'inactive';
+              asset?:
+                  | React.ReactNode
+                  | {
+                        kind: 'dot';
+                    }
+                  | {
+                        kind: 'number';
+                        number: number;
+                    }
+                  | {
+                        kind: 'icon';
+                        Icon: (props: IconProps) => JSX.Element;
+                    }
+                  | {
+                        kind: 'circled-icon';
+                        Icon: (props: IconProps) => JSX.Element;
+                    };
+          }
+        | {
+              state: 'completed';
+              asset?:
+                  | React.ReactNode
+                  | {
+                        kind: 'dot';
+                    }
+                  | {
+                        kind: 'number';
+                        number?: number;
+                    }
+                  | {
+                        kind: 'icon';
+                        Icon?: (props: IconProps) => JSX.Element;
+                    }
+                  | {
+                        kind: 'circled-icon';
+                        Icon?: (props: IconProps) => JSX.Element;
+                    };
+          }
+    >;
+
+const AnimatedCircle = ({begin, stroke}: {begin?: string; stroke: string}) => {
+    const animationProps = {
+        dur: '2s',
+        repeatCount: 'indefinite',
+        calcMode: 'spline',
+        keyTimes: '0; 1',
+        keySplines: '0.42, 0, 0.58, 1', // ease-in-out
+    };
+    return (
+        <circle cx="12" cy="12" r="6" strokeWidth={1} stroke={stroke} fill="none">
+            <animate attributeName="r" values="6; 11" {...animationProps} begin={begin} />
+            <animate attributeName="opacity" values="1; 0" {...animationProps} begin={begin} />
+        </circle>
+    );
+};
+
+export const TimelineItem = ({
+    asset = {kind: 'dot'},
+    state = 'inactive',
+    role = 'listitem',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    dataAttributes,
+    children,
+}: TimelineItemProps): JSX.Element => {
+    const {isDarkMode} = useTheme();
+    const themeVariant = useThemeVariant();
+    const backgroundVariant = isDarkMode ? 'default' : themeVariant;
+    const isOverBrand = backgroundVariant === 'brand';
+
+    const renderCompletedCircle = ({size, iconSize}: {size: number; iconSize: number}) => (
+        <Circle
+            background={
+                isOverBrand
+                    ? vars.colors.backgroundContainerBrandOverBrand
+                    : vars.colors.backgroundContainerBrand
+            }
+            size={size}
+        >
+            <IconCheckFilled size={iconSize} color={vars.colors.inverse} />
+        </Circle>
+    );
+
+    const renderAsset = () => {
+        if (!asset) {
+            return null;
+        }
+        if (typeof asset === 'object' && 'kind' in asset) {
+            const completedOrActiveColor = isOverBrand
+                ? vars.colors.controlActivatedBrand
+                : vars.colors.controlActivated;
+
+            const inactiveColor = isOverBrand ? vars.colors.controlBrand : vars.colors.control;
+
+            const bareAssetColor = {
+                inactive: inactiveColor,
+                active: completedOrActiveColor,
+                completed: completedOrActiveColor,
+            }[state];
+
+            switch (asset.kind) {
+                case 'dot':
+                    return (
+                        <svg style={{display: 'block'}} width="24" height="24" viewBox="0 0 24 24">
+                            {state === 'active' && !isRunningAcceptanceTest() && (
+                                <>
+                                    <AnimatedCircle stroke={bareAssetColor} />
+                                    <AnimatedCircle stroke={bareAssetColor} begin="1s" />
+                                </>
+                            )}
+                            <circle
+                                cx="12"
+                                cy="12"
+                                r="6"
+                                strokeWidth={2}
+                                stroke={bareAssetColor}
+                                fill={state === 'completed' ? bareAssetColor : 'none'}
+                            />
+                        </svg>
+                    );
+                case 'number':
+                    return state === 'completed' ? (
+                        renderCompletedCircle({size: 32, iconSize: 16})
+                    ) : (
+                        <div className={styles.assetNumberContainer}>
+                            <ThemeVariant variant="default">
+                                <Text1
+                                    medium
+                                    color={
+                                        state === 'active'
+                                            ? vars.colors.textActivated
+                                            : vars.colors.textSecondary
+                                    }
+                                >
+                                    {asset.number}
+                                </Text1>
+                            </ThemeVariant>
+                        </div>
+                    );
+                case 'icon':
+                    return state === 'completed' ? (
+                        <IconCheckFilled size={24} color={bareAssetColor} />
+                    ) : asset.Icon ? (
+                        <asset.Icon size={24} color={bareAssetColor} />
+                    ) : null;
+                case 'circled-icon':
+                    return state === 'completed' ? (
+                        renderCompletedCircle({size: 40, iconSize: 24})
+                    ) : (
+                        <Circle background={vars.colors.backgroundContainer} size={40} border={!isOverBrand}>
+                            {asset.Icon && (
+                                <asset.Icon
+                                    size={24}
+                                    color={
+                                        state === 'inactive'
+                                            ? vars.colors.control
+                                            : vars.colors.controlActivated
+                                    }
+                                />
+                            )}
+                        </Circle>
+                    );
+                default:
+                    asset satisfies never;
+                    return null;
+            }
+        }
+        return asset;
+    };
+
+    return (
+        <div
+            className={classNames(styles.timelineItem, styles.timelineItemState[state])}
+            role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            aria-current={state === 'active' ? 'step' : undefined}
+            {...getPrefixedDataAttributes(dataAttributes, 'TimelineItem')}
+        >
+            <div className={styles.lineContainer}>
+                <div className={styles.asset} aria-hidden>
+                    {renderAsset()}
+                </div>
+                <div className={styles.line[isOverBrand ? 'overBrand' : 'default']} />
+            </div>
+            <div className={styles.itemContent}>{children}</div>
+        </div>
+    );
+};
+
+type TimelineProps = {
+    children?: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    role?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    dataAttributes?: Record<string, string>;
+};
+
+const Timeline = ({
+    children,
+    orientation = 'vertical',
+    role = 'list',
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    dataAttributes,
+}: TimelineProps): JSX.Element => {
+    return (
+        <div
+            className={styles.timeline[orientation]}
+            role={role}
+            aria-label={ariaLabel}
+            aria-labelledby={ariaLabelledby}
+            {...getPrefixedDataAttributes(dataAttributes, 'Timeline')}
+        >
+            {children}
+        </div>
+    );
+};
+
+export default Timeline;

package/src/timer.css.ts

@@ -0,0 +1,99 @@
+import {style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import * as mq from './media-queries.css';
+import {pxToRem} from './utils/css';
+import {vars} from './skins/skin-contract.css';
+import {applyAlpha} from './utils/color';
+
+export const timerWrapper = sprinkles({display: 'inline-block'});
+
+export const inlineText = style({
+    textDecoration: 'inherit',
+});
+
+export const unitContainer = style([
+    inlineText,
+    sprinkles({
+        display: 'inline-flex',
+        justifyContent: 'center',
+    }),
+]);
+
+export const shortLabelText = style([
+    inlineText,
+    sprinkles({
+        display: 'inline-block',
+    }),
+]);
+
+export const timerDisplayValue = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    }),
+]);
+
+export const boxedTimerDisplayValue = style([
+    {
+        minWidth: pxToRem(64),
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                minWidth: pxToRem(56),
+            },
+        },
+    },
+]);
+
+const baseBoxedTimerValueContainer = style([
+    sprinkles({
+        paddingX: 4,
+        paddingY: 8,
+        borderRadius: vars.borderRadii.container,
+    }),
+    {
+        '@media': {
+            [mq.tabletOrSmaller]: {
+                paddingTop: 10,
+                paddingBottom: 10,
+            },
+        },
+    },
+]);
+
+export const boxedTimerValueContainer = styleVariants({
+    default: [
+        baseBoxedTimerValueContainer,
+        sprinkles({
+            background: vars.colors.brandLow,
+        }),
+    ],
+
+    brand: [
+        baseBoxedTimerValueContainer,
+        sprinkles({
+            background: vars.colors.backgroundContainer,
+        }),
+    ],
+
+    negative: [
+        baseBoxedTimerValueContainer,
+        sprinkles({
+            background: vars.colors.backgroundContainer,
+        }),
+    ],
+
+    alternative: [
+        baseBoxedTimerValueContainer,
+        sprinkles({
+            background: vars.colors.backgroundContainer,
+        }),
+    ],
+
+    media: [
+        baseBoxedTimerValueContainer,
+        style({
+            background: applyAlpha(vars.rawColors.backgroundContainer, 0.7),
+        }),
+    ],
+});