From cfaf297ba92666d31cb9acfd6d4814752958d060 Mon Sep 17 00:00:00 2001
From: Dave Batiste <dave.batiste@d2l.com>
Date: Mon, 1 Feb 2016 16:29:20 -0500
Subject: [PATCH] Add help-text to perceptual diff.

---
 test/test.css        | 10 ++++++++++
 test/test.scss       |  5 +++++
 test/typography.html | 10 ++++++++--
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/test/test.css b/test/test.css
index 5697ec8..9ef2bc1 100644
--- a/test/test.css
+++ b/test/test.css
@@ -111,3 +111,13 @@ td, th {
   margin: 1rem 0 1rem 0;
   text-transform: uppercase;
 }
+
+.help-text {
+  color: #565a5c;
+  font-family: inherit;
+  font-size: 0.7rem;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
+  margin: auto;
+}
diff --git a/test/test.scss b/test/test.scss
index da6a17f..490bf93 100644
--- a/test/test.scss
+++ b/test/test.scss
@@ -1,6 +1,7 @@
 @import '../typography.scss';
 @import '../headings.scss';
 @import '../small-text.scss';
+@import '../help-text.scss';
 
 html {
 	font-size: 20px;
@@ -41,3 +42,7 @@ td {
 .small-strong-text {
 	@include vui-typography-small-strong-text;
 }
+
+.help-text {
+	@include vui-typography-help-text;
+}
diff --git a/test/typography.html b/test/typography.html
index 39ecc2c..e0c60e4 100644
--- a/test/typography.html
+++ b/test/typography.html
@@ -40,8 +40,8 @@ <h1>Typography</h1>
 				</tr>
 				<tr>
 					<th>Paragraph</th>
-					<td style="width: 400px;">
-						<p>Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
+					<td>
+						<p style="width: 430px;">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
 					</td>
 				</tr>
 				<tr>
@@ -56,6 +56,12 @@ <h1>Typography</h1>
 						<div class="small-strong-text">Grumpy Wizards</div>
 					</td>
 				</tr>
+				<tr>
+					<th>Help Text</th>
+					<td>
+						<div style="width: 460px;" class="help-text">Grumpy wizards make toxic brew for the evil Queen and Jack. Grumpy wizards make toxic brew for the evil Queen and Jack.</div>
+					</td>
+				</tr>
 			</tbody>
 		</table>
 	</body>