Toolbar renaming from north-header and move styles to component

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

@@ -1,4 +1,4 @@
-#NorthHeaderBreadcrumbs
+# Breadcrumb
 
 The breadcrumbs for the current section of the CMS.
 

admin/client/src/components/NorthHeader/tests/NorthHeader-test.js

@@ -1,7 +0,0 @@
-/* global jest, describe */
-
-jest.dontMock('../NorthHeader');
-
-describe('NorthHeaderComponent', () => {
-
-});

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
 

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;

admin/client/src/components/toolbar/Toolbar.scss

@@ -1,5 +1,8 @@
-.toolbar {
+.toolbar,
-  width: 100%; // Todo: replace with mixin @include make-container();
+.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-top: $spacer-y*.625;
-  padding: $spacer-y*.625 $spacer-x;
+  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;
 }

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>

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}

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

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`,
+    .require(`${PATHS.ADMIN_JS_SRC}/components/Toolbar/Toolbar`,
-      { expose: 'components/NorthHeader/NorthHeader' }
+      { 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')