Merge pull request #86 from betagouv/maud/tags_fixes

Tag changes

src/app/(container)/generiques/[CIS]/page.tsx

@@ -1,16 +1,13 @@
 import Badge from "@codegouvfr/react-dsfr/Badge";
 import { getSpecialite } from "@/db/utils";
 import { fr } from "@codegouvfr/react-dsfr";
-import Tag from "@codegouvfr/react-dsfr/Tag";
-import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import Breadcrumb from "@codegouvfr/react-dsfr/Breadcrumb";
 import React, { Fragment } from "react";
 import Link from "next/link";
 
 import { pdbmMySQL } from "@/db/pdbmMySQL";
 import {
   displayCompleteComposants,
-  displaySimpleComposants,
   formatSpecName,
   getSpecialiteGroupName,
   groupGeneNameToDCI,
@@ -19,6 +16,8 @@ import { ATCError, getAtc2, getAtcCode } from "@/data/grist/atc";
 import { notFound } from "next/navigation";
 import liste_CIS_MVP from "@/liste_CIS_MVP.json";
 import GenericAccordion from "@/components/GenericAccordion";
+import ClassTag from "@/components/tags/ClassTag";
+import SubstanceTag from "@/components/tags/SubstanceTag";
 
 export const dynamic = "error";
 export const dynamicParams = true;
@@ -93,28 +92,8 @@ export default async function Page(props: {
           {formatSpecName(groupGeneNameToDCI(group.LibLong))}
         </h1>
         <ul className={fr.cx("fr-tags-group", "fr-mb-1v")}>
-          <Tag
-            small
-            linkProps={{
-              href: `/atc/${atc2.code}`,
-              className: cx("fr-tag--custom-alt-class"),
-            }}
-          >
-            {atc2.label}
-          </Tag>
-          <Tag
-            small
-            linkProps={{
-              href: `/substances/${displaySimpleComposants(composants)
-                .map((s) => s.NomId.trim())
-                .join(",")}`,
-              className: cx("fr-tag--custom-alt-substance"),
-            }}
-          >
-            {displaySimpleComposants(composants)
-              .map((s) => s.NomLib.trim())
-              .join(", ")}
-          </Tag>
+          <ClassTag atc2={atc2} />
+          <SubstanceTag composants={composants} />
         </ul>
         <div className={"fr-mb-1w"}>
           <span

src/app/(container)/medicaments/[CIS]/page.tsx

@@ -3,9 +3,7 @@ import { notFound } from "next/navigation";
 import { Metadata, ResolvingMetadata } from "next";
 import { fr } from "@codegouvfr/react-dsfr";
 import Badge from "@codegouvfr/react-dsfr/Badge";
-import Tag from "@codegouvfr/react-dsfr/Tag";
 import Accordion from "@codegouvfr/react-dsfr/Accordion";
-import { cx } from "@codegouvfr/react-dsfr/tools/cx";
 import fs from "node:fs/promises";
 import path from "node:path";
 import JSZIP from "jszip";
@@ -26,11 +24,16 @@ import { getSpecialite } from "@/db/utils";
 import { PresentationsList } from "@/components/PresentationsList";
 import { pdbmMySQL } from "@/db/pdbmMySQL";
 import liste_CIS_MVP from "@/liste_CIS_MVP.json";
-import type { FrIconClassName } from "@codegouvfr/react-dsfr/src/fr/generatedFromCss/classNames";
 import Alert from "@codegouvfr/react-dsfr/Alert";
 import { getPregnancyAlerts } from "@/data/grist/pregnancy";
 import { getPediatrics } from "@/data/grist/pediatrics";
-import PediatricsTags from "@/components/PediatricsTags";
+import PediatricsTags from "@/components/tags/PediatricsTags";
+import ClassTag from "@/components/tags/ClassTag";
+import SubstanceTag from "@/components/tags/SubstanceTag";
+import PregnancyTag from "@/components/tags/PregnancyTag";
+import PrescriptionTag from "@/components/tags/PrescriptionTag";
+import PrincepsTag from "@/components/tags/PrincepsTag";
+import GenericTag from "@/components/tags/GenericTag";
 
 export const dynamic = "error";
 export const dynamicParams = true;
@@ -289,75 +292,14 @@ export default async function Page(props: {
           <section className={"fr-mb-4w"}>
             <div className={"fr-mb-1w"}>
               <ul className={fr.cx("fr-tags-group", "fr-mb-n1v")}>
-                <Tag
-                  small
-                  linkProps={{
-                    href: `/atc/${atc2.code}`,
-                    className: cx("fr-tag--custom-alt-class"),
-                  }}
-                >
-                  {atc2.label}
-                </Tag>
-                <Tag
-                  small
-                  linkProps={{
-                    href: `/substances/${displaySimpleComposants(composants)
-                      .map((s) => s.NomId.trim())
-                      .join(",")}`,
-                    className: cx("fr-tag--custom-alt-substance"),
-                  }}
-                >
-                  {displaySimpleComposants(composants)
-                    .map((s) => s.NomLib.trim())
-                    .join(", ")}
-                </Tag>
-                {isPrinceps && (
-                  <Tag
-                    small
-                    iconId="fr-icon-capsule-fill"
-                    linkProps={{
-                      className: fr.cx("fr-tag--blue-ecume"),
-                      href: `/generiques/${CIS}`,
-                    }}
-                  >
-                    Princeps
-                  </Tag>
-                )}
-                {specialite.SpecGeneId ? (
-                  <Tag
-                    small
-                    iconId="fr-icon-capsule-fill"
-                    linkProps={{
-                      className: fr.cx("fr-tag--blue-ecume"),
-                      href: `/generiques/${specialite.SpecGeneId}`,
-                    }}
-                  >
-                    Générique
-                  </Tag>
-                ) : null}{" "}
-                {delivrance.length ? (
-                  <Tag
-                    small
-                    iconId="fr-icon-file-text-fill"
-                    nativeButtonProps={{
-                      className: fr.cx("fr-tag--blue-ecume"),
-                    }}
-                  >
-                    Sur ordonnance
-                  </Tag>
-                ) : null}
-                {pregnancyAlert && (
-                  <Tag
-                    small
-                    iconId={"fr-icon--custom-pregnancy" as FrIconClassName}
-                    linkProps={{
-                      href: "#",
-                      className: fr.cx("fr-tag--orange-terre-battue"),
-                    }}
-                  >
-                    Contre-indication grossesse
-                  </Tag>
+                <ClassTag atc2={atc2} />
+                <SubstanceTag composants={composants} />
+                {isPrinceps && <PrincepsTag CIS={CIS} />}
+                {!!specialite.SpecGeneId && (
+                  <GenericTag specGeneId={specialite.SpecGeneId} />
                 )}
+                {!!delivrance.length && <PrescriptionTag />}
+                {pregnancyAlert && <PregnancyTag />}
                 {pediatrics && <PediatricsTags info={pediatrics} />}
               </ul>
             </div>

src/app/layout.tsx

@@ -11,7 +11,6 @@ import { defaultColorScheme } from "@/app/defaultColorScheme";
 import { StartDsfr } from "@/app/StartDsfr";
 
 import "@/customIcons/customIcons.css";
-import "@/components/dsfr-custom-alt.css";
 import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
 import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { StartHotjar } from "@/app/StartHotjar";

src/components/MedGroupSpecList.tsx

@@ -1,15 +1,12 @@
 import { getAtc2, getAtcCode } from "@/data/grist/atc";
 import { fr } from "@codegouvfr/react-dsfr";
-import {
-  displaySimpleComposants,
-  formatSpecName,
-  MedicamentGroup,
-} from "@/displayUtils";
+import { formatSpecName, MedicamentGroup } from "@/displayUtils";
 import { cx } from "@codegouvfr/react-dsfr/tools/cx";
-import Tag from "@codegouvfr/react-dsfr/Tag";
 import Link from "next/link";
 import React from "react";
 import { getSpecialite } from "@/db/utils";
+import ClassTag from "@/components/tags/ClassTag";
+import SubstanceTag from "@/components/tags/SubstanceTag";
 
 export default async function MedGroupSpecList({
   medGroup,
@@ -21,7 +18,7 @@ export default async function MedGroupSpecList({
   const [groupName, specialites] = medGroup;
   const atc = getAtcCode(specialites[0].SpecId);
   const { composants } = await getSpecialite(specialites[0].SpecId);
-  const subClass = await getAtc2(atc);
+  const atc2 = await getAtc2(atc);
   return (
     <li className={className}>
       <div>
@@ -35,28 +32,8 @@ export default async function MedGroupSpecList({
             <i className={cx("fr-icon--custom-pill", fr.cx("fr-icon--sm"))} />
           </div>
           <ul className={fr.cx("fr-tags-group", "fr-mb-n1v")}>
-            <Tag
-              small
-              linkProps={{
-                href: `/atc/${subClass.code}`,
-                className: cx("fr-tag--custom-alt-class"),
-              }}
-            >
-              {subClass.label}
-            </Tag>
-            <Tag
-              small
-              linkProps={{
-                href: `/substances/${displaySimpleComposants(composants)
-                  .map((s) => s.NomId.trim())
-                  .join(",")}`,
-                className: cx("fr-tag--custom-alt-substance"),
-              }}
-            >
-              {displaySimpleComposants(composants)
-                .map((s) => s.NomLib.trim())
-                .join(", ")}
-            </Tag>
+            <ClassTag atc2={atc2} />
+            <SubstanceTag composants={composants} />
           </ul>
         </div>
       </div>

src/components/tags/ClassTag.tsx

@@ -0,0 +1,18 @@
+import Tag from "@codegouvfr/react-dsfr/Tag";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
+import React from "react";
+import { ATC } from "@/data/grist/atc";
+import "./dsfr-custom-tags.css";
+
+export default function ClassTag(props: { atc2: ATC }) {
+  return (
+    <Tag
+      linkProps={{
+        href: `/atc/${props.atc2.code}`,
+        className: cx("fr-tag--custom-alt-class"),
+      }}
+    >
+      {props.atc2.label}
+    </Tag>
+  );
+}

src/components/tags/GenericTag.tsx

@@ -0,0 +1,18 @@
+import Tag from "@codegouvfr/react-dsfr/Tag";
+import React from "react";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
+import "./dsfr-custom-tags.css";
+
+export default function GenericTag(props: { specGeneId: string }) {
+  return (
+    <Tag
+      iconId="fr-icon-capsule-fill"
+      linkProps={{
+        className: cx("fr-tag--custom-alt-blue"),
+        href: `/generiques/${props.specGeneId}`,
+      }}
+    >
+      Générique
+    </Tag>
+  );
+}

src/components/PediatricsTags.tsx → src/components/tags/PediatricsTags.tsx

@@ -1,46 +1,45 @@
 import { PediatricsInfo } from "@/data/grist/pediatrics";
 import Tag from "@codegouvfr/react-dsfr/Tag";
 import React from "react";
-import { fr } from "@codegouvfr/react-dsfr";
 import type { FrIconClassName } from "@codegouvfr/react-dsfr/src/fr/generatedFromCss/classNames";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
+import "./dsfr-custom-tags.css";
 
 export default function PediatricsTags({ info }: { info: PediatricsInfo }) {
   return (
     <>
       {info.indication && (
         <Tag
-          small
           iconId={"fr-icon--custom-bedroom-baby" as FrIconClassName}
           linkProps={{
             href: `#`,
-            className: fr.cx("fr-tag--green-emeraude"),
+            className: cx("fr-tag--custom-alt-pediatrics-indication"),
           }}
         >
           Peut être utilisé chez l&apos;enfant selon l&apos;âge
         </Tag>
       )}
       {info.contraindication && (
         <Tag
-          small
           iconId={"fr-icon--custom-bedroom-baby" as FrIconClassName}
           linkProps={{
             href: `#`,
-            className: fr.cx("fr-tag--orange-terre-battue"),
+            className: cx("fr-tag--custom-alt-contraindication"),
           }}
         >
           Contre-indication chez l&apos;enfant selon l&apos;âge
         </Tag>
       )}
       {info.doctorAdvice && (
         <Tag
-          small
           iconId={"fr-icon--custom-bedroom-baby" as FrIconClassName}
           linkProps={{
             href: `#`,
-            className: fr.cx("fr-tag--yellow-tournesol"),
+            className: cx("fr-tag--custom-alt-pediatrics-advice"),
           }}
         >
-          Utilisation chez l&apos;enfant sur avis médical
+          Utilisation chez l&apos;enfant sur avis d&apos;un professionnel de
+          santé
         </Tag>
       )}
     </>

src/components/tags/PregnancyTag.tsx

@@ -0,0 +1,19 @@
+import Tag from "@codegouvfr/react-dsfr/Tag";
+import type { FrIconClassName } from "@codegouvfr/react-dsfr/src/fr/generatedFromCss/classNames";
+import React from "react";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
+import "./dsfr-custom-tags.css";
+
+export default function PregnancyTag() {
+  return (
+    <Tag
+      iconId={"fr-icon--custom-pregnancy" as FrIconClassName}
+      linkProps={{
+        href: "#",
+        className: cx("fr-tag--custom-alt-contraindication"),
+      }}
+    >
+      Contre-indication grossesse
+    </Tag>
+  );
+}

src/components/tags/PrescriptionTag.tsx

@@ -0,0 +1,17 @@
+import Tag from "@codegouvfr/react-dsfr/Tag";
+import React from "react";
+import { cx } from "@codegouvfr/react-dsfr/tools/cx";
+import "./dsfr-custom-tags.css";
+
+export default function PrescriptionTag() {
+  return (
+    <Tag
+      iconId="fr-icon-file-text-fill"
+      nativeButtonProps={{
+        className: cx("fr-tag--custom-alt-blue"),
+      }}
+    >
+      Sur ordonnance
+    </Tag>
+  );
+}