@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/time-field.tsx

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

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

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

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