@decisiv/ui-components 2.0.1-alpha.12 → 2.0.1-alpha.132

package/lib/components/Modal/index.js

@@ -129,7 +129,7 @@ function Modal(_ref) {
   var handleOverlayClick = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    onClose(event);
+    onClose && onClose(event);
   }, [onClose]); // Any click within the body should stay within the body. This prevents the click event from
   // bubbling up and firing the onClose handler via the Overlay's onClick.
 
@@ -157,7 +157,7 @@ function Modal(_ref) {
     paddingTop: (_ref2 = {}, _defineProperty(_ref2, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref2, _breakpointObserver.sizes.XS, 2), _ref2),
     paddingX: (_ref3 = {}, _defineProperty(_ref3, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref3, _breakpointObserver.sizes.XS, 2), _ref3),
     size: breakpoint
-  }, _react.default.createElement(_components.CloseButtonContainer, null, _react.default.createElement(_Tooltip.default, {
+  }, onClose && _react.default.createElement(_components.CloseButtonContainer, null, _react.default.createElement(_Tooltip.default, {
     placement: "top",
     target: // eslint-disable-next-line
     _react.default.createElement(_Button.default, {
@@ -175,7 +175,7 @@ function Modal(_ref) {
     paddingBottom: (_ref4 = {}, _defineProperty(_ref4, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref4, _breakpointObserver.sizes.XS, 2), _ref4),
     paddingX: (_ref5 = {}, _defineProperty(_ref5, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref5, _breakpointObserver.sizes.XS, 2), _ref5),
     size: breakpoint
-  }, children)), _react.default.createElement(_components.Footer, {
+  }, children)), actions && _react.default.createElement(_components.Footer, {
     hasIcon: !!IconComponent,
     id: modalFooterId,
     paddingX: (_ref6 = {}, _defineProperty(_ref6, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref6, _breakpointObserver.sizes.XS, 2), _ref6),
@@ -202,7 +202,7 @@ function Manager(_ref7) {
 
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
-      onClose(event);
+      onClose && onClose(event);
     }
   }, [onClose]); // Allow closing the modal by pressing the Escape key
 
@@ -229,7 +229,7 @@ function Manager(_ref7) {
 
 
 Manager.propTypes = _objectSpread({}, _schema.default.propTypes, {
-  actions: _proptypeValidators.actionsValidator.isRequired,
+  actions: _proptypeValidators.actionsValidator,
   icon: _propTypes.default.elementType
 });
 Manager.displayName = 'Modal';

package/lib/components/Modal/index.test.js

@@ -12,6 +12,10 @@ var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
@@ -80,6 +84,18 @@ describe('Modal', function () {
 
     expect(onClose).toHaveBeenCalled();
   });
+  it('renders a modal without a close button', function () {
+    var onClose = defaultProps.onClose,
+        rest = _objectWithoutProperties(defaultProps, ["onClose"]);
+
+    var _render2 = render(_react.default.createElement(_.default, rest)),
+        baseElement = _render2.baseElement;
+
+    var modalHeader = document.getElementById("modal-header-".concat(defaultProps.id));
+    var closeButton = (0, _react2.queryByLabelText)(modalHeader, /close/i);
+    expect(closeButton).toBeFalsy();
+    expect(baseElement).toMatchSnapshot();
+  });
   it('renders the children as the content of the modal', function () {
     var content = 'Test modal content.';
     render(_react.default.createElement(_.default, defaultProps, content));
@@ -147,6 +163,22 @@ describe('Modal', function () {
 
       expect(onClose).toHaveBeenCalled();
     });
+    it('doest NOT call the onClose when pressing escape and no onClose function is provided', function () {
+      var closeFn = defaultProps.onClose,
+          rest = _objectWithoutProperties(defaultProps, ["onClose"]);
+
+      var onClose = jest.fn();
+      render(_react.default.createElement(_.default, rest));
+
+      _react2.fireEvent.keyDown(document.body, {
+        key: 'Escape',
+        code: 27,
+        keyCode: 27,
+        charCode: 27
+      });
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
   });
   describe('with invalid props', function () {
     beforeEach(function () {

package/lib/components/Modal/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAyDlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAuDlD,eAAe,MAAM,CAAC"}

package/lib/components/Modal/schema.js

@@ -17,13 +17,13 @@ schema.propTypes = {
   actions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     onClick: _reactDesc.PropTypes.func.isRequired,
     text: _reactDesc.PropTypes.string.isRequired
-  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `size`, and `variant`.').isRequired,
+  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `size`, and `variant`.'),
   closeHint: _reactDesc.PropTypes.string.description('The text to present in the tooltip when hovering over the close button.'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The icon color; Will override the default color associated with any specified `intent`.').format('string'),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to display; Will override the default icon associated with any specified `intent`.'),
   id: _reactDesc.PropTypes.string.description('A unique identifier for the modal.'),
   intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger', 'help']).description('Shortcuts to the most common combinations of icon and color.'),
-  onClose: _reactDesc.PropTypes.func.description('The event handler called to close the modal.').isRequired,
+  onClose: _reactDesc.PropTypes.func.description('The event handler called to close the modal. If not provided, the modal will not include a close button and closing by clicking outside or pressing the "Esc" key will be disabled.'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the modal').isRequired,
   visible: _reactDesc.PropTypes.bool.description('A boolean value used to control whether the modal is visible or not').defaultValue('false'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index value for the modal & overlay.')

package/lib/components/Modal/types.d.ts

@@ -5,14 +5,14 @@ import { ButtonProps } from '../Button/types';
 import { intents } from './constants';
 declare type ActionProps = Exclude<ButtonProps, 'kind' | 'size' | 'variant'>;
 export interface ModalProps {
-    actions: [ActionProps] | [ActionProps, ActionProps];
+    actions?: [ActionProps] | [ActionProps, ActionProps];
     children: React.ReactNode;
     closeHint?: string;
     color?: CommonUIColorKeys;
     icon?: (props: IconProps) => JSX.Element;
     id?: string;
     intent?: keyof typeof intents;
-    onClose: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
+    onClose?: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
     title: string;
     visible?: boolean;
     zIndex?: number;

package/lib/components/Modal/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,aAAK,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAGrE,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACpD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,aAAK,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAGrE,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB"}

package/lib/components/Modal/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/Notifications/Notification/components.d.ts

@@ -102,9 +102,9 @@ export declare const NotificationCard: import("styled-components").StyledCompone
 }> & {
     borderColor: string;
 }, never>;
-export declare const IconColumn: import("styled-components").StyledComponent<"div", any, import("../../Grid/Column/types").default & {
-    span: string;
-}, "span">;
+export declare const IconColumn: import("styled-components").StyledComponent<"div", any, {
+    right?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
 export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=components.d.ts.map

package/lib/components/Notifications/Notification/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/components.ts"],"names":[],"mappings":";AAWA,OAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAa5B,CAAC;AAEF,eAAO,MAAM,UAAU;;UAGtB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAEvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAGjC,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/components.ts"],"names":[],"mappings":";AAWA,OAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAInD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAa5B,CAAC;AAEF,eAAO,MAAM,UAAU;;SAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAEvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAGjC,CAAC"}

package/lib/components/Notifications/Notification/components.js

@@ -15,7 +15,7 @@ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"))
 
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
-var _dynamicModifiers = require("../../../utils/dynamicModifiers");
+var _utils = require("../../../utils");
 
 var _skyPlane = _interopRequireDefault(require("../../../utils/skyPlane"));
 
@@ -23,6 +23,8 @@ var _Grid = _interopRequireDefault(require("../../Grid"));
 
 var _Button = _interopRequireDefault(require("../../Button"));
 
+var _constants = require("../constants");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,17 +32,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var NotificationCard = (0, _styledComponents.default)(_Grid.default.Container).withConfig({
   displayName: "components__NotificationCard",
   componentId: "ds1zkc-0"
-})(["background-color:", ";box-shadow:", ";border-radius:2px;width:", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _skyPlane.default)(2), (0, _rem.default)(_spacing.default.base * 34), (0, _dynamicModifiers.applyDynamicModifiers)('borderColor', function (_ref) {
+})(["background-color:", ";box-shadow:", ";border-radius:2px;width:", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _skyPlane.default)(2), _constants.NOTIFICATION_CARD_WIDTH, (0, _utils.applyDynamicModifiers)('borderColor', function (_ref) {
   var borderColor = _ref.borderColor;
   return (0, _styledComponents.css)(["border-left:2px solid ", ";"], borderColor);
 }));
 exports.NotificationCard = NotificationCard;
-var IconColumn = (0, _styledComponents.default)(_Grid.default.Column).attrs({
-  span: '0'
-}).withConfig({
+
+var IconColumn = _styledComponents.default.div.withConfig({
   displayName: "components__IconColumn",
   componentId: "ds1zkc-1"
-})(["top:1px;width:", ";"], (0, _rem.default)(_spacing.default.base * 4));
+})(["padding-left:", ";", ""], (0, _rem.default)(_spacing.default.base), function (_ref2) {
+  var _ref2$right = _ref2.right,
+      right = _ref2$right === void 0 ? false : _ref2$right;
+  return right && (0, _styledComponents.css)(["padding-right:", ";"], (0, _rem.default)(_spacing.default.base));
+});
+
 exports.IconColumn = IconColumn;
 var CloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "components__CloseButton",

package/lib/components/Notifications/Notification/index.d.ts

@@ -1,13 +1,10 @@
 /// <reference types="react" />
+import PropTypes from 'prop-types';
 import { TNotificationProps } from '../../../providers/NotificationsProvider/types';
 declare function Notification(props: TNotificationProps): JSX.Element;
 declare namespace Notification {
-    var propTypes: any;
-    var defaultProps: {
-        actions: undefined;
-        children: null;
-        icon: undefined;
-    };
+    var propTypes: PropTypes.ValidationMap<TNotificationProps>;
+    var defaultProps: Partial<TNotificationProps>;
     var displayName: string;
 }
 export default Notification;

package/lib/components/Notifications/Notification/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAwBpF,iBAAS,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAiG5D;kBAjGQ,YAAY;;;;;;;;;AAqHrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/index.tsx"],"names":[],"mappings":";AAGA,OAAO,SAA4B,MAAM,YAAY,CAAC;AAMtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAwBpF,iBAAS,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAuG5D;kBAvGQ,YAAY;;;;;AA8HrB,eAAe,YAAY,CAAC"}

package/lib/components/Notifications/Notification/index.js

@@ -72,6 +72,8 @@ function Notification(props) {
       _props$intent = props.intent,
       intent = _props$intent === void 0 ? _constants.intentNames.information : _props$intent,
       onClose = props.onClose,
+      onFocus = props.onFocus,
+      onHover = props.onHover,
       title = props.title;
   var translate = (0, _useTranslations.default)();
 
@@ -91,13 +93,15 @@ function Notification(props) {
     id: id,
     borderColor: accentColor,
     margin: 0,
-    padding: 1.5
-  }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_components.IconColumn, {
-    paddingRight: 0
-  }, Icon), _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, {
+    padding: 1.5,
+    onFocus: onFocus,
+    onMouseOver: onHover
+  }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_components.IconColumn, null, Icon), _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, {
     shade: 0,
     weight: "semibold"
-  }, title)), _react.default.createElement(_components.IconColumn, null, _react.default.createElement(_Tooltip.default, {
+  }, title)), onClose && _react.default.createElement(_components.IconColumn, {
+    right: true
+  }, _react.default.createElement(_Tooltip.default, {
     target: // eslint-disable-next-line react/jsx-wrap-multilines
     _react.default.createElement(_components.CloseButton, {
       "aria-label": translate(closeHint, 'notification.closeHint'),
@@ -120,21 +124,24 @@ function Notification(props) {
       key: action.text
     }, _react.default.createElement(_Button.default, _extends({}, (0, _omit.default)(action, ['kind', 'size', 'variant']), actionProps[index])));
   }))))));
-} // @ts-ignore
+}
 
-
-Notification.propTypes = _objectSpread({}, _schema.default.propTypes, {
+var propTypes = _objectSpread({}, _schema.default.propTypes, {
   actions: _proptypeValidators.actionsValidator,
-  children: _propTypes.default.elementType,
+  children: _propTypes.default.node,
   icon: _propTypes.default.elementType,
   id: _propTypes.default.string.isRequired,
-  onClose: _propTypes.default.func.isRequired
+  onClose: _propTypes.default.func
 });
-Notification.defaultProps = {
+
+var defaultProps = {
   actions: undefined,
   children: null,
-  icon: undefined
+  icon: undefined,
+  onClose: undefined
 };
+Notification.propTypes = propTypes;
+Notification.defaultProps = defaultProps;
 Notification.displayName = 'Notification';
 var _default = Notification;
 exports.default = _default;

package/lib/components/Notifications/Notification/index.test.js

@@ -6,12 +6,16 @@ var _react2 = require("@testing-library/react");
 
 var _constants = require("../../../constants");
 
-var _ConfigProvider = require("../../../providers/ConfigProvider");
+var _providers = require("../../../providers");
 
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
@@ -20,12 +24,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_providers.ConfigProvider, null, children);
+};
+
 var render = function render(ui, options) {
   return (0, _react2.render)(ui, _objectSpread({}, options, {
-    wrapper: function wrapper(_ref) {
-      var children = _ref.children;
-      return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
-    }
+    wrapper: wrapper
   }));
 };
 
@@ -60,26 +66,39 @@ describe('Notification', function () {
 
     expect(queryByText(defaultProps.title)).toBeTruthy();
   });
-  it('renders a close button in the header of the notification', function () {
-    var onClose = jest.fn();
+  describe('when onClose is NOT provided', function () {
+    it('does NOT render a close button in the header of the notification', function () {
+      var onClose = defaultProps.onClose,
+          testProps = _objectWithoutProperties(defaultProps, ["onClose"]);
 
-    var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      onClose: onClose
-    }))),
-        queryByLabelText = _render3.queryByLabelText;
+      var _render3 = render(_react.default.createElement(_.default, testProps)),
+          queryByLabelText = _render3.queryByLabelText;
+
+      expect(queryByLabelText(/close/i)).not.toBeTruthy();
+    });
+  });
+  describe('when onClose is provided', function () {
+    it('renders a close button in the header of the notification', function () {
+      var onClose = jest.fn();
+
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onClose: onClose
+      }))),
+          queryByLabelText = _render4.queryByLabelText;
 
-    var closeButton = queryByLabelText(/close/i);
-    expect(closeButton).toBeTruthy();
+      var closeButton = queryByLabelText(/close/i);
+      expect(closeButton).toBeTruthy();
 
-    _react2.fireEvent.click(closeButton);
+      _react2.fireEvent.click(closeButton);
 
-    expect(onClose).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
+    });
   });
   it('renders the children as the content of the notification', function () {
     var content = 'Test modal content.';
 
-    var _render4 = render(_react.default.createElement(_.default, defaultProps, content)),
-        queryByText = _render4.queryByText;
+    var _render5 = render(_react.default.createElement(_.default, defaultProps, content)),
+        queryByText = _render5.queryByText;
 
     expect(queryByText(content)).toBeTruthy();
   });
@@ -94,10 +113,10 @@ describe('Notification', function () {
       text: 'secondary'
     }];
 
-    var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+    var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
       actions: actions
     }))),
-        queryByText = _render5.queryByText;
+        queryByText = _render6.queryByText;
 
     var primaryActionButton = queryByText(actions[0].text);
     expect(primaryActionButton).toBeTruthy();

package/lib/components/Notifications/NotificationsPanel/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { TNotifications } from '../../../providers/NotificationsProvider/types';
 interface TNotificationsContainerProps {
+    scroll?: boolean;
     notifications?: TNotifications;
     marginTop?: number;
     zIndex?: number;
 }
-declare function NotificationsPanel({ marginTop, zIndex, }: TNotificationsContainerProps): JSX.Element;
+declare function NotificationsPanel({ marginTop, zIndex, }: TNotificationsContainerProps): JSX.Element | null;
 export default NotificationsPanel;
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Notifications/NotificationsPanel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/NotificationsPanel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAEL,cAAc,EACf,MAAM,gDAAgD,CAAC;AAYxD,UAAU,4BAA4B;IACpC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwDD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,MAAM,GACP,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAwC5C;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/NotificationsPanel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAEL,cAAc,EACf,MAAM,gDAAgD,CAAC;AAcxD,UAAU,4BAA4B;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4ED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,MAAM,GACP,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2CnD;AAED,eAAe,kBAAkB,CAAC"}

package/lib/components/Notifications/NotificationsPanel/index.js

@@ -37,6 +37,8 @@ var _Notification = _interopRequireDefault(require("../Notification"));
 
 var _useNotifications2 = _interopRequireDefault(require("../useNotifications"));
 
+var _constants = require("../constants");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,14 +56,30 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var NotificationsContainer = _styledComponents.default.div.withConfig({
   displayName: "NotificationsPanel__NotificationsContainer",
   componentId: "sc-1u8dp2k-0"
-})(["bottom:", ";margin-top:", ";overflow-y:auto;padding-bottom:", ";position:fixed;right:", ";top:0;z-index:", ";overflow-x:hidden;"], (0, _rem.default)(_spacing.default.base * 0.5), function (_ref) {
+})(["max-height:", ";margin-bottom:", ";margin-top:", ";overflow-y:hidden;padding-bottom:", ";position:fixed;right:", ";top:0;min-width:calc(1.25rem + ", ");z-index:", ";overflow-x:hidden;scrollbar-width:thin;", ";", ";"], function (_ref) {
   var _ref$marginTop = _ref.marginTop,
       marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop;
+  return "calc(100vh - ".concat((0, _rem.default)(_spacing.default.base * marginTop), ");");
+}, function (_ref2) {
+  var _ref2$marginTop = _ref2.marginTop,
+      marginTop = _ref2$marginTop === void 0 ? 0 : _ref2$marginTop;
+  return (0, _rem.default)(_spacing.default.base * marginTop);
+}, function (_ref3) {
+  var _ref3$marginTop = _ref3.marginTop,
+      marginTop = _ref3$marginTop === void 0 ? 0 : _ref3$marginTop;
   return (0, _rem.default)(_spacing.default.base * marginTop);
-}, (0, _rem.default)(_spacing.default.base * 0.5), (0, _rem.default)(_spacing.default.base), function (_ref2) {
-  var _ref2$zIndex = _ref2.zIndex,
-      zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex;
+}, (0, _rem.default)(_spacing.default.base * 0.8), (0, _rem.default)(_spacing.default.base), _constants.NOTIFICATION_CARD_WIDTH, function (_ref4) {
+  var _ref4$zIndex = _ref4.zIndex,
+      zIndex = _ref4$zIndex === void 0 ? 100 : _ref4$zIndex;
   return zIndex;
+}, function (_ref5) {
+  var scroll = _ref5.scroll,
+      _ref5$notifications = _ref5.notifications,
+      notifications = _ref5$notifications === void 0 ? [] : _ref5$notifications;
+  return scroll && notifications.length > 2 ? "overflow-y: auto;" : "overflow-y: hidden;";
+}, function (_ref6) {
+  var notifications = _ref6.notifications;
+  return (0, _isEmpty.default)(notifications) && "width : 0";
 });
 
 var FloatingButton = (0, _styledComponents.default)(_Button.default).attrs({
@@ -71,41 +89,46 @@ var FloatingButton = (0, _styledComponents.default)(_Button.default).attrs({
   componentId: "sc-1u8dp2k-1"
 })(["box-shadow:", ";&:focus,&:focus:not(:active){border-color:", ";", ";}&:hover,&:hover:not(:active){background-color:", ";color:", ";}"], (0, _skyPlane.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)((0, _toColorString.default)(_color.default.interaction.pacificOcean40)), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean.fg));
 
+var FloatingButtonColumn = _styledComponents.default.div.withConfig({
+  displayName: "NotificationsPanel__FloatingButtonColumn",
+  componentId: "sc-1u8dp2k-2"
+})(["display:flex;flex:1;height:24px;justify-content:flex-end;padding-left:", ";padding-right:", ";"], (0, _rem.default)(_spacing.default.base), (0, _rem.default)(_spacing.default.base));
+
 var NotificationContainer = _styledComponents.default.div.withConfig({
   displayName: "NotificationsPanel__NotificationContainer",
-  componentId: "sc-1u8dp2k-2"
+  componentId: "sc-1u8dp2k-3"
 })(["height:auto;max-height:0;opacity:0;transition:opacity 1s cubic-bezier(0.33,1,0.68,1),max-height 1s cubic-bezier(0.33,1,0.68,1);", ";"], (0, _styledComponentsModifiers.applyStyleModifiers)(_defineProperty({}, _types.NotificationState.DISPLAYING, function () {
   return (0, _styledComponents.css)(["max-height:100vh;opacity:1;"]);
 }), 'renderState'));
 
-function NotificationsPanel(_ref3) {
-  var marginTop = _ref3.marginTop,
-      zIndex = _ref3.zIndex;
+function NotificationsPanel(_ref7) {
+  var marginTop = _ref7.marginTop,
+      zIndex = _ref7.zIndex;
 
   var _useNotifications = (0, _useNotifications2.default)(),
       dismissAll = _useNotifications.dismissAll,
+      isDismissingAll = _useNotifications.isDismissingAll,
       notifications = _useNotifications.notifications;
 
   var translate = (0, _useTranslations.default)();
-  return _react.default.createElement(NotificationsContainer, {
+  return (0, _isEmpty.default)(notifications) ? null : _react.default.createElement(NotificationsContainer, {
+    scroll: !isDismissingAll,
     marginTop: marginTop,
-    zIndex: zIndex
+    zIndex: zIndex,
+    notifications: notifications
   }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(_Grid.default.Row, {
     alignment: "end"
-  }, _react.default.createElement(_Grid.default.Column, {
-    height: "24px",
-    span: "0"
-  }, notifications.length >= 2 && _react.default.createElement(FloatingButton, {
+  }, _react.default.createElement(FloatingButtonColumn, null, !isDismissingAll && notifications.length >= 2 && _react.default.createElement(FloatingButton, {
     onClick: dismissAll,
     size: "small",
     text: translate(undefined, 'notifications.dismissAll')
-  })))), !(0, _isEmpty.default)(notifications) && _react.default.createElement(_Grid.default.Container, null, (notifications || []).map(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 3),
-        notificationProps = _ref5[0],
-        body = _ref5[1],
-        _ref5$ = _ref5[2],
-        notificationID = _ref5$.notificationID,
-        state = _ref5$.state;
+  })))), _react.default.createElement(_Grid.default.Container, null, (notifications || []).map(function (_ref8) {
+    var _ref9 = _slicedToArray(_ref8, 3),
+        notificationProps = _ref9[0],
+        body = _ref9[1],
+        _ref9$ = _ref9[2],
+        notificationID = _ref9$.notificationID,
+        state = _ref9$.state;
 
     return _react.default.createElement(_Grid.default.Row, {
       key: notificationID,

package/lib/components/Notifications/NotificationsPanel/schema.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _reactDesc = require("react-desc");
 
-// @ts-ignore no module typings
+// @ts-ignore no module typings for react-desc
 var schema = (0, _reactDesc.describe)({
   displayName: 'NotificationsPanel'
 });