From ec99452ce15fb900c7ab5d83704936b0fafde1d7 Mon Sep 17 00:00:00 2001
From: Paul Clarke <paul@silverstripe.com>
Date: Tue, 26 Apr 2016 10:47:07 +1200
Subject: [PATCH] Toolbar renaming from north-header and move styles to
 component

---
 .../src/components/Breadcrumb/README.md       |  2 +-
 .../NorthHeader/tests/NorthHeader-test.js     |  7 -------
 .../{NorthHeader => toolbar}/README.md        |  3 +--
 .../NorthHeader.js => toolbar/Toolbar.js}     | 11 +++++-----
 .../NorthHeader.scss => toolbar/Toolbar.scss} | 20 ++++++++++---------
 .../containers/CampaignAdmin/CampaignAdmin.js | 16 +++++++--------
 .../CampaignAdmin/CampaignAdminList.js        |  6 +++---
 admin/client/src/styles/bundle.scss           |  2 +-
 gulpfile.js                                   |  6 +++---
 9 files changed, 34 insertions(+), 39 deletions(-)
 delete mode 100644 admin/client/src/components/NorthHeader/tests/NorthHeader-test.js
 rename admin/client/src/components/{NorthHeader => toolbar}/README.md (81%)
 rename admin/client/src/components/{NorthHeader/NorthHeader.js => toolbar/Toolbar.js} (87%)
 rename admin/client/src/components/{NorthHeader/NorthHeader.scss => toolbar/Toolbar.scss} (63%)

diff --git a/admin/client/src/components/Breadcrumb/README.md b/admin/client/src/components/Breadcrumb/README.md
index 560cc1021..a6478b67e 100644
--- a/admin/client/src/components/Breadcrumb/README.md
+++ b/admin/client/src/components/Breadcrumb/README.md
@@ -1,4 +1,4 @@
-#NorthHeaderBreadcrumbs
+# Breadcrumb
 
 The breadcrumbs for the current section of the CMS.
 
diff --git a/admin/client/src/components/NorthHeader/tests/NorthHeader-test.js b/admin/client/src/components/NorthHeader/tests/NorthHeader-test.js
deleted file mode 100644
index b70a64eee..000000000
--- a/admin/client/src/components/NorthHeader/tests/NorthHeader-test.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* global jest, describe */
-
-jest.dontMock('../NorthHeader');
-
-describe('NorthHeaderComponent', () => {
-
-});
diff --git a/admin/client/src/components/NorthHeader/README.md b/admin/client/src/components/toolbar/README.md
similarity index 81%
rename from admin/client/src/components/NorthHeader/README.md
rename to admin/client/src/components/toolbar/README.md
index 559474483..d45dbef67 100644
--- a/admin/client/src/components/NorthHeader/README.md
+++ b/admin/client/src/components/toolbar/README.md
@@ -1,7 +1,6 @@
-# NorthHeader
+# Toolbar
 
 The main header for sections in the CMS.
-Styles are contained within layout.scss
 
 ## Props
 
diff --git a/admin/client/src/components/NorthHeader/NorthHeader.js b/admin/client/src/components/toolbar/Toolbar.js
similarity index 87%
rename from admin/client/src/components/NorthHeader/NorthHeader.js
rename to admin/client/src/components/toolbar/Toolbar.js
index 086da95a8..e424a4a2b 100644
--- a/admin/client/src/components/NorthHeader/NorthHeader.js
+++ b/admin/client/src/components/toolbar/Toolbar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import SilverStripeComponent from 'lib/SilverStripeComponent';
 
-class NorthHeader extends SilverStripeComponent {
+class Toolbar extends SilverStripeComponent {
 
   constructor(props) {
     super(props);
@@ -14,8 +14,9 @@ class NorthHeader extends SilverStripeComponent {
       'btn',
       'btn-secondary',
       'action',
-      'font-icon-left-open',
+      'font-icon-left-open-big',
       'toolbar__back-button',
+      'btn--no-text',
     ];
     const backButtonProps = {
       className: buttonClassNames.join(' '),
@@ -52,13 +53,13 @@ class NorthHeader extends SilverStripeComponent {
   }
 }
 
-NorthHeader.propTypes = {
+Toolbar.propTypes = {
   handleBackButtonClick: React.PropTypes.func,
   showBackButton: React.PropTypes.bool,
 };
 
-NorthHeader.defaultProps = {
+Toolbar.defaultProps = {
   showBackButton: false,
 };
 
-export default NorthHeader;
+export default Toolbar;
diff --git a/admin/client/src/components/NorthHeader/NorthHeader.scss b/admin/client/src/components/toolbar/Toolbar.scss
similarity index 63%
rename from admin/client/src/components/NorthHeader/NorthHeader.scss
rename to admin/client/src/components/toolbar/Toolbar.scss
index 4460ea5f1..74e29ff14 100644
--- a/admin/client/src/components/NorthHeader/NorthHeader.scss
+++ b/admin/client/src/components/toolbar/Toolbar.scss
@@ -1,5 +1,8 @@
-.toolbar {
-  width: 100%; // Todo: replace with mixin @include make-container();
+.toolbar,
+.toolbar--north,
+.toolbar--content,
+.toolbar--south {
+  @include make-container();
   height: $toolbar-total-height;
   background-color: $body-bg;
 
@@ -12,9 +15,6 @@
 
 // Northern bar containing breadcrum, tabs etc.
 .toolbar--north {
-  @extend .toolbar;
-  padding-left: $spacer-x; // Todo: replace with mixin @include make-container();
-  padding-right: $spacer-x; // Todo: replace with mixin @include make-container();
   display: block;
   background-image: none;
   background-color: $background-north;
@@ -24,15 +24,14 @@
 
 // Secondary content actions eg. Add page button
 .toolbar--content {
-  @extend .toolbar;
   padding: $spacer-y*.625 $spacer-x*.75;
   margin-bottom: $spacer-y/2;
 }
 
 // Primary content actions
 .toolbar--south {
-  @extend .toolbar;
-  padding: $spacer-y*.625 $spacer-x;
+  padding-top: $spacer-y*.625;
+  padding-bottom: $spacer-y*.625;
   position: absolute;
   bottom: 0;
   border-top: 1px solid $border-color;
@@ -40,5 +39,8 @@
 
 .toolbar__back-button {
   float: left;
-  margin: $spacer-y/2 $spacer-x $spacer-y/2 0;
+  margin: $spacer-y*.625 $spacer-x/2 $spacer-y*.625 #{-$spacer-x/4};
+  padding-left: $spacer-x/4;
+  padding-right: $spacer-x/4;
+  border: 0;
 }
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
index 81a279e06..27b7a5c7d 100644
--- a/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
@@ -6,7 +6,7 @@ import * as actions from 'state/campaign/CampaignActions';
 import SilverStripeComponent from 'lib/SilverStripeComponent';
 import FormAction from 'components/FormAction/FormAction';
 import i18n from 'i18n';
-import NorthHeader from 'components/NorthHeader/NorthHeader';
+import Toolbar from 'components/Toolbar/Toolbar';
 import FormBuilder from 'components/FormBuilder/FormBuilder';
 import CampaignAdminList from './CampaignAdminList';
 
@@ -98,11 +98,11 @@ class CampaignAdmin extends SilverStripeComponent {
     return (
       <div className="cms-content__inner no-preview">
         <div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
-          <NorthHeader>
+          <Toolbar>
             <div className="breadcrumb breadcrumb--current-only">
               <h2 className="breadcrumb__item-title breadcrumb__item-title--last">Campaigns</h2>
             </div>
-          </NorthHeader>
+          </Toolbar>
           <div className="panel-scrollable--single-toolbar">
             <div className="toolbar--content">
               <div className="btn-toolbar">
@@ -144,11 +144,11 @@ class CampaignAdmin extends SilverStripeComponent {
     return (
       <div className="cms-middle no-preview">
         <div className="cms-campaigns collapse in" aria-expanded="true">
-          <NorthHeader showBackButton>
+          <Toolbar showBackButton>
             <div className="breadcrumb breadcrumb--current-only">
               <h2 className="text-truncate toolbar__heading">Campaigns</h2>
             </div>
-          </NorthHeader>
+          </Toolbar>
           <FormBuilder schemaUrl={schemaUrl} />
         </div>
       </div>
@@ -168,11 +168,11 @@ class CampaignAdmin extends SilverStripeComponent {
     return (
       <div className="cms-middle no-preview">
         <div className="cms-campaigns collapse in" aria-expanded="true">
-          <NorthHeader showBackButton>
+          <Toolbar showBackButton>
             <div className="breadcrumb breadcrumb--current-only">
-              <h2 className="text-truncate toolbar__heading">Campaigns</h2>
+              <h2 className="text-truncate breadcrumb__item-title--last">Campaigns</h2>
             </div>
-          </NorthHeader>
+          </Toolbar>
           <div className="cms-middle__scrollable">
             <FormBuilder {...formBuilderProps} />
           </div>
diff --git a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
index 833a41563..253f82f9a 100644
--- a/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
+++ b/admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
@@ -7,7 +7,7 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
 import Accordion from 'components/Accordion/Accordion';
 import AccordionGroup from 'components/Accordion/AccordionGroup';
 import AccordionItem from 'components/Accordion/AccordionItem';
-import NorthHeader from 'components/NorthHeader/NorthHeader';
+import Toolbar from 'components/Toolbar/Toolbar';
 import FormAction from 'components/FormAction/FormAction';
 import CampaignAdminItem from './CampaignAdminItem';
 import BreadcrumbComponent from 'components/Breadcrumb/Breadcrumb';
@@ -85,9 +85,9 @@ class CampaignAdminList extends SilverStripeComponent {
     return (
       <div className={classNames}>
         <div className="cms-content__left collapse in" aria-expanded="true">
-          <NorthHeader>
+          <Toolbar>
             <BreadcrumbComponent crumbs={this.props.breadcrumbs} multiline />
-          </NorthHeader>
+          </Toolbar>
           <div className="container-fluid campaign-items panel-scrollable--double-toolbar">
             <Accordion>
               {accordionGroups}
diff --git a/admin/client/src/styles/bundle.scss b/admin/client/src/styles/bundle.scss
index 3fcb45f22..d8f1c5762 100644
--- a/admin/client/src/styles/bundle.scss
+++ b/admin/client/src/styles/bundle.scss
@@ -34,7 +34,7 @@
 @import "../components/HiddenField/HiddenField";
 @import "../components/Label/Label";
 @import "../components/Preview/Preview";
-@import "../components/NorthHeader/NorthHeader";
+@import "../components/Toolbar/Toolbar";
 @import "../components/Form/Form";
 
 // Layout and sections
diff --git a/gulpfile.js b/gulpfile.js
index 338b8020e..6376ee044 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -285,8 +285,8 @@ gulp.task('bundle-lib', function bundleLib() {
     .require(`${PATHS.ADMIN_JS_SRC}/components/TextField/TextField`,
       { expose: 'components/TextField/TextField' }
     )
-    .require(`${PATHS.ADMIN_JS_SRC}/components/NorthHeader/NorthHeader`,
-      { expose: 'components/NorthHeader/NorthHeader' }
+    .require(`${PATHS.ADMIN_JS_SRC}/components/Toolbar/Toolbar`,
+      { expose: 'components/Toolbar/Toolbar' }
     )
     .require(`${PATHS.ADMIN_JS_SRC}/components/Breadcrumb/Breadcrumb`,
       { expose: 'components/Breadcrumb/Breadcrumb' }
@@ -373,7 +373,7 @@ gulp.task('bundle-framework', function bundleBoot() {
       gulpUtil.log('Finished', `bundled ${bundleFileName} ${msg}`);
     })
     .transform('babelify', babelifyOptions)
-    .external('components/NorthHeader/NorthHeader')
+    .external('components/Toolbar/Toolbar')
     .external('components/FormBuilder/FormBuilder')
     .external('components/FormAction/FormAction')
     .external('deep-freeze')