@telefonica/mistica 16.58.0 → 16.59.0-beta.1

package/src/callout.tsx

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

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

@@ -0,0 +1,152 @@
+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}
+            />
+        );
+    }
+);