Improve modal documentation

couds · Sep 26, 2017 · feda9ee · feda9ee
1 parent d76b95b
commit feda9ee
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -72,6 +72,7 @@ The Following componets were ported:
 - Image ([Storybook](http://localhost:6006/?selectedKind=Image)) ([Docs](http://bulma.io/documentation/elements/image/))
 - Level ([Storybook](http://localhost:6006/?selectedKind=Level)) ([Docs](http://bulma.io/documentation/layout/level/))
 - Media ([Storybook](http://localhost:6006/?selectedKind=Media)) ([Docs](http://bulma.io/documentation/layout/media-object/))
+- Modal ([Storybook](http://localhost:6006/?selectedKind=Modal)) ([Docs](http://bulma.io/documentation/components/modal/))
 - Notification ([Storybook](http://localhost:6006/?selectedKind=Notification)) ([Docs](http://bulma.io/documentation/elements/notification/))
 - Progress ([Storybook](http://localhost:6006/?selectedKind=Progress)) ([Docs](http://bulma.io/documentation/elements/progress/))
 - Section ([Storybook](http://localhost:6006/?selectedKind=Section)) ([Docs](http://bulma.io/documentation/layout/section/))

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bulma-components",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "React components for Bulma framework",
   "main": "dist",
   "scripts": {

diff --git a/src/components/modal/modal.story.js b/src/components/modal/modal.story.js
@@ -9,6 +9,7 @@ import Image from '../image';
 import Media from '../media';
 import Button from '../button';
 import Content from '../content';
+import Section from '../section';
 import Level from '../level';
 
 class OpenModal extends React.Component {
@@ -41,15 +42,30 @@ class OpenModal extends React.Component {
 }
 
 storiesOf('Modal', module)
-  .addDecorator(story => (
-    <div style={{ margin: 10, display: 'relative' }}>
-      {story()}
-    </div>
-  ))
   .add('Default', withInfo()(() => (
-    <OpenModal>
+    <OpenModal modal={{ closeOnEsc: false }}>
       <Modal.Content>
-        <Image src="http://bulma.io/images/placeholders/1280x960.png" size="4by3" />
+        <Section style={{ backgroundColor: 'white' }}>
+          Click on the {'"X"'} button on the top-right button to close the Modal (pass closeOnEsc=false to the modal to avoid closing it with the keyboard)
+        </Section>
+      </Modal.Content>
+    </OpenModal>
+  )))
+  .add('Close with keyboard', withInfo()(() => (
+    <OpenModal modal={{ showClose: false }}>
+      <Modal.Content>
+        <Section style={{ backgroundColor: 'white' }}>
+          Press ESC on your keyboard to close this modal, Pass  showClose: false if you want to hide the close button
+        </Section>
+      </Modal.Content>
+    </OpenModal>
+  )))
+  .add('Close on click outside', withInfo()(() => (
+    <OpenModal modal={{ closeOnBlur: true, showClose: false }}>
+      <Modal.Content>
+        <Section style={{ backgroundColor: 'white' }}>
+          Pass closeOnBlur: true to enable to close the Modal when the user click outside the main modal container
+        </Section>
       </Modal.Content>
     </OpenModal>
   )))
@@ -71,7 +87,8 @@ storiesOf('Modal', module)
                 <p>
                   <strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small>
                   <br />
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
+                  If the children of the Modal is a card, the close button will be on the Card Head instead than the top-right corner
+                  You can also pass showClose = false to Card.Head to hide the close button
                 </p>
               </Content>
               <Level breakpoint="mobile">