Merge pull request #43 from Brightspace/dbatiste/help-text-perceptual-di

Add help-text to perceptual diff.
BrightspaceUI · Feb 1, 2016 · 81614b5 · 81614b5
2 parents 00a44ff + cfaf297
commit 81614b5
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>