Add Title and SubTitle components.

src/ui/public/styles/base.less

@@ -710,14 +710,6 @@ fieldset {
     flex: 1 1 auto;
   }
 
-/**
- * 1. Override h1.
- */
-.kuiTitle {
-  margin: 0; // 1
-  font-size: 22px;
-}
-
 .kuiBadge {
   display: inline-block;
   margin-left: 0.5em;

ui_framework/components/index.scss

@@ -249,4 +249,5 @@ body {
 @import "table/index";
 @import "tabs/index";
 @import "tool_bar/index";
+@import "typography/index";
 @import "vertical_rhythm/index";

ui_framework/components/typography/_index.scss

@@ -0,0 +1 @@
+@import "typography";

ui_framework/components/typography/_typography.scss

@@ -0,0 +1,19 @@
+/**
+ * 1. Override h1.
+ */
+.kuiTitle {
+  margin: 0; /* 1 */
+  font-weight: 400; /* 1 */
+  color: $fontColor;
+  font-size: 22px;
+}
+
+/**
+ * 1. Override h2, h3, etc.
+ */
+.kuiSubTitle {
+  margin: 0; /* 1 */
+  font-weight: 400; /* 1 */
+  color: $fontColor;
+  font-size: 18px;
+}

ui_framework/dist/ui_framework.css

@@ -1403,5 +1403,27 @@ body {
   white-space: nowrap;
   /* 1 */ }
 
+/**
+ * 1. Override h1.
+ */
+.kuiTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  color: #191E23;
+  font-size: 22px; }
+
+/**
+ * 1. Override h2, h3, etc.
+ */
+.kuiSubTitle {
+  margin: 0;
+  /* 1 */
+  font-weight: 400;
+  /* 1 */
+  color: #191E23;
+  font-size: 18px; }
+
 .kuiVerticalRhythm + .kuiVerticalRhythm {
   margin-top: 10px; }

ui_framework/doc_site/src/services/routes/routes.js

@@ -40,6 +40,9 @@ import TabsExample
 import ToolBarExample
   from '../../views/tool_bar/tool_bar_example.jsx';
 
+import TypographyExample
+  from '../../views/typography/typography_example.jsx';
+
 import VerticalRhythmExample
   from '../../views/vertical_rhythm/vertical_rhythm_example.jsx';
 
@@ -83,6 +86,9 @@ const components = [{
 }, {
   name: 'ToolBar',
   component: ToolBarExample,
+}, {
+  name: 'Typography',
+  component: TypographyExample,
 }, {
   name: 'VerticalRhythm',
   component: VerticalRhythmExample,

ui_framework/doc_site/src/views/bar/bar.html

@@ -1,12 +1,7 @@
  <div class="kuiBar">
   <div class="kuiBarSection">
-    <div class="kuiButtonGroup">
-      <button class="kuiButton kuiButton--basic">
-        See previous 10 pages
-      </button>
-      <button class="kuiButton kuiButton--basic">
-        See next 10 pages
-      </button>
+    <div class="kuiTitle">
+      The Great American Novel
     </div>
   </div>
 

ui_framework/doc_site/src/views/bar/bar_three_sections.html

@@ -1,12 +1,7 @@
  <div class="kuiBar">
   <div class="kuiBarSection">
-    <div class="kuiButtonGroup">
-      <button class="kuiButton kuiButton--basic">
-        See previous 10 pages
-      </button>
-      <button class="kuiButton kuiButton--basic">
-        See next 10 pages
-      </button>
+    <div class="kuiTitle">
+      The Great American Novel
     </div>
   </div>
 

ui_framework/doc_site/src/views/typography/sub_title.html

@@ -0,0 +1,3 @@
+<h2 class="kuiSubTitle">
+  Chapter 1: The River on a Cold Morning
+</h2>

ui_framework/doc_site/src/views/typography/title.html

@@ -0,0 +1,3 @@
+<h1 class="kuiTitle">
+  The Great American Novel
+</h1>

ui_framework/doc_site/src/views/typography/typography_example.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import {
+  createExample,
+} from '../../services';
+
+export default createExample([{
+  title: 'Title',
+  description: (
+    <p>Works well with an H1.</p>
+  ),
+  html: require('./title.html'),
+  hasDarkTheme: false,
+}, {
+  title: 'SubTitle',
+  description: (
+    <p>Works well with an H2.</p>
+  ),
+  html: require('./sub_title.html'),
+  hasDarkTheme: false,
+}]);