feat(bannermessage): v1 of banner message. (#294)

* feat(bannermessage): v1 of banner message.
allows user to set: succcess, information, warning, or error.
allows user to set icon or button
allows user to do a quick banner, simply parent component and text or include subcomponents header, body, and footer.
Several Examples included.

src/components/BannerMessage/BannerMessage.examples.md

@@ -0,0 +1,91 @@
+#### Banner Message, Success
+
+```js
+
+<BannerMessage status='success'>
+	<BannerMessage.Header>Success Message goes here</BannerMessage.Header>
+</BannerMessage>
+```
+
+#### Banner Message, Information
+
+```js
+
+<BannerMessage status='information'>
+Information Message goes here
+</BannerMessage>
+```
+
+#### Banner Message, warning
+
+```js
+
+<BannerMessage status='warning'>
+Warning Message goes here
+</BannerMessage>
+```
+
+#### Banner Message, Error
+
+```js
+
+<BannerMessage status='error'>
+Error Message goes here
+</BannerMessage>
+```
+
+#### Banner Message, with button
+```js
+
+<BannerMessage status='information' button="Click here">
+	<BannerMessage.Header>Header text goes here</BannerMessage.Header>
+</BannerMessage>
+```
+
+#### Banner Message, with Body
+
+```js
+
+<BannerMessage status='success'>
+	<BannerMessage.Header>Header text goes here</BannerMessage.Header>
+	<BannerMessage.Body>body</BannerMessage.Body>
+</BannerMessage>
+```
+
+#### Banner Message, with Body and Footer
+
+```js
+const Button = require('semantic-ui-react').Button;
+
+<BannerMessage status='information'>
+	<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>
+		<Button negative>No</Button>
+		<Button primary>Yes</Button>
+	</BannerMessage.Footer>
+</BannerMessage>
+```
+
+#### Banner Message in App
+```js
+const Button = require('semantic-ui-react').Button;
+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 => {
+	  	setState({ closed: true})
+		}}
+		closed={state.closed}
+	>
+		<BannerMessage.Header>Click the close button to make this disappear</BannerMessage.Header>
+	</BannerMessage>
+	<section style={{background: '#F8F8F8', padding: '10px'}}>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat magna turpis, ac commodo ligula imperdiet ac. Nunc vitae arcu luctus, sagittis odio quis, suscipit nisi. Nunc laoreet enim sed tellus consectetur tincidunt. Vivamus sit amet posuere dolor. Sed vestibulum fermentum enim nec ornare. Quisque dignissim tellus at velit pretium, id euismod diam tempus. Phasellus sollicitudin metus sodales aliquet mollis. Curabitur auctor eros et nisl dapibus, at mattis diam fringilla. Donec dignissim, augue viverra imperdiet tincidunt, ipsum tellus luctus tellus, pretium tincidunt felis tellus ut est. In hendrerit, odio sed pretium dignissim, tortor enim pulvinar sapien, vitae pharetra lectus magna non orci. Aenean at semper diam. Morbi consequat diam vel nisl viverra lobortis. Cras ut ex non magna congue vehicula. Morbi sit amet odio metus.</p>
+	</section>
+</div>
+```
+
+

src/components/BannerMessage/BannerMessage.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import '../../styles/components/banner-message.css'
+import { Button } from 'semantic-ui-react'
+import BannerMessageHeader from './BannerMessageHeader'
+import BannerMessageBody from './BannerMessageBody'
+import BannerMessageFooter from './BannerMessageFooter'
+
+/**
+ * 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'
+  }
+
+  function getOneDismissElement () {
+    const dismissIcon = <i className={`banner-message__close-icon ei icon_close`} onClick={props.onCloseClicked} />
+    const dismissButton = <Button size='tiny' className='banner-message__close-button' onClick={props.onCloseClicked}>{props.button}</Button>
+    return (!icon && props.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()}`} />
+  const DismissElement = getOneDismissElement()
+
+  return (
+    <div className='banner-message__wrapper'>
+      <div
+        className={`banner-message ${status} ${closed ? 'closed' : ''}`}
+        {...rest}
+      >
+        {alertIcon}
+        {DismissElement}
+        {headerMarkup}
+        {childContent}
+      </div>
+    </div>
+  )
+}
+
+BannerMessage.Header = BannerMessageHeader
+BannerMessage.Body = BannerMessageBody
+BannerMessage.Footer = BannerMessageFooter
+
+BannerMessage.propTypes = {
+  /**
+   * Called when the user clicks header close icon (or button).
+   */
+  onCloseClicked: PropTypes.func
+}
+
+export default BannerMessage

src/components/BannerMessage/BannerMessageBody.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+/**
+* Body for Banner Message. Can contain any children (e.g. text, lists, image)
+ */
+
+const BannerMessageBody = props => {
+  const { children, ...rest } = props
+  return (
+    <p
+      className='banner-message__body'
+      {...rest}
+    >
+      {children}
+    </p>
+  )
+}
+
+export default BannerMessageBody

src/components/BannerMessage/BannerMessageFooter.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+/**
+ * Footer for BannerMessage. Content is centered by default.
+ */
+
+const BannerMessageFooter = props => {
+  const { children, alignment, center, right, ...rest } = props
+
+  function getAlignmentClass () {
+    const defaultAlignment = 'banner-message__footer-center'
+    if (center || (alignment && alignment === 'center')) return defaultAlignment
+    if (right || (alignment && alignment === 'right')) return 'banner-message__footer-right'
+    return defaultAlignment
+  }
+
+  return (
+    <div
+      className={`banner-message__footer ${getAlignmentClass()}`}
+      {...rest}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default BannerMessageFooter

src/components/BannerMessage/BannerMessageHeader.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+/**
+ * Header for BannerMessage
+ */
+
+const BannerMessageHeader = props => {
+  const { children, ...rest } = props
+
+  return (
+    <div
+      className='banner-message__header'
+      {...rest}>{children}</div>
+  )
+}
+
+export default BannerMessageHeader

src/styles/components/banner-message.css

@@ -0,0 +1,108 @@
+.banner-message__wrapper {
+  overflow: hidden;
+  position: relative;
+}
+
+.banner-message {
+  position: relative;
+  background: white;
+  color: white;
+  padding: 0;
+}
+
+.banner-message {
+  z-index: 999;
+  margin-top: 0;
+  transition: all 2s ease-in;
+}
+
+.banner-message.closed {
+  margin-top: -100%;
+}
+
+.banner-message.success {
+  background-color: #3F9C35;
+  border: 3px solid #3F9C35;
+}
+
+.banner-message.info,
+.banner-message.information {
+  background-color: #3498DB;
+  border: 3px solid #3498DB;
+}
+
+.banner-message.warn,
+.banner-message.warning {
+  background-color: #FF9E2C;
+  border: 3px solid #FF9E2C;
+}
+
+.banner-message.error {
+  background-color: #C0382B;
+  border: 3px solid #C0382B;
+}
+
+.banner-message__alert {
+  float: left;
+  margin: 0 12px;
+  font-size: 24px;
+  padding: 8px 0;
+}
+
+.banner-message .banner-message__close-icon {
+  float: right;
+  cursor: pointer;
+  margin: 0 12px;
+  font-size: 24px;
+  padding: 8px 0;
+}
+
+
+.banner-message .banner-message__header button,
+.banner-message button.banner-message__close-button {
+  font-size: 12px;
+  float: right;
+  cursor: pointer;
+  margin: 3px 12px;
+}
+
+.banner-message .banner-message__header button {
+  margin: -4px 0;
+}
+
+
+.banner-message__header {
+  padding: 5px 0;
+  display: block;
+  min-height: 34px;
+  vertical-align: middle;
+  line-height: 30px;
+  font-family: Lato;
+  font-size: 14px;
+  color: #ffffff;
+  font-weight: 500;
+  line-height: 30px;
+}
+
+.banner-message__body {
+  border-top: inherit;
+  background: white;
+  margin: 0;
+  color: black;
+  padding: 24px 48px;
+}
+
+.banner-message__footer {
+  background: white;
+  margin: 0;
+  color: black;
+  padding: 24px 48px;
+}
+
+.banner-message__footer-center {
+  text-align: center;
+}
+
+.banner-message__footer-right {
+  text-align: right;
+}