From aa6ace9280ef1dd9f0fbe57fe104aa8a8a6b2431 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 9 Jan 2018 11:52:18 -0500
Subject: [PATCH] feat(text): add text component and documentation

also adds to the breaking changes file
---
 BREAKING.md                                   | 46 +++++++++++
 packages/core/src/components.d.ts             | 31 ++++++++
 packages/core/src/components/text/readme.md   | 67 ++++++++++++++++
 .../src/components/text/test/basic/e2e.js     | 19 +++++
 .../src/components/text/test/basic/index.html | 78 +++++++++++++++++++
 .../core/src/components/text/text.ios.scss    | 16 ++++
 .../src/components/text/text.ios.vars.scss    |  4 +
 .../core/src/components/text/text.md.scss     | 16 ++++
 .../src/components/text/text.md.vars.scss     |  4 +
 packages/core/src/components/text/text.tsx    | 33 ++++++++
 10 files changed, 314 insertions(+)
 create mode 100644 packages/core/src/components/text/readme.md
 create mode 100644 packages/core/src/components/text/test/basic/e2e.js
 create mode 100644 packages/core/src/components/text/test/basic/index.html
 create mode 100644 packages/core/src/components/text/text.ios.scss
 create mode 100644 packages/core/src/components/text/text.ios.vars.scss
 create mode 100644 packages/core/src/components/text/text.md.scss
 create mode 100644 packages/core/src/components/text/text.md.vars.scss
 create mode 100644 packages/core/src/components/text/text.tsx

diff --git a/BREAKING.md b/BREAKING.md
index 33bfcd1e88..b5c35f9e70 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -21,6 +21,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
 - [Range](#range)
 - [Segment](#segment)
 - [Select](#select)
+- [Text/Typography](#text-typography)
 - [Toolbar](#toolbar)
 - [Sass](#sass)
 
@@ -616,6 +617,51 @@ this.customOptions = {
 };
 ```
 
+## Text / Typography
+
+### Markup Changed
+
+Typography should now be written as an `<ion-text>` element. Previously the `ion-text` attribute could be added to any HTML element to set its color. It should now be used as a wrapper around the HTML elements to style.
+
+**Old Usage Example:**
+
+```html
+<h1 ion-text color="secondary">H1: The quick brown fox jumps over the lazy dog</h1>
+
+<h2 ion-text color="primary">H2: The quick brown fox jumps over the lazy dog</h2>
+
+<h3 ion-text color="light">H3: The quick brown fox jumps over the lazy dog</h3>
+
+<p>
+  I saw a werewolf with a Chinese menu in his hand.
+  Walking through the <sub ion-text color="danger">streets</sub> of Soho in the rain.
+  He <i ion-text color="primary">was</i> looking for a place called Lee Ho Fook's.
+  Gonna get a <a ion-text color="secondary">big dish of beef chow mein.</a>
+</p>
+```
+
+**New Usage Example:**
+
+```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>
+
+<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>
+</p>
+```
 
 ## Toolbar
 
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 861990eebb..6c53e58032 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -2870,6 +2870,37 @@ declare global {
 }
 
 
+import {
+  Text as IonText
+} from './components/text/text';
+
+declare global {
+  interface HTMLIonTextElement extends IonText, HTMLElement {
+  }
+  var HTMLIonTextElement: {
+    prototype: HTMLIonTextElement;
+    new (): HTMLIonTextElement;
+  };
+  interface HTMLElementTagNameMap {
+    "ion-text": HTMLIonTextElement;
+  }
+  interface ElementTagNameMap {
+    "ion-text": HTMLIonTextElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      "ion-text": JSXElements.IonTextAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface IonTextAttributes extends HTMLAttributes {
+      color?: string;
+      mode?: 'ios' | 'md';
+    }
+  }
+}
+
+
 import {
   Textarea as IonTextarea
 } from './components/textarea/textarea';
diff --git a/packages/core/src/components/text/readme.md b/packages/core/src/components/text/readme.md
new file mode 100644
index 0000000000..210578145a
--- /dev/null
+++ b/packages/core/src/components/text/readme.md
@@ -0,0 +1,67 @@
+# ion-text
+
+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 -->
+
+
+## Properties
+
+#### color
+
+string
+
+
+#### mode
+
+any
+
+
+## Attributes
+
+#### color
+
+string
+
+
+#### mode
+
+any
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*
diff --git a/packages/core/src/components/text/test/basic/e2e.js b/packages/core/src/components/text/test/basic/e2e.js
new file mode 100644
index 0000000000..b1bccb5e6b
--- /dev/null
+++ b/packages/core/src/components/text/test/basic/e2e.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/text/test/basic?ionicplatform=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('text/basic', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate();
+    });
+  });
+});
diff --git a/packages/core/src/components/text/test/basic/index.html b/packages/core/src/components/text/test/basic/index.html
new file mode 100644
index 0000000000..ee0d59bcf4
--- /dev/null
+++ b/packages/core/src/components/text/test/basic/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Text - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+  <ion-app>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Text - Basic</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content padding>
+        <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>
+
+        <ion-text id="dynamicColor">
+          <h6>H6: The quick brown fox jumps over the lazy dog</h6>
+        </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>
+          <a class="color-purple">My purple class link.</a>
+        </p>
+
+        <p>
+          He's the hairy-handed gent who ran amuck in Kent.
+          Lately he's <ion-text color="primary"><sup>been</sup></ion-text> overheard in Mayfair.
+          Better stay away from him.
+          He'll rip your lungs out, Jim.
+          I'd like to meet his tailor.
+          <ion-text color="danger"><ion-icon name="cut"></ion-icon></ion-text>
+        </p>
+
+    </ion-page>
+  </ion-app>
+
+  <style>
+    .color-purple {
+      color: purple;
+    }
+  </style>
+
+  <script>
+    var dynamicColor = document.getElementById('dynamicColor');
+    dynamicColor.color = 'secondary';
+
+  </script>
+</body>
+</html>
+
+
+
diff --git a/packages/core/src/components/text/text.ios.scss b/packages/core/src/components/text/text.ios.scss
new file mode 100644
index 0000000000..a3c58e2913
--- /dev/null
+++ b/packages/core/src/components/text/text.ios.scss
@@ -0,0 +1,16 @@
+@import "./text.ios.vars";
+
+// iOS Text
+// --------------------------------------------------
+
+// Generate iOS Text Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+
+  .text-ios-#{$color-name},
+  .text-ios-#{$color-name} a {
+    color: $color-base;
+  }
+
+}
diff --git a/packages/core/src/components/text/text.ios.vars.scss b/packages/core/src/components/text/text.ios.vars.scss
new file mode 100644
index 0000000000..4cb9603643
--- /dev/null
+++ b/packages/core/src/components/text/text.ios.vars.scss
@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Text
+// --------------------------------------------------
diff --git a/packages/core/src/components/text/text.md.scss b/packages/core/src/components/text/text.md.scss
new file mode 100644
index 0000000000..b397acb291
--- /dev/null
+++ b/packages/core/src/components/text/text.md.scss
@@ -0,0 +1,16 @@
+@import "./text.md.vars";
+
+// Material Design Text
+// --------------------------------------------------
+
+// Generate Material Design Text Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+
+  .text-md-#{$color-name},
+  .text-md-#{$color-name} a {
+    color: $color-base;
+  }
+
+}
diff --git a/packages/core/src/components/text/text.md.vars.scss b/packages/core/src/components/text/text.md.vars.scss
new file mode 100644
index 0000000000..53d544fa50
--- /dev/null
+++ b/packages/core/src/components/text/text.md.vars.scss
@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Text
+// --------------------------------------------------
diff --git a/packages/core/src/components/text/text.tsx b/packages/core/src/components/text/text.tsx
new file mode 100644
index 0000000000..eee80b3249
--- /dev/null
+++ b/packages/core/src/components/text/text.tsx
@@ -0,0 +1,33 @@
+import { Component, Prop } from '@stencil/core';
+
+
+@Component({
+  tag: 'ion-text',
+  styleUrls: {
+    ios: 'text.ios.scss',
+    md: 'text.md.scss'
+  },
+  host: {
+    theme: 'text'
+  }
+})
+export class Text {
+
+  /**
+   * @input {string} The color to use from your Sass `$colors` map.
+   * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   */
+  @Prop() color: string;
+
+  /**
+   * @input {string} The mode determines which platform styles to use.
+   * Possible values are: `"ios"` or `"md"`.
+   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+   */
+  @Prop() mode: 'ios' | 'md';
+
+  render() {
+    return <slot></slot>;
+  }
+}