@dhis2-ui/modal 9.11.3 → 9.11.5

package/build/cjs/modal/modal.js

@@ -27,12 +27,12 @@ const Modal = _ref => {
   let {
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-modal',
     hide,
     fluid,
     large,
     onClose,
-    position,
+    position = 'top',
     small
   } = _ref;
   const layerStyles = resolveLayerStyles(hide);
@@ -77,10 +77,6 @@ const Modal = _ref => {
   }, [`aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}", `div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ${2 * _uiConstants.spacersNum.dp64}px);max-height:calc(100vh - ${2 * _uiConstants.spacersNum.dp64}px);}`]));
 };
 exports.Modal = Modal;
-Modal.defaultProps = {
-  dataTest: 'dhis2-uicore-modal',
-  position: 'top'
-};
 Modal.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/build/cjs/modal/modal.prod.stories.js

@@ -3,12 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TopScrollable = exports.SmallTitleContentAction = exports.SmallLongTitle = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.SmallClickableScreenCover = exports.RTL = exports.ModalThatHidesWithStatefulComponens = exports.MiddleScrollable = exports.MediumTitleContentAction = exports.LargeWithSelectComponent = exports.LargeTitleContentPrimary = exports.LargeModalWithMoreNestedModals = exports.FluidTop = exports.FluidTitleContentPrimary = exports.FluidMiddle = exports.FluidBottom = exports.DefaultContent = exports.BottomScrollable = exports.AlignmentMiddle = exports.AlignmentBottom = void 0;
+exports.default = exports.TopScrollable = exports.SmallTitleContentAction = exports.SmallLongTitle = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.SmallClickableScreenCover = exports.RTL = exports.ModalWithLoadingState = exports.ModalWithErrorState = exports.ModalThatHidesWithStatefulComponens = exports.MiddleScrollable = exports.MediumTitleContentAction = exports.LargeWithSelectComponent = exports.LargeTitleContentPrimary = exports.LargeModalWithMoreNestedModals = exports.FluidTop = exports.FluidTitleContentPrimary = exports.FluidMiddle = exports.FluidBottom = exports.DefaultContent = exports.BottomScrollable = exports.AlignmentMiddle = exports.AlignmentBottom = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _box = require("@dhis2-ui/box");
 var _button = require("@dhis2-ui/button");
+var _center = require("@dhis2-ui/center");
+var _input = require("@dhis2-ui/input");
+var _loader = require("@dhis2-ui/loader");
 var _menu = require("@dhis2-ui/menu");
+var _noticeBox = require("@dhis2-ui/notice-box");
 var _select = require("@dhis2-ui/select");
 var _tooltip = require("@dhis2-ui/tooltip");
 var _react = _interopRequireWildcard(require("react"));
@@ -342,6 +346,42 @@ LargeWithSelectComponent.args = {
   large: true
 };
 LargeWithSelectComponent.storyName = 'Large: with Select component';
+const ModalWithErrorState = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "Update profile"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(_input.InputField, {
+  label: "First name",
+  required: true,
+  error: true,
+  validationText: "First name can't be empty.",
+  inputWidth: "320px"
+}), /*#__PURE__*/_react.default.createElement(_input.InputField, {
+  label: "Last name",
+  value: "Olefeme",
+  required: true,
+  inputWidth: "320px"
+}), /*#__PURE__*/_react.default.createElement(_box.Box, {
+  marginTop: "16px"
+}, /*#__PURE__*/_react.default.createElement(_noticeBox.NoticeBox, {
+  error: true
+}, "There is a problem with this form."))), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  secondary: true
+}, "Cancel"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  disabled: true,
+  primary: true
+}, "Save changes"))));
+exports.ModalWithErrorState = ModalWithErrorState;
+ModalWithErrorState.storyName = 'With error state';
+const ModalWithLoadingState = args => /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "Modal title"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(_box.Box, {
+  minHeight: "240px"
+}, /*#__PURE__*/_react.default.createElement(_center.Center, null, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, null)))), /*#__PURE__*/_react.default.createElement(_index.ModalActions, null, /*#__PURE__*/_react.default.createElement(_button.ButtonStrip, {
+  end: true
+}, /*#__PURE__*/_react.default.createElement(_button.Button, {
+  secondary: true
+}, "Cancel"), /*#__PURE__*/_react.default.createElement(_button.Button, {
+  primary: true
+}, "Save changes"))));
+exports.ModalWithLoadingState = ModalWithLoadingState;
+ModalWithLoadingState.storyName = 'With loading state';
 const LargeModalWithMoreNestedModals = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_modal.Modal, args, /*#__PURE__*/_react.default.createElement(_index.ModalTitle, null, "Select opens on top of the Modal - Level 1"), /*#__PURE__*/_react.default.createElement(_index.ModalContent, null, /*#__PURE__*/_react.default.createElement(_select.SingleSelect, null, /*#__PURE__*/_react.default.createElement(_select.SingleSelectOption, {
   key: "1",
   value: "1",

package/build/cjs/modal-actions/modal-actions.js

@@ -12,7 +12,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ModalActions = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modalactions'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
@@ -23,9 +23,6 @@ const ModalActions = _ref => {
   }, [`div.__jsx-style-dynamic-selector{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:${_uiConstants.spacers.dp16} 0 0;}`]));
 };
 exports.ModalActions = ModalActions;
-ModalActions.defaultProps = {
-  dataTest: 'dhis2-uicore-modalactions'
-};
 ModalActions.propTypes = {
   children: _propTypes.default.node,
   dataTest: _propTypes.default.string

package/build/cjs/modal-content/modal-content.js

@@ -12,7 +12,7 @@ const ModalContent = _ref => {
   let {
     children,
     className,
-    dataTest
+    dataTest = 'dhis2-uicore-modalcontent'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
@@ -22,9 +22,6 @@ const ModalContent = _ref => {
   }, ["div.jsx-3719215021{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;overflow-y:auto;}"]));
 };
 exports.ModalContent = ModalContent;
-ModalContent.defaultProps = {
-  dataTest: 'dhis2-uicore-modalcontent'
-};
 ModalContent.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,

package/build/cjs/modal-title/modal-title.js

@@ -13,7 +13,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const ModalTitle = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modaltitle'
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("h1", {
     "data-test": dataTest,
@@ -24,9 +24,6 @@ const ModalTitle = _ref => {
   }, [`h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:${_uiConstants.colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0 0 ${_uiConstants.spacers.dp12};}`]));
 };
 exports.ModalTitle = ModalTitle;
-ModalTitle.defaultProps = {
-  dataTest: 'dhis2-uicore-modaltitle'
-};
 ModalTitle.propTypes = {
   children: _propTypes.default.node,
   dataTest: _propTypes.default.string

package/build/es/modal/modal.js

@@ -18,12 +18,12 @@ export const Modal = _ref => {
   let {
     children,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-modal',
     hide,
     fluid,
     large,
     onClose,
-    position,
+    position = 'top',
     small
   } = _ref;
   const layerStyles = resolveLayerStyles(hide);
@@ -67,10 +67,6 @@ export const Modal = _ref => {
     dynamic: [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]
   }, [`aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ${2 * spacersNum.dp64}px);max-height:calc(100vh - ${2 * spacersNum.dp64}px);}`, "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}", `div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ${2 * spacersNum.dp64}px);max-height:calc(100vh - ${2 * spacersNum.dp64}px);}`]));
 };
-Modal.defaultProps = {
-  dataTest: 'dhis2-uicore-modal',
-  position: 'top'
-};
 Modal.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

package/build/es/modal/modal.prod.stories.js

@@ -2,7 +2,11 @@ import _JSXStyle from "styled-jsx/style";
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Button, ButtonStrip } from '@dhis2-ui/button';
+import { Center as CenteredContent } from '@dhis2-ui/center';
+import { InputField } from '@dhis2-ui/input';
+import { CircularLoader } from '@dhis2-ui/loader';
 import { FlyoutMenu, MenuDivider, MenuItem, MenuSectionHeader } from '@dhis2-ui/menu';
+import { NoticeBox } from '@dhis2-ui/notice-box';
 import { SingleSelect, SingleSelectOption } from '@dhis2-ui/select';
 import { Tooltip } from '@dhis2-ui/tooltip';
 import React, { useEffect, useState } from 'react';
@@ -318,6 +322,40 @@ LargeWithSelectComponent.args = {
   large: true
 };
 LargeWithSelectComponent.storyName = 'Large: with Select component';
+export const ModalWithErrorState = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "Update profile"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(InputField, {
+  label: "First name",
+  required: true,
+  error: true,
+  validationText: "First name can't be empty.",
+  inputWidth: "320px"
+}), /*#__PURE__*/React.createElement(InputField, {
+  label: "Last name",
+  value: "Olefeme",
+  required: true,
+  inputWidth: "320px"
+}), /*#__PURE__*/React.createElement(Box, {
+  marginTop: "16px"
+}, /*#__PURE__*/React.createElement(NoticeBox, {
+  error: true
+}, "There is a problem with this form."))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+  end: true
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+  disabled: true,
+  primary: true
+}, "Save changes"))));
+ModalWithErrorState.storyName = 'With error state';
+export const ModalWithLoadingState = args => /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "Modal title"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(Box, {
+  minHeight: "240px"
+}, /*#__PURE__*/React.createElement(CenteredContent, null, /*#__PURE__*/React.createElement(CircularLoader, null)))), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, {
+  end: true
+}, /*#__PURE__*/React.createElement(Button, {
+  secondary: true
+}, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+  primary: true
+}, "Save changes"))));
+ModalWithLoadingState.storyName = 'With loading state';
 export const LargeModalWithMoreNestedModals = args => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, args, /*#__PURE__*/React.createElement(ModalTitle, null, "Select opens on top of the Modal - Level 1"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement(SingleSelect, null, /*#__PURE__*/React.createElement(SingleSelectOption, {
   key: "1",
   value: "1",

package/build/es/modal-actions/modal-actions.js

@@ -5,7 +5,7 @@ import React from 'react';
 export const ModalActions = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modalactions'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
@@ -15,9 +15,6 @@ export const ModalActions = _ref => {
     dynamic: [spacers.dp16]
   }, [`div.__jsx-style-dynamic-selector{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:${spacers.dp16} 0 0;}`]));
 };
-ModalActions.defaultProps = {
-  dataTest: 'dhis2-uicore-modalactions'
-};
 ModalActions.propTypes = {
   children: PropTypes.node,
   dataTest: PropTypes.string

package/build/es/modal-content/modal-content.js

@@ -5,7 +5,7 @@ export const ModalContent = _ref => {
   let {
     children,
     className,
-    dataTest
+    dataTest = 'dhis2-uicore-modalcontent'
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
@@ -14,9 +14,6 @@ export const ModalContent = _ref => {
     id: "3719215021"
   }, ["div.jsx-3719215021{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;overflow-y:auto;}"]));
 };
-ModalContent.defaultProps = {
-  dataTest: 'dhis2-uicore-modalcontent'
-};
 ModalContent.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

package/build/es/modal-title/modal-title.js

@@ -6,7 +6,7 @@ import React from 'react';
 export const ModalTitle = _ref => {
   let {
     children,
-    dataTest
+    dataTest = 'dhis2-uicore-modaltitle'
   } = _ref;
   return /*#__PURE__*/React.createElement("h1", {
     "data-test": dataTest,
@@ -16,9 +16,6 @@ export const ModalTitle = _ref => {
     dynamic: [colors.grey900, spacers.dp12]
   }, [`h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:${colors.grey900};font-size:20px;font-weight:500;line-height:24px;margin:0 0 ${spacers.dp12};}`]));
 };
-ModalTitle.defaultProps = {
-  dataTest: 'dhis2-uicore-modaltitle'
-};
 ModalTitle.propTypes = {
   children: PropTypes.node,
   dataTest: PropTypes.string

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "9.11.3",
+    "version": "9.11.5",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -33,12 +33,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.11.3",
-        "@dhis2-ui/center": "9.11.3",
-        "@dhis2-ui/layer": "9.11.3",
-        "@dhis2-ui/portal": "9.11.3",
-        "@dhis2/ui-constants": "9.11.3",
-        "@dhis2/ui-icons": "9.11.3",
+        "@dhis2-ui/card": "9.11.5",
+        "@dhis2-ui/center": "9.11.5",
+        "@dhis2-ui/layer": "9.11.5",
+        "@dhis2-ui/portal": "9.11.5",
+        "@dhis2/ui-constants": "9.11.5",
+        "@dhis2/ui-icons": "9.11.5",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },