fix(footer): action or copyright links are simple a tags for external…

… link - With react-dom-router Link when using an external link you would get the site root before the link
eea · Feb 13, 2023 · 9af5070 · 9af5070
1 parent af47bbe
commit 9af5070
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/src/ui/Footer/Footer.stories.js b/src/ui/Footer/Footer.stories.js
@@ -36,7 +36,10 @@ Default.args = {
     { link: '/#', title: 'Sitemap' },
     { link: '/#', title: 'CMS Login' },
   ],
-  copyright: [{ link: '/#', title: '© Copyright 2023 EEA' }],
+  copyright: [
+    { link: 'https://status.eea.europa.eu/', title: 'System status' },
+    { link: '/#', title: '© Copyright 2023 EEA' },
+  ],
   sites: [
     { link: '/#', src: Marine, alt: 'WISE marine' },
     { link: '/#', src: Freshwater, alt: 'WISE freshwater' },

diff --git a/src/ui/Footer/FooterActions.jsx b/src/ui/Footer/FooterActions.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import { Grid } from 'semantic-ui-react';
 
 const FooterActions = (props) => {
@@ -14,9 +13,14 @@ const FooterActions = (props) => {
           <div className="actions">
             {props.actions &&
               props.actions.map((action, index) => (
-                <Link to={action.link} key={index}>
+                <a
+                  href={action.link}
+                  key={index}
+                  target={'_blank'}
+                  rel={'noreferrer'}
+                >
                   {action.title}
-                </Link>
+                </a>
               ))}
           </div>
         </Grid.Column>
@@ -25,9 +29,16 @@ const FooterActions = (props) => {
           <div className="copyright">
             {props.copyright &&
               props.copyright.map((copyright, index) => (
-                <Link to={copyright.link} key={index}>
-                  {copyright.title}
-                </Link>
+                <>
+                  <a
+                    href={copyright.link}
+                    key={index}
+                    target={'_blank'}
+                    rel={'noreferrer'}
+                  >
+                    {copyright.title}
+                  </a>
+                </>
               ))}
           </div>
         </Grid.Column>