@synerise/ds-alert 0.5.2 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.7.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.1...@synerise/ds-alert@0.7.0) (2022-04-01)
+
+
+### Bug Fixes
+
+* **alert:** linter Promise, async function returns Promise<void> ([5c1e54d](https://github.com/Synerise/synerise-design/commit/5c1e54d52a0897345cd88609adcbdcdcf5fd85bf))
+
+
+### Features
+
+* **alert:** notificationOpen to use Promise interface ([531b813](https://github.com/Synerise/synerise-design/commit/531b81318370f97d29c13d14510e602b861e20f4))
+
+
+
+
+
+## [0.6.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.6.0...@synerise/ds-alert@0.6.1) (2022-03-31)
+
+
+### Bug Fixes
+
+* **alert:** exporting NotificationProps typing ([985c994](https://github.com/Synerise/synerise-design/commit/985c994a516f0323e2903afddf9ca4bea33a594c))
+
+
+
+
+
+# [0.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.5.2...@synerise/ds-alert@0.6.0) (2022-03-30)
+
+
+### Features
+
+* **alert:** add Notification component, stories, test todos ([eeb09d8](https://github.com/Synerise/synerise-design/commit/eeb09d857938100058e6c3112082014acdb67d6c))
+* **alert:** add the remaining placements, code cleanup, storybook fixes ([c469574](https://github.com/Synerise/synerise-design/commit/c469574c2fa5135d956127a5bc35601808285569))
+
+
+
+
+
 ## [0.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.5.1...@synerise/ds-alert@0.5.2) (2022-03-21)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/README.md

@@ -13,7 +13,7 @@ yarn add @synerise/ds-alert
 ```
 
 ## Usage
-```
+```jsx
 import Alert from '@synerise/ds-alert'
 
 <Alert 
@@ -28,6 +28,54 @@ import Alert from '@synerise/ds-alert'
 
 ```
 
+### Notifications
+
+Notifications API offer three things:
+
+  * `<Notification/>` component for styled content,
+  * `notificationApi.useNotification()` for building a tunnel for the the right ContextApi (notifications use both `React.createPortal` plus they are mounted in container mounted in `document.body` for making it possible to position them correctly),
+    * *Pro-users*: change `getContainer` for sending notifications in other scrollable sections (`@synerise/ds-modal`, `@synerise/ds-section`).
+  * and `notificationOpen` for scheduling showing notificaitons.
+
+#### The simplest notification call
+
+```jsx
+import notificationApi from '@synerise/ds-alert'
+
+notification.open({message: 'Message content'});
+```
+
+#### Styled notification
+```jsx
+import { Notification, notificationApi} from '@synerise/ds-alert'
+
+notificationApi.open({
+  duration: 4.5,
+  message: <Notification>Message content</Notification>
+});
+```
+
+#### Differently positioned notification
+
+`antd-notification` is mounted in `docuemnt.body` by default. In order to style using scoped css -
+`getContainer` has to be a `styled-components`-scoped element, this is done in `mountInstance`, see source code for more.
+
+```jsx
+import { Notification, notificationApi, notificationOpen } from '@synerise/ds-alert';
+
+const [api, contextHolder] = notificationApi.useNotification();
+notificationOpen({
+  message: <Notification>You have new message.</Notification>,
+  placement: 'topLeft'
+}, api, contextHolder);
+```
+
+### Usage recommendations
+
+It is recommended to call `notificationOpen` from `React.useEffect`.
+Of course you can mount styled `<Notification/>` component by yourself,
+but then you need to manage its rendering lifecycle.
+
 ## Demo
 
 <iframe src="/storybook-static/iframe.html?id=components-alert--default"></iframe>
@@ -131,4 +179,17 @@ import Alert from '@synerise/ds-alert'
 | withClose       | prop to set closeIcon                                                                                                  | `React.ReactNode`           | -          |
 | button          | prop to set button                                                                                                     | `boolean`                   | -          |
 | textButton      | string of button                                                                                                       | `string`                    | -          |
-| text            | string of withEmphasis or withLink                                                                                     | `string`                    | -          |
+| text            | string of withEmphasis or withLink                                                                                     | `string`                    | -          |
+
+
+### Alert.Notification
+| Property            | Description                                                                                       | Type                                                          | Default         |
+|---------------------|---------------------------------------------------------------------------------------------------|---------------------------------------------------------------|-----------------|
+| children            | Content of the notification                                                                       | string\/React.ReactNode\/JSX.Element                          | JSX.Element     |
+| type                | type of the notification, `"info"/"success"`, see `antd-notification`, `info` by default          | keyof NotificationInstance                                    | "info"          |
+| placement           | where to position the notification                                                                | 'bottomLeft' 'bottomRight' 'topLeft' 'topRight' 'bottom'      | "bottom"        |
+| onClose?            | Handler for clicking on the close button (close button is rendered only if this prop is provided) | () => void                                                    | -               |
+| buttonText?         | Text on the action button                                                                         | string                                                        | -               |
+| onButtonClick?      | Handler for `onClick` on the action button                                                        | () => void                                                    | -               |
+| icon?               | Icon on the action button                                                                         | DSIcon                                                        | -               |
+| closeIconClassName? | Class of the close icon name                                                                      | string                                                        | "ds-close-icon" |

package/dist/Notification/Notification.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { NotificationInstance } from 'antd/lib/notification';
+import type { ArgsProps, NotificationApi } from 'antd/es/notification';
+import 'antd/lib/notification/style/index.less';
+/**
+ * Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
+ */
+export declare type NotificationProps = {
+    /** content of the notification */
+    children?: JSX.Element | React.ReactNode | React.ReactNode[];
+    /** text displayed on the button */
+    buttonText?: string;
+    /** type of the notification, `"info" | "success"`, see `antd/notification`, `info` by default */
+    type?: keyof NotificationInstance;
+    /** handler for clicking on the button, note button is rendered only if `buttonText` is provided */
+    onButtonClick?: (ev: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** close icon class */
+    closeIconClassName?: string;
+    /** where to position notification, `"{top,bottom}{Left,Right}" | "bottom"` */
+    placement?: ArgsProps['placement'] | 'bottom';
+} & Partial<Omit<ArgsProps, 'placement'>>;
+declare type NotificationApiHook = ReturnType<NotificationApi['useNotification']>;
+declare type ApiHook = NotificationApiHook[0];
+declare type ContextHolder = NotificationApiHook[1];
+/**
+ * Component with the content of the notification.
+ * Note that in order to show notification you need to use `notificationOpen`
+ */
+export declare function Notification({ buttonText, children, onButtonClick, onClose, icon, closeIconClassName, }: NotificationProps): JSX.Element;
+/**
+ * creates a div, mounts it in getContainer and returns reference to it.
+ * This is a helper function for creating a getContainer-compatible element,
+ * which later should be passed to getContainer option in `antd-notification`'s api
+ *
+ * @param @contextHolder notification's hook api context
+ * @param @getContainer where to mount styled wrapper; can be a ref=React.useRef, <div ref={ref}/>
+ **/
+export declare function mountInstance(contextHolder?: ContextHolder, { getContainer, className }?: {
+    getContainer?: (() => HTMLElement) | undefined;
+    className?: string | undefined;
+}): [Promise<HTMLElement>, HTMLElement, () => void];
+/**
+ * Function for showing new notifications.
+ * It requires proper context to be injected (see `notificationApi.useNotification`)
+ * and `message` prop in its first argument.
+ * Below you will find an example usage.
+ * Please remember that it is on you to provide contextHolder in the right place.
+ * ```
+ *   import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
+ *   const [api, contextHolder] = notificationApi.useNotification();
+ *
+ *   function App() {
+ *     return (<div id="app">
+ *       {contextHolder}
+ *       <button onClick={() => notificationOpen({
+ *         message: <Notification>You have been notified.</Notification>
+ *       })}>
+ *         Show notification
+ *       </button>);
+ *
+ *    ReactDOM.render(<App/>, document.querySelector('#app'));
+ * ```
+ */
+export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): Promise<void>;
+export default Notification;

package/dist/Notification/Notification.js

@@ -0,0 +1,185 @@
+var _excluded = ["type", "className", "message", "icon", "onClick", "onClose", "closeIconClassName", "placement"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { notification } from 'antd';
+import "antd/lib/notification/style/index.css";
+import Button from '@synerise/ds-button';
+import Icon, { UserAddM, CloseM } from '@synerise/ds-icon';
+import * as S from './Notification.styles';
+/**
+ * Typings for using better autocompletion for defining an argument for `notificationOpen`'s message property.
+ */
+
+/**
+ * Component with the content of the notification.
+ * Note that in order to show notification you need to use `notificationOpen`
+ */
+export function Notification(_ref) {
+  var buttonText = _ref.buttonText,
+      _ref$children = _ref.children,
+      children = _ref$children === void 0 ? undefined : _ref$children,
+      onButtonClick = _ref.onButtonClick,
+      onClose = _ref.onClose,
+      icon = _ref.icon,
+      _ref$closeIconClassNa = _ref.closeIconClassName,
+      closeIconClassName = _ref$closeIconClassNa === void 0 ? 'ds-close-icon' : _ref$closeIconClassNa;
+  return /*#__PURE__*/React.createElement(S.NotificationsContainer, null, /*#__PURE__*/React.createElement(S.TextLabel, null, children), (buttonText || onClose) && /*#__PURE__*/React.createElement(S.Shrink, null, buttonText && /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    mode: "icon-label",
+    color: "blue",
+    onClick: onButtonClick
+  }, icon || icon !== null && /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(UserAddM, null)
+  }), buttonText), onClose && /*#__PURE__*/React.createElement(Button, {
+    className: closeIconClassName,
+    type: "ghost",
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  }))));
+}
+/**
+ * creates a div, mounts it in getContainer and returns reference to it.
+ * This is a helper function for creating a getContainer-compatible element,
+ * which later should be passed to getContainer option in `antd-notification`'s api
+ *
+ * @param @contextHolder notification's hook api context
+ * @param @getContainer where to mount styled wrapper; can be a ref=React.useRef, <div ref={ref}/>
+ **/
+
+export function mountInstance(contextHolder, _temp) {
+  var _ref2 = _temp === void 0 ? {} : _temp,
+      _ref2$getContainer = _ref2.getContainer,
+      getContainer = _ref2$getContainer === void 0 ? function () {
+    return document.body;
+  } : _ref2$getContainer,
+      _ref2$className = _ref2.className,
+      className = _ref2$className === void 0 ? 'popup-container' : _ref2$className;
+
+  var element = document.createElement('div');
+  element.setAttribute('class', className);
+  var cont = getContainer();
+  cont.appendChild(element);
+  var jsxEl = /*#__PURE__*/React.createElement(S.NotificationsWrapper, null, contextHolder);
+  var renderPromsie = new Promise(function (resolve) {
+    ReactDOM.render(jsxEl, element, function () {
+      return resolve(element);
+    });
+  });
+
+  var cleanUpFunction = function cleanUpFunction() {
+    cont.removeChild(element);
+  };
+
+  return [renderPromsie, element, cleanUpFunction];
+}
+/**
+ * Function for showing new notifications.
+ * It requires proper context to be injected (see `notificationApi.useNotification`)
+ * and `message` prop in its first argument.
+ * Below you will find an example usage.
+ * Please remember that it is on you to provide contextHolder in the right place.
+ * ```
+ *   import { notificationApi, Notification, notificationOpen } from '@synerise/ds-alert';
+ *   const [api, contextHolder] = notificationApi.useNotification();
+ *
+ *   function App() {
+ *     return (<div id="app">
+ *       {contextHolder}
+ *       <button onClick={() => notificationOpen({
+ *         message: <Notification>You have been notified.</Notification>
+ *       })}>
+ *         Show notification
+ *       </button>);
+ *
+ *    ReactDOM.render(<App/>, document.querySelector('#app'));
+ * ```
+ */
+
+export function notificationOpen(_x, _x2, _x3) {
+  return _notificationOpen.apply(this, arguments);
+}
+
+function _notificationOpen() {
+  _notificationOpen = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_ref3, notificationApi, contextHolder) {
+    var _ref3$type, type, _ref3$className, className, message, icon, onClick, onClose, _ref3$closeIconClassN, closeIconClassName, _ref3$placement, placement, props, api, el, containerPromise, _mountInstance, getContainer, maybeCloseClick;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _ref3$type = _ref3.type, type = _ref3$type === void 0 ? 'info' : _ref3$type, _ref3$className = _ref3.className, className = _ref3$className === void 0 ? 'popup-container' : _ref3$className, message = _ref3.message, icon = _ref3.icon, onClick = _ref3.onClick, onClose = _ref3.onClose, _ref3$closeIconClassN = _ref3.closeIconClassName, closeIconClassName = _ref3$closeIconClassN === void 0 ? 'ds-close-icon' : _ref3$closeIconClassN, _ref3$placement = _ref3.placement, placement = _ref3$placement === void 0 ? 'bottom' : _ref3$placement, props = _objectWithoutPropertiesLoose(_ref3, _excluded);
+            api = notificationApi || notification; // TODO: check if context is actually available
+
+            el = document.body.querySelector("." + className);
+
+            if (!el) {
+              _mountInstance = mountInstance(contextHolder, {
+                className: className
+              });
+              containerPromise = _mountInstance[0];
+              el = _mountInstance[1];
+            }
+
+            _context.next = 6;
+            return containerPromise;
+
+          case 6:
+            getContainer = function getContainer() {
+              var _el;
+
+              return (_el = el) == null ? void 0 : _el.querySelector('div>div,.NotificationsBottomPlacementWrapper>.NotificationsWrapper');
+            };
+            /** a workaround for handling close clicks,
+             * since there's no way for injecting other element triggering onClose listener.
+             * It is set as a listener for all the clicks
+             * and fires onClose when close-icon was clicked */
+
+
+            maybeCloseClick = function maybeCloseClick(ev) {
+              var _ev$currentTarget;
+
+              var isClickedElementChildOfCloseIcon = ev.target.closest("." + closeIconClassName);
+              var isThisCloseIcon = ev == null ? void 0 : (_ev$currentTarget = ev.currentTarget) == null ? void 0 : _ev$currentTarget.classList.contains("" + closeIconClassName);
+
+              if (isClickedElementChildOfCloseIcon || isThisCloseIcon) {
+                return onClose && onClose();
+              }
+
+              return onClick && onClick();
+            };
+
+            return _context.abrupt("return", api.open(_objectSpread({
+              message: message,
+              type: type,
+              placement: placement,
+              getContainer: getContainer,
+              icon: icon,
+              onClick: maybeCloseClick,
+              bottom: 16
+            }, props)));
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _notificationOpen.apply(this, arguments);
+}
+
+export default Notification;

package/dist/Notification/Notification.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const NotificationsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Shrink: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NotificationsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const _default: {
+    NotificationsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+    NotificationsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+    TextLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Shrink: import("styled-components").StyledComponent<"div", any, {}, never>;
+};
+export default _default;

package/dist/Notification/Notification.styles.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
+export var NotificationsContainer = styled.div.withConfig({
+  displayName: "Notificationstyles__NotificationsContainer",
+  componentId: "sc-1ke52b0-0"
+})(["background-color:", ";color:white;min-width:588px;padding:8px 8px 8px 16px;display:flex;align-items:center;width:100px;min-height:50px;"], function (props) {
+  var _palette;
+
+  return (_palette = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette['grey-800'];
+});
+export var Shrink = styled.div.withConfig({
+  displayName: "Notificationstyles__Shrink",
+  componentId: "sc-1ke52b0-1"
+})(["flex-grow:0;"]);
+export var TextLabel = styled.div.withConfig({
+  displayName: "Notificationstyles__TextLabel",
+  componentId: "sc-1ke52b0-2"
+})(["flex-grow:1;font-size:13px;"]);
+export var NotificationsWrapper = styled.div.withConfig({
+  displayName: "Notificationstyles__NotificationsWrapper",
+  componentId: "sc-1ke52b0-3"
+})(["& .ant-notification-bottom .ant-notification-hook-holder{margin:0;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0;left:0;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0;background-color:transparent;margin:unset;}& .ant-notification-notice{background-color:transparent;width:588px;border-radius:3px;box-shadow:0 16px 32px 0 ", "1a,0 8px 16px 0 ", "1a;}.ant-notification-notice-icon{display:none;}.ant-notification-notice-with-icon{background-color:transparent;}.ant-notification-notice-close{display:none;}& .ant-notification-notice-message,& .ant-notification-notice-closable .ant-notification-notice-message{padding-right:0;}& .ant-notification-notice-message,& .ant-notification-notice-with-icon .ant-notification-notice-message{margin-left:0;margin-bottom:0;}}"], function (props) {
+  var _palette2;
+
+  return (_palette2 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette2['grey-900'];
+}, function (props) {
+  var _palette3;
+
+  return (_palette3 = ((props == null ? void 0 : props.theme) || theme).palette) == null ? void 0 : _palette3['grey-900'];
+});
+export default {
+  NotificationsContainer: NotificationsContainer,
+  NotificationsWrapper: NotificationsWrapper,
+  TextLabel: TextLabel,
+  Shrink: Shrink
+};

package/dist/Notification/__spec__/Notification.spec.js

@@ -0,0 +1,29 @@
+describe('notification', function () {
+  it.todo('notification message should allow passing jsx component');
+  it.todo('notification should have close-button');
+  it.todo('notification holder should have no padding nor margin');
+  it.todo('by default there should be no icon');
+  it.todo('notifications should be closable with a close icon-click');
+  it.todo('notifications should dissapear after given time');
+  it.todo('pass duration and other props to the notification.open api');
+  it.todo('should mount in a styled-components NotificationWrapper wrapper (not next to as a e.g. sibling)');
+  it.todo('notification message can handle multiline and/or long messages');
+  it.todo('notifications appear correctly even after destroying notifications instance');
+  it.todo('notification container has no background (so border-radius on the content can be applied)');
+  it.todo('container has background-color of gray-900 and 3px border-radius, padding-left is 16px');
+  it.todo('shadow has gray-800');
+  it.todo('default text font-size is 13px');
+  it.todo('button label font-size is 13px');
+  it.todo('notification has min-height of 50px (NotificationsContainer)');
+  it.todo('ant-notification-hook-holder should have 0px height if empty (including margins)');
+  it.todo('first ant-notification-hook-handler has margin-top 0px, the other ones have 8px');
+  it.todo('.ant-notification > div should have transparent background');
+  it.todo('close button and action button can be shown separately (even exclusively)');
+  it.todo("Notification's message can accept special characters \"&'");
+  it.todo('placement bottom applies .ant-notification-bottom class to the container');
+  it.todo('sending notification with another placement handles it correctly');
+  it.todo('getContainer should always point at NotificationsWrapper element');
+  it.todo('.ant-notification-bottom should be properly styled even if e.g. .ant-notification-topLeft was added first (`.ant-notification{, }.ant-notification-bottom`)');
+  it.todo('notificationOpen works with useEffect');
+  it.todo('if running from useEffect handle it so works, do not force used to rely on useLayoutEffect');
+});

package/dist/index.d.ts

@@ -1 +1,10 @@
 export { default } from './Alert';
+export * as S from './Notification/Notification.styles';
+/**
+ * notificationApi is required for properly handling injecting ContextApi for styling and locales.
+ * It's a proxy to `antd`'s `notification` module.
+ */
+export declare const notificationsApi: import("antd/lib/notification").NotificationApi;
+export type { NotificationProps } from './Notification/Notification';
+export { default as Notification } from './Notification/Notification';
+export { notificationOpen } from './Notification/Notification';

package/dist/index.js

@@ -1 +1,12 @@
-export { default } from './Alert';
+import { notification } from 'antd';
+export { default } from './Alert';
+import * as _S from './Notification/Notification.styles';
+export { _S as S };
+/**
+ * notificationApi is required for properly handling injecting ContextApi for styling and locales.
+ * It's a proxy to `antd`'s `notification` module.
+ */
+
+export var notificationsApi = notification;
+export { default as Notification } from './Notification/Notification';
+export { notificationOpen } from './Notification/Notification';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.5.2",
+  "version": "0.7.0",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.17.1",
-    "@synerise/ds-icon": "^0.48.0",
+    "@synerise/ds-button": "^0.17.2",
+    "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-typography": "^0.12.2",
-    "@synerise/ds-unordered-list": "^0.2.9",
+    "@synerise/ds-unordered-list": "^0.2.10",
     "animate.css": "^4.1.1",
     "react-animate-height": "^2.0.23",
     "react-mount-animation": "0.0.9"
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "233a9fede96c39eb8c5feeb5f58c635053ba875a"
+  "gitHead": "b0e79f0b32b23d3a5128d885e8c52a0f54029ce7"
 }