chore(navigation): migrate to react-banner@next and re-integrate icon links

The `next` version of `react-banner` supports more generic `items` rather than focusing
solely on `links` which customizations like icons and dropdowns much easier to handle.

Author: skipjack

package-lock.json

@@ -109,7 +109,7 @@
     "preact-compat": "3.17.0",
     "prop-types": "^15.5.10",
     "react": "^16.2.0",
-    "react-banner": "^0.5.0",
+    "react-banner": "^1.0.0-rc.0",
     "react-dom": "^16.2.0",
     "react-hot-loader": "^4.0.0-beta.12",
     "react-router": "^4.2.0",

package.json

@@ -24,6 +24,7 @@
   position: absolute;
   top: 100%;
   right: 0;
+  font-size: getFontSize(-1);
   margin: auto;
   background-color: #2B3A42;
   z-index: 1;

src/components/Dropdown/Dropdown.scss

@@ -1,32 +1,20 @@
+// Import External Dependencies
 import React from 'react';
 import Banner from 'react-banner';
+
+// Import Utilities/Images
+import GitHubIcon from '../../styles/icons/github.svg';
+
+// Import Components
 import Link from '../Link/Link';
 import Container from '../Container/Container';
 import Logo from '../Logo/Logo';
 import Dropdown from '../Dropdown/Dropdown';
+
+// Load Styling
 import './Navigation.scss';
 import './Search.scss';
 
-// TODO: Re-incorporate the icon links
-//  <Link
-//    className="navigation__icon"
-//    title="GitHub Repository"
-//    to="//github.com/webpack/webpack">
-//    <i className="sidecar__icon icon-github" />
-//  </Link>
-//  <Link
-//    className="navigation__icon"
-//    title="See Questions on Stack Overflow"
-//    to="//stackoverflow.com/questions/tagged/webpack">
-//    <i className="sidecar__icon icon-stack-overflow" />
-//  </Link>
-//  <Dropdown
-//    className="navigation__languages"
-//    items={[
-//      { title: 'English', url: 'https://webpack.js.org/' },
-//      { title: '中文', url: 'https://doc.webpack-china.org/' }
-//    ]} />
-
 // TODO: Re-incorporate docsearch (see `react-banner` docs and `SearchResults` component/discussion)
 //   componentDidMount() {
 //     if (typeof window !== 'undefined') {
@@ -57,9 +45,35 @@ export default class Navigation extends React.Component {
 
     return (
       <Banner
+        blockName="navigation"
         logo={ <Logo light={ true } /> }
         url={ pathname }
-        links={ links }
+        items={[
+          ...links,
+          {
+            title: 'GitHub Repository',
+            url: '//github.com/webpack/webpack',
+            className: 'navigation__item--icon',
+            content: <i className="icon-github" />
+          },
+          {
+            title: 'Webpack on Stack Overflow',
+            url: '//stackoverflow.com/questions/tagged/webpack',
+            className: 'navigation__item--icon',
+            content: <i className="icon-stack-overflow" />
+          },
+          {
+            className: 'navigation__item--icon',
+            content: (
+              <Dropdown
+                className="navigation__languages"
+                items={[
+                  { title: 'English', url: 'https://webpack.js.org/' },
+                  { title: '中文', url: 'https://doc.webpack-china.org/' }
+                ]} />
+            )
+          }
+        ]}
         link={ Link }
         onMenuClick={ toggleSidebar } />
     );

src/components/Navigation/Navigation.jsx

@@ -2,21 +2,13 @@
 @import 'mixins';
 @import 'functions';
 
-// TODO: Re-incorporate language dropdown and github links although
-// this may require linking and re-releasing `react-banner`
-//
-// .navigation__languages {
-//   margin-left: 1em;
-//   margin-top: -4px;
-// }
-
-.banner {
+.navigation {
   flex: 0 0 auto;
   transition: background 250ms;
   background: getColor(elephant);
 }
 
-.banner__inner {
+.navigation__inner {
   position: relative;
   display: flex;
   align-items: center;
@@ -30,7 +22,7 @@
   }
 }
 
-.banner__mobile {
+.navigation__mobile {
   display: none;
   fill: white;
   padding: 0;
@@ -43,12 +35,12 @@
   transition: color 250ms;
 }
 
-.banner__mobile svg {
+.navigation__mobile svg {
   width: 20px;
   height: 20px;
 }
 
-.banner__logo {
+.navigation__logo {
   margin: auto;
   text-decoration: none;
   text-transform: uppercase;
@@ -58,20 +50,20 @@
   transition: all 250ms;
 }
 
-.banner__links {
+.navigation__items {
   flex: 1 1 auto;
   display: flex;
   height: 56px;
   align-items: center;
   justify-content: flex-end;
 }
 
-.banner__link {
+.navigation__item {
   position: relative;
   display: inline-block;
   font-size: getFontSize(-1);
   padding-bottom: 0.1em;
-  margin-right: 1.5em;
+  margin-right: 18px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: getColor(white);
@@ -82,6 +74,12 @@
     color: getColor(malibu);
   }
 
+  &--icon {
+    font-size: 16px;
+    margin-top: 2px;
+    -webkit-font-smoothing: antialiased;
+  }
+
   &--active {
     color: #fff;
 
@@ -101,14 +99,14 @@
   }
 }
 
-.banner-search {
+.navigation-search {
   flex: 0 0 auto;
   position: relative;
   display: flex;
   justify-content: flex-end;
 }
 
-.banner-search__input {
+.navigation-search__input {
   font-size: 14px;
   width: 0;
   max-width: calc(100vw - 8.5em);
@@ -128,7 +126,7 @@
   }
 }
 
-.banner-search__icon {
+.navigation-search__icon {
   font-size: 1em;
   width: 1em;
   height: 1em;
@@ -140,35 +138,35 @@
   transition: color 250ms;
 }
 
-.banner-search__input:focus,
-.banner-search__icon:focus {
+.navigation-search__input:focus,
+.navigation-search__icon:focus {
   outline: none;
 }
 
-.banner-search__clear {
+.navigation-search__clear {
   display: none;
   margin-right: 0.25em;
   margin-bottom: -1px;
 }
 
-.banner-search--active .banner-search__input {
+.navigation-search--active .navigation-search__input {
   margin-right: 0.5em;
   width: 400px;
 }
 
-.banner-search--active .banner-search__clear {
+.navigation-search--active .navigation-search__clear {
   display: block;
 }
 
-.banner-search__results {
+.navigation-search__results {
   position: absolute;
   top: 100%;
   right: 0;
   width: 100%;
   margin-top: 5px;
 }
 
-.banner--search .banner__link {
+.navigation--search .navigation__item {
   pointer-events: none;
   overflow: hidden;
   white-space: nowrap;
@@ -177,19 +175,19 @@
   opacity: 0;
 }
 
-.banner-sub {
+.navigation-sub {
   display: block;
   background: getColor(concrete);
 }
 
-.banner-sub__inner {
+.navigation-sub__inner {
   max-width: map-get($screens, large);
   margin: 0 auto;
   padding: 0 1.5em;
   text-align: right;
 }
 
-.banner-sub__link {
+.navigation-sub__link {
   display: inline-block;
   font-size: 0.8em;
   margin-left: 1.5em;
@@ -209,15 +207,15 @@
 }
 
 @media (max-width: 720px) {
-  .banner-sub {
+  .navigation-sub {
     display: none;
   }
 }
 
 @media (max-width: 720px) {
-  .banner__mobile { display: block; }
-  .banner__links { display: none; }
-  .banner--search .banner__logo {
+  .navigation__mobile { display: block; }
+  .navigation__items { display: none; }
+  .navigation--search .navigation__logo {
     pointer-events: none;
     overflow: hidden;
     white-space: nowrap;

src/components/Navigation/Navigation.scss

@@ -62,16 +62,16 @@ class Site extends React.Component {
           toggleSidebar={ this._toggleSidebar }
           links={[
             {
-              title: 'Documentation',
+              content: 'Documentation',
               url: '/concepts',
               isActive: url => /^\/(api|concepts|configuration|guides|loaders|plugins)/.test(url),
               children: this._strip(
                 sections.filter(item => item.name !== 'contribute')
               )
             },
-            { title: 'Contribute', url: '/contribute' },
-            { title: 'Vote', url: '/vote' },
-            { title: 'Blog', url: '//medium.com/webpack' }
+            { content: 'Contribute', url: '/contribute' },
+            { content: 'Vote', url: '/vote' },
+            { content: 'Blog', url: '//medium.com/webpack' }
           ]} />
 
         { window.document !== undefined ? (
@@ -165,6 +165,7 @@ class Site extends React.Component {
   _strip = array => {
     return array.map(({ title, name, url, group, sort, anchors, children }) => ({
       title: title || name,
+      content: title || name,
       url,
       group,
       sort,