diff --git a/frontend/src/components/link/index.tsx b/frontend/src/components/link/index.tsx deleted file mode 100644 index 6631dc9107520b7ca3cc8b8098f2d78dc0f0b6f2..0000000000000000000000000000000000000000 --- a/frontend/src/components/link/index.tsx +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react' -import styled from '@emotion/styled/macro' - -interface IStyledLink { - external?: boolean - underline?: boolean - marginRight?: boolean - inheritColor?: boolean - noUnderline?: boolean -} - -interface ILink { - to: string - external?: boolean - children?: React.ReactNode - marginRight?: boolean - noExternalIcon?: boolean - mail?: boolean - inheritColor?: boolean - underline?: boolean - noUnderline?: boolean -} - -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> -) - -const ExternalIcon = styled.span` - margin-left: 1.2rem; - position: relative; - top: 1px; - z-index: -1; -` - -const StyledLink = styled.a<IStyledLink>` - display: inline-flex; - align-items: center; -` -// TODO Put back when routes are set up -// const StyledRouterLink = styled(RouterLink)` -// ${baseInputStyles}; -// ` - -function Link(props: ILink) { - const { - children, - external, - to, - noExternalIcon, - mail, - underline, - marginRight, - inheritColor, - noUnderline, - } = props - - if (mail) { - return ( - <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 diff --git a/frontend/src/components/link/link.test.tsx b/frontend/src/components/link/link.test.tsx deleted file mode 100644 index 0028d1af0f47f55b990bbc757c38a320f2e40499..0000000000000000000000000000000000000000 --- a/frontend/src/components/link/link.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react' -import { render, waitFor, screen } from '@testing-library/react' -import Link from './index' - -describe('Tests for Link component', () => { - test('External link prefixes route link with //', async () => { - render(<Link external to="example.org" />) - - await waitFor(() => screen.getByRole('link')) - - expect(screen.getByRole('link')).toHaveAttribute('href', '//example.org') - }) -})