Merge a7c0c33 into 8ef6b8c

react/Tooltip.jsx

@@ -1,36 +1,26 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import {pickRest} from '../lib/utils'
 
-const Tooltip = ({bgcolor, children, content, fgcolor, position, ...props}) => {
+const Tooltip = (props) => {
+  const [ mods, {children, content, ...rest} ] = pickRest(props, ['bottom', 'left', 'primary', 'right', 'top', 'urgent'])
   return (
-    <div {...props} className="tooltip">
-      <div
-        className={`tooltip__content tooltip__content--${position}`}
-        style={{backgroundColor: bgcolor, color: fgcolor}}>
-        {content}
-      </div>
+    <div block='tooltip' {...rest}>
+      <span block='tooltip' elem='content' mods={mods}>{content}</span>
       {children}
     </div>
   )
 }
 
-Tooltip.defaultProps = {
-  bgcolor: 'black',
-  fgcolor: 'white',
-  position: 'top'
-}
-
 Tooltip.propTypes = {
-  bgcolor: PropTypes.string.isRequired,
+  bottom: PropTypes.bool,
   children: PropTypes.any.isRequired,
   content: PropTypes.any.isRequired,
-  fgcolor: PropTypes.string.isRequired,
-  position: PropTypes.oneOf([
-    'top',
-    'right',
-    'bottom',
-    'left'
-  ]).isRequired
+  left: PropTypes.bool,
+  primary: PropTypes.bool,
+  right: PropTypes.bool,
+  top: PropTypes.bool,
+  urgent: PropTypes.bool
 }
 
 export default Tooltip

sass/inc/_tooltip.scss

@@ -4,22 +4,104 @@
   position: relative;
 
   &__content {
-    background-color: $black;
+    background-color: $secondary;
     border-radius: $border-radius;
     color: $white;
-    padding: $grid-gutter 0;
+    display: inline-block;
+    font-size: 9px;
+    line-height: 11px;
+    padding: $grid-gutter/2 $grid-gutter;
     position: absolute;
     text-align: center;
     visibility: hidden;
+    width: max-content;
     z-index: 1;
 
+    $self: &;
+
+    &::after {
+      border-style: solid;
+      border-width: 5px;
+      content: " ";
+      position: absolute;
+    }
+
+    &--primary {
+      background-color: $primary;
+
+      &#{$self}--bottom::after { border-color: transparent transparent $primary transparent; }
+      &#{$self}--left::after { border-color: transparent transparent transparent $primary; }
+      &#{$self}--right::after { border-color: transparent $primary transparent transparent; }
+      &#{$self}--top::after { border-color: $primary transparent transparent transparent; }
+    }
+
+    &--urgent {
+      background-color: $red;
+
+      &#{$self}--bottom::after { border-color: transparent transparent $red transparent; }
+      &#{$self}--left::after { border-color: transparent transparent transparent $red; }
+      &#{$self}--right::after { border-color: transparent $red transparent transparent; }
+      &#{$self}--top::after { border-color: $red transparent transparent transparent; }
+    }
+
+    &--bottom {
+      left: 50%;
+      top: 105%;
+      transform: translateX(-50%);
+
+      &::after {
+        border-color: transparent transparent $secondary transparent;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+      }
+    }
+
+    &--left {
+      top: 50%;
+      right: 105%;
+      transform: translateY(-50%);
+
+      &::after {
+        border-color: transparent transparent transparent $secondary;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    &--right {
+      left: 105%;
+      top: 50%;
+      transform: translateY(-50%);
+
+      &::after {
+        border-color: transparent $secondary transparent transparent;
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
     &--top {
-      bottom: 40px;
-      left: 0;
+      bottom: 105%;
+      left: 50%;
+      transform: translateX(-50%);
+
+      &::after {
+        border-color: $secondary transparent transparent transparent;
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+      }
     }
   }
 
   &:hover &__content {
     visibility: visible;
   }
+
+  .button {
+    margin: 5px;
+  }
 }

test/Tooltip.test.js

@@ -0,0 +1,39 @@
+/* global describe, it */
+import React from 'react'
+import expect from 'must'
+import { shallow } from 'enzyme'
+import Tooltip from '../react/Tooltip'
+
+describe('<Tooltip />', () => {
+  it('renders as a tooltip', () => {
+    const wrapper = shallow(<Tooltip content="testtip">testtip</Tooltip>)
+    expect(wrapper.is('div')).to.be.true()
+    expect(wrapper.hasClass('tooltip')).to.be.true()
+  })
+
+  it('renders as a tooltip__content', () => {
+    const wrapper = shallow(<Tooltip content="testtip">testtip</Tooltip>)
+    expect(wrapper.children()).to.have.length(2)
+    expect(wrapper.children().at(0).is('span')).to.be.true()
+    expect(wrapper.children().at(0).html()).to.equal('<span class="tooltip__content">testtip</span>')
+    expect(wrapper.children().at(1).text()).to.equal('testtip')
+  })
+
+  it('renders classes', () => {
+    const wrapper = shallow(<Tooltip bottom left right top primary urgent content="bar foo">foo bar</Tooltip>)
+    const content = wrapper.children('.tooltip__content')
+    expect(wrapper.hasClass('tooltip')).to.be.true()
+    expect(content.hasClass('tooltip__content--bottom')).to.be.true()
+    expect(content.hasClass('tooltip__content--left')).to.be.true()
+    expect(content.hasClass('tooltip__content--right')).to.be.true()
+    expect(content.hasClass('tooltip__content--top')).to.be.true()
+    expect(content.hasClass('tooltip__content--primary')).to.be.true()
+    expect(content.hasClass('tooltip__content--urgent')).to.be.true()
+  })
+
+  it('renders its text', () => {
+    const wrapper = shallow(<Tooltip content="muspi">lorem ipsum</Tooltip>)
+    expect(wrapper.children('.tooltip__content').text()).to.equal('muspi')
+    expect(wrapper.text()).to.equal('muspilorem ipsum')
+  })
+})

todo/Section/TooltipDemo.jsx

@@ -1,14 +1,16 @@
 import React from 'react'
 
+import Button from '../../react/Button'
+import Icon from '../../react/Icon'
 import Tooltip from '../../react/Tooltip'
 
 const TooltipDemo = () => (
   <div>
     <h3>Tooltips</h3>
-    <Tooltip content="I am on the top">Default Top</Tooltip>
-    <Tooltip content="I am on the bottom">Default Top</Tooltip>
-    <Tooltip content="I am on the right">Default Top</Tooltip>
-    <Tooltip content="I am on the left">Default Top</Tooltip>
+    <Tooltip top content="I am on the top"><Button>Default Top</Button></Tooltip>
+    <Tooltip primary bottom content="I am on the bottom"><Button primary>Primary Bottom</Button></Tooltip>
+    <Tooltip urgent right content="I am on the right"><Button secondary outline>Urgent Right</Button></Tooltip>
+    <Tooltip left content="I am on the left"><Button icon><Icon k='home' /></Button></Tooltip>
   </div>
 )