Merge pull request #92 from wpmudev/new/modal

✨ new(react-modal): Create new component.

packages/core/lib/core.js

@@ -7,6 +7,7 @@ import {
 } from "@wpmudev/react-box";
 import { Input } from "@wpmudev/react-input";
 import { Button } from "@wpmudev/react-button";
+import { Modal } from "@wpmudev/react-modal";
 import { ButtonIcon } from "@wpmudev/react-button-icon";
 import { Post } from "@wpmudev/react-post";
 import { Notifications } from "@wpmudev/react-notifications";
@@ -26,6 +27,7 @@ export {
 	BoxFooter,
 	Input,
 	Button,
+	Modal,
 	ButtonIcon,
 	Post,
 	Notifications,

packages/react-modal/README.md

@@ -0,0 +1,53 @@
+[![License: GPLv3](https://img.shields.io/badge/License-GPL%20v3-blue.svg?color=green)](http://www.gnu.org/licenses/gpl-3.0)
+[![npm](https://img.shields.io/npm/v/@wpmudev/react-button)](https://www.npmjs.com/package/@wpmudev/react-button)
+![npm peer dependency version](https://img.shields.io/npm/dependency-version/@wpmudev/react-button/peer/react)
+
+# React Modal
+[React Modal](https://wpmudev.github.io/shared-ui-react/?path=/story/containers-modal--simple) is a wrapper for modals that follows the structure and classes standard of WPMU Dev's Shared UI. It's built on top of the fully accessible [react-aria-modal](https://www.npmjs.com/package/@justfixnyc/react-aria-modal) that follows [WAI-ARIA Authoring Practices](http://www.w3.org/TR/wai-aria-practices/#dialog_modal).
+
+This modal relies on the styling provided by WPMU Dev's [Shared UI](https://github.com/wpmudev/shared-ui). The relevant styles must be included and the modal must be rendered within a `<div>` with the class `.sui-{version}` for the styles to take effect.
+
+## Installation
+
+```
+npm i @wpmudev/react-modal --save-dev
+```
+
+## Usage
+
+### Javascript Instantiation
+
+```js
+import React from 'react';
+import {
+  Modal
+} from '@wpmudev/react-modal';
+
+const modalContent = () => <p>No, I am your father</p>;
+
+const MyApp = () => (
+    <Modal
+        dialogId="le-dialog-id"
+		modalContent={ modalContent }
+		titleText="Accessible title"
+	/>
+);
+```
+
+### Props
+
+Prop Name | Type | Description
+--- | --- | ---
+dialogID* | String | ID attribute of the dialog.
+initialFocus* | String | String for `querySelector` to get the element that should be focused when the modal opens.
+titleId | String | The id of the element that should be used as the modal's accessible title. This value is passed to the modal's aria-labelledby attribute.
+titleText | String | A string to use as the modal's accessible title. This value is passed to the modal's aria-label attribute.
+modalContent | Object or Function | Renders the content of the modal. `Object` for slider modals. `Function` for simple modals. More details on the showcase.
+triggerContent | Function | Optional function to render the element that triggers the opening of the modal.
+size | String | Modal's size. `sm`|`md`|`lg`|`xl`.
+renderToNode | HTMLElement or String | Value to be passed to the AriaModal's `renderTo` function. Controls where the modal is rendered into.
+firstSlide | String | For slider modals only. The `key` of the `modalContent` object that holds the first slide.
+
+Plus everything from [aria-modal-react](https://www.npmjs.com/package/@justfixnyc/react-aria-modal), except `includeDefaultStyles` which is set to `false`.
+
+You must use either `titleId` or `titleText`, but not both.

packages/react-modal/__tests__/react-modal.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const reactModal = require('..');
+
+describe('react-modal', () => {
+    it('needs tests');
+});

packages/react-modal/dist/react-modal.cjs.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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 _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 _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;
+}
+
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["children"]);
+
+  return /*#__PURE__*/React__default['default'].createElement("div", _extends({
+    className: "sui-modal"
+  }, props), children);
+};
+
+exports.Modal = Modal;

packages/react-modal/dist/react-modal.esm.js

@@ -0,0 +1,66 @@
+import React from 'react';
+
+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 _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 _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;
+}
+
+var Modal = function Modal(_ref) {
+  var children = _ref.children,
+      props = _objectWithoutProperties(_ref, ["children"]);
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: "sui-modal"
+  }, props), children);
+};
+
+export { Modal };