Skip to content
Snippets Groups Projects
Commit e3e21e46 authored by Tore.Brede's avatar Tore.Brede
Browse files

Fixing lint warnings in link component

parent ad3353db
No related branches found
No related tags found
1 merge request!60Fix linting errors
Hide whitespace changes
Inline Side-by-side
frontend/src/components/link/index.tsx
+ 82
− 62
View file @ e3e21e46
import styled, {css, DefaultTheme} from 'styled-components/macro'
import React from 'react'
import styled, { css } from 'styled-components/macro'
interface IStyledLink {
theme: DefaultTheme
external?: boolean
underline?: boolean
marginRight?: boolean
inheritColor?: boolean
noUnderline?: boolean
external?: boolean
underline?: boolean
marginRight?: boolean
inheritColor?: boolean
noUnderline?: boolean
}
......@@ -24,33 +23,34 @@ interface ILink {
}
const externalLinkIcon = (
<svg width="15.3" height="12.6" viewBox="0 0 17 14">
<g fill="#0F748D" fillRule="evenodd">
<path
d="M13.044 8.157h-.607a.3.3 0 0 0-.218.082.276.276 0 0 0-.085.208v2.907c0 .4-.148.742-.445 1.027a1.493 1.493 0 0 1-1.072.427H2.73c-.417 0-.774-.143-1.071-.427a1.371 1.371 0 0 1-.446-1.027V3.796c0-.4.149-.742.446-1.026a1.493 1.493 0 0 1 1.071-.427h6.674a.302.302 0 0 0 .218-.082.277.277 0 0 0 .085-.209v-.581a.277.277 0 0 0-.085-.21.302.302 0 0 0-.218-.08H2.73c-.752 0-1.395.255-1.93.767-.533.511-.8 1.128-.8 1.848v7.558c0 .721.267 1.337.801 1.849a2.689 2.689 0 0 0 1.93.768h7.886c.752 0 1.395-.256 1.93-.768.534-.512.8-1.128.8-1.849V8.448a.276.276 0 0 0-.085-.21.302.302 0 0 0-.218-.081z"/>
<path
d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z"/>
</g>
</svg>
);
<svg width="15.3" height="12.6" viewBox="0 0 17 14">
<g fill="#0F748D" fillRule="evenodd">
<path d="M13.044 8.157h-.607a.3.3 0 0 0-.218.082.276.276 0 0 0-.085.208v2.907c0 .4-.148.742-.445 1.027a1.493 1.493 0 0 1-1.072.427H2.73c-.417 0-.774-.143-1.071-.427a1.371 1.371 0 0 1-.446-1.027V3.796c0-.4.149-.742.446-1.026a1.493 1.493 0 0 1 1.071-.427h6.674a.302.302 0 0 0 .218-.082.277.277 0 0 0 .085-.209v-.581a.277.277 0 0 0-.085-.21.302.302 0 0 0-.218-.08H2.73c-.752 0-1.395.255-1.93.767-.533.511-.8 1.128-.8 1.848v7.558c0 .721.267 1.337.801 1.849a2.689 2.689 0 0 0 1.93.768h7.886c.752 0 1.395-.256 1.93-.768.534-.512.8-1.128.8-1.849V8.448a.276.276 0 0 0-.085-.21.302.302 0 0 0-.218-.081z" />
<path d="M16.807.19a.596.596 0 0 0-.426-.173h-4.854a.596.596 0 0 0-.426.173.548.548 0 0 0-.18.409c0 .157.06.294.18.409l1.668 1.598-6.18 5.923a.281.281 0 0 0-.095.21c0 .078.031.148.094.208L7.67 9.983a.306.306 0 0 0 .436 0l6.18-5.923 1.67 1.599c.12.115.262.172.426.172a.596.596 0 0 0 .426-.172.547.547 0 0 0 .18-.409V.599a.548.548 0 0 0-.18-.409z" />
</g>
</svg>
)
const ExternalIcon = styled.span`
margin-left: 1.2rem;
position: relative;
top: 1px;
zIndex: -1;
zindex: -1;
`
const baseInputStyles = css<IStyledLink>`
display: inline-flex;
align-items: center;
color: ${props => props.external ? props.theme.linkExternalColor : props.theme.linkInternalColor};
color: ${(props) =>
props.external
? props.theme.linkExternalColor
: props.theme.linkInternalColor};
${props => props.marginRight ? "margin-right: 3rem;" : ""}
${props => props.inheritColor ? "color: inherit;" : ""}
${props => props.underline ? "text-decoration: underline;" : ""}
${props => props.noUnderline ? ":hover { text-decoration: none };" : ""}
${(props) => (props.marginRight ? 'margin-right: 3rem;' : '')}
${(props) => (props.inheritColor ? 'color: inherit;' : '')}
${(props) => (props.underline ? 'text-decoration: underline;' : '')}
${(props) => (props.noUnderline ? ':hover { text-decoration: none };' : '')}
`
const StyledLink = styled.a<IStyledLink>`
......@@ -62,47 +62,67 @@ const StyledLink = styled.a<IStyledLink>`
// `
function Link(props: ILink) {
const {children, external, to, noExternalIcon, mail} = props
if (mail) {
return (
<StyledLink href={`mailto:${to}`} {...props}>
{children}
</StyledLink>
);
}
if (external) {
const urlRegex = /^((http|https):\/\/)/;
const href = urlRegex.test(to) ? to : `//${to}`;
return (
<StyledLink
href={href}
target="_blank"
rel="noopener noreferrer"
{...props}
>
{children}
{!noExternalIcon && (
<ExternalIcon>{externalLinkIcon}</ExternalIcon>
)}
</StyledLink>
);
}
// TODO Use StyledRouterLink for internal links when routes are set up
// return (
// <StyledRouterLink {...props}>
// {children}
// </StyledRouterLink>
// )
const { children, external, to, noExternalIcon, mail, underline, marginRight, inheritColor, noUnderline } = props
if (mail) {
return (
<StyledLink {...props}>
{children}
</StyledLink>
<StyledLink href={`mailto:${to}`}
external={external}
underline={underline}
marginRight={marginRight}
inheritColor={inheritColor}
noUnderline={noUnderline}>
{children}
</StyledLink>
)
}
if (external) {
const urlRegex = /^((http|https):\/\/)/
const href = urlRegex.test(to) ? to : `//${to}`
return (
<StyledLink
href={href}
target='_blank'
rel='noopener noreferrer'
external={external}
underline={underline}
marginRight={marginRight}
inheritColor={inheritColor}
noUnderline={noUnderline}
>
{children}
{!noExternalIcon && <ExternalIcon>{externalLinkIcon}</ExternalIcon>}
</StyledLink>
)
}
// TODO Use StyledRouterLink for internal links when routes are set up
// return (
// <StyledRouterLink {...props}>
// {children}
// </StyledRouterLink>
// )
return <StyledLink
external={external}
underline={underline}
marginRight={marginRight}
inheritColor={inheritColor}
noUnderline={noUnderline}>
{children}</StyledLink>
}
Link.defaultProps = {
external: false,
children: undefined,
marginRight: false,
noExternalIcon: false,
mail: false,
inheritColor: false,
underline: false,
noUnderline: false,
}
export default Link
\ No newline at end of file
export default Link
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment