Merge pull request #10 from wpengine/RossoMaguire/TITAN-283

[TITAN-283] - Re-create latest products section in React

components/ProductCard/ProductCard.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+import styles from './ProductCard.module.scss';
+
+const cx = classNames.bind(styles);
+
+import Link from 'next/link';
+const ProductCard = ({ product }) => {
+  const productHref = `/product/${product?.handle}`;
+  const thumbnail = product?.featuredImage?.url;
+
+  return (
+    <div className={cx([styles.column, styles.productWrapper])}>
+      <div className={styles.productImageContainer}>
+        <Link href={productHref}>
+          <a>
+            {product?.variants?.nodes[0]?.compareAtPrice ? (
+              <span className={styles.onsale}>Sale!</span>
+            ) : null}
+            <img
+              className={styles.productImage}
+              src={thumbnail ?? '/ProductDefault.gif'}
+              alt={product?.name}
+              loading='lazy'
+            />
+          </a>
+        </Link>
+      </div>
+      <div className={styles.productInfoContainer}>
+        <p className={styles.productTitle}>
+          <Link href={productHref}>
+            <a>{product?.title}</a>
+          </Link>
+        </p>
+        <div className={styles.productPrice}>
+          <span>
+            {product?.variants?.nodes[0]?.compareAtPrice ? (
+              <>
+                <del>
+                  {'$' + product?.variants?.nodes[0]?.compareAtPrice?.amount}
+                </del>
+                {'$' + product?.variants?.nodes[0]?.price?.amount}
+              </>
+            ) : (
+              '$' + product?.variants?.nodes[0]?.price?.amount
+            )}
+          </span>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Link href={productHref}>
+            <a className={styles.button}>View product</a>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

components/ProductCard/ProductCard.module.scss

@@ -0,0 +1,94 @@
+.column {
+  flex: 1;
+}
+
+.productWrapper {
+  @import 'styles/css-variables';
+  @import 'styles/breakpoints';
+
+  position: relative;
+  display: flex !important;
+  flex-wrap: wrap;
+
+  a {
+    position: relative;
+  }
+
+  .onsale {
+    border: 1px solid;
+    border-color: var(--wpe--color--slate);
+    color: var(--wpe--color--slate);
+    padding: 0.202em 0.6180469716em;
+    margin: 10px;
+    font-size: 0.875em;
+    text-transform: uppercase;
+    font-weight: 600;
+    display: inline-block;
+    margin-bottom: 1em;
+    border-radius: 3px;
+    position: absolute;
+    background-color: var(--wpe--color--white);
+  }
+
+  .productImageContainer {
+    position: relative;
+    display: block;
+    width: 100%;
+    text-align: center;
+    height: 200px;
+
+    .productImage {
+      width: 80%;
+      height: auto;
+      margin: 0 auto;
+
+      @media (max-width: $breakpoint-extra-small) {
+        width: auto;
+      }
+    }
+  }
+
+  .productInfoContainer {
+    padding: 2rem 0;
+    text-align: center;
+    margin-top: auto;
+    width: 100%;
+
+    .productTitle {
+      width: auto;
+      margin-bottom: 1rem;
+      font-weight: 300;
+      font-size: 1.2em;
+
+      a {
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .productPrice {
+      width: auto;
+      color: var(--wpe--color--black);
+      font-weight: 700;
+      margin-bottom: 1rem;
+    }
+
+    .buttonContainer {
+      .button {
+        margin: 0px 0.5rem;
+        background-color: var(--wpe--color--green);
+        text-decoration: none;
+        font-weight: 500;
+        padding: 1rem;
+        display: inline-block;
+        color: var(--wpe--color--white);
+        transition: all 0.5s;
+        &:hover {
+          background-color: var(--wpe--color--green);
+        }
+      }
+    }
+  }
+}

components/ProductCard/index.js

@@ -0,0 +1 @@
+export { default as ProductCard } from './ProductCard';

components/ProductSection/ProductSection.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './ProductSection.module.scss';
+import { ProductCard } from '../ProductCard';
+
+const cx = classNames.bind(styles);
+
+const ProductSection = ({ products, heading }) => {
+  return (
+    <div className={cx([styles.component])}>
+      <h2>{heading}</h2>
+      <div className={cx(styles.section)}>
+        {products?.map?.((product) => {
+          return <ProductCard key={product.id} product={product} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default ProductSection;

components/ProductSection/ProductSection.module.scss

@@ -0,0 +1,12 @@
+.component {
+  margin: 0 auto;
+  text-align: center;
+
+  h2 {
+    margin: 2em;
+  }
+
+  .section {
+    display: flex;
+  }
+}

components/ProductSection/index.js

@@ -0,0 +1 @@
+export { default as ProductSection } from './ProductSection';

components/index.js

@@ -9,6 +9,8 @@ export { Heading } from './Heading';
 export { Main } from './Main';
 export { NavigationMenu } from './NavigationMenu';
 export { PostInfo } from './PostInfo';
+export { ProductCard } from './ProductCard';
+export { ProductSection } from './ProductSection';
 export { SkipNavigationLink } from './SkipNavigationLink';
 export { Hero } from './Hero';
 export { Post } from './Post';