remove text when no CDT

SocialGouv · Jan 28, 2025 · 9a1cc4e · 9a1cc4e
1 parent 58d2616
commit 9a1cc4e
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 163 deletions.
diff --git a/packages/code-du-travail-frontend/src/modules/contributions/ContributionAgreemeentSelect.tsx b/packages/code-du-travail-frontend/src/modules/contributions/ContributionAgreemeentSelect.tsx
@@ -16,36 +16,32 @@ export function ContributionAgreementSelect({ contribution }: Props) {
   const { slug } = contribution;
 
   return (
-    <>
-      <div className={`${fr.cx("fr-p-2w", "fr-p-md-3w", "fr-mt-6w")} ${block}`}>
-        <p className={fr.cx("fr-h3", "fr-mt-1w")}>
-          Votre convention collective
-        </p>
-        <Card
-          title={`${contribution.ccnShortTitle} (IDCC ${contribution.idcc})`}
-          size="small"
-          titleAs="h2"
-          className={fr.cx("fr-mt-2w")}
-          classes={{
-            content: fr.cx("fr-p-2w"),
-            title: cardTitle,
-            start: fr.cx("fr-m-0"),
-            end: fr.cx("fr-p-0", "fr-m-0"),
-          }}
-        />
-        <Button
-          className={fr.cx("fr-mt-2w")}
-          linkProps={{
-            href: `/contribution/${removeCCNumberFromSlug(slug)}`,
-          }}
-          priority="secondary"
-          iconId="fr-icon-arrow-go-back-line"
-          iconPosition="right"
-        >
-          Modifier
-        </Button>
-      </div>
-    </>
+    <div className={`${fr.cx("fr-p-2w", "fr-p-md-3w", "fr-mt-6w")} ${block}`}>
+      <p className={fr.cx("fr-h3", "fr-mt-1w")}>Votre convention collective</p>
+      <Card
+        title={`${contribution.ccnShortTitle} (IDCC ${contribution.idcc})`}
+        size="small"
+        titleAs="h2"
+        className={fr.cx("fr-mt-2w")}
+        classes={{
+          content: fr.cx("fr-p-2w"),
+          title: cardTitle,
+          start: fr.cx("fr-m-0"),
+          end: fr.cx("fr-p-0", "fr-m-0"),
+        }}
+      />
+      <Button
+        className={fr.cx("fr-mt-2w")}
+        linkProps={{
+          href: `/contribution/${removeCCNumberFromSlug(slug)}`,
+        }}
+        priority="secondary"
+        iconId="fr-icon-arrow-go-back-line"
+        iconPosition="right"
+      >
+        Modifier
+      </Button>
+    </div>
   );
 }
 
@@ -54,5 +50,5 @@ const cardTitle = css({
 });
 
 const block = css({
-  background: "var(--background-alt-blue-cumulus) !important",
+  background: "var(--background-alt-blue-cumulus)!",
 });
diff --git a/packages/code-du-travail-frontend/src/modules/contributions/ContributionAgreementContent.tsx b/packages/code-du-travail-frontend/src/modules/contributions/ContributionAgreementContent.tsx
@@ -25,54 +25,47 @@ export function ContributionAgreementContent({
 }: Props) {
   const { title, metas } = contribution;
   return (
-    <>
-      <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-my-6w")}>
-        <div
-          className={fr.cx(
-            "fr-col-12",
-            "fr-col-md-8",
-            "fr-mb-6w",
-            "fr-mb-md-0"
-          )}
-        >
-          <ContributionContent contribution={contribution} titleLevel={3} />
-          {contribution.references.length > 0 && (
-            <Accordion label="Références" className={fr.cx("fr-mt-6w")}>
-              <ListWithArrow
-                items={contribution.references.map(({ title, url }) => {
-                  if (!url) return <></>;
-                  return (
-                    <Link key={title} href={url} target="_blank">
-                      {title}
-                    </Link>
-                  );
-                })}
-              />
-            </Accordion>
-          )}
-          <p className={fr.cx("fr-my-2w")}>
-            Consultez les questions-réponses fréquentes pour la convention
-            collective{" "}
-            <Link href={`/convention-collective/${contribution.ccnSlug}`}>
-              {contribution.ccnShortTitle}
-            </Link>
-          </p>
-          {contribution.messageBlock && (
-            <div className={fr.cx("fr-alert", "fr-alert--info", "fr-my-6w")}>
-              <>
-                <div className={fr.cx("fr-h5")}>Attention</div>
-                <Html>{contribution.messageBlock}</Html>
-              </>
-            </div>
-          )}
-        </div>
-        <div className={fr.cx("fr-col-12", "fr-col-md-4")}>
-          {relatedItems && relatedItems[0].items.length > 0 && (
-            <RelatedItems relatedItems={relatedItems} />
-          )}
-          <Share title={title} metaDescription={metas.description} />
-        </div>
+    <div className={fr.cx("fr-grid-row", "fr-grid-row--gutters", "fr-my-6w")}>
+      <div
+        className={fr.cx("fr-col-12", "fr-col-md-8", "fr-mb-6w", "fr-mb-md-0")}
+      >
+        <ContributionContent contribution={contribution} titleLevel={3} />
+        {contribution.references.length > 0 && (
+          <Accordion label="Références" className={fr.cx("fr-mt-6w")}>
+            <ListWithArrow
+              items={contribution.references.map(({ title, url }) => {
+                if (!url) return <></>;
+                return (
+                  <Link key={title} href={url} target="_blank">
+                    {title}
+                  </Link>
+                );
+              })}
+            />
+          </Accordion>
+        )}
+        <p className={fr.cx("fr-my-2w")}>
+          Consultez les questions-réponses fréquentes pour la convention
+          collective{" "}
+          <Link href={`/convention-collective/${contribution.ccnSlug}`}>
+            {contribution.ccnShortTitle}
+          </Link>
+        </p>
+        {contribution.messageBlock && (
+          <div className={fr.cx("fr-alert", "fr-alert--info", "fr-my-6w")}>
+            <>
+              <div className={fr.cx("fr-h5")}>Attention</div>
+              <Html>{contribution.messageBlock}</Html>
+            </>
+          </div>
+        )}
       </div>
-    </>
+      <div className={fr.cx("fr-col-12", "fr-col-md-4")}>
+        {relatedItems && relatedItems[0].items.length > 0 && (
+          <RelatedItems relatedItems={relatedItems} />
+        )}
+        <Share title={title} metaDescription={metas.description} />
+      </div>
+    </div>
   );
 }
diff --git a/...code-du-travail-frontend/src/modules/contributions/ContributionGenericAgreementSearch.tsx b/...code-du-travail-frontend/src/modules/contributions/ContributionGenericAgreementSearch.tsx
@@ -9,9 +9,9 @@ import AgreementSearch from "../convention-collective/AgreementSearch.svg";
 import { AgreementSearchForm } from "../convention-collective/AgreementSearch/AgreementSearchForm";
 import { EnterpriseAgreement } from "../enterprise";
 import {
-  isAgreementValid,
   isAgreementSupported,
   isAgreementUnextended,
+  isAgreementValid,
 } from "./contributionUtils";
 import { Contribution } from "./type";
 import Link from "../common/Link";
@@ -80,56 +80,47 @@ export function ContributionGenericAgreementSearch({
       return <>Vous pouvez consulter les informations générales ci-dessous.</>;
   };
   return (
-    <>
-      <div className={`${fr.cx("fr-p-3w", "fr-mt-6w")} ${block}`}>
-        <div className={fr.cx("fr-grid-row")}>
-          <Image
-            priority
-            src={AgreementSearch}
-            alt="Personnalisez la réponse avec votre convention collective"
-            className={fr.cx("fr-unhidden-md", "fr-hidden")}
-          />
-          <p className={fr.cx("fr-h3", "fr-mt-1w")}>
-            Personnalisez la réponse avec votre convention collective
-          </p>
-        </div>
-        <div>
-          <AgreementSearchForm
-            onAgreementSelect={(agreement, mode) => {
-              onAgreementSelect(agreement, mode);
-              setSelectedAgreement(
-                isAgreementValid(contribution, agreement)
-                  ? agreement
-                  : undefined
-              );
+    <div className={`${fr.cx("fr-p-3w", "fr-mt-6w")} ${block}`}>
+      <div className={fr.cx("fr-grid-row")}>
+        <Image
+          priority
+          src={AgreementSearch}
+          alt="Personnalisez la réponse avec votre convention collective"
+          className={fr.cx("fr-unhidden-md", "fr-hidden")}
+        />
+        <p className={fr.cx("fr-h3", "fr-mt-1w")}>
+          Personnalisez la réponse avec votre convention collective
+        </p>
+      </div>
+      <div>
+        <AgreementSearchForm
+          onAgreementSelect={(agreement, mode) => {
+            onAgreementSelect(agreement, mode);
+            setSelectedAgreement(
+              isAgreementValid(contribution, agreement) ? agreement : undefined
+            );
+          }}
+          selectedAgreementAlert={selectedAgreementAlert}
+          defaultAgreement={defaultAgreement}
+        />
+        {((contribution.isNoCDT && isValid) || !contribution.isNoCDT) && (
+          <Button
+            className={fr.cx("fr-mt-2w")}
+            linkProps={{
+              href: isValid
+                ? `/contribution/${(selectedAgreement ?? defaultAgreement)?.num}-${slug}`
+                : "",
+              onClick: onDisplayClick,
             }}
-            selectedAgreementAlert={selectedAgreementAlert}
-            description={
-              isNoCDT
-                ? "La convention collective est nécessaire pour obtenir une réponse car le code du travail ne prévoit rien sur ce sujet."
-                : "La réponse dépend de la convention collective à laquelle votre entreprise est rattachée. Veuillez renseigner votre situation afin d’obtenir une réponse adaptée."
-            }
-            defaultAgreement={defaultAgreement}
-          />
-          {((contribution.isNoCDT && isValid) || !contribution.isNoCDT) && (
-            <Button
-              className={fr.cx("fr-mt-2w")}
-              linkProps={{
-                href: isValid
-                  ? `/contribution/${(selectedAgreement ?? defaultAgreement)?.num}-${slug}`
-                  : "",
-                onClick: onDisplayClick,
-              }}
-            >
-              Afficher les informations
-            </Button>
-          )}
-        </div>
+          >
+            Afficher les informations
+          </Button>
+        )}
       </div>
-    </>
+    </div>
   );
 }
 
 const block = css({
-  background: "var(--background-alt-blue-cumulus) !important",
+  background: "var(--background-alt-blue-cumulus)!",
 });
diff --git a/packages/code-du-travail-frontend/src/modules/contributions/ContributionGenericContent.tsx b/packages/code-du-travail-frontend/src/modules/contributions/ContributionGenericContent.tsx
@@ -67,48 +67,45 @@ export function ContributionGenericContent({
             "fr-col-md-8",
             "fr-mb-md-0",
             "fr-mt-6w",
-            displayContent ? "fr-unhidden" : "fr-hidden"
+            !displayContent && "fr-hidden"
           )}
+          id="cdt"
         >
-          <div id="cdt">
-            <p className={fr.cx("fr-h5")} ref={titleRef}>
-              Que dit le code du travail&nbsp;?
-            </p>
-            {alertText}
-            <ContributionContent contribution={contribution} titleLevel={2} />
-            {contribution.references.length && (
-              <Accordion label="Références" className={fr.cx("fr-mt-6w")}>
-                <ListWithArrow
-                  items={contribution.references.map(({ title, url }) => {
-                    return (
-                      <Link key={title} href={url} target="_blank">
-                        {title}
-                      </Link>
-                    );
-                  })}
-                />
-              </Accordion>
-            )}
-            {contribution.messageBlock && (
-              <div className={fr.cx("fr-alert", "fr-alert--info", "fr-mt-6w")}>
-                <div className={fr.cx("fr-h5")}>Attention</div>
-                <Html>{contribution.messageBlock}</Html>
-              </div>
-            )}
-          </div>
+          <p className={fr.cx("fr-h5")} ref={titleRef}>
+            Que dit le code du travail&nbsp;?
+          </p>
+          {alertText}
+          <ContributionContent contribution={contribution} titleLevel={2} />
+          {contribution.references.length && (
+            <Accordion label="Références" className={fr.cx("fr-mt-6w")}>
+              <ListWithArrow
+                items={contribution.references.map(({ title, url }) => {
+                  return (
+                    <Link key={title} href={url} target="_blank">
+                      {title}
+                    </Link>
+                  );
+                })}
+              />
+            </Accordion>
+          )}
+          {contribution.messageBlock && (
+            <div className={fr.cx("fr-alert", "fr-alert--info", "fr-mt-6w")}>
+              <div className={fr.cx("fr-h5")}>Attention</div>
+              <Html>{contribution.messageBlock}</Html>
+            </div>
+          )}
         </div>
         <div
           className={fr.cx(
             "fr-col-12",
             "fr-col-md-4",
             "fr-mt-6w",
-            displayContent ? "fr-unhidden" : "fr-hidden"
+            !displayContent && "fr-hidden"
           )}
         >
-          <div>
-            <RelatedItems relatedItems={relatedItems} />
-            <Share title={title} metaDescription={metas.description} />
-          </div>
+          <RelatedItems relatedItems={relatedItems} />
+          <Share title={title} metaDescription={metas.description} />
         </div>
       </div>
     </>

diff --git a/...ravail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchForm.tsx b/...ravail-frontend/src/modules/convention-collective/AgreementSearch/AgreementSearchForm.tsx
@@ -1,16 +1,13 @@
 "use client";
-import { fr } from "@codegouvfr/react-dsfr";
 import { RadioButtons } from "@codegouvfr/react-dsfr/RadioButtons";
 import { ReactNode, useState } from "react";
 import { AgreementSearchInput } from "./AgreementSearchInput";
 import {
   EnterpriseAgreement,
   EnterpriseAgreementSearchInput,
 } from "../../enterprise";
-import { useLocalStorageForAgreement } from "../../common/useLocalStorage";
 
 type Props = {
-  description?: string;
   onAgreementSelect?: (agreement?: EnterpriseAgreement, mode?: string) => void;
   selectedAgreementAlert?: (
     agreement?: EnterpriseAgreement
@@ -19,7 +16,6 @@ type Props = {
 };
 
 export const AgreementSearchForm = ({
-  description,
   onAgreementSelect,
   selectedAgreementAlert,
   defaultAgreement,
@@ -30,7 +26,6 @@ export const AgreementSearchForm = ({
 
   return (
     <>
-      {description && <p className={`${fr.cx("fr-mt-2w")}`}>{description}</p>}
       <RadioButtons
         legend="Quel est le nom de la convention collective applicable ?"
         options={[