From d7fb1baf6ee5ec66e36839b0ec4a9e61b273caa0 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 2 Sep 2022 18:56:06 -0400
Subject: [PATCH] docs(text): add basic usage playground and link to theming
 docs

---
 docs/api/text.md                      | 53 +++----------------------
 static/usage/text/basic/angular.md    | 21 ++++++++++
 static/usage/text/basic/demo.html     | 57 +++++++++++++++++++++++++++
 static/usage/text/basic/index.md      |  8 ++++
 static/usage/text/basic/javascript.md | 21 ++++++++++
 static/usage/text/basic/react.md      | 32 +++++++++++++++
 static/usage/text/basic/vue.md        | 38 ++++++++++++++++++
 7 files changed, 183 insertions(+), 47 deletions(-)
 create mode 100644 static/usage/text/basic/angular.md
 create mode 100644 static/usage/text/basic/demo.html
 create mode 100644 static/usage/text/basic/index.md
 create mode 100644 static/usage/text/basic/javascript.md
 create mode 100644 static/usage/text/basic/react.md
 create mode 100644 static/usage/text/basic/vue.md

diff --git a/docs/api/text.md b/docs/api/text.md
index f2cf72570cc..e52f85142fb 100644
--- a/docs/api/text.md
+++ b/docs/api/text.md
@@ -1,12 +1,6 @@
 ---
 title: "ion-text"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/text/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/text/index.html"
 ---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
 import Props from '@site/static/auto-generated/text/props.md';
 import Events from '@site/static/auto-generated/text/events.md';
 import Methods from '@site/static/auto-generated/text/methods.md';
@@ -20,56 +14,21 @@ import Slots from '@site/static/auto-generated/text/slots.md';
 </head>
 
 import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
 
 <EncapsulationPill type="shadow" />
 
-<h2 className="table-of-contents__title">Contents</h2>
-
-<APITOCInline
-  toc={toc}
-  maxHeadingLevel={2}
-  autogenerated={[Props, Events, Methods, Parts, CustomProps, Slots]}
-/>
-
-
-
 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.
 
+## Basic Usage
 
+import Basic from '@site/static/usage/text/basic/index.md';
 
+<Basic />
 
-## Usage
-
-```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>
+## Theming
 
-<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>
-```
+The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides.
 
 ## Properties
 <Props />
@@ -87,4 +46,4 @@ The text component is a simple component that can be used to style the text colo
 <CustomProps />
 
 ## Slots
-<Slots />
\ No newline at end of file
+<Slots />
diff --git a/static/usage/text/basic/angular.md b/static/usage/text/basic/angular.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/text/basic/angular.md
@@ -0,0 +1,21 @@
+```html
+<ion-text color="primary">
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+</ion-text>
+
+<ion-text color="secondary">
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+</ion-text>
+
+<ion-text color="tertiary">
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+</ion-text>
+
+<p>
+  <ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+  He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+  Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+</p>
+```
diff --git a/static/usage/text/basic/demo.html b/static/usage/text/basic/demo.html
new file mode 100644
index 00000000000..7205a8ba459
--- /dev/null
+++ b/static/usage/text/basic/demo.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Text</title>
+  <link rel="stylesheet" href="../../common.css" />
+  <script src="../../common.js"></script>
+  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@6/dist/ionic/ionic.esm.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
+
+  <style>
+    .container {
+      flex-wrap: wrap;
+    }
+
+    h1, h2, h3 {
+      margin: 0;
+    }
+
+    p {
+      width: 80%;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content>
+      <div class="container">
+        <ion-text color="primary">
+          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+        </ion-text>
+
+        <ion-text color="secondary">
+          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+        </ion-text>
+
+        <ion-text color="tertiary">
+          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+        </ion-text>
+
+        <p>
+          <ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
+          I saw a werewolf with a Chinese menu in his hand.
+          Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+          He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+          Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+        </p>
+      </div>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/static/usage/text/basic/index.md b/static/usage/text/basic/index.md
new file mode 100644
index 00000000000..6c9ef54be7c
--- /dev/null
+++ b/static/usage/text/basic/index.md
@@ -0,0 +1,8 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground code={{ javascript, react, vue, angular }} src="usage/text/basic/demo.html" />
diff --git a/static/usage/text/basic/javascript.md b/static/usage/text/basic/javascript.md
new file mode 100644
index 00000000000..fb2f6064fba
--- /dev/null
+++ b/static/usage/text/basic/javascript.md
@@ -0,0 +1,21 @@
+```html
+<ion-text color="primary">
+  <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+</ion-text>
+
+<ion-text color="secondary">
+  <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+</ion-text>
+
+<ion-text color="tertiary">
+  <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+</ion-text>
+
+<p>
+  <ion-text color="warning"><ion-icon name="warning"></ion-icon></ion-text>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+  He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+  Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+</p>
+```
diff --git a/static/usage/text/basic/react.md b/static/usage/text/basic/react.md
new file mode 100644
index 00000000000..dac54e84471
--- /dev/null
+++ b/static/usage/text/basic/react.md
@@ -0,0 +1,32 @@
+```tsx
+import React from 'react';
+import { IonText, IonIcon } from '@ionic/react';
+import { warning } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <>
+      <IonText color="primary">
+        <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+      </IonText>
+
+      <IonText color="secondary">
+        <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+      </IonText>
+
+      <IonText color="tertiary">
+        <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+      </IonText>
+
+      <p>
+        <IonText color="warning"><IonIcon icon={warning}></IonIcon></IonText>
+        I saw a werewolf with a Chinese menu in his hand.
+        Walking through the <IonText color="success"><sub>streets</sub></IonText> of Soho in the rain.
+        He <IonText color="medium"><i>was</i></IonText> looking for a place called Lee Ho Fook's.
+        Gonna get a <IonText color="danger">big dish of beef chow mein.</IonText>
+      </p>
+    </>
+  );
+}
+export default Example;
+```
diff --git a/static/usage/text/basic/vue.md b/static/usage/text/basic/vue.md
new file mode 100644
index 00000000000..742167bf9f1
--- /dev/null
+++ b/static/usage/text/basic/vue.md
@@ -0,0 +1,38 @@
+```html
+<template>
+  <ion-text color="primary">
+    <h1>H1: The quick brown fox jumps over the lazy dog</h1>
+  </ion-text>
+
+  <ion-text color="secondary">
+    <h2>H2: The quick brown fox jumps over the lazy dog</h2>
+  </ion-text>
+
+  <ion-text color="tertiary">
+    <h3>H3: The quick brown fox jumps over the lazy dog</h3>
+  </ion-text>
+
+  <p>
+    <ion-text color="warning"><ion-icon :icon="warning"></ion-icon></ion-text>
+    I saw a werewolf with a Chinese menu in his hand.
+    Walking through the <ion-text color="success"><sub>streets</sub></ion-text> of Soho in the rain.
+    He <ion-text color="medium"><i>was</i></ion-text> looking for a place called Lee Ho Fook's.
+    Gonna get a <ion-text color="danger">big dish of beef chow mein.</ion-text>
+  </p>
+</template>
+
+<script lang="ts">
+  import { IonIcon, IonText } from '@ionic/vue';
+  import { warning } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonIcon, IonText },
+    setup() {
+      return {
+        warning,
+      };
+    },
+  });
+</script>
+```