Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/194 - Add 'external' icon for external links #197

Merged
merged 4 commits into from
Jun 2, 2021
Merged

Feature/194 - Add 'external' icon for external links #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2b0a069
194 - Add a new icon 'external' and create a new component for extern…
tiiavalt May 14, 2021
2160187
194 - Use the new component to replace external links
tiiavalt May 14, 2021
7ce5a91
194 - General improvement: add generic default for fonts to fix warning
tiiavalt May 14, 2021
4e37a4b
194 - Fix Codacy issue
tiiavalt May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions frontend/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand All @@ -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>
Expand Down
13 changes: 6 additions & 7 deletions frontend/src/components/MainNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 9 additions & 1 deletion frontend/src/components/MainNav.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
12 changes: 5 additions & 7 deletions frontend/src/components/accordion/Accordion.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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>
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/dropdown/DropdownSelect.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
28 changes: 28 additions & 0 deletions frontend/src/components/externalLink/ExternalLink.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions frontend/src/components/externalLink/ExternalLink.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import styled from 'styled-components';

export const LinkContainer = styled.a`
& svg {
margin-left: var(--space-8);
vertical-align: text-bottom;
}
`;
2 changes: 1 addition & 1 deletion frontend/src/components/lastBuildTable/LastBuildTable.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/overview/Build.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/overview/Series.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/suite/TestlistAccordion.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
27 changes: 24 additions & 3 deletions frontend/src/images/SvgIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -174,13 +183,24 @@ 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.toString()]
: svgMap.get(svg).fill
}
/>
)}
<path
fillRule="evenodd"
clipRule="evenodd"
d={svgMap.get(svg).d}
fill={svgMap.get(svg).fill}
fill={
fill
? colorTypes[fill.toString()]
: svgMap.get(svg).fill
}
stroke={svgMap.get(svg).stroke}
strokeWidth={svgMap.get(svg).strokeWidth}
/>
Expand All @@ -207,6 +227,7 @@ SvgIcon.propTypes = {
height: PropTypes.number,
viewBox: PropTypes.string,
id: PropTypes.string,
fill: PropTypes.oneOf(['nero white', 'titan green']),
};

export default SvgIcon;
56 changes: 21 additions & 35 deletions frontend/src/pages/Frontpage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/styles/button.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down