@telefonica/mistica 16.71.0 → 16.72.0

package/src/card-data.tsx

@@ -26,8 +26,6 @@ type DataCardProps = {
     height?: number | string;
     backgroundColor?: string;
     variant?: Variant;
-    /** @deprecated use variant="brand" instead */
-    isInverse?: boolean;
     asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
     pretitle?: string;
@@ -41,21 +39,14 @@ type DataCardProps = {
     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;
@@ -65,86 +56,20 @@ type DataCardProps = {
 };
 
 export const DataCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<DataCardProps>>(
-    (
-        {
-            dataAttributes,
-            size = 'default',
-            button,
-            buttonPrimary,
-            extra,
-            slot,
-            actions,
-            topActions,
-            isInverse,
-            variant,
-            ...rest
-        },
-        ref
-    ) => {
+    ({dataAttributes, size = 'default', buttonPrimary, slot, topActions, 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}
+                buttonPrimary={buttonPrimary}
+                topActions={topActions}
+                slot={slot}
+                variant={variant || 'default'}
                 {...rest}
             />
         );

package/src/card-internal.tsx

@@ -34,7 +34,6 @@ import type {
     DataAttributes,
     HeadingType,
     IconProps,
-    RendersElement,
     RendersNullableElement,
     TrackingEvent,
 } from './utils/types';
@@ -52,9 +51,6 @@ export type CardType = 'data' | 'media' | 'cover' | 'naked';
 export type CardSize = 'snap' | 'default' | 'display';
 export type MediaPosition = 'top' | 'left' | 'right';
 
-/** @deprecated use imageSrc, imageSrcSet, videoSrc and related props */
-export type DeprecatedMediaProp = RendersElement<typeof Image> | RendersElement<typeof Video>;
-
 export type SlotAlignment = 'content' | 'bottom' | 'space-between';
 
 export type CardActionButtonPrimary = RendersNullableElement<typeof ButtonPrimary>;
@@ -90,8 +86,6 @@ type ButtonsProps = {
 };
 
 type MediaProps = {
-    /** @deprecated use imageSrc, imageSrcSet, videoSrc and related props */
-    media?: DeprecatedMediaProp;
     backgroundColor?: string;
     imageSrc?: string;
     imageSrcSet?: string;
@@ -246,7 +240,7 @@ const Container = React.forwardRef<HTMLDivElement, ContainerProps & MediaProps &
                 aria-description={ariaDescription}
                 aria-describedby={ariaDescribedby}
                 className={classnames(styles.container)}
-                {...getPrefixedDataAttributes(dataAttributes, 'InternalCard')}
+                {...getPrefixedDataAttributes({testid: 'InternalCard', ...dataAttributes})}
                 style={{
                     width: width || '100%',
                     height: height || '100%',
@@ -1303,7 +1297,6 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
             imageFit = 'fill-center',
             videoSrc,
             videoRef,
-            media,
             mediaAspectRatio: mediaAspectRatioProp = 'auto',
             mediaPosition: mediaPositionProp = 'top',
             mediaWidth = 150,
@@ -1368,9 +1361,7 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
         const typeAllowsMedia = type === 'media' || type === 'naked';
         const hasMediaImage = typeAllowsMedia && (imageSrc !== undefined || imageSrcSet !== undefined);
         const hasMediaVideo = typeAllowsMedia && videoSrc !== undefined;
-        const hasMediaSources = hasMediaImage || hasMediaVideo;
-        const hasDeprecatedMedia = typeAllowsMedia && !!media && !hasMediaSources;
-        const hasMedia = hasMediaSources || hasDeprecatedMedia;
+        const hasMedia = hasMediaImage || hasMediaVideo;
         const isNaked = type === 'naked';
 
         // If no media is provided, we use the "top" media position to simplify logic
@@ -1547,22 +1538,6 @@ export const InternalCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<
                             shouldShowFooter || isNaked ? 0 : `calc(${borderRadius} - 1px)`,
                     }}
                 >
-                    {hasDeprecatedMedia && (
-                        <div
-                            style={{
-                                // for some reason, this width is required to pass headless screenshot tests
-                                // otherwise, it gets 0px width and the media is not visible
-                                width: '100%',
-                                ...(type === 'naked'
-                                    ? undefined
-                                    : applyCssVars({[mediaStyles.vars.mediaBorderRadius]: '0px'})),
-                            }}
-                        >
-                            {media}
-                        </div>
-                    )}
-                    {hasDeprecatedMedia && <Asset absolute size={size} asset={asset} type={type} />}
-
                     {hasMedia && (
                         <Media
                             type={type}

package/src/card-media.tsx

@@ -10,7 +10,6 @@ import type {
     CardActionButtonSecondary,
     CardAspectRatio,
     CardSize,
-    DeprecatedMediaProp,
     MaybeTouchableCard,
     MediaAspectRatio,
     SlotAlignment,
@@ -27,8 +26,6 @@ export type MediaCardProps = {
     'aria-description'?: string;
     'aria-describedby'?: string;
     size?: CardSize;
-    /** @deprecated use imageSrc, imageSrcSet, videoSrc and related props */
-    media?: DeprecatedMediaProp;
     mediaPosition?: 'top' | 'left' | 'right';
     mediaWidth?: number | string;
     /** Ignored when mediaPosition is 'left' or 'right' */
@@ -47,8 +44,6 @@ export type MediaCardProps = {
     videoLoop?: boolean;
     videoAutoPlay?: boolean;
     videoDataAttributes?: DataAttributes;
-    /** @deprecated use imageSrc */
-    poster?: string;
     variant?: Variant;
     asset?: React.ReactElement;
     headline?: string | RendersNullableElement<typeof Tag>;
@@ -62,15 +57,9 @@ export type MediaCardProps = {
     subtitleLinesMax?: number;
     description?: string;
     descriptionLinesMax?: number;
-    /** @deprecated use slot */
-    extra?: React.ReactNode;
     slot?: React.ReactNode;
     slotAlignment?: SlotAlignment;
-    /** @deprecated use topActions */
-    actions?: TopActionsArray;
     topActions?: TopActionsArray;
-    /** @deprecated use buttonPrimary */
-    button?: CardActionButtonPrimary;
     buttonLink?: CardActionButtonLink;
     buttonPrimary?: CardActionButtonPrimary;
     buttonSecondary?: CardActionButtonSecondary;
@@ -85,70 +74,19 @@ export type MediaCardProps = {
 };
 
 export const MediaCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<MediaCardProps>>(
-    (
-        {size = 'default', slot, extra, topActions, actions, button, buttonPrimary, dataAttributes, ...rest},
-        ref
-    ) => {
+    ({size = 'default', slot, topActions, buttonPrimary, dataAttributes, ...rest}, ref) => {
         return (
             <InternalCard
                 type="media"
                 variant="default"
                 size={size}
                 dataAttributes={{
-                    'component-name': 'MediaCard',
                     testid: 'MediaCard',
                     ...dataAttributes,
                 }}
-                slot={slot || extra}
-                topActions={topActions || actions}
-                buttonPrimary={buttonPrimary || button}
-                ref={ref}
-                {...rest}
-            />
-        );
-    }
-);
-
-type DeprecatedHighlightedCardProps = Omit<MediaCardProps, 'size' | 'mediaPosition'> & {
-    /** @deprecated use imageSrc */
-    imageUrl?: string;
-    /** @deprecated use variant="brand" instead */
-    isInverse?: boolean;
-};
-
-/**
- * @deprecated use <MediaCard size="default" mediaPosition="right" />
- */
-export const HighlightedCard = React.forwardRef<
-    HTMLDivElement,
-    MaybeTouchableCard<DeprecatedHighlightedCardProps>
->(
-    (
-        {
-            dataAttributes,
-            isInverse,
-            variant,
-            imageUrl,
-            imageSrc,
-            mediaWidth,
-            slotAlignment = 'bottom',
-            ...rest
-        },
-        ref
-    ) => {
-        return (
-            <MediaCard
-                size="default"
-                mediaPosition="right"
-                mediaWidth={mediaWidth || 100}
-                dataAttributes={{
-                    'component-name': 'HighlightedCard',
-                    testid: 'HighlightedCard',
-                    ...dataAttributes,
-                }}
-                slotAlignment={slotAlignment}
-                imageSrc={imageSrc || imageUrl}
-                variant={variant || (isInverse ? 'inverse' : 'default')}
+                slot={slot}
+                topActions={topActions}
+                buttonPrimary={buttonPrimary}
                 ref={ref}
                 {...rest}
             />

package/src/card-naked.tsx

@@ -6,55 +6,23 @@ import {useThemeVariant} from './theme-variant-context';
 import type {MediaCardProps} from './card-media';
 import type {MaybeTouchableCard} from './card-internal';
 
-type NakedCardProps = Omit<MediaCardProps, 'footerBackgroundColor' | 'variant' | 'footerVariant'> & {
-    /** @deprecated NakedCards use the context variant because they are transparent */
-    variant?: MediaCardProps['variant'];
-    /** @deprecated NakedCards use the context variant because they are transparent */
-    footerVariant?: MediaCardProps['footerVariant'];
-};
+type NakedCardProps = Omit<MediaCardProps, 'footerBackgroundColor' | 'variant' | 'footerVariant'>;
 
 export const NakedCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<NakedCardProps>>(
-    (
-        {size = 'default', slot, extra, topActions, actions, button, buttonPrimary, dataAttributes, ...rest},
-        ref
-    ) => {
+    ({size = 'default', slot, topActions, buttonPrimary, dataAttributes, ...rest}, ref) => {
         const variant = useThemeVariant();
         return (
             <InternalCard
                 dataAttributes={{
-                    'component-name': 'NakedCard',
                     testid: 'NakedCard',
                     ...dataAttributes,
                 }}
                 variant={variant}
                 type="naked"
                 size={size}
-                slot={slot || extra}
-                topActions={topActions || actions}
-                buttonPrimary={buttonPrimary || button}
-                ref={ref}
-                {...rest}
-            />
-        );
-    }
-);
-
-type SmallNakedCardProps = Omit<NakedCardProps, 'size'>;
-
-/**
- * @deprecated use <NakedCard size="snap" /> instead
- */
-export const SmallNakedCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<SmallNakedCardProps>>(
-    ({dataAttributes, slotAlignment = 'bottom', ...rest}, ref) => {
-        return (
-            <NakedCard
-                dataAttributes={{
-                    'component-name': 'SmallNakedCard',
-                    testid: 'SmallNakedCard',
-                    ...dataAttributes,
-                }}
-                slotAlignment={slotAlignment}
-                size="snap"
+                slot={slot}
+                topActions={topActions}
+                buttonPrimary={buttonPrimary}
                 ref={ref}
                 {...rest}
             />

package/src/carousel.tsx

@@ -12,7 +12,7 @@ import {useDocumentVisibility} from './utils/document-visibility';
 import * as styles from './carousel.css';
 import * as mediaStyles from './image.css';
 import {useDesktopContainerType} from './desktop-container-type-context';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import {applyCssVars} from './utils/css';
 import {ResetResponsiveLayout} from './responsive-layout';
 import {InternalIconButton, ToggleIconButton} from './icon-button';
@@ -232,7 +232,7 @@ export const PageBullets = ({currentIndex, numPages}: PageBulletsProps): JSX.Ele
 
     return (
         <div
-            {...getPrefixedDataAttributes({'component-name': 'PageBullets', testid: 'PageBullets'})}
+            {...getPrefixedDataAttributes({testid: 'PageBullets'})}
             className={classNames(styles.bulletsScrollableContainerBase, {
                 [styles.bulletsScrollableContainer]: pagesCount > styles.VISIBLE_BULLETS,
             })}
@@ -789,7 +789,7 @@ const BaseCarousel = ({
     }
 
     const largePageOffset = '64px';
-    const vivoNewMobilePageOffset = '36px';
+    const vivoMobilePageOffset = '36px';
 
     const bulletsContainer = (
         <div
@@ -810,7 +810,6 @@ const BaseCarousel = ({
     return (
         <div
             {...getPrefixedDataAttributes({
-                'component-name': 'Carousel',
                 testid: 'Carousel',
                 ...dataAttributes,
             })}
@@ -883,8 +882,8 @@ const BaseCarousel = ({
                             [styles.vars.itemsPerPageMobile]: String(itemsPerPageConfig.mobile),
                             ...(mobilePageOffset === 'large'
                                 ? {[styles.vars.mobilePageOffset]: largePageOffset}
-                                : skinName === VIVO_NEW_SKIN
-                                  ? {[styles.vars.mobilePageOffset]: vivoNewMobilePageOffset}
+                                : skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN
+                                  ? {[styles.vars.mobilePageOffset]: vivoMobilePageOffset}
                                   : {}),
                             ...(gap !== undefined ? {[styles.vars.gap]: String(gap)} : {}),
                         }),
@@ -1230,7 +1229,7 @@ export const Slideshow = ({
                     className={classNames(styles.slideshowContainer, {
                         [styles.slideshowWithBullets]: !!withBullets,
                     })}
-                    {...getPrefixedDataAttributes(dataAttributes, 'SlideShow')}
+                    {...getPrefixedDataAttributes({testid: 'SlideShow', ...dataAttributes})}
                 >
                     {items.length > 1 &&
                         (withControls ? (

package/src/checkbox.tsx

@@ -158,7 +158,7 @@ const Checkbox = React.forwardRef<HTMLDivElement, RenderProps | ChildrenProps>((
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : labelId}
             aria-disabled={disabled}
-            {...getPrefixedDataAttributes(props.dataAttributes, 'Checkbox')}
+            {...getPrefixedDataAttributes({testid: 'Checkbox', ...props.dataAttributes})}
         >
             {props.render ? (
                 props.render({

package/src/chip.tsx

@@ -84,7 +84,7 @@ const Chip = (props: ChipProps): JSX.Element => {
         </>
     );
 
-    const chipDataAttributes = {'component-name': 'Chip', testid: 'Chip', ...dataAttributes};
+    const chipDataAttributes = {testid: 'Chip', ...dataAttributes};
 
     if (onClose) {
         return (

package/src/circle.tsx

@@ -42,7 +42,7 @@ const Circle = ({
                     : `center / cover no-repeat ${imageStyle} ${backgroundColor || ''}`,
                 border: borderProp,
             }}
-            {...getPrefixedDataAttributes(dataAttributes, 'Circle')}
+            {...getPrefixedDataAttributes({testid: 'Circle', ...dataAttributes})}
         >
             {children}
         </div>

package/src/community/__screenshot_tests__/advanced-data-card-screenshot-test.tsx

@@ -24,15 +24,15 @@ test.each`
 });
 
 test.each`
-    extra
+    slot
     ${0}
     ${1}
     ${3}
-`('Advanced Data Card extras: $extra', async ({extra}) => {
+`('Advanced Data Card slots: $slot', async ({slot}) => {
     await openStoryPage({
         id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
-        args: {extra},
+        args: {slot},
     });
 
     const element = await screen.findByTestId('advanced-data-card');
@@ -41,11 +41,11 @@ test.each`
     expect(image).toMatchImageSnapshot();
 });
 
-test('Advanced Data Card extras: 3 no divider', async () => {
+test('Advanced Data Card slots: 3 no divider', async () => {
     await openStoryPage({
         id: 'community-vivo-advanceddatacard--default',
         device: 'MOBILE_IOS',
-        args: {extra: 3, noExtraDivider: true},
+        args: {slot: 3, noSlotDivider: true},
     });
 
     const element = await screen.findByTestId('advanced-data-card');

package/src/community/__stories__/advanced-data-card-carousel-story.tsx

@@ -28,7 +28,7 @@ export const Default: StoryComponent<Args> = ({href}) => {
                 <AdvancedDataCard
                     title="Title 2"
                     headline={<Tag>Headline 2</Tag>}
-                    extra={[<Placeholder height={48} />]}
+                    slot={[<Placeholder height={48} />]}
                     footerText="Footer 2"
                     onClose={() => {}}
                     href={hasHref}
@@ -37,7 +37,7 @@ export const Default: StoryComponent<Args> = ({href}) => {
                 <AdvancedDataCard
                     title="Title 3"
                     description="Description 3"
-                    extra={[<Placeholder height={48} />, <Placeholder height={48} />]}
+                    slot={[<Placeholder height={48} />, <Placeholder height={48} />]}
                     footerText="Footer 3"
                     onClose={() => {}}
                     href={hasHref}
@@ -45,7 +45,7 @@ export const Default: StoryComponent<Args> = ({href}) => {
                 />,
                 <AdvancedDataCard
                     title="Title 4"
-                    extra={[
+                    slot={[
                         <Placeholder height={48} />,
                         <Placeholder height={48} />,
                         <Placeholder height={48} />,

package/src/community/__stories__/advanced-data-card-story.tsx

@@ -28,8 +28,8 @@ type Args = {
     footerText: string;
     actions: string;
     onClose: boolean;
-    extra: number;
-    noExtraDivider: boolean;
+    slot: number;
+    noSlotDivider: boolean;
 };
 
 export const Default: StoryComponent<Args> = ({
@@ -46,8 +46,8 @@ export const Default: StoryComponent<Args> = ({
     footerText,
     actions,
     onClose,
-    extra,
-    noExtraDivider,
+    slot,
+    noSlotDivider,
 }) => {
     const button = actions.includes('button') ? (
         <ButtonPrimary
@@ -103,10 +103,10 @@ export const Default: StoryComponent<Args> = ({
             footerText={footerText}
             onClose={onClose ? () => window.alert('closed!') : undefined}
             href={href}
-            extra={Array.from({length: extra}, (_, i) => (
+            slot={Array.from({length: slot}, (_, i) => (
                 <Placeholder key={i} height={56} />
             ))}
-            noExtraDivider={noExtraDivider}
+            noSlotDivider={noSlotDivider}
         />
     );
 };
@@ -126,8 +126,8 @@ Default.args = {
     footerText: '',
     actions: 'button and link',
     onClose: true,
-    extra: 0,
-    noExtraDivider: false,
+    slot: 0,
+    noSlotDivider: false,
 };
 Default.argTypes = {
     headlineType: {

package/src/community/advanced-data-card.css.ts

@@ -97,7 +97,7 @@ export const cardContentStyle = style([
     },
 ]);
 
-export const extra = style([sprinkles({paddingTop: 16, paddingBottom: 24, width: '100%'}), {zIndex: -1}]);
+export const slot = style([sprinkles({paddingTop: 16, paddingBottom: 24, width: '100%'}), {zIndex: -1}]);
 
 export const MIN_HEIGHT = 216;
 export const minHeight = style({minHeight: MIN_HEIGHT});