@pingux/astro 2.0.3-alpha.1 → 2.0.3-alpha.3

package/lib/cjs/components/Modal/Modal.js

@@ -22,12 +22,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _hooks = require("../../hooks");
+var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
 var _Box = _interopRequireDefault(require("../Box"));
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Text = _interopRequireDefault(require("../Text"));
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -49,6 +51,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
     isOpen = props.isOpen,
     role = props.role,
+    size = props.size,
     title = props.title,
     onClose = props.onClose,
     shouldCloseOnInteractOutside = props.shouldCloseOnInteractOutside,
@@ -88,6 +91,8 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useDialog = (0, _reactAria.useDialog)(contentProps, modalRef),
     dialogProps = _useDialog.dialogProps,
     titleProps = _useDialog.titleProps;
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])({}, "is-".concat(size || 'custom'), size)),
+    classNames = _useStatusClasses.classNames;
   return (0, _react2.jsx)(_reactAria.OverlayContainer, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     variant: "modal.container"
   }, others, containerProps), (0, _react2.jsx)(_reactAria.FocusScope, {
@@ -95,14 +100,14 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     restoreFocus: true,
     autoFocus: hasAutoFocus
   }, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "modal.content"
+    variant: "modal.content",
+    className: classNames
   }, propsContentProps, overlayProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
-    size: 22,
     variant: "modalCloseButton",
     onPress: onClose
   }, (0, _react2.jsx)(_Icon["default"], {
@@ -130,6 +135,8 @@ Modal.propTypes = {
   isOpen: _propTypes["default"].bool,
   /** The accessibility role for the dialog. */
   role: _propTypes["default"].oneOf(['dialog', 'alertdialog']),
+  /** Sets the size of the modal container. */
+  size: _propTypes["default"].oneOf(_modalSizes.modalSizes),
   /** The title for the modal. */
   title: _propTypes["default"].node,
   /**

package/lib/cjs/components/Modal/Modal.stories.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireDefault(require("react"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _modalSizes = require("../../utils/devUtils/constants/modalSizes");
 var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Modal',
@@ -27,6 +28,12 @@ var _default = {
         type: 'text'
       }
     },
+    size: {
+      control: {
+        type: 'select',
+        options: _modalSizes.modalSizes
+      }
+    },
     hasCloseButton: {
       defaultValue: true
     },

package/lib/cjs/components/Modal/Modal.styles.js

@@ -43,7 +43,27 @@ var content = {
   pl: 'lg',
   maxWidth: '400px',
   boxShadow: 'standard',
-  borderRadius: 3
+  borderRadius: 3,
+  '&.is-extra-small': {
+    maxWidth: 'none',
+    width: 'container.xs'
+  },
+  '&.is-small': {
+    maxWidth: 'none',
+    width: 'container.sm'
+  },
+  '&.is-medium': {
+    maxWidth: 'none',
+    width: 'container.md'
+  },
+  '&.is-large': {
+    maxWidth: 'none',
+    width: 'container.lg'
+  },
+  '&.is-full': {
+    maxWidth: 'none',
+    width: 'container.full'
+  }
 };
 var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
   mr: 'sm',
@@ -52,7 +72,9 @@ var title = _objectSpread(_objectSpread({}, _Text.text.title), {}, {
 var modalCloseButton = {
   position: 'absolute',
   top: 14,
-  right: 10
+  right: 10,
+  width: '22px',
+  height: '22px'
 };
 exports.modalCloseButton = modalCloseButton;
 var _default = {

package/lib/cjs/components/Modal/tests/Modal.unit.test.js

@@ -181,4 +181,39 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   });
   var button = _testWrapper.screen.queryByRole('button');
   expect(button).toHaveFocus();
+});
+test('should render sizes correctly with passed size prop', function () {
+  var _getComponent2 = getComponent({
+      size: 'extra-small'
+    }),
+    xsUnmount = _getComponent2.unmount;
+  var xsModal = _testWrapper.screen.getByRole('dialog');
+  expect(xsModal).toHaveClass('is-extra-small');
+  xsUnmount();
+  var _getComponent3 = getComponent({
+      size: 'small'
+    }),
+    sUnmount = _getComponent3.unmount;
+  var sModal = _testWrapper.screen.getByRole('dialog');
+  expect(sModal).toHaveClass('is-small');
+  sUnmount();
+  var _getComponent4 = getComponent({
+      size: 'medium'
+    }),
+    mUnmount = _getComponent4.unmount;
+  var mModal = _testWrapper.screen.getByRole('dialog');
+  expect(mModal).toHaveClass('is-medium');
+  mUnmount();
+  var _getComponent5 = getComponent({
+      size: 'large'
+    }),
+    lUnmount = _getComponent5.unmount;
+  var lModal = _testWrapper.screen.getByRole('dialog');
+  expect(lModal).toHaveClass('is-large');
+  lUnmount();
+  getComponent({
+    size: 'full'
+  });
+  var fModal = _testWrapper.screen.getByRole('dialog');
+  expect(fModal).toHaveClass('is-full');
 });

package/lib/cjs/utils/devUtils/constants/modalSizes.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modalSizes = void 0;
+var modalSizes = ['extra-small', 'small', 'medium', 'large', 'full'];
+exports.modalSizes = modalSizes;

package/lib/components/Modal/Modal.js

@@ -9,13 +9,15 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
+var _excluded = ["className", "closeButton", "hasAutoFocus", "hasCloseButton", "id", "isClosedOnBlur", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "role", "size", "title", "onClose", "shouldCloseOnInteractOutside", "children", "contentProps", "containerProps"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { FocusScope, OverlayContainer, useDialog, useModal, useOverlay, usePreventScroll } from 'react-aria';
 import CloseIcon from 'mdi-react/CloseIcon';
 import PropTypes from 'prop-types';
+import { useStatusClasses } from '../../hooks';
+import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import Box from '../Box';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
@@ -38,6 +40,7 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     isKeyboardDismissDisabled = props.isKeyboardDismissDisabled,
     isOpen = props.isOpen,
     role = props.role,
+    size = props.size,
     title = props.title,
     onClose = props.onClose,
     shouldCloseOnInteractOutside = props.shouldCloseOnInteractOutside,
@@ -77,6 +80,8 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useDialog = useDialog(contentProps, modalRef),
     dialogProps = _useDialog.dialogProps,
     titleProps = _useDialog.titleProps;
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(size || 'custom'), size)),
+    classNames = _useStatusClasses.classNames;
   return ___EmotionJSX(OverlayContainer, null, ___EmotionJSX(Box, _extends({
     variant: "modal.container"
   }, others, containerProps), ___EmotionJSX(FocusScope, {
@@ -84,14 +89,14 @@ var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
     restoreFocus: true,
     autoFocus: hasAutoFocus
   }, ___EmotionJSX(Box, _extends({
-    variant: "modal.content"
+    variant: "modal.content",
+    className: classNames
   }, propsContentProps, overlayProps, dialogProps, modalProps, {
     ref: modalRef,
     "aria-modal": true
   }), hasCloseButton && (closeButton !== null && closeButton !== void 0 ? closeButton : ___EmotionJSX(IconButton, {
     "aria-label": "Close modal window",
     "data-id": "icon-button__close-modal-window",
-    size: 22,
     variant: "modalCloseButton",
     onPress: onClose
   }, ___EmotionJSX(Icon, {
@@ -119,6 +124,8 @@ Modal.propTypes = {
   isOpen: PropTypes.bool,
   /** The accessibility role for the dialog. */
   role: PropTypes.oneOf(['dialog', 'alertdialog']),
+  /** Sets the size of the modal container. */
+  size: PropTypes.oneOf(modalSizes),
   /** The title for the modal. */
   title: PropTypes.node,
   /**

package/lib/components/Modal/Modal.stories.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { useModalState } from '../../hooks';
 import { Box, Button, Modal, OverlayProvider, Text } from '../../index';
+import { modalSizes } from '../../utils/devUtils/constants/modalSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Modal',
@@ -19,6 +20,12 @@ export default {
         type: 'text'
       }
     },
+    size: {
+      control: {
+        type: 'select',
+        options: modalSizes
+      }
+    },
     hasCloseButton: {
       defaultValue: true
     },

package/lib/components/Modal/Modal.styles.js

@@ -36,7 +36,27 @@ var content = {
   pl: 'lg',
   maxWidth: '400px',
   boxShadow: 'standard',
-  borderRadius: 3
+  borderRadius: 3,
+  '&.is-extra-small': {
+    maxWidth: 'none',
+    width: 'container.xs'
+  },
+  '&.is-small': {
+    maxWidth: 'none',
+    width: 'container.sm'
+  },
+  '&.is-medium': {
+    maxWidth: 'none',
+    width: 'container.md'
+  },
+  '&.is-large': {
+    maxWidth: 'none',
+    width: 'container.lg'
+  },
+  '&.is-full': {
+    maxWidth: 'none',
+    width: 'container.full'
+  }
 };
 var title = _objectSpread(_objectSpread({}, text.title), {}, {
   mr: 'sm',
@@ -45,7 +65,9 @@ var title = _objectSpread(_objectSpread({}, text.title), {}, {
 export var modalCloseButton = {
   position: 'absolute',
   top: 14,
-  right: 10
+  right: 10,
+  width: '22px',
+  height: '22px'
 };
 export default {
   closeIcon: closeIcon,

package/lib/components/Modal/tests/Modal.unit.test.js

@@ -179,4 +179,39 @@ test('should auto focus the first tabbable element if "hasAutoFocus" is true', f
   });
   var button = screen.queryByRole('button');
   expect(button).toHaveFocus();
+});
+test('should render sizes correctly with passed size prop', function () {
+  var _getComponent2 = getComponent({
+      size: 'extra-small'
+    }),
+    xsUnmount = _getComponent2.unmount;
+  var xsModal = screen.getByRole('dialog');
+  expect(xsModal).toHaveClass('is-extra-small');
+  xsUnmount();
+  var _getComponent3 = getComponent({
+      size: 'small'
+    }),
+    sUnmount = _getComponent3.unmount;
+  var sModal = screen.getByRole('dialog');
+  expect(sModal).toHaveClass('is-small');
+  sUnmount();
+  var _getComponent4 = getComponent({
+      size: 'medium'
+    }),
+    mUnmount = _getComponent4.unmount;
+  var mModal = screen.getByRole('dialog');
+  expect(mModal).toHaveClass('is-medium');
+  mUnmount();
+  var _getComponent5 = getComponent({
+      size: 'large'
+    }),
+    lUnmount = _getComponent5.unmount;
+  var lModal = screen.getByRole('dialog');
+  expect(lModal).toHaveClass('is-large');
+  lUnmount();
+  getComponent({
+    size: 'full'
+  });
+  var fModal = screen.getByRole('dialog');
+  expect(fModal).toHaveClass('is-full');
 });

package/lib/utils/devUtils/constants/modalSizes.js

@@ -0,0 +1 @@
+export var modalSizes = ['extra-small', 'small', 'medium', 'large', 'full'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.0.3-alpha.1",
+  "version": "2.0.3-alpha.3",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",