diff --git a/demo/app/components/link/link.component.html b/demo/app/components/link/link.component.html index 7974980b4..7938718e4 100644 --- a/demo/app/components/link/link.component.html +++ b/demo/app/components/link/link.component.html @@ -1,4 +1,20 @@ +
+ support@terminus.com +
+ +
+ 1800-423-4562 +
+
- + open_in_new diff --git a/terminus-ui/link/src/link.component.md b/terminus-ui/link/src/link.component.md index e6974ca20..512740703 100644 --- a/terminus-ui/link/src/link.component.md +++ b/terminus-ui/link/src/link.component.md @@ -27,7 +27,8 @@ Wrap your link text and define a destination: ## External links -To signify a link will leave the current app or site, set `external` to true: +To signify a link will leave the current app or site, set `external` to true. +When the destination is a string and contains either `mailto` or `tel`, the external icon would not show. ```html ; let link: HTMLElement; + let emailLink: HTMLElement; let linkComponent: TsLinkComponent; beforeEach(async(() => { @@ -117,6 +118,24 @@ describe(`TsLinkComponent`, function() { }); + describe(`showExternalIcon`, () => { + + test(`should not show external icon when it is an email or phone`, () => { + component.destination = 'mailto: support@comcast.com'; + component.isExternal = true; + fixture.detectChanges(); + emailLink = fixture.debugElement.query(By.css('.c-link')).nativeElement; + expect(emailLink.classList).toContain('qa-link-external'); + + component.destination = 'tel: 18003256789'; + fixture.detectChanges(); + link = fixture.debugElement.query(By.css('.c-link')).nativeElement; + expect(link.classList).toContain('qa-link-external'); + + const externalLink = fixture.debugElement.query(By.css('.ts-icon')); + expect(externalLink).toBeFalsy(); + }); + }); describe(`tabIndex`, () => { diff --git a/terminus-ui/link/src/link.component.ts b/terminus-ui/link/src/link.component.ts index fd4472dff..8b7a453d9 100644 --- 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 { isString } from '@terminus/ngx-tools'; import { TsStyleThemeTypes } from '@terminus/ui/utilities'; @@ -56,11 +57,25 @@ export class TsLinkComponent { */ public localRoute = ['.']; + /** + * Decide whether an external icon should be shown + */ + public showExternalIcon = true; + /** * Define the link's destination */ @Input() - public destination: string | string[] | undefined; + public set destination(value: string | string[] | undefined) { + if (isString(value) && (value.includes('mailto') || value.includes('tel'))) { + this.showExternalIcon = false; + } + this._destination = value; + } + public get destination(): string | string[] | undefined { + return this._destination; + } + public _destination: string | string[] | undefined; /** * Define the link's fragment