Merge pull request #21 from Upmostly/v1.2

v1.2

Author: jcrowson

.npmignore

@@ -4,3 +4,21 @@ examples
 .babelrc
 .gitignore
 webpack.config.js
+
+#tests
+test
+coverage
+
+#build tools
+.travis.yml
+.jenkins.yml
+.codeclimate.yml
+
+#linters
+.jscsrc
+.jshintrc
+.eslintrc*
+
+#editor settings
+.idea
+.editorconfig

README.md

@@ -238,9 +238,10 @@ Modali can be easily customized by passing in an object of key/value pairs to th
 | --- | --- | --- |
 | `title` | string | The text displayed in the upper left corner |
 | `message` | string | The text displayed in the body of the modal |
-| `buttons` | array | Displays components passed in the footer of the modal |
+| `buttons` | array | Displays whatever is passed in in the footer |
 | `closeButton` | true | Controls the visibility of the close button |
 | `animated` | false | Fades in the modal when it mounts to the DOM |
+| `centered` | false | Positions the modal in the center of the screen |
 | `large` | false | Changes the size of the modal to be 800px wide |
 | `overlayClose` | true | Disables clicking the modal overlay to hide it |
 | `keyboardClose` | true | Disables the ESC key hiding the modal |
@@ -251,7 +252,7 @@ Example
 const [exampleModal, toggleExampleModal] = useModali({
   animated: true,
   large: true,
-  closeButton: false
+  closeButton: false,
 });
 
 ```
@@ -267,7 +268,7 @@ function handleModalOnHide() {
 const [exampleModal, toggleExampleModal] = useModali({
   onHide: handleModalOnHide,
   large: true,
-  closeButton: false
+  closeButton: false,
 });
 
 ```

examples/src/GithubRibbon.css

@@ -0,0 +1,33 @@
+.github-corner:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+    0 %,100% {
+        transform:rotate(0)
+    }
+    20%,60%{
+        transform:rotate(-25deg)
+    }
+    40%,80%{
+        transform:rotate(10deg)
+    }
+}
+
+@media (max-width:500px) {
+    .github-corner:hover .octo-arm{
+        animation:none
+    }
+    .github-corner .octo-arm{
+        animation:octocat-wave 560ms ease-in-out
+    }
+}
+
+svg {
+    fill:#FD6C6C;
+    color:#fff;
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+}

examples/src/GithubRibbon.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import './GithubRibbon.css';
+
+const GithubRibbon = () => (
+  <React.Fragment>
+    <a href="https://github.com/Upmostly/modali" target="_blank" rel="noopener noreferrer" className="github-corner" aria-label="View source on GitHub">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        style={{
+          fill: '#FD6C6C', color: '#fff', position: 'absolute', top: 0, border: 0, right: 0,
+        }}
+        aria-hidden="true"
+      >
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          style={{ transformOrigin: '130px 106px' }}
+          className="octo-arm"
+        />
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+          className="octo-body"
+        />
+      </svg>
+    </a>
+  </React.Fragment>
+);
+
+export default GithubRibbon;

examples/src/OptionsModalsExample.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
-import { options } from "./snippets/snippets";
+import { options } from './snippets/snippets';
 
 import Modali, { useModali } from '../../src';
-import Button from "./Button";
+import Button from './Button';
 
 const OptionsModalsExample = () => {
   const [firstModal, toggleFirstModal] = useModali({
     animated: true,
     large: true,
     closeButton: false,
-    onHide: () => alert(`I'm now hidden`),
+    onHide: () => alert('I\'m now hidden'),
   });
   return (
     <div className="row mt-5">
@@ -26,18 +26,18 @@ const OptionsModalsExample = () => {
         </Button>
       </div>
       <div className="col-12">
-        <SyntaxHighlighter language='jsx' style={okaidia}>{options}</SyntaxHighlighter>
+        <SyntaxHighlighter language="jsx" style={okaidia}>{options}</SyntaxHighlighter>
       </div>
       <Modali.Modal {...firstModal}>
         <div className="row my-3">
           <div className="col-12 d-flex justify-content-center">
             <p className="m-0">
-              I'm a larger, animated modal, without a close button 🤘
+              I'm a larger, animated modal that calls an alert when I close! 🤘
             </p>
           </div>
         </div>
       </Modali.Modal>
     </div>
-  )
+  );
 };
 export default OptionsModalsExample;

examples/src/index.js

@@ -8,6 +8,7 @@ import Button from './Button';
 import MultipleModalsExample from './MultipleModalsExample';
 import OptionsModalsExample from './OptionsModalsExample';
 import CompleteExample from './CompleteExample';
+import GithubRibbon from './GithubRibbon';
 
 const App = () => {
   const [exampleModal, toggleExampleModal] = useModali({
@@ -28,24 +29,27 @@ const App = () => {
     ],
   });
   return (
-    <div className="container my-5">
-      <div className="row mt-5">
-        <div className="col-12 d-flex justify-content-center">
-          <img src="https://upmostly.com/wp-content/uploads/modali-logo.png" alt="modali logo" style={{ height: '250px' }} />
-        </div>
-        <div className="col-12 d-flex justify-content-center mt-5">
-          <Button handleClick={toggleExampleModal}>
-            Click me to open a Modal!
-          </Button>
-          <Modali.Modal {...exampleModal} />
+    <React.Fragment>
+      <GithubRibbon />
+      <div className="container my-5">
+        <div className="row mt-5">
+          <div className="col-12 d-flex justify-content-center">
+            <img src="https://upmostly.com/wp-content/uploads/modali-logo.png" alt="modali logo" style={{ height: '250px' }} />
+          </div>
+          <div className="col-12 d-flex justify-content-center mt-5">
+            <Button handleClick={toggleExampleModal}>
+              Click me to open a Modal!
+            </Button>
+            <Modali.Modal {...exampleModal} />
+          </div>
         </div>
+        <Installation />
+        <BasicExample />
+        <CompleteExample />
+        <MultipleModalsExample />
+        <OptionsModalsExample />
       </div>
-      <Installation />
-      <BasicExample />
-      <CompleteExample />
-      <MultipleModalsExample />
-      <OptionsModalsExample />
-    </div>
+    </React.Fragment>
   );
 };
 

examples/src/snippets/snippets.js

@@ -1,76 +1,76 @@
-export const installation = `npm install --save modali`;
-export const usage = `import Modali, { useModali } from 'modali';`;
-export const basicExample = 'import React from \'react\';\n' +
-  'import Modali, { useModali } from \'modali\';\n' +
-  '\n' +
-  'const App = () => {\n' +
-  '  const [exampleModal, toggleExampleModal] = useModali();\n' +
-  '\n' +
-  '  return (\n' +
-  '    <div className="app">\n' +
-  '      <button onClick={toggleExampleModal}>\n' +
-  '        Click me to open a basic modal\n' +
-  '      </button>\n' +
-  '      <Modali.Modal {...exampleModal}>\n' +
-  '        Hi, I\'m a Modali!\n' +
-  '      </Modali.Modal>\n' +
-  '    </div>\n' +
-  '  );\n' +
-  '};\n' +
-  '\n' +
-  'export default App;';
+export const installation = 'npm install --save modali';
+export const usage = 'import Modali, { useModali } from \'modali\';';
+export const basicExample = 'import React from \'react\';\n'
+  + 'import Modali, { useModali } from \'modali\';\n'
+  + '\n'
+  + 'const App = () => {\n'
+  + '  const [exampleModal, toggleExampleModal] = useModali();\n'
+  + '\n'
+  + '  return (\n'
+  + '    <div className="app">\n'
+  + '      <button onClick={toggleExampleModal}>\n'
+  + '        Click me to open a basic modal\n'
+  + '      </button>\n'
+  + '      <Modali.Modal {...exampleModal}>\n'
+  + '        Hi, I\'m a Modali!\n'
+  + '      </Modali.Modal>\n'
+  + '    </div>\n'
+  + '  );\n'
+  + '};\n'
+  + '\n'
+  + 'export default App;';
 
-export const completeExampleSnippet = 'import React from \'react\';\n' +
-  'import Modali, { useModali } from \'modali\';\n' +
-  '\n' +
-  'const [completeModal, toggleCompleteModal] = useModali({\n' +
-  '  animated: true,\n' +
-  '  title: \'Are you sure?\',\n' +
-  '  message: \'Deleting this user will be permanent.\',\n' +
-  '  buttons: [\n' +
-  '    <Modali.Button\n' +
-  '      label="Cancel"\n' +
-  '      isStyleCancel\n' +
-  '      onClick={() => toggleCompleteModal()}\n' +
-  '    />,\n' +
-  '    <Modali.Button\n' +
-  '      label="Delete"\n' +
-  '      isStyleDestructive\n' +
-  '      onClick={() => deleteUserWithId(123)}\n' +
-  '    />,\n' +
-  '  ],\n' +
-  '});';
+export const completeExampleSnippet = 'import React from \'react\';\n'
+  + 'import Modali, { useModali } from \'modali\';\n'
+  + '\n'
+  + 'const [completeModal, toggleCompleteModal] = useModali({\n'
+  + '  animated: true,\n'
+  + '  title: \'Are you sure?\',\n'
+  + '  message: \'Deleting this user will be permanent.\',\n'
+  + '  buttons: [\n'
+  + '    <Modali.Button\n'
+  + '      label="Cancel"\n'
+  + '      isStyleCancel\n'
+  + '      onClick={() => toggleCompleteModal()}\n'
+  + '    />,\n'
+  + '    <Modali.Button\n'
+  + '      label="Delete"\n'
+  + '      isStyleDestructive\n'
+  + '      onClick={() => deleteUserWithId(123)}\n'
+  + '    />,\n'
+  + '  ],\n'
+  + '});';
 
-export const multiple = 'import React from \'react\';\n' +
-  'import Modali, { useModali } from \'modali\';\n' +
-  '\n' +
-  'const App = () => {\n' +
-  '  const [firstModal, toggleFirstModal] = useModali();\n' +
-  '  const [secondModal, toggleSecondModal] = useModali();\n' +
-  '  \n' +
-  '  return (\n' +
-  '    <div className="app">\n' +
-  '      <button onClick={toggleFirstModal}>\n' +
-  '        Click me to open the first modal!\n' +
-  '      </button>\n' +
-  '      <button onClick={toggleSecondModal}>\n' +
-  '        Click me to open the second modal!\n' +
-  '      </button>\n' +
-  '      <Modali.Modal {...firstModal}>\n' +
-  '        Hi, I\'m the first Modali\n' +
-  '      </Modali.Modal>\n' +
-  '      <Modali.Modal {...secondModal}>\n' +
-  '        And I\'m the second Modali\n' +
-  '      </Modali.Modal>\n' +
-  '    </div>\n' +
-  '  );\n' +
-  '};\n' +
-  '\n' +
-  'export default App;';
+export const multiple = 'import React from \'react\';\n'
+  + 'import Modali, { useModali } from \'modali\';\n'
+  + '\n'
+  + 'const App = () => {\n'
+  + '  const [firstModal, toggleFirstModal] = useModali();\n'
+  + '  const [secondModal, toggleSecondModal] = useModali();\n'
+  + '  \n'
+  + '  return (\n'
+  + '    <div className="app">\n'
+  + '      <button onClick={toggleFirstModal}>\n'
+  + '        Click me to open the first modal!\n'
+  + '      </button>\n'
+  + '      <button onClick={toggleSecondModal}>\n'
+  + '        Click me to open the second modal!\n'
+  + '      </button>\n'
+  + '      <Modali.Modal {...firstModal}>\n'
+  + '        Hi, I\'m the first Modali\n'
+  + '      </Modali.Modal>\n'
+  + '      <Modali.Modal {...secondModal}>\n'
+  + '        And I\'m the second Modali\n'
+  + '      </Modali.Modal>\n'
+  + '    </div>\n'
+  + '  );\n'
+  + '};\n'
+  + '\n'
+  + 'export default App;';
 
-export const options = 'const [exampleModal, toggleExampleModal] = useModali({\n' +
-  '  animated: true,\n' +
-  '  large: true,\n' +
-  '  closeButton: false,\n' +
-  '  onHide: () => alert(`I\'m hidden`),\n' +
-  '});';
+export const options = 'const [exampleModal, toggleExampleModal] = useModali({\n'
+  + '  animated: true,\n'
+  + '  large: true,\n'
+  + '  closeButton: false,\n'
+  + '  onHide: () => alert(`I\'m hidden`),\n'
+  + '});';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "modali",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "A delightful modal dialog component for React, built from the ground up to support React Hooks.",
   "main": "dist/index.js",
   "license": "ISC",

src/index.js

@@ -86,6 +86,11 @@ const Modal = ({
     );
   }
 
+  const modaliWrapperClass = classNames({
+    'modali-wrapper': true,
+    'modali-wrapper-centered': options && options.centered,
+  });
+
   const modaliClass = classNames({
     modali: true,
     'modali-size-large': options && options.large,
@@ -96,7 +101,7 @@ const Modal = ({
   return isModalVisible ? ReactDOM.createPortal(
     <React.Fragment>
       <div className="modali-overlay" />
-      <div className="modali-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog" onClick={handleOverlayClicked}>
+      <div className={modaliWrapperClass} aria-modal aria-hidden tabIndex={-1} role="dialog" onClick={handleOverlayClicked}>
         <div className={modaliClass}>
           <div className="modali-content">
             {options !== undefined && options.closeButton === false ? null : (