Wikia · vforge · Dec 14, 2018 · Dec 10, 2018 · Dec 11, 2018 · Dec 11, 2018
@@ -11,6 +11,7 @@ The following directories and files are auto-generated from the files in [source
 * [components](./components)
 * [hocs](./hocs)
 * [models](./models)
+* [systems](./systems)
 * [docs](./docs)
 * [README.md](./README.md)
 * [package.json](./package.json)

@@ -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-design-system</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.dbb37ab1.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-design-system</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.99143a78.js"></script></body></html>
@@ -10,6 +10,7 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-select": "^2.1.1",
+    "react-redux": "^5.0.7",
     "immutable": "^4.0.0-rc.12"
   }
 }
@@ -1,10 +1,24 @@
 {
+    "presets": [
+        "@babel/preset-react",
+        ["@babel/preset-env", {"targets": {"node": "current"}, "modules": false}]
+    ],
     "plugins": [
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-syntax-object-rest-spread"
+        "@babel/plugin-syntax-dynamic-import",
+        "@babel/plugin-proposal-object-rest-spread",
+        "@babel/plugin-proposal-class-properties"
     ],
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
-    ]
+    "env": {
+        "test": {
+            "plugins": [
+                "@babel/plugin-syntax-dynamic-import",
+                "@babel/plugin-proposal-object-rest-spread",
+                "@babel/plugin-proposal-class-properties"
+            ],
+            "presets": [
+                "@babel/preset-react",
+                ["@babel/preset-env", {"targets": {"node": "current"}}]
+            ]
+        }
+    }
 }
@@ -54,14 +54,7 @@
         "newlines-between": "always-and-inside-groups"
       }
     ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          "../*"
-        ]
-      }
-    ],
+    "no-restricted-imports": 0,
     "class-methods-use-this": 0,
     "no-use-before-define": 0,
     "react/destructuring-assignment": 0,
@@ -92,5 +85,8 @@
     "import",
     "jsx-a11y",
     "jest"
-  ]
+  ],
+  "globals": {
+    "mockComponent": true
+  }
 }
@@ -5,6 +5,7 @@ module.exports = {
         'components',
         'hocs',
         'models',
+        'systems',
     ],
     externalDependencies: [
         'date-fns',
@@ -14,6 +15,7 @@ module.exports = {
         'react',
         'react-dom',
         'react-select',
+        'react-redux',
         'immutable',
     ],
 };
@@ -1,4 +1,7 @@
+import React from 'react';
 import Adapter from 'enzyme-adapter-react-16'; // eslint-disable-line import/no-extraneous-dependencies
 import Enzyme from 'enzyme'; // eslint-disable-line import/no-extraneous-dependencies
 
 Enzyme.configure({ adapter: new Adapter() });
+
+global.mockComponent = name => props => <mocked-component name={name} {...props} />;
@@ -17,11 +17,11 @@ function getSections() {
     return schema.map(({
         name,
         content,
+        items,
         components,
+        directory,
         description,
         sections,
-        hocs,
-        models,
     }) => {
         const section = {
             content,
@@ -36,20 +36,11 @@ function getSections() {
             );
         }
 
-        if (hocs) {
-            section.sections = hocs.map(
-                hocName => ({
-                    name: hocName,
-                    content: resolve('../hocs', hocName, 'README.md'),
-                })
-            );
-        }
-
-        if (models) {
-            section.sections = models.map(
-                modelName => ({
-                    name: modelName,
-                    content: resolve('../models', modelName, 'README.md'),
+        if (items && directory) {
+            section.sections = items.map(
+                itemName => ({
+                    name: itemName,
+                    content: resolve(`../${directory}`, itemName, 'README.md'),
                 })
             );
         }

@@ -17,66 +17,53 @@
     ]
   },
   {
-    "name": "Design System Elements",
-    "components": [
-      "Button",
-      "ButtonGroup",
-      "FloatingButton",
-      "FloatingButtonGroup",
-      "Spinner",
-      "Dropdown"
-    ]
-  },
-  {
-    "name": "Design System Form Elements",
-    "components": [
-      "Input",
-      "Fieldset"
-    ]
-  },
-  {
-    "name": "Design System UI",
-    "components": [
-      "BannerNotification",
+    "name": "Systems",
+    "description": "Complete system that can be used in React apps",
+    "directory": "systems",
+    "items": [
       "BannerNotifications"
     ]
   },
   {
-    "name": "Design System Icons",
-    "components": [
-      "IconSprite",
-      "Icon",
-      "VideoPlayIcon"
-    ]
-  },
-  {
-    "name": "Design System Flow",
+    "name": "Components",
+    "description": "React components",
     "components": [
+      "BannerNotification",
+      "BannerNotifications",
+      "Button",
+      "ButtonGroup",
       "ContentWell",
-      "FandomContentWell"
+      "Dropdown",
+      "ExpandableText",
+      "FandomBackgroundImage",
+      "FandomContentWell",
+      "Fieldset",
+      "FloatingButton",
+      "FloatingButtonGroup",
+      "Icon",
+      "IconSprite",
+      "Input",
+      "Select",
+      "Spinner",
+      "Timeago",
+      "VideoPlayIcon",
+      "Vignette"
     ]
   },
   {
-    "name": "Higher Order Components (hocs)",
-    "hocs": [
+    "name": "Higher Order Components",
+    "directory": "hocs",
+    "items": [
       "withTimeoutFallback"
     ]
   },
   {
     "name": "Models",
-    "models": [
+    "description": "Wrappers for immutable.js Records.",
+    "directory": "models",
+    "items": [
       "Model",
       "Loadable"
     ]
-  },
-  {
-    "name": "Other",
-    "components": [
-      "FandomBackgroundImage",
-      "Vignette",
-      "Timeago",
-      "ExpandableText",
-      "Select"
-    ]
   }
 ]
@@ -1,8 +1,10 @@
 Adds a component to display after a set time (accurate to the nearest 100ms)
 
-Defaults:
+## Usage
 
 ```js static
+import withTimeoutFallback from '@react-design-system/hocs/withTimeoutFallback';
+
 const Spinner = props => (<div> ...spinner </div>)
 const SpinnerWithTimeout = withTimeoutFallback(Spinner);
 
@@ -13,6 +15,8 @@ const SpinnerWithTimeout = withTimeoutFallback(Spinner);
 Custom Fallback and Timeout:
 
 ```js static
+import withTimeoutFallback from '@react-design-system/hocs/withTimeoutFallback';
+
 const Spinner = props => (<div> ...spinner </div>)
 const Fallback = props => (<div> Error Loading </div>)
 const options = {timeout: 10000, FallbackComponent: Fallback};

@@ -36,8 +36,9 @@
     "@babel/node": "^7.0.0",
     "@babel/plugin-external-helpers": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
@@ -50,6 +51,7 @@
     "design-system": "git://github.com/Wikia/design-system.git#14.2.0",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
+    "enzyme-redux": "^0.2.1",
     "enzyme-to-json": "^3.3.4",
     "eslint": "^5.9.0",
     "eslint-config-airbnb": "^17.1.0",
@@ -68,9 +70,12 @@
     "raw-loader": "^0.5.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
+    "react-redux": "^5.0.7",
     "react-select": "^2.1.1",
     "react-styleguidist": "^7.3.8",
     "react-test-renderer": "^16.6.3",
+    "redux": "^4.0.0",
+    "redux-test-utils": "^0.3.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.66.2",
     "rollup-plugin-babel": "^4.0.3",

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+
+import BannerNotifications from '../../components/BannerNotifications';
+
+import { removeNotfication } from './actions';
+
+const mapStateToProps = state => ({
+    messages: state.BannerNotificationsStore.getNotifications().toJS(),
+});
+
+const mapDispatchToProps = dispatch => ({
+    onClose(id) {
+        // ignore what component will call
+        /* istanbul ignore next */
+        dispatch(removeNotfication(id));
+    },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(BannerNotifications);
@@ -0,0 +1,15 @@
+import React from 'react';
+import { createMockStore } from 'redux-test-utils';
+import { mountWithStore } from 'enzyme-redux';
+
+import StoreModel from './StoreModel';
+import BannerNotificationsComponent from './BannerNotificationsComponent';
+
+jest.mock('../../components/BannerNotifications', () => mockComponent('BannerNotifications'));
+
+test('BannerNotifications renders component', () => {
+    const component = mountWithStore(<BannerNotificationsComponent />, createMockStore({
+        BannerNotificationsStore: StoreModel.empty(),
+    }));
+    expect(component.render()).toMatchSnapshot();
+});
Original file line number	Diff line number	Diff line change
		@@ -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-design-system</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.dbb37ab1.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-design-system</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.99143a78.js"></script></body></html>