Merge pull request #1250 from 18F/ab-remove-styler

Removes styler code

CONTRIBUTING.md

@@ -361,7 +361,7 @@ Here are some basic rules to work with components successfully:
   // Bad
   const propTypes = { status: PropTypes.string };
   ```
- - Use `createStyler` for adding cg-style CSS classes to components.
+
  - Components should usually have either `state` or `props`, but usually not both. See [Container component](#container-component).
    - The only time it should have both when there's a prop for a configurable part of the UI.
 

static_src/components/app_container.jsx

@@ -24,8 +24,6 @@ import ServiceInstancePanel from './service_instance_panel.jsx';
 import SpaceStore from '../stores/space_store.js';
 import UsageLimits from './usage_and_limits.jsx';
 import appActions from '../actions/app_actions.js';
-import createStyler from '../util/create_styler';
-import style from 'cloudgov-style/css/cloudgov-style.css';
 
 
 function appReady(app) {
@@ -76,7 +74,6 @@ export default class AppContainer extends React.Component {
     this._onChange = this._onChange.bind(this);
     this._onRestart = this._onRestart.bind(this);
     this._onStart = this._onStart.bind(this);
-    this.styler = createStyler(style);
   }
 
   componentDidMount() {
@@ -122,7 +119,7 @@ export default class AppContainer extends React.Component {
     }
 
     if (worstState) {
-      label = <span className={ this.styler('usa-label') }>{ worstState }</span>;
+      label = <span className="usa-label">{ worstState }</span>;
     }
 
     return label;
@@ -209,8 +206,8 @@ export default class AppContainer extends React.Component {
     } else if (!this.state.loading && appReady(this.state.app)) {
       content = (
         <div>
-          <div className={ this.styler('grid') }>
-            <div className={ this.styler('grid-width-12') }>
+          <div className="grid">
+            <div className="grid-width-12">
               <Breadcrumbs />
               <PageHeader title={ title }>
                 { this.error }

static_src/components/app_count_status.jsx

@@ -1,10 +1,6 @@
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import createStyler from '../util/create_styler';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
 import CountStatus from './count_status.jsx';
 import { entityHealth } from '../constants.js';
 import { appHealth, worstHealth } from '../util/health';
@@ -20,12 +16,6 @@ const defaultProps = {
 };
 
 export default class AppCountStatus extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.styler = createStyler(style);
-  }
-
   render() {
     const props = this.props;
     let health = entityHealth.inactive;

static_src/components/app_list.jsx

@@ -1,9 +1,6 @@
 
 import React from 'react';
 
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
 import AppQuicklook from './app_quicklook.jsx';
 import ComplexList from './complex_list.jsx';
 import EntityEmpty from './entity_empty.jsx';
@@ -14,7 +11,6 @@ import OrgStore from '../stores/org_store.js';
 import SpaceStore from '../stores/space_store.js';
 import UserStore from '../stores/user_store';
 
-
 function stateSetter() {
   const currentOrgGuid = OrgStore.currentOrgGuid;
   const currentSpaceGuid = SpaceStore.currentSpaceGuid;
@@ -42,7 +38,6 @@ export default class AppList extends React.Component {
 
     this.state = stateSetter();
     this._onChange = this._onChange.bind(this);
-    this.styler = createStyler(style);
   }
 
   componentDidMount() {

static_src/components/app_quicklook.jsx

@@ -1,12 +1,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
+import classNames from 'classnames';
 import ElasticLine from './elastic_line.jsx';
 import ElasticLineItem from './elastic_line_item.jsx';
 import EntityIcon from './entity_icon.jsx';
-import createStyler from '../util/create_styler';
-import style from 'cloudgov-style/css/cloudgov-style.css';
 import { appHref } from '../util/url';
 import { appHealth, isHealthyApp } from '../util/health';
 
@@ -29,12 +27,6 @@ const defaultProps = {
 };
 
 export default class AppQuicklook extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.styler = createStyler(style);
-  }
-
   appHref() {
     const props = this.props;
     const appGuid = props.app.guid;
@@ -43,20 +35,19 @@ export default class AppQuicklook extends React.Component {
 
   appState(app) {
     const health = appHealth(app);
-    const statusClass = `status-${health}`;
+
     return (
-      <span className={ this.styler('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={ this.styler(statusClass) } href={ this.appHref() }>
+      <a className={ classNames({ 'status-error': !isHealthyApp(app) }) } href={ this.appHref() }>
         { app.name }
       </a>
     );
@@ -82,25 +73,25 @@ export default class AppQuicklook extends React.Component {
       info.push(
         <ElasticLineItem key="2" align="end">
           { app.memory } MB <br />
-          <span className={ this.styler('subtext') }>memory allocated</span>
+          <span className="subtext">memory allocated</span>
         </ElasticLineItem>
       );
     }
     if (this.props.extraInfo.includes('diskQuota')) {
       info.push(
         <ElasticLineItem key="3" align="end">
           { app.disk_quota } MB <br />
-          <span className={ this.styler('subtext') }>disk quota</span>
+          <span className="subtext">disk quota</span>
         </ElasticLineItem>
       );
     }
 
     return (
       <ElasticLine>
         <ElasticLineItem>
-          <h3 className={ this.styler('contents-secondary') }>
+          <h3 className="contents-secondary">
             <EntityIcon entity="app" health={ appHealth(app) } iconSize="medium" />
-            <span className={ this.styler('contents-path') }>
+            <span className="contents-path">
               { this.props.spaceName } / </span>{ this.appName() }
           </h3>
         </ElasticLineItem>

static_src/components/breadcrumbs.jsx

@@ -1,14 +1,10 @@
 import React from 'react';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
 import AppStore from '../stores/app_store';
 import BreadcrumbsItem from './breadcrumbs_item.jsx';
 import OrgStore from '../stores/org_store';
 import SpaceStore from '../stores/space_store';
 import { orgHref, spaceHref } from '../util/url';
 
-
 function stateSetter() {
   const app = AppStore.get(AppStore.currentAppGuid);
   const space = SpaceStore.get(SpaceStore.currentSpaceGuid);
@@ -24,7 +20,7 @@ function stateSetter() {
 export default class Breadcrumbs extends React.Component {
   constructor(props) {
     super(props);
-    this.styler = createStyler(style);
+
     this.state = stateSetter();
     this._onChange = this._onChange.bind(this);
   }
@@ -71,7 +67,7 @@ export default class Breadcrumbs extends React.Component {
     }
 
     return (
-      <ol className={ this.styler('breadcrumbs', 'test-breadcrumbs') }>
+      <ol className="breadcrumbs test-breadcrumbs">
         { breadcrumbs }
       </ol>
     );

static_src/components/breadcrumbs_item.jsx

@@ -1,33 +1,25 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
 
 const propTypes = {
   children: PropTypes.node.isRequired,
   url: PropTypes.string
 };
 
 export default class BreadcrumbsItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.styler = createStyler(style);
-  }
-
   render() {
     const url = this.props.url;
     const content = url ?
       (
-        <a className={ this.styler('breadcrumbs-item-link') } href={ url }>
+        <a className="breadcrumbs-item-link" href={ url }>
           { this.props.children }
         </a>
       )
-      : <span className={ this.styler('breadcrumbs-item-current') }>{ this.props.children }</span>;
+      : <span className="breadcrumbs-item-current">{ this.props.children }</span>;
 
     return (
-      <li className={ this.styler('breadcrumbs-item') }>
+      <li className="breadcrumbs-item">
         { content }
       </li>
     );

static_src/components/complex_list.jsx

@@ -1,9 +1,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import ComplexListItem from './complex_list_item.jsx';
-import createStyler from '../util/create_styler';
-import style from 'cloudgov-style/css/cloudgov-style.css';
 
 const propTypes = {
   children: PropTypes.oneOfType([
@@ -23,43 +22,40 @@ const defaultProps = {
 };
 
 export default class ComplexList extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.styler = createStyler(style);
-  }
-
   hasAnyTitle() {
     return !!(this.props.title || this.props.titleElement);
   }
 
   render() {
-    const props = this.props;
     const emptyMessage = this.props.emptyMessage && (
-      <div className={ this.styler('complex_list-empty') }>
+      <div className="complex_list-empty">
         { this.props.emptyMessage }
       </div>
     );
     let header;
 
     if (this.hasAnyTitle()) {
       let title;
-      if (props.titleElement) {
-        title = props.titleElement;
+      if (this.props.titleElement) {
+        title = this.props.titleElement;
       } else {
         title = this.props.title;
       }
       header = (
-        <header className={ this.styler('complex_list-header') }>
-          <h4 className={ this.styler('complex_list-title') }>
+        <header className="complex_list-header">
+          <h4 className="complex_list-title">
             { title }
           </h4>
         </header>
       );
     }
 
+    const classes = classNames('complex_list', {
+      [this.props.className]: this.props.className
+    });
+
     return (
-      <div className={ [this.props.className, this.styler('complex_list')].join(' ') }>
+      <div className={ classes }>
         { header }
         { emptyMessage }
         { this.props.children.length > 0 && this.props.children.map((child, i) => {

static_src/components/complex_list_item.jsx

@@ -1,26 +1,16 @@
-
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import createStyler from '../util/create_styler';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
 const propTypes = {
   children: PropTypes.any
 };
 
 const defaultProps = {};
 
 export default class ComplexListItem extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.styler = createStyler(style);
-  }
-
   render() {
     return (
-      <div className={ this.styler('complex_list-item') }>
+      <div className="complex_list-item">
         { this.props.children }
       </div>
     );

static_src/components/count_status.jsx

@@ -1,10 +1,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
 import { entityHealth } from '../constants.js';
 import EntityIcon from './entity_icon.jsx';
 
@@ -28,23 +24,16 @@ const defaultProps = {
 };
 
 export default class CountStatus extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-    this.styler = createStyler(style);
-  }
-
   render() {
-    const props = this.props;
-    const statusClass = `count_status-${props.health.toLowerCase()}`;
+    const { health, iconType, count, name } = this.props;
 
     return (
-      <div className={ this.styler('count_status', statusClass) }>
-        <div className={ this.styler('count_status-icon') }>
-          <EntityIcon entity={ props.iconType } health={ props.health } iconSize="medium" />
+      <div className={ `count_status count_status-${health.toLowerCase()}` }>
+        <div className="count_status-icon">
+          <EntityIcon entity={ iconType } health={ health } iconSize="medium" />
         </div>
-        <div className={ this.styler('count_status-text') }>
-          <strong>{ props.count }</strong> { props.name }
+        <div className="count_status-text">
+          <strong>{ count }</strong> { name }
         </div>
       </div>
     );