#56 adding carousel functionality

Scout-NU · May 5, 2021 · c3f5bf7 · c3f5bf7
1 parent 86b152a
commit c3f5bf7
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/src/components/process/process-styles.js b/src/components/process/process-styles.js
@@ -43,6 +43,7 @@ export const HowCarousel = styled.div`
 
 export const HowText = styled.div`
   width: 100%;
+  position: relative;
 
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     height: 581px;
@@ -51,6 +52,23 @@ export const HowText = styled.div`
   }
 `
 
+export const Indicators = styled.div`
+  display: flex;
+  justify-content: center;
+
+  position: absolute;
+  width: 100%;
+  bottom: 52px;
+
+  svg {
+    margin-right: 14px;
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    display: none;
+  }
+`
+
 export const HowParagraph = styled.div`
   padding-top: 24px;
 
@@ -64,12 +82,15 @@ export const HowParagraph = styled.div`
 export const BlueBackground = styled.div`
   position: absolute;
   width: 188px;
-  left: 0;
   min-height: calc(100vh + 242px);
   background-color: ${colors.softblue900};
   top: 127px;
   z-index: 0;
 
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    left: 0;
+  }
+
   @media (min-width: ${dimensions.maxwidthTablet}px) {
     right: 0;
     width: 63vw;

diff --git a/src/components/process/process.js b/src/components/process/process.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useState } from "react"
 import {
   ProcessContainer,
   HowItWorks,
@@ -16,10 +16,15 @@ import {
   Step,
   StepImage,
   StepText,
+  Indicators,
 } from "./process-styles"
+import Circle from "../../vectors/circle.svg"
+import SolidCircle from "../../vectors/solidcircle.svg"
 import { H1, P, H2, H3, Body } from "../../style/type-styles"
 
 export default function Process({ data }) {
+  const [howNumber, setHowNumber] = useState(0)
+
   return (
     <ProcessContainer>
       <BlueBackground />
@@ -32,18 +37,24 @@ export default function Process({ data }) {
         <HowCarousel>
           <HowImage>
             <img
-              src={data.prismicProcessPage.data.how_images[0].how_image.url}
+              src={data.prismicProcessPage.data.how_images[howNumber].how_image.url}
             />
           </HowImage>
           <HowText>
             <HowParagraph>
               <Body>
                 {
-                  data.prismicProcessPage.data.how_images[0].how_paragraph[0]
+                  data.prismicProcessPage.data.how_images[howNumber].how_paragraph[0]
                     .text
                 }
               </Body>
             </HowParagraph>
+
+            <Indicators>
+              {data.prismicProcessPage.data.how_images.map((how_button, id) => {
+                return howNumber === id ? <SolidCircle onClick={() => setHowNumber(id)} /> : <Circle onClick={() => setHowNumber(id)} />
+              })}
+            </Indicators>
           </HowText>
         </HowCarousel>
       </HowItWorks>

diff --git a/src/vectors/solidcircle.svg b/src/vectors/solidcircle.svg