diff --git a/src/app/(container)/generiques/[CIS]/page.tsx b/src/app/(container)/generiques/[CIS]/page.tsx index 5ce90e3..e2db70e 100644 --- a/src/app/(container)/generiques/[CIS]/page.tsx +++ b/src/app/(container)/generiques/[CIS]/page.tsx @@ -1,8 +1,6 @@ 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"; @@ -10,7 +8,6 @@ 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))}
    - - {atc2.label} - - s.NomId.trim()) - .join(",")}`, - className: cx("fr-tag--custom-alt-substance"), - }} - > - {displaySimpleComposants(composants) - .map((s) => s.NomLib.trim()) - .join(", ")} - - {isPrinceps && ( - - Princeps - - )} - {specialite.SpecGeneId ? ( - - Générique - - ) : null}{" "} - {delivrance.length ? ( - - Sur ordonnance - - ) : null} - {pregnancyAlert && ( - - Contre-indication grossesse - + + + {isPrinceps && } + {!!specialite.SpecGeneId && ( + )} + {!!delivrance.length && } + {pregnancyAlert && } {pediatrics && }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 57f6ea3..af7e937 100644 --- a/src/app/layout.tsx +++ b/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"; diff --git a/src/components/MedGroupSpecList.tsx b/src/components/MedGroupSpecList.tsx index 779602e..7b52957 100644 --- a/src/components/MedGroupSpecList.tsx +++ b/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 (
  • @@ -35,28 +32,8 @@ export default async function MedGroupSpecList({
      - - {subClass.label} - - s.NomId.trim()) - .join(",")}`, - className: cx("fr-tag--custom-alt-substance"), - }} - > - {displaySimpleComposants(composants) - .map((s) => s.NomLib.trim()) - .join(", ")} - + +
    • diff --git a/src/components/dsfr-custom-alt.css b/src/components/dsfr-custom-alt.css deleted file mode 100644 index 9e35c78..0000000 --- a/src/components/dsfr-custom-alt.css +++ /dev/null @@ -1,23 +0,0 @@ -: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 diff --git a/src/components/tags/ClassTag.tsx b/src/components/tags/ClassTag.tsx new file mode 100644 index 0000000..968ef7b --- /dev/null +++ b/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 ( + + {props.atc2.label} + + ); +} diff --git a/src/components/tags/GenericTag.tsx b/src/components/tags/GenericTag.tsx new file mode 100644 index 0000000..2e33b22 --- /dev/null +++ b/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 ( + + Générique + + ); +} diff --git a/src/components/PediatricsTags.tsx b/src/components/tags/PediatricsTags.tsx similarity index 73% rename from src/components/PediatricsTags.tsx rename to src/components/tags/PediatricsTags.tsx index 3c6503a..158b7c5 100644 --- a/src/components/PediatricsTags.tsx +++ b/src/components/tags/PediatricsTags.tsx @@ -1,19 +1,19 @@ 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 && ( Peut être utilisé chez l'enfant selon l'âge @@ -21,11 +21,10 @@ export default function PediatricsTags({ info }: { info: PediatricsInfo }) { )} {info.contraindication && ( Contre-indication chez l'enfant selon l'âge @@ -33,14 +32,14 @@ export default function PediatricsTags({ info }: { info: PediatricsInfo }) { )} {info.doctorAdvice && ( - Utilisation chez l'enfant sur avis médical + Utilisation chez l'enfant sur avis d'un professionnel de + santé )} diff --git a/src/components/tags/PregnancyTag.tsx b/src/components/tags/PregnancyTag.tsx new file mode 100644 index 0000000..7f5b0b0 --- /dev/null +++ b/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 ( + + Contre-indication grossesse + + ); +} diff --git a/src/components/tags/PrescriptionTag.tsx b/src/components/tags/PrescriptionTag.tsx new file mode 100644 index 0000000..476d942 --- /dev/null +++ b/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 ( + + Sur ordonnance + + ); +} diff --git a/src/components/tags/PrincepsTag.tsx b/src/components/tags/PrincepsTag.tsx new file mode 100644 index 0000000..f5c65f3 --- /dev/null +++ b/src/components/tags/PrincepsTag.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 PrincepsTag(props: { CIS: string }) { + return ( + + Princeps + + ); +} diff --git a/src/components/tags/SubstanceTag.tsx b/src/components/tags/SubstanceTag.tsx new file mode 100644 index 0000000..145c944 --- /dev/null +++ b/src/components/tags/SubstanceTag.tsx @@ -0,0 +1,25 @@ +import { SpecComposant, SubstanceNom } from "@/db/pdbmMySQL/types"; +import Tag from "@codegouvfr/react-dsfr/Tag"; +import { displaySimpleComposants } from "@/displayUtils"; +import { cx } from "@codegouvfr/react-dsfr/tools/cx"; +import React from "react"; +import "./dsfr-custom-tags.css"; + +export default function SubstanceTag(props: { + composants: Array; +}) { + return ( + s.NomId.trim()) + .join(",")}`, + className: cx("fr-tag--custom-alt-substance"), + }} + > + {displaySimpleComposants(props.composants) + .map((s) => s.NomLib.trim()) + .join(", ")} + + ); +} diff --git a/src/components/tags/dsfr-custom-tags.css b/src/components/tags/dsfr-custom-tags.css new file mode 100644 index 0000000..b538a90 --- /dev/null +++ b/src/components/tags/dsfr-custom-tags.css @@ -0,0 +1,53 @@ +: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-blue, button.fr-tag--custom-alt-blue { + color: var(--text-default-grey); + background-color: var(--blue-ecume-950-100); + --hover: var(--blue-ecume-950-100-hover); + --active: var(--blue-ecume-950-100-active); +} + +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); +} + +a.fr-tag--custom-alt-contraindication, button.fr-tag--custom-alt-contraindication { + color: var(--text-default-grey); + background-color: var(--orange-terre-battue-925-125); + --hover: var(--orange-terre-battue-925-125-hover); + --active: var(--orange-terre-battue-925-125-active); +} + +a.fr-tag--custom-alt-pediatrics-indication, button.fr-tag--custom-alt-pediatrics-indication { + color: var(--text-default-grey); + background-color: var(--green-emeraude-950-100); + --hover: var(--green-emeraude-950-100-hover); + --active: var(--green-emeraude-950-100-active); +} + + +a.fr-tag--custom-alt-pediatrics-advice, button.fr-tag--custom-alt-pediatrics-advice { + color: var(--text-default-grey); + background-color: var(--yellow-tournesol-950-100); + --hover: var(--yellow-tournesol-950-100-hover); + --active: var(--yellow-tournesol-950-100-active); +} \ No newline at end of file