Feat/create typography components + nextjs image component

next.config.js

@@ -21,7 +21,10 @@ module.exports = withOffline(
             generateSw: false,
             globPatterns: ['static/**/*'],
             globDirectory: '.',
-            target: 'serverless'
+            target: 'serverless',
+            images: {
+                domains: [process.env.SITE_DOMAIN] // whatever port your backend runs on
+            }
         })
     )
 );

pages/checkout.js

@@ -1,11 +1,14 @@
 import Layout from '../src/components/layouts/Layout';
 import CheckoutForm from '../src/components/checkout/CheckoutForm';
+import { Heading } from '../src/components/typography';
 
 const Checkout = () => {
     return (
         <Layout>
             <div className="container">
-                <h1 className="mt-5 mb-4">Checkout Page.</h1>
+                <Heading className="mt-5 mb-4">
+                    Checkout Page.
+                </Heading>
                 <CheckoutForm />
             </div>
         </Layout>

pages/index.js

@@ -3,12 +3,17 @@ import Link from 'next/link';
 import client from '../src/apollo/ApolloClient';
 import AddToCartButton from '../src/components/cart/AddToCartButton';
 import Hero from '../src/components/home/Hero';
+import NextImage from '../src/components/image';
+import { SubHeading, Paragraph } from '../src/components/typography';
+
 import { PRODUCTS_QUERY } from '../src/queries';
 
 const NewProducts = ({ products }) => {
     return (
         <div className="container mt-5">
-            <h2 className="text-center mb-5">Products</h2>
+            <SubHeading className="text-center mb-5">
+                Products
+            </SubHeading>
             {products.length ? (
                 <div className="mt-2">
                     <div className="products-wrapper row">
@@ -19,16 +24,15 @@ const NewProducts = ({ products }) => {
                                     {/* @TODO need to get rid of using databseId here. */}
                                     <Link href={`/product/${item.slug}`}>
                                         <a>
-                                            <span className="product-link">
-                                                <img
-                                                    className="product-image"
-                                                    src={item.image.sourceUrl}
-                                                    srcSet={item.image.srcSet}
-                                                    alt={item.name}
-                                                />
-                                                <h5 className="product-name">{item.name}</h5>
-                                                <p className="product-price">{item.price}</p>
-                                            </span>
+                                            <NextImage
+                                                className="product-image"
+                                                src={item.image.sourceUrl}
+                                                alt={item.name}
+                                                width="240"
+                                                height="240"
+                                            />
+                                            <h5 className="product-name">{item.name}</h5>
+                                            <Paragraph className="product-price">{item.price}</Paragraph>
                                         </a>
                                     </Link>
                                     <AddToCartButton product={item} />

pages/login.js

@@ -10,6 +10,7 @@ import isEmpty from '../src/validator/isEmpty';
 import Link from 'next/link';
 import validateAndSanitizeLoginForm from '../src/validator/login';
 import { LOGIN_USER } from '../src/queries';
+import { SubHeading } from '../src/components/typography';
 /**
  * Login functional component.
  *
@@ -158,7 +159,7 @@ const Login = () => {
         <Layout>
             <div className="wd-form container mt-5 pt-5">
                 {/* Title */}
-                <h2 className="mb-2">Login</h2>
+                <SubHeading className="mb-2">Login</SubHeading>
 
                 {/* Error Message */}
                 {'' !== errorMessage

pages/my-account.js

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { isUserValidated } from '../src/utils/auth-functions';
 import isEmpty from '../src/validator/isEmpty';
 import Router from 'next/router';
-
+import { Paragraph } from '../src/components/typography';
 /**
  * MyAccount functional component.
  *
@@ -50,7 +50,9 @@ const MyAccount = () => {
                         <div id="dashboard">
                             {userData.user.nicename ? <h6>Howdy {userData.user.nicename}!</h6> : ''}
                             <h5 className="mt-3">Account Details</h5>
-                            {userData.user.email ? <p>Email: {userData.user.email}</p> : ''}
+                            {userData.user.email ?
+                                <Paragraph>Email: {userData.user.email}</Paragraph> : ''
+                            }
                         </div>
                     </div>
                 </div>

pages/product/[slug].js

@@ -1,10 +1,12 @@
 import Layout from '../../src/components/layouts/Layout';
 import AddToCartButton from '../../src/components/cart/AddToCartButton';
+import NextImage from '../../src/components/image';
 import client from '../../src/apollo/ApolloClient';
 import { 
     PRODUCT_QUERY,
     PRODUCT_SLUGS 
 } from '../../src/queries';
+import { Heading } from '../../src/components/typography';
 
 const Product = (props) => {
     const {
@@ -17,15 +19,19 @@ const Product = (props) => {
                 <div className="mx-auto mt-5">
                     <div className="row">
                         <div className="col-md-6">
-                            <img
+                            <NextImage
                                 className="product-image"
                                 src={product?.image?.sourceUrl}
                                 srcSet={product?.image?.srcSet}
                                 alt={product?.name}
+                                width="240"
+                                height="240"
                             />
                         </div>
                         <div className="col-md-6">
-                            <h1 className="product_title entry-title">{product?.name}</h1>
+                            <Heading className="product_title entry-title">
+                                {product?.name}
+                            </Heading>
                             <p className="price">
                                 <span className="woocommerce-Price-amount amount">
                                     {product?.price}

pages/register.js

@@ -10,6 +10,7 @@ import isEmpty from '../src/validator/isEmpty';
 import Link from 'next/link';
 import validateAndSanitizeRegisterForm from '../src/validator/register';
 import { REGISTER_USER } from '../src/queries';
+import { SubHeading } from '../src/components/typography';
 /**
  * Register Functional Component.
  *
@@ -165,7 +166,7 @@ const Register = () => {
         <Layout>
             <div className="wd-form container mt-5 pt-5">
                 {/* Title */}
-                <h2 className="mb-2">Register</h2>
+                <SubHeading className="mb-2">Register</SubHeading>
 
                 {/* Error Message */}
                 {'' !== errorMessage

src/components/cart/cart-page/CartBlocks.js

@@ -3,6 +3,7 @@ import { useContext } from 'react';
 import { AppContext } from '../../context/AppContext';
 import { removeItemFromCart } from '../../../utils/cart-functions';
 import CartItem from './CartItem';
+import { Heading, SubHeading } from '../../typography';
 
 const CartBlocks = () => {
     const [cart, setCart] = useContext(AppContext);
@@ -24,7 +25,7 @@ const CartBlocks = () => {
         <div>
             {cart ? (
                 <div className="wd-cart-wrapper container">
-                    <h1 className="wd-cart-heading mt-5">Cart</h1>
+                    <Heading className="wd-cart-heading mt-5">Cart</Heading>
                     <table className="table table-hover">
                         <thead>
                             <tr className="wd-cart-head-container">
@@ -60,7 +61,7 @@ const CartBlocks = () => {
                     {/*Cart Total*/}
                     <div className="row wd-cart-total-container">
                         <div className="col-6">
-                            <h2>Cart Totals</h2>
+                            <SubHeading>Cart Totals</SubHeading>
                             <table className="table table-hover">
                                 <tbody>
                                     <tr className="table-light">

src/components/cart/cart-page/CartItem.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { updateCart } from '../../../utils/cart-functions';
+import NextImage from '../../image';
 
 const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
     const [productCount, setProductCount] = useState(item.qty);
@@ -40,11 +41,12 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
                 </span>
             </th>
             <td className="wd-cart-element">
-                <img
-                    width="64"
+                <NextImage
                     src={item.image.sourceUrl}
                     srcSet={item.image.srcSet}
                     alt={item.image.title}
+                    width="64"
+                    height="64"
                 />
             </td>
             <td className="wd-cart-element">{item.name}</td>

src/components/checkout/Billing.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SubHeading } from '../typography';
 import countryList from './country-list';
 import Error from './Error';
 
@@ -214,7 +215,7 @@ const Billing = ({ input, handleOnChange }) => {
                     Create an account?
                 </label>
             </div>
-            <h2 className="mt-4 mb-4">Additional Information</h2>
+            <SubHeading className="mt-4 mb-4">Additional Information</SubHeading>
             {/* Order Notes */}
             <div className="form-group">
                 <label htmlFor="order-notes">Order Notes</label>

src/components/checkout/CheckoutCartItem.js

@@ -1,12 +1,15 @@
+import NextImage from '../image';
+
 const CheckoutCartItem = ({ item }) => {
     return (
         <tr className="wd-cart-item" key={item.databaseId}>
             <td className="wd-cart-element">
-                <img
-                    width="64"
+                <NextImage
                     src={item.image.sourceUrl}
                     srcSet={item.image.srcSet}
                     alt={item.image.title}
+                    width="64"
+                    height="64"
                 />
             </td>
             <td className="wd-cart-element">{item.name}</td>

src/components/checkout/CheckoutForm.js

@@ -4,6 +4,7 @@ import YourOrder from './YourOrder';
 import PaymentModes from './PaymentModes';
 import { AppContext } from '../context/AppContext';
 import validateAndSanitizeCheckoutForm from '../../validator/checkout';
+import { SubHeading } from '../typography';
 
 const CheckoutForm = () => {
     const [cart] = useContext(AppContext);
@@ -67,13 +68,13 @@ const CheckoutForm = () => {
                     <div className="row">
                         {/*Billing Details*/}
                         <div className="col-lg-6 col-md-12">
-                            <h2 className="mb-4">Billing Details</h2>
+                            <SubHeading className="mb-4">Billing Details</SubHeading>
                             <Billing input={input} handleOnChange={handleOnChange} />
                         </div>
                         {/* Order & Payments*/}
                         <div className="col-lg-6 col-md-12">
                             {/*	Order*/}
-                            <h2 className="mb-4">Your Order</h2>
+                            <SubHeading className="mb-4">Your Order</SubHeading>
                             <YourOrder cart={cart} />
 
                             {/*Payment*/}

src/components/home/Categories.js

@@ -1,59 +1,61 @@
 import Link from 'next/link';
+import NextImage from '../../src/components/image';
+import { SubHeading } from '../typography';
 
 const Categories = () => {
     return (
         <div className="container">
-            <h2 className="text-center mb-4">Shop by Category</h2>
+            <SubHeading className="text-center mb-4">Shop by Category</SubHeading>
             <div className="woocommerce">
                 <ul className="products row mx-auto">
                     <li className="product-category product first col-md-4">
                         <Link as={`/`} href={`/`}>
                             <a className="">
-                                <img
+                                <NextImage
                                     src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg"
                                     alt="Accessories"
                                     width="324"
                                     height="324"
                                     srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-768x768.jpg 768w"
                                     sizes="(max-width: 324px) 100vw, 324px"
                                 />
-                                <h2 className="woocommerce-loop-category__title">
+                                <SubHeading className="woocommerce-loop-category__title">
                                     Accessories <mark className="count">(4)</mark>
-                                </h2>
+                                </SubHeading>
                             </a>
                         </Link>
                     </li>
                     <li className="product-category product col-md-4">
                         <Link as={`/`} href={`/`}>
                             <a className="">
-                                <img
+                                <NextImage
                                     src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg"
                                     alt="Hoodies"
                                     width="324"
                                     height="324"
                                     srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg 800w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-768x768.jpg 768w"
                                     sizes="(max-width: 324px) 100vw, 324px"
                                 />
-                                <h2 className="woocommerce-loop-category__title">
+                                <SubHeading className="woocommerce-loop-category__title">
                                     Hoodies <mark className="count">(4)</mark>
-                                </h2>
+                                </SubHeading>
                             </a>
                         </Link>
                     </li>
                     <li className="product-category product last col-md-4">
                         <Link as={`/`} href={`/`}>
                             <a className="">
-                                <img
+                                <NextImage
                                     src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg"
                                     alt="Tshirts"
                                     width="324"
                                     height="324"
                                     srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-768x768.jpg 768w"
                                     sizes="(max-width: 324px) 100vw, 324px"
                                 />
-                                <h2 className="woocommerce-loop-category__title">
+                                <SubHeading className="woocommerce-loop-category__title">
                                     Tshirts <mark className="count">(4)</mark>
-                                </h2>
+                                </SubHeading>
                             </a>
                         </Link>
                     </li>

src/components/home/Hero.js

@@ -1,7 +1,8 @@
+import { Heading } from '../typography';
 const Hero = () => (
     <div className="wp-block-cover alignfull hero text-center mb-5">
         <div className="wp-block-cover__inner-container">
-            <h1>Welcome</h1>
+            <Heading>Welcome</Heading>
             <p className="has-text-color">Welcome to the WP Decoupled Demo page.</p>
             <p className="has-text-color">
                 This is a frontend for a WooCommerce Store created with Next.js and WPGraphQL.
@@ -10,4 +11,4 @@ const Hero = () => (
     </div>
 );
 
-export default Hero;
+export default Hero;

src/components/image/defaultImg.js

@@ -0,0 +1,2 @@
+export const defaultImg =
+  "default image link";

src/components/image/index.js

@@ -0,0 +1,29 @@
+import Image from 'next/image'
+import { defaultImg } from './defaultImg';
+
+const NextImage = (props) => {
+
+    const { 
+        className,
+        src,
+        srcSet,
+        alt,
+        width,
+        height,
+        sizes
+    } = props;
+    const imgSrc = typeof src === 'string' ? src || defaultImg : defaultImg;
+
+    return (
+        <Image 
+            className={className}
+            src={imgSrc}
+            alt={alt}
+            width={width}
+            height={height}
+            sizes={sizes} 
+        />
+    );
+}
+
+export default NextImage;