From 47dee2cdbced7f519c1b8a140a66475677ca1219 Mon Sep 17 00:00:00 2001
From: Diana Mounter <broccolini@github.com>
Date: Wed, 15 Nov 2017 12:38:44 -0500
Subject: [PATCH] add tooltip stories

---
 modules/primer-tooltips/stories.js | 82 ++++++++++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 modules/primer-tooltips/stories.js

diff --git a/modules/primer-tooltips/stories.js b/modules/primer-tooltips/stories.js
new file mode 100644
index 00000000..579876b3
--- /dev/null
+++ b/modules/primer-tooltips/stories.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+storiesOf('Tooltips', module)
+.add('tooltipped direction', () => (
+  <div className='p-4'>
+    <span className='tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North side.'>
+    Tooltip North
+    </span>
+    <span className='tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North East side.'>
+      Tooltip North East
+    </span>
+    <span className='tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the East side.'>
+      Tooltip East
+    </span>
+    <span className='tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South East side.'>
+      Tooltip South East
+    </span>
+    <span className='tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South side.'>
+      Tooltip South
+    </span>
+    <span className='tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the South West side.'>
+      Tooltip South West
+    </span>
+    <span className='tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the West side.'>
+      Tooltip West
+    </span>
+    <span className='tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left' aria-label='This is the tooltip on the North West side.'>
+      Tooltip North West
+    </span>
+  </div>
+))
+.add('tooltip aligned', () => (
+  <div className='p-4'>
+    <span className='tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
+    Tooltip North East align left 1
+    </span>
+    <span className='tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NE and aligned left.'>
+    Tooltip North East align left 2
+    </span>
+    <span className='tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
+    Tooltip South East align left 1
+    </span>
+    <span className='tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SW and aigned left.'>
+    Tooltip South East align left 2
+    </span>
+    <span className='tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
+      Tooltip North West align right 1
+    </span>
+    <span className='tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped NW and aligned right.'>
+      Tooltip North West align right 2
+    </span>
+    <span className='tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
+      Tooltip South West align right 1
+    </span>
+    <span className='tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left' aria-label='Tooltipped SE and aligned right.'>
+      Tooltip South West align right 2
+    </span>
+  </div>
+  ))
+  .add('tootlipped-multiline', () => (
+    <div className='p-6'>
+      <span className='tooltipped tooltipped-multiline tooltipped-s border p-2 mr-2' aria-label='This is the tooltip with multiple lines. This is the tooltip with multiple lines.'>
+        Tooltip with multiple lines
+      </span>
+      <span className='tooltipped tooltipped-multiline tooltipped-sw tooltipped-align-right-2 border p-2' aria-label='This is the tooltip with multiple lines. This is the tooltip with multiple lines.'>
+        Tooltip with multiple lines
+      </span>
+    </div>
+  ))
+  .add('tootlip no delay', () => (
+    <div className='p-6'>
+      <span className='tooltipped tooltipped-n tooltipped-no-delay border p-2' aria-label='This is a tooltip with no delay.'>
+        Tooltip no delay
+      </span>
+    </div>
+  ))
+  .add('tooltip on button', () => (
+    <div className='p-6'>
+    <button className='btn btn-secondary tooltipped tooltipped-n' aria-label='This is the tooltip on a button.'>Button</button>
+    </div>
+))