Add full Modal feature support with Dimmer and docs (#383)

* chore(package): add react-portal, update sui-css and simulant

* feat(Modal): add dimmer, support all features

* test(Modal): add and update tests

* docs(Modal): add Modal docs

* refactor(Confirm): update confirm

* test(Confirm): test updated confirm

config.js

@@ -63,7 +63,6 @@ config = Object.assign({}, config, {
   compiler_output_path: paths.base(config.dir_docs_dist),
   compiler_public_path: __BASE__ || '/',
   compiler_vendor: [
-    'bluebird',
     'classnames',
     'faker',
     'react',

docs/app/Examples/addons/Confirm/Types/ConfirmCallbacksExample.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Button, Confirm } from 'stardust'
+
+class ConfirmCallbacksExample extends Component {
+  state = { active: false, result: 'show the modal to capture a result' }
+
+  show = () => this.setState({ active: true })
+  handleConfirm = () => this.setState({ result: 'confirmed', active: false })
+  handleCancel = () => this.setState({ result: 'cancelled', active: false })
+
+  render() {
+    const { active, result } = this.state
+
+    return (
+      <div>
+        <p>Result: <em>{result}</em></p>
+
+        <Button onClick={this.show}>Show</Button>
+        <Confirm
+          active={active}
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
+      </div>
+    )
+  }
+}
+
+export default ConfirmCallbacksExample

docs/app/Examples/addons/Confirm/Types/ConfirmConfirmExample.js

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+import { Button, Confirm } from 'stardust'
+
+class ConfirmConfirmExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => this.setState({ active: false })
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.show}>Show</Button>
+        <Confirm
+          active={this.state.active}
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
+      </div>
+    )
+  }
+}
+
+export default ConfirmConfirmExample

docs/app/Examples/addons/Confirm/Variations/ConfirmButtonsExample.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { Button, Confirm } from 'stardust'
+
+class ConfirmButtonsExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => this.setState({ active: false })
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.show}>Show</Button>
+        <Confirm
+          active={this.state.active}
+          cancelButton='Never mind'
+          confirmButton="Let's do it"
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
+      </div>
+    )
+  }
+}
+
+export default ConfirmButtonsExample

docs/app/Examples/addons/Confirm/Variations/ConfirmContentExample.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { Button, Confirm } from 'stardust'
+
+class ConfirmButtonsExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => this.setState({ active: false })
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.show}>Show</Button>
+        <Confirm
+          active={this.state.active}
+          content='This is a custom message'
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
+      </div>
+    )
+  }
+}
+
+export default ConfirmButtonsExample

docs/app/Examples/addons/Confirm/Variations/ConfirmHeaderExample.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react'
+import { Button, Confirm } from 'stardust'
+
+class ConfirmHeaderExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => this.setState({ active: false })
+
+  render() {
+    return (
+      <div>
+        <Button onClick={this.show}>Show</Button>
+        <Confirm
+          active={this.state.active}
+          header='This is a custom header'
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
+      </div>
+    )
+  }
+}
+
+export default ConfirmHeaderExample

docs/app/Examples/addons/Confirm/index.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+import { Message } from 'stardust'
+
+export default class ConfirmExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Message className='info'>
+          A Confirm is a pre-configured Modal.  You can use all the props of a regular Modal.
+        </Message>
+        <ExampleSection title='Types'>
+          <ComponentExample
+            title='Confirm'
+            description='A default confirm'
+            examplePath='addons/Confirm/Types/ConfirmConfirmExample'
+          />
+          <ComponentExample
+            title='Callbacks'
+            description='A confirm has callbacks for cancel and confirm actions'
+            examplePath='addons/Confirm/Types/ConfirmCallbacksExample'
+          />
+        </ExampleSection>
+
+        <ExampleSection title='Variations'>
+          <ComponentExample
+            title='Header'
+            description='A confirm can define a header'
+            examplePath='addons/Confirm/Variations/ConfirmHeaderExample'
+          />
+          <ComponentExample
+            title='Content'
+            description='A confirm can define content'
+            examplePath='addons/Confirm/Variations/ConfirmContentExample'
+          />
+          <ComponentExample
+            title='Button Text'
+            description='A confirm can customize button text'
+            examplePath='addons/Confirm/Variations/ConfirmButtonsExample'
+          />
+        </ExampleSection>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Modal/Types/ModalBasicExample.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Button, Header, Icon, Modal } from 'stardust'
+
+class ModalBasicExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  hide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Button onClick={this.show}>Basic Modal</Button>
+
+        <Modal basic size='small' active={active} onHide={this.hide}>
+          <Header icon='archive'>Archive Old Messages</Header>
+          <Modal.Content>
+            <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button className='red basic inverted' onClick={this.hide}>
+              <Icon name='remove' /> No
+            </Button>
+            <Button className='green inverted' onClick={this.hide}>
+              <Icon name='checkmark' /> Yes
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default ModalBasicExample

docs/app/Examples/modules/Modal/Types/ModalModalExample.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Button, Header, Image, Modal } from 'stardust'
+
+class ModalModalExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  hide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Button onClick={this.show}>Show Modal</Button>
+
+        <Modal active={active} onHide={this.hide}>
+          <Modal.Header>Select a Photo</Modal.Header>
+          <Modal.Content image>
+            <Image wrapped className='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
+            <Modal.Description>
+              <Header>Default Profile Image</Header>
+              <p>We've found the following gravatar image associated with your e-mail address.</p>
+              <p>Is it okay to use this photo?</p>
+            </Modal.Description>
+          </Modal.Content>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default ModalModalExample

docs/app/Examples/modules/Modal/Types/ModalScrollingExample.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import { Button, Header, Icon, Image, Modal } from 'stardust'
+
+class ModalScrollingExample extends Component {
+  state = { active: false }
+
+  show = () => this.setState({ active: true })
+  hide = () => this.setState({ active: false })
+
+  render() {
+    const { active, dimmer } = this.state
+
+    return (
+      <div>
+        <Button onClick={this.show}>Long Modal</Button>
+
+        <Modal dimmer={dimmer} active={active} onHide={this.hide}>
+          <Modal.Header>Profile Picture</Modal.Header>
+          <Modal.Content image>
+            <Image wrapped className='medium' src='http://semantic-ui.com/images/wireframe/image.png' />
+            <Modal.Description>
+              <Header>Modal Header</Header>
+              <p>This is an example of expanded content that will cause the modal's dimmer to scroll</p>
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+              <Image src='http://semantic-ui.com/images/wireframe/paragraph.png' />
+            </Modal.Description>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button className='primary icon' onClick={this.hide}>
+              Proceed <Icon name='right chevron' />
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default ModalScrollingExample
+

docs/app/Examples/modules/Modal/Variations/ModalDimmerExample.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import { Button, Header, Icon, Image, Modal } from 'stardust'
+
+class ModalDimmerExample extends Component {
+  state = { active: false }
+
+  show = (dimmer) => () => this.setState({ dimmer, active: true })
+  hide = () => this.setState({ active: false })
+
+  render() {
+    const { active, dimmer } = this.state
+
+    return (
+      <div>
+        <Button onClick={this.show(true)}>Default</Button>
+        <Button onClick={this.show('inverted')}>Inverted</Button>
+        <Button onClick={this.show('blurring')}>Blurring</Button>
+        <Button onClick={this.show(false)}>None</Button>
+
+        <Modal dimmer={dimmer} active={active} onHide={this.hide}>
+          <Modal.Header>Select a Photo</Modal.Header>
+          <Modal.Content image>
+            <Image wrapped className='medium' src='http://semantic-ui.com/images/avatar2/large/rachel.png' />
+            <Modal.Description>
+              <Header>Default Profile Image</Header>
+              <p>We've found the following gravatar image associated with your e-mail address.</p>
+              <p>Is it okay to use this photo?</p>
+            </Modal.Description>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button className='black' onClick={this.hide}>
+              Nope
+            </Button>
+            <Button className='positive right labeled icon' onClick={this.hide}>
+              Yep, that's me <Icon name='checkmark' />
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default ModalDimmerExample
+

docs/app/Examples/modules/Modal/Variations/ModalSizeExample.js

@@ -0,0 +1,40 @@
+import React, { Component } from 'react'
+import { Button, Icon, Modal } from 'stardust'
+
+class ModalSizeExample extends Component {
+  state = { active: false }
+
+  show = (size) => () => this.setState({ size, active: true })
+  hide = () => this.setState({ active: false })
+
+  render() {
+    const { active, size } = this.state
+
+    return (
+      <div>
+        <Button onClick={this.show('small')}>Small</Button>
+        <Button onClick={this.show('large')}>Large</Button>
+        <Button onClick={this.show('fullscreen')}>Fullscreen</Button>
+
+        <Modal size={size} active={active} onHide={this.hide}>
+          <Modal.Header>
+            Delete Your Account
+          </Modal.Header>
+          <Modal.Content>
+            <p>Are you sure you want to delete your account</p>
+          </Modal.Content>
+          <Modal.Actions>
+            <Button className='negative'>
+              No
+            </Button>
+            <Button className='positive right labeled icon'>
+              Yes <Icon name='checkmark' />
+            </Button>
+          </Modal.Actions>
+        </Modal>
+      </div>
+    )
+  }
+}
+
+export default ModalSizeExample