fix(warnings): fix console warnings about props

Tripwire · Oct 5, 2018 · 4261abf · 4261abf
1 parent 627b440
commit 4261abf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 35 deletions.
diff --git a/src/components/BannerMessage/BannerMessage.examples.md b/src/components/BannerMessage/BannerMessage.examples.md
@@ -2,7 +2,7 @@
 
 ```js
 
-<BannerMessage status='success'>
+<BannerMessage success>
 	<BannerMessage.Header>Success Message goes here</BannerMessage.Header>
 </BannerMessage>
 ```
@@ -11,7 +11,7 @@
 
 ```js
 
-<BannerMessage status='information'>
+<BannerMessage info>
 Information Message goes here
 </BannerMessage>
 ```
@@ -20,7 +20,7 @@ Information Message goes here
 
 ```js
 
-<BannerMessage status='warning'>
+<BannerMessage warning>
 Warning Message goes here
 </BannerMessage>
 ```
@@ -29,15 +29,15 @@ Warning Message goes here
 
 ```js
 
-<BannerMessage status='error'>
+<BannerMessage error>
 Error Message goes here
 </BannerMessage>
 ```
 
 #### Banner Message, with button
 ```js
 
-<BannerMessage status='information' button="Click here">
+<BannerMessage info button="Click here">
 	<BannerMessage.Header>Header text goes here</BannerMessage.Header>
 </BannerMessage>
 ```
@@ -46,7 +46,7 @@ Error Message goes here
 
 ```js
 
-<BannerMessage status='success'>
+<BannerMessage success>
 	<BannerMessage.Header>Header text goes here</BannerMessage.Header>
 	<BannerMessage.Body>body</BannerMessage.Body>
 </BannerMessage>
@@ -57,7 +57,7 @@ Error Message goes here
 ```js
 const Button = require('semantic-ui-react').Button;
 
-<BannerMessage status='information'>
+<BannerMessage info>
 	<BannerMessage.Header>Header text goes here</BannerMessage.Header>
 	<BannerMessage.Body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at sagittis sem, ac commodo diam. Cras sed enim sit amet ligula volutpat dignissim. Donec nec magna ex. Ut eu dictum sem.</BannerMessage.Body>
 	<BannerMessage.Footer>
@@ -74,8 +74,8 @@ initialState = { closed: false };
 
 <div style={{border: '1px solid black'}}>
 	<h1 style={{padding: '10px', background: '#363D43', margin: '0px', position: 'relative', color: 'white'}}>My App</h1>
-	<BannerMessage status='error' 
-		onCloseClicked={obj => {
+	<BannerMessage error
+		onCloseClicked={() => {
 	  	setState({ closed: true})
 		}}
 		closed={state.closed}

diff --git a/src/components/BannerMessage/BannerMessage.jsx b/src/components/BannerMessage/BannerMessage.jsx
@@ -5,68 +5,65 @@ import { Button } from 'semantic-ui-react'
 import BannerMessageHeader from './BannerMessageHeader'
 import BannerMessageBody from './BannerMessageBody'
 import BannerMessageFooter from './BannerMessageFooter'
+import classnames from 'classnames'
 
 /**
  * A BannerMessage displays an alert at the top of a content section.
  */
 
 const BannerMessage = props => {
-  const { closed, header, icon, children, ...rest } = props
-
-  function getAlertIconClass () {
-    if (status === 'success') return 'icon_check_alt2'
-    if (status === 'information') return 'ei icon_info_alt'
-    if (status === 'warning') return 'ei icon_error-triangle_alt'
-    if (status === 'error') return 'ei icon_error-circle_alt'
-  }
-
-  function getStatus () {
-    if (props.status) {
-      if (props.status === 'info') return 'information'
-      else return props.status
-    }
-    if (props.success) return 'success'
-    if (props.info || props.information) return 'information'
-    if (props.warning) return 'warning'
-    if (props.error) return 'error'
-  }
+  const {button, closed, header, icon, children, info, warning, error, success, onCloseClicked, ...rest} = props
+  const forceInfo = !info && !warning && !error && !success
 
   function getOneDismissElement () {
     const dismissIcon = (
       <i
         className={`banner-message__close-icon ei icon_close`}
-        onClick={props.onCloseClicked}
+        onClick={onCloseClicked}
       />
     )
     const dismissButton = (
       <Button
         size='tiny'
         className='banner-message__close-button'
-        onClick={props.onCloseClicked}
+        onClick={onCloseClicked}
       >
-        {props.button}
+        {button}
       </Button>
     )
-    return (!icon && props.button && dismissButton) || dismissIcon
+    return (!icon && button && dismissButton) || dismissIcon
   }
 
   const childIsString = typeof children === 'string'
   const nakedHeader = childIsString && !header && children
-  const status = getStatus()
   const headerContent = header || nakedHeader || ''
   const childContent = !childIsString ? children : ''
   const headerMarkup = headerContent && (
     <BannerMessageHeader>{headerContent}</BannerMessageHeader>
   )
   const alertIcon = (
-    <i className={`banner-message__alert ${getAlertIconClass()}`} />
+    <i className={classnames('banner-message__alert', {
+      'icon_check_alt2': success,
+      'ei icon_info_alt': info || forceInfo,
+      'ei icon_error-triangle_alt': warning,
+      'ei icon_error-circle_alt': error
+    })}/>
   )
   const DismissElement = getOneDismissElement()
 
   return (
     <div className='banner-message__wrapper'>
       <div
-        className={`banner-message ${status} ${closed ? 'closed' : ''}`}
+        className={classnames(
+          'banner-message',
+          {
+            info: info || forceInfo,
+            success,
+            error,
+            warning,
+            closed
+          }
+        )}
         {...rest}
       >
         {alertIcon}