August 2017 dependency updates (#78)

* August 2017 dependency updates

This includes updates for eslint to the newest version. There is a [small issue](airbnb/javascript#1488) around how it parses the eslint config, but based on the aforementioned issue, it does not cause an issue with how eslint is run or configured and will be fixed in an upcoming release. Also ran `eslint —fix` through the code which has come a long way.

* revert datepicker for now (changed their CSS around a bit too much)

.eslintrc

@@ -5,10 +5,6 @@
     "es6": true
   },
   "extends": "airbnb",
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
-  },
   "globals": {
     "$": true
   },
@@ -46,7 +42,7 @@
     "import",
     "react",
     "babel",
-    "jsx-a11y",
+    "jsx-a11y"
   ],
   "rules": {
     "no-trailing-spaces": 1,
@@ -65,6 +61,7 @@
     "key-spacing": [2, { mode: minimum }],
     "no-multi-spaces": [2, { exceptions: { ImportDeclaration: true, VariableDeclarator: true } }],
     "max-len": [0],
+    "no-return-assign": ["error", "except-parens"],
     "no-script-url": 0,
     "no-underscore-dangle": 0,
     "space-before-function-paren": ["error", "never"],

package.json

@@ -11,7 +11,8 @@
   "scripts": {
     "version": "git pull --tags && gulp && git add -A",
     "postversion": "git push --tags && git push",
-    "start": "yarn && gulp docs && gulp server"
+    "start": "yarn && gulp docs && gulp server",
+    "eslint": "eslint"
   },
   "peerDependencies": {
     "react": ">=15.4.2",
@@ -28,17 +29,17 @@
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
     "babel-register": "6.24.1",
-    "browser-sync": "2.18.12",
+    "browser-sync": "2.18.13",
     "component-playground": "2.0.0",
     "cssnano": "3.10.0",
     "del": "3.0.0",
-    "eslint": "3.19.0",
-    "eslint-config-airbnb": "14.1.0",
-    "eslint-loader": "1.7.1",
-    "eslint-plugin-babel": "4.1.1",
-    "eslint-plugin-import": "2.2.0",
-    "eslint-plugin-jsx-a11y": "4.0.0",
-    "eslint-plugin-react": "6.10.3",
+    "eslint": "4.3.0",
+    "eslint-config-airbnb": "15.1.0",
+    "eslint-loader": "1.9.0",
+    "eslint-plugin-babel": "4.1.2",
+    "eslint-plugin-import": "2.7.0",
+    "eslint-plugin-jsx-a11y": "5.1.1",
+    "eslint-plugin-react": "7.1.0",
     "gulp": "3.9.1",
     "gulp-changed": "3.1.0",
     "gulp-duration": "0.0.0",
@@ -61,18 +62,18 @@
     "metalsmith-permalinks": "0.5.0",
     "metalsmith-rootpath": "1.0.4",
     "nunjucks": "3.0.1",
-    "postcss": "6.0.7",
+    "postcss": "6.0.8",
     "postcss-less": "1.1.0",
-    "postcss-reporter": "4.0.0",
-    "postcss-flexbugs-fixes": "3.0.0",
+    "postcss-reporter": "5.0.0",
+    "postcss-flexbugs-fixes": "3.2.0",
     "postcss-sorting": "3.0.1",
     "postcss-svg-fragments": "2.2.0",
     "raw-loader": "0.5.1",
     "react": "15.6.1",
     "react-dom": "15.6.1",
     "stylelint": "8.0.0",
     "stylelint-config-standard": "17.0.0",
-    "webpack": "3.3.0",
+    "webpack": "3.4.1",
     "webpack-stream": "3.2.0",
     "what-input": "4.3.1"
   },
@@ -87,7 +88,7 @@
   },
   "dependencies": {
     "classnames": "2.2.5",
-    "flux": "3.1.2",
+    "flux": "3.1.3",
     "gsap": "1.20.2",
     "gulp-size": "2.1.0",
     "keymirror": "0.1.1",
@@ -97,8 +98,8 @@
     "react-custom-scrollbars": "4.1.2",
     "react-datepicker": "0.48.0",
     "react-image-lightbox": "4.1.0",
-    "react-onclickoutside": "6.1.1",
+    "react-onclickoutside": "6.4.0",
     "react-router": "3.0.5",
-    "react-textarea-autosize": "5.0.7"
+    "react-textarea-autosize": "5.1.0"
   }
 }

src/scripts/NotificationSystem/components/NotificationContainer.jsx

@@ -33,10 +33,10 @@ class NotificationContainer extends React.Component {
     // Adds in bottom spacing
     // Separating this out from timeline since we are using the `reverse()` to show the toast which adds in the alternate of the default props 💥
     const bottomSpacing = new TimelineMax({ paused: true })
-    .to($toast, TOAST_TIMING, {
-      marginBottom: (UtilitySystem.config.contentSpacing / 2),
-      ease: UtilitySystem.config.easing,
-    });
+      .to($toast, TOAST_TIMING, {
+        marginBottom: (UtilitySystem.config.contentSpacing / 2),
+        ease: UtilitySystem.config.easing,
+      });
 
     let forward = true;
     let lastTime = 0;

src/scripts/components/Button.jsx

@@ -98,7 +98,6 @@ class Button extends React.Component {
 
     return markup;
   }
-
 }
 
 export default Button;

src/scripts/components/Close.jsx

@@ -9,7 +9,7 @@ const Close = (props) => {
   const classes = cx('button--reset close', className);
 
   return (
-    <button type="button" className={classes} onClick={onClick} {...opts} role="button" aria-label="Close"><Icon icon="close" /></button>
+    <button type="button" className={classes} onClick={onClick} {...opts} aria-label="Close"><Icon icon="close" /></button>
   );
 };
 

src/scripts/components/Cover.jsx

@@ -74,18 +74,18 @@ class Cover extends React.Component {
     });
 
     $cover.timeline
-    .set($cover, {
-      css: {
-        display: 'flex',
-      },
-    })
-    .to($cover, 0.5, {
-      css: {
-        opacity: 1,
-        y: 0,
-      },
-      ease: UtilitySystem.config.easing,
-    });
+      .set($cover, {
+        css: {
+          display: 'flex',
+        },
+      })
+      .to($cover, 0.5, {
+        css: {
+          opacity: 1,
+          y: 0,
+        },
+        ease: UtilitySystem.config.easing,
+      });
   }
 
   componentDidUpdate(prevProps) {

src/scripts/components/DropdownMenuItem.jsx

@@ -66,13 +66,13 @@ class DropdownMenuItem extends React.Component {
     });
 
     const renderContent = () =>
-      <div className="dropdown__menu__item__content">
+      (<div className="dropdown__menu__item__content">
         {avatar ? (<Avatar size="small" name={avatar.name} type={avatar.type} image={avatar.image} className="u-m-r-small" />) : null}
         <div className="dropdown__menu__item__content__container">
           <div className="dropdown__menu__item__content__label">{icon ? (<Icon icon={icon} className="u-m-r-small" />) : null}<span className="u-text-overflow">{label}</span></div>
           {labelDesc ? (<div className="dropdown__menu__item__content__desc">{labelDesc}</div>) : null}
         </div>
-      </div>;
+      </div>);
 
     let markup = '';
 

src/scripts/components/DropdownWrapper.jsx

@@ -92,16 +92,16 @@ class DropdownWrapper extends React.Component {
     });
 
     $dropdown.timeline
-    .set($dropdownMenu, {
-      display: 'block',
-    })
-    .to($dropdownMenu, 0.25, {
-      css: {
-        y: 0,
-        opacity: 1,
-      },
-      ease: UtilitySystem.config.easing,
-    });
+      .set($dropdownMenu, {
+        display: 'block',
+      })
+      .to($dropdownMenu, 0.25, {
+        css: {
+          y: 0,
+          opacity: 1,
+        },
+        ease: UtilitySystem.config.easing,
+      });
   }
 
   handleClickOutside = () => {

src/scripts/components/LoaderCircle.jsx

@@ -25,10 +25,10 @@ class LoaderCircle extends React.Component {
       repeat: -1,
       paused: this.props.pause,
     })
-    .to($loader, 0.75, {
-      rotation: '360deg',
-      ease: Linear.easeNone,
-    });
+      .to($loader, 0.75, {
+        rotation: '360deg',
+        ease: Linear.easeNone,
+      });
   }
 
   componentDidUpdate() {

src/scripts/components/LoaderPulse.jsx

@@ -24,14 +24,14 @@ class LoaderPulse extends React.Component {
     $loader.timeline = new TimelineMax({
       paused: this.props.pause,
     })
-    .staggerTo($loaderPulses, 0.25, {
-      opacity: 1,
-      repeat: -1,
-      repeatDelay: 0.25,
-      yoyo: true,
-      scale: 1.25,
-      ease: Linear.easeNone,
-    }, 0.125, 'loader');
+      .staggerTo($loaderPulses, 0.25, {
+        opacity: 1,
+        repeat: -1,
+        repeatDelay: 0.25,
+        yoyo: true,
+        scale: 1.25,
+        ease: Linear.easeNone,
+      }, 0.125, 'loader');
   }
 
   componentDidUpdate() {

src/scripts/components/MessageBox.jsx

@@ -109,7 +109,6 @@ class MessageBox extends React.Component {
       </div>
     );
   }
-
 }
 
 export default MessageBox;

src/scripts/components/Modal.jsx

@@ -76,21 +76,21 @@ class Modal extends React.Component {
     });
 
     $modal.timeline
-    .set($modal, {
-      display: 'block',
-    })
-    .to($modal, 0.25, {
-      css: {
-        opacity: 1,
-      },
-    }, 'modal')
-    .to($modal.querySelector('.modal__dialog'), 0.5, {
-      css: {
-        opacity: 1,
-        y: 0,
-      },
-      ease: UtilitySystem.config.easing,
-    }, 'modal');
+      .set($modal, {
+        display: 'block',
+      })
+      .to($modal, 0.25, {
+        css: {
+          opacity: 1,
+        },
+      }, 'modal')
+      .to($modal.querySelector('.modal__dialog'), 0.5, {
+        css: {
+          opacity: 1,
+          y: 0,
+        },
+        ease: UtilitySystem.config.easing,
+      }, 'modal');
   }
 
   componentDidUpdate(prevProps) {

src/scripts/components/Textarea.jsx

@@ -117,12 +117,12 @@ class Textarea extends React.Component {
         {showLabel()}
         <textarea id={name} className={textAreaClasses} rows={rows} placeholder={placeholder} value={this.state.value} onChange={this._handleChange} disabled={disabled} />
         <div className="form__control-footer">
-          {(showValidationMessage() || showExplanationMessage()) ?
-            <div>
+          {(showValidationMessage() || showExplanationMessage())
+            ? <div>
               {showValidationMessage()}
               {showExplanationMessage()}
             </div>
-          : ''}
+            : ''}
           {showCharacterCount()}
         </div>
       </div>

src/scripts/components/VariableMessage.jsx

@@ -335,7 +335,7 @@ class VariableMessage extends React.Component {
                 <button className="button--reset u-text-muted u-text-small" onClick={this.handleInitValue}>Reset</button>
               </div> : null}
           </div>
-        : null }
+          : null }
         <div
           className="variable-message__compose"
           contentEditable={!readOnly}
@@ -362,7 +362,7 @@ class VariableMessage extends React.Component {
             <label htmlFor={variableMessagePreviewName} className="u-block">{previewLabel}</label>
             <Message type="primary" direction="inbound" ref={ref => (this.preview = ref)} />
           </div>
-        : null}
+          : null}
       </div>
     );
   }

src/scripts/docs/AvatarApp.jsx

@@ -21,7 +21,7 @@ const exampleScope  = {
 };
 
 const AvatarApp = () =>
-  <div>
+  (<div>
 
 
     <section className="site-section">
@@ -72,6 +72,6 @@ const AvatarApp = () =>
       <h3 className="site-subheadline">Playground</h3>
       <Playground theme="default" docClass={Avatar} propDescriptionMap={avatarDocs} codeText={avatarExample} scope={exampleScope} noRender={false} />
     </section>
-  </div>;
+  </div>);
 
 ReactDOM.render(<AvatarApp />, document.getElementById('js-app'));

src/scripts/docs/BucketApp.jsx

@@ -33,7 +33,7 @@ const bucketHeaderScope  = {
 };
 
 const BucketApp = () =>
-  <div>
+  (<div>
     <section className="site-section">
       <h3 className="site-subheadline">Buckets</h3>
       <p className="site-text-lead">Buckets are used to contain and separate portions of content. Buckets are most often constructed using <span className="u-text-accent">BucketHeader</span> and <span className="u-text-accent">BucketBody</span> child components.</p>
@@ -56,6 +56,6 @@ const BucketApp = () =>
       <h3 className="site-subheadline">Bucket Header Playground</h3>
       <Playground theme="default" docClass={BucketHeader} propDescriptionMap={bucketHeaderDocs} codeText={bucketHeaderExample} scope={bucketHeaderScope} noRender={false} />
     </section>
-  </div>;
+  </div>);
 
 ReactDOM.render(<BucketApp />, document.getElementById('js-app'));

src/scripts/docs/ButtonApp.jsx

@@ -28,7 +28,7 @@ const exampleScope  = {
 };
 
 const ButtonApp = () =>
-  <div>
+  (<div>
     <section className="site-section">
       <h3 className="site-subheadline">Button Types</h3>
       <p className="site-copy"><code>type=&quot;default | primary | secondary | outline-primary | link | danger&quot;</code></p>
@@ -157,6 +157,6 @@ const ButtonApp = () =>
       <h3 className="site-subheadline">Playground</h3>
       <Playground theme="default" docClass={Button} propDescriptionMap={buttonDocs} codeText={buttonExample} scope={exampleScope} noRender={false} />
     </section>
-  </div>;
+  </div>);
 
 ReactDOM.render(<ButtonApp />, document.getElementById('js-app'));

src/scripts/docs/CloseApp.jsx

@@ -16,7 +16,7 @@ const exampleScope  = {
 };
 
 const CloseApp = () =>
-  <div>
+  (<div>
     <section className="site-section">
       <h3 className="site-subheadline">Close</h3>
       <p className="site-text-lead">The Close component is used within numerous components - particularly in our feedback system.</p>
@@ -27,6 +27,6 @@ const CloseApp = () =>
       <Playground theme="default" docClass={Close} propDescriptionMap={closeDocs} codeText={closeExample} scope={exampleScope} noRender={false} />
     </section>
 
-  </div>;
+  </div>);
 
 ReactDOM.render(<CloseApp />, document.getElementById('js-app'));