Merge pull request linode#221 from linode/release-1.1.31

Release 1.1.31

Author: hzoppetti

gatsby-config.js

@@ -90,6 +90,7 @@ module.exports = {
       resolve: `gatsby-plugin-purgecss`,
       options: {
         tailwind: true,
+        whitelistPatternsChildren: [/consent_blackbar/],
         whitelist: [
           "mobile",
           "mobile-nav",

src/components/2_molecules/navigation/col.js

@@ -1,19 +1,18 @@
 import React from "react";
+const _ = require("lodash");
 
 const Col = props => (
-  <div className="nav__wrapper">
-    <ul
-      role="menu"
-      className={`
-            sub-menu__item
-            sub-menu__item--reg
-            ${props.name}-nav
-          `}
-      aria-expanded="false"
-    >
-      <h6 className="sub-menu__header">{props.header}</h6>
-      {props.children}
-    </ul>
+  <div className="o-layout__module">
+    <h6>{props.header}</h6>
+    <nav className="o-menu">
+      <ul
+          role="menu"
+          id={`menu-submenu-${_.kebabCase(props.name)}`}
+          className="o-menu__list"
+        >
+          {props.children}
+      </ul>
+    </nav>
   </div>
 );
 

src/components/2_molecules/navigation/communityMenus.js

@@ -4,18 +4,19 @@ import CommunityPrimary from "./communityPrimary";
 import CommunityServices from "./communityServices";
 
 const CommunityMenus = () => (
-  <>
-    <div className="sub-menu__col">
-      <div className="sub-menu__content">
+  <div className="o-layout__row c-sub-menu c-sub-menu--community" id="sub-menu--community">
+    <div className="o-layout__colset">
+      <div className="o-layout__col">
         <CommunityPrimary />
       </div>
-    </div>
-    <div className="sub-menu__col">
-      <div className="sub-menu__content">
+      <div className="o-layout__col">
         <CommunityServices />
       </div>
+      <div className="o-layout__col">
+
+      </div>
     </div>
-  </>
+  </div>
 );
 
 export default CommunityMenus;

src/components/2_molecules/navigation/communityPrimary.js

@@ -2,27 +2,22 @@ import React from "react";
 import { StaticQuery, graphql } from "gatsby";
 import Col from "./col";
 
-const _ = require("lodash");
-
 const CommunityPrimary = ({ data }) => {
   return (
     <Col name="community-primary" header="Community">
       {data.allCommunityPrimary.edges.map((link, i) => {
         const node = link.node;
         return (
-          <li className="sub-menu__li sub-menu__header-li" key={i}>
+          <li className="o-menu__item" key={i}>
             <a
               key={node.id}
               href={node.url ? node.url : null}
-              className={`
-                  header__link
-                  sub-menu__link
-                  sub-menu__header-link
-                  ${_.kebabCase(node.title)}
-                `}
+              className="o-menu__link"
               role="menuitem"
             >
-              {node.title}
+              <span className="o-menu__title">
+                {node.title}
+              </span>
             </a>
           </li>
         );

src/components/2_molecules/navigation/communityServices.js

@@ -2,26 +2,22 @@ import React from "react";
 import { StaticQuery, graphql } from "gatsby";
 import Col from "./col";
 
-const _ = require("lodash");
-
 const CommunityServices = ({ data }) => {
   return (
-    <Col name="community-services" header="Engage">
+    <Col name="community-secondary" header="Engage With Us">
       {data.allCommunityServices.edges.map((link, i) => {
         const node = link.node;
         return (
-          <li className="sub-menu__li sub-menu__header-li" key={i}>
+          <li className="o-menu__item" key={i}>
             <a
               key={node.id}
               href={node.url ? node.url : null}
-              className={`
-                  header__link
-                  sub-menu__link
-                  ${_.kebabCase(node.title)}
-                `}
+              className="o-menu__link"
               role="menuitem"
             >
-              {node.title}
+              <span className="o-menu__title">
+                {node.title}
+              </span>
             </a>
           </li>
         );

src/components/2_molecules/navigation/primaryMobile.js

@@ -1,26 +1,28 @@
 import React from "react";
 import { StaticQuery, graphql } from "gatsby";
 
-import Col from "./col";
-
 const PrimaryMobileNav = ({ data }) => {
   return (
-    <Col name="primary-mobile" header="">
+    <nav className="o-menu o-menu--featured">
+      <ul id="menu-submenu-mobile-primary" className="o-menu__list">
       {data.allPrimaryMobile.edges.map(link => {
         const node = link.node;
         return (
-          <li className="sub-menu__li sub-menu__header-li" key={node.id}>
-            <a
-              href={node.url ? node.url : null}
-              className="header__link sub-menu__link sub-menu__header-link mobile__link"
-              role="menuitem"
-            >
+        <li className="o-menu__item" key={node.id}>
+          <a
+            href={node.url ? node.url : null}
+            className="o-menu__link"
+            role="menuitem"
+          >
+            <span className="o-menu__title">
               {node.title}
-            </a>
-          </li>
+            </span>
+          </a>
+        </li>
         );
-      })}
-    </Col>
+        })}
+      </ul>
+    </nav>
   );
 };