diff --git a/package.json b/package.json
index 322af3f9..4af1887d 100644
--- a/package.json
+++ b/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"
},
diff --git a/rollup.config.ts b/rollup.config.ts
index 8175ef22..86328345 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -21,7 +21,7 @@ export default {
assetFileNames
}
],
- external: ['react'],
+ external: ['antd', 'react'],
plugins: [
resolve(),
commonjs(),
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index 85a1a102..761c2386 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -328,6 +328,58 @@ exports[`Storyshots Link Href 1`] = `
`;
+exports[`Storyshots Notifications Error 1`] = `
+
+`;
+
+exports[`Storyshots Notifications Info 1`] = `
+
+`;
+
+exports[`Storyshots Notifications Success 1`] = `
+
+`;
+
+exports[`Storyshots Notifications Warning 1`] = `
+
+`;
+
exports[`Storyshots Skeleton Circle 1`] = `
= args => (
+
+)
+
+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')
+}
diff --git a/src/components/Notification/Notification.test.ts b/src/components/Notification/Notification.test.ts
new file mode 100644
index 00000000..43684b40
--- /dev/null
+++ b/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
+ })
+ })
+})
diff --git a/src/components/Notification/index.ts b/src/components/Notification/index.ts
new file mode 100644
index 00000000..b179e9c2
--- /dev/null
+++ b/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
+ })
diff --git a/src/components/index.ts b/src/components/index.ts
index 9ec6464c..c6abba67 100644
--- a/src/components/index.ts
+++ b/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'