feat(component): icon based navbar dropdown (#345)

Added a navbar dropdown component that uses an icon instead of text. Required for the following feature in hospitalrun-frontend: HospitalRun/hospitalrun-frontend#1948 (comment) Co-authored-by: HospitalRun Bot <[email protected]>
HospitalRun · Apr 8, 2020 · 8f07823 · 8f07823
1 parent 4df8212
commit 8f07823
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 2 deletions.
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -5,15 +5,15 @@ import Form from 'react-bootstrap/Form'
 import FormControl from 'react-bootstrap/FormControl'
 import NavDropdown from 'react-bootstrap/NavDropdown'
 import { Button } from '../Button'
-import { NavLink, NavIcon, NavHeader, NavLinkList, NavSearch } from './interfaces'
+import { NavLink, NavIcon, NavHeader, NavLinkList, NavLinkListIcon, NavSearch } from './interfaces'
 
 interface Props extends React.Props<any> {
   /** Determines the navbar background color */
   bg?: string
   /** Determines the letters color. It should be combined with the background color (bg) */
   variant?: 'light' | 'dark'
   /** Determines the links names, theirs onClick methods and paths. It has children array which contain links to be used on a dropdown. */
-  navItems: (NavIcon | NavHeader | NavLink | NavLinkList | NavSearch)[]
+  navItems: (NavIcon | NavHeader | NavLink | NavLinkList | NavLinkListIcon | NavSearch)[]
   /** Defines the class of the list. */
   className?: string
 }
@@ -51,6 +51,7 @@ const Navbar = (props: Props) => {
   )
   const getNavLinkList = (list: NavLinkList, index: number) => (
     <NavDropdown
+      alignRight={list.alignRight}
       className={list.className}
       title={list.label}
       id="collasible-nav-dropdown"
@@ -59,6 +60,17 @@ const Navbar = (props: Props) => {
       {list.children.map((listLink, i) => getNavListLink(listLink, i))}
     </NavDropdown>
   )
+  const getNavLinkListIcon = (list: NavLinkListIcon, index: number) => (
+    <NavDropdown
+      alignRight={list.alignRight}
+      className={list.className}
+      title={<img alt={list.alt} src={list.src} width="28" height="28" />}
+      id="collasible-nav-dropdown"
+      key={index}
+    >
+      {list.children.map((listLink, i) => getNavListLink(listLink, i))}
+    </NavDropdown>
+  )
   const getNavHeader = (header: NavHeader, index: number) => (
     <NavbarRB.Brand
       className={header.className}
@@ -109,6 +121,9 @@ const Navbar = (props: Props) => {
             if ((item as NavLinkList).type === 'link-list') {
               return getNavLinkList(item as NavLinkList, index)
             }
+            if ((item as NavLinkListIcon).type === 'link-list-icon') {
+              return getNavLinkListIcon(item as NavLinkListIcon, index)
+            }
             return null
           })}
         </Nav>

diff --git a/src/components/Navbar/interfaces.tsx b/src/components/Navbar/interfaces.tsx
@@ -36,6 +36,15 @@ export interface NavLink extends NavItem {
 export interface NavLinkList extends NavLink {
   /** An array to hold a dropdown Links */
   children: Array<NavLink>
+  /** Align menu to the right of the nav */
+  alignRight?: boolean
+}
+
+export interface NavLinkListIcon extends NavLinkList {
+  /** A path which contains the company icon/image */
+  src: string
+  /** Alternative text attribute */
+  alt?: string
 }
 
 export interface NavSearch extends NavItem {

diff --git a/stories/navbar.stories.tsx b/stories/navbar.stories.tsx
@@ -174,6 +174,33 @@ storiesOf('Navbar', module)
             Toast('success', 'Search box changed!!', 'Success')
           },
         },
+        {
+          type: 'link-list-icon',
+          alignRight: true,
+          label: 'User',
+          src:
+            'https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/7104608081548233620-128.png',
+          onClick: () => {
+            Toast('success', 'Settings icon clicked!!', 'Success')
+          },
+          className: 'ml-3',
+          children: [
+            {
+              type: 'link',
+              label: 'Sublink1',
+              onClick: () => {
+                Toast('success', 'Sublink1 clicked!!', 'Success')
+              },
+            },
+            {
+              type: 'link',
+              label: 'Sublink2',
+              onClick: () => {
+                Toast('success', 'Sublink2 clicked!!', 'Success')
+              },
+            },
+          ],
+        },
         {
           type: 'icon',
           src: 'https://image.flaticon.com/icons/svg/126/126472.svg',