@telefonica/mistica 16.70.0 → 16.72.0

package/src/logo.tsx

@@ -6,13 +6,10 @@ import Touchable from './touchable';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './logo.css';
 import MovistarLogoShell from './logo-movistar-shell';
-import MovistarNewLogoShell from './logo-movistar-new-shell';
 import VivoLogoShell from './logo-vivo-shell';
 import O2LogoShell from './logo-o2-shell';
-import O2NewLogoShell from './logo-o2-new-shell';
 import TelefonicaLogoShell from './logo-telefonica-shell';
 import BlauLogoShell from './logo-blau-shell';
-import TuLogoShell from './logo-tu-shell';
 import EsimflagLogoShell from './logo-esimflag-shell';
 
 import type {LogoType} from './logo-common';
@@ -30,14 +27,6 @@ const MovistarLogoImage = React.lazy(
         )
 );
 
-const MovistarNewLogoImage = React.lazy(
-    () =>
-        import(
-            /* webpackChunkName: "logo-movistar-new" */
-            './logo-movistar-new'
-        )
-);
-
 const VivoLogoImage = React.lazy(
     () =>
         import(
@@ -54,14 +43,6 @@ const O2LogoImage = React.lazy(
         )
 );
 
-const O2NewLogoImage = React.lazy(
-    () =>
-        import(
-            /* webpackChunkName: "logo-o2-new" */
-            './logo-o2-new'
-        )
-);
-
 const TelefonicaLogoImage = React.lazy(
     () =>
         import(
@@ -78,14 +59,6 @@ const BlauLogoImage = React.lazy(
         )
 );
 
-const TuLogoImage = React.lazy(
-    () =>
-        import(
-            /* webpackChunkName: "logo-tu" */
-            './logo-tu'
-        )
-);
-
 const EsimflagLogoImage = React.lazy(
     () =>
         import(
@@ -118,21 +91,8 @@ const LogoBase = ({size, skinName, type = 'isotype', color}: LogoBaseProps): JSX
                     </React.Suspense>
                 </MovistarLogoShell>
             );
-        case 'Movistar-new':
-            return (
-                <MovistarNewLogoShell size={size} type={type}>
-                    <React.Suspense>
-                        <MovistarNewLogoImage
-                            type={type}
-                            isDarkMode={isDarkMode}
-                            themeVariant={themeVariant}
-                            color={color}
-                        />
-                    </React.Suspense>
-                </MovistarNewLogoShell>
-            );
         case 'Vivo':
-        case 'Vivo-new':
+        case 'Vivo-evolution':
             return (
                 <VivoLogoShell size={size} type={type}>
                     <React.Suspense>
@@ -158,19 +118,6 @@ const LogoBase = ({size, skinName, type = 'isotype', color}: LogoBaseProps): JSX
                     </React.Suspense>
                 </O2LogoShell>
             );
-        case 'O2-new':
-            return (
-                <O2NewLogoShell size={size}>
-                    <React.Suspense>
-                        <O2NewLogoImage
-                            type={type}
-                            isDarkMode={isDarkMode}
-                            themeVariant={themeVariant}
-                            color={color}
-                        />
-                    </React.Suspense>
-                </O2NewLogoShell>
-            );
         case 'Telefonica':
             return (
                 <TelefonicaLogoShell size={size} type={type}>
@@ -197,19 +144,6 @@ const LogoBase = ({size, skinName, type = 'isotype', color}: LogoBaseProps): JSX
                     </React.Suspense>
                 </BlauLogoShell>
             );
-        case 'Tu':
-            return (
-                <TuLogoShell size={size}>
-                    <React.Suspense>
-                        <TuLogoImage
-                            type={type}
-                            isDarkMode={isDarkMode}
-                            themeVariant={themeVariant}
-                            color={color}
-                        />
-                    </React.Suspense>
-                </TuLogoShell>
-            );
         case 'Esimflag':
             return (
                 <EsimflagLogoShell size={size} type={type}>
@@ -242,7 +176,7 @@ const MaybeTouchableLogo = (
         dataAttributes?: DataAttributes;
     }> & {size: ByBreakpoint<number>}
 ): JSX.Element => {
-    const dataAttributes = getPrefixedDataAttributes(props.dataAttributes, 'Logo');
+    const dataAttributes = getPrefixedDataAttributes({testid: 'Logo', ...props.dataAttributes});
 
     if (props.to || props.href || props.onPress) {
         return <Touchable {...props} />;
@@ -280,10 +214,6 @@ export const MovistarLogo = ({size, type, color, ...props}: LogoProps): JSX.Elem
     <LogoInternal size={size} type={type} color={color} skinName="Movistar" {...props} />
 );
 
-export const MovistarNewLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => (
-    <LogoInternal size={size} type={type} color={color} skinName="Movistar-new" {...props} />
-);
-
 export const VivoLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => (
     <LogoInternal size={size} type={type} color={color} skinName="Vivo" {...props} />
 );
@@ -292,10 +222,6 @@ export const O2Logo = ({size, type, color, ...props}: LogoProps): JSX.Element =>
     <LogoInternal size={size} type={type} color={color} skinName="O2" {...props} />
 );
 
-export const O2NewLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => (
-    <LogoInternal size={size} type={type} color={color} skinName="O2-new" {...props} />
-);
-
 export const TelefonicaLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => (
     <LogoInternal size={size} type={type} color={color} skinName="Telefonica" {...props} />
 );
@@ -304,10 +230,6 @@ export const BlauLogo = ({size, type, color, ...props}: LogoProps): JSX.Element
     <LogoInternal size={size} type={type} color={color} skinName="Blau" {...props} />
 );
 
-export const TuLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => (
-    <LogoInternal size={size} type={type} color={color} skinName="Tu" {...props} />
-);
-
 export const EsimflagLogo = ({size, type, color, ...props}: LogoProps): JSX.Element => (
     <LogoInternal size={size} type={type} color={color} skinName="Esimflag" {...props} />
 );

package/src/menu.tsx

@@ -465,7 +465,7 @@ export const Menu = ({
     }, [target, isMenuOpen]);
 
     return (
-        <div {...getPrefixedDataAttributes(dataAttributes, 'Menu')}>
+        <div {...getPrefixedDataAttributes({testid: 'Menu', ...dataAttributes})}>
             {renderTarget({...targetProps, isMenuOpen})}
 
             <Portal>

package/src/meter.tsx

@@ -128,7 +128,7 @@ type MeterProps = {
     colors?: Array<string>;
     reverse?: boolean;
     dataAttributes?: DataAttributes;
-    extra?: React.ReactNode;
+    slot?: React.ReactNode;
     'aria-hidden'?: boolean | 'true' | 'false';
     'aria-label'?: string;
     'aria-labelledby'?: string;
@@ -144,7 +144,7 @@ const MeterComponent = ({
     'aria-hidden': ariaHidden = false,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
-    extra,
+    slot,
 }: MeterProps): JSX.Element => {
     const {borderRadii, t} = useTheme();
     const {ref: containerRef, width: containerWidth} = useElementDimensions();
@@ -285,7 +285,7 @@ const MeterComponent = ({
         ' ' +
         values.map((v, i) => `${t(meterSectionLabel, i + 1, Math.round(v * 100))}`).join('. ');
 
-    const extraStyle = React.useMemo(() => {
+    const slotStyle = React.useMemo(() => {
         if (type === TYPE_LINEAR) {
             return {display: 'flex'};
         }
@@ -315,7 +315,7 @@ const MeterComponent = ({
             aria-live="polite"
             aria-valuetext={valueText}
             aria-hidden={ariaHidden}
-            {...getPrefixedDataAttributes(dataAttributes, 'Meter')}
+            {...getPrefixedDataAttributes({testid: 'Meter', ...dataAttributes})}
         >
             <svg
                 viewBox={`0 0 ${VIEW_BOX_WIDTH} ${viewBoxHeight}`}
@@ -501,7 +501,7 @@ const MeterComponent = ({
                         );
                     })}
             </svg>
-            {extra && <div style={extraStyle}>{extra}</div>}
+            {slot && <div style={slotStyle}>{slot}</div>}
         </div>
     );
 };

package/src/month-field.tsx

@@ -99,7 +99,7 @@ const DateField = ({
                     <IconCalendarRegular size={iconSize.small} />
                 </div>
             }
-            dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}}
+            dataAttributes={{testid: 'MonthField', ...dataAttributes}}
         />
     );
 
@@ -115,7 +115,7 @@ const DateField = ({
                 optional={optional}
                 isValidDate={(currentDate) => isInRange(getLocalYearMonthString(currentDate.toDate()))}
                 mode="year-month"
-                dataAttributes={{'component-name': 'MonthField', testid: 'MonthField', ...dataAttributes}}
+                dataAttributes={{testid: 'MonthField', ...dataAttributes}}
             />
         </React.Suspense>
     );

package/src/mosaic.tsx

@@ -83,7 +83,7 @@ export const HorizontalMosaic = ({
         <Carousel
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledby}
-            dataAttributes={{...dataAttributes, 'component-name': 'HorizontalMosaic'}}
+            dataAttributes={{...dataAttributes, testid: 'horizontal-mosaic'}}
             items={pages.map((items, index) => (
                 <Grid>
                     <HorizontalMosaicPage items={items} isEven={index % 2 === 0} key={index} />
@@ -195,7 +195,7 @@ export const VerticalMosaic = ({
             gap={GRID_GAP}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledby}
-            dataAttributes={{'component-name': 'VerticalMosaic', testid: 'VerticalMosaic', ...dataAttributes}}
+            dataAttributes={{testid: 'vertical-mosaic', ...dataAttributes}}
         >
             {pages.map((items, index) => (
                 <VerticalMosaicPage items={items} itemRole={itemRole} key={index} />

package/src/navigation-bar.tsx

@@ -53,7 +53,7 @@ const MenuSectionArrow = ({size = 24, color = vars.colors.neutralHigh, style, cl
 
 const BurgerMenuIcon = ({isOpen}: {isOpen: boolean}) => {
     return (
-        <div className={styles.burgerIconContainer} role="presentation" data-component-name="BurgerMenuIcon">
+        <div className={styles.burgerIconContainer} role="presentation" data-testid="BurgerMenuIcon">
             <div className={isOpen ? styles.iconCloseOpen : styles.iconCloseHidden}>
                 <IconCloseRegular />
             </div>
@@ -193,13 +193,10 @@ interface NavigationBarCommonProps {
 
 interface NavigationBarTopFixedProps extends NavigationBarCommonProps {
     topFixed?: true;
-    paddingX?: undefined;
 }
 
 interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
     topFixed: false;
-    /** @deprecated use wide */
-    paddingX?: number;
 }
 
 type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
@@ -211,7 +208,6 @@ export const NavigationBar = ({
     right,
     variant = 'default',
     topFixed = true,
-    paddingX = 0,
     withBorder = true,
     wide = false,
 }: NavigationBarProps): JSX.Element => {
@@ -236,14 +232,10 @@ export const NavigationBar = ({
     );
 
     const calcPaddingXWhenNotTopFixed = (): BoxProps['paddingX'] => {
-        if (wide !== undefined) {
-            if (typeof wide !== 'object') {
-                return 0;
-            }
-            return wide.paddingX ?? 0;
+        if (typeof wide !== 'object') {
+            return 0;
         }
-
-        return paddingX as BoxProps['paddingX'];
+        return wide.paddingX ?? 0;
     };
 
     const normalizedVariant = normalizeVariant(variant);
@@ -254,7 +246,7 @@ export const NavigationBar = ({
                 topFixed={topFixed}
                 withBorder={withBorder}
                 variant={normalizedVariant}
-                dataAttributes={{'component-name': 'NavigationBar'}}
+                dataAttributes={{testid: 'NavigationBar'}}
             >
                 {topFixed ? (
                     <NavigationBarSideMargins wide={wide}>{content}</NavigationBarSideMargins>
@@ -321,7 +313,7 @@ type MainNavigationBarProps = {
     children?: undefined;
     topFixed?: boolean;
     withBorder?: boolean;
-    burgerMenuExtra?: React.ReactNode;
+    burgerMenuSlot?: React.ReactNode;
     large?: boolean;
     desktopLargeMenu?: boolean;
     wide?: boolean | WideConfig;
@@ -443,7 +435,7 @@ const MainNavigationBarBurgerSection = ({
 
 const MainNavigationBarBurgerMenu = ({
     sections,
-    extra,
+    slot,
     closeMenu,
     open,
     topSlotHeight,
@@ -452,7 +444,7 @@ const MainNavigationBarBurgerMenu = ({
     setDisableFocusTrap,
 }: {
     sections: ReadonlyArray<MainNavigationBarSection>;
-    extra: React.ReactNode;
+    slot: React.ReactNode;
     closeMenu: () => void;
     open: boolean;
     topSlotHeight: number;
@@ -554,7 +546,7 @@ const MainNavigationBarBurgerMenu = ({
                                                 ))}
                                             </RowList>
                                         </ResetResponsiveLayout>
-                                        {extra && <Box paddingY={16}>{extra}</Box>}
+                                        {slot && <Box paddingY={16}>{slot}</Box>}
                                     </ResponsiveLayout>
                                 )}
                             </div>
@@ -1416,7 +1408,7 @@ export const MainNavigationBar = ({
     variant = 'default',
     topFixed = true,
     withBorder = true,
-    burgerMenuExtra,
+    burgerMenuSlot,
     logo,
     large = false,
     desktopLargeMenu = false,
@@ -1469,7 +1461,7 @@ export const MainNavigationBar = ({
                 withBorder={withBorder}
                 isBurgerMenuOpen={isBurgerMenuOpen}
                 variant={normalizedVariant}
-                dataAttributes={{'component-name': 'MainNavigationBar'}}
+                dataAttributes={{testid: 'MainNavigationBar'}}
             >
                 {desktopLargeMenu && (
                     <MainNavigationBarDesktopMenuBackground
@@ -1538,7 +1530,7 @@ export const MainNavigationBar = ({
                         open={isBurgerMenuOpen}
                         id={menuId}
                         sections={sections}
-                        extra={burgerMenuExtra}
+                        slot={burgerMenuSlot}
                         closeMenu={closeMenu}
                         topSlotHeight={topSlotHeight}
                         disableFocusTrap={disableFocusTrap}
@@ -1578,7 +1570,7 @@ export const FunnelNavigationBar = ({
                 topFixed={topFixed}
                 withBorder={withBorder}
                 variant={normalizedVariant}
-                dataAttributes={{'component-name': 'FunnelNavigationBar'}}
+                dataAttributes={{testid: 'FunnelNavigationBar'}}
             >
                 <NavigationBarSideMargins wide={wide}>
                     <GridLayout template="10">
@@ -1599,7 +1591,7 @@ type NavigationBarActionGroupProps = {
 
 export const NavigationBarActionGroup = ({children}: NavigationBarActionGroupProps): JSX.Element => {
     return (
-        <div className={styles.lineHeightFix} data-component-name="NavigationBarActionGroup">
+        <div className={styles.lineHeightFix} data-testid="NavigationBarActionGroup">
             <Inline space={24} alignItems="center">
                 {children}
             </Inline>
@@ -1619,7 +1611,7 @@ export const NavigationBarAction = ({children, ...touchableProps}: NavigationBar
                 styles.lineHeightFix,
                 styles.textWrapperVariants[themeVariant]
             )}
-            dataAttributes={{'component-name': 'NavigationBarAction'}}
+            dataAttributes={{testid: 'NavigationBarAction'}}
         >
             <Inline space={16} alignItems="center">
                 {React.Children.map(children, (child) =>

package/src/navigation-breadcrumbs.tsx

@@ -34,7 +34,10 @@ const NavigationBreadcrumbs = ({
     'aria-label': ariaLabel = 'Breadcrumb',
 }: NavigationBreadcrumbsProps): JSX.Element => {
     return (
-        <nav aria-label={ariaLabel} {...getPrefixedDataAttributes(dataAttributes, 'NavigationBreadcrumbs')}>
+        <nav
+            aria-label={ariaLabel}
+            {...getPrefixedDataAttributes({testid: 'NavigationBreadcrumbs', ...dataAttributes})}
+        >
             <ol className={styles.list}>
                 {breadcrumbs.map(({title, url, onNavigate}, index) => (
                     <li key={index} className={styles.listItem}>

package/src/overlay.tsx

@@ -46,7 +46,7 @@ const Overlay = ({
     return (
         <div
             data-overlay="true"
-            {...getPrefixedDataAttributes(dataAttributes, 'Overlay')}
+            {...getPrefixedDataAttributes({testid: 'Overlay', ...dataAttributes})}
             style={{...defaultStyle, ...style}}
             className={className}
             onPointerDown={(e) => {

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.70.0' as string;
+export const PACKAGE_VERSION = '16.72.0' as string;