Merge pull request #27 from Scout-NU/#13-footer-component

#13 footer component

src/components/footer/footer-styles.js

@@ -0,0 +1,149 @@
+import styled from "styled-components"
+import dimensions from "../../style/dimensions"
+export const FooterContainer = styled.div`
+  background-color: #848484;
+  width: 100%;
+  color: #ffffff;
+`
+
+export const FooterMainContent = styled.div`
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    display: flex;
+  }
+`
+
+export const SocialSection = styled.div`
+  padding-left: 80px;
+  padding-top: 50px;
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-left: 32px;
+  }
+`
+
+export const FooterHeader = styled.div`
+  font-weight: bold;
+  font-size: 24px;
+`
+
+export const SocialIcons = styled.div`
+  display: flex;
+  padding-top: 15px;
+`
+
+export const SocialPlaceholder = styled.div`
+  width: 24px;
+  height: 24px;
+  background-color: #a4a4a4;
+  border-radius: 8px;
+  margin-right: 16px;
+`
+export const EmailText = styled.div`
+  text-decoration: underline;
+  font-size: 18px;
+  font-weight: bold;
+  padding-top: 25px;
+`
+
+export const LinkSection = styled.div`
+  display: flex;
+  margin-left: 9vw;
+  padding-top: 50px;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    margin-left: 0px;
+  }
+
+  li {
+    padding-bottom: 47px;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  a {
+    text-decoration: none;
+    color: #ffffff;
+  }
+
+  ul {
+    list-style: none;
+  }
+`
+
+export const LinkColumn = styled.div`
+  padding-right: 9vw;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-right: 0;
+  }
+`
+
+export const EmailSection = styled.div`
+  margin-left: 32px;
+
+  input {
+    width: 20vw;
+    height: 36px;
+    margin-top: 10px;
+    border: solid #626262 1px;
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    input {
+      width: 80%;
+      height: 36px;
+      margin-top: 10px;
+      border: solid #626262 1px;
+    }
+  }
+
+  input::placeholder {
+    padding-left: 14px;
+  }
+
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    padding-top: 50px;
+    position: absolute;
+    right: 62px;
+  }
+`
+
+export const BottomLinks = styled.div`
+  a {
+    text-decoration: none;
+    color: black;
+  }
+  ul {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    padding-bottom: 30px;
+  }
+
+  li {
+    font-size: 12px;
+    padding-right: 28px;
+  }
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    ul {
+      display: flex;
+      justify-content: center;
+      list-style: none;
+      padding-top: 80px;
+      padding-bottom: 12px;
+    }
+  }
+`
+
+export const AddressSection = styled.div`
+  width: 177px;
+  padding-top: 16px;
+`
+export const ScoutSection = styled.div`
+  margin-top: 32px;
+  color: #ffffff;
+
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
+    padding-bottom: 48px;
+  }
+`

src/components/footer/footer.js

@@ -0,0 +1,104 @@
+import React from "react"
+import styled from "styled-components"
+import dimensions from "../../style/dimensions"
+import { StaticQuery, graphql } from "gatsby"
+
+import {
+  FooterContainer,
+  FooterMainContent,
+  SocialSection,
+  FooterHeader,
+  SocialIcons,
+  SocialPlaceholder,
+  LinkSection,
+  LinkColumn,
+  EmailSection,
+  AddressSection,
+  ScoutSection,
+} from "./footer-styles"
+
+export default function footer({ data }) {
+  return (
+    <StaticQuery
+      query={graphql`
+        query prismicFooter {
+          prismicFooter {
+            data {
+              email
+              social_media {
+                social_icon {
+                  url
+                }
+                social_link
+              }
+            }
+          }
+        }
+      `}
+      render={data => (
+        <FooterContainer>
+          <FooterMainContent>
+            <SocialSection>
+              <FooterHeader>Powerhouse</FooterHeader>
+              <AddressSection>
+                123 Lorem Ipsum Dolor Tempor Incididunt YZ, 12345 123-456-7890
+              </AddressSection>
+            </SocialSection>
+
+            <LinkSection>
+              <LinkColumn>
+                <ul>
+                  <li>
+                    <a href="/about">Home</a>
+                  </li>
+                  <li>
+                    <a href="/about">About</a>
+                  </li>
+                  <li>
+                    <a href="/about">Process</a>
+                  </li>
+                </ul>
+              </LinkColumn>
+
+              <LinkColumn>
+                <ul>
+                  <li>
+                    <a href="/about">Products</a>
+                  </li>
+                  <li>
+                    <a href="/about">Solutions</a>
+                  </li>
+                  <li>
+                    <a href="/about">FAQ</a>
+                  </li>
+                </ul>
+              </LinkColumn>
+            </LinkSection>
+
+            <EmailSection>
+              <form>
+                <input
+                  type="text"
+                  placeholder="your@email.com"
+                  name="email"
+                  required
+                />
+              </form>
+              <SocialIcons>
+                {data.prismicFooter.data.social_media.map(social => {
+                  return (
+                    <a href={social.social_link}>
+                      <SocialPlaceholder />
+                    </a>
+                  )
+                })}
+              </SocialIcons>
+
+              <ScoutSection>Made with love by Scout</ScoutSection>
+            </EmailSection>
+          </FooterMainContent>
+        </FooterContainer>
+      )}
+    />
+  )
+}

src/components/layout.js

@@ -1,62 +1,20 @@
 import React from "react"
 import styled from "styled-components"
 import "../style/typography.scss"
-
+import "../style/global.scss"
 import dimensions from "../style/dimensions"
 import { layoutPaddingDesktop, layoutPaddingMobile } from "../style/variables"
+import Footer from "../components/footer/footer"
 
 const LayoutContainer = styled.div`
-  body * {
-    box-sizing: border-box;
-    margin: 0;
-  }
-
-  html,
-  body,
-  #root {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    min-height: 100%;
-  }
-
-  body {
-    width: 100%;
-    margin: 0 auto;
-    font-size: 16px;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-
-    @media (max-width: ${dimensions.maxwidthMobile}px) {
-      font-size: 14px;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-  }
-
-  /*
-  A workaround for forcing accessibility wrappers
-  to have a 100% height.
-  Reach Router issue here: https: //github.com/reach/router/issues/63
-  */
-  #___gatsby,
-  div[role="group"][tabindex] {
-    height: 100%;
-    min-height: 100% !important;
-  }
-
-  padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
 
-  margin: 0 auto;
 `
 const LayoutBody = styled.div`
-  @media (max-width: ${dimensions.maxwidthTablet}px) {
-    padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};
+  @media (min-width: ${dimensions.maxwidthTablet}px) {
+    padding: 0 ${layoutPaddingDesktop} ${layoutPaddingDesktop};s
   }
 
-  @media (max-width: ${dimensions.maxwidthMobile}px) {
+  @media (max-width: ${dimensions.maxwidthTablet}px) {
     padding: 0 ${layoutPaddingMobile} ${layoutPaddingMobile};
   }
 `
@@ -65,8 +23,10 @@ const Layout = ({ children }) => {
   return (
     <LayoutContainer>
       <LayoutBody>{children}</LayoutBody>
+
+      <Footer />
     </LayoutContainer>
   )
 }
 
-export default Layout
+export default Layout

src/pages/process.js

@@ -1,7 +1,5 @@
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-
-
 import React from "react"
 
 export default function Process({ data }) {

src/schemas/footer.json

@@ -0,0 +1,33 @@
+{
+    "Main" : { },
+    "Social" : {
+      "email" : {
+        "type" : "Text",
+        "config" : {
+          "label" : "Email"
+        }
+      },
+      "social_media" : {
+        "type" : "Group",
+        "config" : {
+          "fields" : {
+            "social_icon" : {
+              "type" : "Image",
+              "config" : {
+                "constraint" : { },
+                "thumbnails" : [ ],
+                "label" : "Social Icon"
+              }
+            },
+            "social_link" : {
+              "type" : "Text",
+              "config" : {
+                "label" : "Social Link"
+              }
+            }
+          },
+          "label" : "Social Media"
+        }
+      }
+    }
+  }

src/style/global.scss

@@ -0,0 +1,4 @@
+html, body
+{
+    margin: 0px; padding: 0px
+}