(PDS-380) Add Inconsolata as monospace font

packages/react-components/source/react/library/content/Content.md

@@ -28,6 +28,7 @@ const highlight = element => <span style={style}>{element}</span>;
   <h4>{highlight('h4')} has 8px bottom margin.</h4>
   <h5>{highlight('h5')} has 8px bottom margin.</h5>
   <h6>{highlight('h6')} has 8px bottom margin.</h6>
+  <code>{highlight('`code`')} uses a monospace font</code>
 </Content>;
 ```
 

packages/react-components/source/react/library/text/Text.js

@@ -9,6 +9,8 @@ const propTypes = {
   size: PropTypes.oneOf(['medium', 'small', 'tiny']),
   /** Text color */
   color: PropTypes.oneOf(['subtle', 'medium', 'danger', 'warning', 'success']),
+  /** Use monospace for code block */
+  code: PropTypes.bool,
   /** Text body */
   children: PropTypes.node,
   /** Optional additional classname. */
@@ -23,13 +25,15 @@ const defaultProps = {
   className: '',
   size: 'medium',
   color: null,
+  code: false,
   style: {},
 };
 
 const Text = ({
   as: Element,
   size,
   color,
+  code,
   children,
   className,
   style,
@@ -38,6 +42,7 @@ const Text = ({
   <Element
     className={classNames(
       'rc-text',
+      { 'rc-text-code': code },
       {
         [`rc-text-size-${size}`]: size,
         [`rc-text-${color}`]: color,

packages/react-components/source/react/library/text/Text.md

@@ -32,6 +32,18 @@ The primary (default) text is categorized as Body text, used for page content.
 <Text>Default text size</Text>
 ```
 
+### Monospace
+
+Monospace font should be used for codeblocks.
+
+- Font Family: Inconsolata
+- Font weight: 400 Regular
+- Size / line height: 14px / 20px
+
+```jsx
+<Text code>This is a codeblock</Text>
+```
+
 ## Variations
 
 ### Text sizes

packages/react-components/source/scss/library/components/_content.scss

@@ -29,6 +29,10 @@
     @include puppet-type-h6();
   }
 
+  code {
+    @include puppet-type-code();
+  }
+
   h1,
   h2,
   h3 {

packages/react-components/source/scss/library/components/_text.scss

@@ -11,6 +11,10 @@
   @include puppet-type-tiny();
 }
 
+.rc-text-code {
+  @include puppet-type-code();
+}
+
 @each $color, $code in $puppet-type-colors {
   .rc-text-#{$color} {
     color: $code;

packages/sass-variables/_fonts.scss

@@ -66,3 +66,19 @@
   src: url('./fonts/CalibreWeb-SemiboldItalic.woff2') format('woff2'),
     url('./fonts/CalibreWeb-SemiboldItalic.woff') format('woff');
 }
+
+@font-face {
+  font-family: Inconsolata;
+  font-style: normal;
+  font-weight: 400;
+  src: url('./fonts/Inconsolata-Regular.woff2') format('woff2'),
+    url('./fonts/Inconsolata-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: Inconsolata;
+  font-style: normal;
+  font-weight: 700;
+  src: url('./fonts/Inconsolata-Bold.woff2') format('woff2'),
+    url('./fonts/Inconsolata-Bold.woff') format('woff');
+}

packages/sass-variables/_typography.scss

@@ -1,6 +1,7 @@
 // Common font families
 $puppet-type-font-family: 'Open Sans', sans-serif !default;
 $puppet-type-font-family-secondary: 'Calibre', sans-serif !default;
+$puppet-type-font-family-monospace: 'Inconsolata', monospace !default;
 
 // Common weights
 $puppet-type-weight-normal: 400 !default;
@@ -96,6 +97,16 @@ $puppet-type-label-line-height: calc(16 / 11) !default;
 $puppet-type-label-font-family: $puppet-type-font-family-secondary !default;
 $puppet-type-label-font-weight: $puppet-type-weight-heavy !default;
 
+$puppet-type-code-font-size: 14px !default;
+$puppet-type-code-line-height: calc(20 / 14) !default;
+$puppet-type-code-font-family: $puppet-type-font-family-monospace !default;
+$puppet-type-code-font-weight: 400 !default;
+
+$puppet-type-code-bold-font-size: 14px !default;
+$puppet-type-code-bold-line-height: calc(20 / 14) !default;
+$puppet-type-code-bold-font-family: $puppet-type-font-family-monospace !default;
+$puppet-type-code-bold-font-weight: 700 !default;
+
 @mixin puppet-type-hero($color: base) {
   color: map-get($puppet-type-colors, $color);
   font-family: $puppet-type-hero-font-family;
@@ -201,6 +212,12 @@ $puppet-type-label-font-weight: $puppet-type-weight-heavy !default;
   text-transform: uppercase;
 }
 
+@mixin puppet-type-code($color: base) {
+  color: map-get($puppet-type-colors, $color);
+  font-family: $puppet-type-code-font-family;
+  font-weight: $puppet-type-code-font-weight;
+}
+
 @mixin puppet-type-link() {
   color: $puppet-type-color-link;
   cursor: pointer;