i18n Banner

package.json

@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.17.1",
+    "browser-locale": "^1.0.3",
     "flexboxgrid-sass": "https://github.com/hugeinc/flexboxgrid-sass.git",
     "lodash": "^4.17.4",
     "node-sass-chokidar": "^0.0.3",

src/App.js

@@ -6,6 +6,7 @@ import {
 
 // components
 import Banner from "components/layout/Banner"
+import I18nBanner from "components/I18nBanner"
 import Header from "components/layout/Header"
 import Footer from "components/layout/Footer"
 
@@ -22,6 +23,7 @@ class App extends Component {
       <Router>
         <div>
           <Banner />
+          <I18nBanner />
           <section className="coa-main">
             <Route exact path="/" component={HomePage} />
             <Route exact path="/services" component={ServicesIndex} />

src/components/I18nBanner.js

@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import locale from 'browser-locale';
+
+import CaretDownSVG from 'svg/CaretDown';
+
+const languages = [
+  {
+    title: 'English',
+    abbr: 'en',
+  }, {
+    title: 'Español',
+    abbr: 'es',
+  }, {
+    title: 'Tiếng Việt',
+    abbr: 'vn',
+  }, {
+    title: '中文',
+    abbr: 'zh',
+  }, {
+    title: 'عربى',
+    abbr: 'ar',
+  }, {
+    title: '한국어',
+    abbr: 'ko',
+  }, {
+    title: 'اردو',
+    abbr: 'ur',
+  }, {
+    title: 'မြန်မာ',
+    abbr: 'my',
+  },
+]
+
+class I18nBanner extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeLanguage: locale().substring(0,2) || 'en',
+    };
+    this.displayedLanguageAmount = 4;
+    this.visibleLanguageOptions = languages.slice(0, this.displayedLanguageAmount);
+    this.secondaryLanguageOptions = languages.slice(this.displayedLanguageAmount, languages.length);
+  }
+
+  getLanguageMenuClassName = (language) => {
+    const classNameBase = `coa-I18nBanner__language`;
+    return language.abbr === this.state.activeLanguage
+             ? `${classNameBase}--active`
+             : ''
+  }
+
+  getSecondaryLanguageMenuClassName = () => {
+    const base = `coa-I18nBanner__other-language-options`;
+    return this.state.isOpen ? `${base}--open` : `${base}--closed`;
+  }
+
+  handleSetLanguage = (e) => {
+    e.stopPropagation();
+    e.nativeEvent.stopImmediatePropagation();
+    const languageAbbr = e.target.lang;
+    console.log(languageAbbr)
+    this.setState({
+      activeLanguage: languageAbbr,
+      isOpen: false,
+    })
+  }
+
+  handleExpandMenu = () => {
+    this.setState({
+      isOpen: !this.state.isOpen
+    })
+  }
+
+  render() {
+    return (
+      <div className="coa-I18nBanner">
+        <div className="wrapper">
+          <div className="row">
+            <div className="col-md-4 col-xs">
+              <div className="coa-I18nBanner__prompt">
+                Choose your preferred language
+              </div>
+            </div>
+            <div className="col-md-8 col-xs-12">
+              <ul className="coa-I18nBanner__language-list">
+                { this.visibleLanguageOptions.map((language, i) => {
+                    return (
+                      <li className={`coa-I18nBanner__language ${this.getLanguageMenuClassName(language)}`}
+                        onClick={this.handleSetLanguage}
+                        key={i}
+                      >
+                        <span className="hidden--sm visible--md"
+                          lang={language.abbr}
+                        >
+                          {language.title}
+                        </span>
+                        <span className="hidden--md visible--sm"
+                          lang={language.abbr}
+                        >
+                          {language.abbr.toUpperCase()}
+                        </span>
+                      </li>
+                    )
+                })}
+                { this.secondaryLanguageOptions.length > 0 &&
+                  <li className="coa-I18nBanner__language--other"
+                    onClick={this.handleExpandMenu}
+                  >
+                    <span className="hidden--sm">Other Language </span>
+                    <CaretDownSVG size="20"/>
+                    <ul className={this.getSecondaryLanguageMenuClassName()}>
+                      { this.secondaryLanguageOptions.map((language) => {
+                          return (
+                            <li onClick={this.handleSetLanguage}
+                              className={this.getLanguageMenuClassName(language)}
+                            >
+                              <span lang={language.abbr}>
+                                {language.title}
+                              </span>
+                            </li>
+                          )
+                        })
+                      }
+                    </ul>
+                  </li>
+                }
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
+export default I18nBanner;

src/css/coa.scss

@@ -10,7 +10,9 @@
 
 // base
 @import 'css/base/base';
-@import 'css/base/helpers';
+
+// helpers
+@import 'css/helpers/helpers';
 
 // modules
 @import 'css/modules/form';
@@ -22,4 +24,4 @@
 // layout
 @import 'css/layout/main';
 @import "css/layout/Footer";
-
+@import "css/layout/I18nBanner";

src/css/helpers/_helpers.scss

@@ -0,0 +1,32 @@
+.nowrap {
+  white-space: nowrap;
+}
+
+.hidden--sm {
+// --> display none for small width screens and higher
+  display: none;
+  @include media($medium-screen) {
+    display: inline;
+  }
+}
+
+.hidden--md {
+// --> display none for medium width screens and higher
+  display: inline;
+  @include media($medium-screen) {
+    display: none !important;
+  }
+}
+
+.visible--sm {
+// --> display none by default, display initial for small screens and higher
+  display: inline;
+}
+
+.visible--md {
+// --> display none by default, display initial for medium screens and higher
+  display: none;
+  @include media($medium-screen) {
+    display: inline;
+  }
+}

src/css/layout/_I18nBanner.scss

@@ -0,0 +1,62 @@
+.coa-I18nBanner {
+  width: 100%;
+  background-color: $color-gray-light;
+  padding: $coa-space-level1;
+}
+
+.coa-I18nBanner__language-list {
+  text-align: right;
+  font-size: $small-font-size;
+}
+
+.coa-I18nBanner__prompt {
+  display: none;
+  font-size: $small-font-size;
+  position: absolute;
+  left: -999em;
+  @include media($medium-screen) {
+    position: relative;
+    left: auto;
+    display: block;
+  };
+}
+
+@mixin coa-I18nBanner__language {
+  display: inline;
+  padding: 0 $coa-space-level2;
+  cursor: pointer;
+}
+
+.coa-I18nBanner__language {
+  @include coa-I18nBanner__language;
+}
+
+.coa-I18nBanner__language--active {
+  background-color: $color-gray-lighter;
+}
+
+.coa-I18nBanner__language--other {
+  @include coa-I18nBanner__language;
+  position: relative;
+  svg {
+    vertical-align: middle;
+  }
+}
+
+@mixin coa-I18nBanner__other-language-options {
+  position: absolute;
+  background-color: $color-gray-light;
+  list-style: none;
+  top: $coa-space-level5;
+  right: $coa-space-level2;
+  padding: $coa-space-level3;
+}
+
+.coa-I18nBanner__other-language-options--open {
+  @include coa-I18nBanner__other-language-options;
+}
+
+.coa-I18nBanner__other-language-options--closed {
+  @include coa-I18nBanner__other-language-options;
+  display: none;
+}

src/svg/CaretDown.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function CaretDown(props) {
+  const { size } = props
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" aria-labelledby="title">
+      <title id="title">Caret Arrow Down</title>
+      <path d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+    </svg>
+  )
+}
+export default CaretDown;

yarn.lock

@@ -1109,6 +1109,10 @@ brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
+browser-locale@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/browser-locale/-/browser-locale-1.0.3.tgz#3c6646e6dd5f7a3c62ff51d4ae618a5dd3126911"
+
 browser-pack@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.0.2.tgz#f86cd6cef4f5300c8e63e07a4d512f65fbff4531"