Add back button to NorthHeader component

admin/client/src/components/NorthHeader/NorthHeader.js

@@ -3,13 +3,62 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
 
 class NorthHeader extends SilverStripeComponent {
 
+  constructor(props) {
+    super(props);
+
+    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
+  }
+
   render() {
+    const buttonClassNames = [
+      'btn',
+      'btn-secondary',
+      'action',
+      'font-icon-left-open',
+      'toolbar__navigation__back-button',
+    ];
+    const backButtonProps = {
+      className: buttonClassNames.join(' '),
+      onClick: this.handleBackButtonClick,
+      href: '#',
+      type: 'button',
+    };
+
     return (
       <div className="toolbar--north container-fluid">
-        {this.props.children}
+        <div className="toolbar__navigation">
+          {this.props.showBackButton &&
+            <button {...backButtonProps}></button>
+          }
+          {this.props.children}
+        </div>
       </div>
     );
   }
+
+  /**
+   * Event handler for the back button.
+   *
+   * @param {Object} event
+   */
+  handleBackButtonClick(event) {
+    if (typeof this.props.handleBackButtonClick !== 'undefined') {
+      this.props.handleBackButtonClick(event);
+      return;
+    }
+
+    event.preventDefault();
+    window.ss.router.back();
+  }
 }
 
+NorthHeader.propTypes = {
+  handleBackButtonClick: React.PropTypes.func,
+  showBackButton: React.PropTypes.bool,
+};
+
+NorthHeader.defaultProps = {
+  showBackButton: false,
+};
+
 export default NorthHeader;

admin/client/src/components/NorthHeader/NorthHeader.scss

@@ -14,11 +14,15 @@
     max-height: $toolbar-height;
 }
 
+.toolbar__navigation__back-button {
+  float: left;
+  margin: $spacer-y/2 $spacer-x $spacer-y/2 0;
+}
+
 .north-header__heading {
     font-size: $font-size-lg;
     font-weight: normal;
     line-height: 20px;
-    width: 100%;
     margin: $spacer-y 0;
 }
 

admin/client/src/components/NorthHeader/README.md

@@ -4,3 +4,11 @@ The main header for sections in the CMS.
 Styles are contained within layout.scss
 
 ## Props
+
+### handleBackButtonClick (func)
+
+Provides custom handling of back button clicks.
+
+### showBackButton (bool)
+
+If `true` a back button is displayed. This prop is `false` by default.

admin/client/src/containers/CampaignAdmin/CampaignAdmin.js

@@ -39,7 +39,7 @@ class CampaignAdmin extends SilverStripeComponent {
       if (captureRoute) {
         // If this component is mounted, then handle all page changes via
         // state / redux
-      this.props.actions.showCampaignView(ctx.params.id, ctx.params.view);
+        this.props.actions.showCampaignView(ctx.params.id, ctx.params.view);
       } else {
         // If component is not mounted, we need to allow root routes to load
         // this section in via ajax
@@ -53,7 +53,7 @@ class CampaignAdmin extends SilverStripeComponent {
       const applies = window.ss.router.routeAppliesToCurrentLocation(route);
       if (!applies) {
         captureRoute = false;
-  }
+      }
       next();
     });
   }
@@ -146,7 +146,7 @@ class CampaignAdmin extends SilverStripeComponent {
     return (
       <div className="cms-middle no-preview">
         <div className="cms-campaigns collapse in" aria-expanded="true">
-          <NorthHeader>
+          <NorthHeader showBackButton>
             <h2 className="text-truncate north-header__heading">Campaigns</h2>
           </NorthHeader>
           <FormBuilder {...formBuilderProps} />