@dhis2-ui/modal 7.10.2 → 7.11.0

package/build/cjs/modal/close-button.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseButton = void 0;
+
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+
+var _uiConstants = require("@dhis2/ui-constants");
+
+var _uiIcons = require("@dhis2/ui-icons");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const createClickHandler = onClick => event => {
+  onClick({}, event);
+};
+
+const CloseButton = ({
+  onClick
+}) => /*#__PURE__*/_react.default.createElement("button", {
+  "data-test": "dhis2-modal-close-button",
+  onClick: createClickHandler(onClick),
+  className: _style.default.dynamic([["3281559950", [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]]])
+}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross16, null), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "3281559950",
+  dynamic: [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]
+}, [`button.__jsx-style-dynamic-selector{background-color:transparent;color:${_uiConstants.colors.grey700};border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;right:0px;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};color:${_uiConstants.colors.grey900};}`, `button.__jsx-style-dynamic-selector:focus{background-color:${_uiConstants.colors.grey200};outline:3px solid ${_uiConstants.theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey300};}`]));
+
+exports.CloseButton = CloseButton;
+CloseButton.propTypes = {
+  onClick: _propTypes.default.func
+};

package/build/cjs/modal/features/can_be_closed/index.js

@@ -18,4 +18,10 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 });
 (0, _steps.When)('the Screencover is clicked below the modal', () => {
   cy.get('[data-test="dhis2-uicore-layer"]').click('bottom');
+});
+(0, _steps.Given)('a Modal with onClose handler is rendered', () => {
+  cy.visitStory('Modal', 'With onClose');
+});
+(0, _steps.When)('the close button is clicked', () => {
+  cy.get('[data-test="dhis2-modal-close-button"]').click();
 });

package/build/cjs/modal/features/can_be_closed.feature

@@ -1,4 +1,4 @@
-Feature: The Modal has an onClose api that triggers when clicking anywhere outside the modal
+Feature: The Modal has an onClose api that triggers when clicking anywhere outside the modal or on the close button
 
     Scenario: The user clicks on the Screencover above a top-aligned modal
         Given a top-aligned Modal with onClose handler is rendered
@@ -8,4 +8,9 @@ Feature: The Modal has an onClose api that triggers when clicking anywhere outsi
     Scenario: The user clicks on the Screencover below a bottom-aligned modal
         Given a bottom-aligned Modal with onClose handler is rendered
         When the Screencover is clicked below the modal
-        Then the onClose handler is called
+        Then the onClose handler is called
+
+    Scenario: The user clicks on the close button
+        Given a Modal with onClose handler is rendered
+        When the close button is clicked
+        Then the onClose handler is called

package/build/cjs/modal/modal.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _closeButton = require("./close-button.js");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const resolveLayerStyles = hide => ({
@@ -58,7 +60,9 @@ const Modal = ({
       large,
       fluid
     }) || "")
-  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_card.Card, null, onClose && /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
+    onClick: onClose
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["1701687214", [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]]])
   }, children))), layerStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1701687214",
@@ -81,6 +85,6 @@ Modal.propTypes = {
   position: _uiConstants.sharedPropTypes.insideAlignmentPropType,
   small: _uiConstants.sharedPropTypes.sizePropType,
 
-  /** Callback used when screen cover is clicked */
+  /** Callback used when the Modal closes */
   onClose: _propTypes.default.func
 };

package/build/es/modal/close-button.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, theme } from '@dhis2/ui-constants';
+import { IconCross16 } from '@dhis2/ui-icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const createClickHandler = onClick => event => {
+  onClick({}, event);
+};
+
+export const CloseButton = ({
+  onClick
+}) => /*#__PURE__*/React.createElement("button", {
+  "data-test": "dhis2-modal-close-button",
+  onClick: createClickHandler(onClick),
+  className: _JSXStyle.dynamic([["3281559950", [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]]])
+}, /*#__PURE__*/React.createElement(IconCross16, null), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "3281559950",
+  dynamic: [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]
+}, [`button.__jsx-style-dynamic-selector{background-color:transparent;color:${colors.grey700};border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;right:0px;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};color:${colors.grey900};}`, `button.__jsx-style-dynamic-selector:focus{background-color:${colors.grey200};outline:3px solid ${theme.focus};}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `button.__jsx-style-dynamic-selector:active{background-color:${colors.grey300};}`]));
+CloseButton.propTypes = {
+  onClick: PropTypes.func
+};

package/build/es/modal/features/can_be_closed/index.js

@@ -15,4 +15,10 @@ Given('a bottom-aligned Modal with onClose handler is rendered', () => {
 });
 When('the Screencover is clicked below the modal', () => {
   cy.get('[data-test="dhis2-uicore-layer"]').click('bottom');
+});
+Given('a Modal with onClose handler is rendered', () => {
+  cy.visitStory('Modal', 'With onClose');
+});
+When('the close button is clicked', () => {
+  cy.get('[data-test="dhis2-modal-close-button"]').click();
 });

package/build/es/modal/features/can_be_closed.feature

@@ -1,4 +1,4 @@
-Feature: The Modal has an onClose api that triggers when clicking anywhere outside the modal
+Feature: The Modal has an onClose api that triggers when clicking anywhere outside the modal or on the close button
 
     Scenario: The user clicks on the Screencover above a top-aligned modal
         Given a top-aligned Modal with onClose handler is rendered
@@ -8,4 +8,9 @@ Feature: The Modal has an onClose api that triggers when clicking anywhere outsi
     Scenario: The user clicks on the Screencover below a bottom-aligned modal
         Given a bottom-aligned Modal with onClose handler is rendered
         When the Screencover is clicked below the modal
-        Then the onClose handler is called
+        Then the onClose handler is called
+
+    Scenario: The user clicks on the close button
+        Given a Modal with onClose handler is rendered
+        When the close button is clicked
+        Then the onClose handler is called

package/build/es/modal/modal.js

@@ -6,6 +6,7 @@ import { spacers, spacersNum, sharedPropTypes } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { CloseButton } from './close-button.js';
 
 const resolveLayerStyles = hide => ({
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -42,7 +43,9 @@ export const Modal = ({
       large,
       fluid
     }) || "")
-  }, /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Card, null, onClose && /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onClose
+  }), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["1701687214", [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]]])
   }, children))), layerStyles.styles), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1701687214",
@@ -63,6 +66,6 @@ Modal.propTypes = {
   position: sharedPropTypes.insideAlignmentPropType,
   small: sharedPropTypes.sizePropType,
 
-  /** Callback used when screen cover is clicked */
+  /** Callback used when the Modal closes */
   onClose: PropTypes.func
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/modal",
-    "version": "7.10.2",
+    "version": "7.11.0",
     "description": "UI Modal",
     "repository": {
         "type": "git",
@@ -32,11 +32,12 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/card": "7.10.2",
-        "@dhis2-ui/center": "7.10.2",
-        "@dhis2-ui/layer": "7.10.2",
-        "@dhis2-ui/portal": "7.10.2",
-        "@dhis2/ui-constants": "7.10.2",
+        "@dhis2-ui/card": "7.11.0",
+        "@dhis2-ui/center": "7.11.0",
+        "@dhis2-ui/layer": "7.11.0",
+        "@dhis2-ui/portal": "7.11.0",
+        "@dhis2/ui-constants": "7.11.0",
+        "@dhis2/ui-icons": "7.11.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },