feat(tooltip): Extend React.Component

src/components/Tooltip/Tooltip.jsx

@@ -10,17 +10,36 @@ import styles from './Tooltip.modules.scss'
 /**
  * Provide more detailed instructions.
  */
-const Tooltip = ({ direction, children, ...rest }) => {
-  return (
-    <div {...safeRest(rest)} className={styles.wrapper}>
-      <span className={styles[direction]}>
-        {children}
-      </span>
-      <button className={styles.trigger}>
-        <DecorativeIcon symbol="questionMarkCircle" size={16} />
-      </button>
-    </div>
-  )
+class Tooltip extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      opened: false
+    }
+  }
+
+  onClick = (event) => {
+    const { onClick } = this.props
+
+    this.setState({ opened: true })
+  }
+
+  render() {
+    const { direction, children, ...rest } = this.props
+
+    return (
+      <div {...safeRest(rest)} className={styles.wrapper}>
+        <span className={styles[direction]}>
+          {children}
+        </span>
+        <button className={styles.trigger}>
+          <DecorativeIcon symbol="questionMarkCircle" size={16} />
+        </button>
+      </div>
+    )
+
+  }
 }
 
 Tooltip.propTypes = {

src/components/Tooltip/Tooltip.modules.scss

@@ -14,7 +14,7 @@
 }
 
 .base {
-  display: block;
+  display: none;
   //position: absolute;
   // top: -10px;
   // right: 5px;

src/components/Tooltip/__tests__/Tooltip.spec.jsx

@@ -32,21 +32,20 @@ describe('Tooltip', () => {
     expect(tooltip.find('button')).toContainReact(<DecorativeIcon symbol="questionMarkCircle" size={16} />)
   })
 
-  it('has a bubble', () => {
+  it('has a direction', () => {
+    let tooltip = doShallow()
+    expect(tooltip.find('span')).toHaveClassName('right')
+
+    tooltip = doShallow({direction: 'left'})
+    expect(tooltip.find('span')).toHaveClassName('left')
+  })
+
+  it('has a bubble and is hidden by default', () => {
     const tooltip = doShallow()
 
     expect(tooltip.find('span').text()).toEqual('Helper text')
   })
 
-  // it('can set direction', () => {
-  //   let tooltip = doShallow()
-  //   expect(tooltip).toHaveClassName('right')
-  //
-  //   tooltip = doShallow({ direction: 'left' })
-  //   expect(tooltip).toHaveClassName('left')
-  //
-  // })
-
   it('passes additional attributes to the element', () => {
     const tooltip = doShallow({ id: 'the-id', 'data-some-attr': 'some value' })