fix(Link): controlling theme via input rather than data attr now

Also removed support for the 'color' attribute that was deprecated 2yrs ago ISSUES CLOSED: #1585
GetTerminus · Jul 23, 2019 · 9b2a57e · 9b2a57e
1 parent 3b670e2
commit 9b2a57e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 29 deletions.
diff --git a/demo/app/components/link/link.component.html b/demo/app/components/link/link.component.html
@@ -1,14 +1,24 @@
 <ts-card>
-  <ts-link
-    [destination]="localDestination"
-    tsVerticalSpacing
-  >My standard link.</ts-link>
+  <div>
+    <ts-link
+      [destination]="localDestination"
+      tsVerticalSpacing
+    >Standard link.</ts-link>
+  </div>
 
-  <br>
+  <div>
+    <ts-link
+      [destination]="localDestination"
+      theme="accent"
+      tsVerticalSpacing
+    >Accent link</ts-link>
+  </div>
 
-  <ts-link
-    [destination]="externalDestination"
-    [isExternal]="external"
-    color="warn"
-  >An external 'warning' link.</ts-link>
+  <div>
+    <ts-link
+      [destination]="externalDestination"
+      [isExternal]="external"
+      theme="warn"
+    >An external link using the 'warn' theme.</ts-link>
+  </div>
 </ts-card>
diff --git a/terminus-ui/link/src/link.component.scss b/terminus-ui/link/src/link.component.scss
@@ -31,9 +31,7 @@
   }
 
   // Primary theme
-  &[theme='primary'],
-  // @deprecated 'color'
-  &[color='primary'] {
+  &--primary {
     color: color('primary');
 
     .c-link {
@@ -49,9 +47,7 @@
   }
 
   // Accent theme
-  &[theme='accent'],
-  // @deprecated 'color'
-  &[color='accent'] {
+  &--accent {
     color: color('accent');
 
     .c-link {
@@ -67,9 +63,7 @@
   }
 
   // Warn theme
-  &[theme='warn'],
-  // @deprecated 'color'
-  &[color='warn'] {
+  &--warn {
     color: color('warn');
 
     .c-link {

diff --git a/terminus-ui/link/src/link.component.spec.ts b/terminus-ui/link/src/link.component.spec.ts
@@ -9,30 +9,33 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
-
 import { createComponent } from '@terminus/ngx-tools/testing';
+import { TsStyleThemeTypes } from '@terminus/ui/utilities';
 
 import { TsLinkComponent } from './link.component';
 import { TsLinkModule } from './link.module';
 
+
 @Component({
   template: `
   <ts-link
     [destination]="destination"
     [isExternal]="isExternal"
     [tabIndex]="tabIndex"
+    [theme]="theme"
   >
   My Link Text
   </ts-link>
   `,
 })
 class TestHostComponent {
-  destination!: any;
-  isExternal!: boolean;
-  tabIndex!: number | undefined;
+  public destination!: any;
+  public isExternal!: boolean;
+  public tabIndex!: number | undefined;
+  public theme: TsStyleThemeTypes = 'primary';
 
   @ViewChild(TsLinkComponent, {static: true})
-  linkComponent!: TsLinkComponent;
+  public linkComponent!: TsLinkComponent;
 }
 
 
@@ -43,10 +46,14 @@ describe(`TsLinkComponent`, function() {
   let linkComponent: TsLinkComponent;
 
   beforeEach(() => {
-    fixture = createComponent(TestHostComponent, [{
-      provide: APP_BASE_HREF,
-      useValue: '/my/app',
-    }], [TsLinkModule, RouterModule.forRoot([])]);
+    fixture = createComponent(
+      TestHostComponent,
+      [{
+        provide: APP_BASE_HREF,
+        useValue: '/my/app',
+      }],
+      [TsLinkModule, RouterModule.forRoot([])],
+    );
     component = fixture.componentInstance;
     linkComponent = component.linkComponent;
     fixture.detectChanges();
@@ -57,17 +64,22 @@ describe(`TsLinkComponent`, function() {
     expect(linkComponent).toBeTruthy();
   });
 
+
   describe(`isInternal`, () => {
+
     test(`should default and retrieve`, () => {
       link = fixture.debugElement.query(By.css('.c-link')).nativeElement as HTMLElement;
       component.isExternal = false;
       component.destination = ['/#'];
 
       expect(link.classList).toContain('qa-link-internal');
     });
+
   });
 
+
   describe(`isExternal`, () => {
+
     test(`should set and retrieve`, () => {
       component.destination = 'www.google.com';
       component.isExternal = true;
@@ -80,7 +92,9 @@ describe(`TsLinkComponent`, function() {
 
   });
 
+
   describe(`tabIndex`, () => {
+
     test(`should default to 0 and be set`, () => {
       expect(link.tabIndex).toEqual(0);
 
@@ -90,5 +104,26 @@ describe(`TsLinkComponent`, function() {
 
       expect(link.tabIndex).toEqual(9);
     });
+
   });
+
+
+  describe(`theme`, function() {
+
+    test(`should set the appropriate class`, function() {
+      link = fixture.debugElement.query(By.css('.ts-link')).nativeElement as HTMLElement;
+
+      expect(link.classList).toContain('ts-link--primary');
+
+      component.theme = 'accent';
+      fixture.detectChanges();
+      link = fixture.debugElement.query(By.css('.ts-link')).nativeElement as HTMLElement;
+
+      expect(link.classList).not.toContain('ts-link--primary');
+      expect(link.classList).toContain('ts-link--accent');
+      expect.assertions(3);
+    });
+
+  });
+
 });
diff --git a/terminus-ui/link/src/link.component.ts b/terminus-ui/link/src/link.component.ts
@@ -4,6 +4,7 @@ import {
   Input,
   ViewEncapsulation,
 } from '@angular/core';
+import { TsStyleThemeTypes } from '@terminus/ui/utilities';
 
 
 /**
@@ -33,7 +34,12 @@ import {
   selector: 'ts-link',
   templateUrl: './link.component.html',
   styleUrls: ['./link.component.scss'],
-  host: {class: 'ts-link'},
+  host: {
+    'class': 'ts-link',
+    '[class.ts-link--primary]': 'theme === "primary"',
+    '[class.ts-link--accent]': 'theme === "accent"',
+    '[class.ts-link--warn]': 'theme === "warn"',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   exportAs: 'tsLink',
@@ -62,4 +68,9 @@ export class TsLinkComponent {
   @Input()
   public tabIndex = 0;
 
+  /**
+   * Define the component theme
+   */
+  @Input()
+  public theme: TsStyleThemeTypes = 'primary';
 }