From 0535bf8661bf9fca00ef06314a04f4a6bc2a2d40 Mon Sep 17 00:00:00 2001
From: Maks <Sam1812@yandex.ru>
Date: Thu, 6 Oct 2016 15:03:47 +0300
Subject: [PATCH 1/8] Hint

---
 src/Hint/Hint.jsx  | 98 ++++++++++++++++++++++++++++++++++++++++++++++
 src/Hint/Hint.md   | 23 +++++++++++
 src/Hint/index.js  |  1 +
 src/Hint/story.jsx | 36 +++++++++++++++++
 4 files changed, 158 insertions(+)
 create mode 100644 src/Hint/Hint.jsx
 create mode 100644 src/Hint/Hint.md
 create mode 100644 src/Hint/index.js
 create mode 100644 src/Hint/story.jsx

diff --git a/src/Hint/Hint.jsx b/src/Hint/Hint.jsx
new file mode 100644
index 0000000..84dde5a
--- /dev/null
+++ b/src/Hint/Hint.jsx
@@ -0,0 +1,98 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+
+import View from '../View';
+import Text from '../Text';
+import { COLOR, FONT } from '../const/theme';
+
+import { StyleSheet, css } from '../helpers/styles';
+
+export default class Hint extends React.Component {
+    static propTypes = {
+        /**
+         * Tail position
+         */
+        tailPosition: PropTypes.oneOf(['leftTop', 'rightTop', 'topLeft'])
+    };
+
+    static defaultProps = {
+        tailPosition: 'leftTop'
+    };
+
+    render() {
+        const props = this.props;
+
+        return (
+                <View styles={[STYLE.hint, ...props.styles || []]}>
+                    <View
+                        styles={[
+                        STYLE.triangle,
+                        (props.tailPosition === 'leftTop' ||  props.tailPosition === 'rightTop') && STYLE.triangleHorizontal ,
+                        (props.tailPosition === 'topLeft' ) && STYLE.triangleVertical ,
+                        props.tailPosition === 'leftTop' && STYLE.leftTop,
+                        props.tailPosition === 'rightTop' && STYLE.rightTop,
+                        props.tailPosition === 'topLeft'&& STYLE.topLeft
+                    ]}
+                    >
+                    </View>
+                    <View styles={[STYLE.textBox]}>
+                        <Text styles={[STYLE.hintText]}>
+                            {props.children}
+                        </Text>
+                    </View>
+                </View>
+        )
+    }
+}
+
+const STYLE = StyleSheet.create({
+    hint: {
+        position: 'relative',
+        border: '1px dashed #d7d8d9',
+        background: COLOR.GRAY_HOVER,
+        overflow: 'visible',
+        borderRadius: '0.1rem',
+        padding: '.4rem'
+    },
+    triangle: {
+        position: 'absolute',
+        width: '0.4rem',
+        height: '0.4rem',
+        background: COLOR.GRAY_HOVER
+    },
+    triangleHorizontal: {
+        borderTop: 'none',
+        borderBottom: '1px dashed #d7d8d9',
+        borderLeft: '1px dashed #d7d8d9',
+        borderRight: 'none'
+    },
+    triangleVertical: {
+        borderTop: '1px dashed #d7d8d9',
+        borderBottom: 'none',
+        borderLeft: 'none',
+        borderRight: '1px dashed #d7d8d9'
+    },
+    leftTop: {
+        transform: 'rotate(45deg) translateX(-6px) translateY(9px)'
+    },
+    rightTop: {
+        transform: 'rotate(225deg)',
+        right: '-4px',
+        top: '6px'
+    },
+    topLeft: {
+        transform: 'rotate(-45deg) translateX(9px) translateY(-6px)'
+    },
+    textBox: {
+        flex: 1,
+        zIndex: 10,
+        overflow: 'hidden'
+    },
+    hintText: {
+        color:  COLOR.SUB_TEXT,
+        overflow: 'hidden',
+        fontSize: FONT.SIZE_SUB_TEXT,
+        lineHeight: '.95rem'
+    }
+});
diff --git a/src/Hint/Hint.md b/src/Hint/Hint.md
new file mode 100644
index 0000000..6c9b486
--- /dev/null
+++ b/src/Hint/Hint.md
@@ -0,0 +1,23 @@
+### Usage
+
+```js
+import Hint from '@roistat/ui/lib/Hint';
+```
+
+const View = require('../View').default;
+const StateProvider = require('../StateProvider').default;
+
+*Hint*
+
+    <View>
+        <Hint tailPosition={'leftTop'}>Hint</Hint>
+    </View>
+
+*Hint, showed on hover*
+
+    <View>
+        <button onMouseEnter={() => setState({ isHovered: true })} onMouseLeave={() => setState({ isHovered: false })}>
+            Button
+        </button>    
+        { state.isHovered && <Hint tailPosition={'topLeft'} style={{marginTop:5+'px'}}>Hint</Hint> }
+    </View>
\ No newline at end of file
diff --git a/src/Hint/index.js b/src/Hint/index.js
new file mode 100644
index 0000000..0f50375
--- /dev/null
+++ b/src/Hint/index.js
@@ -0,0 +1 @@
+export { default } from './Hint';
diff --git a/src/Hint/story.jsx b/src/Hint/story.jsx
new file mode 100644
index 0000000..3d1b6a9
--- /dev/null
+++ b/src/Hint/story.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Hint from './Hint';
+import View from '../View';
+import StateProvider from '../StateProvider';
+
+storiesOf('Hint', module)
+    .add('Hint leftTop', () => (
+        <View>
+            <Hint tailPosition={'leftTop'}>Hint</Hint>
+        </View>
+    ))
+    .add('Hint rightTop', () => (
+        <View>
+            <Hint tailPosition={'rightTop'}>Hint</Hint>
+        </View>
+    ))
+    .add('Hint topLeft', () => (
+        <View>
+            <Hint tailPosition={'topLeft'}>Hint</Hint>
+        </View>
+    ))
+    .add('Hint, showed on hover', () => (
+        <View>
+            <StateProvider>
+                {(state, setState) => (
+                    <div>
+                        <button onMouseEnter={() => setState({ isHovered: true })} onMouseLeave={() => setState({ isHovered: false })}>
+                            Button
+                        </button>    
+                        { state.isHovered && <Hint tailPosition={'topLeft'} style={{marginTop:5+'px'}}>Hint</Hint> }
+                    </div>
+                    )}
+            </StateProvider>
+        </View>
+    ));

From 9c47a6302a65b14bd2389b9ebdddaceadb7e0642 Mon Sep 17 00:00:00 2001
From: Maks <Sam1812@yandex.ru>
Date: Thu, 6 Oct 2016 15:05:19 +0300
Subject: [PATCH 2/8] Hint

---
 src/Hint/story.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Hint/story.jsx b/src/Hint/story.jsx
index 3d1b6a9..dfc99f9 100644
--- a/src/Hint/story.jsx
+++ b/src/Hint/story.jsx
@@ -30,7 +30,7 @@ storiesOf('Hint', module)
                         </button>    
                         { state.isHovered && <Hint tailPosition={'topLeft'} style={{marginTop:5+'px'}}>Hint</Hint> }
                     </div>
-                    )}
+                )}
             </StateProvider>
         </View>
     ));

From 75400457ac4a69ba7a2b4c9bb106675f59194d74 Mon Sep 17 00:00:00 2001
From: Maks <Sam1812@yandex.ru>
Date: Thu, 6 Oct 2016 15:07:52 +0300
Subject: [PATCH 3/8] Hint

---
 src/Hint/Hint.jsx | 34 +++++++++++++++++-----------------
 src/Hint/Hint.md  |  3 +--
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/Hint/Hint.jsx b/src/Hint/Hint.jsx
index 84dde5a..442ec94 100644
--- a/src/Hint/Hint.jsx
+++ b/src/Hint/Hint.jsx
@@ -24,24 +24,24 @@ export default class Hint extends React.Component {
         const props = this.props;
 
         return (
-                <View styles={[STYLE.hint, ...props.styles || []]}>
-                    <View
-                        styles={[
-                        STYLE.triangle,
-                        (props.tailPosition === 'leftTop' ||  props.tailPosition === 'rightTop') && STYLE.triangleHorizontal ,
-                        (props.tailPosition === 'topLeft' ) && STYLE.triangleVertical ,
-                        props.tailPosition === 'leftTop' && STYLE.leftTop,
-                        props.tailPosition === 'rightTop' && STYLE.rightTop,
-                        props.tailPosition === 'topLeft'&& STYLE.topLeft
-                    ]}
-                    >
-                    </View>
-                    <View styles={[STYLE.textBox]}>
-                        <Text styles={[STYLE.hintText]}>
-                            {props.children}
-                        </Text>
-                    </View>
+            <View styles={[STYLE.hint, ...props.styles || []]}>
+                <View
+                    styles={[
+                    STYLE.triangle,
+                    (props.tailPosition === 'leftTop' ||  props.tailPosition === 'rightTop') && STYLE.triangleHorizontal ,
+                    (props.tailPosition === 'topLeft' ) && STYLE.triangleVertical ,
+                    props.tailPosition === 'leftTop' && STYLE.leftTop,
+                    props.tailPosition === 'rightTop' && STYLE.rightTop,
+                    props.tailPosition === 'topLeft'&& STYLE.topLeft
+                ]}
+                >
                 </View>
+                <View styles={[STYLE.textBox]}>
+                    <Text styles={[STYLE.hintText]}>
+                        {props.children}
+                    </Text>
+                </View>
+            </View>
         )
     }
 }
diff --git a/src/Hint/Hint.md b/src/Hint/Hint.md
index 6c9b486..0ef776f 100644
--- a/src/Hint/Hint.md
+++ b/src/Hint/Hint.md
@@ -5,7 +5,6 @@ import Hint from '@roistat/ui/lib/Hint';
 ```
 
 const View = require('../View').default;
-const StateProvider = require('../StateProvider').default;
 
 *Hint*
 
@@ -20,4 +19,4 @@ const StateProvider = require('../StateProvider').default;
             Button
         </button>    
         { state.isHovered && <Hint tailPosition={'topLeft'} style={{marginTop:5+'px'}}>Hint</Hint> }
-    </View>
\ No newline at end of file
+    </View>

From 5a0d8e29e11bcd273dfe99e1b83407066a0cf0f6 Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Mon, 24 Oct 2016 17:28:53 +0300
Subject: [PATCH 4/8] Update Hint.jsx

---
 src/Hint/Hint.jsx | 98 +++++++++++++++++++++++++++++------------------
 1 file changed, 61 insertions(+), 37 deletions(-)

diff --git a/src/Hint/Hint.jsx b/src/Hint/Hint.jsx
index 442ec94..cd9ac40 100644
--- a/src/Hint/Hint.jsx
+++ b/src/Hint/Hint.jsx
@@ -8,44 +8,37 @@ import { COLOR, FONT } from '../const/theme';
 
 import { StyleSheet, css } from '../helpers/styles';
 
-export default class Hint extends React.Component {
-    static propTypes = {
-        /**
-         * Tail position
-         */
-        tailPosition: PropTypes.oneOf(['leftTop', 'rightTop', 'topLeft'])
-    };
-
-    static defaultProps = {
-        tailPosition: 'leftTop'
-    };
-
-    render() {
-        const props = this.props;
-
-        return (
-            <View styles={[STYLE.hint, ...props.styles || []]}>
-                <View
-                    styles={[
-                    STYLE.triangle,
-                    (props.tailPosition === 'leftTop' ||  props.tailPosition === 'rightTop') && STYLE.triangleHorizontal ,
-                    (props.tailPosition === 'topLeft' ) && STYLE.triangleVertical ,
-                    props.tailPosition === 'leftTop' && STYLE.leftTop,
-                    props.tailPosition === 'rightTop' && STYLE.rightTop,
-                    props.tailPosition === 'topLeft'&& STYLE.topLeft
-                ]}
-                >
-                </View>
-                <View styles={[STYLE.textBox]}>
-                    <Text styles={[STYLE.hintText]}>
-                        {props.children}
-                    </Text>
-                </View>
+const Hint = (props) => {
+    const { tailPosition, ...styles } = props;
+    return (
+        <View className={css(STYLE.hint)} styles={props.styles}>
+            <View className={css(
+                STYLE.triangle, 
+                (['leftTop', 'rightTop', 'leftBottom', 'rightBottom'].indexOf(tailPosition) != -1) && STYLE.triangleHorizontal,
+                (['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].indexOf(tailPosition) != -1) && STYLE.triangleVertical,
+                STYLE.getPreset(tailPosition, '')
+            )} 
+            />
+            <View className={css(STYLE.textBox)}>
+                <Text className={css(STYLE.hintText)}>
+                    {props.children}
+                </Text>
             </View>
-        )
-    }
+        </View>
+    )
 }
 
+Hint.propTypes = {
+    /**
+     * Tail position
+     */
+    tailPosition: PropTypes.oneOf(['leftTop', 'rightTop', 'topLeft', 'leftBottom', 'rightBottom', 'topRight', 'bottomLeft', 'bottomRight']).isRequired
+};
+
+Hint.defaultProps = {
+    tailPosition: 'leftTop'
+};
+
 const STYLE = StyleSheet.create({
     hint: {
         position: 'relative',
@@ -74,7 +67,9 @@ const STYLE = StyleSheet.create({
         borderRight: '1px dashed #d7d8d9'
     },
     leftTop: {
-        transform: 'rotate(45deg) translateX(-6px) translateY(9px)'
+        transform: 'rotate(45deg)',
+        left: '-4px',
+        top: '6px'
     },
     rightTop: {
         transform: 'rotate(225deg)',
@@ -82,7 +77,34 @@ const STYLE = StyleSheet.create({
         top: '6px'
     },
     topLeft: {
-        transform: 'rotate(-45deg) translateX(9px) translateY(-6px)'
+        transform: 'rotate(-45deg)',
+        left: '6px',
+        top: '-4px'
+    },
+    topRight: {
+        transform: 'rotate(-45deg)',
+        right: '6px',
+        top: '-4px'
+    },
+    leftBottom: {
+        transform: 'rotate(45deg)',
+        left: '-4px',
+        bottom: '6px'
+    },
+    rightBottom: {
+        transform: 'rotate(225deg)',
+        right: '-4px',
+        bottom: '6px'
+    },
+    bottomLeft: {
+        transform: 'rotate(135deg)',
+        left: '6px',
+        bottom: '-4px'
+    },
+    bottomRight: {
+        transform: 'rotate(135deg)',
+        right: '6px',
+        bottom: '-4px'
     },
     textBox: {
         flex: 1,
@@ -96,3 +118,5 @@ const STYLE = StyleSheet.create({
         lineHeight: '.95rem'
     }
 });
+
+export default Hint;

From 31e44cc1d8ca5ff350c470fe4db5c039d97956db Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Mon, 24 Oct 2016 17:30:35 +0300
Subject: [PATCH 5/8] Update story.jsx

---
 src/Hint/story.jsx | 37 +++++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/Hint/story.jsx b/src/Hint/story.jsx
index dfc99f9..e27dea5 100644
--- a/src/Hint/story.jsx
+++ b/src/Hint/story.jsx
@@ -5,21 +5,30 @@ import View from '../View';
 import StateProvider from '../StateProvider';
 
 storiesOf('Hint', module)
-    .add('Hint leftTop', () => (
-        <View>
-            <Hint tailPosition={'leftTop'}>Hint</Hint>
-        </View>
-    ))
-    .add('Hint rightTop', () => (
-        <View>
-            <Hint tailPosition={'rightTop'}>Hint</Hint>
-        </View>
-    ))
-    .add('Hint topLeft', () => (
+
+    .add('Hint', () => (
         <View>
-            <Hint tailPosition={'topLeft'}>Hint</Hint>
+            <StateProvider>
+                {(state, setState) => (
+                    <div>
+                        <div>tailPosition:</div>
+                        <select id='tailPosition'  style={{marginBottom:15+'px'}} onChange={() => setState({ tailPosition: document.getElementById("tailPosition").options[document.getElementById("tailPosition").selectedIndex].value })}>
+                            <option value="leftTop">leftTop</option>
+                            <option value="rightTop">rightTop</option>
+                            <option value="topLeft">topLeft</option>
+                            <option value="topRight">topRight</option>
+                            <option value="leftBottom">leftBottom</option>
+                            <option value="rightBottom">rightBottom</option>
+                            <option value="bottomLeft">bottomLeft</option>
+                            <option value="bottomRight">bottomRight</option>
+                        </select>
+                        <Hint tailPosition={state.tailPosition}>Hint</Hint>
+                    </div>
+                    )}
+            </StateProvider>
         </View>
     ))
+
     .add('Hint, showed on hover', () => (
         <View>
             <StateProvider>
@@ -27,10 +36,10 @@ storiesOf('Hint', module)
                     <div>
                         <button onMouseEnter={() => setState({ isHovered: true })} onMouseLeave={() => setState({ isHovered: false })}>
                             Button
-                        </button>    
+                        </button>
                         { state.isHovered && <Hint tailPosition={'topLeft'} style={{marginTop:5+'px'}}>Hint</Hint> }
                     </div>
-                )}
+                    )}
             </StateProvider>
         </View>
     ));

From 9aa56c6afa3f55c82dc07e5030d697c5e65a9ffe Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Mon, 24 Oct 2016 17:33:05 +0300
Subject: [PATCH 6/8] Update Hint.md

---
 src/Hint/Hint.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Hint/Hint.md b/src/Hint/Hint.md
index 0ef776f..9cbd3ce 100644
--- a/src/Hint/Hint.md
+++ b/src/Hint/Hint.md
@@ -5,11 +5,23 @@ import Hint from '@roistat/ui/lib/Hint';
 ```
 
 const View = require('../View').default;
+const StateProvider = require('../StateProvider').default;
 
 *Hint*
 
     <View>
-        <Hint tailPosition={'leftTop'}>Hint</Hint>
+        <div>tailPosition:</div>
+        <select id='tailPosition'  style={{marginBottom:15+'px'}} onChange={() => setState({ tailPosition: document.getElementById("tailPosition").options[document.getElementById("tailPosition").selectedIndex].value })}>
+            <option value="leftTop">leftTop</option>
+            <option value="rightTop">rightTop</option>
+            <option value="topLeft">topLeft</option>
+            <option value="topRight">topRight</option>
+            <option value="leftBottom">leftBottom</option>
+            <option value="rightBottom">rightBottom</option>
+            <option value="bottomLeft">bottomLeft</option>
+            <option value="bottomRight">bottomRight</option>
+        </select>
+        <Hint tailPosition={state.tailPosition}>Hint</Hint>
     </View>
 
 *Hint, showed on hover*

From 334857d125dcb02d78f71106d77e7e81521dd7a0 Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Thu, 27 Oct 2016 09:39:41 +0300
Subject: [PATCH 7/8] Update Hint.jsx

---
 src/Hint/Hint.jsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/Hint/Hint.jsx b/src/Hint/Hint.jsx
index cd9ac40..c0691e1 100644
--- a/src/Hint/Hint.jsx
+++ b/src/Hint/Hint.jsx
@@ -9,9 +9,9 @@ import { COLOR, FONT } from '../const/theme';
 import { StyleSheet, css } from '../helpers/styles';
 
 const Hint = (props) => {
-    const { tailPosition, ...styles } = props;
+    const { tailPosition } = props;
     return (
-        <View className={css(STYLE.hint)} styles={props.styles}>
+        <View styles={[STYLE.hint, ...(props.styles || {})]} >
             <View className={css(
                 STYLE.triangle, 
                 (['leftTop', 'rightTop', 'leftBottom', 'rightBottom'].indexOf(tailPosition) != -1) && STYLE.triangleHorizontal,
@@ -32,7 +32,18 @@ Hint.propTypes = {
     /**
      * Tail position
      */
-    tailPosition: PropTypes.oneOf(['leftTop', 'rightTop', 'topLeft', 'leftBottom', 'rightBottom', 'topRight', 'bottomLeft', 'bottomRight']).isRequired
+    tailPosition: PropTypes.oneOf(
+        [
+            'leftTop', 
+            'rightTop', 
+            'topLeft', 
+            'leftBottom', 
+            'rightBottom', 
+            'topRight', 
+            'bottomLeft', 
+            'bottomRight'
+        ]
+    ).isRequired
 };
 
 Hint.defaultProps = {

From 80ed8468bcd6b2db95c5a03baf56adf4dce917c7 Mon Sep 17 00:00:00 2001
From: Kanonir87 <Kanonir87@gmail.com>
Date: Thu, 27 Oct 2016 10:06:52 +0300
Subject: [PATCH 8/8] Update Hint.jsx

---
 src/Hint/Hint.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Hint/Hint.jsx b/src/Hint/Hint.jsx
index c0691e1..d659f32 100644
--- a/src/Hint/Hint.jsx
+++ b/src/Hint/Hint.jsx
@@ -12,12 +12,13 @@ const Hint = (props) => {
     const { tailPosition } = props;
     return (
         <View styles={[STYLE.hint, ...(props.styles || {})]} >
-            <View className={css(
-                STYLE.triangle, 
-                (['leftTop', 'rightTop', 'leftBottom', 'rightBottom'].indexOf(tailPosition) != -1) && STYLE.triangleHorizontal,
-                (['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].indexOf(tailPosition) != -1) && STYLE.triangleVertical,
-                STYLE.getPreset(tailPosition, '')
-            )} 
+            <View 
+                styles={[
+                    STYLE.triangle, 
+                    (['leftTop', 'rightTop', 'leftBottom', 'rightBottom'].indexOf(tailPosition) != -1) && STYLE.triangleHorizontal,
+                    (['topLeft', 'topRight', 'bottomLeft', 'bottomRight'].indexOf(tailPosition) != -1) && STYLE.triangleVertical,
+                    STYLE.getPreset(tailPosition, '')
+                ]}
             />
             <View className={css(STYLE.textBox)}>
                 <Text className={css(STYLE.hintText)}>