[UI Framework] [K7] Upgrade linter to 0.9.0. (elastic#13290)

* Upgrade eslint to 0.9.0. * Fix linting errors in UI Framework.
cjcenizal · Aug 16, 2017 · 95bdcff · 95bdcff
1 parent 02c222b
commit 95bdcff
Show file tree

Hide file tree

Showing 56 changed files with 136 additions and 162 deletions.
diff --git a/ui_framework/doc_site/src/views/button/button_with_icon.js b/ui_framework/doc_site/src/views/button/button_with_icon.js
@@ -8,7 +8,7 @@ export default () => (
   <div>
     <KuiButton
       onClick={() => window.alert('Button clicked')}
-      icon = "arrowUp"
+      icon="arrowUp"
     >
       Default
     </KuiButton>
@@ -17,7 +17,7 @@ export default () => (
 
     <KuiButton
       fill
-      icon = "arrowDown"
+      icon="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -26,7 +26,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon = "arrowLeft"
+      icon="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -36,7 +36,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon = "arrowRight"
+      icon="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}
@@ -49,7 +49,7 @@ export default () => (
     <KuiButton
       iconReverse
       onClick={() => window.alert('Button clicked')}
-      icon = "arrowUp"
+      icon="arrowUp"
     >
       Default
     </KuiButton>
@@ -59,7 +59,7 @@ export default () => (
     <KuiButton
       iconReverse
       fill
-      icon = "arrowDown"
+      icon="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -69,7 +69,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon = "arrowLeft"
+      icon="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -80,7 +80,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon = "arrowRight"
+      icon="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}

diff --git a/ui_framework/doc_site/src/views/header/header.js b/ui_framework/doc_site/src/views/header/header.js
@@ -107,8 +107,7 @@ export default class extends Component {
       >
         <div className="kuiHeaderProfile kui--flexRow kui--flexAlignItemsCenter">
           <div className="kui--flexShrink1 kui--paddingRight">
-            <div className="kuiAvatar kuiAvatar--large" style={{ background: `url('http://lorempixel.com/64/64/cats/')` }}>
-            </div>
+            <div className="kuiAvatar kuiAvatar--large" style={{ background: `url('http://lorempixel.com/64/64/cats/')` }} />
           </div>
           <div className="kui--flexGrow1">
             <p className="kui--marginBottom">John Username</p>
@@ -126,8 +125,8 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
-          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
+          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
               <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
@@ -141,7 +140,7 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a really long notification title with nonsense beneath it.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a really long notification title with nonsense beneath it.</p>
           <p className="kuiHeaderAlert__text">Walk the cow through a warm room, and then bring it to my plate.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
@@ -156,10 +155,10 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
           <p className="kuiHeaderAlert__text">
             Only usable on grilled cheese sandwiches.
-            That is the only application of Kraft Singles as far as I'm concerned.
+            That is the only application of Kraft Singles as far as I&rsquo;m concerned.
           </p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">

diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js
@@ -138,8 +138,8 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
-          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
+          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
               <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
@@ -153,7 +153,7 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a really long notification title with nonsense beneath it.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a really long notification title with nonsense beneath it.</p>
           <p className="kuiHeaderAlert__text">Walk the cow through a warm room, and then bring it to my plate.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
@@ -168,10 +168,10 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
           <p className="kuiHeaderAlert__text">
             Only usable on grilled cheese sandwiches.
-            That is the only application of Kraft Singles as far as I'm concerned.
+            That is the only application of Kraft Singles as far as I&rsquo;m concerned.
           </p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">

diff --git a/ui_framework/doc_site/src/views/page/page_example.js b/ui_framework/doc_site/src/views/page/page_example.js
@@ -64,7 +64,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        Most pages don't have sidebars. A lot of our pages don't have extra abilities next to the title.
+        Most pages don&rsquo;t have sidebars. A lot of our pages don&rsquo;t have extra abilities next to the title.
         Simply exclude those components and everything will still line up.
       </GuideText>
 
@@ -124,7 +124,7 @@ export default props => (
     >
       <GuideText>
         Centering the content can happen regardless of layout configuration.
-        In this example, we're cetnering within a complex sidebar layout.
+        In this example, we&rsquo;re cetnering within a complex sidebar layout.
       </GuideText>
 
       <GuideDemo>

diff --git a/ui_framework/doc_site/src/views/popover/popover_anchor_position.js b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
@@ -61,7 +61,7 @@ export default class extends Component {
         <KuiPopover
           button={(
             <button onClick={this.onButtonClick2.bind(this)}>
-              Popover anchored to the right.
+              Popover anchored to the left.
             </button>
           )}
           isOpen={this.state.isPopoverOpen2}

diff --git a/ui_framework/doc_site/src/views/typography/medium_title.js b/ui_framework/doc_site/src/views/typography/medium_title.js
@@ -6,6 +6,6 @@ import {
 
 export default () => (
   <KuiTitle>
-    <h2>Here's the title of a section</h2>
+    <h2>Here&rsquo;s the title of a section</h2>
   </KuiTitle>
 );
diff --git a/ui_framework/doc_site/src/views/typography/text.js b/ui_framework/doc_site/src/views/typography/text.js
@@ -7,7 +7,7 @@ import {
 export default () => (
   <KuiText>
     <p>
-      The quick brown fox jumped over the lazy dog. But the lazy dog wasn't lazy, it was {
+      The quick brown fox jumped over the lazy dog. But the lazy dog wasn&rsquo;t lazy, it was {
       // react/jsx-closing-tag-location
       } <strong>just practicing mindfulness</strong>, so really in the long run it was much more {
       // react/jsx-closing-tag-location

diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js
@@ -27,7 +27,7 @@ export default () => (
 
     <KuiText>
       <p>
-        But the dog wasn't lazy, it was just
+        But the dog wasn&rsquo;t lazy, it was just
         practicing mindfulness, so it had a greater sense of
         life-satisfaction than that fox with all its jumping.
       </p>

diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js
@@ -58,7 +58,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        The large size is usually used to identify the page you're on. Generally, there should
+        The large size is usually used to identify the page you&rsquo;re on. Generally, there should
         only be one of these used at a time.
       </GuideText>
 
@@ -83,7 +83,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        This size is commonly used to identify sections within a page. It's also the default size.
+        This size is commonly used to identify sections within a page. It&rsquo;s also the default size.
       </GuideText>
 
       <GuideDemo>
@@ -121,7 +121,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        You'll generally use this component for paragraphs.
+        You&rsquo;ll generally use this component for paragraphs.
       </GuideText>
 
       <GuideDemo>

diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js
@@ -1,5 +1,4 @@
 import React, {
-  Component,
   PropTypes,
 } from 'react';
 import classNames from 'classnames';
@@ -20,61 +19,53 @@ const sizeToClassNameMap = {
 export const TYPES = Object.keys(typeToClassNameMap);
 export const SIZES = Object.keys(sizeToClassNameMap);
 
-export class KuiButton extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      icon,
-      iconReverse,
-      type,
-      size,
-      fill,
-      ...rest,
-    } = this.props;
+export const KuiButton = ({
+  children,
+  className,
+  icon,
+  iconReverse,
+  type,
+  size,
+  fill,
+  ...rest,
+}) => {
+  const classes = classNames(
+    'kuiButton',
+    typeToClassNameMap[type],
+    sizeToClassNameMap[size],
+    className,
+    {
+      'kuiButton--fill': fill,
+      'kuiButton--reverse': iconReverse,
+    },
+  );
 
-    const classes = classNames(
-      'kuiButton',
-      typeToClassNameMap[type],
-      sizeToClassNameMap[size],
-      className,
-      {
-        'kuiButton--fill': fill,
-        'kuiButton--reverse': iconReverse,
-      },
-    );
-
-    // Add an icon to the button if one exists.
-    let buttonIcon = null;
-    if (icon) {
-      buttonIcon = (
-        <span aria-hidden="true">
-          <KuiIcon
-            className="kuiButton__icon"
-            type={icon}
-            size="medium"
-          />
-        </span>
-      );
-    }
-
-    return (
-      <button
-        className={classes}
-        {...rest}
-      >
-        <span className="kuiButton__content">
-          {buttonIcon}
-          <span>{children}</span>
-        </span>
-      </button>
+  // Add an icon to the button if one exists.
+  let buttonIcon = null;
+  if (icon) {
+    buttonIcon = (
+      <span aria-hidden="true">
+        <KuiIcon
+          className="kuiButton__icon"
+          type={icon}
+          size="medium"
+        />
+      </span>
     );
   }
-}
+
+  return (
+    <button
+      className={classes}
+      {...rest}
+    >
+      <span className="kuiButton__content">
+        {buttonIcon}
+        <span>{children}</span>
+      </span>
+    </button>
+  );
+};
 
 KuiButton.propTypes = {
   iconReverse: React.PropTypes.bool,

diff --git a/ui_framework/src/components/button/button.test.js b/ui_framework/src/components/button/button.test.js
@@ -7,7 +7,7 @@ import { KuiButton } from './button';
 describe('KuiButton', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiButton { ...requiredProps } />
+      <KuiButton {...requiredProps} />
     );
 
     expect(component)

diff --git a/ui_framework/src/components/header/header.test.js b/ui_framework/src/components/header/header.test.js
@@ -7,7 +7,7 @@ import { KuiHeader } from './header';
 describe('KuiHeader', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeader { ...requiredProps } />
+      <KuiHeader {...requiredProps} />
     );
 
     expect(component)

diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.test.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderBreadcrumb } from './header_breadcrumb';
 describe('KuiHeaderBreadcrumb', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderBreadcrumb { ...requiredProps }>
+      <KuiHeaderBreadcrumb {...requiredProps}>
         content
       </KuiHeaderBreadcrumb>
     );

diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb_collapsed.test.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb_collapsed.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderBreadcrumbCollapsed } from './header_breadcrumb_collapsed';
 describe('KuiHeaderBreadcrumbCollapsed', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderBreadcrumbCollapsed { ...requiredProps } />
+      <KuiHeaderBreadcrumbCollapsed {...requiredProps} />
     );
 
     expect(component)

diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderBreadcrumbs } from './header_breadcrumbs';
 describe('KuiHeaderBreadcrumbs', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderBreadcrumbs { ...requiredProps } />
+      <KuiHeaderBreadcrumbs {...requiredProps} />
     );
 
     expect(component)

diff --git a/ui_framework/src/components/header/header_logo.test.js b/ui_framework/src/components/header/header_logo.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderLogo } from './header_logo';
 describe('KuiHeaderLogo', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderLogo { ...requiredProps } />
+      <KuiHeaderLogo {...requiredProps} />
     );
 
     expect(component)