import React from 'react';
import { storiesOf } from '@kadira/storybook';
import Tooltip from '../../components/Tooltip';
import UnderReviewDecorator from '../UnderReviewDecorator';

storiesOf('Tooltip', module)
  .addDecorator(UnderReviewDecorator)
	.addWithInfo(
    'default',
    `
      Tooltips are used to supply additional information to an element when hovering over it. By default,
      the tooltip will render above the element. The example below shows the default scenario.
    `,
    () => (
      <div style={{ marginTop: '2rem' }}>
        <Tooltip text="This is some tooltip text" className="some-class"><a href="#">Tooltip - hover</a></Tooltip>
      </div>
    ),
  )
  .addWithInfo(
    'position',
    `
      Tooltips are used to supply additional information to an element when hovering over it. By default,
      the tooltip will render above the element. The example below shows specifying the position (supports 'bottom' and 'top')
    `,
    () => (
      <div style={{ marginTop: '2rem' }}>
        <Tooltip position="bottom" text="This is some tooltip text"><div>Tooltip - hover</div></Tooltip>
      </div>
    ),
  );

@@ -115,16 +115,58 @@
 oltip';%0A
+import Link from '../../components/Link';%0A
 import U
@@ -657,17 +657,20 @@
 class%22%3E%3C
-a
+Link
  href=%22#
@@ -688,17 +688,20 @@
  hover%3C/
-a
+Link
 %3E%3C/Toolt

Use a Link component for the Tooltip storybook. Fixes #346 (#347)