From e56cd1d070044e4372118224f5575e682cb49843 Mon Sep 17 00:00:00 2001 From: Adam Biagianti Date: Thu, 5 Oct 2017 15:47:08 -0400 Subject: [PATCH 1/3] Removes style code --- CONTRIBUTING.md | 2 +- static_src/components/app_container.jsx | 9 ++-- static_src/components/app_count_status.jsx | 6 --- static_src/components/app_list.jsx | 5 --- static_src/components/app_quicklook.jsx | 16 +++---- static_src/components/breadcrumbs.jsx | 8 +--- static_src/components/breadcrumbs_item.jsx | 10 ++--- static_src/components/complex_list.jsx | 12 ++--- static_src/components/complex_list_item.jsx | 8 +--- static_src/components/count_status.jsx | 12 ++--- static_src/components/elastic_line.jsx | 7 +-- static_src/components/elastic_line_item.jsx | 7 +-- static_src/components/entity_empty.jsx | 8 +--- static_src/components/entity_icon.jsx | 4 -- static_src/components/expandable_box.jsx | 10 +---- static_src/components/footer.jsx | 14 +++--- static_src/components/global_error.jsx | 5 --- .../components/global_error_container.jsx | 3 -- static_src/components/header.jsx | 20 ++++----- static_src/components/header_link.jsx | 8 +--- static_src/components/icon.jsx | 8 +--- static_src/components/info_activities.jsx | 5 --- static_src/components/info_app_create.jsx | 15 +++---- static_src/components/info_environments.jsx | 7 +-- static_src/components/info_logs.jsx | 3 -- static_src/components/info_sandbox.jsx | 4 -- static_src/components/info_structure.jsx | 4 -- static_src/components/navbar.jsx | 29 +++++------- static_src/components/notification.jsx | 15 +++---- static_src/components/org_container.jsx | 21 ++++----- static_src/components/org_quicklook.jsx | 10 +---- static_src/components/overview_container.jsx | 6 +-- static_src/components/page_header.jsx | 10 ++--- static_src/components/panel.jsx | 17 ++----- static_src/components/panel_actions.jsx | 12 +---- static_src/components/panel_block.jsx | 12 +---- static_src/components/panel_documentation.jsx | 12 +---- static_src/components/panel_group.jsx | 12 +---- static_src/components/panel_header.jsx | 12 +---- static_src/components/panel_row.jsx | 23 +++------- static_src/components/resource_usage.jsx | 13 ------ static_src/components/route.jsx | 7 +-- static_src/components/route_form.jsx | 23 ++++------ static_src/components/routes_panel.jsx | 6 +-- .../components/service_count_status.jsx | 11 ----- .../components/service_instance_panel.jsx | 5 --- static_src/components/space_container.jsx | 17 +++---- static_src/components/space_count_status.jsx | 14 +----- static_src/components/space_quicklook.jsx | 11 +---- static_src/components/stat.jsx | 20 +++------ static_src/components/usage_and_limits.jsx | 19 +++----- static_src/components/user_list.jsx | 5 +-- .../test/unit/util/create_styler.spec.js | 45 ------------------- static_src/util/create_styler.js | 25 ----------- 54 files changed, 130 insertions(+), 502 deletions(-) delete mode 100644 static_src/test/unit/util/create_styler.spec.js delete mode 100644 static_src/util/create_styler.js diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 046ad79e..3187fee5 100644 --- a/CONTRIBUTING.md +++ b/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. diff --git a/static_src/components/app_container.jsx b/static_src/components/app_container.jsx index 1fa98fb3..93f3579b 100644 --- a/static_src/components/app_container.jsx +++ b/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 = { worstState }; + label = { worstState }; } return label; @@ -209,8 +206,8 @@ export default class AppContainer extends React.Component { } else if (!this.state.loading && appReady(this.state.app)) { content = (
-
-
+
+
{ this.error } diff --git a/static_src/components/app_count_status.jsx b/static_src/components/app_count_status.jsx index b1ac82cd..237a121c 100644 --- a/static_src/components/app_count_status.jsx +++ b/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'; @@ -22,8 +18,6 @@ const defaultProps = { export default class AppCountStatus extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { diff --git a/static_src/components/app_list.jsx b/static_src/components/app_list.jsx index 3310cc13..b41a1780 100644 --- a/static_src/components/app_list.jsx +++ b/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() { diff --git a/static_src/components/app_quicklook.jsx b/static_src/components/app_quicklook.jsx index d3a7c4e0..5d23ca14 100644 --- a/static_src/components/app_quicklook.jsx +++ b/static_src/components/app_quicklook.jsx @@ -5,8 +5,6 @@ import React from 'react'; 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'; @@ -31,8 +29,6 @@ const defaultProps = { export default class AppQuicklook extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } appHref() { @@ -45,7 +41,7 @@ export default class AppQuicklook extends React.Component { const health = appHealth(app); const statusClass = `status-${health}`; return ( - + { app.state.toLowerCase() } ); @@ -56,7 +52,7 @@ export default class AppQuicklook extends React.Component { const statusClass = !isHealthyApp(app) && 'status-error'; return ( - + { app.name } ); @@ -82,7 +78,7 @@ export default class AppQuicklook extends React.Component { info.push( { app.memory } MB
- memory allocated + memory allocated ); } @@ -90,7 +86,7 @@ export default class AppQuicklook extends React.Component { info.push( { app.disk_quota } MB
- disk quota + disk quota ); } @@ -98,9 +94,9 @@ export default class AppQuicklook extends React.Component { return ( -

+

- + { this.props.spaceName } / { this.appName() }

diff --git a/static_src/components/breadcrumbs.jsx b/static_src/components/breadcrumbs.jsx index 49b78788..1c4fa971 100644 --- a/static_src/components/breadcrumbs.jsx +++ b/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 ( -
    +
      { breadcrumbs }
    ); diff --git a/static_src/components/breadcrumbs_item.jsx b/static_src/components/breadcrumbs_item.jsx index 99ef1830..6a6555c9 100644 --- a/static_src/components/breadcrumbs_item.jsx +++ b/static_src/components/breadcrumbs_item.jsx @@ -1,9 +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'; const propTypes = { children: PropTypes.node.isRequired, @@ -13,21 +10,20 @@ const propTypes = { export default class BreadcrumbsItem extends React.Component { constructor(props) { super(props); - this.styler = createStyler(style); } render() { const url = this.props.url; const content = url ? ( - + { this.props.children } ) - : { this.props.children }; + : { this.props.children }; return ( -
  1. +
  2. { content }
    3. ); diff --git a/static_src/components/complex_list.jsx b/static_src/components/complex_list.jsx index 00e3bff5..b1dd0694 100644 --- a/static_src/components/complex_list.jsx +++ b/static_src/components/complex_list.jsx @@ -2,8 +2,6 @@ import PropTypes from 'prop-types'; import React from 'react'; 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([ @@ -25,8 +23,6 @@ const defaultProps = { export default class ComplexList extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } hasAnyTitle() { @@ -36,7 +32,7 @@ export default class ComplexList extends React.Component { render() { const props = this.props; const emptyMessage = this.props.emptyMessage && ( -
    +
    { this.props.emptyMessage }
    ); @@ -50,8 +46,8 @@ export default class ComplexList extends React.Component { title = this.props.title; } header = ( -
    -

    +
    +

    { title }

    @@ -59,7 +55,7 @@ export default class ComplexList extends React.Component { } return ( -
    +
    { header } { emptyMessage } { this.props.children.length > 0 && this.props.children.map((child, i) => { diff --git a/static_src/components/complex_list_item.jsx b/static_src/components/complex_list_item.jsx index 6e0a9730..f37b14dc 100644 --- a/static_src/components/complex_list_item.jsx +++ b/static_src/components/complex_list_item.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'; - const propTypes = { children: PropTypes.any }; @@ -14,13 +10,11 @@ const defaultProps = {}; export default class ComplexListItem extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { return ( -
    +
    { this.props.children }
    ); diff --git a/static_src/components/count_status.jsx b/static_src/components/count_status.jsx index 4c0e9273..8558c8df 100644 --- a/static_src/components/count_status.jsx +++ b/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'; @@ -30,8 +26,6 @@ const defaultProps = { export default class CountStatus extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { @@ -39,11 +33,11 @@ export default class CountStatus extends React.Component { const statusClass = `count_status-${props.health.toLowerCase()}`; return ( -
    -
    +
    +
    -
    +
    { props.count } { props.name }
    diff --git a/static_src/components/elastic_line.jsx b/static_src/components/elastic_line.jsx index 5429eca3..48b74623 100644 --- a/static_src/components/elastic_line.jsx +++ b/static_src/components/elastic_line.jsx @@ -2,9 +2,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'; - const propTypes = { children: PropTypes.array }; @@ -15,13 +12,11 @@ const defaultProps = { export default class ElasticLine extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { return ( -
    +
    { this.props.children }
    ); diff --git a/static_src/components/elastic_line_item.jsx b/static_src/components/elastic_line_item.jsx index 77d350fb..631b71f9 100644 --- a/static_src/components/elastic_line_item.jsx +++ b/static_src/components/elastic_line_item.jsx @@ -2,9 +2,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'; - const ALIGN_STYLES = [ 'start', 'end' @@ -22,8 +19,6 @@ const defaultProps = { export default class ElasticLineItem extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { @@ -31,7 +26,7 @@ export default class ElasticLineItem extends React.Component { const alignClass = `elastic_line-item-${props.align}`; return ( -
    +
    { this.props.children }
    ); diff --git a/static_src/components/entity_empty.jsx b/static_src/components/entity_empty.jsx index 507813a0..321fb73c 100644 --- a/static_src/components/entity_empty.jsx +++ b/static_src/components/entity_empty.jsx @@ -1,11 +1,7 @@ import PropTypes from 'prop-types'; import React from 'react'; - import PanelDocumentation from './panel_documentation.jsx'; -import createStyler from '../util/create_styler'; -import style from 'cloudgov-style/css/cloudgov-style.css'; - const propTypes = { callout: PropTypes.node, @@ -19,15 +15,13 @@ const defaultProps = { export default class EntityEmpty extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { const props = this.props; return ( -
    +

    { props.callout }

    { props.children } diff --git a/static_src/components/entity_icon.jsx b/static_src/components/entity_icon.jsx index 9ad66f50..d4315882 100644 --- a/static_src/components/entity_icon.jsx +++ b/static_src/components/entity_icon.jsx @@ -4,8 +4,6 @@ import React from 'react'; import Icon from './icon.jsx'; import { entityHealth } from '../constants.js'; -import createStyler from '../util/create_styler'; -import style from 'cloudgov-style/css/cloudgov-style.css'; const ENTITIES = ['app', 'service', 'space', 'org']; @@ -23,8 +21,6 @@ const defaultProps = { export default class EntityIcon extends React.Component { constructor(props) { super(props); - - this.styler = createStyler(style); } render() { diff --git a/static_src/components/expandable_box.jsx b/static_src/components/expandable_box.jsx index acafcec6..05846029 100644 --- a/static_src/components/expandable_box.jsx +++ b/static_src/components/expandable_box.jsx @@ -2,10 +2,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'; - const propTypes = { children: PropTypes.any, classes: PropTypes.array, @@ -24,15 +20,13 @@ const defaultProps = { export default class ExpandableBox extends React.Component { constructor(props) { super(props); - this.state = {}; - this.styler = createStyler(style); } render() { const expandedClass = this.props.isExpanded && 'expandable_box-is_expanded'; return ( -
    -
    +
    +
    { this.props.clickableContent }
    { this.props.children } diff --git a/static_src/components/footer.jsx b/static_src/components/footer.jsx index 49251a13..a19b3976 100644 --- a/static_src/components/footer.jsx +++ b/static_src/components/footer.jsx @@ -1,22 +1,18 @@ import React from 'react'; -import createStyler from '../util/create_styler'; import { config } from 'skin'; -import style from 'cloudgov-style/css/cloudgov-style.css'; export default class Header extends React.Component { - constructor(props) { super(props); - this.styler = createStyler(style); } render() { return ( -