refactor: Updated how classNames package is referenced

CONTRIBUTING.md

@@ -141,6 +141,7 @@ when possible and accept [props](https://facebook.github.io/react/docs/component
   * Provide a storybook with your component named on the parent component with a `.stories.js` suffix (e.g., `ListGroup.stories.js`)
   * When your stories contain multiple files, put them in a subfolder named `Stories`
   * `src/**/*.stories.js` and `src/**/Stories/` are excluded from the package build output
+* When writing a component and you want to use the classnames package, be sure to import and name it `classNames`. For example - ` import classNames from 'classnames' `
 * Exporting components from other libraries (without manipulating them)
   to consumers is a common task, use:
   ```js

src/components/AboutModal/AboutModalVersions.js

@@ -1,9 +1,9 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const AboutModalVersions = ({ children, className, ...rest }) => {
-  const classes = cx('product-versions-pf', className);
+  const classes = classNames('product-versions-pf', className);
 
   return (
     <div className={classes} {...rest}>

src/components/Alert/Alert.js

@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '../Button';
@@ -16,7 +16,7 @@ import {
 const Alert = ({ children, className, onDismiss, type, ...props }) => {
   warnIfDeprecatedType(type);
 
-  const alertClass = ClassNames('alert', className, getClassName(type), {
+  const alertClass = classNames('alert', className, getClassName(type), {
     'alert-dismissable': onDismiss
   });
 

src/components/Breadcrumb/Breadcrumb.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import cx from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { Breadcrumb as BsBreadcrumb } from 'react-bootstrap';
 
 const Breadcrumb = ({ title, ...props }) => {
-  const breadcrumbClass = cx({
+  const breadcrumbClass = classNames({
     'breadcrumbs-pf-title': title
   });
   return <BsBreadcrumb className={breadcrumbClass} {...props} />;

src/components/DropdownKebab/DropdownKebab.js

@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
@@ -16,7 +16,7 @@ const DropdownKebab = ({
   componentClass,
   toggleStyle
 }) => {
-  const kebabClass = ClassNames('dropdown-kebab-pf', className);
+  const kebabClass = classNames('dropdown-kebab-pf', className);
   return (
     <Dropdown
       className={kebabClass}

src/components/EmptyState/EmptyState.js

@@ -1,12 +1,12 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * Empty State Component for Patternfly React
  */
 const EmptyState = ({ children, className, ...props }) => {
-  const classes = ClassNames('blank-slate-pf', className);
+  const classes = classNames('blank-slate-pf', className);
 
   return (
     <div className={classes} {...props}>

src/components/EmptyState/EmptyStateAction.js

@@ -1,12 +1,12 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * EmptyStateAction renders contents of the element
  */
 const EmptyStateAction = ({ children, className, secondary, ...props }) => {
-  const classes = ClassNames(
+  const classes = classNames(
     {
       'blank-slate-pf-main-action': !secondary,
       'blank-slate-pf-secondary-action': secondary

src/components/EmptyState/EmptyStateHelp.js

@@ -1,12 +1,12 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * EmptyStateHelp renders contents of the element
  */
 const EmptyStateHelp = ({ children, className, ...props }) => {
-  const classes = ClassNames('blank-slate-pf-helpLink', className);
+  const classes = classNames('blank-slate-pf-helpLink', className);
 
   return (
     <p className={classes} {...props}>

src/components/EmptyState/EmptyStateIcon.js

@@ -1,4 +1,4 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon } from '../Icon';
@@ -7,7 +7,7 @@ import { Icon } from '../Icon';
  * EmptyStateIcon renders element
  */
 const EmptyStateIcon = ({ className, type, name, ...props }) => {
-  const classes = ClassNames('blank-slate-pf-icon', className);
+  const classes = classNames('blank-slate-pf-icon', className);
 
   return (
     <div className={classes}>

src/components/EmptyState/EmptyStateInfo.js

@@ -1,12 +1,12 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * EmptyStateInfo renders contents of the element
  */
 const EmptyStateInfo = ({ children, className, ...props }) => {
-  const classes = ClassNames('blank-slate-pf-info', className);
+  const classes = classNames('blank-slate-pf-info', className);
 
   return (
     <p className={classes} {...props}>

src/components/EmptyState/EmptyStateTitle.js

@@ -1,12 +1,12 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 /**
  * EmptyStateTitle renders contents of the element
  */
 const EmptyStateTitle = ({ children, className, ...props }) => {
-  const classes = ClassNames('h1', 'blank-slate-pf-title', className);
+  const classes = classNames('h1', 'blank-slate-pf-title', className);
   return (
     <h4 className={classes} {...props}>
       {children}

src/components/Filter/Filter.js

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getContext } from 'recompose';
@@ -7,7 +7,7 @@ import { toolbarContextTypes } from '../Toolbar/ToolbarConstants';
 // Disabled eslint due to `isDescendantOfToolbar` being a context property we don't want passed by consumers
 // eslint-disable-next-line react/prop-types
 const Filter = ({ children, className, isDescendantOfToolbar, ...rest }) => {
-  const classes = cx(
+  const classes = classNames(
     {
       'filter-pf form-group': true,
       'toolbar-pf-filter': isDescendantOfToolbar

src/components/Filter/FilterActiveLabel.js

@@ -1,9 +1,9 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const FilterActiveLabel = ({ children, className, ...rest }) => {
-  const classes = cx('filter-pf-active-label', className);
+  const classes = classNames('filter-pf-active-label', className);
   return <p className={classes}>{children}</p>;
 };
 

src/components/Filter/FilterCategorySelector.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -15,7 +15,7 @@ const FilterCategorySelector = ({
   onFilterCategorySelected,
   ...rest
 }) => {
-  const classes = cx('filter-pf-category-select', className);
+  const classes = classNames('filter-pf-category-select', className);
 
   if (placeholder || (filterCategories && filterCategories.length > 1)) {
     let title;

src/components/Filter/FilterCategoryValueSelector.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -14,7 +14,7 @@ const FilterCategoryValueSelector = ({
   onCategoryValueSelected,
   ...rest
 }) => {
-  const classes = cx('filter-pf-select', className);
+  const classes = classNames('filter-pf-select', className);
 
   if (placeholder || (categoryValues && categoryValues.length > 1)) {
     let title;

src/components/Filter/FilterItem.js

@@ -1,11 +1,11 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noop } from '../../common/helpers';
 import { DisposableLabel } from '../Label';
 
 const FilterItem = ({ children, className, onRemove, filterData, ...rest }) => {
-  const classes = ClassNames(className);
+  const classes = classNames(className);
 
   return (
     <li className={classes} {...rest}>

src/components/Filter/FilterList.js

@@ -1,12 +1,12 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const FilterList = ({ children, className, ...rest }) => {
   if (!children) {
     return null;
   }
-  const classes = cx('list-inline', className);
+  const classes = classNames('list-inline', className);
   return <ul className={classes}>{children}</ul>;
 };
 

src/components/Filter/FilterTypeSelector.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -14,7 +14,7 @@ const FilterTypeSelector = ({
   onFilterTypeSelected,
   ...rest
 }) => {
-  const classes = cx('input-group-btn', className);
+  const classes = classNames('input-group-btn', className);
   if (placeholder || (filterTypes && filterTypes.length > 1)) {
     let title;
     if (currentFilterType) {

src/components/Filter/FilterValueSelector.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import classNames from 'classnames';
 import { DropdownButton } from '../Button';
 import { MenuItem } from '../MenuItem';
 import { noop } from '../../common/helpers';
@@ -14,7 +14,7 @@ const FilterValueSelector = ({
   onFilterValueSelected,
   ...rest
 }) => {
-  const classes = cx('filter-pf-select', className);
+  const classes = classNames('filter-pf-select', className);
 
   if (placeholder || (filterValues && filterValues.length > 1)) {
     let title;

src/components/Icon/InnerComponents/PatternflyIcon.js

@@ -1,11 +1,11 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 const PatternflyIcon = ({ name, className, ...props }) => (
   <span
     aria-hidden="true"
-    className={cx('pficon', `pficon-${name}`, className)}
+    className={classNames('pficon', `pficon-${name}`, className)}
     {...props}
   />
 );

src/components/InfoTip/InfoTipMenu.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 // eslint-disable-next-line react/prefer-stateless-function
@@ -16,7 +16,7 @@ class InfoTipMenu extends React.Component {
       ...props
     } = this.props;
 
-    const infoTipMenuClass = ClassNames(
+    const infoTipMenuClass = classNames(
       'dropdown-menu',
       'infotip',
       'bottom-right',

src/components/Label/RemoveButton.js

@@ -1,10 +1,10 @@
-import ClassNames from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { noop } from '../../common/helpers';
 
 const RemoveButton = ({ className, title, onRemoveClick, ...rest }) => {
-  const classes = ClassNames('pficon pficon-close', className);
+  const classes = classNames('pficon pficon-close', className);
 
   return (
     <a

src/components/ListView/ListView.js

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -56,7 +56,10 @@ import PropTypes from 'prop-types';
  * ListView component wraps ListViewItems
  */
 const ListView = ({ children, className, ...rest }) => {
-  const classes = cx('list-group list-view-pf list-view-pf-view', className);
+  const classes = classNames(
+    'list-group list-view-pf list-view-pf-view',
+    className
+  );
   return (
     <div className={classes} {...rest}>
       {children}

src/components/ListView/ListView.stories.js

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
@@ -37,15 +37,15 @@ const renderActions = () => (
 const renderAdditionalInfoItems = itemProperties =>
   itemProperties &&
   Object.keys(itemProperties).map(prop => {
-    const classNames = cx('pficon', {
+    const cssClassNames = classNames('pficon', {
       'pficon-flavor': prop === 'hosts',
       'pficon-cluster': prop === 'clusters',
       'pficon-container-node': prop === 'nodes',
       'pficon-image': prop === 'images'
     });
     return (
       <ListView.InfoItem key={prop}>
-        <span className={classNames} />
+        <span className={cssClassNames} />
         <strong>{itemProperties[prop]}</strong> {prop}
       </ListView.InfoItem>
     );

src/components/ListView/ListViewCheckbox.js

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
@@ -8,7 +8,9 @@ import PropTypes from 'prop-types';
  * in case of redux-form)
  */
 const ListViewCheckbox = ({ children, className }) => (
-  <div className={cx('list-view-pf-checkbox', className)}>{children}</div>
+  <div className={classNames('list-view-pf-checkbox', className)}>
+    {children}
+  </div>
 );
 
 ListViewCheckbox.propTypes = {