Add GlobalNavigation/GlobalFooter components

.babelrc

@@ -1,3 +1,7 @@
 {
+  "plugins": [
+    "babel-plugin-transform-object-rest-spread",
+    "transform-class-properties"
+  ],
   "presets": ["env", "react"]
 }

.eslintrc

@@ -8,6 +8,7 @@
   "rules": {
     "indent": ["error", 2, {"VariableDeclarator": 1, "SwitchCase": 1}],
     "no-tabs": 1,
+    "camelcase": 0,
     "no-underscore-dangle": 0,
     "no-unused-vars": 0,
     "react/jsx-filename-extension": 0,

components.json

@@ -36,7 +36,9 @@
     "name": "Design System UI",
     "components": [
       "BannerNotification",
-      "BannerNotifications"
+      "BannerNotifications",
+      "GlobalNavigation",
+      "GlobalFooter"
     ]
   },
   {

package.json

@@ -7,11 +7,14 @@
   "license": "PRIVATE",
   "private": true,
   "dependencies": {
-    "design-system": "git://github.com/Wikia/design-system.git#12.0.0",
+    "axios": "^0.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "design-system": "git://github.com/Wikia/design-system.git#2c96b85b1c2121d5204b3e9a446934c0e3e2e76e",
+    "lodash.get": "^4.4.2",
     "lodash.uniqueid": "^4.0.1",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
   "scripts": {
     "build:watch": "styleguidist server",
@@ -34,6 +37,7 @@
     "test": "yarn lint && yarn test:run && yarn coverage"
   },
   "devDependencies": {
+    "axios-mock-adapter": "^1.15.0",
     "babel-core": "^6.26.0",
     "babel-jest": "^22.4.1",
     "babel-loader": "^7.1.3",

src/components/GlobalFooter/__snapshots__/index.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalFooter should render correctly with default data 1`] = `
+<div>
+  NOT IMPLEMENTED
+</div>
+`;

src/components/GlobalFooter/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * TODO Not yet implemented
+ */
+const GlobalFooter = () => <div>NOT IMPLEMENTED</div>;
+
+export default GlobalFooter;

src/components/GlobalFooter/index.spec.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import sinon from 'sinon';
+
+import GlobalFooter from './index';
+
+test('GlobalFooter should render correctly with default data', () => {
+  const component = renderer.create(
+    <GlobalFooter />
+  );
+  expect(component.toJSON()).toMatchSnapshot();
+});

src/components/GlobalNavigation/README.md

@@ -0,0 +1,14 @@
+User:
+```js
+<GlobalNavigation api={() => Promise.resolve({data: require('./mockedData').user})}/>
+```
+
+Anon:
+```js
+<GlobalNavigation api={() => Promise.resolve({data: require('./mockedData').anon})}/>
+```
+
+Anon with Partner Slot:
+```js
+<GlobalNavigation api={() => Promise.resolve({data: require('./mockedData').anonPartner})}/>
+```

src/components/GlobalNavigation/__snapshots__/index.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalNavigation should work with axios 1`] = `
+<GlobalNavigation
+  api={[Function]}
+  className=""
+/>
+`;

src/components/GlobalNavigation/components/GlobalNavigationWrapper.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import get from 'lodash.get';
+
+import Logo from './Logo';
+import Link from './Link';
+import Search from './Search';
+import User from './User';
+import UserAnon from './UserAnon';
+
+import './GlobalNavigationWrapper.scss';
+
+class GlobalNavigationWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.onSearchStateChange = this.onSearchStateChange.bind(this);
+  }
+
+  state = {
+    searchIsFocused: false,
+  };
+
+  onSearchStateChange(searchIsFocused) {
+    this.setState({searchIsFocused});
+  }
+
+  renderLeft() {
+    const logo = get(this.props.navigationData, 'logo');
+    const navLinks = get(this.props.navigationData, 'main_navigation');
+
+    const navigationLinks = (
+      <nav className="wds-global-navigation__links">
+        {navLinks.map(
+          // eslint-disable-next-line react/no-array-index-key
+          (link, index) => <Link key={`link-${index}`} link={link} />
+        )}
+      </nav>
+    );
+
+    return (
+      <div className="wds-global-navigation__content-bar-left">
+        <Logo {...logo} />
+        {navigationLinks}
+      </div>
+    );
+  }
+
+  renderDropdownControls() {
+    const createWiki = get(this.props.navigationData, 'create_wiki');
+    const search = get(this.props.navigationData, 'search');
+    const anonLinks = get(this.props.navigationData, 'anon');
+    const user = get(this.props.navigationData, 'user');
+
+    const startWikiButton = (
+      <div className="wds-global-navigation__start-a-wiki">
+        <Link link={createWiki} />
+      </div>
+    );
+
+    return (
+      <div className="wds-global-navigation__dropdown-controls">
+        <Search onStateChange={this.onSearchStateChange} {...search} />
+        <UserAnon anonLinks={anonLinks} />
+        <User user={user} />
+        {startWikiButton}
+      </div>
+    );
+  }
+
+  renderRight() {
+    return (
+      <div className="wds-global-navigation__content-bar-right">
+        {this.renderDropdownControls()}
+      </div>
+    );
+  }
+
+  render() {
+    const partnerSlot = get(this.props.navigationData, 'partner_slot');
+
+    // loaded
+    const classes = [
+      'wds-global-navigation',
+      'wds-search-is-always-visible',
+      this.state.searchIsFocused ? 'wds-search-is-active' : null,
+      partnerSlot ? 'wds-has-partner-slot' : null,
+      this.props.className,
+    ].filter(c => c).join(' ');
+
+    return (
+      <div className={classes}>
+        <div className="wds-global-navigation__content-container">
+          {this.renderLeft()}
+          {this.renderRight()}
+          <Link link={partnerSlot} />
+        </div>
+      </div>
+    );
+  }
+}
+
+GlobalNavigationWrapper.propTypes = {
+  className: PropTypes.string,
+  // eslint-disable-next-line react/forbid-prop-types
+  navigationData: PropTypes.object.isRequired,
+};
+
+GlobalNavigationWrapper.defaultProps = {
+  className: '',
+};
+
+export default GlobalNavigationWrapper;

src/components/GlobalNavigation/components/GlobalNavigationWrapper.scss

@@ -0,0 +1,37 @@
+// import variables
+@import "~design-system/dist/scss/wds-functions/index.scss";
+@import "~design-system/dist/scss/wds-mixins/index.scss";
+@import "~design-system/dist/scss/wds-variables/index.scss";
+
+// import wds-button
+@import "~design-system/dist/scss/wds-components/_global-navigation.scss";
+
+// hacks
+// .wds-global-navigation__partner-slot-image {
+// 	max-height: 35px;
+// 	max-width: 60px;
+// }
+//
+// .wds-global-navigation__search-toggle {
+// 	background: transparent;
+// 	border: 0;
+// 	color: inherit;
+// 	font: inherit;
+// }
+//
+// .wds-global-navigation__logo {
+// 	position: relative;
+// }
+
+.wds-global-navigation__edition-text {
+	bottom: -9px;
+	color: $wds-fandom-color-middle-gray;
+	font-size: 10px;
+	font-weight: 500;
+	letter-spacing: .5px;
+	position: absolute;
+	right: 0;
+	text-align: right;
+	text-transform: uppercase;
+	width: 130px;
+}