#37 Updated styling of feature and spec section to match hi-fi wirefr…

…ames
Scout-NU · Apr 15, 2021 · ccab6c6 · ccab6c6
1 parent 7d01d76
commit ccab6c6
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 5 deletions.
diff --git a/src/components/singular-product/singular-product-styles.js b/src/components/singular-product/singular-product-styles.js
@@ -123,7 +123,6 @@ export const FeatureSpecSection = styled.div`
 export const FeatureIcon = styled.div`
   width: 3vw;
   height: 45px;
-  background-color: #9D9D9D;
 `
 
 export const FeatureSpecHeading = styled.div`
@@ -132,8 +131,7 @@ export const FeatureSpecHeading = styled.div`
   padding-top: 20px;
 `
 
-export const FeatureSpecFeatures = styled.div`
-`
+export const FeatureSpecFeatures = styled.div``
 
 export const Feature = styled.div`
   padding-top: 90px;
@@ -155,6 +153,20 @@ export const FeatureName = styled.div`
   }
 `
 
+export const FeatureImage = styled.div`
+  img {
+    &.not-image {
+      display: none;
+    }
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    img {
+      width: 87vw;
+    }
+  }
+`
+
 export const FeatureDescription = styled.div`
   font-size: 15px;
   width: 35vw;

diff --git a/src/components/singular-product/singular-product.js b/src/components/singular-product/singular-product.js
@@ -23,6 +23,7 @@ import {
     FeatureSpecFeatures,
     Feature,
     FeatureName,
+    FeatureImage,
     FeatureDescription,
   } from "./singular-product-styles"
 
@@ -60,13 +61,22 @@ import {
             </IconContainer>
           </IconSection>
           <FeatureSpecSection>
-            <FeatureIcon></FeatureIcon>
+            <FeatureIcon>
+              <img src={data.feature_icon.url} alt="Orange checklist icon"/>
+            </FeatureIcon>
             <FeatureSpecHeading>{data.feature_title}</FeatureSpecHeading>
             <FeatureSpecFeatures>
-              {data.features.map(feature => {
+              {data.features.map((feature, id) => {
                 return (
                   <Feature>
                     <FeatureName>{feature.feature_name}</FeatureName>
+                    <FeatureImage>
+                      <img key={id} 
+                      className={id === 0? "first-image" : ""} 
+                      className={id !== 0? "not-image" : ""}
+                      src={feature.feature_image.url} 
+                      alt="Feature of a product"/>
+                    </FeatureImage>
                     <FeatureDescription>{feature.feature_description.text}</FeatureDescription>
                   </Feature>
                 )

diff --git a/src/pages/products.js b/src/pages/products.js
@@ -37,6 +37,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/pages/singular-product.js b/src/pages/singular-product.js
@@ -20,6 +20,13 @@ export const query = graphql`
           button_destination
           button_title
           cta_title
+          feature_icon {
+            url
+            dimensions {
+              height
+              width
+            }
+          }
           feature_title
           features {
             feature_description {

diff --git a/src/schemas/product.json b/src/schemas/product.json
@@ -74,6 +74,14 @@
       }
     },
     "Feature Section" : {
+      "feature_icon": {
+        "type": "Image",
+        "config": {
+          "constraint": {},
+          "thumbnails": [],
+          "label": "Feature Icon"
+        }
+      },
       "feature_title" : {
         "type" : "Text",
         "config" : {