Merge branch 'release' of github.com:jakeherp/portfolio into release

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 (
+    <StyledButton
+      href={href}
+      target={target || undefined}
+      rel={rel || target === '_blank' ? 'noopener noreferrer' : undefined}
+      {...props}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+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;
+  }
+`;

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(<Button {...props}>Button Text</Button>);
+
+  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;
+    }
+
+    <a
+      class="c0"
+      href="/"
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      Button Text
+    </a>
+  `);
+});
+
+test('should generate rel prop if target is set to _blank', () => {
+  const props = {
+    href: '/',
+    target: '_blank',
+  };
+  const { getByText, rerender } = render(
+    <Button {...props}>Button Text</Button>
+  );
+
+  expect(getByText(/Button Text/gi).getAttribute('rel')).toEqual(
+    'noopener noreferrer'
+  );
+
+  rerender(
+    <Button href="/" target="_self">
+      Button Text
+    </Button>
+  );
+
+  expect(getByText(/Button Text/gi).getAttribute('rel')).toBeNull();
+});

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;

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;

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;

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;

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
     </button>
   </section>
+  <section
+    class="c1"
+  >
+    <div
+      class="c14"
+    >
+      <p
+        class="c4"
+      >
+        Recruiters, you can find my up-to-date CV as a PDF download by clicking the button below.
+      </p>
+      <a
+        class="c15"
+        href="/docs/cv-jacob_herper-2020.pdf"
+      >
+        Download CV
+      </a>
+    </div>
+  </section>
 </div>
 `;

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 = () => {
             ))}
           </Jobs>
           {!loadedJobs ? (
-            <Button onClick={() => loadMore(true)}>Show more</Button>
+            <ReadMore onClick={() => loadMore(true)}>Show more</ReadMore>
           ) : (
-            <Button onClick={() => loadMore(false)}>Show less</Button>
+            <ReadMore onClick={() => loadMore(false)}>Show less</ReadMore>
           )}
         </Section>
+        <Section>
+          <Centre>
+            <Text>
+              Recruiters, you can find my up-to-date CV as a PDF download by
+              clicking the button below.
+            </Text>
+            <Button href="/docs/cv-jacob_herper-2020.pdf">Download CV</Button>
+          </Centre>
+        </Section>
       </Container>
     </>
   );
@@ -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;
+`;