Add notifications API (#73)

* feat #71 - Notification component (#72)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.2.5",
+	"version": "0.2.6",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},

rollup.config.ts

@@ -21,7 +21,7 @@ export default {
 			assetFileNames
 		}
 	],
-	external: ['react'],
+	external: ['antd', 'react'],
 	plugins: [
 		resolve(),
 		commonjs(),

src/__snapshots__/storybook.test.ts.snap

@@ -328,6 +328,58 @@ exports[`Storyshots Link Href 1`] = `
 </a>
 `;
 
+exports[`Storyshots Notifications Error 1`] = `
+<button
+  className="ant-btn ant-btn-default"
+  disabled={false}
+  onClick={[Function]}
+  type="button"
+>
+  <span>
+    Error
+  </span>
+</button>
+`;
+
+exports[`Storyshots Notifications Info 1`] = `
+<button
+  className="ant-btn ant-btn-default"
+  disabled={false}
+  onClick={[Function]}
+  type="button"
+>
+  <span>
+    Info
+  </span>
+</button>
+`;
+
+exports[`Storyshots Notifications Success 1`] = `
+<button
+  className="ant-btn ant-btn-default"
+  disabled={false}
+  onClick={[Function]}
+  type="button"
+>
+  <span>
+    Success
+  </span>
+</button>
+`;
+
+exports[`Storyshots Notifications Warning 1`] = `
+<button
+  className="ant-btn ant-btn-default"
+  disabled={false}
+  onClick={[Function]}
+  type="button"
+>
+  <span>
+    Warning
+  </span>
+</button>
+`;
+
 exports[`Storyshots Skeleton Circle 1`] = `
 <span
   className="container-0-2-1 container-d3-0-2-19"

src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,42 @@
+import { generateNotification } from './index'
+import React from 'react'
+import Button, { ButtonProps } from '../Button'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	argTypes: {
+		children: { control: 'text' }
+	},
+	title: 'Notifications'
+} as Meta
+
+const Template: Story<ButtonProps> = args => (
+	<Button {...args}>{args.children}</Button>
+)
+
+export const Error = Template.bind({})
+Error.args = {
+	children: 'Error',
+	onClick: () =>
+		generateNotification('error', 'Message for error notification')
+}
+
+export const Info = Template.bind({})
+Info.args = {
+	children: 'Info',
+	onClick: () => generateNotification('info', 'Message for info notification')
+}
+
+export const Success = Template.bind({})
+Success.args = {
+	children: 'Success',
+	onClick: () =>
+		generateNotification('success', 'Message for success notification')
+}
+
+export const Warning = Template.bind({})
+Warning.args = {
+	children: 'Warning',
+	onClick: () =>
+		generateNotification('warning', 'Message for warning notification')
+}

src/components/Notification/Notification.test.ts

@@ -0,0 +1,24 @@
+import { generateNotification } from './index'
+import { notification } from 'antd'
+
+describe('Notification', () => {
+	it('should render a notification with the message content', () => {
+		generateNotification('error', 'something')
+
+		const notification = document.querySelectorAll('.ant-notification')[0]
+
+		expect(notification).toBeDefined()
+		expect(notification.textContent).toBe('something')
+	})
+
+	it('should use the notification api provided by AntD', () => {
+		jest.spyOn(notification, 'error')
+
+		const mockErrorNotification = 'Fake Error Notification'
+		generateNotification('error', mockErrorNotification)
+
+		expect(notification.error).toHaveBeenCalledWith({
+			message: mockErrorNotification
+		})
+	})
+})

src/components/Notification/index.ts

@@ -0,0 +1,8 @@
+import 'antd/lib/notification/style/index.css'
+import { IconType } from 'antd/lib/notification'
+import { notification } from 'antd'
+
+export const generateNotification = (type: IconType, message: string): void =>
+	notification[type]({
+		message
+	})

src/components/index.ts

@@ -3,6 +3,7 @@ export { default as Form } from './Form'
 export { default as Input } from './Input'
 export { default as Icon } from './Icon'
 export { default as Link } from './Link'
+export * from './Notification'
 export { default as Skeleton } from './Skeleton'
 export { default as Tag } from './Tag'
 export { default as Toggle } from './Toggle'