@12-apps/ui 1.0.0 → 1.3.1

package/src/components/data-display/StatCard/StatCard.stories.tsx

@@ -0,0 +1,167 @@
+import PaidIcon from '@mui/icons-material/Paid';
+import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import { Box } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { StatCard } from './StatCard';
+
+const meta: Meta<typeof StatCard> = {
+  title: 'DataDisplay/StatCard',
+  component: StatCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'KPI tile: one labelled figure with an optional period-over-period delta, icon, hint and loading state. Values arrive pre-formatted — the tile never formats money or percentages itself.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    label: { control: 'text' },
+    value: { control: 'text' },
+    hint: { control: 'text' },
+    loading: { control: 'boolean' },
+    delta: { control: false },
+    icon: { control: false },
+    className: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+  },
+};
+
+export const WithPositiveDelta: Story = {
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    delta: { value: '+12,5%', direction: 'up', label: 'vs. período anterior' },
+  },
+};
+
+export const WithNegativeDelta: Story = {
+  args: {
+    label: 'Pedidos',
+    value: '184',
+    delta: { value: '-8,2%', direction: 'down', label: 'vs. período anterior' },
+  },
+};
+
+export const WithNeutralDelta: Story = {
+  args: {
+    label: 'Margem',
+    value: '62,0%',
+    delta: { value: '0,0%', direction: 'neutral', label: 'vs. período anterior' },
+  },
+};
+
+/**
+ * "Lower is better" metrics separate the ARROW from the MEANING: cost rose
+ * (`direction: 'up'`) but that reads badly (`tone: 'negative'`).
+ */
+export const InvertedTone: Story = {
+  args: {
+    label: 'Custo (CMV)',
+    value: 'R$ 4.900,00',
+    delta: {
+      value: '+9,4%',
+      direction: 'up',
+      tone: 'negative',
+      label: 'vs. período anterior',
+    },
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Lucro bruto',
+    value: 'R$ 7.580,00',
+    icon: <TrendingUpIcon fontSize="small" />,
+    delta: { value: '+14,0%', direction: 'up' },
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    hint: 'Últimos 30 dias',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    delta: { value: '+12,5%', direction: 'up' },
+    loading: true,
+  },
+};
+
+export const LongValueOverflow: Story = {
+  args: {
+    label: 'Receita acumulada do exercício corrente',
+    value: 'R$ 1.284.930.577,25',
+    delta: { value: '+1.204,75%', direction: 'up', label: 'vs. período anterior' },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ width: 220 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+/** The dashboard shape: a responsive grid of tiles sharing one range. */
+export const KpiGrid: Story = {
+  render: () => (
+    <Box
+      sx={{
+        display: 'grid',
+        gap: 2,
+        gridTemplateColumns: { xs: '1fr', sm: 'repeat(2, 1fr)', md: 'repeat(4, 1fr)' },
+        width: { xs: 280, sm: 520, md: 880 },
+      }}
+    >
+      <StatCard
+        label="Receita"
+        value="R$ 12.480,00"
+        icon={<PaidIcon fontSize="small" />}
+        delta={{ value: '+12,5%', direction: 'up', label: 'vs. período anterior' }}
+        dataTestId="kpi-revenue"
+      />
+      <StatCard
+        label="Custo (CMV)"
+        value="R$ 4.900,00"
+        icon={<ReceiptLongIcon fontSize="small" />}
+        delta={{ value: '+9,4%', direction: 'up', tone: 'negative', label: 'vs. período anterior' }}
+        dataTestId="kpi-cogs"
+      />
+      <StatCard
+        label="Lucro bruto"
+        value="R$ 7.580,00"
+        icon={<TrendingUpIcon fontSize="small" />}
+        delta={{ value: '+14,0%', direction: 'up', label: 'vs. período anterior' }}
+        dataTestId="kpi-profit"
+      />
+      <StatCard
+        label="Pedidos"
+        value="184"
+        icon={<ShoppingCartIcon fontSize="small" />}
+        delta={{ value: '-8,2%', direction: 'down', label: 'vs. período anterior' }}
+        dataTestId="kpi-orders"
+      />
+    </Box>
+  ),
+};

package/src/components/data-display/StatCard/StatCard.test.stories.tsx

@@ -0,0 +1,240 @@
+import TrendingUpIcon from '@mui/icons-material/TrendingUp';
+import { Box } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, waitFor, within } from 'storybook/test';
+
+import { StatCard } from './StatCard';
+
+const meta: Meta<typeof StatCard> = {
+  title: 'DataDisplay/StatCard/Tests',
+  component: StatCard,
+  parameters: {
+    layout: 'padded',
+    chromatic: { disableSnapshot: false },
+  },
+  tags: ['autodocs', 'test', 'component:StatCard'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BasicInteraction: Story = {
+  name: '🧪 Renders label and value',
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    dataTestId: 'kpi-revenue',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Tile root is present', async () => {
+      await expect(canvas.getByTestId('kpi-revenue')).toBeInTheDocument();
+    });
+
+    await step('Label and value render their text', async () => {
+      await expect(canvas.getByTestId('kpi-revenue-label')).toHaveTextContent('Receita');
+      await expect(canvas.getByTestId('kpi-revenue-value')).toHaveTextContent('R$ 12.480,00');
+    });
+
+    await step('No delta renders when none is passed', async () => {
+      await waitFor(() =>
+        expect(canvas.queryByTestId('kpi-revenue-delta')).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+export const ScreenReaderTest: Story = {
+  name: '🧪 Screen Reader — labelled group and delta sentence',
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    delta: { value: '+12,5%', direction: 'up', label: 'vs. período anterior' },
+    dataTestId: 'kpi-revenue',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('The tile is a group labelled by its own label element', async () => {
+      const group = canvas.getByRole('group', { name: 'Receita' });
+      await expect(group).toBe(canvas.getByTestId('kpi-revenue'));
+    });
+
+    await step('The delta exposes a direction-aware sentence', async () => {
+      await expect(
+        canvas.getByLabelText('Increase of +12,5% vs. período anterior'),
+      ).toBeInTheDocument();
+    });
+  },
+};
+
+export const VisualStateUpDelta: Story = {
+  name: '🧪 Visual State — upward delta reads positive',
+  args: {
+    label: 'Lucro bruto',
+    value: 'R$ 7.580,00',
+    icon: <TrendingUpIcon fontSize="small" />,
+    delta: { value: '+14,0%', direction: 'up' },
+    dataTestId: 'kpi-profit',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Direction and tone are exposed on the delta row', async () => {
+      const delta = canvas.getByTestId('kpi-profit-delta');
+      await expect(delta).toHaveAttribute('data-direction', 'up');
+      await expect(delta).toHaveAttribute('data-tone', 'positive');
+    });
+
+    await step('The leading icon renders and is hidden from assistive tech', async () => {
+      await expect(canvas.getByTestId('kpi-profit-icon')).toHaveAttribute('aria-hidden', 'true');
+    });
+  },
+};
+
+export const VisualStateDownDelta: Story = {
+  name: '🧪 Visual State — downward delta reads negative',
+  args: {
+    label: 'Pedidos',
+    value: '184',
+    delta: { value: '-8,2%', direction: 'down' },
+    dataTestId: 'kpi-orders',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Direction and tone are exposed on the delta row', async () => {
+      const delta = canvas.getByTestId('kpi-orders-delta');
+      await expect(delta).toHaveAttribute('data-direction', 'down');
+      await expect(delta).toHaveAttribute('data-tone', 'negative');
+    });
+
+    await step('The generated sentence says "Decrease"', async () => {
+      await expect(canvas.getByLabelText('Decrease of -8,2%')).toBeInTheDocument();
+    });
+  },
+};
+
+export const EdgeCaseInvertedTone: Story = {
+  name: '🧪 Edge Case — rising cost keeps the up arrow but reads negative',
+  args: {
+    label: 'Custo (CMV)',
+    value: 'R$ 4.900,00',
+    delta: { value: '+9,4%', direction: 'up', tone: 'negative' },
+    dataTestId: 'kpi-cogs',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Arrow direction and semantic tone are independent', async () => {
+      const delta = canvas.getByTestId('kpi-cogs-delta');
+      await expect(delta).toHaveAttribute('data-direction', 'up');
+      await expect(delta).toHaveAttribute('data-tone', 'negative');
+    });
+  },
+};
+
+export const EdgeCaseLocalizedAria: Story = {
+  name: '🧪 Edge Case — ariaLabel overrides the English sentence',
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    delta: {
+      value: '+12,5%',
+      direction: 'up',
+      ariaLabel: 'Aumento de 12,5% em relação ao período anterior',
+    },
+    dataTestId: 'kpi-revenue',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('The override wins over the generated text', async () => {
+      await expect(
+        canvas.getByLabelText('Aumento de 12,5% em relação ao período anterior'),
+      ).toBeInTheDocument();
+      await waitFor(() =>
+        expect(canvas.queryByLabelText('Increase of +12,5%')).not.toBeInTheDocument(),
+      );
+    });
+  },
+};
+
+export const LoadingStateTest: Story = {
+  name: '🧪 Loading State — skeletons replace value and delta',
+  args: {
+    label: 'Receita',
+    value: 'R$ 12.480,00',
+    delta: { value: '+12,5%', direction: 'up' },
+    loading: true,
+    dataTestId: 'kpi-revenue',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('The tile announces itself as busy', async () => {
+      await expect(canvas.getByTestId('kpi-revenue')).toHaveAttribute('aria-busy', 'true');
+    });
+
+    await step('Value and delta are replaced by skeletons', async () => {
+      await expect(canvas.getByTestId('kpi-revenue-value-skeleton')).toBeInTheDocument();
+      await expect(canvas.getByTestId('kpi-revenue-delta-skeleton')).toBeInTheDocument();
+      await waitFor(() => {
+        expect(canvas.queryByTestId('kpi-revenue-value')).not.toBeInTheDocument();
+        expect(canvas.queryByTestId('kpi-revenue-delta')).not.toBeInTheDocument();
+      });
+    });
+
+    await step('The label survives the loading swap (no reflow)', async () => {
+      await expect(canvas.getByTestId('kpi-revenue-label')).toHaveTextContent('Receita');
+    });
+  },
+};
+
+export const ResponsiveDesign: Story = {
+  name: '🧪 Responsive Design — tiles stack in a narrow grid',
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+  render: () => (
+    <Box
+      sx={{
+        display: 'grid',
+        gap: 2,
+        gridTemplateColumns: { xs: '1fr', md: 'repeat(2, 1fr)' },
+      }}
+    >
+      <StatCard label="Receita" value="R$ 12.480,00" dataTestId="kpi-revenue" />
+      <StatCard label="Pedidos" value="184" dataTestId="kpi-orders" />
+    </Box>
+  ),
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Both tiles render inside the grid', async () => {
+      await expect(canvas.getByTestId('kpi-revenue')).toBeVisible();
+      await expect(canvas.getByTestId('kpi-orders')).toBeVisible();
+    });
+  },
+};
+
+export const IntegrationHintAndIcon: Story = {
+  name: '🧪 Integration — icon, hint and delta compose',
+  args: {
+    label: 'Margem',
+    value: '62,0%',
+    hint: 'Últimos 30 dias',
+    icon: <TrendingUpIcon fontSize="small" />,
+    delta: { value: '+1,4 p.p.', direction: 'up', label: 'vs. período anterior' },
+    dataTestId: 'kpi-margin',
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Every optional slot renders together', async () => {
+      await expect(canvas.getByTestId('kpi-margin-icon')).toBeInTheDocument();
+      await expect(canvas.getByTestId('kpi-margin-hint')).toHaveTextContent('Últimos 30 dias');
+      await expect(canvas.getByTestId('kpi-margin-delta')).toHaveAttribute('data-direction', 'up');
+      await expect(canvas.getByTestId('kpi-margin-value')).toHaveTextContent('62,0%');
+    });
+  },
+};

package/src/components/data-display/StatCard/StatCard.tsx

@@ -0,0 +1,236 @@
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import RemoveIcon from '@mui/icons-material/Remove';
+import { Box, Stack, Typography, useTheme, type Theme } from '@mui/material';
+import React from 'react';
+
+import { Skeleton } from '../../layout/Skeleton/Skeleton';
+
+import type {
+  StatCardDelta,
+  StatCardDeltaDirection,
+  StatCardDeltaTone,
+  StatCardProps,
+} from './StatCard.types';
+
+/** The arrow each direction renders (decorative — the text carries the meaning). */
+const DIRECTION_ICON: Record<StatCardDeltaDirection, typeof ArrowUpwardIcon> = {
+  up: ArrowUpwardIcon,
+  down: ArrowDownwardIcon,
+  neutral: RemoveIcon,
+};
+
+/** How each direction reads to a screen reader when no `ariaLabel` is given. */
+const DIRECTION_WORD: Record<StatCardDeltaDirection, string> = {
+  up: 'Increase of',
+  down: 'Decrease of',
+  neutral: 'Change of',
+};
+
+/** A direction's natural tone, used when the caller doesn't override it. */
+const IMPLIED_TONE: Record<StatCardDeltaDirection, StatCardDeltaTone> = {
+  up: 'positive',
+  down: 'negative',
+  neutral: 'neutral',
+};
+
+/** Resolve a tone to its semantic palette colour (never a hardcoded hex). */
+function toneColor(tone: StatCardDeltaTone, theme: Theme): string {
+  if (tone === 'positive') return theme.palette.success.main;
+  if (tone === 'negative') return theme.palette.error.main;
+  return theme.palette.text.secondary;
+}
+
+/** The screen-reader sentence for a delta: caller override, else generated. */
+function deltaAriaLabel(delta: StatCardDelta): string {
+  if (delta.ariaLabel) return delta.ariaLabel;
+  const suffix = delta.label ? ` ${delta.label}` : '';
+  return `${DIRECTION_WORD[delta.direction]} ${delta.value}${suffix}`;
+}
+
+/** The delta row: a decorative arrow plus the pre-formatted change and context. */
+function DeltaRow({ delta, testId }: { delta: StatCardDelta; testId: string }): React.JSX.Element {
+  const theme = useTheme();
+  const tone = delta.tone ?? IMPLIED_TONE[delta.direction];
+  const Icon = DIRECTION_ICON[delta.direction];
+  const color = toneColor(tone, theme);
+
+  return (
+    <Stack
+      direction="row"
+      spacing={0.5}
+      sx={{ alignItems: 'center', flexWrap: 'wrap' }}
+      data-testid={testId}
+      data-direction={delta.direction}
+      data-tone={tone}
+    >
+      {/* The arrow duplicates what the aria-label already says, so it is hidden
+          from assistive tech rather than read twice. */}
+      <Icon aria-hidden="true" sx={{ fontSize: '1rem', color }} />
+      <Typography
+        variant="body2"
+        component="span"
+        aria-label={deltaAriaLabel(delta)}
+        sx={{ color, fontWeight: theme.typography.fontWeightMedium }}
+      >
+        {delta.value}
+      </Typography>
+      {delta.label && (
+        <Typography variant="caption" component="span" sx={{ color: theme.palette.text.secondary }}>
+          {delta.label}
+        </Typography>
+      )}
+    </Stack>
+  );
+}
+
+/** The label row: the optional decorative icon plus the metric's name. */
+function LabelRow({
+  label,
+  icon,
+  labelId,
+  testId,
+}: Pick<StatCardProps, 'label' | 'icon'> & {
+  labelId: string;
+  testId: string;
+}): React.JSX.Element {
+  const theme = useTheme();
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+      {icon && (
+        <Box
+          aria-hidden="true"
+          data-testid={`${testId}-icon`}
+          sx={{ display: 'flex', color: theme.palette.text.secondary }}
+        >
+          {icon}
+        </Box>
+      )}
+      <Typography
+        id={labelId}
+        variant="caption"
+        component="p"
+        data-testid={`${testId}-label`}
+        sx={{ color: theme.palette.text.secondary }}
+      >
+        {label}
+      </Typography>
+    </Stack>
+  );
+}
+
+/** The figure itself, or its skeleton while the tile is loading. */
+function ValueRow({
+  value,
+  loading,
+  testId,
+}: Pick<StatCardProps, 'value' | 'loading'> & { testId: string }): React.JSX.Element {
+  const theme = useTheme();
+  if (loading) {
+    return (
+      <Skeleton
+        variant="rectangular"
+        height={28}
+        width="60%"
+        borderRadius={4}
+        data-testid={`${testId}-value-skeleton`}
+      />
+    );
+  }
+  return (
+    <Typography
+      variant="h6"
+      component="p"
+      data-testid={`${testId}-value`}
+      sx={{
+        fontWeight: theme.typography.fontWeightMedium,
+        color: theme.palette.text.primary,
+        overflowWrap: 'anywhere',
+      }}
+    >
+      {value}
+    </Typography>
+  );
+}
+
+/** The delta slot: its skeleton while loading, the row once resolved, else nothing. */
+function DeltaSlot({
+  delta,
+  loading,
+  testId,
+}: {
+  delta?: StatCardDelta;
+  loading: boolean;
+  testId: string;
+}): React.JSX.Element | null {
+  if (!delta) return null;
+  if (loading) {
+    return (
+      <Skeleton
+        variant="rectangular"
+        height={16}
+        width="40%"
+        borderRadius={4}
+        data-testid={`${testId}-delta-skeleton`}
+      />
+    );
+  }
+  return <DeltaRow delta={delta} testId={`${testId}-delta`} />;
+}
+
+/**
+ * StatCard (KPI tile) — one labelled figure with an optional period-over-period
+ * delta, leading icon, hint line and loading state. The single shared tile for
+ * dashboards and summary bands, so surfaces stop hand-rolling the pattern.
+ *
+ * The tile is presentation only: `value` and `delta.value` arrive ALREADY
+ * formatted, so locale/currency rules stay with the data owner. Colour comes
+ * from the MUI palette (`success` / `error` / `text.secondary`), and the delta's
+ * meaning is separable from its arrow via {@link StatCardDelta.tone} — a rise in
+ * cost can render "up" while reading as negative.
+ */
+export const StatCard: React.FC<StatCardProps> = React.memo(
+  ({ label, value, delta, icon, hint, loading = false, className, dataTestId }) => {
+    const theme = useTheme();
+    const labelId = React.useId();
+    const testId = dataTestId || 'stat-card';
+
+    return (
+      <Box
+        role="group"
+        aria-labelledby={labelId}
+        aria-busy={loading || undefined}
+        className={className}
+        data-testid={testId}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: theme.spacing(0.5),
+          padding: theme.spacing(2),
+          borderRadius: theme.shape.borderRadius / 4,
+          border: `1px solid ${theme.palette.divider}`,
+          backgroundColor: theme.palette.background.paper,
+          minWidth: 0,
+        }}
+      >
+        <LabelRow label={label} icon={icon} labelId={labelId} testId={testId} />
+        <ValueRow value={value} loading={loading} testId={testId} />
+        <DeltaSlot delta={delta} loading={loading} testId={testId} />
+        {hint && (
+          <Typography
+            variant="caption"
+            component="p"
+            data-testid={`${testId}-hint`}
+            sx={{ color: theme.palette.text.secondary }}
+          >
+            {hint}
+          </Typography>
+        )}
+      </Box>
+    );
+  },
+);
+
+StatCard.displayName = 'StatCard';
+
+export default StatCard;

package/src/components/data-display/StatCard/StatCard.types.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+
+/** Which way a metric moved over the comparison window. */
+export type StatCardDeltaDirection = 'up' | 'down' | 'neutral';
+
+/**
+ * How the movement should READ to the user. Direction and meaning are separate
+ * concerns: revenue going up is good, cost going up is bad — so a consumer can
+ * override the tone without lying about the arrow.
+ */
+export type StatCardDeltaTone = 'positive' | 'negative' | 'neutral';
+
+/** The optional period-over-period change shown beneath a stat's value. */
+export interface StatCardDelta {
+  /**
+   * Pre-formatted change, e.g. `"+12,5%"` or `"-R$ 320,00"`. Formatting
+   * (locale, currency, precision) belongs to the caller, exactly as {@link
+   * StatCardProps.value} does.
+   */
+  value: string;
+  /** The arrow/geometry: which way the metric moved. */
+  direction: StatCardDeltaDirection;
+  /**
+   * The semantic colour. Defaults to the direction's natural reading
+   * (`up` → positive, `down` → negative, `neutral` → neutral); pass it
+   * explicitly for "lower is better" metrics such as cost.
+   */
+  tone?: StatCardDeltaTone;
+  /** Optional context for the comparison, e.g. `"vs. período anterior"`. */
+  label?: string;
+  /**
+   * Overrides the generated screen-reader sentence (which is English by
+   * default) — pass a localized string when the surrounding app is not English.
+   */
+  ariaLabel?: string;
+}
+
+/** Props for the {@link StatCard} KPI tile. */
+export interface StatCardProps {
+  /** What the figure measures, e.g. `"Receita"`. */
+  label: string;
+  /**
+   * The figure itself, ALREADY formatted (`"R$ 1.250,00"`, `"60,0%"`, `12`).
+   * The tile never formats: money/percent/locale rules live with the caller.
+   */
+  value: ReactNode;
+  /** Optional period-over-period change rendered under the value. */
+  delta?: StatCardDelta;
+  /** Optional leading icon rendered beside the label. */
+  icon?: ReactNode;
+  /** Optional clarifying line under the value, e.g. the range being measured. */
+  hint?: string;
+  /**
+   * While true the value/delta are replaced by skeletons and the tile is
+   * announced as busy — the label stays, so the grid never reflows on load.
+   */
+  loading?: boolean;
+  /** Custom className for the tile root. */
+  className?: string;
+  /** Test id for the tile root; child test ids are derived from it. */
+  dataTestId?: string;
+}