Move documentation site to GitBook

This moves our documentation to being generated using
GitBook.  Examples are run as embedded CodePen snippets.
This isn't ideal, but it works.

closes reactjs#270
closes reactjs#263
closes reactjs#258

README.md

@@ -224,4 +224,3 @@ pass the 'shouldCloseOnOverlayClick' prop with 'false' value.
 
 # Demos
 * http://reactjs.github.io/react-modal/
-* http://reactjs.github.io/react-modal/bootstrap

book.json

@@ -0,0 +1,31 @@
+{
+  "gitbook": ">=3.2.2",
+  "title": "react-modal",
+  "root": "./docs",
+  "plugins": [
+    "codepen",
+    "edit-link",
+    "prism",
+    "-highlight",
+    "anchorjs",
+    "github"
+  ],
+  "pluginsConfig": {
+    "codepen": {
+      "height": 1000,
+      "defaultTab": "js"
+    },
+    "edit-link": {
+      "base": "https://github.com/reactjs/react-modal/tree/master/docs",
+      "label": "Edit This Page"
+    },
+    "prism": {
+      "css": [
+        "prismjs/themes/prism-tomorrow.css"
+      ]
+    },
+    "github": {
+      "url": "https://github.com/reactjs/react-modal"
+    }
+  }
+}

docs/README.md

@@ -0,0 +1,85 @@
+# react-modal
+
+> Accessible modal dialog component for React.JS
+
+We maintain that accessibility is a key component of any modern web application.  As such, we have created this modal in such a way that it fulfills the accessibility requirements of the modern web.  We seek to keep the focus on accessibility while providing a functional, capable modal component for general use.
+
+## General Usage
+
+The following is an example of using react-modal specifying all the possible props and options:
+
+```js
+import ReactModal from 'react-modal';
+
+<ReactModal
+  /*
+    Boolean describing if the modal should be shown or not.
+  */
+  isOpen={false}
+  /*
+    Function that will be run after the modal has opened.
+  */
+  onAfterOpen={handleAfterOpenFunc}
+  /*
+    Function that will be run when the modal is requested to be closed, prior to actually closing.
+  */
+  onRequestClose={handleRequestCloseFunc}
+  /*
+    Number indicating the milliseconds to wait before closing the modal.
+  */
+  closeTimeoutMS={0}
+  /*
+    Object indicating styles to be used for the modal.  
+    It has two keys, `overlay` and `content`.  See the `Styles` section for more details.
+  */
+  style={{ overlay: {}, content: {} }}
+  /*
+    String indicating how the content container should be announced to screenreaders
+  */
+  contentLabel="Example Modal"
+  /*
+     String className to be applied to the portal.
+     See the `Styles` section for more details.
+  */
+  portalClassName="ReactModalPortal"
+  /*
+     String className to be applied to the overlay.
+     See the `Styles` section for more details.
+  */
+  overlayClassName="ReactModal__Overlay"
+  /*
+     String className to be applied to the modal content.
+     See the `Styles` section for more details.
+  */
+  className="ReactModal__Content"
+  /*
+    Boolean indicating if the appElement should be hidden
+  */
+  ariaHideApp={true}
+  /*
+    Boolean indicating if the overlay should close the modal
+  */
+  shouldCloseOnOverlayClick={true}
+  /*
+    String indicating the role of the modal, allowing the 'dialog' role to be applied if desired.
+  */
+  role="dialog"
+  /*
+    Function that will be called to get the parent element that the modal will be attached to.
+  */
+  parentSelector={() => document.body}
+/>
+```
+
+## Install
+
+With [npm](https://npmjs.org/) installed, run
+
+```
+$ npm install react-modal
+```
+
+
+## License
+
+MIT

docs/SUMMARY.md

@@ -0,0 +1,19 @@
+# Summary
+
+* [Read Me](/README.md)
+* [Styles](styles/README.md)
+  * [Using CSS Classes](styles/classes.md)
+  * [Overriding Defaults](styles/defaults.md)
+
+* [Testing](testing/README.md)
+
+* [Examples](examples/README.md)
+  * [Minimal](examples/minimal.md)
+  * [Using setAppElement](examples/set_app_element.md)
+  * [Using onRequestClose](examples/on_request_close.md)
+  * [Using shouldCloseOnOverlayClick](examples/should_close_on_overlay_click.md)
+  * [Using Inline Styles](examples/inline_styles.md)
+  * [Using CSS Classes](examples/css_classes.md)
+  * [Using Global Style Overrides](examples/global_overrides.md)
+
+* [Contributing](contributing/README.md)

docs/examples/css_classes.md

@@ -0,0 +1,7 @@
+# Using CSS Classes for Styling
+
+If you prefer to use CSS to handle styling the modal you can.
+
+One thing to note is that by using the className property you will override all default styles.
+
+[](codepen://claydiffrient/KNjVrG)

docs/examples/global_overrides.md

@@ -0,0 +1,5 @@
+# Global Overrides
+
+If you'll be using several modals and want to adjust styling for all of them in one location you can by modifying `Modal.defaultStyles`.
+
+[](codepen://claydiffrient/pNXgqQ)

docs/examples/inline_styles.md

@@ -0,0 +1,5 @@
+# Using Inline Styles
+
+This example shows how to use inline styles to adjust the modal.
+
+[](codepen://claydiffrient/ZBmyKz)

docs/examples/minimal.md

@@ -0,0 +1,5 @@
+# Minimal
+
+This example shows the minimal needed to get React Modal to work.
+
+[](codepen://claydiffrient/KNxgav)

docs/examples/on_request_close.md

@@ -0,0 +1,7 @@
+# onRequestClose Callback
+
+This example shows how you can use the `onRequestClose` prop with a function to perform actions when closing.
+
+This is especially important for handling closing the modal via the escape key.
+
+[](codepen://claydiffrient/KNjVBx)

docs/examples/set_app_element.md

@@ -0,0 +1,7 @@
+# Using setAppElement
+
+This example shows how to use setAppElement to properly hide your application from screenreaders and other assistive technologies while the modal is open.
+
+You'll notice in this example that the aria-hidden attribute is applied to the #main div rather than the document body.
+
+[](codepen://claydiffrient/ENegGJ)

docs/examples/should_close_on_overlay_click.md

@@ -0,0 +1,5 @@
+# Using shouldCloseOnOverlayClick
+
+This example shows using `shouldCloseOnOverlayClick` set to `false` so that closing by clicking on the overlay doesn't work.
+
+[](codepen://claydiffrient/woLzwo)

docs/styles/README.md

@@ -0,0 +1,30 @@
+## Styles
+
+Styles passed into the Modal via the `style` prop are merged with the defaults.  The default styles are:
+
+```js
+{
+  overlay : {
+    position          : 'fixed',
+    top               : 0,
+    left              : 0,
+    right             : 0,
+    bottom            : 0,
+    backgroundColor   : 'rgba(255, 255, 255, 0.75)'
+  },
+  content : {
+    position                   : 'absolute',
+    top                        : '40px',
+    left                       : '40px',
+    right                      : '40px',
+    bottom                     : '40px',
+    border                     : '1px solid #ccc',
+    background                 : '#fff',
+    overflow                   : 'auto',
+    WebkitOverflowScrolling    : 'touch',
+    borderRadius               : '4px',
+    outline                    : 'none',
+    padding                    : '20px'
+  }
+}
+```

docs/styles/classes.md

@@ -0,0 +1,5 @@
+### CSS Classes
+
+Sometimes it may be preferable to use CSS classes rather than inline styles.  You can use the `className` and `overlayClassName` props to specify a given CSS class for each of those.
+Note: If you provide those props all default styles will not be applied, leaving all styles under control of the CSS class.
+The `portalClassName` can also be used however there are no styles by default applied

docs/styles/defaults.md

@@ -0,0 +1,3 @@
+### Global Overrides
+
+If you'd like to override all instances of modals you can make changes to `Modal.defaultStyles`.

docs/testing/README.md

@@ -0,0 +1,6 @@
+# Testing
+
+When using React Test Utils with this library, here are some things to keep in mind:
+
+- You need to set `isOpen={true}` on the modal component for it to render its children.
+- You need to use the `.portal` property, as in `ReactDOM.findDOMNode(renderedModal.portal)` or `TestUtils.scryRenderedDOMComponentsWithClass(Modal.portal, 'my-modal-class')` to acquire a handle to the inner contents of your modal.

package.json

@@ -14,7 +14,14 @@
   },
   "scripts": {
     "test": "scripts/test --browsers Firefox",
-    "start": "scripts/dev-examples"
+    "start": "scripts/dev-examples",
+    "docs": "npm-run-all docs:*",
+    "docs-dev": "npm-run-all docs:clean docs:prepare docs:build:watch",
+    "docs:clean": "rimraf _book",
+    "docs:prepare": "gitbook install",
+    "docs:build": "gitbook build -g reactjs/react-modal",
+    "docs:build:watch": "gitbook serve",
+    "docs:publish": "cd _book && git init && git commit --allow-empty -m 'update book' && git checkout -b gh-pages && touch .nojekyll && git add . && git commit -am 'update book' && git push [email protected]:reactjs/react-modal gh-pages --force"
   },
   "authors": [
     "Ryan Florence"
@@ -27,6 +34,7 @@
     "babel-preset-react": "^6.5.0",
     "envify": "^3.4.1",
     "expect": "1.10.0",
+    "gitbook-cli": "^2.3.0",
     "karma": "^0.13.22",
     "karma-browserify": "^4.2.1",
     "karma-chrome-launcher": "0.2.0",
@@ -35,10 +43,12 @@
     "karma-mocha": "0.2.0",
     "karma-safari-launcher": "^0.1.1",
     "mocha": "2.3.3",
+    "npm-run-all": "^3.1.2",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
     "rf-release": "0.4.0",
+    "rimraf": "^2.5.4",
     "sinon": "^1.17.3",
     "uglify-js": "2.4.24",
     "webpack": "^1.12.14",