implimenting tooltip component

ui/src/components/avatar/index.js

@@ -30,12 +30,13 @@ const Letter = styled.p`
 `;
 
 const Avatar = styled.div`
-  border-radius: 50%;
-  height: ${remcalc(50)};
+  border-radius: 100%;
+  height: ${remcalc(42)};
+  display: inline-block;
   overflow: hidden;
   position: relative;
   text-align: center;
-  width: ${remcalc(50)};
+  width: ${remcalc(42)};
 `;
 
 module.exports = ({

ui/src/components/tooltip/index.js

@@ -0,0 +1,93 @@
+// TODO: use a checkbox
+
+const React = require('react');
+const composers = require('../../shared/composers');
+const fns = require('../../shared/functions');
+const Styled = require('styled-components');
+
+const {
+  baseBox,
+  pseudoEl,
+} = composers;
+
+const {
+  remcalc
+} = fns;
+
+const {
+  default: styled
+} = Styled;
+
+const ItemPadder = 9;
+const WrapperPadder = 24;
+const ulPadder = `${WrapperPadder - ItemPadder} 0`;
+
+
+const StyledList = styled.ul`
+  position: relative;
+  background: #fff;
+  color: #646464;
+  display: inline-block;
+  font-family: sans-serif;
+  list-style-type: none;
+  margin: 0;
+  padding: ${remcalc(ulPadder)};
+  min-width: ${remcalc(200)};
+
+  ${baseBox()}
+
+  & > * {
+
+    padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
+
+    &:hover {
+      background: red;
+    }
+  }
+
+  &:after, &:before {
+    border: solid transparent;
+    height: 0;
+    width: 0;
+
+    ${ props => pseudoEl(props.arrowPosition) }
+  }
+
+  &:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #fff;
+    border-width: 10px;
+    margin-left: -10px;
+  }
+  &:before {
+    border-color: rgba(216, 216, 216, 0);
+    border-bottom-color: #d8d8d8;
+    border-width: 12px;
+    margin-left: -12px;
+  }
+`;
+module.exports = ({
+  children,
+  className,
+  style,
+  arrowPosition = {
+    bottom: '100%',
+    left: '10%'
+  }
+}) => {
+  return (
+    <StyledList
+      arrowPosition={arrowPosition}
+      className={className}
+    >
+      {children}
+    </StyledList>
+  );
+};
+
+module.exports.propTypes = {
+  arrowPosition: React.PropTypes.object,
+  children: React.PropTypes.node,
+  className: React.PropTypes.string,
+  style: React.PropTypes.object
+};

ui/src/components/tooltip/readme.md

@@ -0,0 +1,41 @@
+# `<Tooltip>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Tooltip = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Tooltip color='#35a8c0' name='Alex' />
+      </Column>
+      <Column>
+        <Tooltip color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const Tooltip = require('ui/avatar');
+
+module.exports = () => {
+  return (
+    <Tooltip color='#35a8c0' name='Alex' />
+    <Tooltip color='#ef6176' name='Alex' src='path/to/image.png' />
+  );
+}
+```

ui/src/index.js

@@ -18,5 +18,6 @@ module.exports = {
   Select: require('./components/select'),
   Widget: require('./components/widget'),
   Pagination: require('./components/pagination'),
-  Modal: require('./components/modal')
+  Modal: require('./components/modal'),
+  Tooltip: require('./components/tooltip')
 };

ui/src/shared/composers.js

@@ -48,4 +48,7 @@ module.exports = {
     bottom: ${positions.bottom || 'auto'};
     left: ${positions.left || 'auto'};
   `
+  // {
+  //   debugger
+  // }
 };

ui/stories/index.js

@@ -22,6 +22,7 @@ const {
   Tabs,
   Tab,
   Toggle,
+  Tooltip,
   Widget,
   Radio,
   RadioGroup
@@ -265,6 +266,28 @@ storiesOf('Toggle', module)
     <Toggle />
   ));
 
+storiesOf('Tooltip', module)
+  .add('default', () => (
+    <Tooltip>
+      <li>One</li>
+      <li>Two</li>
+      <li>Three</li>
+    </Tooltip>
+  ))
+  .add('custom position', () => {
+    const arrowPosition = {
+      left: '90%',
+      bottom: '100%'
+    };
+    return (
+      <Tooltip arrowPosition={arrowPosition}>
+        <li>One</li>
+        <li>Two</li>
+        <li>Three</li>
+      </Tooltip>
+    );
+  });
+
 storiesOf('Widget', module)
   .add('single', () => (
     <Widget

ui/test/index.js

@@ -119,3 +119,9 @@ test('renders <Notification> without exploding', (t) => {
   const wrapper = shallow(<Pagination />);
   t.deepEqual(wrapper.length, 1);
 });
+
+test('renders <Tooltip> without exploding', (t) => {
+  const Tooltip = require('../src/components/tooltip');
+  const wrapper = shallow(<Tooltip />);
+  t.deepEqual(wrapper.length, 1);
+});