@dhis2-ui/modal 9.11.3 → 9.11.4

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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "9.11.3",
+    "version": "9.11.4",
     "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.4",
+        "@dhis2-ui/center": "9.11.4",
+        "@dhis2-ui/layer": "9.11.4",
+        "@dhis2-ui/portal": "9.11.4",
+        "@dhis2/ui-constants": "9.11.4",
+        "@dhis2/ui-icons": "9.11.4",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },