fix(Topbar): remove previous context api, add examples

momentum-design · Sep 24, 2019 · 09c5867 · 09c5867
1 parent 0714150
commit 09c5867
Show file tree

Hide file tree

Showing 21 changed files with 477 additions and 219 deletions.
diff --git a/react/src/lib/Topbar/examples/Blue.js b/react/src/lib/Topbar/examples/Blue.js
@@ -0,0 +1,58 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  Button,
+  Icon,
+  ListItem,
+  Topbar,
+  TopbarMobile,
+  TopbarNav,
+  TopbarRight,
+} from '@momentum-ui/react';
+
+export default class TopbarBlue extends React.Component {
+  render() {
+    return (
+      <Topbar
+        color='blue'
+        brandAnchorElement={
+          <a
+            href='javascript:void(0)'
+            title='Momentum UI'
+          >
+            <Icon name='cisco-logo' />
+          </a>
+        }
+      >
+        <TopbarNav>
+          <ListItem>Develop</ListItem>
+          <ListItem>Styles</ListItem>
+          <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/Dark.js b/react/src/lib/Topbar/examples/Dark.js
@@ -0,0 +1,58 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  Button,
+  Icon,
+  ListItem,
+  Topbar,
+  TopbarMobile,
+  TopbarNav,
+  TopbarRight,
+} from '@momentum-ui/react';
+
+export default class TopbarDark extends React.Component {
+  render() {
+    return (
+      <Topbar
+        color='dark'
+        brandAnchorElement={
+          <a
+            href='javascript:void(0)'
+            title='Momentum UI'
+          >
+            <Icon name='cisco-logo' />
+          </a>
+        }
+      >
+        <TopbarNav>
+          <ListItem>Develop</ListItem>
+          <ListItem>Styles</ListItem>
+          <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/KitchenSink.js b/react/src/lib/Topbar/examples/KitchenSink.js
@@ -0,0 +1,22 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  TopbarBlue,
+  TopbarDark,
+  TopbarLight,
+  TopbarNoMiddle
+} from './index';
+
+export default class TopbarKitchenSink extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <TopbarBlue />
+        <TopbarDark />
+        <TopbarLight />
+        <TopbarNoMiddle />
+      </React.Fragment>
+    );
+  }
+}
+/* eslint-enable jsx-a11y/anchor-is-valid */
diff --git a/react/src/lib/Topbar/examples/Light.js b/react/src/lib/Topbar/examples/Light.js
@@ -0,0 +1,58 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  Button,
+  Icon,
+  ListItem,
+  Topbar,
+  TopbarMobile,
+  TopbarNav,
+  TopbarRight,
+} from '@momentum-ui/react';
+
+export default class TopbarLight extends React.Component {
+  render() {
+    return (
+      <Topbar
+        color='light'
+        brandAnchorElement={
+          <a
+            href='javascript:void(0)'
+            title='Momentum UI'
+          >
+            <Icon name='cisco-logo' />
+          </a>
+        }
+      >
+        <TopbarNav>
+          <ListItem>Develop</ListItem>
+          <ListItem>Styles</ListItem>
+          <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/NoMiddle.js b/react/src/lib/Topbar/examples/NoMiddle.js
@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import {
+  Button,
+  Icon,
+  Topbar,
+  TopbarMobile,
+  TopbarRight,
+} from '@momentum-ui/react';
+
+export default class TopbarNoMiddle extends React.Component {
+  render() {
+    return (
+      <Topbar
+        color='light'
+        brandAnchorElement={
+          <a
+            href='javascript:void(0)'
+            title='Momentum UI'
+          >
+            <Icon name='cisco-logo' />
+          </a>
+        }
+      >
+        <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>
+        </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
@@ -0,0 +1,6 @@
+export { default as TopbarLight } from './Light';
+export { default as TopbarDark } from './Dark';
+export { default as TopbarBlue } from './Blue';
+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
@@ -2,54 +2,35 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { prefix } from '../utils/index';
 
 class Topbar extends React.Component {
-  static displayName = 'Topbar';
-
-  state = {
-    isMobileOpen: false,
-    activeIndex: null,
-    focus: 0,
-  };
-
-  getChildContext = () => {
-    return {
-      activeIndex: this.state.activeIndex,
-      onActivate: index => this.setSelected(index),
-      onFocus: index => this.setState(() => ({ focus: index })),
-      focus: this.state.focus,
-    };
-  };
-
-  setSelected = index => {
-    if (index === this.state.activeIndex) return;
-    this.setState(() => ({ activeIndex: index }));
-  };
-
   render() {
     const {
       anchor,
       brandAnchorElement,
-      color,
+      children,
       className,
+      color,
       fixed,
       icon,
       image,
-      title
+      title,
+      ...otherProps
     } = this.props;
 
-    const mdTopBarClass = 'md-top-bar';
-    const mdBrandClass = 'md-brand';
+    const topBarClass = `${prefix}-top-bar`;
+    const brandClass = `${prefix}-brand`;
 
     const brandNodeChildren = ([
-      <div className={`${mdBrandClass}__logo`} key={`${mdBrandClass}__logo`}>
+      <div className={`${brandClass}__logo`} key={`${brandClass}__logo`}>
         {
           image
             ? image
             : <i className={`icon ${icon}`} />
         }
       </div>,
-      <div className={`${mdBrandClass}__title`} key={`${mdBrandClass}__title`}>
+      <div className={`${brandClass}__title`} key={`${brandClass}__title`}>
         {title}
       </div>
     ]);
@@ -59,24 +40,24 @@ class Topbar extends React.Component {
         ? React.cloneElement(
             brandAnchorElement,
             {
-              className: `${mdBrandClass}` +
+              className:
+                `${brandClass}` +
                 `${(brandAnchorElement.props.className && ` ${brandAnchorElement.props.className}`) || ''}`,
             },
             brandNodeChildren
           )
-        : <a className={mdBrandClass} href={anchor}>
+        : <a className={brandClass} href={anchor}>
             {brandNodeChildren}
           </a>
     );
 
     const brandNode = (
-      <div className={`${mdTopBarClass}__brand`}>
+      <div className={`${topBarClass}__brand`}>
         {getBrandAnchor()}
       </div>
     );
 
-    const injectChildren = React.Children.map(this.props.children, child => {
-      if (!child) return;
+    const injectChildren = React.Children.map(children, child => {
       if ((child.type.displayName === 'TopbarMobile') && (!child.props.brandNode)) {
         return React.cloneElement(child, {
           brandNode
@@ -88,16 +69,16 @@ class Topbar extends React.Component {
 
     return (
       <div
-        className={`${mdTopBarClass}` +
-        `${(fixed && ` ${mdTopBarClass}--fixed`) || ''}` +
-        `${(className && ` ${className}`) || ''}` +
-        ` ${mdTopBarClass}--${color}`
+        className={
+          `${topBarClass}` +
+          `${fixed && ` ${topBarClass}--fixed` || ''}` +
+          `${color && ` ${topBarClass}--${color}` || ''}` +
+          `${className && ` ${className}` || ''}`
         }
-        role="navigation"
-        ref={ref => {
-          this.parentContainer = ref;
-        }}>
-        <div className={`${mdTopBarClass}__container`}>
+        role='navigation'
+        {...otherProps}
+      >
+        <div className={`${topBarClass}__container`}>
           {brandNode}
           {injectChildren}
         </div>
@@ -121,7 +102,7 @@ Topbar.propTypes = {
   fixed: PropTypes.bool,
   /** @prop Icon class name | 'icon-cisco-logo' */
   icon: PropTypes.string,
-  /** @prop Image source URL | null */
+  /** @prop Image node | null */
   image: PropTypes.node,
   /** @prop Topbar title text | '' */
   title: PropTypes.string,
@@ -139,13 +120,6 @@ Topbar.defaultProps = {
   title: '',
 };
 
-Topbar.childContextTypes = {
-  focus: PropTypes.number,
-  activeIndex: PropTypes.number,
-  onActivate: PropTypes.func,
-  onFocus: PropTypes.func,
-};
-
 Topbar.displayName = 'Topbar';
 
 export default Topbar;