integration/dev: adding a gaufre.css testing page

we now can quickly test the gaufre component in a DSFR env and in a
custom env

packages/integration/src/dev/StylesGaufre.tsx

@@ -0,0 +1,25 @@
+import { ReactNode, useEffect } from "react"
+import gaufreStyles from "../styles/gaufre.css?inline"
+import devStyles from "./dev.css?inline"
+
+/**
+ * wrap a component in StylesGaufre to apply the "gaufre" styles
+ *
+ * this helps testing the html when we include the gaufre css
+ */
+export const StylesGaufre = ({ children }: { children: ReactNode }) => {
+  useEffect(() => {
+    if (document.querySelector("#styles-gaufre")) {
+      return
+    }
+    const style = document.createElement("style")
+    style.id = "styles-gaufre"
+    style.innerHTML = gaufreStyles + devStyles
+    document.head.appendChild(style)
+    return () => {
+      document.querySelector("#styles-gaufre")?.remove()
+    }
+  }, [])
+
+  return children
+}

packages/integration/src/dev/dev.tsx

@@ -10,6 +10,7 @@ import { Email } from "../components/Homepage/Email"
 import { Proconnect } from "../components/Homepage/Proconnect"
 import { StylesFull } from "./StylesFull"
 import { StylesStandalone } from "./StylesStandalone"
+import { StylesGaufre } from "./StylesGaufre"
 import { DsfrHeader } from "./DsfrHeader"
 import services from "../../../../website/src/data/services.json"
 
@@ -96,7 +97,7 @@ const routes = [
   }),
   {
     path: "/gaufre",
-    label: "Gaufre",
+    label: "Gaufre (header DSFR)",
     component: (
       <StylesStandalone type="gaufre">
         <DsfrHeader actions={[<Gaufre />]} />
@@ -134,6 +135,57 @@ const routes = [
       </StylesStandalone>
     ),
   },
+  {
+    path: "/gaufre-custom",
+    label: "Gaufre (header custom)",
+    component: (
+      <StylesGaufre>
+        <div
+          style={{
+            margin: "2rem auto",
+            width: 800,
+            border: "1px solid #999",
+            padding: "2rem",
+            borderRadius: "0.5rem",
+          }}
+        >
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <h1>Test de la Gaufre</h1>
+            <Gaufre />
+          </div>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac diam a libero posuere
+            ornare facilisis in mi. Nullam eu vulputate augue, in auctor nibh. Praesent ac tempus
+            dui. Integer vel enim non purus facilisis mattis et vel dolor. Aliquam lacinia elit et
+            massa faucibus, at dictum risus ornare. Vivamus ultricies magna et gravida consequat.
+            Donec ac odio finibus, lobortis purus vel, consequat purus. Maecenas convallis vel enim
+            eu malesuada. Vestibulum elementum maximus massa, a porta erat congue quis. Nunc neque
+            quam, euismod et malesuada in, bibendum ac ex. Phasellus felis elit, egestas a convallis
+            nec, malesuada a est. Donec ac urna venenatis lorem aliquet rhoncus in accumsan ipsum.
+          </p>
+          <p>
+            Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi sed augue elementum,
+            tempus diam in, euismod purus. Fusce interdum, leo nec blandit eleifend, sapien ligula
+            egestas quam, quis aliquam ex turpis ut augue. Nullam a neque consectetur, feugiat eros
+            a, lacinia tortor. Proin imperdiet vehicula justo, eget bibendum tortor gravida a.
+            Pellentesque sit amet fermentum urna. Ut rutrum eros a ligula dapibus pharetra. In
+            porttitor arcu in euismod dictum. Aenean vestibulum mi et dignissim rutrum. Phasellus
+            ultrices ex justo, eu tincidunt metus efficitur non. Curabitur ac lorem ornare, aliquet
+            neque et, tristique elit. Donec quis turpis sodales, interdum massa fermentum, dictum
+            magna.
+          </p>
+          <p>
+            Mauris elit risus, facilisis at magna quis, interdum tempor nulla. Ut ac erat eget
+            tellus ultricies semper. Ut at dictum ante. Lorem ipsum dolor sit amet, consectetur
+            adipiscing elit. Nam placerat lacinia eros ac convallis. Sed ultricies lectus et
+            pharetra aliquet. Vestibulum feugiat pulvinar fermentum. Vivamus imperdiet dapibus
+            ornare. Donec venenatis, lectus id faucibus tempus, sapien urna molestie augue, at
+            egestas enim lectus quis nisi.
+          </p>
+        </div>
+      </StylesGaufre>
+    ),
+  },
 ]
 
 ReactDOM.createRoot(document.getElementById("root")!).render(