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'