From 52da7eaba68bdbdb524ecf19b6c80c84264efc2d Mon Sep 17 00:00:00 2001
From: Gustavo Robles <gustavo.robles@magmalabs.io>
Date: Tue, 23 May 2017 13:19:39 +0100
Subject: [PATCH] Update tooltip documentation

---
 .../spree/backend/sections/_style_guide.scss  |  9 ++++
 .../topics/messaging/_tooltips.html.erb       | 45 +++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
index 9f50af29b11..2e059949a8b 100644
--- a/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
+++ b/backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss
@@ -106,6 +106,15 @@
       border: 1px solid darken($color-7, 10%);
     }
   }
+
+  table.with-actions-borders {
+    th, td {
+      &.actions {
+        border-right: 1px solid #cee1f4 !important;
+        border-bottom: 1px solid #cee1f4 !important;
+      }
+    }
+  }
 }
 
 .color-variables {
diff --git a/backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb b/backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb
index f68a8ceb07c..f0cb09ac50e 100644
--- a/backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb
+++ b/backend/app/views/spree/admin/style_guide/topics/messaging/_tooltips.html.erb
@@ -14,3 +14,48 @@
 <div class="style-guide-code">
   <pre><code class="language-html"><%= escape_once snippet %></code></pre>
 </div>
+<br/>
+<%- info_tooltip = capture do %>
+  <a title="Some info." class="fa fa-info-circle with-tip"  href="#"></a>
+<%- end %>
+<table class="with-actions-borders">
+  <thead>
+    <tr>
+      <th> Type </th>
+      <th> Example </th>
+      <th> Code </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <b>Info tooltips</b>
+        These are used to add supplementary information to form labels.
+        The info icon is the coverable area for this tooltip and should be placed at the right side of the form label.
+      </td>
+      <td class="align-center">
+          <%= info_tooltip %>
+      </td>
+      <td>
+        <div class="style-guide-code">
+          <pre><code class="language-html"><%= escape_once info_tooltip %></code></pre>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <b>Adding icon tooltips</b>
+          These are used to add textual context to the action icons used with tabular data like edit, delete, and clone.
+          They are styled with a similar colour to the icon that they’re attached to.
+      </td>
+      <td class="align-center actions">
+        <%= link_to_edit_url('#', title: 'edit', no_text: true) %>
+      </td>
+      <td>
+        <div class="style-guide-code">
+          <pre><code class="language-html"><%= escape_once link_to_edit_url('#', title: 'edit', no_text: true) %></code></pre>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>