Merge pull request #474 from primer/task/add-text-mono-util

Add text-mono utility class

modules/primer-utilities/docs/typography.md

@@ -93,6 +93,7 @@ Change the font weight, styles, and alignment with these utilities.
 <p class="text-emphasized">Emphasized</p>
 <p class="text-small">Small</p>
 <p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
+<p class="text-mono">Monospace</p>
 ```
 
 ## Text alignment

modules/primer-utilities/lib/typography.scss

@@ -214,3 +214,8 @@
 .text-shadow-light {
   text-shadow: 0 1px 0 rgba($white, 0.5);
 }
+
+/* Set to monospace font */
+.text-mono {
+  font-family: $mono-font;
+}

modules/primer-utilities/stories/Typography.js

@@ -57,6 +57,7 @@ storiesOf('Typography utilities', module)
     <p className='text-emphasized'>text-emphasized</p>
     <p className='text-small'>text-small</p>
     <p className='lead'>lead</p>
+    <p className='text-mono'>text-mono</p>
   </div>
 ))
 .add('text alignment', () => (