style(lint): Update lint dependencies: eslint, eslint-plugin-jsx-a11y…

…, eslint-plugin-react

Trying to fix the peer dependency warnings that we have, but not there yet.

config/styleguide.config.js

@@ -206,8 +206,7 @@ module.exports = {
                   path.resolve('src/components/Typography/Paragraph/Paragraph.jsx'),
                   path.resolve('src/components/Typography/Text/Text.jsx'),
                   path.resolve('src/components/Typography/Text/TextSup/TextSup.jsx'),
-// Hiding Text subscripts until we identify a concrete use for them
-// path.resolve('src/components/Typography/Text/TextSub/TextSub.jsx'),
+                  // Hiding Text subscripts until we identify a concrete use for them
                   path.resolve('src/components/Typography/Strong/Strong.jsx'),
                   path.resolve('src/components/Typography/Small/Small.jsx')
                 ]
@@ -219,12 +218,10 @@ module.exports = {
                 return [
                   path.resolve('src/components/Typography/DisplayHeading/DisplayHeading.jsx'),
                   path.resolve('src/components/Typography/DisplayHeading/DisplayHeadingSup/DisplayHeadingSup.jsx'),
-// Hiding DisplayHeading subscripts until we identify a concrete use for them
-// path.resolve('src/components/Typography/DisplayHeading/DisplayHeadingSub/DisplayHeadingSub.jsx')
+                  // Hiding DisplayHeading subscripts until we identify a concrete use for them
                   path.resolve('src/components/Typography/Heading/Heading.jsx'),
                   path.resolve('src/components/Typography/Heading/HeadingSup/HeadingSup.jsx')
-// Hiding Heading subscripts until we identify a concrete use for them
-// path.resolve('src/components/Typography/Heading/HeadingSub/HeadingSub.jsx')
+                  // Hiding Heading subscripts until we identify a concrete use for them
                 ]
               }
             }

package.json

@@ -66,12 +66,11 @@
     "echint": "^4.0.1",
     "enzyme": "^2.9.1",
     "enzyme-to-json": "^1.5.1",
-    "eslint": "3.19.0",
-    "eslint-config-airbnb": "^15.0.2",
+    "eslint": "^4.7.2",
     "eslint-plugin-import": "^2.7.0",
     "eslint-plugin-jest": "^20.0.3",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "^7.2.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "7.0.0",
     "file-loader": "^0.11.2",
     "generate-changelog": "^1.3.0",
     "identity-obj-proxy": "^3.0.0",

src/components/Icons/StandaloneIcon/StandaloneIcon.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 
 import Icon from '../Icon/Icon'
 
-  /**
-   * An icon that has meaning within the context of the page,
-   * which should be communicated to screen readers.
-   *
-   * <span class="docs--badge__wip">wip</span>
-   */
+/**
+ * An icon that has meaning within the context of the page,
+ * which should be communicated to screen readers.
+ *
+ * <span class="docs--badge__wip">wip</span>
+ */
 const StandaloneIcon = ({ symbol, variant, size, a11yText, ...rest }) => (
   <Icon {...rest} symbol={symbol} variant={variant} size={size} aria-label={a11yText} />
 )

src/components/Tooltip/Tooltip.jsx

@@ -7,9 +7,9 @@ import DecorativeIcon from '../Icons/DecorativeIcon/DecorativeIcon'
 
 import styles from './Tooltip.modules.scss'
 
-  /**
-   * Used to provide more detailed instructions.
-   */
+/**
+ * Provide more detailed instructions.
+ */
 const Tooltip = ({ direction, children, ...rest }) => {
   return (
     <div {...safeRest(rest)} className={styles.wrapper}>
@@ -24,10 +24,7 @@ const Tooltip = ({ direction, children, ...rest }) => {
 }
 
 Tooltip.propTypes = {
-  direction: PropTypes.oneOf([
-    'left',
-    'right'
-  ]),
+  direction: PropTypes.oneOf(['left', 'right']),
   /**
    * The content.
    */

src/old-components/ExpandCollapse/Group.jsx

@@ -11,7 +11,6 @@ import classNames from 'classnames'
  * See [ExpandCollapse.Panel](#panel) for example.
  */
 class Group extends Component {
-
   constructor(props) {
     super(props)
     const { activeKeys } = this.props

src/old-components/ExpandCollapse/Panel.jsx

@@ -12,7 +12,6 @@ import './Panel.scss'
  * Panel is used with `ExpandCollapse.Group` to produce an ExpandCollapse set.
  */
 class Panel extends Component {
-
   componentWillMount() {
     const id = Math.random().toString(36).substr(2, 9)
     this.setId(id)

src/old-components/ExpandCollapse/__tests__/ExpandCollapse.spec.jsx

@@ -34,10 +34,7 @@ describe('<ExpandCollapse/>', () => {
       </Group>
     )
     expect(wrapper.find('.collapsible-panel').length).toEqual(2)
-    expect(
-      wrapper.find('.collapsible-panel__header').first()
-      .render().text())
-      .toEqual('This is panel 1')
+    expect(wrapper.find('.collapsible-panel__header').first().render().text()).toEqual('This is panel 1')
 
     wrapper.find('.collapsible-panel__content').forEach((node) => {
       expect(node.hasClass('collapsible-panel__content--visible')).toEqual(false)

src/old-components/StepTracker/Steps/Steps.jsx

@@ -10,7 +10,6 @@ import './Steps.scss'
  * Show the current position in a sequence of steps.
  */
 class Steps extends Component {
-
   getStatus(current, index) {
     if (index < current) {
       return 'completed'

src/old-components/TitledText/TitledText.jsx

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types'
 import './TitledText.scss'
 
 class TitledText extends Component {
-
   render() {
     const { title, content, titleHeadingClass } = this.props