Cleans code style of '/src/components' through 'headers.js`. codeforb…

…oston#1018

src/App.js

@@ -12,8 +12,8 @@ import { Confirmer } from './utils/getUserConfirmation';
 import HomePage from './containers/HomePage';
 import AboutPage from './containers/AboutPage';
 import VisitPage from './containers/VisitPage';
-import Footer from './components/Footer';
-import Header from './components/Header';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
 
 // Development HUD
 import { DevSwitch } from './containers/DevSwitch';

src/components/Footer.js

@@ -1,49 +1,54 @@
 import React from 'react';
-import logo from '../images/logo.svg';
-
 import {
   Grid,
   Header,
   Segment,
   Image,
 } from 'semantic-ui-react';
 
-const Footer = ({ translations }) => {
+import logo from '../images/logo.svg';
+
+
+const Footer = function ({ translations }) {
   return (
     <Segment
       className = { `footer_segment` }
+      color     = { `teal` }
       inverted
-      vertical
-      color='teal'>
+      vertical>
       <Grid
         container
         divided
         inverted
         stackable>
         <Grid.Row>
+
           <Grid.Column
-            width={ 4 }
-            floated='left'>
+            width   = { 4 }
+            floated = { `left` }>
             <Header
-              as='h4'
+              as = { `h4` }
               inverted>
               { translations.i_header }
             </Header>
             <p>{ translations.i_cfbCredit }</p>
           </Grid.Column>
-          <a
 
-            href="http://www.codeforboston.org"
-            target="_blank"
-            rel="noopener noreferrer"><Image
-              src={ logo }
-              size='small'
-              floated='right' />
+          <a
+            href   = { `http://www.codeforboston.org` }
+            target = { `_blank` }
+            rel    = { `noopener noreferrer` }>
+            <Image
+              src     = { logo }
+              size    = { `small` }
+              floated = { `right` } />
           </a>
+
         </Grid.Row>
       </Grid>
     </Segment>
   );
-};
+};  // Ends <Footer>
+
 
-export default Footer;
+export { Footer };

src/components/GraphTimeButtons.js

@@ -1,13 +1,14 @@
 import { Button } from 'semantic-ui-react';
 import React from 'react';
 
+
 const GraphButton = function ({ id, activeID, onClick }) {
   return (
     <Button
-      id={ id }
-      active={ activeID === id }
-      onClick={ onClick }>
-      {id}
+      id      = { id }
+      active  = { activeID === id }
+      onClick = { onClick }>
+      { id }
     </Button>
   );
 };
@@ -16,21 +17,25 @@ const GraphTimeButtons = function ({ activeID, onClick }) {
   return (
     <Button.Group
       basic
-      className='graph-time-options'>
+      className = { `graph-time-options` }>
       <GraphButton
-        id={ 'Weekly' }
-        activeID={ activeID }
-        onClick={ onClick } />
+        id       = { `Weekly` }
+        activeID = { activeID }
+        onClick  = { onClick } />
       <GraphButton
-        id={ 'Monthly' }
-        activeID={ activeID }
-        onClick={ onClick } />
+        id       = { `Monthly` }
+        activeID = { activeID }
+        onClick  = { onClick } />
       <GraphButton
-        id={ 'Yearly' }
-        activeID={ activeID }
-        onClick={ onClick } />
+        id       = { `Yearly` }
+        activeID = { activeID }
+        onClick  = { onClick } />
     </Button.Group>
   );
 };
 
-export { GraphTimeButtons };
+
+export {
+  GraphButton,
+  GraphTimeButtons,
+};

src/components/Header.js

@@ -1,25 +1,26 @@
 import React from 'react';
-
 import { Segment } from 'semantic-ui-react';
 
 import { MainMenu } from './MainMenu';
 import { BetaWarning } from './BetaWarning';
 
+
 class Header extends React.Component {
   render() {
     return (
       <Segment
-        id={ `appHeader` }
-        className="header-segment"
+        id        = { `appHeader` }
+        className = { `header-segment` }
+        textAlign = { `center` }
+        color     = { `teal` }
         inverted
-        textAlign='center'
-        vertical
-        color='teal'>
+        vertical>
         <MainMenu translations={ this.props.translations } />
         <BetaWarning translations={ this.props.translations } />
       </Segment>
     );
-  }
-}
+  };
+};
+
 
-export default Header;
+export { Header };

src/components/headings.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { Header } from 'semantic-ui-react';
 
 
-/** h1 styles available for form (and other) text.
+/** <h1> styles available for form (and other) text.
 *
 * @function
 * @param {object} props
@@ -24,20 +24,20 @@ const ContentH1 = function ({ subheading, children }) {
     <div className={ 'text-h1' } >
       <div /> {/** div here to make sure header margin doesn\'t collapse */}
       <Header
-        as='h3'
-        style={{ display: 'inline-block' }}>
+        as    = { `h3` }
+        style = {{ display: 'inline-block' }}>
         { children }
       </Header>
       <ContentSubH1>{ subheading }</ContentSubH1>
       <br />
     </div>
   );
 
-};  // End ContentH1{} Component
+};  // Ends <ContentH1>
 
 
 /** A clearer way than a ternary operator to have a possible
-* subheader and separate styling.
+*     subheader and separate styling.
 *
 * @function
 * @param {object} props
@@ -53,16 +53,16 @@ const ContentSubH1 = function ({ children }) {
 
   return (
     <div
-      className = { 'text-sub-h1' }
-      style={{ display: 'block', textAlign: 'left' }}>
+      className = { `text-sub-h1` }
+      style     = {{ display: `block`, textAlign: `left` }}>
       { children }
     </div>
   );
 
-};  // End ContentSubH1{} Component
+};  // Ends <ContentSubH1>
 
 
-/* To discuss: Should form-specific headings be in a different file? */
+/* @todo To discuss: Should form-specific headings be in a different file? */
 
 
 /** Weekly/Monthly/Yearly headings combined for the
@@ -83,38 +83,45 @@ const ContentSubH1 = function ({ children }) {
 */
 const IntervalColumnHeadings = function ({ type }) {
 
-  let columnTitle = type.toLowerCase().replace(/\b[a-z]/g, (letter) => {
+  let styles      = { fontSize: `14px` },
+      toUpper     = function (letter) {
         return letter.toUpperCase();
-      }) + ' Type',
-      styles      = { fontSize: '14px' };
+      },
+      asLowerCase = type.toLowerCase(),
+      toReplace   = /\b[a-z]/g,
+      columnTitle = asLowerCase.replace(toReplace, toUpper) + ` Type`;
 
   return (
-    <div style={{ display: 'inline-block' }}>
+    <div style={{ display: `inline-block` }}>
       <ColumnHeading
-        type={ type }
-        colName='weekly'
-        style={ styles }>Weekly
+        type    = { type }
+        colName = { `weekly` }
+        style   = { styles }>
+        Weekly
       </ColumnHeading>
       <ColumnHeading
-        type={ type }
-        colName='monthly'
-        style={ styles }>Monthly
+        type    = { type }
+        colName = { `monthly` }
+        style   = { styles }>
+        Monthly
       </ColumnHeading>
       <ColumnHeading
-        type={ type }
-        colName='yearly'
-        style={ styles }>Yearly
+        type    = { type }
+        colName = { `yearly` }
+        style   = { styles }>
+        Yearly
       </ColumnHeading>
       <ColumnHeading
-        type={ type }
-        colName={ type }
-        style={ styles }
-        columnTitle={ columnTitle }>{columnTitle}
+        type        = { type }
+        colName     = { type }
+        style       = { styles }
+        columnTitle = { columnTitle }>
+        { columnTitle }
       </ColumnHeading>
     </div>
   );
 
-};  // End <IntervalColumnHeadings>
+};  // Ends <IntervalColumnHeadings>
 
 
 /** Style for text at the tops of columns, like
@@ -130,17 +137,17 @@ const IntervalColumnHeadings = function ({ type }) {
 * @returns Component
 */
 const ColumnHeading = function ({ type, colName, style, children }) {
-  let classes = type + '-column cashflow-column header ' + colName;
+  let classes = type + `-column cashflow-column header ` + colName;
   return (
     <Header
-      as='h4'
-      className={ classes }
-      style={ style }
-      color='teal'>
+      as        = { `h4` }
+      className = { classes }
+      style     = { style }
+      color     = { `teal` }>
       { children }
     </Header>
   );
-};  // End <ColumnHeading>
+};  // Ends <ColumnHeading>
 
 
 export {

src/test/components/Footer.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import Footer from '../../components/Footer';
+import { Footer } from '../../components/Footer';
 import { translations } from '../helpers';
 
 describe('<Footer>', () => {

src/test/components/Header.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import Header from '../../components/Header';
+import { Header } from '../../components/Header';
 import { withRouter } from '../helpers';
 import { translations } from '../helpers';