Footer, switftype & linting

.stylelintrc

@@ -5,6 +5,7 @@
   ],
   "rules": {
     "indentation": 2,
+    "at-rule-no-unknown": null,
     "plugin/selector-bem-pattern": {
       "componentName": "(([a-z0-9]+(?!-$)-?)+)",
       "componentSelectors": {

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
 "eslint.autoFixOnSave": true,
     "eslint.enable": true,
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true,
     "eslint.options": {
         "config": ".eslintrc.json",
         "configFile": ".eslintrc.json"

content/docs/Integrate/Frameworks/symfony.md

@@ -44,7 +44,7 @@ $this->getMailer()->send($message);
 {% endcodeblock %}
 
 
-<page-anchor el="h3">
+<page-anchor el="h1">
 Another Option
 </page-anchor>
 If you want more flexibility, you can use partials to define the content of the emails. Add the a class such as **lib/myEmail.class.php**.

gatsby-node.js

@@ -116,37 +116,3 @@ exports.modifyWebpackConfig = ({ config }) => {
   return newConfig;
 };
 
-exports.sourceNodes = async ({ boundActionCreators }) => {
-  const { createNode } = boundActionCreators;
-  // fetch raw data from the randomuser api
-  const fetchSendGridFooterMenu = () => axios.get('http://wpgrid.lndo.site:8000/wp-json/sg/menus/footer');
-  // await for results
-  const res = await fetchSendGridFooterMenu();
-
-  // map results and create nodes
-  res.data.map((link, i) => {
-    // Create node object
-    const footerLink = {
-      id: `${i}`,
-      parent: '__SOURCE__',
-      internal: {
-        type: 'footerLinks', // name of the graphQL query.
-      },
-      children: [],
-      url: link.url,
-      parentLink: link.parent,
-      title: link.post_title,
-    };
-
-    // Get content digest of node.
-    const contentDigest = crypto
-      .createHash('md5')
-      .update(JSON.stringify(footerLink))
-      .digest('hex');
-    // add it to footerLink
-    footerLink.internal.contentDigest = contentDigest;
-
-    createNode(footerLink);
-  });
-};
-

src/components/Footer/Footer.scss

@@ -2,6 +2,25 @@
 
 .footer {
   background: $slate;
+  font-size: $scaledown-1;
+  padding: $scaleup-1 0;
+
+  a {
+    color: $slate-20;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  hr {
+    border-top: 1px solid $slate-80;
+  }
+}
+
+.footer__divider {
+  border-top: 1px solid $slate-80;
+  width: 54px;
 }
 
 .footer-container {
@@ -10,7 +29,24 @@
   padding: 20px;
 }
 
-.footer-col {
+.footer__header {
+  margin: $scaleup-2 0;
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: $scaledown-2;
+}
+
+.footer__link {
+  display: block;
   color: #fff;
+  margin: $scaleup-2 0;
 }
 
+.footer__soc a {
+  display: inline-block;
+  margin-right: 15px;
+}
+
+.footer__copy {
+  margin-left: $scaleup-3;
+}

src/components/Footer/index.jsx

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import FOOTER_LINKS from '../../constants/footerLinks';
+import SocialLinks from '../SocialLinks';
+import './Footer.scss';
+
+class Footer extends Component {
+  static renderMenu(menu) {
+    const links = menu.LINKS.map(item => (item.URL ? <a key={item.TEXTNODE} className="footer__link" href={item.URL}>{item.TEXTNODE}</a> : <div key={item.TEXTNODE} className="footer__divider" />));
+
+    return (
+      <div className="footer-col" key={menu.HEADER}>
+        <div className="footer__header">{menu.HEADER}</div>
+        { links }
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <footer className="footer color-white">
+        <div className="container-lg footer-container">
+          {Footer.renderMenu(FOOTER_LINKS.SOLUTIONS)}
+          {Footer.renderMenu(FOOTER_LINKS.SG_IS_FOR)}
+          {Footer.renderMenu(FOOTER_LINKS.SUPPORT)}
+          {Footer.renderMenu(FOOTER_LINKS.COMMUNITY)}
+          {Footer.renderMenu(FOOTER_LINKS.COMPANY)}
+        </div>
+
+        <hr />
+
+        <div className="container-lg">
+          <div className="row">
+            <div className="col-md-6">
+              <SocialLinks />
+            </div>
+            <div className="col-md-6 ta-right">
+              <a href="https://sendgrid.com/policies/tos/">Legal and Security</a>
+              <span className="footer__copy">&copy; 2018 SendGrid</span>
+            </div>
+          </div>
+        </div>
+      </footer>
+    );
+  }
+}
+
+export default Footer;

src/components/NavMain/NavMain.scss

@@ -12,6 +12,10 @@
   font-size: $scaledown-1;
 }
 
+.nav-main-wrap {
+  box-shadow: 0 1px 3px rgba(41, 70, 97, 0.15);
+}
+
 .nav-main {
   display: flex;
   text-transform: uppercase;
@@ -130,7 +134,6 @@
   }
 
   .nav-main-wrap {
-    box-shadow: 0 1px 3px rgba(41, 70, 97, 0.15);
     width: 100%;
   }
 

src/components/NavMain/NavMain.jsx → src/components/NavMain/index.jsx

@@ -6,6 +6,8 @@ class NavMain extends Component {
   constructor(props) {
     super(props);
     this.state = { showMenu: false };
+
+    this.toggleMenu = this.toggleMenu.bind(this);
   }
 
   toggleMenu() {
@@ -16,7 +18,7 @@ class NavMain extends Component {
     const menuState = this.state.showMenu ? 'in' : '';
 
     return (
-      <div>
+      <div className="nav-wrap">
         <div className="nav-secondary">
           <div className="container-lg">
             <a href="/">Log In</a>
@@ -32,7 +34,7 @@ class NavMain extends Component {
 
               <button
                 className={`nav-main__toggle js-menu-toggle ${menuState}`}
-                onClick={this.toggleMenu.bind(this)}
+                onClick={this.toggleMenu}
               >
                 <span className="nav-main__menu" />
               </button>

src/components/Search/index.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import './search.scss';
+
+class Search extends React.Component {
+  static swiftype() {
+    /* eslint-disable */
+    (function (w, d, t, u, n, s, e) {
+      w.SwiftypeObject = n; w[n] = w[n] || function () {
+        (w[n].q = w[n].q || []).push(arguments);
+      };
+      s = d.createElement(t);
+      e = d.getElementsByTagName(t)[0];
+      s.async = 1;
+      s.src = u;
+      e.parentNode.insertBefore(s, e);
+    }(window, document, 'script', '//s.swiftypecdn.com/install/v2/st.js', '_st'));
+
+    _st('install', 'NC4TVEWaL6p6zBLuL7eo', '2.0.0');
+    /* eslint-enable */
+  }
+
+  render() {
+    return (
+      <div className="search-docs">
+        <form>
+          <div className="input-text-wrap is-search">
+            <input type="text" id="query" placeholder="Search..." className="form-control search-hero__query search-query st-default-search-input" name="q" />
+            <input type="button" value="Search" className="input-btn" />
+          </div>
+        </form>
+        {Search.swiftype()}
+      </div>
+    );
+  }
+}
+
+export default Search;

src/components/Search/search.scss

@@ -0,0 +1,15 @@
+@import '../../scss/global/mixins';
+
+.input-text-wrap [type="text"] {
+  border-radius: 0;
+}
+
+.input-text-wrap .input-btn {
+  display: none;
+}
+
+.input-text-wrap .search-hero__query {
+  @include colfax(400);
+
+  background-image: none;
+}

src/components/SocialLinks/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import SOCIAL_LINKS from '../../constants/socialLinks';
+
+const SocialLinks = () => {
+  const links = SOCIAL_LINKS.map(item => (
+    <a href={item.URL} target="_blank" rel="noopener noreferrer">
+      <img alt={item.TEXTNODE} src={item.IMG} />
+      <span className="show-for-sr">{item.TEXTNODE}</span>
+    </a>
+  ));
+
+  return (
+    <div className="footer__soc">
+      { links }
+    </div>
+  );
+};
+
+export default SocialLinks;