@telefonica/mistica 16.70.0 → 16.72.0

package/src/__figma__/toggle-icon-button.figma.ts

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=16351-4027
+// source=src/icon-button.tsx
+// component=ToggleIconButton
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Checked" is a VARIANT (false | true) mapping to the boolean `checked` code prop.
+const checked = instance.getEnum('Checked', {true: true, false: false});
+
+export default {
+    example: figma.code`
+        <ToggleIconButton
+            checkedProps={{Icon: () => null, 'aria-label': 'checked'}}
+            uncheckedProps={{Icon: () => null, 'aria-label': 'unchecked'}}
+            ${checked ? 'checked' : ''}
+            onChange={() => {}}
+        />
+    `,
+    imports: ['import {ToggleIconButton} from "@telefonica/mistica";'],
+    id: 'toggle-icon-button',
+    metadata: {nestable: false},
+};

package/src/__figma__/tooltip.figma.ts

@@ -0,0 +1,39 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=1636-5385
+// source=src/tooltip.tsx
+// component=Tooltip
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Title" / "Description" are BOOLEANs toggling the corresponding component-property TEXT.
+const hasTitle = instance.getBoolean('Title');
+const title = instance.getString('Title Text');
+
+const hasDescription = instance.getBoolean('Description');
+const description = instance.getString('Description Text');
+
+// "Delay" is a BOOLEAN mapping onto the boolean `delay` code prop.
+const delay = instance.getBoolean('Delay');
+
+// "Arrow position" is a VARIANT mapping onto the `position` code prop.
+const position = instance.getEnum('Arrow position', {
+    '↑ Top': 'top',
+    '→ Right': 'right',
+    '↓ Bottom': 'bottom',
+    '← Left': 'left',
+});
+
+export default {
+    example: figma.code`
+        <Tooltip
+            target={<span>Target element</span>}
+            ${hasTitle ? figma.code`title="${title}"` : ''}
+            ${hasDescription ? figma.code`description="${description}"` : ''}
+            position="${position}"
+            ${delay ? 'delay' : ''}
+        />
+    `,
+    imports: ['import {Tooltip} from "@telefonica/mistica";'],
+    id: 'tooltip',
+    metadata: {nestable: false},
+};

package/src/__figma__/tooltip.mobile.figma.ts

@@ -0,0 +1,39 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=2147-7654
+// source=src/tooltip.tsx
+// component=Tooltip
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Title" / "Description" are BOOLEANs toggling the corresponding component-property TEXT.
+const hasTitle = instance.getBoolean('Title');
+const title = instance.getString('Title Text');
+
+const hasDescription = instance.getBoolean('Description');
+const description = instance.getString('Description Text');
+
+// "Delay" is a BOOLEAN mapping onto the boolean `delay` code prop.
+const delay = instance.getBoolean('Delay');
+
+// "Arrow position" is a VARIANT mapping onto the `position` code prop.
+const position = instance.getEnum('Arrow position', {
+    '↑ Top': 'top',
+    '→ Right': 'right',
+    '↓ Bottom': 'bottom',
+    '← Left': 'left',
+});
+
+export default {
+    example: figma.code`
+        <Tooltip
+            target={<span>Target element</span>}
+            ${hasTitle ? figma.code`title="${title}"` : ''}
+            ${hasDescription ? figma.code`description="${description}"` : ''}
+            position="${position}"
+            ${delay ? 'delay' : ''}
+        />
+    `,
+    imports: ['import {Tooltip} from "@telefonica/mistica";'],
+    id: 'tooltip-mobile',
+    metadata: {nestable: false},
+};

package/src/__figma__/unordered-list.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=30916-17448
+// source=src/list.tsx
+// component=UnorderedList
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const textLayer = instance.findText('Text');
+const text = textLayer.type === 'TEXT' ? textLayer.textContent : '';
+
+// "Marker type" VARIANT decides the list item marker. "None" hides the marker,
+// "Icon" swaps in the "Icon" instance rendered as the ListItem `icon`.
+const markerType = instance.getEnum('Marker type', {
+    Default: 'default',
+    Icon: 'icon',
+    Custom: 'custom',
+    None: 'none',
+});
+
+const icon = markerType === 'icon' ? instance.getInstanceSwap('Icon') : null;
+let iconCode;
+if (icon && icon.type === 'INSTANCE') {
+    iconCode = icon.executeTemplate().example;
+}
+
+export default {
+    example: figma.code`
+        <UnorderedList>
+            <ListItem
+                ${markerType === 'none' ? 'withMarker={false}' : ''}
+                ${iconCode ? figma.code`icon={${iconCode}}` : ''}
+            >
+                ${text}
+            </ListItem>
+        </UnorderedList>
+    `,
+    imports: ['import {UnorderedList, ListItem} from "@telefonica/mistica";'],
+    id: 'unordered-list',
+    metadata: {nestable: false},
+};

package/src/__figma__/vertical-mosaic.figma.ts

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=15002-911
+// source=src/mosaic.tsx
+// component=VerticalMosaic
+import figma from 'figma';
+
+export default {
+    example: figma.code`
+        <VerticalMosaic
+            items={[<div key="1">Item 1</div>, <div key="2">Item 2</div>, <div key="3">Item 3</div>]}
+        />
+    `,
+    imports: ['import {VerticalMosaic} from "@telefonica/mistica";'],
+    id: 'vertical-mosaic',
+    metadata: {nestable: false},
+};

package/src/__figma__/video.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/DSWhPLyJzbliP1fBrLxDUR/M%C3%ADstica-Desktop?node-id=1801-4548
+// source=src/video.tsx
+// component=Video
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Loop" / "Muted" / "Autoplay" are BOOLEANs mapping onto the boolean code props.
+const loop = instance.getBoolean('Loop');
+const muted = instance.getBoolean('Muted');
+const autoPlay = instance.getBoolean('Autoplay');
+
+export default {
+    example: figma.code`
+        <Video
+            src="https://example.com/video.mp4"
+            ${loop ? 'loop' : ''}
+            ${muted ? 'muted' : ''}
+            ${autoPlay ? 'autoPlay' : ''}
+        />
+    `,
+    imports: ['import {Video} from "@telefonica/mistica";'],
+    id: 'video',
+    metadata: {nestable: false},
+};

package/src/__figma__/video.mobile.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/WCkDDzlXE16R6yXaljxddj/M%C3%ADstica-Mobile?node-id=2615-8435
+// source=src/video.tsx
+// component=Video
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+// "Loop" / "Muted" / "Autoplay" are BOOLEANs mapping onto the boolean code props.
+const loop = instance.getBoolean('Loop');
+const muted = instance.getBoolean('Muted');
+const autoPlay = instance.getBoolean('Autoplay');
+
+export default {
+    example: figma.code`
+        <Video
+            src="https://example.com/video.mp4"
+            ${loop ? 'loop' : ''}
+            ${muted ? 'muted' : ''}
+            ${autoPlay ? 'autoPlay' : ''}
+        />
+    `,
+    imports: ['import {Video} from "@telefonica/mistica";'],
+    id: 'video-mobile',
+    metadata: {nestable: false},
+};

package/src/accordion.tsx

@@ -248,7 +248,7 @@ export const AccordionItem = React.forwardRef<TouchableElement, AccordionItemCon
             <AccordionItemContent
                 {...props}
                 ref={ref}
-                dataAttributes={{'component-name': 'AccordionItem', ...dataAttributes}}
+                dataAttributes={{testid: 'AccordionItem', ...dataAttributes}}
             />
         </div>
     )
@@ -297,7 +297,7 @@ export const Accordion = ({
         <AccordionContext.Provider value={{index: indexList, toggle}}>
             <div
                 role={role}
-                {...getPrefixedDataAttributes({...dataAttributes, accordion: true}, 'Accordion')}
+                {...getPrefixedDataAttributes({testid: 'Accordion', ...dataAttributes, accordion: true})}
             >
                 {childrenContent.map((child, index) => (
                     <React.Fragment key={index}>
@@ -315,21 +315,17 @@ export const Accordion = ({
 };
 
 interface BoxedAccordionItemProps extends AccordionItemContentProps {
-    /**
-     * @deprecated Use `variant="brand"` instead.
-     */
-    isInverse?: boolean;
     variant?: 'default' | 'brand';
 }
 
 export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordionItemProps>(
-    ({dataAttributes, isInverse, variant, ...props}, ref) => (
+    ({dataAttributes, variant, ...props}, ref) => (
         <InternalBoxed
             overflow="visible"
             className={styles.boxed}
-            variant={variant ?? (isInverse ? 'brand' : 'default')}
+            variant={variant ?? 'default'}
             ref={ref}
-            dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
+            dataAttributes={{testid: 'BoxedAccordionItem', ...dataAttributes}}
         >
             <AccordionItemContent {...props} />
         </InternalBoxed>
@@ -357,7 +353,7 @@ export const BoxedAccordion = ({
             <Stack
                 space={16}
                 role={role}
-                dataAttributes={{'component-name': 'BoxedAccordion', accordion: true, ...dataAttributes}}
+                dataAttributes={{testid: 'BoxedAccordion', accordion: true, ...dataAttributes}}
             >
                 {children}
             </Stack>

package/src/align.tsx

@@ -16,7 +16,7 @@ type Props = {
 const Align = ({x = 'start', y = 'start', width, height, children, dataAttributes}: Props): JSX.Element => {
     return (
         <div
-            {...getPrefixedDataAttributes(dataAttributes, 'Align')}
+            {...getPrefixedDataAttributes({testid: 'Align', ...dataAttributes})}
             className={styles.container}
             style={{
                 placeItems: `${y} ${x}`,

package/src/avatar.tsx

@@ -98,7 +98,7 @@ const Avatar = ({
                     boxSizing: 'border-box',
                     border,
                 }}
-                {...getPrefixedDataAttributes(dataAttributes, 'Avatar')}
+                {...getPrefixedDataAttributes({testid: 'Avatar', ...dataAttributes})}
             >
                 {shouldRenderImage ? (
                     <img

package/src/badge.tsx

@@ -42,7 +42,10 @@ const Badge = ({children, value, right, top, dataAttributes}: Props): JSX.Elemen
         themeVariant === 'brand' || themeVariant === 'negative' || themeVariant === 'media' || !!children;
 
     return (
-        <div className={classes.container} {...getPrefixedDataAttributes(dataAttributes, 'Badge')}>
+        <div
+            className={classes.container}
+            {...getPrefixedDataAttributes({testid: 'Badge', ...dataAttributes})}
+        >
             {children}
             {value ? (
                 <div

package/src/boxed.tsx

@@ -12,8 +12,6 @@ import type {ByBreakpoint, DataAttributes} from './utils/types';
 
 type Props = {
     children: React.ReactNode;
-    /** @deprecated use variant="brand" instead */
-    isInverse?: boolean;
     variant?: Variant;
     className?: string;
     role?: string;
@@ -76,7 +74,6 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
     (
         {
             children,
-            isInverse = false,
             className,
             role,
             dataAttributes,
@@ -97,7 +94,7 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
         ref
     ) => {
         const externalVariant = normalizeVariant(useThemeVariant());
-        const internalVariant = normalizeVariant(variant ?? (isInverse ? 'brand' : 'default'));
+        const internalVariant = normalizeVariant(variant ?? 'default');
 
         return (
             <div

package/src/button-group.tsx

@@ -62,7 +62,7 @@ const ButtonGroup = ({
                     [styles.centerInMobile]: alignByBreakpoint.mobile === 'center',
                 }
             )}
-            {...getPrefixedDataAttributes(dataAttributes, 'ButtonGroup')}
+            {...getPrefixedDataAttributes({testid: 'ButtonGroup', ...dataAttributes})}
         >
             {(primaryButton || secondaryButton) && (
                 <div

package/src/button-layout.tsx

@@ -71,7 +71,7 @@ const ButtonLayout = ({
             className={classnames(styles.container, styles.alignVariant[align], {
                 [styles.containerWithTwoButtons]: numberOfButtons > 1,
             })}
-            {...getPrefixedDataAttributes(dataAttributes, 'ButtonLayout')}
+            {...getPrefixedDataAttributes({testid: 'ButtonLayout', ...dataAttributes})}
         >
             {align !== 'right' || numberOfButtons > 1 ? (
                 <>

package/src/button.css.ts

@@ -89,6 +89,7 @@ export const smallTouchableArea = style([
 
 export const smallTouchableVisual = style({
     width: '100%',
+    pointerEvents: 'none',
 });
 
 const button = style([

package/src/button.tsx

@@ -5,7 +5,7 @@ import Box from './box';
 import * as styles from './button.css';
 import {useForm} from './form-context';
 import {useTheme} from './hooks';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import {flattenChildren} from './skins/utils';
 import Spinner from './spinner';
 import {Text, Text3} from './text';
@@ -112,8 +112,8 @@ const renderButtonElement = ({
 const ButtonLinkChevron = () => {
     const {skinName} = useTheme();
 
-    // vivo new skin has a different chevron
-    if (skinName === VIVO_NEW_SKIN) {
+    // vivo skin has a different chevron
+    if (skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN) {
         return (
             <svg width="0.5em" height="0.5em" viewBox="0 0 8 8" fill="none">
                 <path
@@ -566,7 +566,7 @@ export const ButtonLink = React.forwardRef<
 >(({dataAttributes, className, ...props}, ref) => {
     return (
         <BaseButton
-            dataAttributes={{'component-name': 'ButtonLink', testid: 'ButtonLink', ...dataAttributes}}
+            dataAttributes={{testid: 'ButtonLink', ...dataAttributes}}
             className={classnames(className, {[styles.smallLink]: props.small})}
             {...props}
             ref={ref}
@@ -580,7 +580,6 @@ export const ButtonLinkDanger = React.forwardRef<TouchableElement, ButtonLinkPro
         return (
             <BaseButton
                 dataAttributes={{
-                    'component-name': 'ButtonLinkDanger',
                     testid: 'ButtonLinkDanger',
                     ...dataAttributes,
                 }}
@@ -599,7 +598,6 @@ export const ButtonPrimary = React.forwardRef<TouchableElement, ButtonProps>(
         return (
             <BaseButton
                 dataAttributes={{
-                    'component-name': 'ButtonPrimary',
                     testid: 'ButtonPrimary',
                     ...dataAttributes,
                 }}
@@ -616,7 +614,6 @@ export const ButtonSecondary = React.forwardRef<TouchableElement, ButtonProps>(
         return (
             <BaseButton
                 dataAttributes={{
-                    'component-name': 'ButtonSecondary',
                     testid: 'ButtonSecondary',
                     ...dataAttributes,
                 }}
@@ -632,7 +629,7 @@ export const ButtonDanger = React.forwardRef<TouchableElement, ButtonProps>(
     ({dataAttributes, ...props}, ref) => {
         return (
             <BaseButton
-                dataAttributes={{'component-name': 'ButtonDanger', testid: 'ButtonDanger', ...dataAttributes}}
+                dataAttributes={{testid: 'ButtonDanger', ...dataAttributes}}
                 {...props}
                 ref={ref}
                 buttonType="danger"

package/src/callout.tsx

@@ -79,7 +79,7 @@ const Callout = ({
             })}
             aria-label={ariaLabel}
             role={role}
-            {...getPrefixedDataAttributes(dataAttributes, 'Callout')}
+            {...getPrefixedDataAttributes({testid: 'Callout', ...dataAttributes})}
         >
             <ThemeVariant variant={variant}>
                 {asset && (

package/src/card-cover.tsx

@@ -15,7 +15,6 @@ import type {
 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 = {
@@ -72,7 +71,6 @@ export const CoverCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Cov
             <InternalCard
                 ref={ref}
                 dataAttributes={{
-                    'component-name': 'CoverCard',
                     testid: 'CoverCard',
                     ...dataAttributes,
                 }}
@@ -83,160 +81,3 @@ export const CoverCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Cov
         );
     }
 );
-
-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}
-            />
-        );
-    }
-);