Integrate nationale feedback komponente

app/feedback/nationale-feedback-komponente.client.ts

@@ -0,0 +1,20 @@
+export const requestFeedback = function () {
+  const fakeFeedbackWidgetTarget = document.createElement("button");
+  fakeFeedbackWidgetTarget.dataset.context = JSON.stringify({
+    portalId: "demofeedback",
+    instrumentId: "assist-service",
+  });
+  fakeFeedbackWidgetTarget.dataset.theme = JSON.stringify({
+    textColor: "#000",
+    textBackgroundColor: "#fff",
+    headlineColor: "#000",
+    error: "#f00",
+    textfieldColor: "#000",
+    textfieldBackgroundColor: "#fff",
+    footerTextColor: "#000",
+    footerBackgroundColor: "#fff",
+    buttonPrimaryColor: "#fff",
+    buttonPrimaryBackgroundColor: "#004b76",
+  });
+  window.bmi115WidgetButton.init(fakeFeedbackWidgetTarget);
+};

app/root.tsx

@@ -49,6 +49,10 @@ export default function App() {
         <ScrollRestoration />
         <Scripts />
         <LiveReload />
+        <script
+          src="https://stage.formular.support.115.de/demofeedback/bmi-widget.js"
+          id="bmi115WidgetScript"
+        ></script>
       </body>
     </html>
   );

app/routes/_index.tsx

@@ -1,4 +1,5 @@
 import type { MetaFunction } from "@remix-run/node";
+import { requestFeedback } from "~/feedback/nationale-feedback-komponente.client";
 
 export const meta: MetaFunction = () => {
   return [
@@ -11,7 +12,10 @@ export default function Index() {
   return (
     <main className={"flex flex-col items-center m-40"}>
       <h1 className={"ds-heading-01-reg mb-40"}>Hello DigitalService!</h1>
-      <button className="ds-button ds-button-large">
+      <button
+        className="ds-button ds-button-large"
+        onClick={() => requestFeedback()}
+      >
         <span className="ds-button-label">Click me for nothing</span>
       </button>
     </main>

tests/a11y/example.spec.ts

@@ -8,7 +8,21 @@ test.describe("index", () => {
     await page.goto("/");
 
     const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
-
     expect(accessibilityScanResults.violations).toEqual([]);
   });
+
+  test.describe("feedback", () => {
+    test("should not have any automatically detectable accessibility issues", async ({
+      page,
+    }) => {
+      await page.goto("/");
+      await page.getByRole("button", { name: "Click me for nothing" }).click();
+      await expect(
+        page.getByRole("heading", { name: "Ihr Feedback" }),
+      ).toBeVisible();
+
+      const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+      expect(accessibilityScanResults.violations).toEqual([]);
+    });
+  });
 });

tests/e2e/example.spec.ts

@@ -10,4 +10,12 @@ test.describe("basic example test", () => {
     await page.goto("/");
     await expect(page.locator("text=DigitalService")).toBeVisible();
   });
+
+  test("clicking on the button shows the feedback dialog", async ({ page }) => {
+    await page.goto("/");
+    await page.getByRole("button", { name: "Click me for nothing" }).click();
+    await expect(
+      page.getByRole("heading", { name: "Ihr Feedback" }),
+    ).toBeVisible();
+  });
 });