refactor(Confirm): update confirm

Semantic-Org · Aug 13, 2016 · a3d9f01 · a3d9f01
1 parent 1573f54
commit a3d9f01
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 185 deletions.
diff --git a/config.js b/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',

diff --git a/docs/app/Examples/addons/Confirm/Types/ConfirmCallbacksExample.js b/docs/app/Examples/addons/Confirm/Types/ConfirmCallbacksExample.js
@@ -1,19 +1,19 @@
 import React, { Component } from 'react'
 import { Button, Confirm } from 'stardust'
 
-class ConfirmConfirmExample extends Component {
-  state = { active: false }
+class ConfirmCallbacksExample extends Component {
+  state = { active: false, result: 'show the modal to capture a result' }
 
   show = () => this.setState({ active: true })
-  handleConfirm = () => this.setState({ result: 'confirm', active: false })
-  handleCancel = () => this.setState({ result: 'cancel', active: false })
+  handleConfirm = () => this.setState({ result: 'confirmed', active: false })
+  handleCancel = () => this.setState({ result: 'cancelled', active: false })
 
   render() {
     const { active, result } = this.state
 
     return (
       <div>
-        {result && <p>You chose: <em>{result}</em></p>}
+        <p>Result: <em>{result}</em></p>
 
         <Button onClick={this.show}>Show</Button>
         <Confirm
@@ -26,4 +26,4 @@ class ConfirmConfirmExample extends Component {
   }
 }
 
-export default ConfirmConfirmExample
+export default ConfirmCallbacksExample
diff --git a/docs/app/Examples/addons/Confirm/Types/ConfirmConfirmExample.js b/docs/app/Examples/addons/Confirm/Types/ConfirmConfirmExample.js
@@ -1,33 +1,25 @@
 import React, { Component } from 'react'
-import { Button, Header, Image, Modal } from 'stardust'
+import { Button, Confirm } from 'stardust'
 
-class ModalModalExample extends Component {
+class ConfirmConfirmExample extends Component {
   state = { active: false }
 
   show = () => this.setState({ active: true })
-  hide = () => this.setState({ active: false })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => 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 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>
+        <Button onClick={this.show}>Show</Button>
+        <Confirm
+          active={this.state.active}
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
       </div>
     )
   }
 }
 
-export default ModalModalExample
+export default ConfirmConfirmExample
diff --git a/docs/app/Examples/addons/Confirm/Variations/ConfirmButtonsExample.js b/docs/app/Examples/addons/Confirm/Variations/ConfirmButtonsExample.js
@@ -1,38 +1,27 @@
 import React, { Component } from 'react'
-import { Button, Icon, Confirm } from 'stardust'
+import { Button, Confirm } from 'stardust'
 
-class ConfirmContentExample extends Component {
+class ConfirmButtonsExample extends Component {
   state = { active: false }
 
   show = () => this.setState({ active: true })
-  hide = () => this.setState({ active: false })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => this.setState({ active: false })
 
   render() {
-    const { active, size } = this.state
-
     return (
       <div>
-        <Button onClick={this.show}>Small</Button>
-
-        <Confirm size={size} active={active} onHide={this.hide}>
-          <Confirm.Header>
-            Delete Your Account
-          </Confirm.Header>
-          <Confirm.Content>
-            <p>Are you sure you want to delete your account</p>
-          </Confirm.Content>
-          <Confirm.Actions>
-            <Button className='negative'>
-              No
-            </Button>
-            <Button className='positive right labeled icon'>
-              Yes <Icon name='checkmark' />
-            </Button>
-          </Confirm.Actions>
-        </Confirm>
+        <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 ConfirmContentExample
+export default ConfirmButtonsExample
diff --git a/docs/app/Examples/addons/Confirm/Variations/ConfirmContentExample.js b/docs/app/Examples/addons/Confirm/Variations/ConfirmContentExample.js
@@ -1,40 +1,26 @@
 import React, { Component } from 'react'
-import { Button, Icon, Modal } from 'stardust'
+import { Button, Confirm } from 'stardust'
 
-class ModalSizeExample extends Component {
+class ConfirmButtonsExample extends Component {
   state = { active: false }
 
-  show = (size) => () => this.setState({ size, active: true })
-  hide = () => this.setState({ active: false })
+  show = () => this.setState({ active: true })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => 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>
+        <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 ModalSizeExample
+export default ConfirmButtonsExample
diff --git a/docs/app/Examples/addons/Confirm/Variations/ConfirmHeaderExample.js b/docs/app/Examples/addons/Confirm/Variations/ConfirmHeaderExample.js
@@ -1,38 +1,26 @@
 import React, { Component } from 'react'
-import { Button, Icon, Confirm } from 'stardust'
+import { Button, Confirm } from 'stardust'
 
-class ConfirmContentExample extends Component {
+class ConfirmHeaderExample extends Component {
   state = { active: false }
 
   show = () => this.setState({ active: true })
-  hide = () => this.setState({ active: false })
+  handleConfirm = () => this.setState({ active: false })
+  handleCancel = () => this.setState({ active: false })
 
   render() {
-    const { active, size } = this.state
-
     return (
       <div>
-        <Button onClick={this.show}>Small</Button>
-
-        <Confirm size={size} active={active} onHide={this.hide}>
-          <Confirm.Header>
-            Delete Your Account
-          </Confirm.Header>
-          <Confirm.Content>
-            <p>Are you sure you want to delete your account</p>
-          </Confirm.Content>
-          <Confirm.Actions>
-            <Button className='negative'>
-              No
-            </Button>
-            <Button className='positive right labeled icon'>
-              Yes <Icon name='checkmark' />
-            </Button>
-          </Confirm.Actions>
-        </Confirm>
+        <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 ConfirmContentExample
+export default ConfirmHeaderExample
diff --git a/docs/app/Examples/addons/Confirm/index.js b/docs/app/Examples/addons/Confirm/index.js
@@ -2,41 +2,43 @@ import React, { Component } from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class ModalExamples extends Component {
+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='Modal'
-            description='A standard modal'
-            examplePath='modules/Modal/Types/ModalModalExample'
-          />
-          <ComponentExample
-            title='Basic'
-            description='A modal can reduce its complexity'
-            examplePath='modules/Modal/Types/ModalBasicExample'
+            title='Confirm'
+            description='A default confirm'
+            examplePath='addons/Confirm/Types/ConfirmConfirmExample'
           />
           <ComponentExample
-            title='Scrolling'
-            description={[
-              'When your modal content exceeds the height of the browser the scrollable area will automatically',
-              'expand to include just enough space for scrolling, without scrolling the page below.',
-            ].join(' ')}
-            examplePath='modules/Modal/Types/ModalScrollingExample'
+            title='Callbacks'
+            description='A confirm has callbacks for cancel and confirm actions'
+            examplePath='addons/Confirm/Types/ConfirmCallbacksExample'
           />
         </ExampleSection>
 
         <ExampleSection title='Variations'>
           <ComponentExample
-            title='Size'
-            description='A modal can vary in size'
-            examplePath='modules/Modal/Variations/ModalSizeExample'
+            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='Dimmer Variations'
-            description='A modal can specify dimmer variations'
-            examplePath='modules/Modal/Variations/ModalDimmerExample'
+            title='Button Text'
+            description='A confirm can customize button text'
+            examplePath='addons/Confirm/Variations/ConfirmButtonsExample'
           />
         </ExampleSection>
       </div>

diff --git a/package.json b/package.json
@@ -45,7 +45,6 @@
     "npm": "2 - 4"
   },
   "dependencies": {
-    "bluebird": "^3.3.4",
     "classnames": "^2.1.5",
     "debug": "^2.2.0",
     "jquery": "^3.1.0",