Added B12 icon to SidebarHeader componentn

Author: zhadaev

components/layout/sidebar/header/SidebarBackButton.es6.js

@@ -25,7 +25,6 @@ class SidebarBackButton extends React.Component {
       <div
         className="ds-sidebar__header-back-button-container"
         onClick={this.handleClick}
-        onTouchStart={this.handleClick}
         ref={this.backButtonRef}
         tabIndex="-1"
       >

components/layout/sidebar/header/SidebarHeader.es6.js

@@ -6,7 +6,7 @@ import QuickActions from './QuickActions.es6.js'
 import SidebarBackButton from './SidebarBackButton.es6.js'
 import SidebarHeaderActionButton from './SidebarHeaderActionButton.es6.js'
 import Button from '../../../form/button/Button.es6.js'
-import { Home } from '../../../Icons.es6.js'
+import { Home, B12Logo } from '../../../Icons.es6.js'
 
 class SidebarHeader extends React.Component {
   state = {
@@ -74,17 +74,17 @@ class SidebarHeader extends React.Component {
       quickDialog,
       showLogo,
       steps,
-      title
+      title,
+      b12Button,
+      onB12Click
     } = this.props
     const { actionsAvailable, actionsVisible } = this.state
 
     return (
       <Fragment>
-        <div className="ds-sidebar__header">
+        <div className={classnames('ds-sidebar__header', { 'ds-sidebar__header--b12-home-icon': b12Button })}>
           <div className="ds-sidebar__header-back">
-            {showLogo && (
-              <svg className="ds-sidebar__header-logo" id="b12-logo" viewBox="0 0 179.8 79.2" xmlns="http://www.w3.org/2000/svg"><title>B12</title><path d="M53.9,46a12.87,12.87,0,0,0-4.6-2.9c-2.5-.8-3.2-.9-10.1-.9H28.3V69.5h10c9.2,0,10.5-.2,13.8-2.2s5.4-6.4,5.4-11.3c0-4.2-1.3-7.7-3.6-10M51.6,11.4A9.44,9.44,0,0,0,47.1,9c-2.3-.6-3.5-.6-10-.6H28.2V33.2h11c4.4,0,8-.6,10.2-1.6,3.5-1.5,5.8-5.8,5.8-10.7a12.37,12.37,0,0,0-3.6-9.5M71.8,68.5a16,16,0,0,1-6.1,6.3,19.75,19.75,0,0,1-9,2.8c-1.6.1-4.5.1-8.6.1H0V69.3H6.4a9.59,9.59,0,0,0,4-.5,3.35,3.35,0,0,0,1.5-1.6,5.59,5.59,0,0,0,.7-2.6c0-.6.1-1.6.1-3.3v-45c0-1.5-.1-2.7-.1-3.3a5.36,5.36,0,0,0-.7-2.6c-.7-1.6-2.1-2.1-5.5-2.1H0V0H36.6c3.9,0,6.9.1,9,.1C54,.3,60,2,65.1,5.6A17,17,0,0,1,72.3,20a16.15,16.15,0,0,1-5.4,12.6c-2.8,2.6-4.8,3.6-10.1,5.1,5.4,1.4,6.9,2,10,4,4.9,3,7.8,9,7.8,15.8a23,23,0,0,1-2.8,11" fill="#6548c7"></path><path d="M78.5,77.7V69.3h7a12,12,0,0,0,3.9-.4,3.71,3.71,0,0,0,1.4-1.6,5.53,5.53,0,0,0,.7-2.5c0-.6.1-1.6.1-3V29.2H78.5V21.7c10.7-.1,14.1-2.2,16.8-10.4h10V58.5l.1,3.3a19.58,19.58,0,0,0,.1,3,5.73,5.73,0,0,0,.6,2.5c.8,1.6,2,2,5.4,2H118v8.4Z" fill="#6548c7"></path><path d="M179.2,64.3c-1.4,9.8-7.4,14.9-17.1,14.9-5.5,0-9.9-1.4-20.3-6.5-3-1.4-4.7-2-6.2-2-3.2,0-5.1,1.9-5.1,5.3v1.6h-7.7c-.1-1.1-.1-2-.1-2.6a33.4,33.4,0,0,1,2.1-11.4c2.5-6.5,6.8-10.6,16.3-15.2q6.45-3.15,9-4.5a24.88,24.88,0,0,0,6.4-4.6,13.54,13.54,0,0,0,3.9-9.2c0-7.7-5.6-12.5-14.6-12.5-7.8,0-12.2,2.8-14,8.9a9,9,0,0,1,4.2-1.1c4.3,0,7.4,3.3,7.4,7.9,0,5.3-3.5,8.8-8.8,8.8-6.5,0-10.8-4.8-10.8-12a19.15,19.15,0,0,1,6.9-14.5c4.9-4.2,10.8-6.1,19.4-6.1,15.9,0,26.7,8.8,26.7,21.9,0,10.9-6.2,17-21,20.9C142,56,140.6,56.5,136,60.4c-2.3,1.9-3.2,3.2-4.2,6.6,3.4-2.8,5.8-3.7,10.5-3.7a27.28,27.28,0,0,1,4.1.3l9.7,1.6a46.32,46.32,0,0,0,6.2.6c7.5,0,10.7-3.3,10.8-11.7H180a100.9,100.9,0,0,1-.8,10.2" fill="#6548c7"></path></svg>
-            )}
+            {showLogo && <B12Logo color="#6548c7" width={46} height={20} viewBox="0 0 200 80" className="ds-sidebar__header-logo" />}
 
             {!showLogo && backButton && onBack && (
               <SidebarBackButton
@@ -110,6 +110,20 @@ class SidebarHeader extends React.Component {
               </React.Fragment>
             )}
 
+            {b12Button && (
+              <React.Fragment>
+                <div className="ds-sidebar__header-divider" />
+                {!isScrollingDown && (
+                  <Button
+                    small
+                    className="ds-sidebar__header-home"
+                    icon={<B12Logo width={30} height={20} color="#84839c" viewBox="0 0 200 80" />}
+                    onClick={onB12Click}
+                  />
+                )}
+              </React.Fragment>
+            )}
+
             {isScrollingDown && <div>{title}</div>}
           </div>
 
@@ -179,7 +193,9 @@ SidebarHeader.defaultProps = {
   quickActions: [],
   showLogo: false,
   quickDialog: null,
-  tabbedNavigation: null
+  tabbedNavigation: null,
+  b12Button: false,
+  onB12Click: () => {}
 }
 
 SidebarHeader.propTypes = {
@@ -204,7 +220,9 @@ SidebarHeader.propTypes = {
   onQuickActionSelected: PropTypes.func,
   showLogo: PropTypes.bool,
   quickDialog: PropTypes.element,
-  tabbedNavigation: PropTypes.element
+  tabbedNavigation: PropTypes.element,
+  b12Button: PropTypes.bool,
+  onB12Click: PropTypes.func
 }
 
 export default SidebarHeader

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b12/metronome",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "description": "",
   "main": "index.es6.js",
   "scripts": {

style/layout/side-pane.scss

@@ -48,7 +48,7 @@
         font-family: $ds-font-family-base;
       }
 
-      h2 + h4 {
+      h2+h4 {
         font-weight: normal;
         color: $ds-display-light-color;
         margin-bottom: spacing(xsm);
@@ -80,6 +80,17 @@
       box-shadow: none;
     }
 
+    &--b12-home-icon {
+      .ds-sidebar__header-divider {
+        margin: 0 8px;
+      }
+
+      .ds-sidebar__header-home {
+        margin-left: 0;
+        padding: 0 !important;
+      }
+    }
+
     &-title {
       font-family: $ds-font-family-base;
       font-size: 20px;
@@ -124,6 +135,10 @@
         svg path {
           fill: $ds-brand-light-color;
         }
+
+        #b12-logo path {
+          fill: #5048c7;
+        }
       }
     }
 
@@ -157,7 +172,7 @@
       }
 
       &-text {
-        color: $ds-display-light-color;
+        color: #585769;
         font-size: $header-small-font-size;
         font-weight: normal;
         padding-left: spacing('xxxxsm');