(PDS-380) Add Inconsolata as monospace font

packages/react-components/source/index.js

@@ -27,6 +27,7 @@ import Logo from './react/library/logo';
 import Tabs from './react/library/tabs';
 import Breadcrumb from './react/library/breadcrumb';
 import ConfirmationModal from './react/library/confirmation-modal';
+import Code from './react/library/code';
 
 export {
   ActionSelect,
@@ -55,4 +56,5 @@ export {
   Tabs,
   Breadcrumb,
   ConfirmationModal,
+  Code,
 };

packages/react-components/source/react/library/code/Code.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  /** Html element or react component to render */
+  as: PropTypes.elementType,
+  /** Code Size */
+  size: PropTypes.oneOf(['medium', 'small']),
+  /** Code body */
+  children: PropTypes.node,
+  /** Optional additional classname. */
+  className: PropTypes.string,
+  /** Optional inline style. Additionally, other event handlers and and props are propagated to the inner element for use as needed */
+  style: PropTypes.shape({}),
+};
+
+const defaultProps = {
+  as: 'code',
+  children: '',
+  className: '',
+  size: 'medium',
+  style: {},
+};
+
+const Code = ({ as: Element, size, children, className, style, ...other }) => (
+  <Element
+    className={classNames(
+      'rc-code',
+      {
+        [`rc-code-size-${size}`]: size,
+      },
+      className,
+    )}
+    style={style}
+    {...other}
+  >
+    {children}
+  </Element>
+);
+
+Code.propTypes = propTypes;
+Code.defaultProps = defaultProps;
+
+export default Code;

packages/react-components/source/react/library/code/Code.md

@@ -0,0 +1,52 @@
+## Overview
+
+See also: [Heading](#/React%20Components/Heading) [Text](#/React%20Components/Text) and [Content](#/React%20Components/Content)
+
+## Types
+
+### Primary
+
+The Code component font should be used for codeblocks. The default styles for this component are:
+
+- Font Family: Inconsolata
+- Font weight: 400 Regular
+- Size / line height: 16px / 20px
+
+```jsx
+import Text from '../text';
+
+<>
+  <Code>This is a codeblock</Code>
+  <div>
+    <Code>
+      <strong>Code</strong>
+    </Code>
+    <Text as="span">
+      {' '}
+      defaults to rendering as a <Code>{`<code>`}</Code> tag so you can use it in
+      line with a <Code>
+        <strong>Text</strong>
+      </Code> component.
+    </Text>
+  </div>
+</>;
+```
+
+## Variations
+
+### Code sizes
+
+Most code should have a size of medium, the default, but the small code variant is also available by adding the `size` prop.
+
+```jsx
+<Code as="div"><strong>Medium:</strong> This code is the most common size.</Code>
+<Code as="div" size="small"><strong>Small:</strong> Small code is used in some places.</Code>
+
+```
+
+## Related
+
+- [Color](#/React%20Components/Colors)
+- [Content](#/React%20Components/Content)
+- [Heading](#/React%20Components/Heading)
+- [Link](#/React%20Components/Link)

packages/react-components/source/react/library/code/index.js

@@ -0,0 +1,3 @@
+import Code from './Code';
+
+export default Code;

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.md

@@ -14,9 +14,9 @@ The following 3 font families are utilized in a variety of styles. The use cases
 
 - <strong>Calibre</strong>: Headings, titles, navigation, visualizations, and other primary elements (See [Heading](#/React%20Components/Heading))
 - <strong>Open Sans</strong>: Body copy and general UI elements and content (like this `Text` component)
-- <strong>Inconsolata</strong>: Code samples
+- <strong>Inconsolata</strong>: Code samples (See [Code](#/React%20Components/Code))
 
-See also: [Heading](#/React%20Components/Heading) and [Content](#/React%20Components/Content)
+See also: [Heading](#/React%20Components/Heading), [Code](#/React%20Components/Code) and [Content](#/React%20Components/Content)
 
 ## Types
 
@@ -74,3 +74,4 @@ Our "stoplight" colors are reserved to apply meaning, or state, within a given c
 - [Content](#/React%20Components/Content)
 - [Heading](#/React%20Components/Heading)
 - [Link](#/React%20Components/Link)
+- [Code](#/React%20Components/Code)

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

@@ -0,0 +1,7 @@
+.rc-code {
+  @include puppet-type-code();
+}
+
+.rc-code-size-small {
+  @include puppet-type-code-small();
+}

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/ui.scss

@@ -28,3 +28,4 @@
 @import 'components/logo';
 @import 'components/table';
 @import 'components/breadcrumb';
+@import 'components/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: 16px !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: $puppet-type-weight-normal !default;
+
+$puppet-type-code-small-font-size: 14px !default;
+$puppet-type-code-small-line-height: calc(20 / 12) !default;
+$puppet-type-code-small-font-family: $puppet-type-font-family-monospace !default;
+$puppet-type-code-small-font-weight: $puppet-type-weight-normal !default;
+
 @mixin puppet-type-hero($color: base) {
   color: map-get($puppet-type-colors, $color);
   font-family: $puppet-type-hero-font-family;
@@ -201,6 +212,20 @@ $puppet-type-label-font-weight: $puppet-type-weight-heavy !default;
   text-transform: uppercase;
 }
 
+@mixin puppet-type-code() {
+  font-family: $puppet-type-code-font-family;
+  font-size: $puppet-type-code-font-size;
+  font-weight: $puppet-type-code-font-weight;
+  line-height: $puppet-type-code-line-height;
+}
+
+@mixin puppet-type-code-small() {
+  font-family: $puppet-type-code-small-font-family;
+  font-size: $puppet-type-code-small-font-size;
+  font-weight: $puppet-type-code-small-font-weight;
+  line-height: $puppet-type-code-small-line-height;
+}
+
 @mixin puppet-type-link() {
   color: $puppet-type-color-link;
   cursor: pointer;