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

Closes #1598. Part of #626 — Major release plan 17.0.0.

## Changes

- Removes the deprecated `data-component-name` attribute from
`getPrefixedDataAttributes`, which now emits only `data-testid`. This
covers every component that renders test attributes through the shared
utility.
- Replaces the three hardcoded `data-component-name` attributes with
`data-testid`: `BurgerMenuIcon` and `NavigationBarActionGroup` in
`navigation-bar.tsx`, and `Dialog` in `dialog.tsx`.
- Drops the redundant `data-component-name` on `FixedFooter`, which
already carried a matching `data-testid`.

## Tests

- No test queried by `data-component-name`; the dedicated
`testid-test.tsx` and all other selectors already use `data-testid`, so
no test changes were required.
- Verified locally: `testid-test` (15 passed), `dialog-test` (16
passed), and `main-navigation-bar-test` (2 passed).

## Stack position — 5 of 10

This PR targets the branch from #1617 and can only be merged after #1617
lands on `master`. GitHub will retarget it to `master` automatically as
the parent merges.

For the full merge strategy and ordering, see #626. **Do not merge out
of order.**

---------

Co-authored-by: brtbrt <brtbrt@users.noreply.github.com>

Author: brtbrt

.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