From 6072a6e5ac636c8e33e294ad1daf885547ec0da1 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Thu, 5 Apr 2018 13:02:52 -0400
Subject: [PATCH] docs(usage): add usage docs for avatar, text, thumbnail

---
 core/src/components/avatar/readme.md          | 20 ------------
 core/src/components/avatar/usage/angular.md   | 19 ++++++++++++
 .../src/components/avatar/usage/javascript.md | 19 ++++++++++++
 core/src/components/text/readme.md            | 31 -------------------
 core/src/components/text/usage/angular.md     | 29 +++++++++++++++++
 core/src/components/text/usage/javascript.md  | 29 +++++++++++++++++
 core/src/components/thumbnail/readme.md       | 12 -------
 .../src/components/thumbnail/usage/angular.md | 12 +++++++
 .../components/thumbnail/usage/javascript.md  | 12 +++++++
 9 files changed, 120 insertions(+), 63 deletions(-)
 create mode 100644 core/src/components/avatar/usage/angular.md
 create mode 100644 core/src/components/avatar/usage/javascript.md
 create mode 100644 core/src/components/text/usage/angular.md
 create mode 100644 core/src/components/text/usage/javascript.md
 create mode 100644 core/src/components/thumbnail/usage/angular.md
 create mode 100644 core/src/components/thumbnail/usage/javascript.md

diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
index d579b6ad70..6a474715ff 100644
--- a/core/src/components/avatar/readme.md
+++ b/core/src/components/avatar/readme.md
@@ -4,26 +4,6 @@ Avatars are circular components that usually wrap an image or icon. They can be
 
 Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
-```html
-<ion-avatar>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-avatar>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Chip Avatar</ion-label>
-</ion-chip>
-
-<ion-item>
-  <ion-avatar slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Item Avatar</ion-label>
-</ion-item>
-```
-
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/avatar/usage/angular.md b/core/src/components/avatar/usage/angular.md
new file mode 100644
index 0000000000..6255ae3e9b
--- /dev/null
+++ b/core/src/components/avatar/usage/angular.md
@@ -0,0 +1,19 @@
+```html
+<ion-avatar>
+  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+</ion-avatar>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+
+<ion-item>
+  <ion-avatar slot="start">
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
\ No newline at end of file
diff --git a/core/src/components/avatar/usage/javascript.md b/core/src/components/avatar/usage/javascript.md
new file mode 100644
index 0000000000..6255ae3e9b
--- /dev/null
+++ b/core/src/components/avatar/usage/javascript.md
@@ -0,0 +1,19 @@
+```html
+<ion-avatar>
+  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+</ion-avatar>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Chip Avatar</ion-label>
+</ion-chip>
+
+<ion-item>
+  <ion-avatar slot="start">
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Item Avatar</ion-label>
+</ion-item>
+```
\ No newline at end of file
diff --git a/core/src/components/text/readme.md b/core/src/components/text/readme.md
index 164d679380..293a4d3657 100644
--- a/core/src/components/text/readme.md
+++ b/core/src/components/text/readme.md
@@ -3,37 +3,6 @@
 The text component is a simple component that can be used to style the text color of any element. The `ion-text` element should wrap the element in order to change the text color of that element.
 
 
-```html
-<ion-text color="secondary">
-  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-</ion-text>
-
-<ion-text color="primary">
-  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-</ion-text>
-
-<ion-text color="light">
-  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-</ion-text>
-
-<ion-text color="danger">
-  <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
-</ion-text>
-
-<ion-text color="dark">
-  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
-</ion-text>
-
-<p>
-  I saw a werewolf with a Chinese menu in his hand.
-  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
-  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
-  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
-  <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
-</p>
-```
-
-
 <!-- Auto Generated Below -->
 
 
diff --git a/core/src/components/text/usage/angular.md b/core/src/components/text/usage/angular.md
new file mode 100644
index 0000000000..e2cfc519cf
--- /dev/null
+++ b/core/src/components/text/usage/angular.md
@@ -0,0 +1,29 @@
+```html
+<ion-text color="secondary">
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+</ion-text>
+
+<ion-text color="primary">
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+</ion-text>
+
+<ion-text color="light">
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+</ion-text>
+
+<ion-text color="danger">
+  <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
+</ion-text>
+
+<ion-text color="dark">
+  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+</ion-text>
+
+<p>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
+  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
+  <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
+</p>
+```
\ No newline at end of file
diff --git a/core/src/components/text/usage/javascript.md b/core/src/components/text/usage/javascript.md
new file mode 100644
index 0000000000..e2cfc519cf
--- /dev/null
+++ b/core/src/components/text/usage/javascript.md
@@ -0,0 +1,29 @@
+```html
+<ion-text color="secondary">
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+</ion-text>
+
+<ion-text color="primary">
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+</ion-text>
+
+<ion-text color="light">
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+</ion-text>
+
+<ion-text color="danger">
+  <h4 >H4: The quick brown fox jumps over the lazy dog</h4>
+</ion-text>
+
+<ion-text color="dark">
+  <h5>H5: The quick brown fox jumps over the lazy dog</h5>
+</ion-text>
+
+<p>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <ion-text color="danger"><sub>streets</sub></ion-text> of Soho in the rain.
+  He <ion-text color="primary"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+  Gonna get a <ion-text color="secondary"><a>big dish of beef chow mein.</a></ion-text>
+  <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
+</p>
+```
\ No newline at end of file
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
index c61e608320..355f7347e9 100644
--- a/core/src/components/thumbnail/readme.md
+++ b/core/src/components/thumbnail/readme.md
@@ -4,18 +4,6 @@ Thumbnails are square components that usually wrap an image or icon. They can be
 
 Thumbnails can be used by themselves or inside of any element. If placed inside of an `ion-item`, the thumbnail will resize to fit the parent component. To position a thumbnail on the left or right side of an item, set the slot to `start` or `end`, respectively.
 
-```html
-<ion-thumbnail>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-</ion-thumbnail>
-
-<ion-item>
-  <ion-thumbnail slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-thumbnail>
-  <ion-label>Item Thumbnail</ion-label>
-</ion-item>
-```
 
 <!-- Auto Generated Below -->
 
diff --git a/core/src/components/thumbnail/usage/angular.md b/core/src/components/thumbnail/usage/angular.md
new file mode 100644
index 0000000000..5dca313b70
--- /dev/null
+++ b/core/src/components/thumbnail/usage/angular.md
@@ -0,0 +1,12 @@
+```html
+<ion-thumbnail>
+  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+</ion-thumbnail>
+
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
\ No newline at end of file
diff --git a/core/src/components/thumbnail/usage/javascript.md b/core/src/components/thumbnail/usage/javascript.md
new file mode 100644
index 0000000000..5dca313b70
--- /dev/null
+++ b/core/src/components/thumbnail/usage/javascript.md
@@ -0,0 +1,12 @@
+```html
+<ion-thumbnail>
+  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+</ion-thumbnail>
+
+<ion-item>
+  <ion-thumbnail slot="start">
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-thumbnail>
+  <ion-label>Item Thumbnail</ion-label>
+</ion-item>
+```
\ No newline at end of file