fix(navbar): fix-navbar-mistakes

fix #148

Author: ocBruno

src/components/Navbar/Navbar.tsx

@@ -16,7 +16,7 @@ interface Props extends React.Props<any> {
   navLinks: NavLink[]
   /** Determines the hospital/clinic name to be shown at the navbar */
   brand: Brand
-  /** Defines the button variant. By default is 'primary ' */
+  /** Defines the properties of the search element */
   search: Search
 }
 
@@ -49,7 +49,7 @@ const Navbar = (props: Props) => {
   }
   return (
     <NavbarRB bg={bg} variant={variant}>
-      <NavbarRB.Brand href={brand.href} onClick={brand.onClick} style={{ cursor: 'pointer' }}>
+      <NavbarRB.Brand onClick={brand.onClick} style={{ cursor: 'pointer' }}>
         {brand.src ? (
           <img
             alt={brand.label}
@@ -69,12 +69,12 @@ const Navbar = (props: Props) => {
           <Form inline>
             <FormControl
               type="text"
-              placeholder={search.placeholderText}
+              placeholder={search.placeholderText || 'Search'}
               className="mr-sm-2"
               onChange={search.onChangeInput}
             />
-            <Button color={search.buttonColor} onClick={search.onClickButton}>
-              {search.buttonText}
+            <Button color={search.buttonColor || 'primary'} onClick={search.onClickButton}>
+              {search.buttonText || 'Search'}
             </Button>
           </Form>
         </Nav>

src/components/Navbar/interfaces.tsx

@@ -3,20 +3,18 @@ export interface Brand {
   label: string
   /** Label color */
   color?: string
-  /** Determina the href */
-  href?: string
   /** A path which contain the company icon/image */
   src?: string
-  /** A click handle which will redirect the user to the respectivel webpage/path */
-  onClick?: (event: React.MouseEvent<any>) => void
+  /** A click handle which will redirect the user to the respectable webpage/path */
+  onClick: (event: React.MouseEvent<any>) => void
 }
 
 export interface NavLinkElement {
   /** The link name */
   label: string
   /** A click handle which will redirect the user to whenever it is clicked */
   onClick: (event: React.MouseEvent<any>) => void
-  /** Determina the href */
+  /** Determines the href */
   href?: string
 }
 
@@ -27,9 +25,9 @@ export interface NavLink extends NavLinkElement {
 
 export interface Search {
   /** Defines the placeholder text. */
-  placeholderText?: string | 'Search'
+  placeholderText?: string
   /** Defines the button text. */
-  buttonText?: string | 'Search'
+  buttonText?: string
   /** Defines the button variant. */
   buttonColor?:
     | 'primary'
@@ -41,7 +39,7 @@ export interface Search {
     | 'light'
     | 'dark'
   /** Handles the on click search button event */
-  onClickButton?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onClickButton: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
   /** Handles the on change search form event */
   onChangeInput?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }

stories/navbar.stories.tsx

@@ -21,8 +21,9 @@ storiesOf('Navbar', module)
           },
         }}
         search={{
-          placeholderText: 'Test',
-          buttonText: 'Search',
+          placeholderText: 'Custom',
+          buttonText: 'Text',
+          buttonColor: 'secondary',
           onClickButton: () => {
             Toast('success', 'Button clicked!!', 'Success')
           },
@@ -46,16 +47,13 @@ storiesOf('Navbar', module)
       <Navbar
         brand={{
           label: 'HospitalRun',
-          href: '/',
           src:
             'https://raw.githubusercontent.com/HospitalRun/hospitalrun.github.io/master/favicon.png',
           onClick: () => {
             Toast('success', 'Brand button clicked!!', 'Success')
           },
         }}
         search={{
-          placeholderText: 'Search',
-          buttonText: 'Search',
           onClickButton: () => {
             Toast('success', 'Button clicked!!', 'Success')
           },