elastic · cjcenizal · Jul 24, 2017 · Jul 21, 2017 · Jul 21, 2017 · Jul 21, 2017
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -1,8 +1,26 @@
+.kui--codeFont {
+  font-family: "Roboto Mono", monospace; }
+
 .kui--fontSizeSmall, .kuiKeyPad {
   font-size: 14px;
   font-size: 0.875rem;
   line-height: 24px; }
 
+.kuiTitle--small, .kuiText {
+  font-size: 16px;
+  font-size: 1rem;
+  line-height: 24px; }
+
+.kuiTitle {
+  font-size: 24px;
+  font-size: 1.5rem;
+  line-height: 36px; }
+
+.kuiTitle--large {
+  font-size: 32px;
+  font-size: 2rem;
+  line-height: 48px; }
+
 /**
  * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
  *
@@ -128,25 +146,12 @@ table {
 .kui--verticalAlignMiddle {
   vertical-align: middle !important; }
 
+.kui--subduedText {
+  color: #666; }
+
 .kui--bottomShadow {
   box-shadow: 0 16px 16px -8px rgba(0, 0, 0, 0.1); }
 
-.kuiIcon {
-  display: inline-block;
-  fill: #3F3F3F; }
-  .kuiIcon--medium {
-    width: 16px;
-    height: 16px; }
-  .kuiIcon--large {
-    width: 24px;
-    height: 24px; }
-  .kuiIcon--xLarge {
-    width: 32px;
-    height: 32px; }
-  .kuiIcon--xxLarge {
-    width: 40px;
-    height: 40px; }
-
 .kuiHeader {
   background: #FFF;
   border-bottom: 1px solid #D9D9D9; }
@@ -236,6 +241,22 @@ table {
     .kuiHeaderItem__button:focus {
       background: #e6f2f6; }
 
+.kuiIcon {
+  display: inline-block;
+  fill: #3F3F3F; }
+  .kuiIcon--medium {
+    width: 16px;
+    height: 16px; }
+  .kuiIcon--large {
+    width: 24px;
+    height: 24px; }
+  .kuiIcon--xLarge {
+    width: 32px;
+    height: 32px; }
+  .kuiIcon--xxLarge {
+    width: 40px;
+    height: 40px; }
+
 .kuiKeyPad {
   display: -webkit-box;
   display: -webkit-flex;
@@ -335,3 +356,11 @@ table {
     .kuiPopMenu--anchorRight .kuiPopMenu__body:before, .kuiPopMenu--anchorRight .kuiPopMenu__body:after {
       right: 16px;
       left: auto; }
+
+.kuiTitle {
+  color: #000;
+  font-weight: 300; }
+
+.kuiText {
+  color: #3F3F3F;
+  font-weight: 400; }
diff --git a/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF8">
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Roboto+Mono:400" rel="stylesheet">
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <script src="https://use.fontawesome.com/a9649923ac.js"></script>
   </head>

diff --git a/ui_framework/doc_site/src/components/guide_code/_guide_code.scss b/ui_framework/doc_site/src/components/guide_code/_guide_code.scss
@@ -1,6 +1,6 @@
 .guideCode {
   padding: 2px 4px;
-  font-family: 'Ubuntu Mono', monospace;
+  font-family: 'Roboto Mono', monospace;
   background-color: #e8e8e8;
   color: #565656;
 }
diff --git a/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
@@ -64,7 +64,7 @@
   color: #637c84;
   font-size: 14px;
   line-height: 1.3;
-  font-family: 'Ubuntu Mono', monospace;
+  font-family: 'Roboto Mono', monospace;
 }
 
 .hljs-keyword {

diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
@@ -9,6 +9,9 @@ import IconExample
 import HeaderExample
   from '../../views/header/header_example';
 
+import TypographyExample
+  from '../../views/typography/typography_example';
+
 // Component route names should match the component name exactly.
 const components = [{
   name: 'Accessibility',
@@ -17,9 +20,14 @@ const components = [{
 }, {
   name: 'Icon',
   component: IconExample,
+  hasReact: true,
 }, {
   name: 'Header',
   component: HeaderExample,
+}, {
+  name: 'Typography',
+  component: TypographyExample,
+  hasReact: true,
 }];
 
 const sandboxes = [];

diff --git a/ui_framework/doc_site/src/views/header/header.html b/ui_framework/doc_site/src/views/header/header.html
@@ -58,7 +58,7 @@
                 <p>Discover</p>
               </a>
               <a href="" class="kuiKeyPad__item">
-                <svg class="kuiIcon kuiIcon--xLarge">
+                <svg class="kuiIcon kuiIcon--xLarge kuiKeyPad__icon">
                   <use href="#app_dashboard" />
                 </svg>
                 <p>Discover</p>

diff --git a/ui_framework/doc_site/src/views/typography/large_title.js b/ui_framework/doc_site/src/views/typography/large_title.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {
+  KuiTitle,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiTitle size="large">
+      <h1>This is the title of the page</h1>
+    </KuiTitle>
+
+    <KuiTitle size="large">
+      <h2>This is a LargeTitle applied to an h2 element</h2>
+    </KuiTitle>
+  </div>
+);
diff --git a/ui_framework/doc_site/src/views/typography/medium_title.js b/ui_framework/doc_site/src/views/typography/medium_title.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  KuiTitle,
+} from '../../../../components';
+
+export default () => (
+  <KuiTitle>
+    <h2>Here's the title of a section</h2>
+  </KuiTitle>
+);
diff --git a/ui_framework/doc_site/src/views/typography/small_title.js b/ui_framework/doc_site/src/views/typography/small_title.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  KuiTitle,
+} from '../../../../components';
+
+export default () => (
+  <KuiTitle size="small">
+    <h3>An h3 element is used for this title</h3>
+  </KuiTitle>
+);
diff --git a/ui_framework/doc_site/src/views/typography/text.js b/ui_framework/doc_site/src/views/typography/text.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+import {
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <KuiText>
+    <p>
+      The quick brown fox jumped over the lazy dog. But the lazy dog wasn't lazy, it was just
+      practicing mindfulness, so really in the long run it was much more satisfied with its
+      life than that fox was.
+    </p>
+  </KuiText>
+);
diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import {
+  KuiTitle,
+  KuiText,
+} from '../../../../components';
+
+export default () => (
+  <div>
+    <KuiTitle size="large">
+      <h1>This is the title of the page -- descriptive enough for ya?</h1>
+    </KuiTitle>
+
+    <KuiTitle>
+      <h2>And this is a section within the page</h2>
+    </KuiTitle>
+
+    <KuiTitle size="small">
+      <h3>Note</h3>
+    </KuiTitle>
+
+    <KuiText>
+      <p>
+        The quick brown fox jumped over the lazy dog.
+      </p>
+    </KuiText>
+
+    <KuiText>
+      <p>
+        But the dog wasn't lazy, it was just
+        practicing mindfulness, so it had a greater sense of
+        life-satisfaction than that fox with all its jumping.
+      </p>
+    </KuiText>
+  </div>
+);
diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js
@@ -0,0 +1,132 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideDemo,
+  GuidePage,
+  GuideSection,
+  GuideSectionTypes,
+  GuideText,
+} from '../../components';
+
+import Typography from './typography';
+const typographySource = require('!!raw!./typography');
+const typographyHtml = renderToHtml(Typography);
+
+import LargeTitle from './large_title';
+const pageTitleSource = require('!!raw!./large_title');
+const pageTitleHtml = renderToHtml(LargeTitle);
+
+import MediumTitle from './medium_title';
+const sectionTitleSource = require('!!raw!./medium_title');
+const sectionTitleHtml = renderToHtml(MediumTitle);
+
+import SmallTitle from './small_title';
+const objectTitleSource = require('!!raw!./small_title');
+const objectTitleHtml = renderToHtml(SmallTitle);
+
+import Text from './text';
+const textSource = require('!!raw!./text');
+const textHtml = renderToHtml(Text);
+
+export default props => (
+  <GuidePage title={props.route.name}>
+    <GuideSection
+      title="Typography"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: typographySource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: typographyHtml,
+      }]}
+    >
+      <GuideDemo>
+        <Typography />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Large Title"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: pageTitleSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: pageTitleHtml,
+      }]}
+    >
+      <GuideText>
+        The large size is usually used to identify the page you're on. Generally, there should
+        only be one of these used at a time.
+      </GuideText>
+
+      <GuideText>
+        You can specify which heading element to use by passing it in
+        as a child. The heading element can be absolutely anything.
+      </GuideText>
+
+      <GuideDemo>
+        <LargeTitle />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Medium Title"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: sectionTitleSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: sectionTitleHtml,
+      }]}
+    >
+      <GuideText>
+        This size is commonly used to identify sections within a page. It's also the default size.
+      </GuideText>
+
+      <GuideDemo>
+        <MediumTitle />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Small Title"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: objectTitleSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: objectTitleHtml,
+      }]}
+    >
+      <GuideText>
+        This size is commonly used to identify subsections within a section.
+      </GuideText>
+
+      <GuideDemo>
+        <SmallTitle />
+      </GuideDemo>
+    </GuideSection>
+
+    <GuideSection
+      title="Text"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: textSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: textHtml,
+      }]}
+    >
+      <GuideText>
+        You'll generally use this component for paragraphs.
+      </GuideText>
+
+      <GuideDemo>
+        <Text />
+      </GuideDemo>
+    </GuideSection>
+  </GuidePage>
+);
diff --git a/ui_framework/src/components/index.js b/ui_framework/src/components/index.js
@@ -5,3 +5,8 @@ export {
 export {
   KuiIcon,
 } from './icon';
+
+export {
+  KuiTitle,
+  KuiText,
+} from './typography';
diff --git a/ui_framework/src/components/index.scss b/ui_framework/src/components/index.scss
@@ -1,4 +1,5 @@
-@import './icon/index';
 @import './header/index';
+@import './icon/index';
 @import './key_pad/index';
 @import './pop_menu/index';
+@import './typography/index';