From 2b0a0692731a407684cd8e028a0925bb42a23a74 Mon Sep 17 00:00:00 2001
From: Tiia Valtonen <tiia.valtonen@siili.com>
Date: Fri, 14 May 2021 10:52:41 +0300
Subject: [PATCH 1/4] 194 - Add a new icon 'external' and create a new
 component for external links: - it has the external icon after the link label
 and aria-label for screen readers - supported colors are currently nero white
 and titan green

---
 .../components/externalLink/ExternalLink.jsx  | 28 +++++++++++++++++++
 .../externalLink/ExternalLink.styles.js       |  8 ++++++
 frontend/src/images/SvgIcon.jsx               | 19 +++++++++++--
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/externalLink/ExternalLink.jsx
 create mode 100644 frontend/src/components/externalLink/ExternalLink.styles.js

diff --git a/frontend/src/components/externalLink/ExternalLink.jsx b/frontend/src/components/externalLink/ExternalLink.jsx
new file mode 100644
index 00000000..7f99630b
--- /dev/null
+++ b/frontend/src/components/externalLink/ExternalLink.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SvgIcon from '../../images/SvgIcon';
+import { LinkContainer } from './ExternalLink.styles';
+
+// If color is not given, it defaults to link's default color titan green
+
+const ExternalLink = ({ url, label, color }) => {
+    return (
+        <LinkContainer
+            href={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={label + ' (external link)'}
+        >
+            {label}
+            <SvgIcon svg="external" fill={color ? color : 'titan green'} />
+        </LinkContainer>
+    );
+};
+
+ExternalLink.propTypes = {
+    url: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    color: PropTypes.oneOf(['nero white', 'titan green']),
+};
+
+export default ExternalLink;
diff --git a/frontend/src/components/externalLink/ExternalLink.styles.js b/frontend/src/components/externalLink/ExternalLink.styles.js
new file mode 100644
index 00000000..fe0982ef
--- /dev/null
+++ b/frontend/src/components/externalLink/ExternalLink.styles.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const LinkContainer = styled.a`
+    & svg {
+        margin-left: var(--space-8);
+        vertical-align: text-bottom;
+    }
+`;
diff --git a/frontend/src/images/SvgIcon.jsx b/frontend/src/images/SvgIcon.jsx
index 8a04b1a6..9cd163fa 100644
--- a/frontend/src/images/SvgIcon.jsx
+++ b/frontend/src/images/SvgIcon.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
 import { colorTypes } from '../utils/colorTypes';
 
-const SvgIcon = ({ svg, width, height, viewBox, id }) => {
+const SvgIcon = ({ svg, width, height, viewBox, id, fill }) => {
     const uniqueId = uuidv4();
     const svgMap = new Map();
 
@@ -115,6 +115,15 @@ const SvgIcon = ({ svg, width, height, viewBox, id }) => {
             width: 16,
             height: 16,
         })
+        .set('external', {
+            d:
+                'M8.636 3.5C8.636 3.36739 8.58332 3.24021 8.48955 3.14645C8.39579 3.05268 8.26861 3 8.136 3H1.5C1.10218 3 0.720644 3.15804 0.43934 3.43934C0.158035 3.72064 0 4.10218 0 4.5L0 14.5C0 14.8978 0.158035 15.2794 0.43934 15.5607C0.720644 15.842 1.10218 16 1.5 16H11.5C11.8978 16 12.2794 15.842 12.5607 15.5607C12.842 15.2794 13 14.8978 13 14.5V7.864C13 7.73139 12.9473 7.60421 12.8536 7.51045C12.7598 7.41668 12.6326 7.364 12.5 7.364C12.3674 7.364 12.2402 7.41668 12.1464 7.51045C12.0527 7.60421 12 7.73139 12 7.864V14.5C12 14.6326 11.9473 14.7598 11.8536 14.8536C11.7598 14.9473 11.6326 15 11.5 15H1.5C1.36739 15 1.24021 14.9473 1.14645 14.8536C1.05268 14.7598 1 14.6326 1 14.5V4.5C1 4.36739 1.05268 4.24021 1.14645 4.14645C1.24021 4.05268 1.36739 4 1.5 4H8.136C8.26861 4 8.39579 3.94732 8.48955 3.85355C8.58332 3.75979 8.636 3.63261 8.636 3.5Z',
+            d2:
+                'M16.0006 0.5C16.0006 0.367392 15.948 0.240215 15.8542 0.146447C15.7604 0.0526784 15.6332 0 15.5006 0L10.5006 0C10.368 0 10.2408 0.0526784 10.1471 0.146447C10.0533 0.240215 10.0006 0.367392 10.0006 0.5C10.0006 0.632608 10.0533 0.759785 10.1471 0.853553C10.2408 0.947322 10.368 1 10.5006 1H14.2936L6.14663 9.146C6.10014 9.19249 6.06327 9.24768 6.03811 9.30842C6.01295 9.36916 6 9.43426 6 9.5C6 9.56574 6.01295 9.63084 6.03811 9.69158C6.06327 9.75232 6.10014 9.80751 6.14663 9.854C6.19312 9.90049 6.24831 9.93736 6.30905 9.96252C6.36979 9.98768 6.43489 10.0006 6.50063 10.0006C6.56638 10.0006 6.63148 9.98768 6.69222 9.96252C6.75295 9.93736 6.80814 9.90049 6.85463 9.854L15.0006 1.707V5.5C15.0006 5.63261 15.0533 5.75979 15.1471 5.85355C15.2408 5.94732 15.368 6 15.5006 6C15.6332 6 15.7604 5.94732 15.8542 5.85355C15.948 5.75979 16.0006 5.63261 16.0006 5.5V0.5Z',
+            fill: colorTypes['evidence grey'],
+            width: 16,
+            height: 16,
+        })
         .set('fail', {
             d:
                 'M9.065.435c-.58-.58-1.52-.58-2.1 0L.45 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098L9.065.435zM8.015 4a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507a.905.905 0 00-.9-.995zm.002 6a1 1 0 100 2 1 1 0 000-2z',
@@ -174,13 +183,16 @@ const SvgIcon = ({ svg, width, height, viewBox, id }) => {
         >
             <g clipPath={`url(#${id ? id : uniqueId})`}>
                 {svgMap.get(svg).d2 && (
-                    <path d={svgMap.get(svg).d2} fill={svgMap.get(svg).fill} />
+                    <path
+                        d={svgMap.get(svg).d2}
+                        fill={fill ? colorTypes[fill] : svgMap.get(svg).fill}
+                    />
                 )}
                 <path
                     fillRule="evenodd"
                     clipRule="evenodd"
                     d={svgMap.get(svg).d}
-                    fill={svgMap.get(svg).fill}
+                    fill={fill ? colorTypes[fill] : svgMap.get(svg).fill}
                     stroke={svgMap.get(svg).stroke}
                     strokeWidth={svgMap.get(svg).strokeWidth}
                 />
@@ -207,6 +219,7 @@ SvgIcon.propTypes = {
     height: PropTypes.number,
     viewBox: PropTypes.string,
     id: PropTypes.string,
+    fill: PropTypes.oneOf(['nero white', 'titan green']),
 };
 
 export default SvgIcon;

From 216018746efe476d5e530366bdc765159a5422d3 Mon Sep 17 00:00:00 2001
From: Tiia Valtonen <tiia.valtonen@siili.com>
Date: Fri, 14 May 2021 10:55:42 +0300
Subject: [PATCH 2/4] 194 - Use the new component to replace external links

---
 frontend/src/components/Footer.jsx            | 13 ++---
 frontend/src/components/MainNav.jsx           | 13 ++---
 frontend/src/components/MainNav.styles.js     |  8 +++
 .../src/components/accordion/Accordion.jsx    | 12 ++--
 frontend/src/pages/Frontpage.jsx              | 56 +++++++------------
 5 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 27689a57..36897452 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import packageJson from '../../package.json';
+import ExternalLink from './externalLink/ExternalLink';
 import { FooterContainer, EpiIcon, TextStyles } from './Footer.styles';
 
 const Footer = () => {
@@ -15,13 +16,11 @@ const Footer = () => {
                 {t('footer.epimetheus')} {t('footer.version')}{' '}
                 <span className="underline">{packageJson.version}</span>{' '}
                 {t('footer.powered')}{' '}
-                <a
-                    href="https://www.siili.com"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    {t('footer.siili')}
-                </a>
+                <ExternalLink
+                    url="https://www.siili.com"
+                    label={t('footer.siili')}
+                    color="nero white"
+                />
                 .
             </TextStyles>
         </FooterContainer>
diff --git a/frontend/src/components/MainNav.jsx b/frontend/src/components/MainNav.jsx
index 6dab762a..849f6aae 100644
--- a/frontend/src/components/MainNav.jsx
+++ b/frontend/src/components/MainNav.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
+import ExternalLink from './externalLink/ExternalLink';
 import { NavBar, LinkContainer, SiteLogo } from './MainNav.styles';
 
 const MainNav = () => {
@@ -35,13 +36,11 @@ const MainNav = () => {
                     <NavLink to="/search" className={search ? 'active' : ''}>
                         {t('search')}
                     </NavLink>
-                    <a
-                        href="https://github.com/salabs/Epimetheus"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                    >
-                        {t('github')}
-                    </a>
+                    <ExternalLink
+                        url="https://github.com/salabs/Epimetheus"
+                        label={t('github')}
+                        color="nero white"
+                    />
                 </LinkContainer>
             </NavBar>
         </header>
diff --git a/frontend/src/components/MainNav.styles.js b/frontend/src/components/MainNav.styles.js
index d97eb86b..edffb012 100644
--- a/frontend/src/components/MainNav.styles.js
+++ b/frontend/src/components/MainNav.styles.js
@@ -45,6 +45,14 @@ export const LinkContainer = styled.div`
         &.active {
             border-bottom: var(--space-4) solid var(--nero-white);
         }
+
+        &[target='_blank'] {
+            white-space: nowrap;
+
+            & svg {
+                vertical-align: text-top;
+            }
+        }
     }
 
     @media only screen and (max-width: 540px) {
diff --git a/frontend/src/components/accordion/Accordion.jsx b/frontend/src/components/accordion/Accordion.jsx
index 4cd52fef..d6d1b69d 100644
--- a/frontend/src/components/accordion/Accordion.jsx
+++ b/frontend/src/components/accordion/Accordion.jsx
@@ -9,6 +9,7 @@ import {
     SplitBorder,
 } from './Accordion.styles';
 import SvgIcon from '../../images/SvgIcon';
+import ExternalLink from '../externalLink/ExternalLink';
 import { NarrowTh, SimpleTable } from '../table/Table.styles';
 
 const Accordion = ({ header, name, value }) => {
@@ -55,13 +56,10 @@ const Accordion = ({ header, name, value }) => {
                                 <td>
                                     {item.value.includes('Http') ||
                                     item.value.includes('http') ? (
-                                        <a
-                                            href={item.value}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                        >
-                                            {item.value}
-                                        </a>
+                                        <ExternalLink
+                                            url={item.value}
+                                            label={item.value}
+                                        />
                                     ) : (
                                         <span key={index}>{item.value}</span>
                                     )}
diff --git a/frontend/src/pages/Frontpage.jsx b/frontend/src/pages/Frontpage.jsx
index 10929279..fb8c7eba 100644
--- a/frontend/src/pages/Frontpage.jsx
+++ b/frontend/src/pages/Frontpage.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import SvgIcon from '../images/SvgIcon';
+import ExternalLink from '../components/externalLink/ExternalLink';
 import { IconsContainer } from './Frontpage.styles';
 import { ContentGrid6, ContainerGrid12 } from '../styles/baseComponents';
 
@@ -28,31 +29,25 @@ const Frontpage = () => {
                         <li>{t('section.terminology.test')}</li>
                         <li>{t('section.terminology.team')}</li>
                         <li>
-                            <a
-                                href={t(
+                            <ExternalLink
+                                url={t(
                                     'section.terminology.testarchiver.link_url'
                                 )}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                {t(
+                                label={t(
                                     'section.terminology.testarchiver.link_text'
                                 )}
-                            </a>
+                            />
                             {t('section.terminology.testarchiver.description')}
                         </li>
                         <li>
-                            <a
-                                href={t(
+                            <ExternalLink
+                                url={t(
                                     'section.terminology.chage_engine.link_url'
                                 )}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                {t(
+                                label={t(
                                     'section.terminology.chage_engine.link_text'
                                 )}
-                            </a>
+                            />
                             {t('section.terminology.chage_engine.description')}
                         </li>
                     </ul>
@@ -109,38 +104,29 @@ const Frontpage = () => {
                     <h2>{t('section.feedback.title')}</h2>
                     <p>
                         {t('section.feedback.text')}
-                        <a
-                            href={t('section.feedback.link_url')}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {t('section.feedback.link_text')}
-                        </a>
+                        <ExternalLink
+                            url={t('section.feedback.link_url')}
+                            label={t('section.feedback.link_text')}
+                        />
                         .
                     </p>
 
                     <h2>{t('section.contribute.title')}</h2>
                     <p>
                         {t('section.contribute.text')}
-                        <a
-                            href={t('section.contribute.link_url')}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {t('section.contribute.link_text')}
-                        </a>
+                        <ExternalLink
+                            url={t('section.contribute.link_url')}
+                            label={t('section.contribute.link_text')}
+                        />
                         .
                     </p>
                     <h2>{t('section.licence.title')}</h2>
                     <p>
                         {t('section.licence.text')}
-                        <a
-                            href={t('section.licence.link_url')}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                        >
-                            {t('section.licence.link_text')}
-                        </a>
+                        <ExternalLink
+                            url={t('section.licence.link_url')}
+                            label={t('section.licence.link_text')}
+                        />
                         .
                     </p>
                 </ContentGrid6>

From 7ce5a91ec723cb97dfada04d7b31c1f2044dbe78 Mon Sep 17 00:00:00 2001
From: Tiia Valtonen <tiia.valtonen@siili.com>
Date: Fri, 14 May 2021 10:58:22 +0300
Subject: [PATCH 3/4] 194 - General improvement: add generic default for fonts
 to fix warning

---
 frontend/src/components/MainNav.styles.js                     | 2 +-
 frontend/src/components/dropdown/DropdownSelect.styles.js     | 2 +-
 .../src/components/lastBuildTable/LastBuildTable.styles.js    | 2 +-
 frontend/src/components/overview/Build.styles.js              | 2 +-
 frontend/src/components/overview/Series.styles.js             | 2 +-
 frontend/src/components/suite/TestlistAccordion.styles.js     | 2 +-
 frontend/src/styles/button.styles.js                          | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/MainNav.styles.js b/frontend/src/components/MainNav.styles.js
index edffb012..e6ea3e28 100644
--- a/frontend/src/components/MainNav.styles.js
+++ b/frontend/src/components/MainNav.styles.js
@@ -10,7 +10,7 @@ export const NavBar = styled.nav`
 
 export const SiteLogo = styled.div`
     margin: 0 var(--space-24) 0 var(--space-40);
-    font-family: 'Hack';
+    font-family: 'Hack', monospace;
     letter-spacing: 1px;
     font-size: 30px;
     font-weight: 700;
diff --git a/frontend/src/components/dropdown/DropdownSelect.styles.js b/frontend/src/components/dropdown/DropdownSelect.styles.js
index 5ef503b9..a8f70bf5 100644
--- a/frontend/src/components/dropdown/DropdownSelect.styles.js
+++ b/frontend/src/components/dropdown/DropdownSelect.styles.js
@@ -3,7 +3,7 @@ import caretDown from '../../images/caret-down.svg';
 
 export const DropdownWrapper = styled.div`
     .ReactA11ySelect {
-        font-family: 'Hack';
+        font-family: 'Hack', monospace;
         width: 100%;
         position: relative;
     }
diff --git a/frontend/src/components/lastBuildTable/LastBuildTable.styles.js b/frontend/src/components/lastBuildTable/LastBuildTable.styles.js
index 7e686b10..57975e94 100644
--- a/frontend/src/components/lastBuildTable/LastBuildTable.styles.js
+++ b/frontend/src/components/lastBuildTable/LastBuildTable.styles.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const TableHeading = styled.h3`
-    font-family: 'Hack';
+    font-family: 'Hack', monospace;
     font-size: 14px;
     text-align: center;
     margin: var(--space-24) 0 var(--space-8) 0;
diff --git a/frontend/src/components/overview/Build.styles.js b/frontend/src/components/overview/Build.styles.js
index e471afa3..0a71f0a2 100644
--- a/frontend/src/components/overview/Build.styles.js
+++ b/frontend/src/components/overview/Build.styles.js
@@ -23,7 +23,7 @@ export const ChartContainer = styled.div`
 `;
 
 export const ElementHeader = styled.h2`
-    font-family: 'Hack';
+    font-family: 'Hack', monospace;
     font-size: 20px;
     text-align: center;
     margin: 0;
diff --git a/frontend/src/components/overview/Series.styles.js b/frontend/src/components/overview/Series.styles.js
index 0da2056d..ef8d185c 100644
--- a/frontend/src/components/overview/Series.styles.js
+++ b/frontend/src/components/overview/Series.styles.js
@@ -16,7 +16,7 @@ export const ChartContainer = styled.div`
 `;
 
 export const ElementHeader = styled.h2`
-    font-family: 'Hack';
+    font-family: 'Hack', monospace;
     font-size: 20px;
     text-align: center;
     margin-top: 0;
diff --git a/frontend/src/components/suite/TestlistAccordion.styles.js b/frontend/src/components/suite/TestlistAccordion.styles.js
index b79c6f73..1feb1d4b 100644
--- a/frontend/src/components/suite/TestlistAccordion.styles.js
+++ b/frontend/src/components/suite/TestlistAccordion.styles.js
@@ -36,7 +36,7 @@ export const HeaderContainer = styled.button`
 
     h2 {
         font-size: 20px;
-        font-family: 'Hack';
+        font-family: 'Hack', monospace;
         font-weight: normal;
         text-transform: none;
         letter-spacing: -0.04em;
diff --git a/frontend/src/styles/button.styles.js b/frontend/src/styles/button.styles.js
index eb7b3eec..128ee267 100644
--- a/frontend/src/styles/button.styles.js
+++ b/frontend/src/styles/button.styles.js
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 export const DefaultButton = styled.button`
-    font-family: Hack;
+    font-family: 'Hack', monospace;
     font-style: normal;
     font-weight: bold;
     font-size: 12px;
@@ -58,7 +58,7 @@ export const DefaultButton = styled.button`
 `;
 
 export const ToggleButton = styled.button`
-    font-family: Hack;
+    font-family: 'Hack', monospace;
     font-style: normal;
     font-weight: bold;
     font-size: 14px;

From 4e37a4b0dcc24697c562f1dfda4264a767fd4fea Mon Sep 17 00:00:00 2001
From: Tiia Valtonen <tiia.valtonen@siili.com>
Date: Fri, 14 May 2021 11:05:34 +0300
Subject: [PATCH 4/4] 194 - Fix Codacy issue

---
 frontend/src/images/SvgIcon.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/images/SvgIcon.jsx b/frontend/src/images/SvgIcon.jsx
index 9cd163fa..f8e76031 100644
--- a/frontend/src/images/SvgIcon.jsx
+++ b/frontend/src/images/SvgIcon.jsx
@@ -185,14 +185,22 @@ const SvgIcon = ({ svg, width, height, viewBox, id, fill }) => {
                 {svgMap.get(svg).d2 && (
                     <path
                         d={svgMap.get(svg).d2}
-                        fill={fill ? colorTypes[fill] : svgMap.get(svg).fill}
+                        fill={
+                            fill
+                                ? colorTypes[fill.toString()]
+                                : svgMap.get(svg).fill
+                        }
                     />
                 )}
                 <path
                     fillRule="evenodd"
                     clipRule="evenodd"
                     d={svgMap.get(svg).d}
-                    fill={fill ? colorTypes[fill] : svgMap.get(svg).fill}
+                    fill={
+                        fill
+                            ? colorTypes[fill.toString()]
+                            : svgMap.get(svg).fill
+                    }
                     stroke={svgMap.get(svg).stroke}
                     strokeWidth={svgMap.get(svg).strokeWidth}
                 />