@telefonica/mistica 16.71.0 → 17.0.0

package/src/text-field.tsx

@@ -109,7 +109,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
                 inputRef={combineRefs(inputRef, fieldProps.inputRef, ref)}
                 onFocus={onFocus}
                 type="text"
-                dataAttributes={{'component-name': 'TextField', testid: 'TextField', ...dataAttributes}}
+                dataAttributes={{testid: 'TextField', ...dataAttributes}}
             />
         );
     }

package/src/text.tsx

@@ -7,7 +7,7 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import {useTheme} from './hooks';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './text.css';
-import {VIVO_NEW_SKIN} from './skins/constants';
+import {VIVO_SKIN, VIVO_EVOLUTION_SKIN} from './skins/constants';
 import ScreenReaderOnly from './screen-reader-only';
 
 import type {ExclusifyUnion} from './utils/utility-types';
@@ -202,7 +202,7 @@ export const Text = ({
           })
         : {};
 
-    if (skinName === VIVO_NEW_SKIN) {
+    if (skinName === VIVO_SKIN || skinName === VIVO_EVOLUTION_SKIN) {
         ({ariaLabel, children} = makeVivinhoCharReadableForScreenReaders({children, ariaLabel, as}));
     }
 
@@ -216,7 +216,7 @@ export const Text = ({
             'aria-label': ariaLabel,
             'aria-hidden': ariaHidden,
             'aria-live': ariaLive,
-            ...getPrefixedDataAttributes(dataAttributes, 'Text'),
+            ...getPrefixedDataAttributes({testid: 'Text', ...dataAttributes}),
             style: {
                 ...sizeVars,
                 ...textVars,
@@ -369,7 +369,7 @@ export const Text10 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetP
                 forceMobileSizes,
                 textPreset: textPresets.text10,
             })}
-            dataAttributes={{'component-name': 'Text10', testid: 'Text10', ...dataAttributes}}
+            dataAttributes={{testid: 'Text10', ...dataAttributes}}
             {...props}
         />
     );
@@ -383,7 +383,7 @@ export const Text9 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetPr
                 forceMobileSizes,
                 textPreset: textPresets.text9,
             })}
-            dataAttributes={{'component-name': 'Text9', testid: 'Text9', ...dataAttributes}}
+            dataAttributes={{testid: 'Text9', ...dataAttributes}}
             {...props}
         />
     );
@@ -397,7 +397,7 @@ export const Text8 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetPr
                 forceMobileSizes,
                 textPreset: textPresets.text8,
             })}
-            dataAttributes={{'component-name': 'Text8', testid: 'Text8', ...dataAttributes}}
+            dataAttributes={{testid: 'Text8', ...dataAttributes}}
             {...props}
         />
     );
@@ -411,7 +411,7 @@ export const Text7 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetPr
                 forceMobileSizes,
                 textPreset: textPresets.text7,
             })}
-            dataAttributes={{'component-name': 'Text7', testid: 'Text7', ...dataAttributes}}
+            dataAttributes={{testid: 'Text7', ...dataAttributes}}
             {...props}
         />
     );
@@ -425,7 +425,7 @@ export const Text6 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetPr
                 forceMobileSizes,
                 textPreset: textPresets.text6,
             })}
-            dataAttributes={{'component-name': 'Text6', testid: 'Text6', ...dataAttributes}}
+            dataAttributes={{testid: 'Text6', ...dataAttributes}}
             {...props}
         />
     );
@@ -439,7 +439,7 @@ export const Text5 = ({dataAttributes, forceMobileSizes, ...props}: TextPresetPr
                 forceMobileSizes,
                 textPreset: textPresets.text5,
             })}
-            dataAttributes={{'component-name': 'Text5', testid: 'Text5', ...dataAttributes}}
+            dataAttributes={{testid: 'Text5', ...dataAttributes}}
             {...props}
         />
     );
@@ -458,7 +458,7 @@ export const Text4 = ({
                 textPreset: textPresets.text4,
             })}
             weight={getWeight(props)}
-            dataAttributes={{'component-name': 'Text4', testid: 'Text4', ...dataAttributes}}
+            dataAttributes={{testid: 'Text4', ...dataAttributes}}
             {...props}
         />
     );
@@ -477,7 +477,7 @@ export const Text3 = ({
                 textPreset: textPresets.text3,
             })}
             weight={getWeight(props)}
-            dataAttributes={{'component-name': 'Text3', testid: 'Text3', ...dataAttributes}}
+            dataAttributes={{testid: 'Text3', ...dataAttributes}}
             {...props}
         />
     );
@@ -492,7 +492,7 @@ export const Text2 = ({dataAttributes, forceMobileSizes, ...props}: RegularMediu
                 textPreset: textPresets.text2,
             })}
             weight={getWeight(props)}
-            dataAttributes={{'component-name': 'Text2', testid: 'Text2', ...dataAttributes}}
+            dataAttributes={{testid: 'Text2', ...dataAttributes}}
             {...props}
         />
     );
@@ -507,7 +507,7 @@ export const Text1 = ({dataAttributes, forceMobileSizes, ...props}: RegularMediu
                 textPreset: textPresets.text1,
             })}
             weight={getWeight(props)}
-            dataAttributes={{'component-name': 'Text1', testid: 'Text1', ...dataAttributes}}
+            dataAttributes={{testid: 'Text1', ...dataAttributes}}
             {...props}
         />
     );

package/src/theme-context-provider.tsx

@@ -7,7 +7,6 @@ import {dimensions, getMisticaLinkComponent, NAVBAR_HEIGHT_MOBILE} from './theme
 import {getPlatform, isInsideNovumNativeApp} from './utils/platform';
 import ThemeContext from './theme-context';
 import {useIsomorphicLayoutEffect} from './hooks';
-import TabFocus from './tab-focus';
 import ModalContextProvider from './modal-context-provider';
 import TooltipContextProvider from './tooltip-context-provider';
 import {DocumentVisibilityProvider} from './utils/document-visibility';
@@ -320,50 +319,48 @@ const ThemeContextProvider = ({theme, children, as, withoutStyles = false}: Prop
 
     return (
         <>
-            <TabFocus disabled={!theme.enableTabFocus}>
-                <ModalContextProvider>
-                    <TooltipContextProvider>
-                        <ThemeContext.Provider value={contextTheme}>
-                            <TrackingConfig eventFormat={contextTheme.analytics.eventFormat}>
-                                <AspectRatioSupportProvider>
-                                    <DocumentVisibilityProvider>
-                                        <ScreenSizeContextProvider>
-                                            <DialogRoot>
-                                                <SnackbarRoot>
-                                                    {as ? (
-                                                        <>
-                                                            {renderStyles(
-                                                                `[data-mistica-theme="${themeScopeId}"]`
-                                                            )}
-                                                            {React.createElement(
-                                                                as,
-                                                                {
-                                                                    style: {
-                                                                        isolation: 'isolate',
-                                                                    },
-                                                                    'data-mistica-theme': withoutStyles
-                                                                        ? undefined
-                                                                        : themeScopeId,
+            <ModalContextProvider>
+                <TooltipContextProvider>
+                    <ThemeContext.Provider value={contextTheme}>
+                        <TrackingConfig eventFormat={contextTheme.analytics.eventFormat}>
+                            <AspectRatioSupportProvider>
+                                <DocumentVisibilityProvider>
+                                    <ScreenSizeContextProvider>
+                                        <DialogRoot>
+                                            <SnackbarRoot>
+                                                {as ? (
+                                                    <>
+                                                        {renderStyles(
+                                                            `[data-mistica-theme="${themeScopeId}"]`
+                                                        )}
+                                                        {React.createElement(
+                                                            as,
+                                                            {
+                                                                style: {
+                                                                    isolation: 'isolate',
                                                                 },
-                                                                children
-                                                            )}
-                                                        </>
-                                                    ) : (
-                                                        <>
-                                                            {renderStyles(':root')}
-                                                            {children}
-                                                        </>
-                                                    )}
-                                                </SnackbarRoot>
-                                            </DialogRoot>
-                                        </ScreenSizeContextProvider>
-                                    </DocumentVisibilityProvider>
-                                </AspectRatioSupportProvider>
-                            </TrackingConfig>
-                        </ThemeContext.Provider>
-                    </TooltipContextProvider>
-                </ModalContextProvider>
-            </TabFocus>
+                                                                'data-mistica-theme': withoutStyles
+                                                                    ? undefined
+                                                                    : themeScopeId,
+                                                            },
+                                                            children
+                                                        )}
+                                                    </>
+                                                ) : (
+                                                    <>
+                                                        {renderStyles(':root')}
+                                                        {children}
+                                                    </>
+                                                )}
+                                            </SnackbarRoot>
+                                        </DialogRoot>
+                                    </ScreenSizeContextProvider>
+                                </DocumentVisibilityProvider>
+                            </AspectRatioSupportProvider>
+                        </TrackingConfig>
+                    </ThemeContext.Provider>
+                </TooltipContextProvider>
+            </ModalContextProvider>
             {!as && <SetupStackingContext />}
         </>
     );

package/src/theme-variant-context.tsx

@@ -22,30 +22,13 @@ export const normalizeVariant = <T extends Variant>(variant: T): T extends 'inve
 const ThemeVariantContext = React.createContext<Variant>('default');
 
 type ThemeVariantProps = {
-    /** @deprecated Use variant = 'brand' instead */
-    isInverse?: boolean;
     variant?: Variant;
     children: React.ReactNode;
 };
 
-export const ThemeVariant = ({isInverse, variant, children}: ThemeVariantProps): JSX.Element => (
-    <ThemeVariantContext.Provider value={variant ?? (isInverse ? 'brand' : 'default')}>
-        {children}
-    </ThemeVariantContext.Provider>
+export const ThemeVariant = ({variant, children}: ThemeVariantProps): JSX.Element => (
+    <ThemeVariantContext.Provider value={variant ?? 'default'}>{children}</ThemeVariantContext.Provider>
 );
 
 export const useThemeVariant = (): NonDeprecatedVariant =>
     normalizeVariant(React.useContext(ThemeVariantContext));
-
-/**
- * @deprecated use `useThemeVariant` instead
- */
-export const useIsInverseVariant = (): boolean => useThemeVariant() === 'brand';
-
-/**
- * @deprecated use `useThemeVariant` instead
- */
-export const useIsInverseOrMediaVariant = (): boolean => {
-    const variant = useThemeVariant();
-    return variant === 'brand' || variant === 'media';
-};

package/src/theme.tsx

@@ -146,8 +146,6 @@ export type ThemeConfig = Readonly<{
               Component: React.ComponentType<any>;
           };
     useHrefDecorator?: () => (href: string) => string;
-    /** @deprecated Better use default browser behavior for :focus-visible */
-    enableTabFocus?: boolean;
     preventCopyInFormFields?: boolean;
 }>;
 

package/src/time-field.tsx

@@ -91,7 +91,7 @@ const TimeField = ({
                     <IconTimeRegular size={iconSize.small} />
                 </div>
             }
-            dataAttributes={{'component-name': 'TimeField', testid: 'TimeField', ...dataAttributes}}
+            dataAttributes={{testid: 'TimeField', ...dataAttributes}}
         />
     );
 };

package/src/timeline.tsx

@@ -204,7 +204,7 @@ export const TimelineItem = ({
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledby}
             aria-current={state === 'active' ? 'step' : undefined}
-            {...getPrefixedDataAttributes(dataAttributes, 'TimelineItem')}
+            {...getPrefixedDataAttributes({testid: 'TimelineItem', ...dataAttributes})}
         >
             <div className={styles.lineContainer}>
                 <div className={styles.asset} aria-hidden>
@@ -240,7 +240,7 @@ const Timeline = ({
             role={role}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledby}
-            {...getPrefixedDataAttributes(dataAttributes, 'Timeline')}
+            {...getPrefixedDataAttributes({testid: 'Timeline', ...dataAttributes})}
         >
             {children}
         </div>

package/src/timer.tsx

@@ -293,7 +293,7 @@ export const TextTimer = ({
                 // try to keep the timer in the same line without wrapping only when label is not long
                 display: labelType !== 'long' ? 'inline-block' : undefined,
             }}
-            {...getPrefixedDataAttributes(dataAttributes, 'TextTimer')}
+            {...getPrefixedDataAttributes({testid: 'TextTimer', ...dataAttributes})}
         >
             <ScreenReaderOnly>
                 <span id={labelId}>{ariaLabel ? `${ariaLabel}. ${timerLabel}` : timerLabel}</span>
@@ -404,7 +404,7 @@ export const Timer = ({
             role="timer"
             aria-labelledby={labelId}
             className={styles.timerWrapper}
-            {...getPrefixedDataAttributes(dataAttributes, 'Timer')}
+            {...getPrefixedDataAttributes({testid: 'Timer', ...dataAttributes})}
         >
             <ScreenReaderOnly>
                 <span id={labelId}>{ariaLabel ? `${ariaLabel}. ${timerLabel}` : timerLabel}</span>

package/src/title.tsx

@@ -68,7 +68,7 @@ export const Title1 = ({children, as = 'h3', id, right, dataAttributes}: TitlePr
                 </Text>
             }
             right={right}
-            dataAttributes={{'component-name': 'Title1', ...dataAttributes}}
+            dataAttributes={{testid: 'Title1', ...dataAttributes}}
         />
     );
 };
@@ -83,7 +83,7 @@ export const Title2 = ({children, as = 'h3', id, right, dataAttributes}: TitlePr
                 </Text>
             }
             right={right}
-            dataAttributes={{'component-name': 'Title2', ...dataAttributes}}
+            dataAttributes={{testid: 'Title2', ...dataAttributes}}
         />
     );
 };
@@ -98,7 +98,7 @@ export const Title3 = ({children, as = 'h3', id, right, dataAttributes}: TitlePr
                 </Text>
             }
             right={right}
-            dataAttributes={{'component-name': 'Title3', ...dataAttributes}}
+            dataAttributes={{testid: 'Title3', ...dataAttributes}}
         />
     );
 };
@@ -113,7 +113,7 @@ export const Title4 = ({children, as = 'h3', id, right, dataAttributes}: TitlePr
                 </Text>
             }
             right={right}
-            dataAttributes={{'component-name': 'Title4', ...dataAttributes}}
+            dataAttributes={{testid: 'Title4', ...dataAttributes}}
         />
     );
 };

package/src/tooltip.tsx

@@ -139,7 +139,7 @@ const getFinalPosition = (
 
 type Props = {
     children?: React.ReactNode;
-    extra?: React.ReactNode;
+    slot?: React.ReactNode;
     description?: string;
     target: React.ReactNode;
     targetStyle?: React.CSSProperties;
@@ -619,7 +619,7 @@ export const BaseTooltip = ({
 
 const Tooltip = ({
     centerContent,
-    extra,
+    slot,
     children,
     dataAttributes,
     title,
@@ -636,11 +636,11 @@ const Tooltip = ({
                             {description && <Text2 regular>{description}</Text2>}
                         </Stack>
                     )}
-                    {extra ?? children}
+                    {slot ?? children}
                 </div>
             }
             centerContent={centerContent}
-            dataAttributes={{'component-name': 'Tooltip', ...dataAttributes}}
+            dataAttributes={{testid: 'Tooltip', ...dataAttributes}}
             {...props}
         />
     );

package/src/touchable.tsx

@@ -142,7 +142,7 @@ const RawTouchable = React.forwardRef<TouchableElement, TouchableProps>((props,
         'aria-disabled': props['aria-disabled'],
         'aria-hidden': props['aria-hidden'],
         'aria-live': props['aria-live'],
-        ...getPrefixedDataAttributes(props.dataAttributes, 'Touchable'),
+        ...getPrefixedDataAttributes({testid: 'Touchable', ...props.dataAttributes}),
     };
 
     // aria props that we want to apply to both <a> and <button> elements, not applicable to <div>

package/src/utils/__tests__/dom-test.tsx

@@ -1,4 +1,4 @@
-import {getCssVarValue} from '../dom';
+import {getCssVarValue, getPrefixedDataAttributes} from '../dom';
 
 test('getCssVarValue', () => {
     document.documentElement.style.setProperty('--color-primary', '#FABADA');
@@ -21,3 +21,49 @@ test('getCssVarValue of element', () => {
     expect(getCssVarValue('--color-primary', div)).toBe('#ABACAD');
     expect(getCssVarValue('var(--color-primary)', div)).toBe('#ABACAD');
 });
+
+test('getPrefixedDataAttributes with testid', () => {
+    const result = getPrefixedDataAttributes({testid: 'TestComponent'});
+    expect(result).toEqual({'data-testid': 'TestComponent'});
+});
+
+test('getPrefixedDataAttributes with empty attrs', () => {
+    const result = getPrefixedDataAttributes();
+    expect(result).toEqual({});
+});
+
+test('getPrefixedDataAttributes with custom attributes', () => {
+    const result = getPrefixedDataAttributes({
+        testid: 'MyTest',
+        foo: 'bar',
+        count: 42,
+        enabled: true,
+    });
+    expect(result).toEqual({
+        'data-testid': 'MyTest',
+        'data-foo': 'bar',
+        'data-count': 42,
+        'data-enabled': true,
+    });
+});
+
+test('getPrefixedDataAttributes with testid and other attrs', () => {
+    const result = getPrefixedDataAttributes({testid: 'AttrTest', foo: 'baz'});
+    expect(result).toEqual({
+        'data-testid': 'AttrTest',
+        'data-foo': 'baz',
+    });
+});
+
+test('getPrefixedDataAttributes with undefined values', () => {
+    const result = getPrefixedDataAttributes({
+        testid: 'Test',
+        empty: undefined,
+        noValue: undefined,
+    });
+    expect(result).toEqual({
+        'data-testid': 'Test',
+        'data-empty': undefined,
+        'data-noValue': undefined,
+    });
+});

package/src/utils/dom.tsx

@@ -62,11 +62,8 @@ export const removePassiveEventListener = (
  *
  * For example: `{foo: 'bar'}` => `{data-foo: 'bar'}`
  */
-export const getPrefixedDataAttributes = (attrs?: DataAttributes, componentName?: string): DataAttributes => {
-    const result: DataAttributes = componentName
-        ? // TODO: remove deprecated component-name in next major release
-          {'data-component-name': componentName, 'data-testid': componentName}
-        : {};
+export const getPrefixedDataAttributes = (attrs?: DataAttributes): DataAttributes => {
+    const result: DataAttributes = {};
     if (attrs) {
         Object.keys(attrs).forEach((key) => {
             result['data-' + key] = attrs[key];

package/src/video.tsx

@@ -300,7 +300,7 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 aspectRatio={ratio}
                 width={props.width}
                 height={props.height}
-                dataAttributes={getPrefixedDataAttributes(dataAttributes, 'Video')}
+                dataAttributes={getPrefixedDataAttributes({testid: 'Video', ...dataAttributes})}
             >
                 <div
                     style={{