Fix eslint extends order so kibana rules become more important (elast…

…ic#927)

* chore(NA): fixs the eslint extends order so kibana rules become more important than others.

* chore(NA): prop format for code with new applied rules.

* chore(NA): small change from string concat to template literals.

* chore(NA): added prefer-template temp rule and change from string concat to template literals across eui.

* chore(NA): removed temp rule comments.

* chore(NA): fix ui changes with eslint rules fix.

* chore(NA): fix missing ui change.

.eslintrc.json

@@ -10,12 +10,15 @@
     }
   },
   "extends": [
-    "@elastic/eslint-config-kibana",
-    "prettier"
+    "prettier",
+    "@elastic/eslint-config-kibana"
   ],
   "plugins": [
     "prettier"
   ],
+  "rules": {
+    "prefer-template": "error"
+  },
   "env": {
     "jest": true
   }

src-docs/src/routes.js

@@ -174,8 +174,8 @@ import { PortalExample }
 import { ProgressExample }
   from './views/progress/progress_example';
 
-  import { ResponsiveExample }
-    from './views/responsive/responsive_example';
+import { ResponsiveExample }
+  from './views/responsive/responsive_example';
 
 import { SearchBarExample }
   from './views/search_bar/search_bar_example';

src-docs/src/views/accordion/accordion_grow.js

@@ -27,7 +27,7 @@ class AccordionGrow extends Component {
         paddingSize="l"
       >
         <EuiText>
-          <EuiSpacer size='s' />
+          <EuiSpacer size="s" />
           <p>
             <EuiButton onClick={() => this.onIncrease()}>Increase height</EuiButton>
             {' '}

src-docs/src/views/avatar/avatar_example.js

@@ -42,7 +42,7 @@ export const AvatarExample = {
     ),
     props: { EuiAvatar },
     demo: <Avatar />,
-  },{
+  }, {
     title: 'Initials',
     source: [{
       type: GuideSectionTypes.JS,

src-docs/src/views/badge/badge_example.js

@@ -106,8 +106,8 @@ export const BadgeExample = {
           components like the EuiKeyPadMenuItem.
         </p>
         <p>
-          They can also be used in conjunction
-          with <EuiLink href="/#/display/card">EuiCards</EuiLink> and <EuiLink href="/#/navigation/key-pad-menu">EuiKeyPadMenuItems</EuiLink>.
+          They can also be used in conjunction with <EuiLink href="/#/display/card">EuiCards</EuiLink>
+          &nbsp;and <EuiLink href="/#/navigation/key-pad-menu">EuiKeyPadMenuItems</EuiLink>.
         </p>
       </div>
     ),

src-docs/src/views/badge/beta_badge.js

@@ -16,7 +16,10 @@ export default () => (
 
     <EuiSpacer />
     <EuiTitle>
-      <h3>Beta badges will also line up nicely with titles <EuiBetaBadge label="Lab" tooltipContent="This module is not GA. Please help us by reporting any bugs." /></h3>
+      <h3>
+        Beta badges will also line up nicely with titles &nbsp;
+        <EuiBetaBadge label="Lab" tooltipContent="This module is not GA. Please help us by reporting any bugs." />
+      </h3>
     </EuiTitle>
   </div>
 );

src-docs/src/views/button/button_icon.js

@@ -27,7 +27,7 @@ export default () => (
             onClick={() => window.alert('Button clicked')}
             iconType="arrowRight"
             aria-label="Next"
-            disabled={color === "disabled" ? true : false}
+            disabled={color === 'disabled' ? true : false}
           />
         </EuiFlexItem>
       ))

src-docs/src/views/button/button_toggle.js

@@ -43,7 +43,7 @@ export default class extends Component {
          
 
         <EuiButtonToggle
-          label={this.state.toggle1On ? "I'm a filled toggle" : "I'm a primary toggle"}
+          label={this.state.toggle1On ? 'I\'m a filled toggle' : 'I\'m a primary toggle'}
           fill={this.state.toggle1On}
           onChange={this.onToggle1Change}
         />

src-docs/src/views/call_out/call_out_example.js

@@ -67,7 +67,7 @@ export const CallOutExample = {
       </EuiText>
       <EuiSpacer size="l"/>
     </Fragment>
- ),
+  ),
   sections: [{
     title: 'Info',
     source: [{

src-docs/src/views/card/card_beta.js

@@ -18,7 +18,7 @@ const cardNodes = icons.map(function (item, index) {
         title={`Kibana ${item}`}
         description="Example of a card's description. Stick to one or two sentences."
         betaBadgeLabel={badges[index]}
-        betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined}
+        betaBadgeTooltipContent={badges[index] ? 'This module is not GA. Please help us by reporting any bugs.' : undefined}
         onClick={() => window.alert('Card clicked')}
       />
     </EuiFlexItem>

src-docs/src/views/card/card_example.js

@@ -72,11 +72,16 @@ export const CardExample = {
       <div>
         <p>
           Most of the time, cards should read from top to bottom (vertical). However, in some cases, you may
-          want the icon to be to the left of the content. In this case, add the prop <EuiCode>layout=&quot;horizontal&quot;</EuiCode>.
+          want the icon to be to the left of the content. In this case, add
+          the prop <EuiCode>layout=&quot;horizontal&quot;</EuiCode>.
         </p>
         <EuiCallOut
           color="danger"
-          title={<span>Horizontal layouts <strong>do not</strong> work with images, footers or <EuiCode>textAlign</EuiCode>. Therefore, these properties will be ignored.</span>}
+          title={
+            <span>Horizontal layouts <strong>do not</strong> work with images,
+            footers or <EuiCode>textAlign</EuiCode>. Therefore, these properties will be ignored.
+            </span>
+          }
         />
       </div>
     ),
@@ -99,7 +104,11 @@ export const CardExample = {
           Just pass a url into the <EuiCode>image</EuiCode> prop and it will expand to to edges of the card.
         </p>
         <EuiCallOut
-          title={<span>Make sure that all images are the <strong>same proportions</strong> when used in a singular row.</span>}
+          title={
+            <span>Make sure that all images are the <strong>same proportions</strong> when
+              used in a singular row.
+            </span>
+          }
         />
       </div>
     ),

src-docs/src/views/combo_box/virtualized.js

@@ -10,7 +10,7 @@ export default class extends Component {
 
     this.options = [];
     let groupOptions = [];
-    for (let i=1; i < 5000; i++) {
+    for (let i = 1; i < 5000; i++) {
       groupOptions.push({ label: `option${i}` });
       if (i % 25 === 0) {
         this.options.push({

src-docs/src/views/date_picker/custom_input.js

@@ -15,15 +15,15 @@ import {
 // eslint-disable-next-line react/prefer-stateless-function
 class ExampleCustomInput extends React.Component {
 
-  render () {
+  render() {
     return (
       <EuiButton
         className="example-custom-input"
         onClick={this.props.onClick}
       >
         {this.props.value}
       </EuiButton>
-    )
+    );
   }
 }
 

src-docs/src/views/date_picker/date_picker_example.js

@@ -233,27 +233,27 @@ export const DatePickerExample = {
       </p>
     ),
     demo: <Inline />,
+  }, {
+    title: 'Custom classes',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: classesSource,
     }, {
-      title: 'Custom classes',
-      source: [{
-        type: GuideSectionTypes.JS,
-        code: classesSource,
-      }, {
-        type: GuideSectionTypes.HTML,
-        code: classesHtml,
-      }],
-      text: (
-        <div>
-          <p>
+      type: GuideSectionTypes.HTML,
+      code: classesHtml,
+    }],
+    text: (
+      <div>
+        <p>
             Custom classes can be passed to various bits of the calendar and input.
-          </p>
-          <ul>
-            <li><EuiCode>className</EuiCode> will pass onto the input.</li>
-            <li><EuiCode>calendarClassName</EuiCode> will pass onto the calendar itself.</li>
-            <li><EuiCode>dayClassName</EuiCode> will pass onto specificed days.</li>
-          </ul>
-        </div>
-      ),
-      demo: <Classes />,
+        </p>
+        <ul>
+          <li><EuiCode>className</EuiCode> will pass onto the input.</li>
+          <li><EuiCode>calendarClassName</EuiCode> will pass onto the calendar itself.</li>
+          <li><EuiCode>dayClassName</EuiCode> will pass onto specificed days.</li>
+        </ul>
+      </div>
+    ),
+    demo: <Classes />,
   }],
 };

src-docs/src/views/date_picker/min_max.js

@@ -18,8 +18,8 @@ export default class extends Component {
     this.state = {
       startDate: moment(),
       startDate2: moment(),
-      startDate3: moment().add(1, "days"),
-      startDate4: moment().add(1, "days"),
+      startDate3: moment().add(1, 'days'),
+      startDate4: moment().add(1, 'days'),
       startDate5: moment(),
     };
 
@@ -63,7 +63,7 @@ export default class extends Component {
   isWeekday(date) {
     const day = date.day();
     return day !== 0 && day !== 6;
-  };
+  }
 
   render() {
     return (
@@ -73,8 +73,8 @@ export default class extends Component {
             showTimeSelect
             selected={this.state.startDate}
             onChange={this.handleChange}
-            minDate={moment().subtract(2, "days")}
-            maxDate={moment().add(5, "days")}
+            minDate={moment().subtract(2, 'days')}
+            maxDate={moment().add(5, 'days')}
           />
         </EuiFormRow>
 
@@ -97,7 +97,7 @@ export default class extends Component {
             showTimeSelect
             selected={this.state.startDate3}
             onChange={this.handleChange3}
-            excludeDates={[moment(), moment().subtract(1, "days")]}
+            excludeDates={[moment(), moment().subtract(1, 'days')]}
           />
         </EuiFormRow>
 

src-docs/src/views/date_picker/open_to_date.js

@@ -33,7 +33,7 @@ export default class extends Component {
         <EuiDatePicker
           selected={this.state.startDate}
           onChange={this.handleChange}
-          openToDate={moment("1993-09-28")}
+          openToDate={moment('1993-09-28')}
           placeholder="Back to 1993"
         />
       </EuiFormRow>

src-docs/src/views/date_picker/states.js

@@ -28,9 +28,9 @@ export default class extends Component {
 
   render() {
     const errors = [
-        'Here\'s an example of an error',
-        'You might have more than one error, so pass an array.',
-      ];
+      'Here\'s an example of an error',
+      'You might have more than one error, so pass an array.',
+    ];
 
     return (
       <div>

src-docs/src/views/empty_prompt/custom.js

@@ -13,7 +13,10 @@ export default () => (
     titleSize="xs"
     body={
       <Fragment>
-        <p>Navigators use massive amounts of spice to gain a limited form of prescience. This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.</p>
+        <p>
+          Navigators use massive amounts of spice to gain a limited form of prescience.
+          This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.
+        </p>
         <p>You&rsquo;ll need spice to rule Arrakis, young Atreides.</p>
       </Fragment>
     }

src-docs/src/views/empty_prompt/empty_prompt.js

@@ -11,7 +11,10 @@ export default () => (
     title={<h2>You have no spice</h2>}
     body={
       <Fragment>
-        <p>Navigators use massive amounts of spice to gain a limited form of prescience. This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.</p>
+        <p>
+          Navigators use massive amounts of spice to gain a limited form of prescience.
+          This allows them to safely navigate interstellar space, enabling trade and travel throughout the galaxy.
+        </p>
         <p>You&rsquo;ll need spice to rule Arrakis, young Atreides.</p>
       </Fragment>
     }

src-docs/src/views/flyout/flyout_complicated.js

@@ -157,7 +157,7 @@ export class FlyoutComplicated extends Component {
             <EuiText color="subdued">
               <p>Put navigation items in the header, and cross tab actions in a footer.</p>
             </EuiText>
-            <EuiTabs style={{ marginBottom: "-25px" }}>
+            <EuiTabs style={{ marginBottom: '-25px' }}>
               {this.renderTabs()}
             </EuiTabs>
           </EuiFlyoutHeader>

src-docs/src/views/form_layouts/described_form_group.js

@@ -60,8 +60,8 @@ export default class extends Component {
 
   onCheckboxChange = optionId => {
     const newCheckboxIdToSelectedMap = ({ ...this.state.checkboxIdToSelectedMap, ...{
-        [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
-      } });
+      [optionId]: !this.state.checkboxIdToSelectedMap[optionId],
+    } });
 
     this.setState({
       checkboxIdToSelectedMap: newCheckboxIdToSelectedMap,

src-docs/src/views/header/header_example.js

@@ -50,8 +50,8 @@ export const HeaderExample = {
       EuiHeaderLogo,
     },
     demo: <Header />,
-  },{
-    title: "Links",
+  }, {
+    title: 'Links',
     source: [{
       type: GuideSectionTypes.JS,
       code: headerLinksSource,
@@ -61,7 +61,8 @@ export const HeaderExample = {
     }],
     text: (
       <p>
-        If you&rsquo;re using EUI in a one-off site or page, you can use <EuiCode>EuiHeaderLinks</EuiCode>, <EuiCode>EuiHeaderLink</EuiCode>s instead of breadcrumbs.
+        If you&rsquo;re using EUI in a one-off site or page, you can use <EuiCode>EuiHeaderLinks</EuiCode>,
+        &nbsp;<EuiCode>EuiHeaderLink</EuiCode>s instead of breadcrumbs.
       </p>
     ),
     props: {

src-docs/src/views/package/changelog.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 import MarkdownIt from 'markdown-it';
 
-import { EuiText } from '../../../..'
-import { GuidePage } from '../../components/guide_page'
+import { EuiText } from '../../../..';
+import { GuidePage } from '../../components/guide_page';
 
 const changelogSource = require('!!raw-loader!../../../../CHANGELOG.md');
 const md = new MarkdownIt();

src-docs/src/views/panel/panel_badge.js

@@ -13,7 +13,10 @@ const panelNodes = badges.map(function (item, index) {
     <EuiFlexItem key={index}>
       <EuiPanel
         betaBadgeLabel={badges[index]}
-        betaBadgeTooltipContent={badges[index] ? "This module is not GA. Please help us by reporting any bugs." : undefined}
+        betaBadgeTooltipContent={badges[index]
+          ? 'This module is not GA. Please help us by reporting any bugs.'
+          : undefined
+        }
         onClick={() => window.alert('Card clicked')}
       >
         I am some panel content

src-docs/src/views/responsive/responsive.js

@@ -12,11 +12,11 @@ export default () => (
       Hiding from <EuiCode>xs</EuiCode> screens only
     </EuiHideFor>
     <br/>
-    <EuiHideFor sizes={['xs','s']}>
+    <EuiHideFor sizes={['xs', 's']}>
       Hiding from <EuiCode>xs, s</EuiCode> screens
     </EuiHideFor>
     <br/>
-    <EuiHideFor sizes={['xs','s','m', 'l']}>
+    <EuiHideFor sizes={['xs', 's', 'm', 'l']}>
       Hiding from <EuiCode>xs, s, m, l</EuiCode> screens
     </EuiHideFor>
     <br/>
@@ -31,11 +31,11 @@ export default () => (
       Showing for <EuiCode>xs</EuiCode> screens only
     </EuiShowFor>
     <br/>
-    <EuiShowFor sizes={['xs','s']}>
+    <EuiShowFor sizes={['xs', 's']}>
       Showing for <EuiCode>xs, s</EuiCode> screens
     </EuiShowFor>
     <br/>
-    <EuiShowFor sizes={['xs','s','m', 'l']}>
+    <EuiShowFor sizes={['xs', 's', 'm', 'l']}>
       Showing for <EuiCode>xs, s, m, l</EuiCode> screens
     </EuiShowFor>
     <br/>