Merge branch 'master' into ZTRI-32-markdown-to-jsx

.functions/authors-workshop/authors-workshop.js

@@ -6,14 +6,13 @@ var base = new Airtable({ apiKey }).base(apiBaseId);
 
 exports.handler = function (event, context, callback) {
 	const ID = event.queryStringParameters.id;
-	console.log('exports.handler -> ID', ID);
+	// console.log('exports.handler -> ID', ID);
 
 	base('workshop_authors').find(ID, function (err, record) {
 		if (err) {
 			callback(err);
 		} else {
 			const body = JSON.stringify(record);
-			console.log(body);
 			const response = {
 				statusCode: 200,
 				body: body,

.functions/feedback-workshop/feedback-workshop.js

@@ -6,14 +6,12 @@ var base = new Airtable({ apiKey }).base(apiBaseId);
 
 exports.handler = function (event, context, callback) {
 	const ID = event.queryStringParameters.id;
-	console.log('exports.handler -> ID', ID);
 
 	base('feedback').find(ID, function (err, record) {
 		if (err) {
 			callback(err);
 		} else {
 			const body = JSON.stringify(record);
-			console.log(body);
 			const response = {
 				statusCode: 200,
 				body: body,

.storybook/preview.js

@@ -0,0 +1,4 @@
+import { addDecorator } from '@storybook/react';
+import StoryRouter from 'storybook-react-router';
+
+addDecorator(StoryRouter());

package.json

@@ -88,6 +88,7 @@
 		"prettier": "^2.0.5",
 		"pretty-quick": "^2.0.1",
 		"react-axe": "^3.4.1",
+		"storybook-react-router": "^1.0.8",
 		"transparent-commitizen": "^0.2.1"
 	}
 }

src/App.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import Home from './components/Pages/Home/Home';
-import Nav from './components/Nav';
+import Nav from './components/Nav/Nav';
 import AllWorkshops from './components/Pages/AllWorkshops/AllWorkshops';
 import WorkshopOverview from './components/Pages/workshopOverview/WorkshopOverview';
 // import WorkshopFeedback from './components/Pages/WorkshopFeedback';

src/components/Nav.js → src/components/Nav/Nav.js

@@ -12,7 +12,7 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 
-import { NavTitle, StyledLink } from '../styles/componentsStyles';
+import { NavTitle, StyledLink } from '../../styles/componentsStyles';
 
 const theme = createMuiTheme({
 	palette: {

src/components/Nav.test.js → src/components/Nav/Nav.test.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import Nav from './Nav';
-import App from '../App';
+import App from '../../App';
 
 test('Renders Contact link in nav bar', () => {
 	render(

src/components/Nav/nav.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import Nav from './Nav';
+
+export default { title: 'Nav' };
+
+export const nav = () => <Nav />;

src/components/Pages/Home/style.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import * as vars  from '../../../styles/variables';
+import * as vars from '../../../styles/variables';
 
 // LanderSection Syles
 export const LanderSection = styled.section`
@@ -11,7 +11,7 @@ export const LanderSection = styled.section`
 `;
 
 export const LanderTitle = styled.h1`
-	font-family: DIN Condensed;
+	font-family: ${vars.headerFont};
 	font-style: normal;
 	font-weight: bold;
 	font-size: 45px;
@@ -25,7 +25,7 @@ export const LanderTitle = styled.h1`
 `;
 
 export const LanderText = styled.p`
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: italic;
 	font-weight: normal;
 	font-size: 14px;
@@ -37,7 +37,7 @@ export const LanderText = styled.p`
 `;
 
 export const HowToLink = styled.a`
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: normal;
 	font-weight: 500;
 	font-size: 14px;
@@ -54,10 +54,10 @@ export const Icon = () => (
 	<svg width="21" height="20" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
 			d="M9.86364 16.8876L10.0758 17.0997L10.2879 16.8876L17.7125 9.46299C17.8736 9.30192 18.0943
-       9.21183 18.3273 9.21429C18.5607 9.21676 18.7872 9.31198 18.9558 
-      9.48062C19.1244 9.64926 19.2197 9.87574 19.2221 10.1091C19.2246 10.3421 19.1345 10.5628 18.9734 
-      10.7239L10.7239 18.9735C10.5628 19.1345 10.3421 19.2246 10.109 
-      19.2222C9.87569 19.2197 9.64921 19.1245 9.48057 18.9558L1.05472 10.53C0.886081 10.3614 0.790862 
+       9.21183 18.3273 9.21429C18.5607 9.21676 18.7872 9.31198 18.9558
+      9.48062C19.1244 9.64926 19.2197 9.87574 19.2221 10.1091C19.2246 10.3421 19.1345 10.5628 18.9734
+      10.7239L10.7239 18.9735C10.5628 19.1345 10.3421 19.2246 10.109
+      19.2222C9.87569 19.2197 9.64921 19.1245 9.48057 18.9558L1.05472 10.53C0.886081 10.3614 0.790862
       10.1349 0.788396 9.90153C0.785932 9.66849 0.876023 9.44778
       1.03709 9.28671C1.19816 9.12564 1.41886 9.03555 1.65191 9.03802C1.88525 9.04048 2.11173 9.1357 2.28037 9.30434L9.86364 16.8876Z"
 			fill="#322F2F"
@@ -67,30 +67,29 @@ export const Icon = () => (
 	</svg>
 );
 
-// faq styles 
+// faq styles
 export const FaqPair = styled.article`
 	max-width: 500px;
 	margin: 0 auto 2em auto;
 `;
 
 export const FaqSection = styled.section`
 	background-color: ${vars.offWhite};
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 `;
 
 export const FaqTitle = styled.h2`
 	max-width: 500px;
 	margin: 0 auto;
 `;
 
-
 // All Home Styles
 export const Section = styled.section`
 	margin: 30px 45px 0 45px;
 `;
 
 export const Title = styled.h2`
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: normal;
 	font-weight: 500;
 	font-size: 18px;
@@ -99,7 +98,7 @@ export const Title = styled.h2`
 `;
 
 export const Text = styled.p`
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: normal;
 	font-weight: 300;
 	font-size: 12px;

src/components/Pages/workshopOverview/Comments.js

@@ -57,8 +57,7 @@ export default function Comments({ feedbackArr }) {
 					.then((res) => {
 						return res.fields;
 					})
-					.catch((err) => {
-						console.log(err);
+					.catch(() => {
 						setErrorState(
 							<h2>
 								<br />

src/components/Pages/workshopOverview/TitleSection.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import * as vars from '../../../styles';
 // import vars from '../../../styles';
 import api from '../../../api/api';
 
 const Section = styled.section``;
 
 const Author = styled.p`
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: normal;
 	font-weight: bold;
 	font-size: 14px;
@@ -19,7 +20,7 @@ const Author = styled.p`
 
 const AuthorSpan = styled.span`
 	margin-left: 0.5rem;
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
@@ -41,8 +42,7 @@ export default function Intro({ authorArr, equipment }) {
 					.then((res) => {
 						return res.fields;
 					})
-					.catch((err) => {
-						console.log(err);
+					.catch(() => {
 						setErrorState(
 							<h2>
 								<br />

src/components/Tag/Tag.js

@@ -5,7 +5,7 @@ import * as vars from '../../styles/variables';
 
 const TagText = styled.p`
 	display: inline;
-	font-family: Roboto;
+	font-family: ${vars.standardFont};
 	font-style: normal;
 	font-weight: 300;
 	font-size: 12px;
@@ -19,7 +19,7 @@ const TagText = styled.p`
 
 export default function Tag({ innerText, currentTags, setCurrentTags }) {
 	function toggleTags() {
-		if (!(currentTags && setCurrentTags)) {
+		if (!(currentTags && setCurrentTags && innerText)) {
 			return;
 		}
 		if (currentTags.includes(innerText)) {

src/components/Tag/Tag.test.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import Tag from './Tag';
+
+test('Renders text passed in as innerText', () => {
+	render(<Tag innerText="golden unicorns defecate evenly" />);
+	screen.getByText('golden unicorns defecate evenly');
+});
+
+test('clicking the tag calls setCurrentTags if CurrentTags includes innertext', () => {
+	let counter = 0;
+	const setCurrentTags = () => {
+		counter += 1;
+	};
+	const tagText = 'hello world';
+	render(<Tag innerText={tagText} currentTags={[tagText]} setCurrentTags={setCurrentTags} />);
+	const tag = screen.getByText(tagText);
+	tag.click();
+	expect(counter).toBe(1);
+});
+
+test('clicking the tag does not call setCurrentTags if there is no currentTags', () => {
+	let counter = 0;
+	const setCurrentTags = () => {
+		counter += 1;
+	};
+	const tagText = 'hello world';
+	render(<Tag innerText={tagText} setCurrentTags={setCurrentTags} />);
+	const tag = screen.getByText(tagText);
+	tag.click();
+	expect(counter).toBe(0);
+});

src/components/WorkshopCard/style.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import * as vars from '../../styles/variables';
 
 export const Article = styled.article`
 	margin: 2.5rem 0 0 0;
@@ -15,7 +16,7 @@ export const Image = styled.img`
 `;
 
 export const CardTitle = styled.h2`
-	font-family: DINCondensed;
+	font-family: ${vars.headerFont};
 	font-size: 30px;
 	font-weight: bold;
 	color: black;
@@ -45,5 +46,5 @@ export const WorkshopDetails = styled.div`
 export const Span = styled.span`
 	width: 33%;
 	text-align: left;
-	font-family: roboto;
+	font-family: ${vars.standardFont};
 `;

src/components/buttons/BackButton.js

@@ -13,7 +13,7 @@ const SC = {
 		border-style: none;
 		text-transform: uppercase;
 
-		font-family: Roboto;
+		font-family: ${vars.standardFont};
 		font-style: normal;
 		font-weight: 300;
 		font-size: 16px;

src/components/buttons/LandingButton.js

@@ -11,7 +11,7 @@ const SC = {
 		font-size: 1em;
 		height: ${vars.medButtonHeight};
 		border-style: none;
-		font-family: Roboto;
+		font-family: ${vars.standardFont};
 		font-style: normal;
 		font-weight: 300;
 		font-size: 21.216px;

src/components/buttons/PrimaryButton.js

@@ -11,7 +11,7 @@ const SC = {
 		font-size: 1em;
 		height: ${vars.smallButtonHeight};
 		border-style: none;
-		font-family: Roboto;
+		font-family: ${vars.standardFont};
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;

src/components/buttons/SecondaryButton.js

@@ -11,7 +11,7 @@ const SC = {
 		font-size: 1em;
 		height: ${vars.smallButtonHeight};
 		border-style: none;
-		font-family: Roboto;
+		font-family: ${vars.standardFont};
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;

src/index.css

@@ -1,4 +1,9 @@
 @font-face {
-	font-family: 'DINCondensed-Bold';
-	src: local('DINCondensed-Bold'), url(./fonts/DINCondensed-Bold.ttf), format('ttf');
+	font-family: 'DIN';
+	src: local('DINCondensed-Bold'), url(./fonts/DINCondensed-Bold.ttf) format('truetype');
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: local('Roboto-Regular'), url(./fonts/Roboto-Regular.ttf) format('truetype');
 }

src/styles/componentsStyles.js

@@ -4,7 +4,7 @@ import * as vars from './variables';
 
 export const Title1 = styled.h1`
 	text-transform: uppercase;
-	font-family: DINCondensed;
+	font-family: ${vars.headerFont};
 	font-style: normal;
 	font-weight: normal;
 	font-size: 45px;
@@ -15,7 +15,7 @@ export const Title1 = styled.h1`
 export const NavTitle = styled.h1`
 	margin: 0 2rem;
 	text-transform: uppercase;
-	font-family: DINCondensed;
+	font-family: ${vars.headerFont};
 	font-style: normal;
 	font-weight: normal;
 	font-size: 30px;

src/styles/variables.js

@@ -1,10 +1,17 @@
+// Colours
 export const sand = '#ffcb74';
 export const olive = '#b1b493';
 export const ocean = '#4f8a8b';
 export const night = '#07031a';
 export const granite = '#474747';
 export const offWhite = '#fbf9fa';
+
+// dimensions
 export const medButtonHeight = '42px';
 export const smallButtonHeight = '38px';
 export const titleBarVerticalPadding = '8px';
 export const mainContainerWidth = '700px';
+
+// font-families
+export const headerFont = 'DIN, sans-serif';
+export const standardFont = 'Roboto, sans-serif';