From 1dbf5bbb352427f95ed97cee304fd18e68ff33f4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Mon, 16 Jul 2018 12:57:55 -0400
Subject: [PATCH] fix(anchor): add proper styling, support for colors, and
 basic test

fixes #14777
---
 core/src/components.d.ts                      |  8 +++
 core/src/components/anchor/anchor.scss        | 20 ++++++
 core/src/components/anchor/anchor.tsx         | 31 ++++++---
 core/src/components/anchor/readme.md          |  2 +-
 .../components/anchor/test/basic/index.html   | 69 +++++++++++++++++++
 5 files changed, 120 insertions(+), 10 deletions(-)
 create mode 100644 core/src/components/anchor/test/basic/index.html

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a934319cef8..aabd492c70d 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -504,6 +504,10 @@ declare global {
 
   namespace StencilComponents {
     interface IonAnchor {
+      /**
+       * The color to use for the anchor.
+       */
+      'color': Color;
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
@@ -534,6 +538,10 @@ declare global {
   }
   namespace JSXElements {
     export interface IonAnchorAttributes extends HTMLAttributes {
+      /**
+       * The color to use for the anchor.
+       */
+      'color'?: Color;
       /**
        * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
        */
diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss
index 69dce57dac3..39a7aca3ca7 100644
--- a/core/src/components/anchor/anchor.scss
+++ b/core/src/components/anchor/anchor.scss
@@ -1,5 +1,25 @@
 @import "../../themes/ionic.globals";
 
+// Anchor
+// --------------------------------------------------
+
+:host {
+  // default background / color
+  --background: transparent;
+  --color: #{ion-color(primary, base)};
+
+  --text-decoration: none;
+
+  background: var(--background);
+  color: var(--color);
+
+  text-decoration: var(--text-decoration);
+}
+
+:host(.ion-color) {
+  --color: #{current-color(base)};
+}
+
 a {
   @include text-inherit();
 }
\ No newline at end of file
diff --git a/core/src/components/anchor/anchor.tsx b/core/src/components/anchor/anchor.tsx
index ed776ef99fc..8959a5c87eb 100644
--- a/core/src/components/anchor/anchor.tsx
+++ b/core/src/components/anchor/anchor.tsx
@@ -1,17 +1,22 @@
 import { Component, Prop } from '@stencil/core';
-import { RouterDirection } from '../../interface';
-import { openURL } from '../../utils/theme';
+import { Color, RouterDirection } from '../../interface';
+import { createColorClasses, openURL } from '../../utils/theme';
 
 
 @Component({
   tag: 'ion-anchor',
-  shadow: true,
-  styleUrl: 'anchor.scss'
+  styleUrl: 'anchor.scss',
+  shadow: true
 })
 export class Anchor {
 
   @Prop({ context: 'window' }) win!: Window;
 
+  /**
+   * The color to use for the anchor.
+   */
+  @Prop() color?: Color;
+
   /**
    * Contains a URL or a URL fragment that the hyperlink points to.
    * If this property is set, an anchor tag will be rendered.
@@ -24,11 +29,19 @@ export class Anchor {
    */
   @Prop() routerDirection?: RouterDirection;
 
+  hostData() {
+    return {
+      class: createColorClasses(this.color)
+    };
+  }
+
   render() {
-    return <a
-      href={this.href}
-      onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
-        <slot></slot>
-      </a>;
+    return (
+      <a
+        href={this.href}
+        onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
+          <slot></slot>
+      </a>
+    );
   }
 }
diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md
index 0bebdfab269..b25e7df9d3c 100644
--- a/core/src/components/anchor/readme.md
+++ b/core/src/components/anchor/readme.md
@@ -1,6 +1,6 @@
 # ion-anchor
 
-Anchor is a component used for navigating to a specified link. Similar to the browsers anchor tag, Anchor can accept a href for the location, and a direction for the transition animation.
+The Anchor component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/anchor/test/basic/index.html b/core/src/components/anchor/test/basic/index.html
new file mode 100644
index 00000000000..0ab08e14bc0
--- /dev/null
+++ b/core/src/components/anchor/test/basic/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Anchor - 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>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Anchor - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding>
+      <p>
+        <a href="#">A</a>
+      </p>
+
+      <p>
+        <ion-anchor href="#">Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor href="#" class="underline">Underline Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor color="dark" href="#">Dark Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor color="danger" href="#">Danger Anchor</ion-anchor>
+      </p>
+
+      <p>
+        <ion-anchor id="toggleColor" color="tertiary" href="#">Dynamic Color</ion-anchor>
+      </p>
+
+      <ion-button onclick="toggleColor()">Toggle Color</ion-button>
+    </ion-content>
+
+
+  </ion-app>
+
+  <script>
+    const el = document.querySelector('#toggleColor');
+
+    function toggleColor() {
+      const prev = el.getAttribute('color');
+      el.setAttribute('color', prev === 'secondary' ? 'tertiary' : 'secondary');
+      el.innerHTML = prev === 'secondary' ? 'Tertiary Anchor' : 'Secondary Anchor';
+    }
+  </script>
+
+  <style>
+    .underline {
+      --text-decoration: underline;
+    }
+  </style>
+</body>
+
+</html>