Updated storybook stories

ealush · Aug 11, 2017 · 7cbcee2 · 7cbcee2
1 parent 5a6d5ff
commit 7cbcee2
Show file tree

Hide file tree

Showing 21 changed files with 693 additions and 5,760 deletions.
diff --git a/.npmignore b/.npmignore
@@ -14,4 +14,5 @@ src
 .eslintrc
 *.lock
 package-lock.json
-screenshots
+screenshots
+docs
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -0,0 +1,22 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script>
+          if (window.parent !== window) {
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+          }
+        </script>
+        <title>React Storybook</title>
+
+
+      </head>
+      <body>
+        <div id="root"></div>
+        <div id="error-display"></div>
+        <script src="static/preview.6a52d8d72918e574072e.bundle.js"></script>
+      </body>
+    </html>
+
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,44 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="storybook-version" content="2.35.3">
+        <title>React Storybook</title>
+        <style>
+          /*
+            When resizing panels, the drag event breaks if the cursor
+            moves over the iframe. Add the 'dragging' class to the body
+            at drag start and remove it when the drag ends.
+           */
+          .dragging iframe {
+            pointer-events: none;
+          }
+
+          /* Styling the fuzzy search box placeholders */
+          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox::-moz-placeholder { /* Firefox 19+ */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox:focus{
+            border-color: #EEE !important;
+          }
+
+          .btn:hover{
+            background-color: #eee
+          }
+        </style>
+      </head>
+      <body style="margin: 0;">
+        <div id="root"></div>
+        <script src="static/manager.9473205e37558369223d.bundle.js"></script>
+      </body>
+    </html>
+
diff --git a/docs/static/manager.9473205e37558369223d.bundle.js b/docs/static/manager.9473205e37558369223d.bundle.js
diff --git a/docs/static/manager.9473205e37558369223d.bundle.js.map b/docs/static/manager.9473205e37558369223d.bundle.js.map
diff --git a/docs/static/preview.6a52d8d72918e574072e.bundle.js b/docs/static/preview.6a52d8d72918e574072e.bundle.js
diff --git a/docs/static/preview.6a52d8d72918e574072e.bundle.js.map b/docs/static/preview.6a52d8d72918e574072e.bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "emoji-js": "^3.2.2",
     "eslint": "4.4.1",
     "eslint-plugin-react": "^7.1.0",
     "node-sass": "^4.5.3",

diff --git a/stories/index.js b/stories/index.js
@@ -1,12 +1,30 @@
 import React from 'react'; // eslint-disable-line no-unused-vars
 import { storiesOf, action } from '@kadira/storybook';
 import EmojiPicker from '../src';
+import EmojiTextarea from './textarea';
 
 // eslint-disable-next-line no-undef
 const assetPath = `${process.env.PUBLIC_URL}`;
 
+const text = `:face_with_cowboy_hat:Hi! :wave:
+:shaved_ice:This is a live demo using the emoji picker.:dark_sunglasses:
+Give it a try by clicking the smiley face blow the textarea. :nerd_face:`;
+
+// eslint-disable-next-line no-undef
+storiesOf('Text area with picker', module)
+    .add('Sample textarea with emoji picker', () => (
+        <div style={{maxWidth: '450px'}}>
+            <EmojiTextarea value={text}/>
+        </div>
+    ))
+    .add('Sample textarea with emoji picker - autoclose mode', () => (
+        <div style={{maxWidth: '450px'}}>
+            <EmojiTextarea autoClose={true} value={text}/>
+        </div>
+    ));
+
 // eslint-disable-next-line no-undef
-storiesOf('EmojiPicker', module)
+storiesOf('Standalone picker', module)
     .add('Self hosted 32px/fastest', () => (
         <EmojiPicker assetPath={assetPath} onEmojiClick={action('emoji-click')}/>
     ))

diff --git a/stories/textarea/CharCount/index.js b/stories/textarea/CharCount/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.scss';
+
+function CharCount({ curr, max }) {
+    if (!max) {
+        return null;
+    }
+
+    return (
+        <small className="char-count">{curr} / {max}</small>
+    );
+}
+
+export default CharCount;
diff --git a/stories/textarea/CharCount/style.scss b/stories/textarea/CharCount/style.scss
@@ -0,0 +1,6 @@
+@import '../colors.scss';
+
+.emoji-textarea .char-count {
+    float: left;
+    color: $md-grey-400;
+}
diff --git a/stories/textarea/SmileyFace/index.js b/stories/textarea/SmileyFace/index.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import './style.scss';
+
+function SmileyFace({ onClick }) {
+    return (<i className={`smiley-face picker-trigger`} onClick={onClick}/>);
+}
+
+export default SmileyFace;
diff --git a/stories/textarea/SmileyFace/smiley-face-yellow.svg b/stories/textarea/SmileyFace/smiley-face-yellow.svg
diff --git a/stories/textarea/SmileyFace/smiley-face.svg b/stories/textarea/SmileyFace/smiley-face.svg
diff --git a/stories/textarea/SmileyFace/style.scss b/stories/textarea/SmileyFace/style.scss
@@ -0,0 +1,18 @@
+.emoji-textarea .smiley-face {
+    background-image: url("./smiley-face.svg");
+    position: relative;
+    background-size: 15px 15px;
+    width: 15px;
+    height: 15px;
+    display: inline-block;
+    opacity: .2;
+    margin-left: 10px;
+
+    &.shown {
+        opacity: 1;
+    }
+
+    &:hover {
+        background-image: url("./smiley-face-yellow.svg");
+    }
+}