@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/spinner.tsx

@@ -1,136 +0,0 @@
-'use client';
-import * as React from 'react';
-import FadeIn from './fade-in';
-import {useTheme} from './hooks';
-import {vars} from './skins/skin-contract.css';
-import * as styles from './spinner.css';
-import * as tokens from './text-tokens';
-import {useThemeVariant} from './theme-variant-context';
-import {getPlatform} from './utils/platform';
-
-type Props = {
-    color?: string;
-    delay?: string;
-    size?: number | string;
-    /** @deprecated Use aria-hidden instead */
-    rolePresentation?: boolean;
-    'aria-hidden'?: 'true' | 'false' | boolean;
-    'aria-label'?: string;
-    'aria-live'?: 'off' | 'polite' | 'assertive';
-    style?: React.CSSProperties;
-    children?: void;
-};
-
-const Spinner = ({
-    color,
-    delay = '500ms',
-    size = 24,
-    style,
-    rolePresentation,
-    'aria-hidden': ariaHidden,
-    'aria-label': ariaLabel,
-    'aria-live': ariaLive = 'polite',
-}: Props): JSX.Element => {
-    const {texts, platformOverrides, t} = useTheme();
-    const variant = useThemeVariant();
-    color =
-        color ||
-        {
-            default: vars.colors.controlActivated,
-            alternative: vars.colors.controlActivated,
-            brand: vars.colors.controlBrand,
-            negative: vars.colors.controlNegative,
-            media: vars.colors.controlNegative,
-        }[variant];
-    const label = ariaLabel || texts.loading || t(tokens.loading);
-    const content =
-        getPlatform(platformOverrides) === 'ios' ? (
-            <svg
-                className={styles.spinnerIos}
-                height={size}
-                style={{...style}}
-                role="progressbar"
-                aria-live={ariaLive}
-                aria-label={label}
-                aria-hidden={ariaHidden || rolePresentation}
-                viewBox="0 0 30 30"
-                width={size}
-            >
-                <g role="presentation">
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M14 1.5C14 0.671573 14.6716 0 15.5 0C16.3284 0 17 0.671573 17 1.5V8.5C17 9.32843 16.3284 10 15.5 10C14.6716 10 14 9.32843 14 8.5V1.5Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M21.182 11.1317C20.5962 11.7175 19.6464 11.7175 19.0607 11.1317C18.4749 10.5459 18.4749 9.59619 19.0607 9.01041L24.0104 4.06066C24.5962 3.47487 25.5459 3.47487 26.1317 4.06066C26.7175 4.64645 26.7175 5.59619 26.1317 6.18198L21.182 11.1317Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M28.5 13C29.3284 13 30 13.6716 30 14.5C30 15.3284 29.3284 16 28.5 16H21.5C20.6716 16 20 15.3284 20 14.5C20 13.6716 20.6716 13 21.5 13H28.5Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M19.0607 20.182C18.4749 19.5962 18.4749 18.6464 19.0607 18.0607C19.6464 17.4749 20.5962 17.4749 21.182 18.0607L26.1317 23.0104C26.7175 23.5962 26.7175 24.5459 26.1317 25.1317C25.5459 25.7175 24.5962 25.7175 24.0104 25.1317L19.0607 20.182Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M14 21.5C14 20.6716 14.6716 20 15.5 20C16.3284 20 17 20.6716 17 21.5V28.5C17 29.3284 16.3284 30 15.5 30C14.6716 30 14 29.3284 14 28.5V21.5Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M7.18198 25.1317C6.59619 25.7175 5.64645 25.7175 5.06066 25.1317C4.47487 24.5459 4.47487 23.5962 5.06066 23.0104L10.0104 18.0607C10.5962 17.4749 11.5459 17.4749 12.1317 18.0607C12.7175 18.6464 12.7175 19.5962 12.1317 20.182L7.18198 25.1317Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M8.5 13C9.32843 13 10 13.6716 10 14.5C10 15.3284 9.32843 16 8.5 16H1.5C0.671573 16 0 15.3284 0 14.5C0 13.6716 0.671573 13 1.5 13H8.5Z"
-                    />
-                    <path
-                        className={styles.spinnerIosSvgPath}
-                        fill={color}
-                        d="M5.06066 6.18198C4.47487 5.59619 4.47487 4.64645 5.06066 4.06066C5.64645 3.47487 6.59619 3.47487 7.18198 4.06066L12.1317 9.01041C12.7175 9.59619 12.7175 10.5459 12.1317 11.1317C11.5459 11.7175 10.5962 11.7175 10.0104 11.1317L5.06066 6.18198Z"
-                    />
-                </g>
-            </svg>
-        ) : (
-            <div aria-hidden={ariaHidden || rolePresentation} aria-live={ariaLive}>
-                <svg
-                    role="progressbar"
-                    aria-label={label}
-                    className={styles.spinnerDefault}
-                    height={size}
-                    style={{...style}}
-                    viewBox="0 0 66 66"
-                    width={size}
-                >
-                    <circle
-                        className={styles.spinnerDefaultPath}
-                        cx="33"
-                        cy="33"
-                        fill="none"
-                        r="30"
-                        role="presentation"
-                        stroke={color}
-                        strokeWidth="6"
-                    />
-                </svg>
-            </div>
-        );
-    if (delay === '0' || delay === '0s' || delay === '0ms') {
-        return content;
-    }
-    return (
-        <FadeIn delay={delay} dataAttributes={{'component-name': 'Spinner'}}>
-            {content}
-        </FadeIn>
-    );
-};
-
-export default Spinner;

package/src/sprinkles.css.ts

@@ -1,83 +0,0 @@
-import {defineProperties, createSprinkles} from '@vanilla-extract/sprinkles';
-import {vars} from './skins/skin-contract.css';
-import * as mq from './media-queries.css';
-
-type ColorKeys = keyof typeof vars.colors;
-type ColorValues = (typeof vars.colors)[ColorKeys];
-
-const colors: Array<ColorValues | 'transparent' | 'inherit'> = [
-    ...Object.values(vars.colors),
-    'transparent',
-    'inherit',
-];
-
-const colorProperties = defineProperties({
-    properties: {
-        color: colors,
-        background: [...colors, 'transparent'],
-    },
-});
-
-const sizes = [0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80] as const;
-
-const responsiveProperties = defineProperties({
-    conditions: {
-        mobile: {},
-        tablet: {'@media': mq.tablet},
-        desktop: {'@media': mq.desktopOrBigger},
-    },
-    defaultCondition: 'mobile',
-    properties: {
-        paddingTop: sizes,
-        paddingBottom: sizes,
-        paddingLeft: sizes,
-        paddingRight: sizes,
-        columnGap: sizes,
-        rowGap: sizes,
-        gridColumnGap: sizes,
-        gridRowGap: sizes,
-    },
-    shorthands: {
-        padding: ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight'],
-        paddingX: ['paddingLeft', 'paddingRight'],
-        paddingY: ['paddingTop', 'paddingBottom'],
-    },
-});
-
-const commonProperties = defineProperties({
-    properties: {
-        isolation: ['isolate'],
-        position: ['relative', 'absolute', 'fixed', 'static', 'sticky'],
-        display: ['none', 'flex', 'inline-flex', 'block', 'inline', 'inline-block'],
-        flexDirection: ['row', 'column'],
-        justifyContent: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],
-        alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
-        flexShrink: [0, 1],
-        flexGrow: [0, 1],
-        flex: [1],
-        width: ['100%', 'auto', ...sizes],
-        height: ['100%', ...sizes],
-        minWidth: ['100%', ...sizes],
-        minHeight: sizes,
-        maxWidth: ['100%'],
-        maxHeight: ['100%'],
-        border: {
-            regular: `1px solid ${vars.colors.border}`,
-            none: 'none',
-            input: `1px solid ${vars.colors.inputBorder}`,
-        },
-        borderRadius: ['50%', 2, 4, 8, 16, 20, ...Object.values(vars.borderRadii)],
-        cursor: ['pointer'],
-        overflow: ['hidden', 'visible', 'auto'],
-        overflowY: ['hidden', 'visible', 'auto'],
-        top: sizes,
-        left: sizes,
-        right: sizes,
-        bottom: sizes,
-        objectFit: ['cover'],
-    } as const,
-});
-
-export const sprinkles = createSprinkles(commonProperties, responsiveProperties, colorProperties);
-
-export type Sprinkles = Parameters<typeof sprinkles>[0];

package/src/square.css.ts

@@ -1,15 +0,0 @@
-import {style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import {vars} from './skins/skin-contract.css';
-
-export const square = style([
-    {
-        boxSizing: 'border-box',
-        borderRadius: `min(${vars.borderRadii.container}, 25%)`,
-    },
-    sprinkles({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    }),
-]);

package/src/square.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import * as styles from './square.css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-
-import type {DataAttributes} from './utils/types';
-import type {ExclusifyUnion} from './utils/utility-types';
-
-type CommonProps = {
-    size?: number | string;
-    children?: React.ReactNode;
-    border?: boolean | string;
-    borderRadius?: string;
-    dataAttributes?: DataAttributes;
-};
-
-type BackgroundProps = {background: string};
-type BackgroundShorthandProps = {backgroundColor?: string; backgroundImage?: string};
-
-type Props = CommonProps & ExclusifyUnion<BackgroundProps | BackgroundShorthandProps>;
-
-const Square = ({
-    children,
-    background,
-    backgroundColor,
-    backgroundImage,
-    size,
-    border,
-    borderRadius,
-    dataAttributes,
-}: Props): JSX.Element => {
-    const borderColor = border === true ? vars.colors.border : border;
-    const borderProp = border ? `1px solid ${borderColor}` : undefined;
-    const imageStyle = backgroundImage ? `url(${backgroundImage})` : '';
-
-    return (
-        <div
-            className={styles.square}
-            style={{
-                width: size,
-                height: size,
-                background: background
-                    ? background
-                    : `center / cover no-repeat ${imageStyle} ${backgroundColor || ''}`,
-                border: borderProp,
-                borderRadius,
-            }}
-            {...getPrefixedDataAttributes(dataAttributes, 'Square')}
-        >
-            {children}
-        </div>
-    );
-};
-
-export default Square;

package/src/stack.css.ts

@@ -1,44 +0,0 @@
-import {style, createVar, globalStyle, fallbackVar} from '@vanilla-extract/css';
-import * as mq from './media-queries.css';
-
-const space = createVar();
-const spaceMobile = createVar();
-const spaceTablet = createVar();
-const spaceDesktop = createVar();
-
-export const vars = {space, spaceMobile, spaceTablet, spaceDesktop};
-
-export const marginStack = style({
-    '@media': {
-        [mq.mobile]: {
-            vars: {
-                [space]: spaceMobile,
-            },
-        },
-        [mq.tablet]: {
-            vars: {
-                [space]: fallbackVar(spaceTablet, spaceMobile),
-            },
-        },
-        [mq.desktopOrBigger]: {
-            vars: {
-                [space]: spaceDesktop,
-            },
-        },
-    },
-});
-
-globalStyle(`${marginStack} > div:not(:empty) ~ div:not(:empty)`, {
-    marginTop: space,
-});
-
-export const flexStack = style({
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    justifyContent: space,
-});
-
-globalStyle(`${flexStack} > div:empty`, {
-    display: 'none',
-});

package/src/stack.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import classnames from 'classnames';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './stack.css';
-import {applyCssVars} from './utils/css';
-
-import type {ByBreakpoint, DataAttributes} from './utils/types';
-
-type NumericSpace = 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72 | 80;
-type FlexSpace = 'between' | 'around' | 'evenly';
-
-const calcSpaceValue = (space: NumericSpace | FlexSpace) => {
-    if (typeof space === 'number') {
-        return `${space}px`;
-    } else {
-        return `space-${space}`;
-    }
-};
-
-const calcInlineVars = (space: FlexSpace | ByBreakpoint<NumericSpace>) => {
-    if (typeof space === 'number' || typeof space === 'string') {
-        return {
-            [styles.vars.space]: calcSpaceValue(space),
-        };
-    }
-    const vars = {
-        [styles.vars.spaceMobile]: calcSpaceValue(space.mobile),
-        [styles.vars.spaceDesktop]: calcSpaceValue(space.desktop),
-    };
-    if (space.tablet) {
-        vars[styles.vars.spaceTablet] = calcSpaceValue(space.tablet);
-    }
-    return vars;
-};
-
-type Props = {
-    space: FlexSpace | ByBreakpoint<NumericSpace>;
-    children: React.ReactNode;
-    className?: string;
-    role?: string;
-    'aria-labelledby'?: string;
-    'aria-label'?: string;
-    'aria-live'?: 'polite' | 'off' | 'assertive';
-    'aria-atomic'?: boolean;
-    dataAttributes?: DataAttributes;
-};
-
-const Stack = ({
-    space,
-    className,
-    children,
-    role,
-    'aria-labelledby': ariaLabelledby,
-    'aria-label': ariaLabel,
-    'aria-live': ariaLive,
-    'aria-atomic': ariaAtomic,
-    dataAttributes,
-}: Props): JSX.Element => {
-    const isFlexStack = typeof space === 'string';
-
-    return (
-        <div
-            className={classnames(className, isFlexStack ? styles.flexStack : styles.marginStack)}
-            style={applyCssVars(calcInlineVars(space))}
-            role={role}
-            aria-labelledby={ariaLabelledby}
-            aria-label={ariaLabel}
-            aria-live={ariaLive}
-            aria-atomic={ariaAtomic}
-            {...getPrefixedDataAttributes(dataAttributes)}
-        >
-            {React.Children.map(children, (child) => (
-                <div role={role === 'list' ? 'listitem' : undefined}>{child}</div>
-            ))}
-        </div>
-    );
-};
-
-export default Stack;

package/src/stacking-group.css.ts

@@ -1,15 +0,0 @@
-import {sprinkles} from './sprinkles.css';
-import {style} from '@vanilla-extract/css';
-
-export const moreItems = style([
-    sprinkles({
-        display: 'flex',
-        position: 'relative',
-        justifyContent: 'center',
-        alignItems: 'center',
-    }),
-    {
-        boxSizing: 'border-box',
-        zIndex: 1,
-    },
-]);

package/src/stacking-group.tsx

@@ -1,82 +0,0 @@
-'use client';
-import * as React from 'react';
-import {useThemeVariant} from './theme-variant-context';
-import {vars} from './skins/skin-contract.css';
-import Inline from './inline';
-import * as styles from './stacking-group.css';
-import * as mediaStyles from './image.css';
-import {applyCssVars} from './utils/css';
-import {renderText} from './avatar';
-
-type Props = {
-    stacked?: boolean;
-    moreItemsStyle: {
-        type: 'circle' | 'square';
-        size: number;
-    };
-    maxItems?: number;
-    children: React.ReactNode;
-};
-
-const StackingGroup = ({
-    moreItemsStyle,
-    stacked = true,
-    maxItems = Infinity,
-    children,
-}: Props): JSX.Element => {
-    const variant = useThemeVariant();
-    const countChildren = React.Children.count(children);
-    const moreItemsCount = countChildren - maxItems + 1;
-    const space = stacked ? -8 : 8;
-    const size = moreItemsStyle.size;
-
-    const borderRadius = moreItemsStyle.type === 'circle' ? '50%' : vars.borderRadii.mediaSmall;
-
-    const textColor = {
-        default: vars.colors.textBrand,
-        alternative: vars.colors.textBrand,
-        brand: vars.colors.textPrimaryBrand,
-        negative: vars.colors.textPrimaryNegative,
-        media: vars.colors.textPrimaryNegative,
-    }[variant];
-
-    const backgroundColor = {
-        default: vars.colors.brandLow,
-        alternative: vars.colors.brandLow,
-        brand: vars.colors.backgroundContainerBrandOverBrand,
-        negative: vars.colors.backgroundContainerNegative,
-        media: vars.colors.backgroundContainerNegative,
-    }[variant];
-
-    return (
-        <div
-            style={applyCssVars({
-                [mediaStyles.vars.mediaBorderRadius]: borderRadius,
-            })}
-        >
-            <Inline space={space}>
-                {React.Children.toArray(children).slice(
-                    0,
-                    countChildren > maxItems ? maxItems - 1 : maxItems
-                )}
-                {countChildren > maxItems && (
-                    <div
-                        className={styles.moreItems}
-                        style={{
-                            width: size,
-                            height: size,
-                            color: textColor,
-                            borderRadius,
-                            backgroundColor,
-                            border: stacked ? `1px solid ${vars.colors.borderLow}` : 'none',
-                        }}
-                    >
-                        {renderText(size, `+${moreItemsCount}`)}
-                    </div>
-                )}
-            </Inline>
-        </div>
-    );
-};
-
-export default StackingGroup;