design system: adds default font for each component

components/system/components/CardTabGroup.js

@@ -11,6 +11,7 @@ const TAB_GROUP_SIZE_MAP = {
 };
 
 const STYLES_CARD_TAB_GROUP = css`
+  font-family: ${Constants.font.text};
   width: 100%;
   display: flex;
   align-items: flex-start;

components/system/components/CheckBox.js

@@ -5,6 +5,7 @@ import * as SVG from "~/components/system/svg";
 import { css } from "@emotion/react";
 
 const STYLES_CHECKBOX = css`
+  font-family: ${Constants.font.text};
   display: flex;
   align-items: flex-start;
   justify-content: space-between;

components/system/components/CodeBlock.js

@@ -4,7 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_CODE_BLOCK = css`
-  font-family: "mono";
+  font-family: ${Constants.system.mono};
   background-color: ${Constants.system.black};
   color: ${Constants.system.white};
   border-radius: 4px;

components/system/components/Input.js

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import * as React from "react";
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
-import * as SVG from '~/components/system/svg';
+import * as SVG from "~/components/system/svg";
-import * as Strings from '~/common/strings';
+import * as Strings from "~/common/strings";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
-import { DescriptionGroup } from '~/components/system/components/fragments/DescriptionGroup';
+import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 
 const INPUT_STYLES = `
+  font-family: ${Constants.font.text};
   -webkit-appearance: none;
   width: 100%;
   height: 40px;
@@ -33,12 +34,14 @@ const STYLES_INPUT_CONTAINER = css`
 const STYLES_INPUT = css`
   ${INPUT_STYLES}
   padding: 0 24px 0 24px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px ${Constants.system.darkGray};
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
+    inset 0 0 0 1px ${Constants.system.darkGray};
 
   :focus {
     outline: 0;
     border: 0;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), inset 0 0 0 2px ${Constants.system.brand};
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07),
+      inset 0 0 0 2px ${Constants.system.brand};
   }
 
   ::placeholder {
@@ -82,7 +85,7 @@ export class Input extends React.Component {
 
   _handleCopy = (e) => {
     this._input.select();
-    document.execCommand('copy');
+    document.execCommand("copy");
   };
 
   _handleKeyUp = (e) => {
@@ -95,7 +98,10 @@ export class Input extends React.Component {
   };
 
   _handleChange = (e) => {
-    if (!Strings.isEmpty(this.props.pattern) && !Strings.isEmpty(e.target.value)) {
+    if (
+      !Strings.isEmpty(this.props.pattern) &&
+      !Strings.isEmpty(e.target.value)
+    ) {
       const TestRegex = new RegExp(this.props.pattern);
       if (!TestRegex.test(e.target.value)) {
         e.preventDefault();
@@ -116,7 +122,11 @@ export class Input extends React.Component {
   render() {
     return (
       <div css={STYLES_INPUT_CONTAINER} style={this.props.containerStyle}>
-        <DescriptionGroup tooltip={this.props.tooltip} label={this.props.label} description={this.props.description} />
+        <DescriptionGroup
+          tooltip={this.props.tooltip}
+          label={this.props.label}
+          description={this.props.description}
+        />
         <input
           ref={(c) => {
             this._input = c;
@@ -133,12 +143,18 @@ export class Input extends React.Component {
           style={{
             ...this.props.style,
             boxShadow: this.props.validation
-              ? `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px ${INPUT_COLOR_MAP[this.props.validation]}`
+              ? `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px ${
+                  INPUT_COLOR_MAP[this.props.validation]
+                }`
               : null,
           }}
         />
         {this.props.copyable ? (
-          <SVG.CopyAndPaste height="16px" css={STYLES_COPY_AND_PASTE} onClick={this._handleCopy} />
+          <SVG.CopyAndPaste
+            height="16px"
+            css={STYLES_COPY_AND_PASTE}
+            onClick={this._handleCopy}
+          />
         ) : null}
       </div>
     );

components/system/components/Notification.js

@@ -1,13 +1,14 @@
-import * as React from 'react';
+import * as React from "react";
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
-import * as SVG from '~/components/system/svg';
+import * as SVG from "~/components/system/svg";
-import * as Strings from '~/common/strings';
+import * as Strings from "~/common/strings";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
-import { DescriptionGroup } from '~/components/system/components/fragments/DescriptionGroup';
+import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 
 const STYLES_NOTIFICATION = css`
+  font-family: ${Constants.font.text};
   background-color: ${Constants.system.white};
   border-radius: 5px;
   padding: 15px 15px 3px 15px;
@@ -29,7 +30,7 @@ const STYLES_CLOSE = css`
   top: 8px;
   right: 8px;
   cursor: pointer;
-`
+`;
 
 const NOTIF_COLOR_MAP = {
   SUCCESS: Constants.system.lightGreen,
@@ -39,48 +40,67 @@ const NOTIF_COLOR_MAP = {
 };
 
 const ICON_MAP = {
-  SUCCESS: <SVG.CheckCircle 
+  SUCCESS: (
+    <SVG.CheckCircle
       css={STYLES_ICON}
       height="24px"
       style={{
-    color: `${Constants.system.green}`
+        color: `${Constants.system.green}`,
       }}
-  />,
+    />
-  ERROR: <SVG.XCircle 
+  ),
+  ERROR: (
+    <SVG.XCircle
       css={STYLES_ICON}
       height="24px"
       style={{
-    color: `${Constants.system.red}`
+        color: `${Constants.system.red}`,
       }}
-  />,
+    />
-  WARNING: <SVG.AlertCircle 
+  ),
+  WARNING: (
+    <SVG.AlertCircle
       css={STYLES_ICON}
       height="24px"
       style={{
-      color: `${Constants.system.yellow}`
+        color: `${Constants.system.yellow}`,
       }}
-  />,
+    />
-  INFO: <SVG.InfoCircle 
+  ),
+  INFO: (
+    <SVG.InfoCircle
       css={STYLES_ICON}
       height="24px"
       style={{
-      color: `${Constants.system.lightBlue}`
+        color: `${Constants.system.lightBlue}`,
       }}
-  />,
+    />
-}
+  ),
+};
 
 export class Notification extends React.Component {
   render() {
     return (
-      <div css={STYLES_NOTIFICATION} style={{
+      <div
-          boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px 1px ${NOTIF_COLOR_MAP[this.props.status || 'INFO']}`
+        css={STYLES_NOTIFICATION}
+        style={{
+          boxShadow: `0 1px 4px rgba(0, 0, 0, 0.07), 0 0 4px 1px ${
+            NOTIF_COLOR_MAP[this.props.status || "INFO"]
+          }`,
         }}
       >
-        {ICON_MAP[this.props.status || 'INFO']}
+        {ICON_MAP[this.props.status || "INFO"]}
-        <DescriptionGroup tooltip={this.props.tooltip} label={this.props.label} description={this.props.description} 
+        <DescriptionGroup
-          style={{ marginBottom: '0' }}
+          tooltip={this.props.tooltip}
+          label={this.props.label}
+          description={this.props.description}
+          style={{ marginBottom: "0" }}
         />
-        {this.props.onClose ? <SVG.X css={STYLES_CLOSE} onClick={this.props.onClose}/> : <div></div>}
+        {this.props.onClose ? (
+          <SVG.X css={STYLES_CLOSE} onClick={this.props.onClose} />
+        ) : (
+          <div />
+        )}
       </div>
     );
   }

components/system/components/PopoverNavigation.js

@@ -1,14 +1,16 @@
-import * as React from 'react';
+import * as React from "react";
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 const STYLES_POPOVER = css`
+  font-family: ${Constants.font.text};
   position: absolute;
   width: 288px;
   border-radius: 4px;
   background-color: ${Constants.system.white};
-  box-shadow: inset 0 0 0 1px ${Constants.system.border}, 0 1px 4px rgba(0, 0, 0, 0.07);
+  box-shadow: inset 0 0 0 1px ${Constants.system.border},
+    0 1px 4px rgba(0, 0, 0, 0.07);
 `;
 
 const STYLES_POPOVER_ITEM = css`
@@ -32,7 +34,7 @@ const STYLES_POPOVER_ITEM = css`
 export class PopoverNavigation extends React.Component {
   static defaultProps = {
     onNavigateTo: () => {
-      console.error('requires onNavigateTo');
+      console.error("requires onNavigateTo");
     },
   };
 
@@ -41,7 +43,11 @@ export class PopoverNavigation extends React.Component {
       <div css={STYLES_POPOVER} style={this.props.style}>
         {this.props.navigation.map((each) => {
           return (
-            <div key={each.value} css={STYLES_POPOVER_ITEM} onClick={() => this.props.onNavigateTo({ id: each.value })}>
+            <div
+              key={each.value}
+              css={STYLES_POPOVER_ITEM}
+              onClick={() => this.props.onNavigateTo({ id: each.value })}
+            >
               {each.text}
             </div>
           );

components/system/components/RadioGroup.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_RADIO = css`
+  font-family: ${Constants.font.text};
   display: flex;
   align-items: flex-start;
   justify-content: space-between;

components/system/components/SelectMenus.js

@@ -1,12 +1,13 @@
-import * as React from 'react';
+import * as React from "react";
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
-import * as SVG from '~/components/system/svg';
+import * as SVG from "~/components/system/svg";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
-import { DescriptionGroup } from '~/components/system/components/fragments/DescriptionGroup';
+import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
 
 const INPUT_STYLES = `
+  font-family: ${Constants.font.text};
   -webkit-appearance: none;
   width: 100%;
   height: 40px;
@@ -80,7 +81,10 @@ export const SelectMenu = (props) => {
 
       <div css={props.className ? props.className : STYLES_SELECT_MENU}>
         <label css={STYLES_SELECT_MENU_LABEL} htmlFor={`id-${props.name}`}>
-          {props.children} {props.category ? <span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span> : null}
+          {props.children}{" "}
+          {props.category ? (
+            <span css={STYLES_SELECT_MENU_CATEGORY}>{props.category}</span>
+          ) : null}
           <SVG.ChevronDown height="16px" css={STYLES_SELECT_MENU_CHEVRON} />
         </label>
         <select
@@ -88,7 +92,8 @@ export const SelectMenu = (props) => {
           value={props.value}
           onChange={props.onChange}
           name={props.name}
-          id={`id-${props.name}`}>
+          id={`id-${props.name}`}
+        >
           {props.options.map((each) => {
             return (
               <option value={each.value} key={each.value}>
@@ -102,4 +107,6 @@ export const SelectMenu = (props) => {
   );
 };
 
-export const SelectMenuFull = (props) => <SelectMenu {...props} css={STYLES_SELECT_MENU_FULL} />;
+export const SelectMenuFull = (props) => (
+  <SelectMenu {...props} css={STYLES_SELECT_MENU_FULL} />
+);

components/system/components/StatCard.js

@@ -7,6 +7,7 @@ import { LineChart } from "~/vendor/react-chartkick";
 import "chart.js";
 
 const STYLES_STAT_CARD = css`
+  font-family: ${Constants.font.text};
   width: 100%;
   box-shadow: 0 0 0 1px ${Constants.system.gray}, 0 1px 4px rgba(0, 0, 0, 0.04);
   border-radius: 4px;

components/system/components/TabGroup.js

@@ -4,6 +4,7 @@ import * as Constants from "~/common/constants";
 import { css } from "@emotion/react";
 
 const STYLES_TAB_GROUP = css`
+  font-family: ${Constants.font.text};
   width: 100%;
   display: flex;
   align-items: flex-start;

components/system/components/Table.js

@@ -18,6 +18,7 @@ const TABLE_COLUMN_WIDTH_DEFAULTS = {
 };
 
 const STYLES_TABLE_PLACEHOLDER = css`
+  font-family: ${Constants.font.text};
   display: block;
   width: 100%;
   padding: 20px;

components/system/components/Textarea.js

@@ -1,11 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
-import TextareaAutoSize from '~/vendor/react-textarea-autosize';
+import TextareaAutoSize from "~/vendor/react-textarea-autosize";
 
 const STYLES_TEXTAREA = css`
+  font-family: ${Constants.font.text};
   -webkit-appearance: none;
   width: 100%;
   min-height: 160px;
@@ -23,7 +24,8 @@ const STYLES_TEXTAREA = css`
   box-sizing: border-box;
   transition: 200ms ease all;
   padding: 16px 24px 16px 24px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15), inset 0 0 0 1px ${Constants.system.darkGray};
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15),
+    inset 0 0 0 1px ${Constants.system.darkGray};
 `;
 
 export class Textarea extends React.Component {

components/system/components/Toggle.js

@@ -1,9 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
-import * as Constants from '~/common/constants';
+import * as Constants from "~/common/constants";
 
-import { css } from '@emotion/react';
+import { css } from "@emotion/react";
 
 const STYLES_TOGGLE = css`
+  font-family: ${Constants.font.text};
   display: inline-flex;
   height: 40px;
   border-radius: 40px;
@@ -40,8 +41,12 @@ export class Toggle extends React.Component {
         onClick={this._handleChange}
         style={{
           backgroundColor: this.props.active ? Constants.system.brand : null,
-        }}>
+        }}
-        <figure css={STYLES_DIAL} style={{ transform: this.props.active ? `translateX(40px)` : null }} />
+      >
+        <figure
+          css={STYLES_DIAL}
+          style={{ transform: this.props.active ? `translateX(40px)` : null }}
+        />
       </div>
     );
   }

components/system/components/Typography.js

@@ -67,6 +67,7 @@ export const H2 = (props) => {
 };
 
 const STYLES_P = css`
+  font-family: ${Constants.font.text};
   font-size: ${Constants.typescale.lvl1};
   line-height: 1.5;