Merge pull request #47 from Scout-NU/#37-singular-product-page-featur…

…e-and-spec-section #37 singular product page feature and spec section
Scout-NU · May 15, 2021 · 7528b6b · 7528b6b
2 parents a933a89 + 3adaf42
commit 7528b6b
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 4 deletions.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -6,7 +6,6 @@ import {
 } from "../../style/variables"
 import colors from "../../style/colors"
 
-
 export const SingularProductContainer = styled.div``
 
 export const HeroSection = styled.div`

diff --git a/src/pages/products.js b/src/pages/products.js
@@ -43,6 +43,13 @@ export const query = graphql`
                   button_destination
                   button_title
                   cta_title
+                  feature_icon {
+                    url
+                    dimensions {
+                      height
+                      width
+                    }
+                  }
                   feature_title
                   features {
                     feature_name

diff --git a/src/schemas/product.json b/src/schemas/product.json
@@ -32,6 +32,12 @@
         "label" : "Product Description"
       }
     },
+    "product_recommendation" : {
+      "type" : "Text",
+      "config" : {
+        "label" : "Product Recommendation"
+      }
+    },
     "product_images" : {
       "type" : "Group",
       "config" : {

diff --git a/src/templates/product.js b/src/templates/product.js
@@ -1,36 +1,197 @@
-import React from "react"
+import React, { useState } from "react"
 import { graphql } from "gatsby"
+import { H1, H2, H3, Sub1, P } from "../style/type-styles"
+import {
+  SingularProductContainer,
+  HeroSection,
+  ImageContainer,
+  TextContainer,
+  ProductType,
+  IconSection,
+  IconContainer,
+  Icon,
+  IconImage,
+  IconCaption,
+  ImageHighlightSection,
+  ImageHighlightHeading,
+  ImageHighlightGroupContainer,
+  ImageHighlightGroup,
+  HighlightedImage,
+  ImageHighlightDescription,
+  ThirdSection,
+  FeatureSpecSection,
+  FeatureIcon,
+  Feature,
+  FeatureName,
+  FeatureImage,
+  FeatureDescription,
+  IconHeader,
+} from "../components/singular-product/singular-product-styles"
 
+import Layout from "../components/layout"
 export default function Product({ data }) {
   const products = data.allPrismicProduct.edges[0].node
+  const [mainImage, setMainImage] = useState(0)
 
-  return <h1>{products.data.product_title}</h1>
+  return (
+    <Layout>
+      <SingularProductContainer>
+        <HeroSection>
+          <ImageContainer>
+            <img
+              alt={products.data.product_images[mainImage].image.alt}
+              src={products.data.product_images[mainImage].image.url}
+              className="main-image"
+            />
+            {products.data.product_images.map((image, id) => {
+              return (
+                <>
+                  <img
+                    onClick={() => setMainImage(id)}
+                    src={image.image.url}
+                    alt={image.alt}
+                    key={id}
+                  />
+                </>
+              )
+            })}
+          </ImageContainer>
+          <TextContainer>
+            <ProductType>
+              <Sub1>{products.data.product_type}</Sub1>
+            </ProductType>
+            <H1>{products.data.product_title}</H1>
+            <P>{products.data.product_description.text}</P>
+          </TextContainer>
+        </HeroSection>
+
+        <IconSection>
+          <IconHeader>
+            <H3>{products.data.icon_section_title}</H3>
+          </IconHeader>
+          <IconContainer>
+            {products.data.icons.map((icon, id) => {
+              return (
+                <Icon key={id}>
+                  <IconImage>
+                    <img src={icon.icon_image.url} alt={icon.icon_image.alt} />
+                  </IconImage>
+                  <IconCaption>
+                    <P>{icon.icon_text}</P>
+                  </IconCaption>
+                </Icon>
+              )
+            })}
+          </IconContainer>
+        </IconSection>
+
+        <ImageHighlightSection>
+          <ImageHighlightHeading>
+            <H1>{products.data.image_highlight_heading}</H1>
+          </ImageHighlightHeading>
+          <ImageHighlightGroupContainer>
+            {products.data.image_highlight_group.map((highlight, id) => {
+              return (
+                <ImageHighlightGroup
+                  key={id}
+                  className={`${id === 0 ? "first" : ""}  ${
+                    id === 1 ? "second-section" : ""
+                  }`}
+                >
+                  <ThirdSection className={id === 2 ? "third-section" : ""}>
+                    <HighlightedImage
+                      className={`${id === 0 ? " first-image " : ""} ${
+                        id === 1 ? " second-image " : ""
+                      }`}
+                    >
+                      <img
+                        src={highlight.highlighted_image.url}
+                        alt={highlight.highlighted_image.alt}
+                      />
+                    </HighlightedImage>
+                    <ImageHighlightDescription
+                      className={id === 1 ? "second-section" : ""}
+                    >
+                      {highlight.image_highlight_description}
+                    </ImageHighlightDescription>
+                  </ThirdSection>
+                </ImageHighlightGroup>
+              )
+            })}
+          </ImageHighlightGroupContainer>
+        </ImageHighlightSection>
+
+        <FeatureSpecSection>
+          <FeatureIcon>
+            <img
+              src={products.data.feature_icon.url}
+              alt={products.data.feature_icon.alt}
+            />
+          </FeatureIcon>
+          <H2>{products.data.feature_title}</H2>
+          <div>
+            {products.data.features.map((feature, id) => {
+              return (
+                <Feature key={id}>
+                  <FeatureName>
+                    <Sub1>{feature.feature_name}</Sub1>
+                  </FeatureName>
+                  <FeatureImage>
+                    <img
+                      className={id === 0 ? " first-image " : ""}
+                      className={id !== 0 ? " not-image " : ""}
+                      src={feature.feature_image.url}
+                      alt={feature.feature_image.alt}
+                    />
+                  </FeatureImage>
+                  <FeatureDescription>
+                    <P>{feature.feature_description}</P>
+                  </FeatureDescription>
+                </Feature>
+              )
+            })}
+          </div>
+        </FeatureSpecSection>
+      </SingularProductContainer>
+    </Layout>
+  )
 }
 
 export const query = graphql`
   query($uid: String!) {
     allPrismicProduct(filter: { uid: { eq: $uid } }) {
-      edges { 
+      edges {
         node {
           id
           uid
           data {
+            feature_icon {
+              url
+              alt
+              dimensions {
+                height
+                width
+              }
+            }
             product_title
             button_destination
             button_title
             cta_title
             feature_title
             features {
               feature_name
+              feature_description
               feature_image {
                 url
+                alt
               }
             }
             icon_section_title
             icons {
               icon_text
               icon_image {
                 url
+                alt
               }
             }
             product_description {
@@ -39,9 +200,22 @@ export const query = graphql`
             product_images {
               image {
                 url
+                alt
               }
             }
             product_type
+            image_highlight_group {
+              highlighted_image {
+                dimensions {
+                  height
+                  width
+                }
+                url
+                alt
+              }
+              image_highlight_description
+            }
+            image_highlight_heading
           }
         }
       }