diff --git a/src/components/atoms/Button.tsx b/src/components/atoms/Button.tsx new file mode 100644 index 00000000..2cdd6a47 --- /dev/null +++ b/src/components/atoms/Button.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Button = (props: any) => { + const { children, href, rel, target } = props; + + return ( + + {children} + + ); +}; + +export default Button; + +const StyledButton = styled.a` + background: #fff; + border: 2px solid #e94e1b; + color: #e94e1b; + padding: 0.5rem 2rem; + border-radius: 99px; + margin: 1rem 0; + transition: 0.2s; + display: inline-block; + text-decoration: none; + &:hover { + background: #e94e1b; + color: #fff; + } +`; diff --git a/src/components/atoms/__tests__/Button.test.tsx b/src/components/atoms/__tests__/Button.test.tsx new file mode 100644 index 00000000..357cd0a9 --- /dev/null +++ b/src/components/atoms/__tests__/Button.test.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import 'jest-styled-components'; +import { render } from '@testing-library/react'; +import Button from '../Button'; + +test('renders correctly', () => { + const props = { + href: '/', + target: '_blank', + }; + const { container } = render(); + + expect(container.firstChild).toMatchInlineSnapshot(` + .c0 { + background: #fff; + border: 2px solid #e94e1b; + color: #e94e1b; + padding: 0.5rem 2rem; + border-radius: 99px; + margin: 1rem 0; + -webkit-transition: 0.2s; + transition: 0.2s; + display: inline-block; + -webkit-text-decoration: none; + text-decoration: none; + } + + .c0:hover { + background: #e94e1b; + color: #fff; + } + + + Button Text + + `); +}); + +test('should generate rel prop if target is set to _blank', () => { + const props = { + href: '/', + target: '_blank', + }; + const { getByText, rerender } = render( + + ); + + expect(getByText(/Button Text/gi).getAttribute('rel')).toEqual( + 'noopener noreferrer' + ); + + rerender( + + ); + + expect(getByText(/Button Text/gi).getAttribute('rel')).toBeNull(); +}); diff --git a/src/components/organisms/Footer.tsx b/src/components/organisms/Footer.tsx index ca041a83..a81a466f 100644 --- a/src/components/organisms/Footer.tsx +++ b/src/components/organisms/Footer.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components'; import Menu from 'Atoms/Menu'; const Foot = styled.footer` - padding: 0 3%; + padding: 0 3% 1rem; display: flex; flex-direction: row; justify-content: space-between; diff --git a/src/components/organisms/__tests__/Footer.test.tsx b/src/components/organisms/__tests__/Footer.test.tsx index f2c5050f..1c894e1a 100644 --- a/src/components/organisms/__tests__/Footer.test.tsx +++ b/src/components/organisms/__tests__/Footer.test.tsx @@ -51,7 +51,7 @@ test('renders correctly', () => { } .c0 { - padding: 0 3%; + padding: 0 3% 1rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; diff --git a/src/components/templates/PortfolioItem.tsx b/src/components/templates/PortfolioItem.tsx index 550043b2..7feef29f 100644 --- a/src/components/templates/PortfolioItem.tsx +++ b/src/components/templates/PortfolioItem.tsx @@ -6,6 +6,7 @@ import { documentToReactComponents } from '@contentful/rich-text-react-renderer' import SEO from 'Molecules/Seo'; import Container from 'Atoms/Container'; +import Button from 'Atoms/Button'; interface IProps { data: { @@ -95,22 +96,6 @@ const Image = styled(Img)` margin-top: 2rem; `; -const Button = styled.a` - background: #fff; - border: 2px solid #e94e1b; - color: #e94e1b; - padding: 0.5rem 2rem; - border-radius: 99px; - margin: 1rem 0; - transition: 0.2s; - display: inline-block; - text-decoration: none; - &:hover { - background: #e94e1b; - color: #fff; - } -`; - const Pagination = styled.ul` list-style: none; margin: 3rem 0; diff --git a/src/components/templates/__tests__/Layout.test.js b/src/components/templates/__tests__/Layout.test.js index b8c651d2..6236721e 100644 --- a/src/components/templates/__tests__/Layout.test.js +++ b/src/components/templates/__tests__/Layout.test.js @@ -152,7 +152,7 @@ it('renders correctly', () => { } .c11 { - padding: 0 3%; + padding: 0 3% 1rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; diff --git a/src/pages/__tests__/__snapshots__/about.test.tsx.snap b/src/pages/__tests__/__snapshots__/about.test.tsx.snap index bd812474..cd4c730f 100644 --- a/src/pages/__tests__/__snapshots__/about.test.tsx.snap +++ b/src/pages/__tests__/__snapshots__/about.test.tsx.snap @@ -1,12 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders correctly 1`] = ` -.c0 { - width: 1140px; - max-width: 94%; - margin: 0 auto; -} - .c11 { border-bottom: 1px solid; padding-bottom: 2rem; @@ -25,6 +19,31 @@ exports[`renders correctly 1`] = ` margin: 0 0 0.5rem; } +.c15 { + background: #fff; + border: 2px solid #e94e1b; + color: #e94e1b; + padding: 0.5rem 2rem; + border-radius: 99px; + margin: 1rem 0; + -webkit-transition: 0.2s; + transition: 0.2s; + display: inline-block; + -webkit-text-decoration: none; + text-decoration: none; +} + +.c15:hover { + background: #e94e1b; + color: #fff; +} + +.c0 { + width: 1140px; + max-width: 94%; + margin: 0 auto; +} + .c8 { background: transparent; border: none; @@ -144,6 +163,10 @@ exports[`renders correctly 1`] = ` margin: 0 auto; } +.c14 { + text-align: center; +} + @media print { .c1 { border-bottom: 1pt solid #000; @@ -606,5 +629,24 @@ exports[`renders correctly 1`] = ` Show more +
+
+

+ Recruiters, you can find my up-to-date CV as a PDF download by clicking the button below. +

+ + Download CV + +
+
`; diff --git a/src/pages/about.tsx b/src/pages/about.tsx index d5ce8376..0f9da00a 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -4,8 +4,9 @@ import moment from 'moment'; import { getTextColor } from 'Templates/Layout'; import SEO from 'Molecules/Seo'; -import Container from 'Atoms/Container'; import Job from 'Molecules/Job'; +import Button from 'Atoms/Button'; +import Container from 'Atoms/Container'; import Filter from 'Atoms/Filter'; import { jobs } from 'Data/jobs'; @@ -129,11 +130,20 @@ const About = () => { ))} {!loadedJobs ? ( - + loadMore(true)}>Show more ) : ( - + loadMore(false)}>Show less )} +
+ + + Recruiters, you can find my up-to-date CV as a PDF download by + clicking the button below. + + + +
); @@ -273,7 +283,7 @@ const ScreenOnly = styled.div` } `; -const Button = styled.button` +const ReadMore = styled.button` background: transparent; border: none; display: block; @@ -284,3 +294,7 @@ const Button = styled.button` display: none; } `; + +const Centre = styled.div` + text-align: center; +`; diff --git a/static/docs/cv-jacob_herper-2020.pdf b/static/docs/cv-jacob_herper-2020.pdf new file mode 100644 index 00000000..3e286774 Binary files /dev/null and b/static/docs/cv-jacob_herper-2020.pdf differ