Switched the action button url to permalink

skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.html

@@ -37,7 +37,7 @@
       </sky-action-button-details>
     </sky-action-button>
     <sky-action-button
-      url="https://host.nxt.blackbaud.com/skyux2/?component=SkyIconDemoComponent">
+      [permalink]="permalink">
       <sky-action-button-icon
         iconType="link">
       </sky-action-button-icon>

skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.ts

@@ -6,6 +6,10 @@ import { Component} from '@angular/core';
 })
 export class ActionButtonVisualComponent {
 
+  public permalink = {
+    url: 'https://developer.blackbaud.com/skyux/components'
+  };
+
   public buttonIsClicked: boolean = false;
 
   public buttonClicked() {

src/demos/action-button/action-button-demo.component.html

@@ -26,7 +26,7 @@
   </sky-action-button>
 
   <sky-action-button
-    url="https://developer.blackbaud.com/skyux/components">
+    [permalink]="url">
     <sky-action-button-icon
       iconType="link">
     </sky-action-button-icon>
@@ -37,4 +37,17 @@
       Open a link
     </sky-action-button-details>
   </sky-action-button>
+
+  <sky-action-button
+    [permalink]="routerlink">
+    <sky-action-button-icon
+      iconType="link">
+    </sky-action-button-icon>
+    <sky-action-button-header>
+      Open a router link
+    </sky-action-button-header>
+    <sky-action-button-details>
+      Open a router link
+    </sky-action-button-details>
+  </sky-action-button>
 </sky-action-button-container>

src/demos/action-button/action-button-demo.component.ts

@@ -5,6 +5,20 @@ import { Component } from '@angular/core';
   templateUrl: './action-button-demo.component.html'
 })
 export class SkyActionButtonDemoComponent {
+  public url = {
+    url: 'https://developer.blackbaud.com/skyux/components'
+  };
+
+  public routerlink = {
+    route: {
+      extras: {
+        queryParams: {
+          component: 'SkyCheckboxDemoComponent'
+        }
+      }
+    }
+  };
+
   public filterActionClick() {
     alert('Filter action clicked');
   }

src/modules/action-button/action-button.component.html

@@ -1,15 +1,28 @@
 <a
-  *ngIf="url"
+  *ngIf="permalink && permalink.route"
   class="sky-action-button sky-btn-default sky-rounded-corners"
   tabindex="0"
-  [href]="url">
+  [fragment]="permalink.route?.extras?.fragment"
+  [queryParams]="permalink.route?.extras?.queryParams"
+  [queryParamsHandling]="permalink.route?.extras?.queryParamsHandling"
+  [routerLink]="permalink.route?.commands">
+  <ng-container
+    *ngTemplateOutlet="actionButtonContent">
+  </ng-container>
+</a>
+
+<a
+  *ngIf="permalink && !permalink.route"
+  class="sky-action-button sky-btn-default sky-rounded-corners"
+  tabindex="0"
+  [href]="permalink.url">
   <ng-container
     *ngTemplateOutlet="actionButtonContent">
   </ng-container>
 </a>
 
 <div
-  *ngIf="!url"
+  *ngIf="!permalink"
   class="sky-action-button sky-btn-default sky-rounded-corners"
   role="button"
   tabindex="0"

src/modules/action-button/action-button.component.spec.ts

@@ -1,30 +1,34 @@
+import {
+  DebugElement
+} from '@angular/core';
+import {
+  BrowserModule,
+  By
+} from '@angular/platform-browser';
 import {
   TestBed,
   ComponentFixture
 } from '@angular/core/testing';
-
-import {
-  DebugElement
-} from '@angular/core';
-
-import { BrowserModule, By } from '@angular/platform-browser';
-
 import {
-  SkyActionButtonComponent,
-  SkyActionButtonModule
+  RouterTestingModule
+} from '@angular/router/testing';
 
-} from '.';
 import {
   SkyMediaQueryService,
   SkyMediaBreakpoints
 } from '../media-queries';
-
-import { ActionButtonTestComponent } from './fixtures/action-button.component.fixture';
-
 import {
   MockSkyMediaQueryService
 } from '../testing/mocks';
 
+import {
+  SkyActionButtonComponent,
+  SkyActionButtonModule
+} from '.';
+import {
+  ActionButtonTestComponent
+} from './fixtures/action-button.component.fixture';
+
 describe('Action button component', () => {
   let fixture: ComponentFixture<ActionButtonTestComponent>;
   let cmp: ActionButtonTestComponent;
@@ -41,6 +45,7 @@ describe('Action button component', () => {
       ],
       imports: [
         BrowserModule,
+        RouterTestingModule,
         SkyActionButtonModule
       ]
     });
@@ -65,12 +70,19 @@ describe('Action button component', () => {
     fixture.detectChanges();
   });
 
-  it('should see if there is a url included as an input to the element', () => {
-    let actionButton = '.sky-action-button';
-    expect(el.querySelectorAll(actionButton).item(1).tagName === 'a');
+  it('should see if there is a permalink url included as an input to the element', () => {
+    let actionButton = el.querySelectorAll('.sky-action-button').item(1);
+    expect(actionButton.tagName === 'a');
+    expect(actionButton.getAttribute('href')).toBe('https://developer.blackbaud.com/skyux/components');
+  });
+
+  it('should see if there is a permalink route included as an input to the element', () => {
+    let actionButton = el.querySelectorAll('.sky-action-button').item(2);
+    expect(actionButton.tagName === 'a');
+    expect(actionButton.getAttribute('href')).toBe('/?page=1#fragment');
   });
 
-  it('should use a div element when url is not provided', () => {
+  it('should use a div element when permalink is not provided', () => {
     let actionButton = '.sky-action-button';
     expect(el.querySelectorAll(actionButton).item(0).tagName === 'div');
   });

src/modules/action-button/action-button.component.ts

@@ -5,14 +5,18 @@ import {
   Output
 } from '@angular/core';
 
+import {
+  SkyActionButtonPermalink
+} from './types';
+
 @Component({
   selector: 'sky-action-button',
   styleUrls: ['./action-button.component.scss'],
   templateUrl: './action-button.component.html'
 })
 export class SkyActionButtonComponent {
   @Input()
-  public url: string;
+  public permalink: SkyActionButtonPermalink;
 
   @Output()
   public actionClick = new EventEmitter<any>();

src/modules/action-button/action-button.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 
 import { SkyMediaQueryModule } from '../media-queries';
@@ -20,6 +21,7 @@ import { SkyIconModule } from '../icon';
   ],
   imports: [
     CommonModule,
+    RouterModule,
     SkyMediaQueryModule,
     SkyIconModule
   ],

src/modules/action-button/fixtures/action-button.component.fixture.html

@@ -13,7 +13,7 @@
   </sky-action-button>
 
   <sky-action-button
-    url="https://host.nxt.blackbaud.com/skyux2/?component=SkyIconDemoComponent">
+    [permalink]="permalink1">
     <sky-action-button-icon
       iconType="link">
     </sky-action-button-icon>
@@ -24,4 +24,17 @@
       Open a link
     </sky-action-button-details>
   </sky-action-button>
+
+  <sky-action-button
+    [permalink]="permalink2">
+    <sky-action-button-icon
+      iconType="link">
+    </sky-action-button-icon>
+    <sky-action-button-header>
+      Open a route link
+    </sky-action-button-header>
+    <sky-action-button-details>
+      Open a route link
+    </sky-action-button-details>
+  </sky-action-button>
 </sky-action-button-container>

src/modules/action-button/fixtures/action-button.component.fixture.ts

@@ -1,11 +1,29 @@
 import { Component } from '@angular/core';
+import { SkyActionButtonPermalink } from '../types';
 
 @Component({
   selector: 'sky-test-cmp',
   templateUrl: './action-button.component.fixture.html'
 })
 export class ActionButtonTestComponent {
 
+  public permalink1: SkyActionButtonPermalink = {
+    url: 'https://developer.blackbaud.com/skyux/components'
+  };
+
+  public permalink2: SkyActionButtonPermalink = {
+    route: {
+      commands: [],
+      extras: {
+        fragment: 'fragment',
+        queryParams: {
+          page: 1
+        },
+        queryParamsHandling: 'merge'
+      }
+    }
+  };
+
   public buttonIsClicked: boolean = false;
 
   public buttonClicked() {

src/modules/action-button/index.ts

@@ -4,3 +4,4 @@ export { SkyActionButtonHeaderComponent } from './action-button-header.component
 export { SkyActionButtonDetailsComponent } from './action-button-details.component';
 export { SkyActionButtonContainerComponent } from './action-button-container.component';
 export { SkyActionButtonModule } from './action-button.module';
+export { SkyActionButtonPermalink } from './types';

src/modules/action-button/types/action-button-permalink.ts

@@ -0,0 +1,11 @@
+import {
+  NavigationExtras
+} from '@angular/router';
+
+export interface SkyActionButtonPermalink {
+  route?: {
+    commands: any[],
+    extras: NavigationExtras
+  };
+  url?: string;
+}

src/modules/action-button/types/index.ts

@@ -0,0 +1 @@
+export * from './action-button-permalink';