From 467322a4521440eeb9049438766bd7732e7de2bf Mon Sep 17 00:00:00 2001
From: Laurent Caouissin <caouissin.laurent@gmail.com>
Date: Fri, 13 Dec 2024 21:45:08 +0100
Subject: [PATCH] feat: provide custom button lunatic (with delete icon)

---
 src/Button.spec.tsx | 60 +++++++++++++++++++++++++++++++++++++++++++++
 src/Button.tsx      | 24 ++++++++++++++++++
 src/index.ts        |  2 ++
 3 files changed, 86 insertions(+)
 create mode 100644 src/Button.spec.tsx
 create mode 100644 src/Button.tsx

diff --git a/src/Button.spec.tsx b/src/Button.spec.tsx
new file mode 100644
index 00000000..a74c53b1
--- /dev/null
+++ b/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");
+    });
+});
diff --git a/src/Button.tsx b/src/Button.tsx
new file mode 100644
index 00000000..c8d3bdbd
--- /dev/null
+++ b/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>
+    );
+};
diff --git a/src/index.ts b/src/index.ts
index e6ec4a0f..f943c960 100644
--- a/src/index.ts
+++ b/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