hero and tests added

README.md

@@ -59,5 +59,6 @@ Known Bugs / Issues To Circle Back And Fix:
 
 - SCSS files not being imported into Jest unit tests. Behaviour is that media queries responsive behav is not happening in Unit Test env.
 
-
+- React Query, change the name of the API/url to an error version
+and it breaks but error not coming through to isError boolean value.
 

__mocks__/prismic-reactjs/index.tsx

@@ -0,0 +1,16 @@
+import React, { ReactElement } from "react";
+
+interface Props {
+    render: [
+        {
+            text: string
+        }
+    ];
+}
+
+export const RichText = (props: Props): ReactElement => (
+    <h1>{props.render[0].text}</h1>
+);
+
+
+export default RichText;

api/requests.ts

@@ -0,0 +1,19 @@
+import { useQuery } from 'react-query';
+import Prismic from 'prismic-javascript';
+
+async function fetchPageByUID(key, uid) {
+	return Prismic.getApi('https://funk27.cdn.prismic.io/api/v2')
+		.then((api) => api.query(
+            Prismic.Predicates.at('document.type', 'page'),
+        ))
+		.then((response) => response.results.filter(each => each.uid === uid)[0])
+		.catch((err) => console.log('AT | err :', err));
+}
+
+const useContent = (uid) => {
+	return useQuery(['content', uid], fetchPageByUID, {
+		enabled: uid,
+	});
+};
+
+export { useContent };

components/footer/footer.module.scss

@@ -21,9 +21,9 @@
 		border: 1px solid $border-dark;
 		font-size: 9px;
 		display: none;
-		@include sm {
-			display: inline;
-		}
+		// @include sm {
+		// 	display: inline;
+		// }
 	}
 	.footerSocialsContainer {
 		width: 100%;

components/hero/__snapshots__/hero.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Hero /> should match snapshot 1`] = `ReactWrapper {}`;

components/hero/hero.module.scss

@@ -0,0 +1,62 @@
+@import "../../scss/main";
+
+.hero__image {
+    height: auto;
+    position: relative;
+
+    div {
+        position: absolute;
+        width: 100%;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+        align-content: center;
+
+        h1 {
+            background-color: black;
+            // position: absolute;
+            font-size: 3rem;
+            text-align: center;
+            padding: 10px;
+            border-radius: 12px;
+            bottom: 1px;
+            transform: skewY(-1deg);
+            color: orange;
+            @include tiny {
+                font-size: 1.3rem;
+                // left: 50%;
+                // margin-left: calc(-100% / 3);
+            }
+            @include sm {
+                font-size: 1.9rem;
+                // left: 50%;
+                // margin-left: calc(-100% / 3);
+            }
+
+        }
+
+    }
+}
+
+/* Desktop */
+.hero__image img {
+    width: 480px;
+    max-width: 480px;
+}
+
+/* Tablet */
+@media screen and (max-width: 900px) {
+    .hero__image img {
+        width: 480px;
+        max-width: 480px;
+    }
+}
+
+/* Mobile */
+@media screen and (max-width: 500px) {
+    .hero__image img {
+        width: 450px;
+        max-width: 450px;
+        max-width: 100%;
+    }
+}

components/hero/hero.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { mount, shallow } from 'enzyme';
+import Hero from './index';
+
+describe('<Hero />', (): void => {
+	let wrapper: any;
+
+	beforeAll((): void => {
+
+        let mockProps = {
+            img: {
+                Mobile: {
+                    url: 'mock mobile url',
+                    alt: 'mock mob alt'
+                },
+                Tablet: {
+                    url: 'mock tablet url',
+                    alt: 'mob tablet alt',
+                },
+                copyright: "copyright",
+                dimensions: {
+                    width: 300,
+                    height: 200,
+				},
+				alt: "mock desktop alt",
+                url: "mock desktop string.jpg",
+            },
+            heroText: [
+                {
+                    spans: ['mock spans'],
+                    text: "mock title for hero here",
+                    type: 'heading1',
+                }
+            ]
+        }
+		wrapper = mount(<Hero {...mockProps} />);
+	});
+
+	it('should match snapshot', () => {
+		expect(wrapper).toMatchSnapshot();
+	});
+
+	it('should render footer without exploding', (): void => {
+		expect(wrapper.find('picture').exists()).toBe(true);
+	});
+
+	it('should render an image with mock URL', () => {
+		expect(wrapper.find('img').prop('src')).toEqual('mock desktop string.jpg');
+	})
+
+	it('should render an image with mock alt tag', () => {
+		expect(wrapper.find('img').prop('alt')).toEqual('mock desktop alt');
+	});
+
+	it('should render with Mobile image props for Semantic HTML', () => {
+		const renderedProps = wrapper.props().img.Mobile;
+		expect(renderedProps.url).toEqual('mock mobile url');
+	});
+
+	it('should render with Tablet image props for Semantic HTML', () => {
+		const renderedProps = wrapper.props().img.Tablet;
+		expect(renderedProps.url).toEqual('mock tablet url');
+	});
+
+	it('should receive the text tagline for Hero', () => {
+		const txt = wrapper.find('h1').text();
+		expect(txt).toEqual('mock title for hero here');
+	})
+});

components/hero/index.tsx

@@ -0,0 +1,58 @@
+import React, { ReactElement } from 'react';
+import { RichText } from 'prismic-reactjs';
+import styles from './hero.module.scss';
+
+interface Props {
+	img: {
+		Mobile: {
+			url: string;
+			alt: string;
+		};
+		Tablet: {
+			url: string;
+			alt: string;
+		};
+		alt: string;
+		copyright: any;
+		dimensions: object;
+		url: string;
+	};
+	heroText: object;
+}
+
+function Hero({ img, heroText }: Props): ReactElement {
+	return (
+		<React.Fragment>
+			<picture className={styles.hero__image}>
+				<source
+					srcSet={img.Mobile.url}
+					// @ts-ignore
+					alt={img.Mobile.alt}
+					media="(max-width: 500px)"
+				/>
+
+				<source
+					srcSet={img.Tablet.url}
+					// @ts-ignore
+					alt={img.Tablet.alt}
+					media="(max-width: 900px)"
+				/>
+
+				<img
+					// @ts-ignore
+					src={img.url}
+					alt={img.alt}
+				/>
+
+				<div>
+					<RichText
+						// @ts-ignore
+						render={heroText}
+					/>
+				</div>
+			</picture>
+		</React.Fragment>
+	);
+}
+
+export default Hero;

components/index.tsx

@@ -1,8 +1,10 @@
+import Hero from './hero';
 import Image from './image';
 import Footer from './footer';
 import Navbar from './navbar';
 
 export {
+    Hero,
     Image,
     Footer,
     Navbar

components/responsive-image/image.module.scss

@@ -0,0 +1,4 @@
+.resp__image {
+    border: 4px solid green;
+    // width: 70vw;
+}

components/responsive-image/index.tsx

@@ -0,0 +1,29 @@
+import React, { ReactElement } from 'react';
+import styles from './image.module.scss';
+
+interface Props {
+	img: {
+		alt: string;
+		copyright: null;
+		dimensions: object;
+		url: string;
+	};
+}
+
+function ResponsiveImage({ img }: Props): ReactElement {
+
+	return (
+		<picture className={styles.resp__image}>
+			<img
+                // @ts-ignore
+				srcSet={`${img.Mobile.url} ${img.Mobile.dimensions.width}w, ${img.Tablet.url} ${img.Tablet.dimensions.width}w`}
+				sizes="(max-width: 600px) 300px,
+            500px"
+                src={img.url}
+                alt={img.alt}
+			/>
+		</picture>
+	);
+}
+
+export default ResponsiveImage;