chore(Modal): Add nested Modal to example

src/Modal/Modal.example.js

@@ -4,54 +4,64 @@ import Button from '../Button';
 import Box from '../Box';
 
 export default class ModalDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModelOpen: false,
-    };
-
-    this.toggle = this.toggle.bind(this);
-    this.onCancel = this.onCancel.bind(this);
-    this.onConfirm = this.onConfirm.bind(this);
-  }
+  state = {
+    isModalOpen: false,
+    isModalTwoOpen: false,
+  };
 
-  toggle() {
-    this.setState({ isModalOpen: !this.state.isModalOpen });
-  }
+  toggle = () => {
+    this.setState({ isModalOpen: !this.state.isModalOpen, isModalTwoOpen: false });
+  };
 
-  onCancel() {
-    this.toggle();
-    setTimeout(() => {
-      alert('Oh no! It has been canceled.');
-    }, 500);
-  }
+  toggleModalTwo = () => {
+    this.setState({ isModalTwoOpen: !this.state.isModalTwoOpen });
+  };
 
-  onConfirm() {
+  onCancel = () => {
     this.toggle();
 
     setTimeout(() => {
-      alert('Yahoo! It has been confirmed.');
+      alert('Oh no! It has been canceled.');
     }, 500);
-  }
+  };
 
   render() {
-    const { body, ...props } = this.props;
+    const { body, bodyTwo = 'Im a nested modal!', ...props } = this.props;
 
     return (
       <div>
         <Button onClick={this.toggle}>Open Modal</Button>
 
         <Modal open={this.state.isModalOpen} onClose={this.toggle} title="Example Modal" {...props}>
-          <Modal.Body>{body}</Modal.Body>
+          <Modal.Body>
+            {body}
+
+            <Modal open={this.state.isModalTwoOpen} onClose={this.toggleModalTwo} title="Example Modal Two" {...props}>
+              <Modal.Body>{bodyTwo}</Modal.Body>
+
+              <Modal.Footer>
+                <Box align="right">
+                  <Button.Group>
+                    <Button variant="gray" onClick={this.toggleModalTwo}>
+                      Cancel
+                    </Button>
+                    <Button variant="success" onClick={this.toggleModalTwo}>
+                      I&apos;m Done Anyways
+                    </Button>
+                  </Button.Group>
+                </Box>
+              </Modal.Footer>
+            </Modal>
+          </Modal.Body>
 
           <Modal.Footer>
             <Box align="right">
               <Button.Group>
                 <Button variant="gray" onClick={this.onCancel}>
                   Cancel
                 </Button>
-                <Button variant="success" onClick={this.onConfirm}>
-                  Okay
+                <Button variant="success" onClick={this.toggleModalTwo}>
+                  Open Another Modal
                 </Button>
               </Button.Group>
             </Box>