Merge branch 'MVM-197-footer-01' into 'master'

Resolve MVM-197 "Footer 01"

Closes MVM-197

See merge request !5

package-lock.json

@@ -1130,6 +1130,43 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
       "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
+      "integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.34",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
+      "integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-YPlVjE1cEO+OJ9I9ay3TQ3I88+XkxMTYwnnddqAboxLhPNGncsHV0DjWOVLCyuAY66yPfyndWwVn4v7vuqsO1g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
+      "integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.34"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@frontity/analytics": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@frontity/analytics/-/analytics-1.2.1.tgz",
@@ -2078,6 +2115,15 @@
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -3456,6 +3502,12 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@@ -4914,43 +4966,6 @@
           "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
           "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
         },
-        "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.32",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
-          "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
-        },
-        "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.32",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
-          "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.32"
-          }
-        },
-        "@fortawesome/free-brands-svg-icons": {
-          "version": "5.15.1",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.1.tgz",
-          "integrity": "sha512-pkTZIWn7iuliCCgV+huDfZmZb2UjslalXGDA2PcqOVUYJmYL11y6ooFiMJkJvUZu+xgAc1gZgQe+Px12mZF0CA==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.32"
-          }
-        },
-        "@fortawesome/free-solid-svg-icons": {
-          "version": "5.15.1",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
-          "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.32"
-          }
-        },
-        "@fortawesome/react-fontawesome": {
-          "version": "0.1.13",
-          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.13.tgz",
-          "integrity": "sha512-/HrLnIft5Ks2511Pz6TxHBIctC9QalVscAC64sufQ4sJH/sXaQlG3uR9LCu6VpEwkBemgcBLrz/QPNP/ddbjDg==",
-          "requires": {
-            "prop-types": "^15.7.2"
-          }
-        },
         "@frontity/error": {
           "version": "0.1.1",
           "resolved": "https://registry.npmjs.org/@frontity/error/-/error-0.1.1.tgz",
@@ -5959,14 +5974,6 @@
             "prop-types": "^15.7.2"
           }
         },
-        "react-scroll-parallax": {
-          "version": "2.3.5",
-          "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-2.3.5.tgz",
-          "integrity": "sha512-+bcye104p4rKZoilT7243gQyLgiKjLTFVtUketp7t6V6Fd6/TrOAeuTtjUfy+nQE92JumG2jQtw6/9bY5YhPrg==",
-          "requires": {
-            "prop-types": "^15.5.10"
-          }
-        },
         "react-slick": {
           "version": "0.27.13",
           "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.13.tgz",
@@ -6220,6 +6227,12 @@
         }
       }
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -6859,6 +6872,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-scroll-parallax": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/react-scroll-parallax/-/react-scroll-parallax-2.3.5.tgz",
+      "integrity": "sha512-+bcye104p4rKZoilT7243gQyLgiKjLTFVtUketp7t6V6Fd6/TrOAeuTtjUfy+nQE92JumG2jQtw6/9bY5YhPrg==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -8108,7 +8129,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

packages/mvmuseum-theme/src/components/global/footer.js

-import React from 'react'
-import {styled, connect} from 'frontity'
+import React from "react";
+import { connect, styled } from "frontity";
 
-import Container from './container'
+import Link from "@frontity/components/link";
+import NewsletterSocialMedia from "../partials/newsletter-socialmedia";
+
+const Footer = ({ state }) => {
+  const { items } = state.source.get("/menus/footer-menu");
+  const { acf } = state.source.get("acf-options-page");
+
+  console.log(acf)
 
-const Footer = ({state}) => {
   return (
-    <StyledFooter>
-      <Container>
-        &copy; {new Date().getFullYear()} Martha's Vineyard Museum
-      </Container>
-    </StyledFooter>
-  )
-}
+    <>
+      <NewsletterSocialMedia />
+
+      <FooterWrapper theme={state.theme}>
+        <FooterContainer>
+          <FooterAddress>
+            {acf.name}<br/>
+            {acf.street_address_first_line}<br/>
+            {acf.city} {acf.zip_code} {acf.state}<br/>
+            Phone: {acf.phone_number}<br/>
+            Fax: {acf.fax_number}<br/>
+          </FooterAddress>
+          <FooterMenu theme={state.theme}>
+            {items.map(({ title, url }, index) => {
+              return (
+                <Link link={url} key={index}>
+                  {title}
+                </Link>
+              );
+            })}
+          </FooterMenu>
+        </FooterContainer>
+      </FooterWrapper>
 
-export default connect(Footer)
+      <Copyright theme={state.theme}>&copy; {new Date().getFullYear()} {acf.copyright_owner}</Copyright>
+    </>
+  );
+};
 
-const StyledFooter = styled.footer`
+export default connect(Footer);
+
+const FooterWrapper = styled.div`
+  width: 100%;
+  height: 30vh;
   position: relative;
-  z-index: 1;
+  z-index: 100;
+  background: ${(props) => props.theme.colors.darkGrey};
+  display: flex;
+  justify-content: center;
+  padding: 2rem 8rem;
+`;
+
+const FooterContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: stretch;
+`;
 
-  background: white;
+const FooterAddress = styled.address`
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  color: white;
+  justify-content: flex-start;
+  align-items: flex-start;
 
+  font-size: 0.9rem;
+`;
+
+const FooterMenu = styled.div`
+  display: flex;
+  width: 50%;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  font-size: 0.8rem;
+
+  a {
+    color: white;
+    display: inline-block;
+    margin: 0 0 auto;
+
+    &:hover {
+      color: ${props => props.theme.colors.orange};
+    }
+  }
+`;
+
+const Copyright = styled.small`
+  background: ${props => props.theme.colors.darkGrey};
+  position: relative;
+  z-index: 100;
+  color: white;
+  font-size: 0.7rem;
   text-align: center;
+  padding: 0.25rem;
 `
\ No newline at end of file

packages/mvmuseum-theme/src/components/home.js

@@ -11,6 +11,8 @@ const Home = ({ state, actions }) => {
   const data = state.source.get(state.router.link);
   const post = state.source[data.type][data.id];
 
+  console.log(post);
+
   // For each of Upcoming Event, Current Exhibition, and Object of the day,
   const objectOfTheDayLink = `/${post.acf.object_of_the_day.post_type}/${post.acf.object_of_the_day.post_name}`;
 

packages/mvmuseum-theme/src/components/home/featured.js

@@ -29,6 +29,8 @@ const FeatureContainer = styled.div`
   position: relative;
   z-index: 100;
   background: white;
+
+  padding-bottom: 1rem;
 `;
 
 const TextOnTheLeft = styled.div`

packages/mvmuseum-theme/src/components/partials/newsletter-socialmedia.js

+import React from "react";
+import { connect, styled } from "frontity";
+
+import Container from '../global/container'
+
+import Facebook from "../../img/facebook.png";
+import Instagram from "../../img/instagram.png";
+import Twitter from "../../img/twitter.png";
+import NewsletterPic from "../../img/newsletter.png";
+
+import Image from "@frontity/components/image";
+
+const NewsletterSocialMedia = ({ state }) => {
+  const options = state.source.get('acf-options-page')
+  console.log(options)
+  return (
+    <NewsletterSocialMediaContainer>
+      <NewsletterForm theme={state.theme}>
+        <h2>Sign up for our newsletter</h2>
+        
+        <StyledForm>
+          <Container>
+            <input placeholder="enter your email" />
+            <button type="submit">
+              <Image src={NewsletterPic} />
+            </button>
+          </Container>
+        </StyledForm>
+      </NewsletterForm>
+
+      <SocialMedia>
+        <h3>STAY IN TOUCH</h3>
+
+        <SocialIconsContainer>
+          <a target="_blank">
+            <Image src={Facebook} />
+          </a>
+          <a target="_blank">
+            <Image src={Instagram} />
+          </a>
+          <a target="_blank">
+            <Image src={Twitter} />
+          </a>
+        </SocialIconsContainer>
+      </SocialMedia>
+    </NewsletterSocialMediaContainer>
+  );
+};
+
+export default connect(NewsletterSocialMedia);
+
+const NewsletterSocialMediaContainer = styled.div`
+  width: 100%;
+  display: grid;
+  ${'' /* grid-template-rows: repeat(3, 1fr); */}
+  position: relative;
+  z-index: 100;
+  background: white;
+`;
+
+const NewsletterForm = styled.div`
+  background: ${props => props.theme.colors.purple};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 0;
+
+  h2 {
+    color: white;
+    text-transform: capitalize;
+    margin-right: 0.5rem;
+  }
+`;
+
+const StyledForm = styled.form`
+  position: relative;
+  width: 25%;
+  height: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  margin-left: 0.5rem;
+
+  input {
+    width: 100%;
+    height: 2rem;
+    padding-left: 1rem;
+  }
+
+  button {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: .75rem;
+    heigth: 1.25rem;
+    width: 1.25rem;
+    cursor: pointer;
+    background: none;
+  }
+`;
+
+const SocialMedia = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+`;
+
+const SocialIconsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem 0;
+
+  a {
+    display: inline-block;
+    width: 1.75rem;
+    margin: .67rem;
+  }
+`;

packages/mvmuseum-theme/src/index.js

@@ -147,7 +147,7 @@ export default {
     theme: {
       beforeSSR: async ({ actions }) => {
         await actions.source.fetch('/menus/primary-menu')
-        // await actions.source.fetch('/menus/footer-menu')
+        await actions.source.fetch('/menus/footer-menu')
         await actions.source.fetch('acf-options-page')
         await actions.source.fetch('nameAndDescription')
         await actions.source.fetch('/objects')