feat(toastNotification): adds toast notification component

package.json

@@ -68,7 +68,7 @@
   },
   "scripts": {
     "commit": "git-cz",
-    "build": "babel src --out-dir lib --ignore test.js,__mocks__  && less",
+    "build": "babel src --out-dir lib --ignore test.js,__mocks__  && npm run less",
     "less": "mkdir -p lib/styles/less && cp -r less/ lib/styles/less",
     "lint": "eslint --max-warnings 0 src storybook",
     "prettier": "prettier --write --single-quote --no-semi '{src,storybook}/**/*.js'",

src/Alert/Alert.js

@@ -1,6 +1,7 @@
 import ClassNames from 'classnames'
 import React from 'react'
 import PropTypes from 'prop-types'
+import { ALERT_TYPES } from '../common/constants'
 
 /**
  * Alert Component for Patternfly React
@@ -42,8 +43,7 @@ Alert.propTypes = {
   /** callback when alert is dismissed  */
   onDismiss: PropTypes.func,
   /** the type of alert  */
-  type: PropTypes.oneOf(['danger', 'error', 'warning', 'success', 'info'])
-    .isRequired,
+  type: PropTypes.oneOf(ALERT_TYPES).isRequired,
   /** children nodes  */
   children: PropTypes.node
 }

src/DropdownKebab/DropdownKebab.js

@@ -1,22 +1,30 @@
 import { Dropdown } from 'react-bootstrap'
+import ClassNames from 'classnames'
 import React from 'react'
 import PropTypes from 'prop-types'
 
-const DropdownKebab = ({ children, id, pullRight }) => {
+/**
+ * DropdownKebab Component for Patternfly React
+ */
+const DropdownKebab = ({ className, children, id, pullRight }) => {
+  const kebabClass = ClassNames('dropdown-kebab-pf', className)
   return (
-    <Dropdown className="dropdown-kebab-pf" id={id} pullRight={pullRight}>
+    <Dropdown className={kebabClass} id={id} pullRight={pullRight}>
       <Dropdown.Toggle bsStyle="link" noCaret>
         <span className="fa fa-ellipsis-v" />
       </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {children}
-      </Dropdown.Menu>
+      <Dropdown.Menu>{children}</Dropdown.Menu>
     </Dropdown>
   )
 }
 DropdownKebab.propTypes = {
+  /** additional kebab dropdown classes */
+  className: PropTypes.string,
+  /** children nodes  */
   children: PropTypes.node,
+  /** kebab dropdown id */
   id: PropTypes.string.isRequired,
+  /** menu right aligned */
   pullRight: PropTypes.bool
 }
 export default DropdownKebab

src/ToastNotification/TimedToastNotification.js

@@ -0,0 +1,98 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import helpers from '../common/helpers'
+import Timer from '../common/Timer'
+import { TOAST_NOTIFICATION_TYPES } from '../common/constants'
+import { ToastNotification } from '../index.js'
+
+/**
+ * TimedToastNotification Component for Patternfly React
+ */
+class TimedToastNotification extends React.Component {
+  constructor(props) {
+    super(props)
+    helpers.bindMethods(this, ['onMouseEnter', 'onMouseLeave'])
+  }
+
+  componentDidMount() {
+    const { paused, persistent, onDismiss, timerdelay } = this.props
+
+    if (!persistent) {
+      this.timer = new Timer(onDismiss, timerdelay)
+      this.timer.startTimer()
+    }
+
+    /** if we are paused on mount, then clear the timer
+     * after having initialized with the correct delay */
+    if (paused) {
+      this.timer && this.timer.clearTimer()
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    /**
+     * If paused prop changes, update our timer
+     */
+    if (nextProps.paused !== this.props.paused) {
+      if (nextProps.paused) {
+        this.timer && this.timer.clearTimer()
+      } else {
+        this.timer && this.timer.startTimer()
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this.timer && this.timer.clearTimer()
+  }
+
+  onMouseEnter() {
+    const { onMouseEnter } = this.props
+    onMouseEnter && onMouseEnter()
+  }
+
+  onMouseLeave() {
+    const { onMouseLeave } = this.props
+    onMouseLeave && onMouseLeave()
+  }
+  render() {
+    const { children } = this.props
+    return (
+      <ToastNotification
+        {...this.props}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
+      >
+        {children}
+      </ToastNotification>
+    )
+  }
+}
+
+TimedToastNotification.propTypes = {
+  /** pauses notification from dismissing */
+  paused: PropTypes.bool,
+  /** persistent keeps the notification up endlessly until closed */
+  persistent: PropTypes.bool,
+  /** timer delay until dismiss */
+  timerdelay: PropTypes.number,
+  /** additional notification classes */
+  className: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
+  /** callback when alert is dismissed  */
+  onDismiss: PropTypes.func,
+  /** onMouseEnter callback */
+  onMouseEnter: PropTypes.func,
+  /** onMouseLeave callback */
+  onMouseLeave: PropTypes.func,
+  /** the type of alert  */
+  type: PropTypes.oneOf(TOAST_NOTIFICATION_TYPES).isRequired, // eslint-disable-line react/no-unused-prop-types
+  /** children nodes  */
+  children: PropTypes.node
+}
+TimedToastNotification.defaultProps = {
+  paused: false,
+  type: 'error',
+  timerdelay: 8000
+}
+
+export default TimedToastNotification

src/ToastNotification/ToastNotification.js

@@ -0,0 +1,73 @@
+import ClassNames from 'classnames'
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Button } from '../index'
+import { TOAST_NOTIFICATION_TYPES } from '../common/constants'
+
+/**
+ * ToastNotification Component for Patternfly React
+ */
+const ToastNotification = ({
+  className,
+  onDismiss,
+  type,
+  onMouseEnter,
+  onMouseLeave,
+  children,
+  ...props
+}) => {
+  const notificationClasses = ClassNames(
+    {
+      alert: true,
+      'toast-pf': true,
+      'alert-danger': type === 'danger' || type === 'error',
+      'alert-warning': type === 'warning',
+      'alert-success': type === 'success',
+      'alert-info': type === 'info',
+      'alert-dismissable': onDismiss
+    },
+    className
+  )
+  const iconClass = ClassNames({
+    pficon: true,
+    'pficon-error-circle-o': type === 'danger' || type === 'error',
+    'pficon-warning-triangle-o': type === 'warning',
+    'pficon-ok': type === 'success',
+    'pficon-info': type === 'info'
+  })
+
+  return (
+    <div
+      className={notificationClasses}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      {...props}
+    >
+      {onDismiss &&
+        <Button bsClass="close" aria-hidden="true" onClick={onDismiss}>
+          <span className="pficon pficon-close" />
+        </Button>}
+      <span className={iconClass} />
+      {children}
+    </div>
+  )
+}
+ToastNotification.propTypes = {
+  /** additional notification classes */
+  className: PropTypes.string,
+  /** callback when alert is dismissed  */
+  onDismiss: PropTypes.func,
+  /** the type of alert  */
+  type: PropTypes.oneOf(TOAST_NOTIFICATION_TYPES).isRequired,
+  /** onMouseEnter callback */
+  onMouseEnter: PropTypes.func,
+  /** onMouseLeave callback */
+  onMouseLeave: PropTypes.func,
+  /** children nodes  */
+  children: PropTypes.node
+}
+ToastNotification.defaultProps = {
+  type: 'error'
+}
+
+export default ToastNotification