Another sweep through the code to use classnames library

cloud-gov · Oct 6, 2017 · 8add0ce · 8add0ce
1 parent f39ad38
commit 8add0ce
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 46 deletions.
diff --git a/static_src/components/app_quicklook.jsx b/static_src/components/app_quicklook.jsx
@@ -35,20 +35,19 @@ export default class AppQuicklook extends React.Component {
 
   appState(app) {
     const health = appHealth(app);
-    const statusClass = `status-${health}`;
+
     return (
-      <span className={`status ${statusClass}`}>
+      <span className={`status status-${health}`}>
         { app.state.toLowerCase() }
       </span>
     );
   }
 
   appName() {
-    const app = this.props.app;
-    const statusClass = !isHealthyApp(app) && 'status-error';
+    const { app } = this.props;
 
     return (
-      <a className={ statusClass } href={ this.appHref() }>
+      <a className={ classNames({'status-error': !isHealthyApp(app)}) } href={ this.appHref() }>
         { app.name }
       </a>
     );

diff --git a/static_src/components/complex_list.jsx b/static_src/components/complex_list.jsx
@@ -1,6 +1,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import ComplexListItem from './complex_list_item.jsx';
 
 const propTypes = {
@@ -26,7 +27,6 @@ export default class ComplexList extends React.Component {
   }
 
   render() {
-    const props = this.props;
     const emptyMessage = this.props.emptyMessage && (
       <div className="complex_list-empty">
         { this.props.emptyMessage }
@@ -36,8 +36,8 @@ export default class ComplexList extends React.Component {
 
     if (this.hasAnyTitle()) {
       let title;
-      if (props.titleElement) {
-        title = props.titleElement;
+      if (this.props.titleElement) {
+        title = this.props.titleElement;
       } else {
         title = this.props.title;
       }
@@ -50,8 +50,12 @@ export default class ComplexList extends React.Component {
       );
     }
 
+    const classes = classNames('complex_list', {
+      [this.props.className]: this.props.className
+    });
+
     return (
-      <div className={ [this.props.className, 'complex_list'].join(' ') }>
+      <div className={ classes }>
         { header }
         { emptyMessage }
         { this.props.children.length > 0 && this.props.children.map((child, i) => {

diff --git a/static_src/components/count_status.jsx b/static_src/components/count_status.jsx
@@ -25,16 +25,15 @@ const defaultProps = {
 
 export default class CountStatus extends React.Component {
   render() {
-    const props = this.props;
-    const statusClass = `count_status-${props.health.toLowerCase()}`;
+    const {health, iconType, count, name } = this.props;
 
     return (
-      <div className={`count_status ${statusClass}`}>
+      <div className={ `count_status count_status-${health.toLowerCase()}` }>
         <div className="count_status-icon">
-          <EntityIcon entity={ props.iconType } health={ props.health } iconSize="medium" />
+          <EntityIcon entity={ iconType } health={ health } iconSize="medium" />
         </div>
         <div className="count_status-text">
-          <strong>{ props.count }</strong> { props.name }
+          <strong>{ count }</strong> { name }
         </div>
       </div>
     );

diff --git a/static_src/components/elastic_line_item.jsx b/static_src/components/elastic_line_item.jsx
@@ -18,11 +18,8 @@ const defaultProps = {
 
 export default class ElasticLineItem extends React.Component {
   render() {
-    const props = this.props;
-    const alignClass = `elastic_line-item-${props.align}`;
-
     return (
-      <div className={ `elastic_line-item ${alignClass}`}>
+      <div className={ `elastic_line-item elastic_line-item-${this.props.align}` }>
         { this.props.children }
       </div>
     );

diff --git a/static_src/components/expandable_box.jsx b/static_src/components/expandable_box.jsx
@@ -1,6 +1,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 const propTypes = {
   children: PropTypes.any,
@@ -19,9 +20,13 @@ const defaultProps = {
 
 export default class ExpandableBox extends React.Component {
   render() {
-    const expandedClass = this.props.isExpanded && 'expandable_box-is_expanded';
+    const classes = classNames('expandable_box', {
+      'expandable_box-is_expanded': this.props.isExpanded,
+      [`${this.props.classes.join('')}`]: this.props.classes.length
+    });
+
     return (
-      <div className={['expandable_box', expandedClass, ...this.props.classes].join(' ')}>
+      <div className={ classes }>
         <div className="expandable_box-click" onClick={ this.props.clickHandler }>
           { this.props.clickableContent }
         </div>

diff --git a/static_src/components/form/form_text.jsx b/static_src/components/form/form_text.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import FormElement from './form_element.jsx';
 import FormError from './form_error.jsx';
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 export default class FormText extends FormElement {
   get error() {
@@ -14,7 +14,7 @@ export default class FormText extends FormElement {
   }
 
   render() {
-    const classes = classnames({
+    const classes = classNames({
       'form_text-inline': this.props.inline,
       error: !!this.error
     });

diff --git a/static_src/components/icon.jsx b/static_src/components/icon.jsx
@@ -1,6 +1,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
+import iconImg from 'cloudgov-style/img/cloudgov-sprite.svg';
 
 const ICON_TYPES = [
   'fill',
@@ -38,22 +40,21 @@ const defaultProps = {
 
 export default class Icon extends React.Component {
   getImagePath(iconName) {
-    const img = require('cloudgov-style/img/cloudgov-sprite.svg');
     const fill = this.props.iconType === 'fill' ? 'fill-' : '';
-    return `assets/${img}#i-${fill}${iconName}`;
+    return `assets/${iconImg}#i-${fill}${iconName}`;
   }
 
   render() {
-    const mainClass = this.props.iconType === 'fill' ? 'icon-fill' : 'icon';
-    const styleClass = `icon-${this.props.styleType}`;
-    const sizeClass = this.props.iconSize && `icon-${this.props.iconSize}`;
-    const borderedClass = (this.props.bordered) &&
-      'icon-bordered';
-    const iconClasses = `${mainClass} ${styleClass} ${sizeClass} ${borderedClass}`;
+    const classes = classNames(`icon-${this.props.styleType}`, {
+      [`icon-${this.props.iconSize}`]: this.props.iconSize,
+      'icon-bordered': this.props.bordered,
+      icon: !this.props.iconType,
+      'icon-fill': this.props.iconType
+    });
 
     return (
       <span>
-        <svg className={ iconClasses }>
+        <svg className={ classes }>
           <use xlinkHref={ this.getImagePath(this.props.name) }>
           </use>
         </svg> { this.props.children }

diff --git a/static_src/components/notification.jsx b/static_src/components/notification.jsx
@@ -37,8 +37,6 @@ export default class Notification extends React.Component {
   }
 
   render() {
-    const statusClass = `notification-${this.props.status}`;
-    let content = <span>{ this.props.message }</span>;
     let actionElements;
 
     if (this.props.actions.length) {
@@ -53,10 +51,10 @@ export default class Notification extends React.Component {
     }
 
     return (
-    <div className={ `notification ${statusClass} test-notification` }>
+    <div className={ `notification notification-${this.props.status} test-notification` }>
       <div className="notification-wrap">
         <p className="notification-message test-notification-message">
-          { content }
+          { this.props.message }
         </p>
         { actionElements }
         <a className="notification-dismiss test-notification-dismiss"

diff --git a/static_src/components/panel_actions.jsx b/static_src/components/panel_actions.jsx
@@ -15,9 +15,8 @@ const defaultProps = {
 
 export default class PanelActions extends React.Component {
   render() {
-    const alignClass = `panel-actions-${this.props.align}`;
     return (
-      <span className={ `panel-actions ${alignClass}` }>
+      <span className={ `panel-actions panel-actions-${this.props.align}` }>
         { this.props.children }
       </span>
     );

diff --git a/static_src/components/panel_documentation.jsx b/static_src/components/panel_documentation.jsx
@@ -1,6 +1,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 
 const propTypes = {
   children: PropTypes.any,
@@ -13,10 +14,12 @@ const defaultProps = {
 
 export default class PanelDocumentation extends React.Component {
   render() {
-    const descClass = this.props.description && 'panel-documentation-desc';
+    const classes = classNames('panel-documentation', {
+      'panel-documentation-desc': this.props.description
+    });
 
     return (
-      <div className={ `panel-documentation ${descClass}` }>
+      <div className={ classes }>
         { this.props.children }
       </div>
     );

diff --git a/static_src/components/panel_row.jsx b/static_src/components/panel_row.jsx
@@ -1,7 +1,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import classnames from 'classnames';
+import classNames from 'classnames';
 
 const STYLES = [
   'bordered',
@@ -21,15 +21,15 @@ const defaultProps = {};
 
 export default class PanelRow extends React.Component {
   render() {
-    const { props } = this;
-    const classes = classnames({
-      [`panel-row-${props.styleClass}`]: props.styleClass,
-      'panel-row': props.styleClass !== 'boxed'
+    const { styleClass, id, children, className } = this.props;
+    const classes = classNames(className, {
+      [`panel-row-${styleClass}`]: styleClass,
+      'panel-row': styleClass !== 'boxed'
     });
 
     return (
-      <div id={ this.props.id } className={ classes }>
-        { this.props.children }
+      <div id={ id } className={ classes }>
+        { children }
       </div>
     );
   }