feat(dsfr): création du composant "Besoin de plus d'information" (#6135)

* fix: ui

* fix: composant

packages/code-du-travail-frontend/src/modules/layout/index.tsx

@@ -1,7 +1,7 @@
 import { fr } from "@codegouvfr/react-dsfr";
 import { Footer } from "./Footer";
 import { Header } from "./header";
-import { NeedMoreInfo } from "./NeedMoreInfo";
+import { NeedMoreInfo } from "./infos";
 import { SkipLinks } from "./SkipLinks";
 
 export const DsfrLayout = ({ children }: { children: React.ReactNode }) => {

packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { Input } from "@codegouvfr/react-dsfr/Input";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useNeedMoreInfoEvents } from "./tracking";
+import servicesDeRenseignement from "../../../data/services-de-renseignement.json";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import { usePathname } from "next/navigation";
+import { fr } from "@codegouvfr/react-dsfr";
+import { css } from "../../../../styled-system/css";
+
+type ServiceRenseignement = {
+  name: string;
+  url: string;
+};
+
+export function PopupContent() {
+  const currentPathName = usePathname();
+  const [department, setDepartment] = useState<string>("");
+  const [result, setResult] = useState<undefined | ServiceRenseignement>(
+    undefined
+  );
+  const { emitModalIsOpened, emitTrackNumber } = useNeedMoreInfoEvents();
+
+  const onSearchInput = () => {
+    const departmentNum = (department.replace(/^0+/, "") || "").toLowerCase();
+    const departmentData = servicesDeRenseignement[departmentNum];
+    setResult(departmentData);
+  };
+
+  const onClickLinkPhoneNumber = () => {
+    emitTrackNumber();
+  };
+
+  useEffect(() => {
+    if (currentPathName) emitModalIsOpened(currentPathName);
+  }, [currentPathName, emitModalIsOpened]);
+
+  return (
+    <>
+      <h2 className={fr.cx("fr-text--xl")}>Contact téléphonique</h2>
+      <a href="tel:+33806000126" onClick={onClickLinkPhoneNumber}>
+        <Image
+          src="/static/assets/img/srdt.svg"
+          alt="Contactez les services de renseignements au droit du travail au 0800 026 080"
+          width={350}
+          height={100}
+        />
+      </a>
+      <h2 className={fr.cx("fr-text--xl", "fr-mt-3w")}>
+        Contact par email et prise de rendez-vous
+      </h2>
+      <Input
+        label="Saisissez le numéro de votre département"
+        nativeInputProps={{
+          maxLength: 3,
+          onChange: (e) => setDepartment(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              onSearchInput();
+            }
+          },
+        }}
+        addon={
+          <Button
+            iconId="fr-icon-search-line"
+            onClick={onSearchInput}
+            title="Lancer la recherche par numéro de département"
+          />
+        }
+        classes={{
+          nativeInputOrTextArea: inputCss,
+        }}
+      />
+      {result && (
+        <a href={result.url} target="_blank">
+          {result.url}
+        </a>
+      )}
+      <div className={fr.cx("fr-mt-3w")}>
+        <p className={fr.cx("fr-text--sm", "fr-mb-0")}>
+          Attention, ces services délivrent une information juridique, ils ne
+          sont pas compétents pour :
+        </p>
+        <ul>
+          <li className={fr.cx("fr-text--sm", "fr-mb-0")}>
+            les demandes d&apos;intervention en entreprise
+          </li>
+          <li className={fr.cx("fr-text--sm", "fr-mb-0")}>
+            la constitution des dossiers prud’homaux
+          </li>
+          <li className={fr.cx("fr-text--sm", "fr-mb-0")}>
+            les calculs de droit au chômage
+          </li>
+          <li className={fr.cx("fr-text--sm", "fr-mb-0")}>
+            vous renseigner sur les cotisations sociales
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+}
+
+const inputCss = css({
+  maxWidth: "280px",
+});

packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/PopupContent.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { PopupContent } from "../PopupContent";
+
+describe("<PopupContent />", () => {
+  it("should match snapshot", () => {
+    const { container } = render(<PopupContent />);
+    expect(container).toMatchSnapshot();
+  });
+});

packages/code-du-travail-frontend/src/modules/layout/infos/__tests__/__snapshots__/PopupContent.test.tsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PopupContent /> should match snapshot 1`] = `
+<div>
+  <h2
+    class="fr-text--xl"
+  >
+    Contact téléphonique
+  </h2>
+  <a
+    href="tel:+33806000126"
+  >
+    <img
+      alt="Contactez les services de renseignements au droit du travail au 0800 026 080"
+      data-nimg="1"
+      decoding="async"
+      height="100"
+      loading="lazy"
+      src="/static/assets/img/srdt.svg"
+      style="color: transparent;"
+      width="350"
+    />
+  </a>
+  <h2
+    class="fr-text--xl fr-mt-3w"
+  >
+    Contact par email et prise de rendez-vous
+  </h2>
+  <div
+    class="fr-input-group"
+  >
+    <label
+      class="fr-label"
+      for="input-:r0:"
+    >
+      Saisissez le numéro de votre département
+    </label>
+    <div
+      class="fr-input-wrap fr-input-wrap--addon"
+    >
+      <input
+        aria-describedby="input-:r0:-desc-error"
+        class="fr-input max-w_280px"
+        id="input-:r0:"
+        maxlength="3"
+        type="text"
+      />
+      <button
+        class="fr-btn fr-icon-search-line"
+        id="fr-button-:r1:"
+        title="Lancer la recherche par numéro de département"
+      />
+    </div>
+  </div>
+  <div
+    class="fr-mt-3w"
+  >
+    <p
+      class="fr-text--sm fr-mb-0"
+    >
+      Attention, ces services délivrent une information juridique, ils ne sont pas compétents pour :
+    </p>
+    <ul>
+      <li
+        class="fr-text--sm fr-mb-0"
+      >
+        les demandes d'intervention en entreprise
+      </li>
+      <li
+        class="fr-text--sm fr-mb-0"
+      >
+        la constitution des dossiers prud’homaux
+      </li>
+      <li
+        class="fr-text--sm fr-mb-0"
+      >
+        les calculs de droit au chômage
+      </li>
+      <li
+        class="fr-text--sm fr-mb-0"
+      >
+        vous renseigner sur les cotisations sociales
+      </li>
+    </ul>
+  </div>
+</div>
+`;