@telefonica/mistica 16.59.0-beta.1 → 16.60.0

package/src/callout.tsx

@@ -1,147 +0,0 @@
-'use client';
-import * as React from 'react';
-import Stack from './stack';
-import Inline from './inline';
-import Box from './box';
-import {useTheme} from './hooks';
-import {ThemeVariant, normalizeVariant, useThemeVariant} from './theme-variant-context';
-import {Text2, Text3} from './text';
-import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
-import {IconButton} from './icon-button';
-import classNames from 'classnames';
-import ButtonGroup from './button-group';
-import * as styles from './callout.css';
-import * as mediaStyles from './image.css';
-import {vars} from './skins/skin-contract.css';
-import {getPrefixedDataAttributes} from './utils/dom';
-import {applyCssVars} from './utils/css';
-import * as tokens from './text-tokens';
-
-import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button';
-import type {DataAttributes, HeadingType, RendersNullableElement} from './utils/types';
-
-type Props = {
-    title?:
-        | {
-              text: string;
-              'aria-label'?: string;
-              as?: HeadingType;
-          }
-        | string;
-    titleAs?: HeadingType;
-    description: string;
-    onClose?: () => void;
-    closeButtonLabel?: string;
-    asset?: React.ReactElement;
-    button?: RendersNullableElement<typeof ButtonPrimary>;
-    secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
-    buttonLink?: RendersNullableElement<typeof ButtonLink>;
-    variant?: 'default' | 'brand' | 'inverse';
-    'aria-label'?: string;
-    dataAttributes?: DataAttributes;
-    role?: string;
-};
-
-const Callout = ({
-    title,
-    titleAs = 'h2',
-    description,
-    asset,
-    onClose,
-    closeButtonLabel,
-    button,
-    secondaryButton,
-    buttonLink,
-    variant = 'default',
-    'aria-label': ariaLabel,
-    dataAttributes,
-    role,
-}: Props): JSX.Element => {
-    const outsideVariant = useThemeVariant();
-    const {texts, t} = useTheme();
-
-    const isTitleObject = typeof title === 'object';
-
-    const titleElementType = isTitleObject ? title?.as || titleAs : titleAs;
-    const titleAriaLabel = isTitleObject ? title?.['aria-label'] : undefined;
-    const titleText = isTitleObject ? title?.text : title;
-
-    const normalizedVariant = normalizeVariant(variant);
-
-    return (
-        <section
-            className={classNames(
-                styles.container,
-                styles.background[`${normalizedVariant}-over-${outsideVariant}`]
-            )}
-            style={applyCssVars({
-                [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
-            })}
-            aria-label={ariaLabel}
-            role={role}
-            {...getPrefixedDataAttributes(dataAttributes, 'Callout')}
-        >
-            <ThemeVariant variant={variant}>
-                {asset && (
-                    <Box paddingRight={16} dataAttributes={{testid: 'asset'}}>
-                        {asset}
-                    </Box>
-                )}
-                <div className={styles.content}>
-                    <Stack space={16}>
-                        <Inline fullWidth alignItems="flex-start" space="between">
-                            <Stack space={4}>
-                                <Text3
-                                    as={titleElementType}
-                                    regular
-                                    dataAttributes={{testid: 'title'}}
-                                    aria-label={titleAriaLabel}
-                                >
-                                    {titleText}
-                                </Text3>
-                                <Text2
-                                    as="p"
-                                    regular
-                                    color={vars.colors.textSecondary}
-                                    dataAttributes={{testid: 'description'}}
-                                >
-                                    {description}
-                                </Text2>
-                            </Stack>
-                            {onClose && (
-                                // Create empty div in order to fill space that iconButton occupies.
-                                // Without this, the content's vertical alignment can be affected
-                                <div className={styles.closeButtonContainerSize} />
-                            )}
-                        </Inline>
-                        {(button || secondaryButton || buttonLink) && (
-                            <ButtonGroup
-                                primaryButton={button}
-                                secondaryButton={secondaryButton}
-                                link={buttonLink}
-                            />
-                        )}
-                    </Stack>
-                    {/** Put the close button after the content so that the Callout's content goes first in the reading order */}
-                    {onClose && (
-                        <div className={styles.closeButtonContainer}>
-                            <IconButton
-                                dataAttributes={{testid: 'closeButton'}}
-                                small
-                                bleedY
-                                bleedRight
-                                Icon={IconCloseRegular}
-                                onPress={onClose}
-                                aria-label={
-                                    closeButtonLabel || texts.closeButtonLabel || t(tokens.closeButtonLabel)
-                                }
-                            />
-                        </div>
-                    )}
-                </div>
-            </ThemeVariant>
-        </section>
-    );
-};
-
-export default Callout;

package/src/card-cover.tsx

@@ -1,242 +0,0 @@
-import * as React from 'react';
-import {InternalCard} from './card-internal';
-
-import type {Variant} from './theme-variant-context';
-import type {
-    CardAspectRatio,
-    SlotAlignment,
-    MaybeTouchableCard,
-    CardActionButtonLink,
-    CardActionButtonSecondary,
-    CardActionButtonPrimary,
-    CardAction,
-    CardSize,
-} from './card-internal';
-import type Tag from './tag';
-import type {RendersNullableElement} from './utils/renders-element';
-import type {DataAttributes, HeadingType} from './utils/types';
-import type {ExclusifyUnion} from './utils/utility-types';
-import type {VideoSource, VideoElement} from './video';
-
-type CoverCardProps = {
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    size?: CardSize;
-    variant?: Variant;
-    backgroundColor?: string;
-    gradientOverlayColor?: 'transparent' | string;
-    aspectRatio?: CardAspectRatio;
-    width?: number | string;
-    height?: number | string;
-    asset?: React.ReactElement;
-    imageSrc?: string;
-    imageSrcSet?: string;
-    videoSrc?: VideoSource;
-    videoRef?: React.RefObject<VideoElement>;
-    videoLoop?: boolean;
-    videoAutoPlay?: boolean;
-    videoDataAttributes?: DataAttributes;
-    topActions?: ReadonlyArray<CardAction | React.ReactElement>;
-    buttonPrimary?: CardActionButtonPrimary;
-    buttonSecondary?: CardActionButtonSecondary;
-    buttonLink?: CardActionButtonLink;
-    onClose?: () => unknown;
-    closeButtonLabel?: string;
-    dataAttributes?: DataAttributes;
-    headline?: string | RendersNullableElement<typeof Tag>;
-    pretitle?: string;
-    pretitleAs?: HeadingType;
-    pretitleLinesMax?: number;
-    title?: string;
-    titleAs?: HeadingType;
-    titleLinesMax?: number;
-    subtitle?: string;
-    subtitleLinesMax?: number;
-    description?: string;
-    descriptionLinesMax?: number;
-    slotAlignment?: SlotAlignment;
-    slot?: React.ReactNode;
-    children?: undefined;
-    showFooter?: boolean;
-    footerBackgroundColor?: string;
-    footerVariant?: 'default' | 'brand' | 'inverse';
-    footerSlot?: React.ReactNode;
-    footerDivider?: boolean;
-};
-
-export const CoverCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<CoverCardProps>>(
-    ({size = 'default', dataAttributes, ...rest}, ref) => {
-        return (
-            <InternalCard
-                ref={ref}
-                dataAttributes={{
-                    'component-name': 'CoverCard',
-                    testid: 'CoverCard',
-                    ...dataAttributes,
-                }}
-                type="cover"
-                size={size}
-                {...rest}
-            />
-        );
-    }
-);
-
-type PosterCardBaseProps = {
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-description'?: string;
-    'aria-describedby'?: string;
-    aspectRatio?: CardAspectRatio;
-    /** @deprecated use variant="brand" instead */
-    isInverse?: boolean;
-    variant?: Variant;
-    size?: CardSize;
-    width?: number | string;
-    height?: number | string;
-    asset?: React.ReactElement;
-    videoSrc?: VideoSource;
-    videoRef?: React.RefObject<VideoElement>;
-    imageSrc?: string;
-    imageSrcSet?: string;
-    /** @deprecated use topActions */
-    actions?: ReadonlyArray<CardAction | React.ReactElement>;
-    topActions?: ReadonlyArray<CardAction | React.ReactElement>;
-    /** @deprecated use buttonPrimary or buttonSecondary */
-    button?: CardActionButtonPrimary;
-    buttonPrimary?: CardActionButtonPrimary;
-    buttonSecondary?: CardActionButtonSecondary;
-    buttonLink?: CardActionButtonLink;
-    onClose?: () => unknown;
-    closeButtonLabel?: string;
-    dataAttributes?: DataAttributes;
-    headline?: string | RendersNullableElement<typeof Tag>;
-    pretitle?: string;
-    pretitleAs?: HeadingType;
-    pretitleLinesMax?: number;
-    title?: string;
-    titleAs?: HeadingType;
-    titleLinesMax?: number;
-    subtitle?: string;
-    subtitleLinesMax?: number;
-    description?: string;
-    descriptionLinesMax?: number;
-    /** @deprecated use slot */
-    extra?: React.ReactNode;
-    slot?: React.ReactNode;
-};
-
-type DeprecatedImageProps = {
-    /** @deprecated use imageSrc or imageSrcSet */
-    backgroundImage: string | {src: string; srcSet?: string} | {src?: string; srcSet: string};
-};
-
-type DeprecatedBackgroundColorProps = {
-    backgroundColor?: string | undefined;
-};
-
-type DeprecatedVideoProps = {
-    /** @deprecated use videoSrc */
-    backgroundVideo: VideoSource;
-    /** @deprecated use imageSrc */
-    poster?: string;
-    /** @deprecated use videoRef */
-    backgroundVideoRef?: React.RefObject<VideoElement>;
-};
-
-type PosterCardProps = PosterCardBaseProps &
-    ExclusifyUnion<DeprecatedImageProps | DeprecatedBackgroundColorProps | DeprecatedVideoProps>;
-
-/**
- * @deprecated use CoverCard
- */
-export const PosterCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<PosterCardProps>>(
-    (
-        {
-            size = 'default',
-            /** @deprecated use variant */
-            isInverse,
-            variant,
-            /** @deprecated use topActions */
-            actions,
-            topActions,
-            /** @deprecated use slot */
-            extra,
-            slot,
-            /** @deprecated use imageSrc or imageSrcSet */
-            backgroundImage,
-            /** @deprecated use videoSrc */
-            backgroundVideo,
-            /** @deprecated use imageSrc */
-            poster,
-            videoSrc,
-            imageSrc,
-            imageSrcSet,
-            /** @deprecated use videoRef */
-            backgroundVideoRef,
-            videoRef,
-            /** @deprecated use buttonPrimary */
-            button,
-            buttonPrimary,
-            dataAttributes,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <CoverCard
-                ref={ref}
-                size={size}
-                variant={variant || (isInverse ? 'inverse' : undefined)}
-                dataAttributes={{
-                    'component-name': 'PosterCard',
-                    testid: 'PosterCard',
-                    ...dataAttributes,
-                }}
-                topActions={topActions || actions}
-                slot={slot || extra}
-                buttonPrimary={buttonPrimary || button}
-                imageSrc={
-                    // using ?? because we want to keep empty string as a valid value
-                    imageSrc ??
-                    (typeof backgroundImage === 'string' ? backgroundImage : backgroundImage?.src) ??
-                    poster
-                }
-                imageSrcSet={
-                    imageSrcSet || (typeof backgroundImage === 'string' ? undefined : backgroundImage?.srcSet)
-                }
-                videoSrc={videoSrc || backgroundVideo}
-                videoRef={videoRef || backgroundVideoRef}
-                {...rest}
-            />
-        );
-    }
-);
-
-type DisplayMediaCardProps = PosterCardProps & {
-    /** @deprecated use buttonSecondary */
-    secondaryButton?: CardActionButtonPrimary;
-};
-
-/**
- * @deprecated use <CoverCard size="display" />
- */
-export const DisplayMediaCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<DisplayMediaCardProps>>(
-    ({dataAttributes, secondaryButton, buttonSecondary, ...rest}, ref) => {
-        return (
-            <PosterCard
-                ref={ref}
-                size="display"
-                buttonSecondary={buttonSecondary || secondaryButton}
-                dataAttributes={{
-                    'component-name': 'DisplayMediaCard',
-                    testid: 'DisplayMediaCard',
-                    ...dataAttributes,
-                }}
-                {...rest}
-            />
-        );
-    }
-);

package/src/card-data.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-import {InternalCard} from './card-internal';
-
-import type {Variant} from './theme-variant-context';
-import type {
-    CardSize,
-    SlotAlignment,
-    CardAspectRatio,
-    TopActionsArray,
-    MaybeTouchableCard,
-    CardActionButtonLink,
-    CardActionButtonPrimary,
-    CardActionButtonSecondary,
-} from './card-internal';
-import type Tag from './tag';
-import type {RendersNullableElement} from './utils/renders-element';
-import type {HeadingType, DataAttributes} from './utils/types';
-
-type DataCardProps = {
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
-    'aria-description'?: string; // W3C Editor's Draft for ARIA 1.3
-    'aria-describedby'?: React.AriaAttributes['aria-describedby'];
-    size?: CardSize;
-    width?: number | string;
-    height?: number | string;
-    backgroundColor?: string;
-    variant?: Variant;
-    /** @deprecated use variant="brand" instead */
-    isInverse?: boolean;
-    asset?: React.ReactElement;
-    headline?: string | RendersNullableElement<typeof Tag>;
-    pretitle?: string;
-    pretitleAs?: HeadingType;
-    pretitleLinesMax?: number;
-    title?: string;
-    titleAs?: HeadingType;
-    titleLinesMax?: number;
-    subtitle?: string;
-    subtitleLinesMax?: number;
-    description?: string;
-    descriptionLinesMax?: number;
-    dataAttributes?: DataAttributes;
-    extraAlignment?: SlotAlignment;
-    /** @deprecated use slot */
-    extra?: React.ReactNode;
-    slot?: React.ReactNode;
-    slotAlignment?: SlotAlignment;
-    aspectRatio?: CardAspectRatio;
-    /** @deprecated use buttonPrimary or buttonSecondary */
-    button?: CardActionButtonPrimary;
-    buttonPrimary?: CardActionButtonPrimary;
-    buttonSecondary?: CardActionButtonSecondary;
-    buttonLink?: CardActionButtonLink;
-    onClose?: () => unknown;
-    closeButtonLabel?: string;
-    /** @deprecated use topActions */
-    actions?: TopActionsArray;
-    topActions?: TopActionsArray;
-    showFooter?: boolean;
-    footerBackgroundColor?: string;
-    footerVariant?: 'default' | 'brand' | 'inverse';
-    footerSlot?: React.ReactNode;
-    footerDivider?: boolean;
-};
-
-export const DataCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<DataCardProps>>(
-    (
-        {
-            dataAttributes,
-            size = 'default',
-            button,
-            buttonPrimary,
-            extra,
-            slot,
-            actions,
-            topActions,
-            isInverse,
-            variant,
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <InternalCard
-                type="data"
-                size={size}
-                dataAttributes={{
-                    'component-name': 'DataCard',
-                    testid: 'DataCard',
-                    ...dataAttributes,
-                }}
-                ref={ref}
-                buttonPrimary={buttonPrimary || button}
-                topActions={topActions || actions}
-                slot={slot || extra}
-                variant={variant || (isInverse ? 'inverse' : 'default') || 'default'}
-                {...rest}
-            />
-        );
-    }
-);
-
-type FixedSizeDataCardProps = Omit<DataCardProps, 'size'>;
-
-/**
- * @deprecated use <Datacard size="snap" /> instead
- */
-export const SnapCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<FixedSizeDataCardProps>>(
-    ({dataAttributes, slotAlignment = 'bottom', ...rest}, ref) => {
-        return (
-            <DataCard
-                size="snap"
-                dataAttributes={{
-                    'component-name': 'SnapCard',
-                    testid: 'SnapCard',
-                    ...dataAttributes,
-                }}
-                ref={ref}
-                slotAlignment={slotAlignment}
-                {...rest}
-            />
-        );
-    }
-);
-
-type DisplayDataCardProps = FixedSizeDataCardProps & {
-    /** @deprecated use buttonSecondary */
-    secondaryButton?: CardActionButtonPrimary;
-};
-
-/**
- * @deprecated use <Datacard size="display" /> instead
- */
-export const DisplayDataCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<DisplayDataCardProps>>(
-    ({dataAttributes, buttonSecondary, slotAlignment = 'bottom', secondaryButton, ...rest}, ref) => {
-        return (
-            <DataCard
-                size="display"
-                dataAttributes={{
-                    'component-name': 'DisplayDataCard',
-                    testid: 'DisplayDataCard',
-                    ...dataAttributes,
-                }}
-                buttonSecondary={buttonSecondary || secondaryButton}
-                slotAlignment={slotAlignment}
-                ref={ref}
-                {...rest}
-            />
-        );
-    }
-);