feat: provide custom button lunatic (with delete icon)

src/Button.spec.tsx

@@ -0,0 +1,60 @@
+import { describe, it /*, expect*/ } from "vitest";
+import { render } from "@testing-library/react";
+import { Button } from "./Button";
+
+const defaultProps = {
+    id: "",
+    label: "Click me",
+    disbled: false,
+    onclick: () => {},
+};
+
+describe("Button", () => {
+    it("Render button default", () => {
+        const { getByRole } = render(<Button {...defaultProps} />);
+
+        const findButton = getByRole("button");
+
+        expect(findButton.getAttribute("title")).toBe("Click me");
+        expect(findButton.getAttribute("value")).toBe("Click me");
+        expect(findButton.getAttribute("disabled")).toBe(null);
+        expect(findButton.getAttribute("class")?.split(" ")).toStrictEqual(["fr-btn"]);
+        expect(findButton.textContent).toBe("");
+    });
+
+    it("Render disabled button", () => {
+        const { getByRole } = render(<Button {...defaultProps} disabled />);
+
+        const findButton = getByRole("button");
+
+        expect(findButton.getAttribute("title")).toBe("Click me");
+        expect(findButton.getAttribute("value")).toBe("Click me");
+        expect(findButton.getAttribute("disabled")).toBe("");
+        expect(findButton.getAttribute("class")?.split(" ")).toStrictEqual(["fr-btn"]);
+    });
+
+    it("Render delete button disabled", () => {
+        const { getByRole } = render(<Button {...defaultProps} id={"delete"} disabled />);
+
+        const findButton = getByRole("button");
+
+        expect(findButton.getAttribute("title")).toBe("Click me");
+        expect(findButton.getAttribute("value")).toBe("Click me");
+        expect(findButton.getAttribute("disabled")).toBe("");
+        expect(findButton.getAttribute("class")?.split(" ")).toStrictEqual([
+            "fr-btn",
+            "fr-icon-delete-line",
+        ]);
+    });
+
+    it("Render button with children", () => {
+        const { getByRole } = render(<Button {...defaultProps}>Click inside</Button>);
+
+        const findButton = getByRole("button");
+        expect(findButton.getAttribute("title")).toBe("Click me");
+        expect(findButton.getAttribute("value")).toBe("Click me");
+        expect(findButton.getAttribute("disabled")).toBe(null);
+        expect(findButton.getAttribute("class")?.split(" ")).toStrictEqual(["fr-btn"]);
+        expect(findButton.textContent).toBe("Click inside");
+    });
+});

src/Button.tsx

@@ -0,0 +1,24 @@
+import type { LunaticSlotComponents } from "@inseefr/lunatic";
+import ButtonDsfr from "@codegouvfr/react-dsfr/Button";
+
+export const Button: LunaticSlotComponents["Button"] = props => {
+    const { onClick, disabled, label, children, id } = props;
+
+    return (
+        // Seems to be a typescript issue, iconId can be optional in Button-dsfr definition
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        <ButtonDsfr
+            id={id}
+            disabled={disabled}
+            onClick={onClick}
+            iconId={id ? "fr-icon-delete-line" : undefined}
+            value={label}
+            iconPosition="left"
+            size="medium"
+            title={label}
+        >
+            {children}
+        </ButtonDsfr>
+    );
+};

src/index.ts

@@ -20,6 +20,7 @@ import { Table, Tr, Td } from "./Table";
 import { Loop } from "./Loop";
 import { MarkdownLink } from "./MarkdownLink";
 import { Accordion } from "./Accordion";
+import { Button } from "./Button";
 
 export const slotComponents = {
     Question,
@@ -46,5 +47,6 @@ export const slotComponents = {
     Loop,
     MarkdownLink,
     Accordion,
+    Button,
 } as Partial<LunaticSlotComponents> satisfies Partial<LunaticSlotComponents>;
 //We must remove `as Partial<LunaticSlotComponents>` when summary refactored