@density/ui-modal - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/index.js

@@ -0,1 +1,2 @@
+'use strict';
 
@@ -7,6 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require("react");
+var _react = require('react');
 
 var React = _interopRequireWildcard(_react);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -16,17 +23,24 @@
   var children = _ref.children,
-      onClose = _ref.onClose,
-      onClickBackdrop = _ref.onClickBackdrop;
+      onClickBackdrop = _ref.onClickBackdrop,
+      onClick = _ref.onClick,
+      onClose = _ref.onClose;
 
   return React.createElement(
-    "div",
-    { className: "modal-backdrop", onClick: onClickBackdrop },
+    'div',
+    {
+      className: (0, _classnames2.default)('modal-backdrop', {}),
+      onClick: onClickBackdrop
+    },
     React.createElement(
-      "div",
-      { className: "modal", onClick: function onClick(e) {
+      'div',
+      {
+        className: 'modal',
+        onClick: function onClick(e) {
           return e.stopPropagation();
-        } },
+        }
+      },
       onClose ? React.createElement(
-        "div",
-        { className: "modal-close", onClick: onClose },
-        "\u2715"
+        'div',
+        { className: 'modal-close', onClick: onClose },
+        '\u2715'
       ) : null,
@@ -33,0 +47,0 @@ children

dist/story.js

@@ -109,3 +109,108 @@ 'use strict';
   );
+}).addWithInfo('With height that overflows the viewport', function () {
+  return _react2.default.createElement(
+    'div',
+    null,
+    'foo',
+    _react2.default.createElement(
+      _index2.default,
+      { onClickBackdrop: (0, _addonActions.action)('backdrop click') },
+      _react2.default.createElement(
+        _card2.default,
+        { type: 'modal' },
+        _react2.default.createElement(
+          _card.CardHeader,
+          null,
+          'Confirmation'
+        ),
+        _react2.default.createElement(
+          _card.CardBody,
+          null,
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement(
+            'p',
+            { style: { margin: 0 } },
+            'This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.'
+          ),
+          _react2.default.createElement('br', null),
+          _react2.default.createElement(
+            _index4.default,
+            null,
+            'Yes'
+          ),
+          _react2.default.createElement('br', null),
+          _react2.default.createElement(
+            _index4.default,
+            null,
+            'No'
+          )
+        )
+      )
+    )
+  );
 });
 

index.js

 import * as React from 'react';
+import classnames from 'classnames';
 
-export default function Modal({children, onClose, onClickBackdrop}) {
-  return <div className="modal-backdrop" onClick={onClickBackdrop}>
-    <div className="modal" onClick={e => e.stopPropagation()}>
+export default function Modal({
+  children,
+
+  onClickBackdrop,
+  onClick,
+  onClose,
+}) {
+  return <div
+    className={classnames('modal-backdrop', {})}
+    onClick={onClickBackdrop}
+  >
+    <div
+      className="modal"
+      onClick={e => e.stopPropagation()}
+    >
       {onClose ? <div className="modal-close" onClick={onClose}>&#10005;</div> : null}
@@ -7,0 +20,0 @@ {children}

package.json

 {
   "name": "@density/ui-modal",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Modal popup component",
@@ -13,3 +13,5 @@ "main": "dist/index.js",
   "license": "MIT",
-  "dependencies": {}
+  "dependencies": {
+    "classnames": "^2.2.5"
+  }
 }

story.js

@@ -50,1 +50,31 @@ import React from 'react';
   ))
+  .addWithInfo('With height that overflows the viewport', () => (
+    <div>
+      foo
+      <Modal onClickBackdrop={action('backdrop click')}>
+        <Card type="modal">
+          <CardHeader>Confirmation</CardHeader>
+          <CardBody>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <p style={{margin: 0}}>This token is for a thing. Lorem Ipsum is simply dummy text of the printing and typesetting industry and this is just here to make you believe in aliens.</p>
+            <br />
+            <Button>Yes</Button>
+            <br />
+            <Button>No</Button>
+          </CardBody>
+        </Card>
+      </Modal>
+    </div>
+  ))

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17860

increased by91.47%

Number of package files

12

increased by9.09%

Lines of code

373

increased by72.69%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedclassnames@^2.2.5

• + Addedclassnames@2.5.1(transitive)