@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/counter.tsx

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

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

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

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