Merge pull request #22 from Wikia/IW-1022

IW-1022 | global nav
Wikia · Mar 11, 2019 · e2c5e9c · e2c5e9c
2 parents 0ee885b + 9f11f81
commit e2c5e9c
Show file tree

Hide file tree

Showing 120 changed files with 10,663 additions and 416 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,6 +6,7 @@ docs/**
 assets/**
 components/**
 hocs/**
+hooks/**
 icons/**
 models/**
 systems/**
diff --git a/.eslintrc b/.eslintrc
@@ -65,7 +65,7 @@
       "elements": ["img", "object", "area", "input[type=\"image\"]"],
       "img": ["Image"]
     }],
-    "jest/consistent-test-it": "error",
+    "jest/consistent-test-it": ["error", {"fn": "test"}],
     "jest/no-disabled-tests": "error",
     "jest/no-focused-tests": "error",
     "jest/no-hooks": "warn",
@@ -77,6 +77,9 @@
     "jest/valid-expect": "error",
     "react/button-has-type": 0,
     "jsx-a11y/label-has-for": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0
   },
   "plugins": [
     "react",

diff --git a/.gitignore b/.gitignore
@@ -75,6 +75,7 @@ package-lock.json
 /assets
 /components
 /hocs
+/hooks
 /icons
 /models
 /systems
diff --git a/config/config.js b/config/config.js
@@ -4,6 +4,7 @@ module.exports = {
     sourceDirectories: [
         'components',
         'hocs',
+        'hooks',
         'models',
         'systems',
         'assets',
@@ -19,5 +20,7 @@ module.exports = {
         'react-select',
         'react-redux',
         'immutable',
+        'react-i18next',
+        'i18next',
     ],
 };
diff --git a/config/rollup.config.js b/config/rollup.config.js
@@ -1,3 +1,4 @@
+import fs from 'fs-extra';
 import glob from 'glob';
 import babel from 'rollup-plugin-babel';
 import resolve from 'rollup-plugin-node-resolve';
@@ -48,7 +49,15 @@ const buildConfig = file =>
                 module: true,
             }),
             sass({
-                output: true,
+                output: function (styles, styleNodes) {
+                    const filteredNodes = styleNodes.filter(node => node.id.indexOf(`${file}/`) !== -1);
+
+                    if (!filteredNodes.length) {
+                        return;
+                    }
+
+                    fs.outputFileSync(`${config.outputDir}/${file.replace('source/', '')}.css`, filteredNodes[0].content);
+                },
             }),
             svg({
                 svgo: {

diff --git a/config/styleguide.ExampleWrapper.js b/config/styleguide.ExampleWrapper.js
@@ -2,9 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
+import i18n from 'i18next';
+import { initReactI18next } from "react-i18next";
+import translation from 'design-system/i18n/en/design-system.json';
+
 import ButtonGroup from '../source/components/ButtonGroup';
 import Button from '../source/components/Button';
 
+i18n
+.use(initReactI18next) // passes i18n down to react-i18next
+.init({
+    resources: {
+        en: {
+            translation,
+        }
+    },
+    lng: "en",
+    fallbackLng: "en",
+
+    interpolation: {
+        escapeValue: false,
+        prefix: '{',
+        suffix: '}',
+    }
+});
+
 const Wrapper = styled.div`
     border: 1px solid rgba(0, 0, 0, .2);
 `;

diff --git a/config/styleguide.config.js b/config/styleguide.config.js
@@ -65,6 +65,8 @@ function getSections() {
     });
 }
 
+
+
 module.exports = {
     title: 'react-common',
     template: {
@@ -102,4 +104,7 @@ module.exports = {
             dangerousTaggedTemplateString: true,
         },
     },
+    require: [
+        path.join(__dirname, '../source/styleguide.css')
+    ],
 };
diff --git a/config/styleguide.config.json b/config/styleguide.config.json
@@ -53,6 +53,7 @@
       "Fieldset",
       "FloatingButton",
       "FloatingButtonGroup",
+      "GlobalNavigation",
       "Icon",
       "IconSprite",
       "Input",
@@ -75,6 +76,13 @@
       "withTimeoutFallback"
     ]
   },
+  {
+    "name": "Hooks",
+    "directory": "hooks",
+    "items": [
+      "useLazyLoad"
+    ]
+  },
   {
     "name": "Models",
     "description": "Wrappers for immutable.js Records.",

diff --git a/docs/build/1.31af606a.js b/docs/build/1.31af606a.js
diff --git a/docs/build/1.fe780730.js b/docs/build/1.fe780730.js
diff --git a/docs/build/bundle.6126b43e.js b/docs/build/bundle.6126b43e.js
diff --git a/docs/build/bundle.9d2af518.js b/docs/build/bundle.9d2af518.js
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.6126b43e.js"></script></body></html>
+<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>react-common</title><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:400,700"></head><body><div id="rsg-root"></div><div id="app"></div><script src="build/bundle.9d2af518.js"></script></body></html>
diff --git a/package.json b/package.json
@@ -37,13 +37,16 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "date-fns": "^1.29.0",
-    "design-system": "git://github.com/Wikia/design-system.git#19.2.0",
+    "design-system": "git://github.com/Wikia/design-system.git#20.0.0",
+    "i18next": "^14.0.1",
     "immutable": "^4.0.0-rc.12",
     "prop-types": "^15.6.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "react-i18next": "^10.0.0",
     "react-redux": "^5.0.7",
-    "react-select": "^2.1.1"
+    "react-select": "^2.1.1",
+    "uuid": "^3.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
@@ -71,18 +74,20 @@
     "eslint-plugin-jest": "^22.0.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
+    "fs-extra": "^7.0.1",
     "glob": "^7.1.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
     "lodash": "^4.17.11",
     "mkdirp": "^0.5.1",
     "node-sass": "^4.10.0",
+    "path": "^0.12.7",
     "postcss-modules": "^1.4.1",
     "raw-loader": "^1.0.0",
     "react-docgen": "3.0.0",
-    "react-styleguidist": "^8.0.0",
+    "react-styleguidist": "^8.0.6",
     "react-svg-loader": "^2.1.0",
-    "react-test-renderer": "^16.6.3",
+    "react-test-renderer": "^16.8.3",
     "redux": "^4.0.0",
     "redux-test-utils": "^0.3.0",
     "rimraf": "^2.6.2",

diff --git a/source/components/BannerNotification/index.js b/source/components/BannerNotification/index.js
@@ -10,17 +10,14 @@ import './styles.scss';
 /**
  * This is a single component used in `BannerNotifications` component.
  */
-const BannerNotification = ({
-    className, type, text, onClose, children,
-}) => (
+const BannerNotification = ({ className, type, text, onClose, children }) => (
     <div className={`wds-banner-notification ${getClassName(type)} ${className}`}>
         <div className="wds-banner-notification__icon">{getIcon(type)}</div>
         <span className="wds-banner-notification__text">{children || text}</span>
         <IconCloseTiny className="wds-banner-notification__close" onClick={onClose} />
     </div>
 );
 
-
 BannerNotification.propTypes = {
     /** Children to display */
     children: PropTypes.node,

diff --git a/source/components/BannerNotifications/README.md b/source/components/BannerNotifications/README.md
@@ -1,6 +1,6 @@
 By default it renders nothing:
 ```js
-<BannerNotifications messages={[]} onClick={() => {}} />
+<BannerNotifications messages={[]} onClose={() => {}}/>
 ```
 
 But with proper data it can display all the messages:

diff --git a/source/components/Dropdown/components/DropdownContent/index.js b/source/components/Dropdown/components/DropdownContent/index.js
@@ -9,22 +9,23 @@ import refPropType from '../../../../utils/refPropType';
  */
 const DropdownContent = ({
     children,
+    className,
     dropdownLeftAligned,
     dropdownRightAligned,
     scrollable,
     isLevel2,
     elementRef,
 }) => {
-    const className = classNames({
+    const allClassNames = classNames({
         'wds-dropdown__content': true,
         'wds-is-left-aligned': dropdownLeftAligned,
         'wds-is-right-aligned': dropdownRightAligned,
         'wds-is-not-scrollable': !scrollable,
         'wds-dropdown-level-2__content': isLevel2,
-    });
+    }, className);
 
     return (
-        <div className={className} ref={elementRef}>
+        <div className={allClassNames} ref={elementRef}>
             {children}
         </div>
     );
@@ -35,6 +36,11 @@ DropdownContent.propTypes = {
      * React Component to display as content
      */
     children: PropTypes.node,
+
+    /**
+     * Additional class name
+     */
+    className: PropTypes.string,
     /**
      * Should content be left-aligned with the dropdown toggle
      */
@@ -59,6 +65,7 @@ DropdownContent.propTypes = {
 
 DropdownContent.defaultProps = {
     children: null,
+    className: '',
     dropdownLeftAligned: false,
     dropdownRightAligned: false,
     scrollable: true,

diff --git a/source/components/Dropdown/components/DropdownToggle/index.js b/source/components/Dropdown/components/DropdownToggle/index.js
@@ -57,8 +57,6 @@ class DropdownToggle extends React.Component {
         const Component = attrs.href ? 'a' : 'div';
 
         return (
-            // TODO: Fix a11y
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <Component onClick={onClick} className={fullClassName} {...attrs} role="button">
                 {toggleContentComponent}
             </Component>