fix(links): change link color when clicked

dataesr · Jun 20, 2024 · a96c141 · a96c141
1 parent fe9e67c
commit a96c141
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/pages/api-operation-page/link-publications/external-links.tsx b/src/pages/api-operation-page/link-publications/external-links.tsx
@@ -1,22 +1,31 @@
 import { Link } from "@dataesr/dsfr-plus";
+import { useState } from "react";
 
 export const ExternalLinks = ({ productionId, name }) => {
   const formattedProductionId = productionId.replace(/\//g, "%2f");
+  const [google, setGoogleClicked] = useState(false);
+  const [scanRClicked, setScanRClicked] = useState(false);
   return (
     <>
       <Link
-        className="fr-ml-5w fr-mr-5w"
+        className={`fr-ml-5w fr-mr-5w fr-footer__content-link ${
+          scanRClicked ? "clicked-link" : ""
+        }`}
         target="_blank"
         rel="noreferrer noopener external"
         href={`https://scanr.enseignementsup-recherche.gouv.fr/publications/${formattedProductionId}`}
+        onClick={() => setScanRClicked(true)}
       >
         scanR
       </Link>
       <Link
-        className="fr-mr-1w"
+        className={`fr-mr-1w fr-footer__content-link ${
+          google ? "clicked-link" : ""
+        }`}
         target="_blank"
         rel="noreferrer noopener external"
         href={`https://google.com/search?q=${name}`}
+        onClick={() => setGoogleClicked(true)}
       >
         Google
       </Link>

diff --git a/src/pages/api-operation-page/link-publications/message-preview.tsx b/src/pages/api-operation-page/link-publications/message-preview.tsx
@@ -19,6 +19,8 @@ const MessagePreview = ({
 }) => {
   const [showModal, setShowModal] = useState(false);
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [idRefClicked, setIdRefClicked] = useState(false);
+  const [scanRClicked, setScanRClicked] = useState(false);
 
   const { setDataList } = useDataList();
 
@@ -121,20 +123,26 @@ const MessagePreview = ({
         )}
         {data?.id && (
           <Link
-            className="fr-footer__content-link"
+            className={`fr-footer__content-link ${
+              idRefClicked ? "clicked-link" : ""
+            }`}
             target="_blank"
             rel="noreferrer noopener external"
             href={`https://www.idref.fr/${data.id.replace("idref", "")}`}
+            onClick={() => setIdRefClicked(true)}
           >
             IdRef
           </Link>
         )}
         {data?.id && (
           <Link
-            className="fr-footer__content-link"
+            className={`fr-footer__content-link ${
+              scanRClicked ? "clicked-link" : ""
+            }`}
             target="_blank"
             rel="noreferrer noopener external"
             href={`https://scanr.enseignementsup-recherche.gouv.fr/authors/${formattedProductionId}`}
+            onClick={() => setScanRClicked(true)}
           >
             scanR
           </Link>

diff --git a/src/pages/api-operation-page/link-publications/styles.scss b/src/pages/api-operation-page/link-publications/styles.scss
@@ -127,3 +127,7 @@
     opacity: 0;
   }
 }
+.clicked-link {
+  color: #4a90e2;
+  font-weight: bold;
+}