Feature/update navbar docs (#443)

* update Navigation showcase

* update DropdownNavigationItem showcase

Author: embbnux

dev-server/containers/MainView/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import dynamicsFont from '../../../src/assets/DynamicsFont/DynamicsFont.scss';
 import TabNavigationView from '../../../src/components/TabNavigationView';
 import RouterInteraction from '../../../src/modules/RouterInteraction';
 import DialPadIcon from '../../../src/assets/images/DialPadNav.svg';

docs/src/app/pages/Components/DropdownNavigationView/Demo.js

@@ -2,28 +2,24 @@ import React from 'react';
 // eslint-disable-next-line
 import DropdownNavigationView from 'ringcentral-widget/components/DropdownNavigationView';
 // eslint-disable-next-line
-import dynamicsFont from 'ringcentral-widget/assets/DynamicsFont/DynamicsFont.scss';
+import ContactIcon from 'ringcentral-widget/assets/images/Contact.svg';
+import SettingsIcon from 'ringcentral-widget/assets/images/Settings.svg';
+import ContactHoverIcon from 'ringcentral-widget/assets/images/ContactHover.svg';
+import SettingsHoverIcon from 'ringcentral-widget/assets/images/SettingsHover.svg';
 
 const props = {};
 props.goTo = () => null;
 props.currentPath = '/settings';
 props.tabs = [{
-  icon: (<span className={dynamicsFont.menu} />),
-  activeIcon: (<span className={dynamicsFont.menuHover} />),
-  label: 'More Menu',
-  virtualPath: '!moreMenu',
-  isActive: () => true,
-  childTabs: [{
-    icon: (<span className={dynamicsFont.portrait} />),
-    activeIcon: (<span className={dynamicsFont.portrait} />),
-    label: 'Contacts',
-    path: '/contacts',
-  }, {
-    icon: (<span className={dynamicsFont.setting} />),
-    activeIcon: (<span className={dynamicsFont.settingHover} />),
-    label: 'Settings',
-    path: '/settings',
-  }],
+  icon: ContactIcon,
+  activeIcon: ContactHoverIcon,
+  label: 'Contacts',
+  path: '/contacts',
+}, {
+  icon: SettingsIcon,
+  activeIcon: SettingsHoverIcon,
+  label: 'Settings',
+  path: '/settings',
 }];
 
 /**

docs/src/app/pages/Components/NavigationBar/Demo.js

@@ -2,7 +2,17 @@ import React from 'react';
 // eslint-disable-next-line
 import NavigationBar from 'ringcentral-widget/components/NavigationBar';
 import TabNavigationButton from 'ringcentral-widget/components/TabNavigationButton';
-import dynamicsFont from 'ringcentral-widget/assets/DynamicsFont/DynamicsFont.scss';
+import DialPadIcon from 'ringcentral-widget/assets/images/DialPadNav.svg';
+import CallsIcon from 'ringcentral-widget/assets/images/Calls.svg';
+import HistoryIcon from 'ringcentral-widget/assets/images/CallHistory.svg';
+import MessageIcon from 'ringcentral-widget/assets/images/Messages.svg';
+import ComposeTextIcon from 'ringcentral-widget/assets/images/ComposeText.svg';
+
+import DialPadHoverIcon from 'ringcentral-widget/assets/images/DialPadHover.svg';
+import CallsHoverIcon from 'ringcentral-widget/assets/images/CallsHover.svg';
+import HistoryHoverIcon from 'ringcentral-widget/assets/images/CallHistoryHover.svg';
+import MessageHoverIcon from 'ringcentral-widget/assets/images/MessagesHover.svg';
+import ComposeTextHoverIcon from 'ringcentral-widget/assets/images/ComposeTextHover.svg';
 
 const props = {};
 props.currentPath = 'test string';
@@ -13,52 +23,40 @@ props.currentPath = 'test string';
 const unreadCounts = 99;
 props.tabs = [
   {
-    icon: <span className={dynamicsFont.dial} />,
-    activeIcon: <span className={dynamicsFont.dialHover} />,
+    icon: DialPadIcon,
+    activeIcon: DialPadHoverIcon,
     label: 'Dial Pad',
     path: '/',
   },
   {
-    icon: <span className={dynamicsFont.active} />,
-    activeIcon: <span className={dynamicsFont.activeHover} />,
+    icon: CallsIcon,
+    activeIcon: CallsHoverIcon,
     label: 'Calls',
     path: '/calls',
   },
   {
-    icon: <span className={dynamicsFont.history} />,
-    activeIcon: <span className={dynamicsFont.historyHover} />,
+    icon: HistoryIcon,
+    activeIcon: HistoryHoverIcon,
     label: 'History',
     path: '/history',
   },
   {
-    icon: <span className={dynamicsFont.message} />,
-    activeIcon: <span className={dynamicsFont.messageHover} />,
+    icon: MessageIcon,
+    activeIcon: MessageHoverIcon,
     label: 'Messages',
     path: '/messages',
     noticeCounts: unreadCounts,
     isActive: () => true
   },
   {
-    icon: <span className={dynamicsFont.composeText} />,
-    activeIcon: <span className={dynamicsFont.composeTextHover} />,
+    icon: ComposeTextIcon,
+    activeIcon: ComposeTextHoverIcon,
     label: 'Compose Text',
     path: '/composeText',
   },
-  {
-    icon: <span className={dynamicsFont.conference} />,
-    activeIcon: <span className={dynamicsFont.conferenceHover} />,
-    label: 'Conference',
-    path: '/conference',
-  },
-  {
-    icon: <span className={dynamicsFont.setting} />,
-    activeIcon: <span className={dynamicsFont.settingHover} />,
-    label: 'Settings',
-    path: '/settings',
-  },
 ];
 
-props.goTo = (path) => alert(`go to ${path}`)
+props.goTo = path => alert(`go to ${path}`);
 const NavigationBarDemo = () => (
   <NavigationBar
     button={TabNavigationButton}

docs/src/app/pages/Components/RadioBtnGroup/Demo.js

@@ -4,9 +4,17 @@ import RadioBtnGroup from 'ringcentral-widget/components/RadioBtnGroup';
 
 const props = {};
 props.className = 'test string';
-props.radioOptions = [];
+props.radioOptions = [{
+  id: '123',
+  label: 'Home',
+  phoneNumber: '+12345678'
+}, {
+  id: '1234',
+  label: 'Mobile',
+  phoneNumber: '+123456789'
+}];
 props.disabled = false;
-props.formatPhone = () => null;
+props.formatPhone = v => v;
 props.onRadioSelect = () => null;
 
 /**

docs/src/app/pages/Components/TabNavigationButton/Demo.js

@@ -1,18 +1,22 @@
 import React from 'react';
 // eslint-disable-next-line
 import TabNavigationButton from 'ringcentral-widget/components/TabNavigationButton';
+import CallsIcon from 'ringcentral-widget/assets/images/Calls.svg';
+import CallsHoverIcon from 'ringcentral-widget/assets/images/CallsHover.svg';
 
 const props = {};
-props.icon = (<span>Node</span>);
-props.activeIcon = (<span>Node</span>);
-props.width = undefined;
+props.icon = <CallsIcon />;
+props.activeIcon = <CallsHoverIcon />;
+props.width = '100%';
 
 /**
  * A example of `TabNavigationButton`
  */
 const TabNavigationButtonDemo = () => (
-  <TabNavigationButton
-    {...props}
-  />
+  <div style={{ width: '200px', height: '46px', background: '#0684bd' }}>
+    <TabNavigationButton
+      {...props}
+    />
+  </div>
 );
 export default TabNavigationButtonDemo;

docs/src/app/pages/Components/TabNavigationView/Demo.js

@@ -1,27 +1,42 @@
 import React, { Component } from 'react';
 // eslint-disable-next-line
 import TabNavigationView from 'ringcentral-widget/components/TabNavigationView';
-import dynamicsFont from 'ringcentral-widget/assets/DynamicsFont/DynamicsFont.scss';
+import DialPadIcon from 'ringcentral-widget/assets/images/DialPadNav.svg';
+import CallsIcon from 'ringcentral-widget/assets/images/Calls.svg';
+import MessageIcon from 'ringcentral-widget/assets/images/Messages.svg';
+import SettingsIcon from 'ringcentral-widget/assets/images/Settings.svg';
+import ContactIcon from 'ringcentral-widget/assets/images/Contact.svg';
+import MoreMenuIcon from 'ringcentral-widget/assets/images/MoreMenu.svg';
+
+import DialPadHoverIcon from 'ringcentral-widget/assets/images/DialPadHover.svg';
+import CallsHoverIcon from 'ringcentral-widget/assets/images/CallsHover.svg';
+import MessageHoverIcon from 'ringcentral-widget/assets/images/MessagesHover.svg';
+import SettingsHoverIcon from 'ringcentral-widget/assets/images/SettingsHover.svg';
+import ContactHoverIcon from 'ringcentral-widget/assets/images/ContactHover.svg';
+import MoreMenuHoverIcon from 'ringcentral-widget/assets/images/MoreMenuHover.svg';
+
+import ContactNavIcon from 'ringcentral-widget/assets/images/ContactsNavigation.svg';
+import SettingsNavIcon from 'ringcentral-widget/assets/images/SettingsNavigation.svg';
 
 const tabs = [
   {
-    icon: <span className={dynamicsFont.dial} />,
-    activeIcon: <span className={dynamicsFont.dialHover} />,
+    icon: DialPadIcon,
+    activeIcon: DialPadHoverIcon,
     label: 'Dial Pad',
     path: '/dialer',
   },
   {
-    icon: <span className={dynamicsFont.active} />,
-    activeIcon: <span className={dynamicsFont.activeHover} />,
+    icon: CallsIcon,
+    activeIcon: CallsHoverIcon,
     label: 'Calls',
     path: '/calls',
     isActive: currentPath => (
       currentPath === '/calls' || currentPath === '/calls/active'
     ),
   },
   {
-    icon: <span className={dynamicsFont.message} />,
-    activeIcon: <span className={dynamicsFont.messageHover} />,
+    icon: MessageIcon,
+    activeIcon: MessageHoverIcon,
     label: 'Messages',
     path: '/messages',
     noticeCounts: 1,
@@ -30,23 +45,30 @@ const tabs = [
     ),
   },
   {
-    icon: <span className={dynamicsFont.menu} />,
-    activeIcon: <span className={dynamicsFont.menuHover} />,
+    icon: ({ currentPath }) => {
+      if (currentPath === '/contacts') {
+        return <ContactNavIcon />;
+      } else if (currentPath === '/settings') {
+        return <SettingsNavIcon />;
+      }
+      return <MoreMenuIcon />;
+    },
+    activeIcon: MoreMenuHoverIcon,
     label: 'More Menu',
     virtualPath: '!moreMenu',
     isActive: (currentPath, currentVirtualPath) => (
       currentVirtualPath === '!moreMenu'
     ),
     childTabs: [
       {
-        icon: <span className={dynamicsFont.portrait} />,
-        activeIcon: <span className={dynamicsFont.portrait} />,
+        icon: ContactIcon,
+        activeIcon: ContactHoverIcon,
         label: 'Contacts',
         path: '/contacts',
       },
       {
-        icon: <span className={dynamicsFont.setting} />,
-        activeIcon: <span className={dynamicsFont.settingHover} />,
+        icon: SettingsIcon,
+        activeIcon: SettingsHoverIcon,
         label: 'Settings',
         path: '/settings',
         isActive: currentPath => (

src/components/DropdownNavigationItem/index.js

@@ -11,7 +11,7 @@ export default function DropdownNavigationItem({
   label,
   noticeCounts,
   onClick,
- }) {
+}) {
   let notice = null;
   if (noticeCounts && noticeCounts > 0) {
     if (noticeCounts > 99) {

src/components/DropdownNavigationView/index.js

@@ -55,23 +55,14 @@ export default class DropdownNavigationView extends Component {
       currentVirtualPath,
     } = this.props;
 
-    const activeTab = tabs.find(tab =>
-      tab.childTabs &&
-      (
-        (tab.isActive && tab.isActive(currentPath, currentVirtualPath)) ||
-        (tab.path && tab.path === currentPath) ||
-        (tab.virtualPath && tab.virtualPath === currentVirtualPath)
-      )
-    );
-
     return (
-      activeTab && activeTab.childTabs.length ? (
+      tabs.length ? (
         <div
           className={styles.root}
           ref={(el) => { this.setChildNavigationElement(el); }}
         >
           {
-            activeTab.childTabs.map((tab, index) => {
+            tabs.map((tab, index) => {
               const Icon = tab.icon;
               const ActiveIcon = tab.activeIcon;
               return (
@@ -88,7 +79,7 @@ export default class DropdownNavigationView extends Component {
                   }
                   icon={typeof Icon === 'function' ? <Icon /> : Icon}
                   activeIcon={typeof ActiveIcon === 'function' ? <ActiveIcon /> : ActiveIcon}
-              />
+                />
               );
             })
           }

src/components/NavigationBar/index.js

@@ -47,13 +47,20 @@ export default class NavigationBar extends Component {
     const tabWidth = tabs.length > 0 ?
       `${(1 / tabs.length) * 100}%` :
       0;
+    const dropdownMenuTab = tabs.find(tab =>
+      (
+        tab.childTabs &&
+        (tab.isActive && tab.isActive(currentPath, currentVirtualPath))
+      )
+    );
+    const dropdownMenu = dropdownMenuTab && dropdownMenuTab.childTabs;
     return (
       <nav className={classnames(styles.root, className)}>
         {
           tabs.map((tab, index) => {
-            const Icon = tab.icon;
-            let icon = Icon;
-            if (typeof Icon === 'function') {
+            let icon = tab.icon;
+            if (typeof icon === 'function') {
+              const Icon = tab.icon;
               icon = (tab.childTabs ? <Icon currentPath={currentPath} /> : <Icon />);
             }
             const ActiveIcon = tab.activeIcon;
@@ -77,9 +84,9 @@ export default class NavigationBar extends Component {
           })
         }
         {
-          ChildNavigationView ? (
+          (ChildNavigationView && dropdownMenu && dropdownMenu.length) ? (
             <ChildNavigationView
-              tabs={tabs}
+              tabs={dropdownMenu}
               goTo={this.goTo}
               currentPath={currentPath}
               currentVirtualPath={currentVirtualPath}

src/components/RadioBtnGroup/styles.scss

@@ -15,6 +15,7 @@
   margin-top: 18px;
 
   .radioBtn {
+    box-sizing: content-box;
     display: inline-block;
     position: relative;
     width: 15px;