fix: lint

src/components/Button/Button.jsx

@@ -186,7 +186,6 @@ const Button = forwardRef(
       };
     }, [
       disabled,
-      buttonRef,
       classNames,
       name,
       onMouseUp,
@@ -199,7 +198,8 @@ const Button = forwardRef(
       loading,
       onFocus,
       onBlur,
-      mergedRef
+      mergedRef,
+      ariaLabeledBy
     ]);
 
     if (loading) {
@@ -297,9 +297,9 @@ Button.propTypes = {
   ]),
   /** Disabled property which causes the button to be disabled */
   disabled: PropTypes.bool,
-  /** Icon to place on the right*/
+  /** Icon to place on the right */
   rightIcon: PropTypes.string,
-  /** Icon to place on the left*/
+  /** Icon to place on the left */
   leftIcon: PropTypes.string,
   /** the success props are used when you have async action and wants to display a success message */
   success: PropTypes.bool,

src/components/Counter/Counter.jsx

@@ -91,7 +91,11 @@ const Counter = ({
     count?.toString().length > maxDigits ? `${10 ** maxDigits - 1}+` : count;
 
   return (
-    <span className={wrapperClassName} aria-label={`${ariaLabel} ${countText}`}>
+    <span
+      className={wrapperClassName}
+      aria-label={`${ariaLabel} ${countText}`}
+      aria-labelledby={ariaLabeledBy}
+    >
       <div className={classNames} aria-label={countText} ref={ref}>
         <SwitchTransition mode="out-in">
           <CSSTransition
@@ -129,7 +133,7 @@ Counter.propTypes = {
     Counter.colors.NEGATIVE
   ]),
   kind: PropTypes.oneOf([Counter.kinds.FILL, Counter.kinds.LINE]),
-  /** maximum number of digits to display (see relevant story)*/
+  /** maximum number of digits to display (see relevant story) */
   maxDigits: PropTypes.number
 };
 Counter.defaultProps = {

src/components/Dialog/Dialog.jsx

@@ -43,7 +43,8 @@ export default class Dialog extends PureComponent {
   }
 
   closeDialogOnEscape(event) {
-    if(!this.state.isOpen) {
+    const { isOpen } = this.state;
+    if (!isOpen) {
       return;
     }
     if (event.key === "Escape") this.hideDialogIfNeeded();

src/components/Divider/Divider.jsx

@@ -20,12 +20,12 @@ Divider.directions = DIRECTIONS;
 
 Divider.defaultProps = {
   classname: "",
-  direction: DIRECTIONS.HORIZONTAL,
+  direction: DIRECTIONS.HORIZONTAL
 };
 
 Divider.propTypes = {
   classname: PropTypes.string,
-  direction: PropTypes.oneOf([DIRECTIONS.HORIZONTAL, DIRECTIONS.VERTICAL]),
+  direction: PropTypes.oneOf([DIRECTIONS.HORIZONTAL, DIRECTIONS.VERTICAL])
 };
 
 export default Divider;

src/components/Divider/DividerConstants.js

@@ -1,4 +1,4 @@
 export const DIRECTIONS = {
   VERTICAL: "vertical",
-  HORIZONTAL: "horizontal",
+  HORIZONTAL: "horizontal"
 };

src/components/Dropdown/Dropdown.jsx

@@ -1,6 +1,8 @@
+/* eslint-disable react/jsx-props-no-spreading,react/require-default-props,react/forbid-prop-types */
 import React, { useCallback, useMemo, useState } from "react";
 import Select, { components } from "react-select";
 import AsyncSelect from "react-select/async";
+import NOOP from "lodash/noop";
 import { WindowedMenuList } from "react-windowed-select";
 import PropTypes from "prop-types";
 import cx from "classnames";
@@ -10,7 +12,6 @@ import OptionComponent from "./components/Option/Option";
 import SingleValueComponent from "./components/SingleValue/SingleValue";
 import ClearIndicatorComponent from "./components/ClearIndicator/ClearIndicator";
 import { SIZE } from "./DropdownConstants";
-import { NOOP } from "../../utils/function-utils";
 import styles, { customTheme } from "./Dropdown.styles";
 import "./Dropdown.scss";
 
@@ -37,20 +38,20 @@ const Dropdown = ({
   asyncOptions,
   cacheOptions,
   defaultOptions,
-  isVirtualized,
+  isVirtualized
 }) => {
   const [isOpen, setOpen] = useState(false);
 
   const handleMenuOpen = useCallback(
-    (data) => {
+    data => {
       onMenuOpen(data);
       setOpen(true);
     },
     [onMenuOpen, setOpen]
   );
 
   const handleMenuClose = useCallback(
-    (data) => {
+    data => {
       onMenuClose(data);
       setOpen(false);
     },
@@ -60,34 +61,32 @@ const Dropdown = ({
   const customStyles = useMemo(() => styles({ size, rtl }), [size, rtl]);
 
   const Menu = useCallback(
-    (props) => <MenuComponent {...props} isOpen={isOpen} />,
+    props => <MenuComponent {...props} isOpen={isOpen} />,
     [isOpen]
   );
 
   const DropdownIndicator = useCallback(
-    (props) => <DropdownIndicatorComponent {...props} size={size} />,
+    props => <DropdownIndicatorComponent {...props} size={size} />,
     [size]
   );
 
   const Option = useCallback(
-    (props) => <OptionComponent {...props} OptionRenderer={OptionRenderer} />,
+    props => <OptionComponent {...props} OptionRenderer={OptionRenderer} />,
     [OptionRenderer]
   );
 
   const Input = useCallback(
-    (props) => <components.Input {...props} aria-label="Dropdown input" />,
+    props => <components.Input {...props} aria-label="Dropdown input" />,
     []
   );
 
   const SingleValue = useCallback(
-    (props) => (
-      <SingleValueComponent {...props} ValueRenderer={ValueRenderer} />
-    ),
+    props => <SingleValueComponent {...props} ValueRenderer={ValueRenderer} />,
     [ValueRenderer]
   );
 
   const ClearIndicator = useCallback(
-    (props) => <ClearIndicatorComponent {...props} size={size} />,
+    props => <ClearIndicatorComponent {...props} size={size} />,
     [size]
   );
 
@@ -96,13 +95,13 @@ const Dropdown = ({
   const asyncAdditions = {
     ...(asyncOptions && {
       loadOptions: asyncOptions,
-      cacheOptions: cacheOptions,
-      ...(defaultOptions && { defaultOptions }),
-    }),
+      cacheOptions,
+      ...(defaultOptions && { defaultOptions })
+    })
   };
 
   const additions = {
-    ...(!asyncOptions && { options }),
+    ...(!asyncOptions && { options })
   };
 
   return (
@@ -115,7 +114,7 @@ const Dropdown = ({
         Input,
         ...(OptionRenderer && { Option }),
         ...(ValueRenderer && { SingleValue }),
-        ...(isVirtualized && { MenuList: WindowedMenuList }),
+        ...(isVirtualized && { MenuList: WindowedMenuList })
       }}
       size={size}
       noOptionsMessage={noOptionsMessage}
@@ -154,7 +153,7 @@ Dropdown.defaultProps = {
   options: [],
   noOptionsMessage: NOOP,
   clearable: true,
-  size: SIZE.MEDIUM,
+  size: SIZE.MEDIUM
 };
 
 Dropdown.propTypes = {
@@ -241,8 +240,8 @@ Dropdown.propTypes = {
     PropTypes.func, // callback
     PropTypes.shape({
       then: PropTypes.func.isRequired,
-      catch: PropTypes.func.isRequired,
-    }), // Promise
+      catch: PropTypes.func.isRequired
+    }) // Promise
   ]),
   /**
    * If set to true, fetched async options will be cached
@@ -253,12 +252,12 @@ Dropdown.propTypes = {
    */
   defaultOptions: PropTypes.oneOfType([
     PropTypes.bool,
-    PropTypes.arrayOf(PropTypes.object),
+    PropTypes.arrayOf(PropTypes.object)
   ]),
   /**
    * If set to true, the menu will use virtualization. Virtualized async works only with
    */
-  isVirtualized: PropTypes.bool,
+  isVirtualized: PropTypes.bool
 };
 
 export default Dropdown;

src/components/Dropdown/Dropdown.styles.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 import { SIZE } from "./DropdownConstants";
 import { getCSSVar } from "../../services/themes";
 

src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx

@@ -1,18 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import Icon from "../../../Icon/Icon";
 import CloseSmall from "../../../Icon/Icons/components/CloseSmall";
 import { getIndicatorSize } from "../../Dropdown.styles";
 
-const ClearIndicator = props => (
-  <components.ClearIndicator {...props} className={"clear-indicator"}>
-    <Icon
-      iconType={Icon.type.SVG}
-      icon={CloseSmall}
-      iconSize={getIndicatorSize(props.size)}
-      tabindex="-1"
-    />
-  </components.ClearIndicator>
-);
+const ClearIndicator = props => {
+  const { size } = props;
+  return (
+    <components.ClearIndicator {...props} className="clear-indicator">
+      <Icon
+        iconType={Icon.type.SVG}
+        icon={CloseSmall}
+        iconSize={getIndicatorSize(size)}
+        tabindex="-1"
+      />
+    </components.ClearIndicator>
+  );
+};
 
 export default ClearIndicator;

src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx

@@ -1,19 +1,22 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import Icon from "../../../Icon/Icon";
 import DropdownChevronDown from "../../../Icon/Icons/components/DropdownChevronDown";
 import { getIndicatorSize } from "../../Dropdown.styles";
 
-const DropdownIndicator = props => (
-  <components.DropdownIndicator {...props} className={"dropdown-indicator"}>
-    <Icon
-      iconType={Icon.type.SVG}
-      icon={DropdownChevronDown}
-      iconSize={getIndicatorSize(props.size)}
-      tabindex="-1"
-      clickable={!props.isDisabled}
-    />
-  </components.DropdownIndicator>
-);
-
+const DropdownIndicator = props => {
+  const { isDisabled, size } = props;
+  return (
+    <components.DropdownIndicator {...props} className="dropdown-indicator">
+      <Icon
+        iconType={Icon.type.SVG}
+        icon={DropdownChevronDown}
+        iconSize={getIndicatorSize(size)}
+        tabindex="-1"
+        clickable={!isDisabled}
+      />
+    </components.DropdownIndicator>
+  );
+};
 export default DropdownIndicator;

src/components/Dropdown/components/Menu/Menu.jsx

@@ -1,17 +1,21 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import cx from "classnames";
 import { components } from "react-select";
 import "./Menu.scss";
 
-const Menu = props => (
-  <components.Menu
-    {...props}
-    className={cx("menu", {
-      "dropdown-wrapper__menu--open": props.isOpen
-    })}
-  >
-    {props.children}
-  </components.Menu>
-);
+const Menu = props => {
+  const { isOpen, children } = props;
+  return (
+    <components.Menu
+      {...props}
+      className={cx("menu", {
+        "dropdown-wrapper__menu--open": isOpen
+      })}
+    >
+      {children}
+    </components.Menu>
+  );
+};
 
 export default Menu;

src/components/Dropdown/components/Option/Option.jsx

@@ -1,12 +1,14 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import "./Option.scss";
 
 const Option = ({ OptionRenderer, ...props }) => {
+  const { data } = props;
   if (!OptionRenderer) return null;
   return (
-    <components.Option {...props} className={"dropdown-wrapper__option--reset"}>
-      <OptionRenderer {...props.data} />
+    <components.Option {...props} className="dropdown-wrapper__option--reset">
+      <OptionRenderer {...data} />
     </components.Option>
   );
 };

src/components/Dropdown/components/SingleValue/SingleValue.jsx

@@ -1,16 +1,17 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import "./SingleValue.scss";
 
 const SingleValue = props => {
-  const { ValueRenderer } = props;
+  const { ValueRenderer, data } = props;
   if (!ValueRenderer) return null;
   return (
     <components.SingleValue
       {...props}
-      className={"dropdown-wrapper__single-value--reset"}
+      className="dropdown-wrapper__single-value--reset"
     >
-      <ValueRenderer {...props.data} />
+      <ValueRenderer {...data} />
     </components.SingleValue>
   );
 };

src/components/FormattedNumber/FormattedNumber.jsx

@@ -73,6 +73,7 @@ FormattedNumber.propTypes = {
   /**
    * A numeric value to format.
    */
+  // eslint-disable-next-line react/require-default-props
   value: PropTypes.number,
   /**
    * Add external styling. Will be added to the main container.
@@ -114,7 +115,9 @@ FormattedNumber.defaultProps = {
   compact: true,
   local: FormattedNumber.localFallBack,
   rtl: false,
-  className: ""
+  className: "",
+  prefix: "",
+  suffix: ""
 };
 
 export default FormattedNumber;