feat(navbar): add example with icons and support className prop

fix #228

Author: ocBruno

src/components/Navbar/Navbar.tsx

@@ -22,13 +22,18 @@ interface Props extends React.Props<any> {
 const Navbar = (props: Props) => {
   const { bg, variant, navItems } = props
 
-  const getNavListLinks = (link: NavLink, index: number) => (
-    <NavDropdown.Item href={link.href ? link.href : ''} key={index} onClick={link.onClick}>
+  const getNavListLink = (link: NavLink, index: number) => (
+    <NavDropdown.Item
+      className={link.className ? link.className.concat(' ', '') : ''}
+      href={link.href ? link.href : ''}
+      key={index}
+      onClick={link.onClick}
+    >
       {link.label}
     </NavDropdown.Item>
   )
   const getNavSearch = (search: NavSearch, index: number) => (
-    <Nav key={index}>
+    <Nav className={search.className ? search.className.concat(' ', '') : ''} key={index}>
       <Form inline>
         <FormControl
           type="text"
@@ -43,29 +48,46 @@ const Navbar = (props: Props) => {
     </Nav>
   )
   const getNavLinkList = (list: NavLinkList, index: number) => (
-    <NavDropdown title={list.label} id="collasible-nav-dropdown" key={index}>
-      {list.children.map((subLink, i) => getNavListLinks(subLink, i))}
+    <NavDropdown
+      className={list.className ? list.className.concat(' ', '') : ''}
+      title={list.label}
+      id="collasible-nav-dropdown"
+      key={index}
+    >
+      {list.children.map((listLink, i) => getNavListLink(listLink, i))}
     </NavDropdown>
   )
   const getNavHeader = (header: NavHeader, index: number) => (
-    <NavbarRB.Brand onClick={header.onClick} style={{ cursor: 'pointer' }} key={index}>
+    <NavbarRB.Brand
+      className={header.className ? header.className.concat(' ', '') : ''}
+      onClick={header.onClick}
+      style={{ cursor: 'pointer' }}
+      key={index}
+    >
       <span style={{ color: header.color }}>{`${header.label}`}</span>
     </NavbarRB.Brand>
   )
   const getNavIcon = (icon: NavIcon, index: number) => (
-    <NavbarRB.Brand onClick={icon.onClick} style={{ cursor: 'pointer' }} key={index}>
-      <img
-        alt={icon.alt}
-        src={icon.src}
-        width="28"
-        height="28"
-        className="d-inline-block align-top mr-3"
-      />
+    <NavbarRB.Brand
+      className={
+        icon.className
+          ? icon.className.concat(' ', 'd-inline-block align-top')
+          : 'd-inline-block align-top'
+      }
+      onClick={icon.onClick}
+      style={{ cursor: 'pointer' }}
+      key={index}
+    >
+      <img alt={icon.alt} src={icon.src} width="28" height="28" />
     </NavbarRB.Brand>
   )
 
   const getNavLink = (link: NavLink, index: number) => (
-    <Nav.Link onClick={link.onClick} key={index}>
+    <Nav.Link
+      className={link.className ? link.className.concat(' ', '') : ''}
+      onClick={link.onClick}
+      key={index}
+    >
       {link.label}
     </Nav.Link>
   )

src/components/Navbar/interfaces.tsx

@@ -1,5 +1,9 @@
 export interface NavItem {
   type: string
+  /**
+   * Defines the class of the list.
+   */
+  className?: string
 }
 
 export interface NavIcon extends NavItem {

stories/navbar.stories.tsx

@@ -61,7 +61,7 @@ storiesOf('Navbar', module)
       ]}
     />
   ))
-  .add('Dark navbar w/ linked list', () => (
+  .add('Dark navbar w/ link list', () => (
     <Navbar
       bg="dark"
       variant="dark"
@@ -126,6 +126,71 @@ storiesOf('Navbar', module)
       ]}
     />
   ))
+  .add('Navbar w/ icons', () => (
+    <Navbar
+      navItems={[
+        {
+          type: 'icon',
+          src:
+            'https://raw.githubusercontent.com/HospitalRun/hospitalrun.github.io/master/favicon.png',
+          onClick: () => {
+            Toast('success', 'Icon clicked!!', 'Success')
+          },
+        },
+        {
+          type: 'header',
+          label: 'HospitalRun',
+          onClick: () => {
+            Toast('success', 'Header clicked!!', 'Success')
+          },
+        },
+        {
+          type: 'link',
+          label: 'Link 1',
+          onClick: () => {
+            Toast('success', 'Link 1 clicked!!', 'Success')
+          },
+        },
+        {
+          type: 'link',
+          label: 'Link 2',
+          onClick: () => {
+            Toast('success', 'Link 2 clicked!!', 'Success')
+          },
+          className: 'mr-3',
+        },
+        {
+          type: 'search',
+          placeholderText: 'Custom',
+          buttonText: 'Text',
+          buttonColor: 'secondary',
+          onClickButton: () => {
+            Toast('success', 'Search button clicked!!', 'Success')
+          },
+          onChangeInput: () => {
+            Toast('success', 'Search box changed!!', 'Success')
+          },
+        },
+        {
+          type: 'icon',
+          src: 'https://image.flaticon.com/icons/svg/126/126472.svg',
+          onClick: () => {
+            Toast('success', 'Settings icon clicked!!', 'Success')
+          },
+          className: 'ml-4',
+        },
+        {
+          type: 'icon',
+          src:
+            'https://s3.us-east-2.amazonaws.com/upload-icon/uploads/icons/png/7104608081548233620-128.png',
+          onClick: () => {
+            Toast('success', 'Profile icon clicked!!', 'Success')
+          },
+          className: 'ml-2',
+        },
+      ]}
+    />
+  ))
   .add('Custom navbar', () => (
     <Navbar
       bg="light"