feat(DSFR): migration des pages fiches service public

packages/code-du-travail-frontend/app/fiche-service-public/[slug]/page.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { notFound } from "next/navigation";
+import { DsfrLayout } from "../../../src/modules/layout";
+import { fetchFicheSP } from "../../../src/modules/fiche-service-public/queries";
+import { fetchRelatedItems } from "../../../src/modules/documents";
+import { generateDefaultMetadata } from "../../../src/modules/common/metas";
+import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
+import { FicheServicePublicContainer } from "../../../src/modules/fiche-service-public/FicheServicePublicContainer";
+
+export async function generateMetadata({ params }) {
+  const { title, description, url } = await getFiche(params.slug);
+
+  return generateDefaultMetadata({
+    title: title,
+    description: description,
+    path: `/${getRouteBySource(SOURCES.SHEET_SP)}/${params.slug}`,
+    overrideCanonical: url,
+  });
+}
+
+async function Fiche({ params }) {
+  const {
+    _id,
+    breadcrumbs,
+    date,
+    description,
+    raw,
+    referencedTexts,
+    title,
+    url,
+  } = await getFiche(params.slug);
+  const relatedItems = await fetchRelatedItems({ _id }, params.slug);
+
+  return (
+    <DsfrLayout>
+      <FicheServicePublicContainer
+        title={title}
+        relatedItems={relatedItems}
+        date={date}
+        url={url}
+        metaDescription={description}
+        raw={raw}
+        breadcrumbs={breadcrumbs}
+        referencedTexts={referencedTexts}
+      />
+    </DsfrLayout>
+  );
+}
+
+const getFiche = async (slug: string) => {
+  const fiche = await fetchFicheSP(slug);
+
+  if (!fiche) {
+    return notFound();
+  }
+  return fiche;
+};
+
+export default Fiche;

packages/code-du-travail-frontend/cypress/integration/light/fiche-service-public.spec.ts

@@ -0,0 +1,29 @@
+describe("Fiche Service public", () => {
+  it("je vois une page fiche service public", () => {
+    cy.visit("/fiche-service-public/salaire-primes-et-avantages");
+    cy.findAllByRole("heading", { level: 1 }).should(
+      "have.text",
+      "Salaire, primes et avantages"
+    );
+    cy.get("head > link[rel='canonical']")
+      .should("have.prop", "href")
+      .and(
+        "equal",
+        "https://www.service-public.fr/particuliers/vosdroits/F2301"
+      );
+
+    cy.contains("a", "Fiche service-public.fr")
+      .should("have.attr", "href")
+      .and(
+        "contain",
+        "https://www.service-public.fr/particuliers/vosdroits/F2301"
+      );
+    cy.get("body").should("contain", "01/11/2024");
+    cy.get("h2").first().should("contain", "Salaire");
+  });
+
+  it("je vois une fiche service public avec un accordéon ouvert", () => {
+    cy.visit("/fiche-service-public/salaire-primes-et-avantages#salaire");
+    cy.get("h2").get('[aria-expanded="true"]').should("contain", "Salaire");
+  });
+});

packages/code-du-travail-frontend/cypress/integration/light/landing-pages.spec.ts

@@ -1,17 +1,4 @@
 describe("Landing pages", () => {
-  it("je vois une page fiche service public", () => {
-    cy.visit("/fiche-service-public/salaire-primes-et-avantages#salaire");
-    cy.get("h1").should("contain", "Salaire, primes et avantages");
-    cy.get("body").should("contain", "Source: Fiche service-public.fr");
-    cy.get("h2").first().should("contain", "Salaire");
-  });
-
-  it("je vois une fiche service public avec un accordéon ouvert", () => {
-    cy.visit("/fiche-service-public/salaire-primes-et-avantages#salaire");
-    cy.get("h1").should("have.text", "Salaire, primes et avantages");
-    cy.get('[aria-expanded="true"]').find("h2").should("contain", "Salaire");
-  });
-
   it("je vois une page convention collective", () => {
     cy.visit(
       "/convention-collective/1686-commerces-et-services-de-laudiovisuel-de-lelectronique-et-de-lequipemen"

packages/code-du-travail-frontend/src/modules/common/ReferencesList.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { ServicePublicReference } from "@socialgouv/cdtn-types";
+import { getRouteBySource, SOURCES } from "@socialgouv/cdtn-utils";
+import { fr } from "@codegouvfr/react-dsfr";
+
+export const ReferenceList = ({
+  references,
+}: {
+  references: ServicePublicReference[];
+}) => {
+  const formattedRefs = references
+    .map((ref) => {
+      switch (ref.type) {
+        case SOURCES.CDT:
+          return (
+            <a
+              key={ref.slug + ref.title}
+              href={`/${getRouteBySource(SOURCES.CDT)}/${ref.slug}`}
+            >{`Article ${ref.title} du Code du travail`}</a>
+          );
+        case SOURCES.CCN:
+          return (
+            <a
+              key={ref.slug + ref.title}
+              href={`/${getRouteBySource(SOURCES.CCN)}/${ref.slug}`}
+            >{`Convention collective: ${ref.title}`}</a>
+          );
+        case SOURCES.EXTERNALS:
+          return (
+            <a
+              key={ref.url + ref.title}
+              href={ref.url}
+              target="_blank"
+              rel="noreferer noopener"
+            >{`Convention collective: ${ref.title}`}</a>
+          );
+      }
+    })
+    .filter((item) => item !== null);
+  return (
+    <ul>
+      {formattedRefs.map((item) => {
+        return (
+          <li key={item.key}>
+            <p className={fr.cx("fr-mb-0")}>{item}</p>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

packages/code-du-travail-frontend/src/modules/common/__tests__/ReferenceList.test.tsx

@@ -0,0 +1,84 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { ReferenceList } from "../ReferencesList";
+import { ServicePublicReference } from "@socialgouv/cdtn-types";
+
+const references = [
+  {
+    slug: "l2323-4",
+    title: "L2323-4",
+    type: "code_du_travail",
+  },
+  {
+    title: "Article yyy du JO",
+    type: "external",
+    url: "https://article.jo/yyy",
+  },
+  {
+    title: "CCN metallurgie",
+    type: "external",
+    url: "https://legifrance/ccn-metallurgie",
+  },
+  {
+    slug: "123-automobile",
+    title: "automobile",
+    type: "conventions_collectives",
+  },
+  {
+    slug: "l1234-3",
+    title: "L1234-3",
+    type: "code_du_travail",
+  },
+];
+
+describe("<ReferenceList />", () => {
+  it("should render", () => {
+    const { container, getByText } = render(
+      <ReferenceList references={references as ServicePublicReference[]} />
+    );
+    expect(getByText("Article L2323-4 du Code du travail").tagName).toEqual(
+      "A"
+    );
+    expect(getByText("Article L2323-4 du Code du travail")).toHaveAttribute(
+      "href",
+      "/code-du-travail/l2323-4"
+    );
+
+    expect(
+      getByText("Convention collective: Article yyy du JO").tagName
+    ).toEqual("A");
+    expect(
+      getByText("Convention collective: Article yyy du JO")
+    ).toHaveAttribute("href", "https://article.jo/yyy");
+    expect(
+      getByText("Convention collective: Article yyy du JO")
+    ).toHaveAttribute("target", "_blank");
+    expect(
+      getByText("Convention collective: Article yyy du JO")
+    ).toHaveAttribute("rel", "noreferer noopener");
+
+    expect(getByText("Convention collective: CCN metallurgie").tagName).toEqual(
+      "A"
+    );
+    expect(getByText("Convention collective: CCN metallurgie")).toHaveAttribute(
+      "href",
+      "https://legifrance/ccn-metallurgie"
+    );
+    expect(getByText("Convention collective: CCN metallurgie")).toHaveAttribute(
+      "target",
+      "_blank"
+    );
+    expect(getByText("Convention collective: CCN metallurgie")).toHaveAttribute(
+      "rel",
+      "noreferer noopener"
+    );
+
+    expect(getByText("Convention collective: automobile").tagName).toEqual("A");
+    expect(getByText("Convention collective: automobile")).toHaveAttribute(
+      "href",
+      "/convention-collective/123-automobile"
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

packages/code-du-travail-frontend/src/modules/common/__tests__/__snapshots__/ReferenceList.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ReferenceList /> should render 1`] = `
+<div>
+  <ul>
+    <li>
+      <p
+        class="fr-mb-0"
+      >
+        <a
+          href="/code-du-travail/l2323-4"
+        >
+          Article L2323-4 du Code du travail
+        </a>
+      </p>
+    </li>
+    <li>
+      <p
+        class="fr-mb-0"
+      >
+        <a
+          href="https://article.jo/yyy"
+          rel="noreferer noopener"
+          target="_blank"
+        >
+          Convention collective: Article yyy du JO
+        </a>
+      </p>
+    </li>
+    <li>
+      <p
+        class="fr-mb-0"
+      >
+        <a
+          href="https://legifrance/ccn-metallurgie"
+          rel="noreferer noopener"
+          target="_blank"
+        >
+          Convention collective: CCN metallurgie
+        </a>
+      </p>
+    </li>
+    <li>
+      <p
+        class="fr-mb-0"
+      >
+        <a
+          href="/convention-collective/123-automobile"
+        >
+          Convention collective: automobile
+        </a>
+      </p>
+    </li>
+    <li>
+      <p
+        class="fr-mb-0"
+      >
+        <a
+          href="/code-du-travail/l1234-3"
+        >
+          Article L1234-3 du Code du travail
+        </a>
+      </p>
+    </li>
+  </ul>
+</div>
+`;