feat(notification): version one - WIP

src/components/BannerMessage/BannerMessageFooter.jsx

@@ -10,7 +10,9 @@ const BannerMessageFooter = 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' }
+    if (right || (alignment && alignment === 'right')) {
+      return 'banner-message__footer-right'
+    }
     return defaultAlignment
   }
 

src/components/Notification/Notification.examples.md

@@ -0,0 +1,34 @@
+#### Notification Menu
+
+```js
+const Flexbox = require('flexbox-react').default;
+
+const notificationCount = 8;
+
+const notifications1 = [];
+
+const notifications = [
+    {id:1, type:'error', title:'First Notification', description:'Tets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ', timeStamp:'Just now', isMsgRead:false},
+    {id:2, type:'success', title:'Second Notification', description:'Tetsetetsd hgfasdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:false},
+    {id:3, type:'info', title:'Third Notification', description:'Tetsetetsdhgfasdgfasjfgs dfjgfh', timeStamp:'Just now', isMsgRead:false},
+    {id:4, type:'warning', title:'Fourth Notification', description:'Tetsetetsdhgfa sdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:true},
+    {id:5, type:'error', title:'Fifth Notification', description:'Tets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ets etetsd hgfasdgf asjfgs dfjgfh ', timeStamp:'Just now', isMsgRead:false},
+    {id:6, type:'error', title:'Six Notification', description:'Tetsetetsd hgfasdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:false},
+    {id:7, type:'info', title:'Seven Notification', description:'Tetsetetsdhgfasdgfasjfgs dfjgfh', timeStamp:'Just now', isMsgRead:false},
+    {id:8, type:'warning', title:'First Notification', description:'Tetsetetsdhgfa sdgfasjfgsdfjgfh', timeStamp:'Just now', isMsgRead:true}
+];
+
+<div >
+    <Notification>
+        <Notification.Badge key={'badge'}  size='large' notificationCount={notificationCount} />
+        <Notification.Tray key={'tray'}>        
+            <Notification.Header title={'Notification'} notificationCount={notificationCount} />
+            <Notification.Body notifications={notifications} removeItem={null}>
+            </Notification.Body>           
+            <Notification.Footer>
+              <div>Clear All</div>          
+            </Notification.Footer>
+        </Notification.Tray>    
+    </Notification>
+</div>
+```

src/components/Notification/Notification.jsx

@@ -0,0 +1,39 @@
+import '../../styles/components/notification.css'
+import React from 'react'
+import { Popup } from 'semantic-ui-react'
+import NotificationBadge from './NotificationBadge'
+import NotificationTray from './NotificationTray'
+import NotificationHeader from './NotificationHeader'
+import NotificationBody from './NotificationBody'
+import NotificationFooter from './NotificationFooter'
+import NotificationEmpty from './NotificationEmpty'
+
+const Notification = props => {
+  const { children, ...rest } = props
+  let visible = true
+  let childrenNodes = {}
+  children.forEach(ele => {
+    childrenNodes[ele.key] = ele
+  })
+
+  return (
+    <Popup
+      visible={visible}
+      trigger={childrenNodes.badge}
+      content={childrenNodes.tray}
+      on='click'
+      position='bottom center'
+      className={'notificationPopup'}
+      {...rest}
+    />
+  )
+}
+
+Notification.Badge = NotificationBadge
+Notification.Tray = NotificationTray
+Notification.Header = NotificationHeader
+Notification.Body = NotificationBody
+Notification.Footer = NotificationFooter
+Notification.Empty = NotificationEmpty
+
+export default Notification

src/components/Notification/NotificationBadge.jsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+import PropTypes from 'prop-types'
+
+const NotificationBadge = props => {
+  const { size, notificationCount, ...rest } = props
+
+  return (
+    <span className={`notificationIcon ${size}`} {...rest}>
+      <Icon name='bell outline' size={size} />
+      <span className={`notificationCount ${size}`}>{notificationCount}</span>
+    </span>
+  )
+}
+
+NotificationBadge.defaultProps = {
+  notificationCount: 0
+}
+
+NotificationBadge.propTypes = {
+  notificationCount: PropTypes.number
+}
+
+export default NotificationBadge

src/components/Notification/NotificationBody.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import NotificationMessage from './NotificationMessage'
+import NotificationEmpty from './NotificationEmpty'
+
+const NotificationBody = props => {
+  const { children, notifications, removeItem, ...rest } = props
+  let componentToRender = (
+    <div>
+      <NotificationEmpty />
+    </div>
+  )
+
+  if (notifications.length > 0) {
+    componentToRender = (
+      <div className='notificationBody' {...rest}>
+        {notifications.map(
+          ({ id, type, title, description, timeStamp, isMsgRead }) => {
+            let icon = ''
+            switch (type) {
+              case 'success':
+                icon = 'icon_error-triangle_alt'
+                break
+              case 'info':
+                icon = 'icon_error-triangle_alt'
+                break
+              case 'warning':
+                icon = 'icon_error-triangle_alt'
+                break
+              case 'error':
+                icon = 'icon_error-circle_alt'
+                break
+              default:
+                icon = 'icon_check_alt2'
+            }
+            const options = {
+              id,
+              type,
+              title,
+              description,
+              timeStamp,
+              isMsgRead,
+              icon: icon,
+              removeItem: removeItem
+            }
+            return <NotificationMessage key={id} options={options} />
+          }
+        )}
+        {children}
+      </div>
+    )
+  }
+
+  return componentToRender
+}
+
+NotificationBody.defaultProps = {}
+
+NotificationBody.propTypes = {}
+
+export default NotificationBody

src/components/Notification/NotificationEmpty.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const NotificationEmpty = props => {
+  const { children, ...rest } = props
+  return (
+    <div className='empty__notification_panel' {...rest}>
+      <div className='empty__circle'>
+        <div className='bell_icon'>
+          <Icon name='bell outline' size='big' />
+        </div>
+        <div className='info_text'>
+          <span>No New Notifications!</span>
+        </div>
+      </div>
+      <div className='title'>
+        <span>
+          Check back again for updates, alerts and any other general
+          notifications.
+        </span>
+      </div>
+    </div>
+  )
+}
+
+NotificationEmpty.defaultProps = {}
+
+NotificationEmpty.propTypes = {}
+
+export default NotificationEmpty

src/components/Notification/NotificationFooter.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+const NotificationFooter = props => {
+  const { children, ...rest } = props
+  return (
+    <div className={'notificationFooter clearfix'} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+NotificationFooter.defaultProps = {}
+
+NotificationFooter.propTypes = {}
+
+export default NotificationFooter

src/components/Notification/NotificationHeader.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const NotificationHeader = props => {
+  const { title, notificationCount, children, ...rest } = props
+  return (
+    <div className={'notificationHeader clearfix'} {...rest}>
+      <span className='notificationTitle'>{title} </span>
+      <span className='notificationCount'>{notificationCount}</span>
+      {children}
+    </div>
+  )
+}
+
+NotificationHeader.defaultProps = {}
+
+NotificationHeader.propTypes = {}
+
+export default NotificationHeader

src/components/Notification/NotificationMessage.jsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Flexbox from 'flexbox-react'
+import { Icon } from 'semantic-ui-react'
+
+const NotificationMessage = props => {
+  const { options, ...rest } = props
+  const { id, type, title, description, timeStamp, isMsgRead, icon } = options
+  return (
+    <Flexbox
+      id={id}
+      isMsgRead={isMsgRead}
+      flexDirection='column'
+      flexGrow={1}
+      className={'column singleNotification'}
+      {...rest}
+    >
+      <Flexbox title={title}>
+        <Icon className={`ei text-large notificationIcon ${type} ${icon}`} />
+        <Flexbox flexDirection='column' className={`notificationContent`}>
+          <div className='notificationTitle'>{title}</div>
+          <div className='notificationDesc '>{description}</div>
+          <div className='notificationActions'>
+            <span className='notificationClear'>Clear</span>
+          </div>
+        </Flexbox>
+        <div className='notificationTime'>{timeStamp}</div>
+      </Flexbox>
+    </Flexbox>
+  )
+}
+
+NotificationMessage.defaultProps = {
+  title: '',
+  description: '',
+  timeStamp: '',
+  icon: ''
+}
+
+NotificationMessage.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string
+}
+
+export default NotificationMessage

src/components/Notification/NotificationTray.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+
+const NotificationTray = props => {
+  const { children, ...rest } = props
+  return <div {...rest}>{children}</div>
+}
+
+export default NotificationTray