@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/counter.tsx

@@ -1,215 +0,0 @@
-'use client';
-import * as React from 'react';
-import {getPrefixedDataAttributes} from './utils/dom';
-import * as styles from './counter.css';
-import {ThemeVariant, useThemeVariant} from './theme-variant-context';
-import {vars} from './skins/skin-contract.css';
-import Inline from './inline';
-import {Text3} from './text';
-import {BaseTouchable} from './touchable';
-import IconSubtractRegular from './generated/mistica-icons/icon-subtract-regular';
-import IconAddMoreRegular from './generated/mistica-icons/icon-add-more-regular';
-import IconTrashCanRegular from './generated/mistica-icons/icon-trash-can-regular';
-import {useTheme} from './hooks';
-import classNames from 'classnames';
-import ScreenReaderOnly from './screen-reader-only';
-import * as tokens from './text-tokens';
-
-import type {DataAttributes} from './utils/types';
-
-const ICON_SIZE = 20;
-
-const useCounterState = ({
-    value,
-    defaultValue,
-    min,
-    max,
-    onChangeValue,
-}: {
-    value?: number;
-    defaultValue?: number;
-    min: number;
-    max: number;
-    onChangeValue?: (value: number) => void;
-}): [number, (value: number) => void] => {
-    const isControlledByParent = value !== undefined;
-
-    const getValueInRange = React.useCallback(
-        (value?: number) => {
-            return value === undefined ? min : Math.max(min, Math.min(max, value));
-        },
-        [min, max]
-    );
-
-    const [currentValue, setCurrentValue] = React.useState<number>(getValueInRange(defaultValue));
-
-    const updateValue = (newValue: number) => {
-        if (!isControlledByParent) {
-            setCurrentValue(newValue);
-        }
-        onChangeValue?.(newValue);
-    };
-
-    return [isControlledByParent ? getValueInRange(value) : currentValue, updateValue];
-};
-
-type Props = {
-    value?: number;
-    defaultValue?: number;
-    min?: number;
-    max?: number;
-    onChangeValue?: (value: number) => void;
-    onRemove?: () => void;
-    children?: void;
-    disabled?: boolean;
-    dataAttributes?: DataAttributes;
-    removeLabel?: string;
-    increaseLabel?: string;
-    decreaseLabel?: string;
-    valueLabel?: string;
-};
-
-const Counter = ({
-    value,
-    defaultValue,
-    onChangeValue,
-    onRemove,
-    min,
-    max,
-    dataAttributes,
-    disabled,
-    removeLabel,
-    increaseLabel,
-    decreaseLabel,
-    valueLabel,
-}: Props): JSX.Element => {
-    const variant = useThemeVariant();
-    const counterId = React.useId();
-    const {texts, t, isDarkMode} = useTheme();
-
-    const minValue = min === undefined ? 0 : min;
-    const maxValue = Math.max(minValue, max === undefined ? 999 : max);
-
-    const [currentValue, setCurrentValue] = useCounterState({
-        value,
-        defaultValue,
-        min: minValue,
-        max: maxValue,
-        onChangeValue,
-    });
-
-    const hasTrashIcon = !!onRemove && currentValue === minValue;
-
-    const getRemoveLabel = () => {
-        return removeLabel ?? (texts.counterRemoveLabel || t(tokens.counterRemoveLabel));
-    };
-
-    const getIncreaseLabel = () => {
-        return increaseLabel ?? (texts.counterIncreaseLabel || t(tokens.counterIncreaseLabel));
-    };
-
-    const getDecreaseLabel = () => {
-        return decreaseLabel ?? (texts.counterDecreaseLabel || t(tokens.counterDecreaseLabel));
-    };
-
-    const getValueLabel = () => {
-        return `${currentValue}, ${valueLabel ?? (texts.counterQuantity || t(tokens.counterQuantity))}${
-            min !== undefined ? `, ${texts.counterMinValue || t(tokens.counterMinValue)} ${min}` : ''
-        }${max !== undefined ? `, ${texts.counterMaxValue || t(tokens.counterMaxValue)} ${max}` : ''}`;
-    };
-
-    return (
-        <div
-            className={classNames(styles.counter, {[styles.disabled]: disabled})}
-            {...getPrefixedDataAttributes(dataAttributes, 'Counter')}
-            style={{
-                border: `1px solid ${(variant === 'brand' || variant === 'media' || variant === 'negative') && !isDarkMode ? vars.colors.backgroundContainer : vars.colors.inputBorder}`,
-            }}
-        >
-            <Inline space={8} alignItems="center">
-                <div
-                    className={classNames(styles.buttonContainer, {
-                        [styles.hasTrashIcon]: hasTrashIcon,
-                        [styles.isButtonDisabled]: disabled || (!hasTrashIcon && currentValue === minValue),
-                        [styles.disabled]: !disabled && !hasTrashIcon && currentValue === minValue,
-                    })}
-                >
-                    <BaseTouchable
-                        className={styles.button}
-                        disabled={(!hasTrashIcon && currentValue === minValue) || disabled}
-                        onPress={() => (hasTrashIcon ? onRemove?.() : setCurrentValue(currentValue - 1))}
-                        aria-label={hasTrashIcon ? getRemoveLabel() : getDecreaseLabel()}
-                        aria-controls={counterId}
-                    >
-                        <div className={styles.buttonBackground} />
-                        <div className={styles.decreaseButtonIcon} aria-hidden={hasTrashIcon}>
-                            <IconSubtractRegular
-                                size={ICON_SIZE}
-                                color={
-                                    (currentValue === minValue && !hasTrashIcon) || disabled
-                                        ? vars.colors.control
-                                        : vars.colors.controlActivated
-                                }
-                            />
-                        </div>
-                        <div className={styles.trashButtonIcon} aria-hidden={!hasTrashIcon}>
-                            <IconTrashCanRegular size={ICON_SIZE} color={vars.colors.controlError} />
-                        </div>
-                    </BaseTouchable>
-                </div>
-
-                <div
-                    className={styles.valueContainer}
-                    /**
-                     * Hack to avoid counter's width from changing because of some characters
-                     * having different widths. Using fontVariantNumeric tabular-nums is not supported
-                     * for new Vivo font.
-                     * */
-                    style={{width: `${Math.max(3, String(maxValue).length) * 1.25}ch`}}
-                    id={counterId}
-                    aria-live="polite"
-                >
-                    <ThemeVariant variant="default">
-                        <div aria-hidden>
-                            <Text3 regular color={vars.colors.textPrimary}>
-                                {currentValue}
-                            </Text3>
-                        </div>
-                        <ScreenReaderOnly>
-                            <span>{getValueLabel()}</span>
-                        </ScreenReaderOnly>
-                    </ThemeVariant>
-                </div>
-
-                <div
-                    className={classNames(styles.buttonContainer, {
-                        [styles.isButtonDisabled]: disabled || currentValue === maxValue,
-                        [styles.disabled]: !disabled && currentValue === maxValue,
-                    })}
-                >
-                    <BaseTouchable
-                        className={styles.button}
-                        disabled={currentValue === maxValue || disabled}
-                        onPress={() => setCurrentValue(currentValue + 1)}
-                        aria-label={getIncreaseLabel()}
-                        aria-controls={counterId}
-                    >
-                        <div className={styles.buttonBackground} />
-                        <div className={styles.defaultButtonIcon}>
-                            <IconAddMoreRegular
-                                size={ICON_SIZE}
-                                color={
-                                    currentValue === maxValue || disabled
-                                        ? vars.colors.control
-                                        : vars.colors.controlActivated
-                                }
-                            />
-                        </div>
-                    </BaseTouchable>
-                </div>
-            </Inline>
-        </div>
-    );
-};
-
-export default Counter;

package/src/cover-hero-media.tsx

@@ -1,39 +0,0 @@
-'use client';
-import * as React from 'react';
-import {TopActions, useVideoWithControls} from './card-internal';
-import * as styles from './cover-hero.css';
-import Image from './image';
-
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {VideoElement, VideoSource} from './video';
-
-export type ImageProps = {
-    backgroundImage: string;
-};
-
-export type VideoProps = {
-    backgroundVideo: VideoSource;
-    poster?: string;
-    backgroundVideoRef?: React.RefObject<VideoElement>;
-};
-
-export const CoverHeroMedia = ({
-    backgroundVideo,
-    backgroundImage,
-    poster,
-    backgroundVideoRef,
-}: ExclusifyUnion<ImageProps | VideoProps>): React.ReactElement => {
-    const {video, videoAction} = useVideoWithControls({
-        src: backgroundVideo,
-        poster,
-        ref: backgroundVideoRef,
-    });
-    return (
-        <div className={styles.mediaLayer}>
-            {backgroundImage && <Image width="100%" height="100%" src={backgroundImage} />}
-            {backgroundVideo && video}
-            <div className={styles.mediaOverlay} />
-            {videoAction && <TopActions actions={[videoAction]} variant="media" />}
-        </div>
-    );
-};

package/src/cover-hero.css.ts

@@ -1,133 +0,0 @@
-import {createVar, globalStyle, style} from '@vanilla-extract/css';
-import {sprinkles} from './sprinkles.css';
-import * as mq from './media-queries.css';
-import {slideshowWithBullets, slideshowContainer} from './carousel.css';
-
-const aspectRatio = createVar();
-
-export const vars = {aspectRatio};
-
-export const coverHero = style([
-    sprinkles({
-        position: 'relative',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        width: '100%',
-        top: 0,
-        bottom: 0,
-    }),
-    {},
-]);
-
-export const coverHeroContainer = style([
-    sprinkles({
-        position: 'relative',
-        display: 'flex',
-        width: '100%',
-    }),
-    {
-        selectors: {
-            [`${slideshowContainer} &`]: {
-                height: '100%',
-            },
-        },
-    },
-]);
-
-export const withAspectRatio = style({
-    ':before': {
-        float: 'left',
-        content: '""',
-        paddingTop: `calc(100% / ${aspectRatio})`,
-    },
-    ':after': {
-        display: 'block',
-        content: '""',
-        clear: 'both',
-    },
-});
-
-export const minHeight = style({
-    minHeight: 400,
-    '@media': {
-        [mq.tabletOrBigger]: {
-            minHeight: 460,
-        },
-    },
-});
-
-// give some extra space for the slideshow bullets
-globalStyle(`${slideshowWithBullets} ${coverHero}:after`, {
-    '@media': {
-        [mq.mobile]: {
-            display: 'block',
-            content: '""',
-            height: 24,
-        },
-    },
-});
-
-export const hasSideExtra = style({});
-
-export const centered = style([
-    sprinkles({
-        alignItems: 'center',
-    }),
-    {
-        textAlign: 'center',
-        selectors: {
-            [`${hasSideExtra}&`]: {
-                '@media': {
-                    [mq.tabletOrBigger]: {
-                        textAlign: 'left',
-                    },
-                },
-            },
-        },
-    },
-]);
-
-export const mediaLayer = sprinkles({
-    position: 'absolute',
-    objectFit: 'cover',
-    width: '100%',
-    height: '100%',
-});
-
-export const mediaOverlay = style([
-    sprinkles({
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-    }),
-    {
-        backgroundColor: 'rgba(0, 0, 0, 0.4)',
-    },
-]);
-
-export const mainContent = sprinkles({position: 'relative'});
-
-// pretitle and description should be 6 grid columns wide, but they are already inside a grid item (the left side of GridLayout)
-// so we can't adjust their width to the parent grid columns. 75% is a good approximation.
-export const sixColumns = style({
-    '@media': {
-        [mq.tabletOrBigger]: {
-            width: '75%',
-            selectors: {
-                [`${centered}:not(${hasSideExtra}) &`]: {
-                    margin: '0 auto',
-                },
-            },
-        },
-    },
-});
-
-export const sideExtra = sprinkles({position: 'relative'});
-
-export const flexColumn = sprinkles({
-    display: 'flex',
-    flexDirection: 'column',
-});

package/src/cover-hero.tsx

@@ -1,262 +0,0 @@
-import * as React from 'react';
-import ResponsiveLayout from './responsive-layout';
-import Box from './box';
-import ButtonGroup from './button-group';
-import Stack from './stack';
-import {Text3, Text8} from './text';
-import {vars} from './skins/skin-contract.css';
-import * as styles from './cover-hero.css';
-import classnames from 'classnames';
-import {applyCssVars} from './utils/css';
-import * as mediaStyles from './image.css';
-import GridLayout from './grid-layout';
-import {CoverHeroMedia} from './cover-hero-media';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {isBiggerHeading} from './utils/headings';
-import {normalizeVariant, type Variant} from './theme-variant-context';
-
-import type {DataAttributes, HeadingType} from './utils/types';
-import type {ImageProps, VideoProps} from './cover-hero-media';
-import type {AspectRatio} from './image';
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
-import type Tag from './tag';
-import type {RendersNullableElement} from './utils/renders-element';
-
-type BaseProps = {
-    headline?: RendersNullableElement<typeof Tag>;
-    pretitle?: string;
-    pretitleLinesMax?: number;
-    pretitleAs?: HeadingType;
-    title: string;
-    titleLinesMax?: number;
-    titleAs?: HeadingType;
-    description?: string;
-    descriptionLinesMax?: number;
-    extra?: React.ReactNode;
-    sideExtra?: React.ReactNode;
-    button?: RendersNullableElement<typeof ButtonPrimary>;
-    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
-    buttonLink?: RendersNullableElement<typeof ButtonLink>;
-    minHeight?: string | number;
-    aspectRatio?: AspectRatio | number | 'auto';
-    centered?: boolean;
-    noPaddingY?: boolean;
-    /** "data-" prefix is automatically added. For example, use "testid" instead of "data-testid" */
-    dataAttributes?: DataAttributes;
-    'aria-label'?: string;
-};
-
-type BackgroundProps = {
-    background?: string;
-    variant?: Variant;
-};
-
-type CoverHeroProps = BaseProps & ExclusifyUnion<ImageProps | VideoProps | BackgroundProps>;
-
-const aspectRatioToNumber = (aspectRatio?: BaseProps['aspectRatio']): number => {
-    if (!aspectRatio || aspectRatio === 'auto') {
-        return 0;
-    }
-    if (typeof aspectRatio === 'number') {
-        return aspectRatio;
-    }
-    return {
-        '1:1': 1,
-        '16:9': 16 / 9,
-        '7:10': 7 / 10,
-        '4:3': 9 / 10,
-    }[aspectRatio];
-};
-
-const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
-    (
-        {
-            headline,
-            pretitle,
-            pretitleLinesMax,
-            pretitleAs,
-            title,
-            titleLinesMax,
-            titleAs = 'h1',
-            description,
-            descriptionLinesMax,
-            extra,
-            sideExtra,
-            button,
-            secondaryButton,
-            buttonLink,
-            minHeight,
-            aspectRatio = 'auto',
-            variant,
-            centered,
-            noPaddingY,
-            dataAttributes,
-            'aria-label': ariaLabel,
-            ...mediaProps
-        },
-        ref
-    ) => {
-        const hasMedia = mediaProps.backgroundVideo || mediaProps.backgroundImage;
-
-        const background = hasMedia
-            ? 'none'
-            : mediaProps.background ||
-              {
-                  default: vars.colors.background,
-                  brand: vars.colors.backgroundBrand,
-                  negative: vars.colors.backgroundNegative,
-                  alternative: vars.colors.backgroundAlternative,
-                  media: 'none',
-              }[normalizeVariant(variant ?? 'default')];
-
-        const textShadow = hasMedia ? '0 0 15px rgba(0, 0, 0, 0.4)' : undefined;
-
-        const pretitleContent = pretitle ? (
-            <Text3
-                regular
-                as={pretitleAs}
-                truncate={pretitleLinesMax}
-                textShadow={textShadow}
-                dataAttributes={{testid: 'pretitle'}}
-            >
-                {pretitle}
-            </Text3>
-        ) : undefined;
-
-        const titleContent = title ? (
-            <Text8
-                as={titleAs}
-                truncate={titleLinesMax}
-                textShadow={textShadow}
-                dataAttributes={{testid: 'title'}}
-            >
-                {title}
-            </Text8>
-        ) : undefined;
-
-        const headlineContent = headline ? (
-            <div style={{order: -1}}>
-                <Box
-                    dataAttributes={{testid: 'headline'}}
-                    paddingBottom={{desktop: 8, tablet: 8, mobile: 16}}
-                >
-                    {headline}
-                </Box>
-            </div>
-        ) : undefined;
-
-        const mainContent = (
-            <div className={styles.mainContent}>
-                <Stack space={16}>
-                    {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
-                    <div className={styles.flexColumn}>
-                        {isBiggerHeading(titleAs, pretitleAs) ? (
-                            <>
-                                {titleContent}
-                                {headlineContent}
-                                {pretitleContent && (
-                                    <div
-                                        className={styles.sixColumns}
-                                        style={{paddingBottom: title ? 8 : 0, order: -1}}
-                                    >
-                                        {pretitleContent}
-                                    </div>
-                                )}
-                            </>
-                        ) : (
-                            <>
-                                {pretitleContent && (
-                                    <div className={styles.sixColumns} style={{paddingBottom: title ? 8 : 0}}>
-                                        {pretitleContent}
-                                    </div>
-                                )}
-                                {headlineContent}
-                                {titleContent}
-                            </>
-                        )}
-                    </div>
-                    {description && (
-                        <div className={styles.sixColumns}>
-                            <Text3
-                                as="p"
-                                regular
-                                truncate={descriptionLinesMax}
-                                color={hasMedia ? vars.colors.textPrimary : vars.colors.textSecondary}
-                                textShadow={textShadow}
-                                dataAttributes={{testid: 'description'}}
-                            >
-                                {description}
-                            </Text3>
-                        </div>
-                    )}
-                </Stack>
-                {extra && <div data-testid="slot">{extra}</div>}
-            </div>
-        );
-
-        const withAspectRatio = aspectRatio && aspectRatio !== 'auto';
-
-        return (
-            <section
-                {...getPrefixedDataAttributes(dataAttributes, 'CoverHero')}
-                aria-label={ariaLabel}
-                ref={ref}
-                className={classnames(styles.coverHeroContainer, {
-                    [styles.minHeight]: !noPaddingY,
-                    [styles.withAspectRatio]: withAspectRatio,
-                })}
-                style={{
-                    minHeight: withAspectRatio ? 'auto' : minHeight,
-                    boxSizing: 'border-box',
-                    background,
-                    ...applyCssVars({
-                        [styles.vars.aspectRatio]: String(aspectRatioToNumber(aspectRatio)),
-                        [mediaStyles.vars.mediaBorderRadius]: '0px',
-                    }),
-                }}
-            >
-                <div
-                    className={classnames(styles.coverHero, {
-                        [styles.centered]: centered,
-                        [styles.hasSideExtra]: sideExtra,
-                    })}
-                >
-                    {hasMedia ? <CoverHeroMedia {...mediaProps} /> : null}
-                    <ResponsiveLayout variant={hasMedia ? 'media' : variant}>
-                        <Box paddingY={noPaddingY ? 0 : {desktop: 56, tablet: 56, mobile: 24}}>
-                            <Stack space={24}>
-                                {centered && !sideExtra ? (
-                                    <GridLayout template="8">{mainContent}</GridLayout>
-                                ) : (
-                                    <GridLayout
-                                        template="8+4"
-                                        collapseBreakpoint="mobile"
-                                        left={mainContent}
-                                        right={
-                                            <div className={styles.sideExtra} data-testid="sideSlot">
-                                                {sideExtra}
-                                            </div>
-                                        }
-                                    />
-                                )}
-                                <ButtonGroup
-                                    align={{
-                                        mobile: centered ? 'center' : 'left',
-                                        tablet: centered && !sideExtra ? 'center' : 'left',
-                                        desktop: centered && !sideExtra ? 'center' : 'left',
-                                    }}
-                                    primaryButton={button}
-                                    secondaryButton={secondaryButton}
-                                    link={buttonLink}
-                                />
-                            </Stack>
-                        </Box>
-                    </ResponsiveLayout>
-                </div>
-            </section>
-        );
-    }
-);
-
-export default CoverHero;