fix: widget dsfr (#6341)

* fix: widget dsfr

* fix: widget logo

* chore: clean

* fix: reduce description width

* chore: fix paddings

* chore: modify test e2e

---------

Co-authored-by: victor <[email protected]>

Author: Viczei

packages/code-du-travail-frontend/cypress/integration/heavy/widgets/trouver-sa-cc.spec.ts

@@ -9,31 +9,20 @@ describe("Widget - Trouver sa convention collective", () => {
     cy.iframe()
       .contains("Trouver sa convention collective")
       .should("be.visible");
-    cy.iframe().find("#enterprise-search").as("entreprise-search");
-    cy.get("@entreprise-search").type("carrefour");
-    cy.iframe().find("button[type=submit]").as("button-submit");
-    cy.get("@button-submit").click();
-    cy.iframe().contains("CARREFOUR HYPERMARCHES").as("entreprise");
-    cy.get("@entreprise").click();
-    cy.iframe().contains("Conventions collectives").as("cc");
-    cy.get("@cc").click();
-  });
-
-  it("should display the widget", () => {
-    cy.visit(
-      "https://socialgouv.github.io/cdtn-admin/trouver-sa-convention-collective-sans-redirection"
-    );
-
     cy.iframe()
-      .contains("Trouver sa convention collective")
-      .should("be.visible");
-    cy.iframe().find("#enterprise-search").as("entreprise-search");
+      // @ts-ignore
+      .findByLabel("Nom de votre entreprise ou numéro Siren/Siret")
+      .as("entreprise-search");
     cy.get("@entreprise-search").type("carrefour");
     cy.iframe().find("button[type=submit]").as("button-submit");
     cy.get("@button-submit").click();
     cy.iframe().contains("CARREFOUR HYPERMARCHES").as("entreprise");
     cy.get("@entreprise").click();
-    cy.iframe().contains("Conventions collectives").as("cc");
+    cy.iframe()
+      .contains(
+        "Commerce de détail et de gros à prédominance alimentaire IDCC 2216"
+      )
+      .as("cc");
     cy.get("@cc").click();
   });
 });

packages/code-du-travail-frontend/cypress/integration/light/widgets/trouver-sa-cc.spec.ts

@@ -2,5 +2,6 @@ describe("Outil - Trouver sa convention collective", () => {
   it("Recherche de convention collective je la saisis", () => {
     cy.visit("/widgets/convention-collective");
     cy.checkNoIndex(true);
+    cy.checkCanonical("/outils/convention-collective");
   });
 });

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

@@ -0,0 +1,30 @@
+"use client";
+import { fr } from "@codegouvfr/react-dsfr";
+import { css } from "@styled-system/css";
+import Link from "next/link";
+
+export const LogoLink = () => {
+  return (
+    <>
+      <Link
+        title="Code du travail numérique, Ministère du Travail"
+        href="/"
+        target="_blank"
+        className={noTarget}
+      >
+        <img
+          className={fr.cx("fr-responsive-img")}
+          src="/static/assets/img/logo.svg"
+          alt="Code du travail numérique"
+          data-fr-js-ratio="true"
+        />
+      </Link>
+    </>
+  );
+};
+
+const noTarget = css({
+  _after: {
+    display: "none !important",
+  },
+});

packages/code-du-travail-frontend/src/modules/enterprise/EnterpriseAgreementSearch/EnterpriseAgreementSelection.tsx

@@ -99,7 +99,7 @@ export const EnterpriseAgreementSelection = ({
             classes={{
               title: `${fr.cx("fr-h5")} ${CardTitleStyle} ${disabled ? disabledTitle : ""}`,
               content: `${fr.cx("fr-px-2w", "fr-pt-1w", "fr-pb-7v")} ${disabled ? disabledContent : ""}`,
-              desc: fr.cx("fr-mt-1w", "fr-mr-6w"),
+              desc: fr.cx("fr-mt-1w", "fr-mr-8w"),
               end: fr.cx("fr-hidden"),
               root: `${disabled ? disabledRoot : ""}`,
             }}

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

@@ -0,0 +1,45 @@
+"use client";
+import { ReactNode, useEffect } from "react";
+import { fr } from "@codegouvfr/react-dsfr";
+import { useIframeResizer } from "../../../src/common/hooks";
+import Link from "next/link";
+import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
+import { LogoLink } from "../common/LogoLink";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const ContainerWidget = ({ children }: Props) => {
+  const { setIsDark } = useIsDark();
+
+  useEffect(() => {
+    setIsDark(false);
+  }, []);
+
+  useIframeResizer();
+  return (
+    <>
+      <meta name="robots" content="noindex,nofollow" />
+      {children}
+      <div
+        className={fr.cx(
+          "fr-grid-row",
+          "fr-grid-row--middle",
+          "fr-grid-row--gutters",
+          "fr-mx-md-3w",
+          "fr-mx-1w"
+        )}
+      >
+        <div className={fr.cx("fr-col-md-10", "fr-col-sm-8", "fr-col-6")}>
+          <Link href="/politique-confidentialite" target="_blank">
+            Politique de confidentialité
+          </Link>
+        </div>
+        <div className={fr.cx("fr-col-md-2", "fr-col-sm-4", "fr-col-6")}>
+          <LogoLink />
+        </div>
+      </div>
+    </>
+  );
+};

packages/code-du-travail-frontend/src/modules/outils/convention-collective/FindAgreementBlock.tsx

@@ -19,7 +19,7 @@ export const FindAgreementBlock = ({
   return (
     <div
       id="convention-collective"
-      className={`${fr.cx("fr-px-3w", "fr-pt-4w", "fr-pb-11v")} ${noBackground ? "" : block}`}
+      className={`${fr.cx("fr-px-md-3w", "fr-px-1w", "fr-pt-4w", "fr-pb-11v")} ${noBackground ? "" : block}`}
     >
       <div className={"fr-grid-row"}>
         <Image

packages/code-du-travail-frontend/src/modules/outils/convention-collective/FindAgreementWidgetLayout.tsx

@@ -1,18 +1,18 @@
 "use client";
 import { ReactNode } from "react";
 import { FindAgreementBlock } from "./FindAgreementBlock";
-import { useIframeResizer } from "../../../../src/common/hooks";
+import { ContainerWidget } from "src/modules/layout/ContainerWidget";
 
 type Props = {
   children: ReactNode;
 };
 
 export const FindAgreementWidgetLayout = ({ children }: Props) => {
-  useIframeResizer();
   return (
     <>
-      <meta name="robots" content="noindex,nofollow" />
-      <FindAgreementBlock noBackground>{children}</FindAgreementBlock>
+      <ContainerWidget>
+        <FindAgreementBlock noBackground>{children}</FindAgreementBlock>
+      </ContainerWidget>
     </>
   );
 };

packages/code-du-travail-frontend/src/modules/widgets/WidgetWithIframeResizer.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { fr } from "@codegouvfr/react-dsfr";
+import { css } from "@styled-system/css";
 import { useIframeResizer } from "../../common/hooks";
-import Link from "next/link";
 import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
 import { useEffect } from "react";
+import { LogoLink } from "../common/LogoLink";
 
 export function WidgetWithIframeResizer({
   children,
@@ -35,17 +36,7 @@ export function WidgetWithIframeResizer({
         </div>
 
         <div className={fr.cx("fr-col-4", "fr-col-offset-md-1", "fr-col-md-2")}>
-          <Link
-            title="Code du travail numérique, Ministère du Travail"
-            href="/"
-          >
-            <img
-              className="fr-responsive-img"
-              src="/static/assets/img/logo.svg"
-              alt="Code du travail numérique"
-              data-fr-js-ratio="true"
-            />
-          </Link>
+          <LogoLink />
         </div>
         <div className={fr.cx("fr-col-12", "fr-col-md-9")}>{children}</div>
       </div>