@telefonica/mistica 16.59.0 → 16.61.0

package/src/spinner.tsx

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

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

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

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

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

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

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

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