@synerise/ds-alert 0.5.2 → 0.6.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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,38 @@ import Alert from '@synerise/ds-alert'
 
 ```
 
+### notifications api usage
+
+#### Simple (`ant`-based)
+
+```jsx
+import notification from '@ant/notification'
+
+notification.open({message: 'Message content', duration 4.5})
+```
+
+#### A `synerise-design`-styled notification
+```jsx
+import Notification from '@ds-alert/Notification'
+import notification from '@ant/notification'
+
+notification.open({message: <Notification>'Message content'</Notification>, duration: 4.5})
+```
+
+#### 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 open from '@ds-alert/Notification'
+
+const [api, contextHolder] = notification.useNotification();
+open({message: Message content, duration: 4.5}, api, contextHolder))
+
+console.log('@synerise/ds-alert notifications get mounted in this container', document.querySelector('.popup-container'))
+```
+
 ## Demo
 
 <iframe src="/storybook-static/iframe.html?id=components-alert--default"></iframe>
@@ -131,4 +163,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,36 @@
+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';
+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];
+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;
+}): [HTMLElement | null, Function];
+export declare function notificationOpen({ type, className, message, icon, onClick, onClose, closeIconClassName, placement, ...props }: NotificationProps, notificationApi?: ApiHook, contextHolder?: ContextHolder): void;
+export default Notification;

package/dist/Notification/Notification.js

@@ -0,0 +1,134 @@
+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; }
+
+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';
+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);
+  ReactDOM.render(jsxEl, element);
+
+  var cleanUpFunction = function cleanUpFunction() {
+    cont.removeChild(element);
+  };
+
+  return [element, cleanUpFunction];
+}
+export function notificationOpen(_ref3, notificationApi, contextHolder) {
+  var _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);
+
+  var api = notificationApi || notification; // TODO: check if context is actually available
+
+  var el = document.body.querySelector("." + className);
+
+  if (!el) {
+    var _mountInstance = mountInstance(contextHolder, {
+      className: className
+    });
+
+    el = _mountInstance[0];
+  }
+
+  var 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 */
+
+
+  var 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 api.open(_objectSpread({
+    message: message,
+    type: type,
+    placement: placement,
+    getContainer: getContainer,
+    icon: icon,
+    onClick: maybeCloseClick,
+    bottom: 16
+  }, props));
+}
+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;padding-left:16px;padding-right:8px;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:0px;margin-top:0px;&:not(:first-child){margin-top:8px;}}& .ant-notification.ant-notification-bottom{right:0px;left:0px;margin:0 auto;width:588px;bottom:8px;}& .ant-notification-hook-holder{background-color:transparent;box-shadow:none;width:588px;}& .ant-notification-notice{padding:0px;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,27 @@
+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`)');
+});

package/dist/index.d.ts

@@ -1 +1,5 @@
 export { default } from './Alert';
+export * as S from './Notification/Notification.styles';
+export { default as Notification } from './Notification/Notification';
+export { NotificationProps } from './Notification/Notification';
+export { notificationOpen } from './Notification/Notification';

package/dist/index.js

@@ -1 +1,6 @@
-export { default } from './Alert';
+export { default } from './Alert';
+import * as _S from './Notification/Notification.styles';
+export { _S as S };
+export { default as Notification } from './Notification/Notification';
+export { NotificationProps } 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.6.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": "93d7c60a7fe73188d715fd52b9701f81fcb4e60a"
 }