From 378974a77ea885e243277789197d8c37cd0deec2 Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Tue, 22 Oct 2024 16:09:07 +0200
Subject: [PATCH] feat: update leaflet page

Signed-off-by: Maud Royer <hello@maudroyer.fr>
---
 src/app/(container)/medicament/[CIS]/page.tsx | 76 +++++++++++++------
 src/app/layout.tsx                            |  1 +
 src/components/MedGroupSpecList.tsx           |  4 +-
 src/components/dsfr-custom-alt.css            | 23 ++++++
 4 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 src/components/dsfr-custom-alt.css

diff --git a/src/app/(container)/medicament/[CIS]/page.tsx b/src/app/(container)/medicament/[CIS]/page.tsx
index d2afeaf..5c069b9 100644
--- 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";
@@ -311,16 +312,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,
@@ -338,28 +340,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
index 19c7587..2016ffb 100644
--- 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";
 
diff --git a/src/components/MedGroupSpecList.tsx b/src/components/MedGroupSpecList.tsx
index 714f4e0..79e7220 100644
--- 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
new file mode 100644
index 0000000..9e35c78
--- /dev/null
+++ 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);
+}
\ No newline at end of file