fix(anchor): add proper styling, support for colors, and basic test

fixes #14777
ionic-team · Jul 16, 2018 · 1dbf5bb · 1dbf5bb
1 parent 9d0d9bf
commit 1dbf5bb
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 10 deletions.
diff --git 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
@@ -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();
 }
diff --git 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
@@ -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
@@ -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>