feat(TopbarNav): add alignment prop

momentum-design · Jan 24, 2020 · fe2577b · fe2577b
1 parent ed1e3da
commit fe2577b
Show file tree

Hide file tree

Showing 13 changed files with 120 additions and 80 deletions.
diff --git a/angular/src/lib/topbar/topbar-brand.component.ts b/angular/src/lib/topbar/topbar-brand.component.ts
@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
   selector: '[md-top-bar-brand]',
   exportAs: 'mdTopbarBrand',
   template: `
-    <div class="md-brand__logo">
+    <div class="md-brand__logo" [ngClass]="[title ? 'md-brand__logo--pad' : '']">
       <img *ngIf="image" src="{{ image }}" alt="{{ alt }}" />
       <i *ngIf="!image" [ngClass]="['icon', icon]"></i>
     </div>

diff --git a/core/scss/components/top-bar/examples/blue.html b/core/scss/components/top-bar/examples/blue.html
@@ -2,7 +2,7 @@
   <div class="md-top-bar__container">
     <div class="md-top-bar__brand">
       <a class="md-brand" href="/">
-        <div class="md-brand__logo">
+        <div class="md-brand__logo md-brand__logo--pad">
           <!-- Note: use either image or icon, but not both -->
           <!-- img src="/assets/spark-logo.svg" alt="Momentum UI" -->
           <i class="icon icon-cisco-logo"></i>

diff --git a/core/scss/components/top-bar/examples/default.html b/core/scss/components/top-bar/examples/default.html
@@ -2,7 +2,7 @@
   <div class="md-top-bar__container">
     <div class="md-top-bar__brand">
       <a class="md-brand" href="/">
-        <div class="md-brand__logo">
+        <div class="md-brand__logo md-brand__logo--pad">
           <!-- Note: use either image or icon, but not both -->
           <!-- img src="/assets/spark-logo.svg" alt="Momentum UI" -->
           <i class="icon icon-cisco-logo"></i>

diff --git a/core/scss/components/top-bar/examples/light.html b/core/scss/components/top-bar/examples/light.html
@@ -2,7 +2,7 @@
   <div class="md-top-bar__container">
     <div class="md-top-bar__brand">
       <a class="md-brand" href="/">
-        <div class="md-brand__logo">
+        <div class="md-brand__logo md-brand__logo--pad">
           <!-- Note: use either image or icon, but not both -->
           <!-- img src="/assets/spark-logo.svg" alt="Momentum UI" -->
           <i class="icon icon-cisco-logo"></i>

diff --git a/core/scss/components/top-bar/top-bar.scss b/core/scss/components/top-bar/top-bar.scss
@@ -31,16 +31,20 @@
 
     &__nav {
       display: none;
+      align-items: center;
+      justify-content: center;
+      flex: 2 0 auto;
 
       .#{$list-item__class} {
         padding: rem-calc(2) rem-calc(12);
       }
 
       @media #{$large-up} {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        flex: 2 0 auto;
+      }
+
+      &--right {
+        justify-content: flex-end;
       }
     }
 
@@ -155,9 +159,12 @@
           display: flex;
           width: auto;
           height: $brand-image__size;
-          margin-right: rem-calc(12);
           font-size: $brand-image__size;
 
+          &--pad {
+            margin-right: rem-calc(12);
+          }
+
           @media #{$medium-only} {
             height: $brand-image__size--medium;
             font-size: $brand-image__size--medium;

diff --git a/react/src/lib/ListSeparator/index.js b/react/src/lib/ListSeparator/index.js
@@ -2,6 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { prefix } from '../utils/index';
 
 const ListSeparator = props => {
   const {
@@ -15,10 +16,12 @@ const ListSeparator = props => {
     ...otherProps
   } = props;
 
+  const lsClass = `${prefix}-list-separator`;
+
   return (
     <div
       className={
-        'md-list-separator' +
+        `${lsClass}` +
         `${className && ` ${className}` || ''}`
       }
       style={{
@@ -28,12 +31,12 @@ const ListSeparator = props => {
       {...otherProps}
     >
 
-    <span className="md-list-separator__container">
+    <span className={`${lsClass}__container`}>
       {
         children || text
         &&
           <span
-            className='md-list-separator__text'
+            className={`${lsClass}__text`}
             style={{
               ...textColor && {color: textColor},
               ...textPadding && {padding: textPadding},

diff --git a/react/src/lib/Topbar/examples/KitchenSink.js b/react/src/lib/Topbar/examples/KitchenSink.js
@@ -4,6 +4,7 @@ import {
   TopbarBlue,
   TopbarDark,
   TopbarLight,
+  TopbarNavFlexRight,
   TopbarNoMiddle
 } from './index';
 
@@ -14,6 +15,7 @@ export default class TopbarKitchenSink extends React.Component {
         <TopbarBlue />
         <TopbarDark />
         <TopbarLight />
+        <TopbarNavFlexRight />
         <TopbarNoMiddle />
       </React.Fragment>
     );

diff --git a/react/src/lib/Topbar/examples/NavFlexRight.js b/react/src/lib/Topbar/examples/NavFlexRight.js
@@ -0,0 +1,61 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  Button,
+  Icon,
+  ListItem,
+  ListSeparator,
+  Topbar,
+  TopbarMobile,
+  TopbarNav,
+  TopbarRight,
+} from '@momentum-ui/react';
+
+export default class TopbarBlue extends React.Component {
+  render() {
+    return (
+      <Topbar
+        color='blue'
+        title='test'
+        brandAnchorElement={
+          <a
+            href='javascript:void(0)'
+            title='Momentum UI'
+          >
+            <Icon name='cisco-logo' />
+          </a>
+        }
+      >
+        <TopbarNav alignment='right'>
+          <ListItem separator>Develop</ListItem>
+          <ListItem>Styles</ListItem>
+          <ListSeparator direction='horizontal'/>
+          <ListItem>Layout</ListItem>
+          <ListItem>Navigation</ListItem>
+        </TopbarNav>
+        <TopbarRight>
+          <div className='md-top-bar__user' />
+          <div className='md-top-bar__logged-out'>
+            <a href='javascript:void(0)'>Log In</a>
+            <Button color='blue' ariaLabel='myAriaLabel'>
+              Button
+            </Button>
+          </div>
+        </TopbarRight>
+        <TopbarMobile shouldCloseOnClick={false}>
+          <a
+            href='javascript:void(0)'
+            title='Momentum UI'
+          >
+            <Icon name='cisco-logo' />
+          </a>
+          <ListItem>Develop</ListItem>
+          <ListItem>Styles</ListItem>
+          <ListItem>Layout</ListItem>
+          <ListItem>Navigation</ListItem>
+        </TopbarMobile>
+      </Topbar>
+    );
+  }
+}
+/* eslint-enable jsx-a11y/anchor-is-valid */
diff --git a/react/src/lib/Topbar/examples/index.js b/react/src/lib/Topbar/examples/index.js
@@ -1,6 +1,7 @@
 export { default as TopbarLight } from './Light';
 export { default as TopbarDark } from './Dark';
 export { default as TopbarBlue } from './Blue';
+export { default as TopbarNavFlexRight } from './NavFlexRight';
 export { default as TopbarNoMiddle } from './NoMiddle';
 export { default as TopbarKitchenSink } from './KitchenSink';
 
diff --git a/react/src/lib/Topbar/index.js b/react/src/lib/Topbar/index.js
@@ -21,18 +21,27 @@ class Topbar extends React.Component {
 
     const topBarClass = `${prefix}-top-bar`;
     const brandClass = `${prefix}-brand`;
+    const addPadding = (image || icon ) && title;
 
     const brandNodeChildren = ([
-      <div className={`${brandClass}__logo`} key={`${brandClass}__logo`}>
+      <div
+        className={
+          `${brandClass}__logo` +
+          `${(addPadding && ` ${brandClass}__logo--pad`) || ''}`
+        }
+        key={`${brandClass}__logo`}
+      >
         {
           image
             ? image
             : <i className={`icon ${icon}`} />
         }
       </div>,
-      <div className={`${brandClass}__title`} key={`${brandClass}__title`}>
-        {title}
-      </div>
+      ...title && (
+        <div className={`${brandClass}__title`} key={`${brandClass}__title`}>
+          {title}
+        </div>
+      )
     ]);
 
     const getBrandAnchor = () => (

diff --git a/react/src/lib/Topbar/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Topbar/tests/__snapshots__/index.spec.js.snap
@@ -44,11 +44,7 @@ ShallowWrapper {
                 className="icon icon-cisco-logo"
               />
             </div>
-            <div
-              className="md-brand__title"
-            >
-              
-            </div>
+            
           </a>
         </div>
       </div>,
@@ -76,11 +72,7 @@ ShallowWrapper {
                   className="icon icon-cisco-logo"
                 />
               </div>
-              <div
-                className="md-brand__title"
-              >
-                
-              </div>
+              
             </a>
           </div>,
           null,
@@ -105,11 +97,7 @@ ShallowWrapper {
                   className="icon icon-cisco-logo"
                 />
               </div>
-              <div
-                className="md-brand__title"
-              >
-                
-              </div>
+              
             </a>,
             "className": "md-top-bar__brand",
           },
@@ -127,11 +115,7 @@ ShallowWrapper {
                     className="icon icon-cisco-logo"
                   />
                 </div>,
-                <div
-                  className="md-brand__title"
-                >
-                  
-                </div>,
+                "",
               ],
               "className": "md-brand",
               "href": null,
@@ -162,18 +146,7 @@ ShallowWrapper {
                 },
                 "type": "div",
               },
-              Object {
-                "instance": null,
-                "key": "md-brand__title",
-                "nodeType": "host",
-                "props": Object {
-                  "children": "",
-                  "className": "md-brand__title",
-                },
-                "ref": null,
-                "rendered": "",
-                "type": "div",
-              },
+              "",
             ],
             "type": "a",
           },
@@ -208,11 +181,7 @@ ShallowWrapper {
                   className="icon icon-cisco-logo"
                 />
               </div>
-              <div
-                className="md-brand__title"
-              >
-                
-              </div>
+              
             </a>
           </div>
         </div>,
@@ -240,11 +209,7 @@ ShallowWrapper {
                     className="icon icon-cisco-logo"
                   />
                 </div>
-                <div
-                  className="md-brand__title"
-                >
-                  
-                </div>
+                
               </a>
             </div>,
             null,
@@ -269,11 +234,7 @@ ShallowWrapper {
                     className="icon icon-cisco-logo"
                   />
                 </div>
-                <div
-                  className="md-brand__title"
-                >
-                  
-                </div>
+                
               </a>,
               "className": "md-top-bar__brand",
             },
@@ -291,11 +252,7 @@ ShallowWrapper {
                       className="icon icon-cisco-logo"
                     />
                   </div>,
-                  <div
-                    className="md-brand__title"
-                  >
-                    
-                  </div>,
+                  "",
                 ],
                 "className": "md-brand",
                 "href": null,
@@ -326,18 +283,7 @@ ShallowWrapper {
                   },
                   "type": "div",
                 },
-                Object {
-                  "instance": null,
-                  "key": "md-brand__title",
-                  "nodeType": "host",
-                  "props": Object {
-                    "children": "",
-                    "className": "md-brand__title",
-                  },
-                  "ref": null,
-                  "rendered": "",
-                  "type": "div",
-                },
+                "",
               ],
               "type": "a",
             },