feat(Chore)!: replace data-component-name with data-testid

.gitignore

@@ -5,6 +5,7 @@ coverage/
 .directory
 .DS_Store
 .idea/
+mistica-web.iml
 *.js.map
 *.orig
 *.rej
@@ -32,3 +33,4 @@ community.d.ts
 .scannerwork
 *storybook.log
 .env*.local
+

doc/fonts.md

@@ -8,15 +8,15 @@ default serif font (Times New Roman on desktop). You must declare `@font-face` r
 
 Each skin has a designated font family. Use the correct one for the skin your app is using:
 
-| Skin                  | Getter function          | Font family         |
-| --------------------- | ------------------------ | ------------------- |
-| `movistar` _(legacy)_ | `getMovistarSkin()`      | `'On Air'`          |
-| `o2`                  | `getO2Skin()`            | `'On Air'`          |
-| `vivo`                | `getVivoSkin()`          | `'Vivo Type'`       |
-| `vivo-evolution`      | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
-| `telefonica`          | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
-| `blau`                | `getBlauSkin()`          | `'Roboto'`          |
-| `esimflag`            | `getEsimflagSkin()`      | `'On Air'`          |
+| Skin             | Getter function          | Font family         |
+| ---------------- | ------------------------ | ------------------- |
+| `movistar`       | `getMovistarSkin()`      | `'Movistar Sans'`   |
+| `o2`             | `getO2Skin()`            | `'On Air'`          |
+| `vivo`           | `getVivoSkin()`          | `'Vivo Type'`       |
+| `vivo-evolution` | `getVivoEvolutionSkin()` | `'Vivo Type'`       |
+| `telefonica`     | `getTelefonicaSkin()`    | `'Telefonica Sans'` |
+| `blau`           | `getBlauSkin()`          | `'Roboto'`          |
+| `esimflag`       | `getEsimflagSkin()`      | `'On Air'`          |
 
 ## Setting font-family
 

doc/llms/agents/figma-verifier.md

@@ -37,10 +37,10 @@ rules before starting.
      `font-family`, composite props that don't match the non-CodeConnect DOM, spacing values absent from the
      DOM, mismatched semantic structure (`Stack` vs `Inline`, flat vs nested), native HTML where a Mistica
      primitive exists, wrong/missing skin/font/body-background for the file's brand.
-   - **Layout primitives.** When the DOM shows `grid grid-cols-[repeat(12,…)]` with `col-[…/span_N]`
-     children, flag any implementation that used a raw `<div style={{display:'grid'}}>`, a fixed-width flex
-     row, `Grid`, or manual spacer columns instead of a `GridLayout` whose `template` matches the child
-     spans. Flag a `GridLayout` that is not wrapped in a `ResponsiveLayout`, and a full-width padded section
+   - **Layout primitives.** When the DOM shows `grid grid-cols-[repeat(12,…)]` with `col-[…/span_N]` children,
+     flag any implementation that used a raw `<div style={{display:'grid'}}>`, a fixed-width flex row, `Grid`,
+     or manual spacer columns instead of a `GridLayout` whose `template` matches the child spans. Flag a
+     `GridLayout` that is not wrapped in a `ResponsiveLayout`, and a full-width padded section
      (`px-[48/32/16px]`) implemented without a `ResponsiveLayout`. Conversely, flag double-wrapping a
      component that embeds its own `ResponsiveLayout` (`MainNavigationBar`, `NavigationBar`, `Tabs`).
 

packages/generate-design-tokens/index.js

@@ -25,7 +25,7 @@ console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
 const SKINS_FOLDER = path.join(import.meta.dirname, '..', '..', 'src', 'skins');
 const CSS_FOLDER = path.join(import.meta.dirname, '..', '..', 'css');
 
-const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'o2-new', 'telefonica', 'vivo', 'vivo-new', 'tu', 'esimflag'];
+const KNOWN_SKINS = ['blau', 'movistar', 'o2', 'telefonica', 'vivo', 'vivo-evolution', 'esimflag'];
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());

src/__type_tests__/data-attributes-type-test.tsx

@@ -0,0 +1,16 @@
+import type {DataAttributes} from '../utils/types';
+
+const validAttrs: DataAttributes = {
+    testid: 'MyComponent',
+    custom: 'value',
+    count: 42,
+    enabled: true,
+    // eslint-disable-next-line object-shorthand
+    undefined: undefined,
+};
+
+// component-name is allowed
+const validAttrsWithComponentName: DataAttributes = {
+    'component-name': 'MyComponent',
+    testid: 'MyComponent',
+};

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}>
@@ -329,7 +329,7 @@ export const BoxedAccordionItem = React.forwardRef<HTMLDivElement, BoxedAccordio
             className={styles.boxed}
             variant={variant ?? (isInverse ? 'brand' : 'default')}
             ref={ref}
-            dataAttributes={{'component-name': 'BoxedAccordionItem', ...dataAttributes}}
+            dataAttributes={{testid: 'BoxedAccordionItem', ...dataAttributes}}
         >
             <AccordionItemContent {...props} />
         </InternalBoxed>
@@ -357,7 +357,7 @@ export const BoxedAccordion = ({
             <Stack
                 space={16}
                 role={role}
-                dataAttributes={{'component-name': 'BoxedAccordion', accordion: true, ...dataAttributes}}
+                dataAttributes={{testid: 'BoxedAccordion', accordion: true, ...dataAttributes}}
             >
                 {children}
             </Stack>

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}`,

src/avatar.tsx

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

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

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

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 ? (
                 <>

src/button.tsx

@@ -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"

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 && (

src/card-cover.tsx

@@ -72,7 +72,6 @@ export const CoverCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Cov
             <InternalCard
                 ref={ref}
                 dataAttributes={{
-                    'component-name': 'CoverCard',
                     testid: 'CoverCard',
                     ...dataAttributes,
                 }}
@@ -191,7 +190,6 @@ export const PosterCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Po
                 size={size}
                 variant={variant || (isInverse ? 'inverse' : undefined)}
                 dataAttributes={{
-                    'component-name': 'PosterCard',
                     testid: 'PosterCard',
                     ...dataAttributes,
                 }}
@@ -231,7 +229,6 @@ export const DisplayMediaCard = React.forwardRef<HTMLDivElement, MaybeTouchableC
                 size="display"
                 buttonSecondary={buttonSecondary || secondaryButton}
                 dataAttributes={{
-                    'component-name': 'DisplayMediaCard',
                     testid: 'DisplayMediaCard',
                     ...dataAttributes,
                 }}

src/card-data.tsx

@@ -86,7 +86,6 @@ export const DataCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Data
                 type="data"
                 size={size}
                 dataAttributes={{
-                    'component-name': 'DataCard',
                     testid: 'DataCard',
                     ...dataAttributes,
                 }}
@@ -112,7 +111,6 @@ export const SnapCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Fixe
             <DataCard
                 size="snap"
                 dataAttributes={{
-                    'component-name': 'SnapCard',
                     testid: 'SnapCard',
                     ...dataAttributes,
                 }}
@@ -138,7 +136,6 @@ export const DisplayDataCard = React.forwardRef<HTMLDivElement, MaybeTouchableCa
             <DataCard
                 size="display"
                 dataAttributes={{
-                    'component-name': 'DisplayDataCard',
                     testid: 'DisplayDataCard',
                     ...dataAttributes,
                 }}

src/card-internal.tsx

@@ -246,7 +246,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%',

src/card-media.tsx

@@ -95,7 +95,6 @@ export const MediaCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Med
                 variant="default"
                 size={size}
                 dataAttributes={{
-                    'component-name': 'MediaCard',
                     testid: 'MediaCard',
                     ...dataAttributes,
                 }}
@@ -142,7 +141,6 @@ export const HighlightedCard = React.forwardRef<
                 mediaPosition="right"
                 mediaWidth={mediaWidth || 100}
                 dataAttributes={{
-                    'component-name': 'HighlightedCard',
                     testid: 'HighlightedCard',
                     ...dataAttributes,
                 }}

src/card-naked.tsx

@@ -22,7 +22,6 @@ export const NakedCard = React.forwardRef<HTMLDivElement, MaybeTouchableCard<Nak
         return (
             <InternalCard
                 dataAttributes={{
-                    'component-name': 'NakedCard',
                     testid: 'NakedCard',
                     ...dataAttributes,
                 }}
@@ -49,7 +48,6 @@ export const SmallNakedCard = React.forwardRef<HTMLDivElement, MaybeTouchableCar
         return (
             <NakedCard
                 dataAttributes={{
-                    'component-name': 'SmallNakedCard',
                     testid: 'SmallNakedCard',
                     ...dataAttributes,
                 }}

src/carousel.tsx

@@ -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,
             })}
@@ -810,7 +810,6 @@ const BaseCarousel = ({
     return (
         <div
             {...getPrefixedDataAttributes({
-                'component-name': 'Carousel',
                 testid: 'Carousel',
                 ...dataAttributes,
             })}
@@ -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 ? (

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({

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 (

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>

src/community/advanced-data-card.tsx

@@ -350,7 +350,7 @@ export const AdvancedDataCard = React.forwardRef<HTMLDivElement, AdvancedDataCar
         return (
             <section
                 className={styles.container}
-                {...getPrefixedDataAttributes(dataAttributes, 'AdvancedDataCard')}
+                {...getPrefixedDataAttributes({testid: 'AdvancedDataCard', ...dataAttributes})}
                 ref={ref}
                 aria-label={isTouchable ? undefined : ariaLabel}
             >

src/community/ai-card.tsx

@@ -191,7 +191,7 @@ const AiCard = ({
                       })
                     : undefined
             }
-            dataAttributes={{'component-name': 'AiCard', testid: 'AiCard', ...dataAttributes}}
+            dataAttributes={{testid: 'AiCard', ...dataAttributes}}
             {...(touchableProps as any)}
             aria-label={ariaLabel ?? autoAriaLabel}
         >

src/counter.tsx

@@ -121,7 +121,7 @@ const Counter = ({
     return (
         <div
             className={classNames(styles.counter, {[styles.disabled]: disabled})}
-            {...getPrefixedDataAttributes(dataAttributes, 'Counter')}
+            {...getPrefixedDataAttributes({testid: 'Counter', ...dataAttributes})}
             style={{
                 border: `1px solid ${(variant === 'brand' || variant === 'media' || variant === 'negative') && !isDarkMode ? vars.colors.backgroundContainer : vars.colors.inputBorder}`,
             }}

src/cover-hero.tsx

@@ -199,7 +199,7 @@ const CoverHero = React.forwardRef<HTMLDivElement, CoverHeroProps>(
 
         return (
             <section
-                {...getPrefixedDataAttributes(dataAttributes, 'CoverHero')}
+                {...getPrefixedDataAttributes({testid: 'CoverHero', ...dataAttributes})}
                 aria-label={ariaLabel}
                 ref={ref}
                 className={classnames(styles.coverHeroContainer, {

src/credit-card-expiration-field.tsx

@@ -176,7 +176,6 @@ const CreditCardExpirationField = ({
             autoComplete={autoComplete}
             inputComponent={MonthYearDateInput}
             dataAttributes={{
-                'component-name': 'CreditCardExpirationField',
                 testid: 'CreditCardExpirationField',
                 ...dataAttributes,
             }}