Cnto 8202 notification

package.json

@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.85",
+  "version": "0.5.99",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [

src/components/Notification/index.js

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react'
+import { Icon } from '../Icon/index'
+import { Text } from '../Typography/index'
+import { notification } from 'antd'
+import './notification.scss'
+
+const iconMap = {
+  info: 'info',
+  warning: 'error',
+  error: 'report',
+  success: 'check_circle',
+}
+export const showNotification = (type, message) => {
+  notification[type]({
+    message: <Text type="title-3">{message}</Text>,
+    className: `notification-${type}`,
+    icon: <Icon name={iconMap[type]} size={24} />,
+    closeIcon: (
+      <Icon name="close" size={24} color="primary-text-color" hoverColor="primary-text-color" />
+    ),
+    duration: 5,
+  })
+}
+
+export const Notification = ({ type, message }) => {
+  useEffect(() => {
+    showNotification(type, message)
+  }, [type])
+  return <>This is notification of type {type}</>
+}

src/components/Notification/index.stories.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Notification, showNotification } from './'
+
+export default {
+  title: 'Components/Notification',
+  component: showNotification,
+}
+
+const Template = (args) => <Notification {...args} />
+
+export const Info = Template.bind({})
+Info.args = {
+  message: 'This is info notification',
+  type: 'info',
+}
+
+export const Success = Template.bind({})
+Success.args = {
+  message: 'This is success notification',
+  type: 'success',
+}
+
+export const Error = Template.bind({})
+Error.args = {
+  message: 'This is error notification',
+  type: 'error',
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+  message: 'This is warning notification',
+  type: 'warning',
+}

src/components/Notification/notification.scss

@@ -0,0 +1,76 @@
+.notification {
+  &-success {
+    color: var(--success-color);
+    border-left: 4px solid var(--toast-success-color);
+  }
+
+  &-device-change {
+    background: rgba(6, 14, 43, 0.9) !important;
+    width: 100% !important;
+    min-height: 36px;
+    padding: 8px !important;
+    .ant-notification-notice-message {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0px;
+    }
+  }
+
+  &-error {
+    color: var(--danger-color);
+    border-left: 4px solid var(--danger-color);
+  }
+
+  &-warning {
+    color: var(--warning-color);
+    border-left: 4px solid var(--warning-color);
+  }
+
+  &-info {
+    color: var(--primary-color);
+    border-left: 4px solid var(--primary-color);
+  }
+
+}
+
+.ant-notification {
+  &-notice-content {
+    display: flex;
+    margin-right: 40px;
+  }
+  &-notice-description {
+    margin: 0;
+  }
+
+  &-notice-message {
+    display: flex;
+    margin: 0 !important;
+    margin-left: 32px !important;
+    padding-right: 0 !important;
+    &-single-line-auto-margin {
+      display: none;
+    }
+  }
+  &-notice-with-icon {
+    display: initial !important;
+  }
+  &-notice-close-icon,
+  &-close-icon {
+    svg {
+      height: 1.5rem !important;
+      width: 1.5rem !important;
+      fill: var(--primary-text-color) !important;
+    }
+  }
+  &-notice-close {
+    right: 16px;
+  }
+  &-notice-icon {
+    margin: 0;
+  }
+  &-notice {
+    padding: 16px;
+    width: 337px;
+  }
+}

src/index.js

@@ -26,4 +26,4 @@ export * from './components/TopBanner/index'
 export * from './components/TimeLeftBar/index'
 export * from './components/PhoneNumberInput/index'
 export * from './components/ChatLoader/index'
-
+export * from './components/Notification/index'