feat(text): add text component and documentation

also adds to the breaking changes file

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
 

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';

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/)*

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();
+    });
+  });
+});

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>
+
+
+

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;
+  }
+
+}

packages/core/src/components/text/text.ios.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Text
+// --------------------------------------------------

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;
+  }
+
+}

packages/core/src/components/text/text.md.vars.scss

@@ -0,0 +1,4 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Text
+// --------------------------------------------------

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>;
+  }
+}