Merge pull request #22 from betagouv/maud/specialite_2

Update leaflet page tags
betagouv · Oct 31, 2024 · 1ce92d2 · 1ce92d2
2 parents d94ec87 + 378974a
commit 1ce92d2
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 27 deletions.
diff --git a/src/app/(container)/medicament/[CIS]/page.tsx b/src/app/(container)/medicament/[CIS]/page.tsx
@@ -4,6 +4,7 @@ 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";
@@ -313,16 +314,17 @@ export default async function Page({
     await getSpecialite(CIS);
   const leaflet = await getLeaflet(CIS);
   const atc = getAtc(CIS);
-  const atcBreadcrumbs = atc ? await getAtcLabels(atc) : null;
+  const atcLabels = atc ? await getAtcLabels(atc) : null;
+  const [, subClass, substance] = atcLabels ? atcLabels : [null, null, null];
 
   return (
     <>
-      {atcBreadcrumbs && (
+      {atcLabels && (
         <Breadcrumb
           segments={[
             { label: "Accueil", linkProps: { href: "/" } },
             ...[
-              ...atcBreadcrumbs,
+              ...atcLabels,
               formatSpecName(getSpecialiteGroupName(specialite)),
             ].map((label) => ({
               label,
@@ -340,28 +342,52 @@ export default async function Page({
       </h1>
       <section className={"fr-mb-4w"}>
         <div className={"fr-mb-1w"}>
-          {specialite.SpecGeneId ? (
-            <Tag
-              small
-              iconId="fr-icon-capsule-fill"
-              nativeButtonProps={{
-                className: fr.cx("fr-tag--green-emeraude"),
-              }}
-            >
-              Générique
-            </Tag>
-          ) : null}{" "}
-          {delivrance.length ? (
-            <Tag
-              small
-              iconId="fr-icon-file-text-fill"
-              nativeButtonProps={{
-                className: fr.cx("fr-tag--green-archipel"),
-              }}
-            >
-              Sur ordonnance
-            </Tag>
-          ) : null}
+          <ul className={fr.cx("fr-tags-group", "fr-mb-n1v")}>
+            {subClass && (
+              <Tag
+                small
+                linkProps={{
+                  href: `/rechercher?s=${subClass}`,
+                  className: cx("fr-tag--custom-alt-class"),
+                }}
+              >
+                {subClass}
+              </Tag>
+            )}
+            {substance && (
+              <Tag
+                small
+                linkProps={{
+                  href: `/rechercher?s=${substance}`,
+                  className: cx("fr-tag--custom-alt-substance"),
+                }}
+              >
+                {substance}
+              </Tag>
+            )}
+            {specialite.SpecGeneId ? (
+              <Tag
+                small
+                iconId="fr-icon-capsule-fill"
+                nativeButtonProps={{
+                  className: fr.cx("fr-tag--blue-ecume"),
+                }}
+              >
+                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}
+          </ul>
         </div>
         <div className={"fr-mb-1w"}>
           <span

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,6 +11,7 @@ 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";

diff --git a/src/components/MedGroupSpecList.tsx b/src/components/MedGroupSpecList.tsx
@@ -46,7 +46,7 @@ export default async function MedGroupSpecList({
               <Tag
                 small
                 nativeButtonProps={{
-                  className: fr.cx("fr-tag--yellow-tournesol"),
+                  className: cx("fr-tag--custom-alt-class"),
                 }}
               >
                 {subClass}
@@ -56,7 +56,7 @@ export default async function MedGroupSpecList({
               <Tag
                 small
                 nativeButtonProps={{
-                  className: fr.cx("fr-tag--purple-glycine"),
+                  className: cx("fr-tag--custom-alt-substance"),
                 }}
               >
                 {substance}

diff --git a/src/components/dsfr-custom-alt.css b/src/components/dsfr-custom-alt.css
@@ -0,0 +1,23 @@
+:root {
+    --purple-glycine-850-200-hover: #f983f1; /* This is in DSFR documentation but not in CSS */
+    --purple-glycine-850-200-active: #f767ef; /* This is in DSFR documentation but not in CSS */
+}
+
+:root[data-fr-theme=dark] {
+    --purple-glycine-850-200-hover: #855080; /* This is in DSFR documentation but not in CSS */
+    --purple-glycine-850-200-active: #a1629c; /* This is in DSFR documentation but not in CSS */
+}
+
+a.fr-tag--custom-alt-class, button.fr-tag--custom-alt-class {
+    color: var(--text-default-grey);
+    background-color: var(--purple-glycine-850-200);
+    --hover: var(--purple-glycine-850-200-hover);
+    --active: var(--purple-glycine-850-200-active);
+}
+
+a.fr-tag--custom-alt-substance, button.fr-tag--custom-alt-substance {
+    color: var(--text-default-grey);
+    background-color: var(--purple-glycine-950-100);
+    --hover: var(--purple-glycine-950-100-hover);
+    --active: var(--purple-glycine-950-100-active);
+}