@1doc/1ds-react 2.8.0 → 2.9.0

package/src/teste/AccordionConteudoLivre.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Accordion from "../components/Accordion/Accordion";
+
+describe("Accordion · conteúdo livre por item (React)", () => {
+  it("o content do item aceita qualquer nó (campos, botões)", () => {
+    render(
+      <Accordion
+        items={[
+          {
+            id: "s1",
+            title: "Seção 01",
+            defaultOpen: true,
+            content: (
+              <label>
+                Nome <input defaultValue="Maria" />
+              </label>
+            ),
+          },
+          { id: "s2", title: "Seção 02", content: <button type="button">Anexar arquivo</button> },
+        ]}
+      />,
+    );
+    expect(screen.getByDisplayValue("Maria")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Anexar arquivo", hidden: true })).toBeInTheDocument();
+  });
+
+  it("o título do item é o botão do painel, sem cor própria (herda a neutra do gatilho)", () => {
+    const { container } = render(<Accordion items={[{ id: "a", title: "Seção", content: "x" }]} />);
+    const titulo = container.querySelector(".umds-accordion__title") as HTMLElement;
+    expect(titulo.closest("button")).toHaveClass("umds-accordion__trigger");
+    expect(titulo.getAttribute("style")).toBeNull();
+  });
+
+  it("o texto simples continua funcionando", () => {
+    render(<Accordion items={[{ id: "a", title: "Seção", content: "Texto do painel", defaultOpen: true }]} />);
+    expect(screen.getByText("Texto do painel")).toBeInTheDocument();
+  });
+});

package/src/teste/AtributosRepassados.test.tsx

@@ -0,0 +1,73 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Text from "../components/Text/Text";
+import Grid from "../components/Grid/Grid";
+import Logo from "../components/Logo/Logo";
+import Button from "../components/Button/Button";
+import DataTable from "../components/DataTable/DataTable";
+
+/**
+ * Paridade com o Vue: no Vue gerado, Text, Grid e Logo descartavam
+ * `title`, `style` e `aria-*`, o Button escrevia `autofocus="false"` e o
+ * DataTable a classe `--selected.value`. O React nunca teve o defeito; o teste
+ * garante que a correção do Vue não o introduza aqui (mesma fonte Mitosis).
+ */
+describe("atributos repassados ao elemento raiz", () => {
+  it("Text repassa title, style e aria-*", () => {
+    const { container } = render(
+      <Text title="Dica" style={{ marginTop: 4 }} aria-live="polite" data-x="1">
+        Olá
+      </Text>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.marginTop).toBe("4px");
+    expect(el.getAttribute("aria-live")).toBe("polite");
+    expect(el.getAttribute("data-x")).toBe("1");
+  });
+
+  it("Grid repassa title, style e aria-*", () => {
+    const { container } = render(
+      <Grid container spacing="xxxs" title="Dica" style={{ marginTop: 4 }} aria-label="Área">
+        x
+      </Grid>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.marginTop).toBe("4px");
+    expect(el.getAttribute("aria-label")).toBe("Área");
+  });
+
+  it("Logo repassa title, style e aria-*", () => {
+    const { container } = render(
+      <Logo title="Dica" style={{ width: 80 }} aria-hidden="true" />,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.getAttribute("title")).toBe("Dica");
+    expect(el.style.width).toBe("80px");
+    expect(el.getAttribute("aria-hidden")).toBe("true");
+  });
+});
+
+describe("Button · autoFocus", () => {
+  it("não escreve autofocus quando falso ou ausente", () => {
+    const { container } = render(<Button>Salvar</Button>);
+    expect(container.querySelector("[autofocus]")).toBeNull();
+  });
+});
+
+describe("DataTable · linha selecionada", () => {
+  it("a classe --selected vai limpa, só na linha selecionada", () => {
+    const { container } = render(
+      <DataTable
+        columns={[{ key: "nome", label: "Nome" }]}
+        data={[{ nome: "Cris Lima" }, { nome: "Ana Paula" }]}
+        selectable
+        selectedRows={[0]}
+      />,
+    );
+    const marcadas = container.querySelectorAll(".umds-datatable__row--selected");
+    expect(marcadas).toHaveLength(1);
+    expect(container.innerHTML).not.toContain(".value");
+  });
+});

package/src/teste/AttachmentCardIA.test.tsx

@@ -0,0 +1,126 @@
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import AttachmentCard from "../components/AttachmentCard/AttachmentCard";
+
+beforeAll(() => {
+  if (!(globalThis as any).ResizeObserver) {
+    (globalThis as any).ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  }
+});
+
+function cartaoDeIA(extra: Record<string, any> = {}) {
+  const aoAplicar = vi.fn();
+  const ui = (
+    <AttachmentCard
+      fileName="protocolo.pdf"
+      documentType="Protocolo"
+      status="ai"
+      statusLabel="Recursos IA"
+      onOpen={() => {}}
+      panel={
+        <div>
+          <p>A IA sugere um assunto.</p>
+          <button type="button" onClick={aoAplicar}>
+            Aplicar sugestão
+          </button>
+        </div>
+      }
+      {...extra}
+    />
+  );
+  return { aoAplicar, ...render(ui) };
+}
+
+describe("AttachmentCard · status ai", () => {
+  it("escreve a classe do selo de IA e usa a varinha por padrão", () => {
+    const { container } = render(<AttachmentCard fileName="x.pdf" status="ai" statusLabel="Recursos IA" />);
+    const selo = container.querySelector(".umds-attachment-card__status") as HTMLElement;
+    expect(selo).toHaveClass("umds-attachment-card__status--ai");
+    expect(selo.querySelector("svg")).not.toBeNull();
+  });
+
+  it("só o selo de IA ganha ícone por padrão", () => {
+    const { container } = render(
+      <AttachmentCard fileName="x.pdf" status="positive" statusLabel="Ok" />,
+    );
+    expect(container.querySelector(".umds-attachment-card__status svg")).toBeNull();
+  });
+});
+
+describe("AttachmentCard · slot panel", () => {
+  it("o painel livre substitui o resultado da conferência, e o selo vira botão sem statusDetails", async () => {
+    const usuario = userEvent.setup();
+    cartaoDeIA();
+    const selo = screen.getByRole("button", { name: /^Recursos IA/ });
+    expect(selo).toHaveAttribute("aria-haspopup", "dialog");
+    await usuario.click(selo);
+    const painel = await screen.findByRole("dialog");
+    expect(painel).toHaveTextContent("A IA sugere um assunto.");
+    expect(screen.getByRole("button", { name: "Aplicar sugestão" })).toBeInTheDocument();
+    // sem título interno: o painel é nomeado pelo selo
+    expect(painel).not.toHaveAttribute("aria-labelledby");
+    expect(painel).toHaveAccessibleName(/Recursos IA/);
+  });
+
+  it("sem panel nem statusDetails o selo não é botão", () => {
+    render(<AttachmentCard fileName="x.pdf" status="ai" statusLabel="Recursos IA" />);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("panelWidth escreve a largura do painel; sem ela não há style", async () => {
+    const usuario = userEvent.setup();
+    cartaoDeIA({ panelWidth: 280 });
+    await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+    expect((await screen.findByRole("dialog")).style.width).toBe("280px");
+  });
+
+  it("sem panelWidth o painel não leva style", async () => {
+    const usuario = userEvent.setup();
+    cartaoDeIA();
+    await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+    expect((await screen.findByRole("dialog")).getAttribute("style")).toBeNull();
+  });
+});
+
+describe("AttachmentCard · closePanelOnAction", () => {
+  it("acionar um botão do painel fecha, devolve o foco ao selo e a ação chega ao app", async () => {
+    const usuario = userEvent.setup();
+    const { aoAplicar } = cartaoDeIA({ closePanelOnAction: true });
+    const selo = screen.getByRole("button", { name: /^Recursos IA/ });
+    await usuario.click(selo);
+    await usuario.click(await screen.findByRole("button", { name: "Aplicar sugestão" }));
+    expect(aoAplicar).toHaveBeenCalledTimes(1);
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+    expect(selo).toHaveFocus();
+  });
+
+  it("sem a prop o painel continua aberto depois da ação", async () => {
+    const usuario = userEvent.setup();
+    const { aoAplicar } = cartaoDeIA();
+    await usuario.click(screen.getByRole("button", { name: /^Recursos IA/ }));
+    await usuario.click(await screen.findByRole("button", { name: "Aplicar sugestão" }));
+    expect(aoAplicar).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("o botão de copiar um campo não fecha o painel", async () => {
+    const usuario = userEvent.setup();
+    render(
+      <AttachmentCard
+        fileName="cpf.pdf"
+        status="positive"
+        statusLabel="Pré-aprovado"
+        closePanelOnAction
+        statusDetails={{ fields: [{ label: "CPF", value: "384.221.760-05", copyable: true }] }}
+      />,
+    );
+    await usuario.click(screen.getByRole("button", { name: /^Pré-aprovado/ }));
+    await usuario.click(await screen.findByRole("button", { name: "Copiar CPF" }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+});

package/src/teste/AvatarGroupOverlap.test.tsx

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import AvatarGroup from "../components/Avatar/AvatarGroup";
+
+const PESSOAS = [
+  { name: "Ana Souza" },
+  { name: "Bruno Lima" },
+  { name: "Carla Dias" },
+  { name: "Diego Ferraz" },
+  { name: "Eduarda Neves" },
+];
+
+const grupo = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("AvatarGroup · overflowCount", () => {
+  it("sem a prop, o +N é o que passou de max (como antes)", () => {
+    render(<AvatarGroup avatars={PESSOAS} max={3} />);
+    expect(screen.getByText("+2")).toBeInTheDocument();
+  });
+
+  it("overflowCount vira o +N sem itens-fantasma", () => {
+    render(<AvatarGroup avatars={PESSOAS.slice(0, 3)} max={3} overflowCount={12} />);
+    expect(screen.getByText("+12")).toBeInTheDocument();
+  });
+
+  it("soma com o que passou de max dentro de avatars", () => {
+    render(<AvatarGroup avatars={PESSOAS} max={3} overflowCount={10} />);
+    expect(screen.getByText("+12")).toBeInTheDocument();
+  });
+
+  it("o rótulo traduzido recebe o total escondido", () => {
+    render(
+      <AvatarGroup
+        avatars={PESSOAS.slice(0, 2)}
+        max={2}
+        overflowCount={7}
+        overflowTitle={(n) => n + " others"}
+        overflowAriaLabel={(n) => n + " more avatars"}
+      />,
+    );
+    expect(screen.getByTitle("7 others")).toBeInTheDocument();
+  });
+
+  it("sem excedente nenhum, não há +N", () => {
+    render(<AvatarGroup avatars={PESSOAS.slice(0, 2)} max={4} />);
+    expect(screen.queryByText(/^\+/)).toBeNull();
+  });
+
+  it("overflowCount 0 não cria +0", () => {
+    render(<AvatarGroup avatars={PESSOAS.slice(0, 2)} max={4} overflowCount={0} />);
+    expect(screen.queryByText(/^\+/)).toBeNull();
+  });
+});
+
+describe("AvatarGroup · overlap e ring", () => {
+  it("escrevem as variáveis do grupo em px", () => {
+    const { container } = render(<AvatarGroup avatars={PESSOAS} overlap={6} ring={1} />);
+    const el = grupo(container);
+    expect(el.style.getPropertyValue("--umds-avatar-group-overlap")).toBe("6px");
+    expect(el.style.getPropertyValue("--umds-avatar-group-ring")).toBe("1px");
+  });
+
+  it("só overlap não mexe no anel", () => {
+    const { container } = render(<AvatarGroup avatars={PESSOAS} overlap={4} />);
+    const el = grupo(container);
+    expect(el.style.getPropertyValue("--umds-avatar-group-overlap")).toBe("4px");
+    expect(el.style.getPropertyValue("--umds-avatar-group-ring")).toBe("");
+  });
+
+  it("sem as props, nenhum style: valem os padrões do CSS", () => {
+    const { container } = render(<AvatarGroup avatars={PESSOAS} />);
+    expect(grupo(container).getAttribute("style")).toBeNull();
+  });
+});

package/src/teste/BadgeTag.test.tsx

@@ -0,0 +1,64 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Badge from "../components/Badge/Badge";
+import Tag from "../components/Tag/Tag";
+
+const raiz = (c: HTMLElement) => c.firstElementChild as HTMLElement;
+
+describe("Badge compacto, novidade e colado", () => {
+  it("size 2xs escreve a classe; sem size continua md", () => {
+    const { container } = render(
+      <>
+        <Badge size="2xs">A</Badge>
+        <Badge>B</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--2xs");
+    expect(container.children[1]).toHaveClass("umds-badge--md");
+  });
+
+  it("variant new escreve a classe da variante", () => {
+    const { container } = render(<Badge variant="new">Novidade</Badge>);
+    expect(raiz(container)).toHaveClass("umds-badge--new");
+  });
+
+  it("attached escreve o modificador; sem ele não há", () => {
+    const { container } = render(
+      <>
+        <Badge attached>A</Badge>
+        <Badge>B</Badge>
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-badge--attached");
+    expect(container.children[1]).not.toHaveClass("umds-badge--attached");
+  });
+});
+
+describe("Tag compacta, soft, pílula e novidade", () => {
+  it("size xs escreve a classe e sm continua", () => {
+    const { container } = render(
+      <>
+        <Tag label="a" size="xs" />
+        <Tag label="b" size="sm" />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-tag--xs");
+    expect(container.children[1]).toHaveClass("umds-tag--sm");
+  });
+
+  it("appearance soft e pill escrevem as classes", () => {
+    const { container } = render(<Tag label="SOBR" appearance="soft" variant="primary" pill />);
+    expect(raiz(container)).toHaveClass("umds-tag--soft", "umds-tag--primary", "umds-tag--pill");
+  });
+
+  it("sem pill não há a classe; padrão segue outlined", () => {
+    const { container } = render(<Tag label="x" />);
+    expect(raiz(container)).toHaveClass("umds-tag--outlined");
+    expect(raiz(container)).not.toHaveClass("umds-tag--pill");
+  });
+
+  it("variant new escreve a classe", () => {
+    const { container } = render(<Tag label="Dado simulado" variant="new" appearance="soft" />);
+    expect(raiz(container)).toHaveClass("umds-tag--new", "umds-tag--soft");
+  });
+});

package/src/teste/BoxItemFlex.test.tsx

@@ -0,0 +1,81 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Box from "../components/Box/Box";
+
+describe("Box como item flex e com `as`", () => {
+  it("sem `as` continua um div", () => {
+    const { container } = render(<Box padding="md">x</Box>);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  for (const tag of ["div", "span", "ul", "ol", "li", "section", "nav", "header", "footer", "form"]) {
+    it(`as="${tag}" renderiza <${tag}> e só ele`, () => {
+      const { container } = render(<Box as={tag as any}>x</Box>);
+      expect(container.firstElementChild?.tagName).toBe(tag.toUpperCase());
+      expect(container.children).toHaveLength(1);
+    });
+  }
+
+  it("ul e ol mantêm a semântica de lista (role=list)", () => {
+    render(
+      <>
+        <Box as="ul" aria-label="Itens">
+          <Box as="li">a</Box>
+        </Box>
+        <Box as="ol" aria-label="Passos">
+          <Box as="li">b</Box>
+        </Box>
+      </>,
+    );
+    expect(screen.getByRole("list", { name: "Itens" }).tagName).toBe("UL");
+    expect(screen.getByRole("list", { name: "Passos" }).tagName).toBe("OL");
+  });
+
+  it("nav com aria-label vira região de navegação nomeada", () => {
+    render(
+      <Box as="nav" aria-label="Atalhos">
+        x
+      </Box>,
+    );
+    expect(screen.getByRole("navigation", { name: "Atalhos" })).toBeInTheDocument();
+  });
+
+  it("as=form chama onSubmit", () => {
+    const aoEnviar = vi.fn((e: Event) => e.preventDefault());
+    const { container } = render(
+      <Box as="form" onSubmit={aoEnviar}>
+        <button type="submit">Enviar</button>
+      </Box>,
+    );
+    fireEvent.submit(container.querySelector("form") as HTMLFormElement);
+    expect(aoEnviar).toHaveBeenCalledTimes(1);
+  });
+
+  it("escreve as classes de item flex", () => {
+    const { container } = render(
+      <Box grow shrink="0" basis="50" minWidth="auto" overflow="hidden" overflowX="auto" overflowY="scroll" fullHeight fullWidth>
+        x
+      </Box>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    for (const c of [
+      "umds-box--grow",
+      "umds-box--shrink-0",
+      "umds-box--basis-50",
+      "umds-box--min-w-auto",
+      "umds-box--overflow-hidden",
+      "umds-box--overflow-x-auto",
+      "umds-box--overflow-y-scroll",
+      "umds-box--full-height",
+      "umds-box--full",
+    ]) {
+      expect(el).toHaveClass(c);
+    }
+  });
+
+  it("sem as props de item não escreve nenhuma classe delas", () => {
+    const { container } = render(<Box padding="md">x</Box>);
+    const classes = (container.firstElementChild as HTMLElement).className;
+    expect(classes).not.toMatch(/grow|shrink|basis|min-w|overflow|full-height/);
+  });
+});

package/src/teste/BoxLayout.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Box from "../components/Box/Box";
+
+describe("Box de layout", () => {
+  it("sem props de layout não vira flex", () => {
+    const { container } = render(
+      <Box padding="md" bordered>
+        x
+      </Box>,
+    );
+    expect(container.firstElementChild).not.toHaveClass("umds-box--flex");
+  });
+
+  it("com direction, gap, align, justify e wrap vira flex", () => {
+    const { container } = render(
+      <Box direction="horizontal" gap="xxxs" align="center" justify="between" wrap padding="md">
+        x
+      </Box>,
+    );
+    const el = container.firstElementChild as HTMLElement;
+    for (const c of [
+      "umds-box--flex",
+      "umds-box--horizontal",
+      "umds-box--gap-xxxs",
+      "umds-box--align-center",
+      "umds-box--justify-between",
+      "umds-box--wrap",
+      "umds-box--p-md",
+    ]) {
+      expect(el).toHaveClass(c);
+    }
+  });
+
+  it("só com gap vira flex vertical", () => {
+    const { container } = render(<Box gap="xs">x</Box>);
+    expect(container.firstElementChild).toHaveClass("umds-box--flex", "umds-box--vertical");
+  });
+
+  it("repassa id, role, aria-label e style", () => {
+    render(
+      <Box id="r" role="region" aria-label="Resumo" style={{ marginTop: 4 }}>
+        x
+      </Box>,
+    );
+    const el = screen.getByRole("region", { name: "Resumo" });
+    expect(el.id).toBe("r");
+    expect(el.style.marginTop).toBe("4px");
+  });
+});

package/src/teste/Button.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import Button from "../components/Button/Button";
+
+describe("Button: variante neutral-text e tamanho xs", () => {
+  it("neutral-text escreve a classe da variante", () => {
+    render(<Button variant="neutral-text">Simular</Button>);
+    expect(screen.getByRole("button", { name: "Simular" })).toHaveClass("umds-button--neutral-text");
+  });
+
+  it("neutral continua sendo o contornado cinza", () => {
+    render(<Button variant="neutral">Ordenar</Button>);
+    const botao = screen.getByRole("button", { name: "Ordenar" });
+    expect(botao).toHaveClass("umds-button--neutral");
+    expect(botao).not.toHaveClass("umds-button--neutral-text");
+  });
+
+  it("size xs escreve a classe e o botão sem size continua md", () => {
+    render(
+      <>
+        <Button size="xs">Resolver</Button>
+        <Button>Padrão</Button>
+      </>,
+    );
+    expect(screen.getByRole("button", { name: "Resolver" })).toHaveClass("umds-button--xs");
+    expect(screen.getByRole("button", { name: "Padrão" })).toHaveClass("umds-button--md");
+  });
+
+  it("no xs o ícone usa o tamanho sm do Icon (o CSS do botão o reduz)", () => {
+    const { container } = render(
+      <Button size="xs" startIcon={faPlus}>
+        Novo
+      </Button>,
+    );
+    expect(container.querySelector(".umds-icon")).toHaveClass("umds-icon--sm");
+    expect(container.querySelector(".umds-icon--xs")).toBeNull();
+  });
+});