fix(TopbarMobile): allow for custom brandNode independent from Topbar

momentum-design · May 18, 2019 · 0e7265c · 0e7265c
1 parent 2a3ff4c
commit 0e7265c
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 108 deletions.
diff --git a/react/src/lib/Topbar/index.js b/react/src/lib/Topbar/index.js
@@ -76,7 +76,7 @@ class Topbar extends React.Component {
 
     const injectChildren = React.Children.map(this.props.children, child => {
       if (!child) return;
-      if (child.type.displayName === 'TopbarMobile') {
+      if ((child.type.displayName === 'TopbarMobile') && (!child.props.brandNode)) {
         return React.cloneElement(child, {
           brandNode
         });

diff --git a/tools/constants/BASE_DATA.json b/tools/constants/BASE_DATA.json
@@ -158,11 +158,6 @@
         "displayName": "Badges",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "round",
         "displayName": "Round",
@@ -226,11 +221,6 @@
         "name": "highlight-false",
         "displayName": "Selected not highlighted ",
         "description": ""
-      },
-      {
-        "name": "dark",
-        "displayName": "Dark Pills",
-        "description": ""
       }
     ]
   },
@@ -248,11 +238,6 @@
         "displayName": "Button Tags",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Button",
-        "description": ""
-      },
       {
         "name": "color",
         "displayName": "Button Colors",
@@ -346,11 +331,6 @@
         "displayName": "Checkbox",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "disabled",
         "displayName": "Disabled",
@@ -403,11 +383,6 @@
         "displayName": "Combo Box",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark theme",
-        "description": ""
-      },
       {
         "name": "clear",
         "displayName": "Clear Enabled",
@@ -454,11 +429,6 @@
         "name": "default",
         "displayName": "Date Picker",
         "description": ""
-      },
-      {
-        "name": "dark",
-        "displayName": "Dark theme",
-        "description": ""
       }
     ]
   },
@@ -470,11 +440,6 @@
         "name": "default",
         "displayName": "Date Range Picker",
         "description": ""
-      },
-      {
-        "name": "dark",
-        "displayName": "Date Range Picker in dark theme",
-        "description": ""
       }
     ]
   },
@@ -507,11 +472,6 @@
         "name": "default",
         "displayName": "Editable Textfield ",
         "description": ""
-      },
-      {
-        "name": "dark",
-        "displayName": "Dark theme",
-        "description": ""
       }
     ]
   },
@@ -524,11 +484,6 @@
         "displayName": "Variations",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "text-area",
         "displayName": "Text Area",
@@ -669,7 +624,7 @@
     ]
   },
   {
-    "id": 1655,
+    "id": 500,
     "name": "link",
     "sections": [
       {
@@ -680,19 +635,14 @@
     ]
   },
   {
-    "id": 500,
+    "id": 1655,
     "name": "list",
     "sections": [
       {
         "name": "default",
         "displayName": "List Items",
         "description": ""
       },
-      {
-        "name": "dark ",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "list-item-section",
         "displayName": "List Item Sections",
@@ -914,11 +864,6 @@
         "displayName": "Radio",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "disabled",
         "displayName": "Disabled",
@@ -945,11 +890,6 @@
         "displayName": "Search Input",
         "description": ""
       },
-      {
-        "name": "Dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "pill",
         "displayName": "Pill",
@@ -966,11 +906,6 @@
         "displayName": "Selects",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "nested",
         "displayName": "Nested Options",
@@ -1122,11 +1057,6 @@
         "displayName": "Time Picker",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "24-hour",
         "displayName": "24 hr format",
@@ -1153,20 +1083,10 @@
         "displayName": "Toggle Switches",
         "description": ""
       },
-      {
-        "name": "dark",
-        "displayName": "Dark Theme",
-        "description": ""
-      },
       {
         "name": "filled",
         "displayName": "Filled",
         "description": ""
-      },
-      {
-        "name": "filled-dark",
-        "displayName": "Dark Theme",
-        "description": ""
       }
     ]
   },

diff --git a/www/client/components/AppHeader/index.js b/www/client/components/AppHeader/index.js
@@ -74,11 +74,9 @@ class AppHeader extends Component {
   };
 
   render() {
-    const {
-      location
-    } = this.props;
-      // push,
-      // search,
+    const { location } = this.props;
+    // push,
+    // search,
     // } = this.props;
     const {
       // expandSearch,
@@ -159,20 +157,24 @@ class AppHeader extends Component {
     //     <Link to="/login">Log In</Link>
     //   </div>
     // );
+    const mobileBrandNode = (
+      <div className="md-top-bar__brand">
+        <NavLink to="/" className="md-brand">
+          <div className="md-brand__logo">{wordMark}</div>
+        </NavLink>
+      </div>
+    );
 
     return (
       <Fragment>
         <Topbar
           color="light"
-          {...location.pathname === '/' 
-            && {
-              image: wordMark,
-              brandAnchorElement: <NavLink to="/"/>
-            }
-            || {
-              image: <span />
-            }
-          }
+          {...(location.pathname === '/' && {
+            image: wordMark,
+            brandAnchorElement: <NavLink to="/" />,
+          }) || {
+            image: <span />,
+          }}
           fixed
         >
           {!hideNav && <TopbarNav>{navItems}</TopbarNav>}
@@ -194,8 +196,8 @@ class AppHeader extends Component {
             /> */}
             {/* {topbarRight} */}
           </TopbarRight>
-          <TopbarMobile shouldCloseOnClick={false} >
-            <SideNav className="docs-mobile-nav" />
+          <TopbarMobile shouldCloseOnClick={false} brandNode={mobileBrandNode}>
+            <SideNav isFixed={false} hideBrand className="docs-mobile-nav" />
           </TopbarMobile>
         </Topbar>
       </Fragment>
@@ -238,7 +240,7 @@ export default withRouter(
   connect(
     mapStateToProps,
     {
-      getUser
+      getUser,
     }
   )(AppHeader)
 );
diff --git a/www/client/containers/SideNav/index.js b/www/client/containers/SideNav/index.js
@@ -15,8 +15,10 @@ class SideNavContainer extends React.PureComponent {
   render() {
     const {
       className,
-      onClick,
+      hideBrand,
+      isFixed,
       location,
+      onClick,
       routes,
     } = this.props;
 
@@ -104,12 +106,17 @@ class SideNavContainer extends React.PureComponent {
     });
 
     const sideNav = (
-      <Sidebar isFixed className={className} >
-        <SidebarHeader>
-          <NavLink to={'/'}>
-            <img src={logo} style={{ width: '160px' }} alt="Cisco Momentum Design" />
-          </NavLink>
-        </SidebarHeader>
+      <Sidebar isFixed={isFixed} className={className} >
+        {
+          !hideBrand &&
+          (
+            <SidebarHeader>
+              <NavLink to={'/'}>
+                <img src={logo} style={{ width: '160px' }} alt="Cisco Momentum Design" />
+              </NavLink>
+            </SidebarHeader>
+          )
+        }
         <SidebarBody>
           <SidebarNav trackActive={false}>
             {createNavLinks}
@@ -132,6 +139,8 @@ SideNavContainer.propTypes = {
   className: PropTypes.string,
   error: PropTypes.bool,
   hide: PropTypes.bool,
+  hideBrand: PropTypes.bool,
+  isFixed: PropTypes.bool,
   loading: PropTypes.bool,
   location: PropTypes.object.isRequired,
   onClick: PropTypes.func,
@@ -142,6 +151,8 @@ SideNavContainer.defaultProps = {
   className: '',
   error: false,
   hide: true,
+  hideBrand: false,
+  isFixed: true,
   loading: false,
   onClick: null,
 };
@@ -150,4 +161,4 @@ SideNavContainer.displayName = 'SideNavContainer';
 
 export default withRouter(
   connect(mapStateToProps)(SideNavContainer)
-);
+);