From 938b70e9e6f4776cb160f432c661f8dcd64fb61c Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 28 Nov 2016 16:17:06 -0200
Subject: [PATCH] create typography documentation with the new template

---
 docs/src/components/DocsComponent.vue     |   2 +-
 docs/src/pages/ui-elements/Typography.vue | 126 +++++++---------------
 2 files changed, 42 insertions(+), 86 deletions(-)

diff --git a/docs/src/components/DocsComponent.vue b/docs/src/components/DocsComponent.vue
index fd5db79..dba6ba1 100644
--- a/docs/src/components/DocsComponent.vue
+++ b/docs/src/components/DocsComponent.vue
@@ -7,7 +7,7 @@
         <slot name="description"></slot>
       </section>
 
-      <section class="api-documentation">
+      <section class="api-documentation" v-if="$slots.api">
         <h2 class="md-headline">API Options</h2>
 
         <slot name="api"></slot>
diff --git a/docs/src/pages/ui-elements/Typography.vue b/docs/src/pages/ui-elements/Typography.vue
index 049b604..bf009c9 100644
--- a/docs/src/pages/ui-elements/Typography.vue
+++ b/docs/src/pages/ui-elements/Typography.vue
@@ -1,96 +1,52 @@
 <template>
-  <single-page label="UI Elements - Typography">
-    <div>
-      <div class="column">
-        <code>.md-display-4</code>
+  <page-content page-title="Typography">
+    <docs-component>
+      <div slot="description">
+        <h2 class="md-title">Styles</h2>
+        <p>Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.</p>
+        <h2 class="md-title">Typeface</h2>
+        <p>Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic.</p>
       </div>
-      <h1 class="md-display-4">Display 4</h1>
-    </div>
 
-    <div>
-      <div class="column">
-        <code>.md-display-3</code>
-      </div>
-      <h1 class="md-display-3">Display 3</h1>
-    </div>
+      <div slot="example">
+        <example-box card-title="Default">
+          <div class="demo" slot="demo">
+            <span class="md-display-4">Display 4</span>
+            <span class="md-display-3">Display 3</span>
+            <span class="md-display-2">Display 2</span>
+            <span class="md-display-1">Display 1</span>
+            <span class="md-headline">Headline</span>
+            <span class="md-title">Title</span>
+            <span class="md-subheading">Subheading</span>
+            <span class="md-body-2">Body 2</span>
+            <span class="md-body-1">Body 1</span>
+            <span class="md-caption">Caption</span>
+            <a href="#/typography">Link</a>
+          </div>
 
-    <div>
-      <div class="column">
-        <code>.md-display-2</code>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;h1 class=&quot;md-display-4&quot;&gt;Display 4&lt;/h1&gt;
+              &lt;h1 class=&quot;md-display-3&quot;&gt;Display 3&lt;/h1&gt;
+              &lt;h1 class=&quot;md-display-2&quot;&gt;Display 2&lt;/h1&gt;
+              &lt;h1 class=&quot;md-display-1&quot;&gt;Display 1&lt;/h1&gt;
+              &lt;h1 class=&quot;md-headline&quot;&gt;Headline&lt;/h1&gt;
+              &lt;h1 class=&quot;md-title&quot;&gt;Title&lt;/h1&gt;
+              &lt;h1 class=&quot;md-subheading&quot;&gt;Subheading&lt;/h1&gt;
+              &lt;h1 class=&quot;md-body-2&quot;&gt;Body 2&lt;/h1&gt;
+              &lt;h1 class=&quot;md-body-1&quot;&gt;Body 1&lt;/h1&gt;
+              &lt;h1 class=&quot;md-caption&quot;&gt;Caption&lt;/h1&gt;
+            </code-block>
+          </div>
+        </example-box>
       </div>
-      <h1 class="md-display-2">Display 2</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-display-1</code>
-      </div>
-      <h1 class="md-display-1">Display 1</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-headline</code>
-      </div>
-      <h1 class="md-headline">Headline</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-title</code>
-      </div>
-      <h1 class="md-title">Title</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-subheading</code>
-      </div>
-      <h1 class="md-subheading">Subheading</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-body-2</code>
-      </div>
-      <h1 class="md-body-2">Body 2</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-body-1</code>
-      </div>
-      <h1 class="md-body-1">Body 1</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>.md-caption</code>
-      </div>
-      <h1 class="md-caption">Caption</h1>
-    </div>
-
-    <div>
-      <div class="column">
-        <code>Link</code>
-      </div>
-      <a>Link</a>
-    </div>
-  </single-page>
+    </docs-component>
+  </page-content>
 </template>
 
 <style lang="scss" scoped>
-  .column {
-    width: 175px;
-  }
-
-  .column,
-  h1 {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  h1 {
+  .demo > * {
     margin: .5em 0;
+    display: block;
   }
 </style>