From 4291076ecf458abb8a2fe8505029f8434d400278 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Mon, 20 Aug 2018 15:04:32 -0400
Subject: [PATCH 1/3] added the action button permalink

---
 .../action-button.component.html              | 10 +++++---
 .../action-button.component.spec.ts           | 23 ++++++++++++++---
 .../action-button/action-button.component.ts  | 25 ++++++++++++++++++-
 .../action-button.component.fixture.html      | 15 ++++++++++-
 .../action-button.component.fixture.ts        | 16 ++++++++++++
 src/modules/action-button/index.ts            |  1 +
 .../types/action-button-permalink.ts          | 11 ++++++++
 src/modules/action-button/types/index.ts      |  1 +
 8 files changed, 93 insertions(+), 9 deletions(-)
 create mode 100644 src/modules/action-button/types/action-button-permalink.ts
 create mode 100644 src/modules/action-button/types/index.ts

diff --git a/src/modules/action-button/action-button.component.html b/src/modules/action-button/action-button.component.html
index ca09f7eef..62016da0a 100644
--- a/src/modules/action-button/action-button.component.html
+++ b/src/modules/action-button/action-button.component.html
@@ -1,15 +1,19 @@
 <a
-  *ngIf="url"
+  *ngIf="permalink"
   class="sky-action-button sky-btn-default sky-rounded-corners"
   tabindex="0"
-  [href]="url">
+  [fragment]="permalink.route?.extras?.fragment"
+  [href]="permalink.url"
+  [queryParams]="permalink.route?.extras?.queryParams"
+  [queryParamsHandling]="permalink.route?.extras?.queryParamsHandling"
+  [routerLink]="permalink.route?.commands">
   <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"
diff --git a/src/modules/action-button/action-button.component.spec.ts b/src/modules/action-button/action-button.component.spec.ts
index 0094df51f..1418e339a 100644
--- a/src/modules/action-button/action-button.component.spec.ts
+++ b/src/modules/action-button/action-button.component.spec.ts
@@ -65,12 +65,27 @@ 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('')
+    expect(actionButton.getAttribute('routerLink')).toBeFalsy();
+    expect(actionButton.getAttribute('fragment')).toBeFalsy()
+    expect(actionButton.getAttribute('queryParams')).toBeFalsy()
+    expect(actionButton.getAttribute('queryParamsHandling')).toBeFalsy()
+  });
+
+  it('should see if there is a permalink route included as an input to the element', () => {
+    let actionButton = el.querySelectorAll('.sky-action-button').item(1);
+    expect(actionButton.tagName === 'a');
+    expect(actionButton.getAttribute('routerLink')).toBeTruthy()
+    expect(actionButton.getAttribute('fragment')).toBe('fragment')
+    expect(actionButton.getAttribute('queryParams')).toBeTruthy()
+    expect(actionButton.getAttribute('queryParamsHandling')).toBeTruthy()
+    expect(actionButton.getAttribute('href')).toBeFalsy();
   });
 
-  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');
   });
diff --git a/src/modules/action-button/action-button.component.ts b/src/modules/action-button/action-button.component.ts
index cc93593ba..c4f79a21c 100644
--- a/src/modules/action-button/action-button.component.ts
+++ b/src/modules/action-button/action-button.component.ts
@@ -5,6 +5,10 @@ import {
   Output
 } from '@angular/core';
 
+import {
+  SkyActionButtonPermalink
+} from './types';
+
 @Component({
   selector: 'sky-action-button',
   styleUrls: ['./action-button.component.scss'],
@@ -12,11 +16,30 @@ import {
 })
 export class SkyActionButtonComponent {
   @Input()
-  public url: string;
+  public get permalink(): SkyActionButtonPermalink {
+    if (!this._permaLink) {
+      return undefined;
+    }
+
+    if (this._permaLink.url) {
+      return {
+        url: this._permaLink.url
+      };
+    }
+
+    return {
+      route: this._permaLink.route
+    };
+  }
+  public set permalink(value: SkyActionButtonPermalink) {
+    this._permaLink = value;
+  }
 
   @Output()
   public actionClick = new EventEmitter<any>();
 
+  private _permaLink: SkyActionButtonPermalink;
+
   public buttonClicked() {
     this.actionClick.emit();
   }
diff --git a/src/modules/action-button/fixtures/action-button.component.fixture.html b/src/modules/action-button/fixtures/action-button.component.fixture.html
index ade9e80df..95f59b24f 100644
--- a/src/modules/action-button/fixtures/action-button.component.fixture.html
+++ b/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>
diff --git a/src/modules/action-button/fixtures/action-button.component.fixture.ts b/src/modules/action-button/fixtures/action-button.component.fixture.ts
index 61313f4f4..e79a4b25b 100644
--- a/src/modules/action-button/fixtures/action-button.component.fixture.ts
+++ b/src/modules/action-button/fixtures/action-button.component.fixture.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SkyActionButtonPermalink } from '../types';
 
 @Component({
   selector: 'sky-test-cmp',
@@ -6,6 +7,21 @@ import { Component } from '@angular/core';
 })
 export class ActionButtonTestComponent {
 
+  public permalink1: SkyActionButtonPermalink = {
+    url: 'https://host.nxt.blackbaud.com/skyux2/?component=SkyIconDemoComponent'
+  }
+
+  public permalink2: SkyActionButtonPermalink = {
+    route: {
+      commands: [],
+      extras: {
+        fragment: 'fragment',
+        queryParams: {},
+        queryParamsHandling: {}
+      }
+    }
+  }
+
   public buttonIsClicked: boolean = false;
 
   public buttonClicked() {
diff --git a/src/modules/action-button/index.ts b/src/modules/action-button/index.ts
index 588417d28..1c4433e2e 100644
--- a/src/modules/action-button/index.ts
+++ b/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';
diff --git a/src/modules/action-button/types/action-button-permalink.ts b/src/modules/action-button/types/action-button-permalink.ts
new file mode 100644
index 000000000..de8f00d3c
--- /dev/null
+++ b/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
+}
diff --git a/src/modules/action-button/types/index.ts b/src/modules/action-button/types/index.ts
new file mode 100644
index 000000000..1018f409e
--- /dev/null
+++ b/src/modules/action-button/types/index.ts
@@ -0,0 +1 @@
+export * from './action-button-permalink';

From 9df1d4b8c74850b131d3db74fc76fecb2e43b5db Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Mon, 20 Aug 2018 16:02:48 -0400
Subject: [PATCH 2/3] added testing for permalink

---
 .../action-button-visual.component.html       |  2 +-
 .../action-button-visual.component.ts         |  4 ++
 .../action-button-demo.component.html         | 15 ++++++-
 .../action-button-demo.component.ts           | 14 ++++++
 .../action-button.component.html              | 13 +++++-
 .../action-button.component.spec.ts           | 45 +++++++++----------
 .../action-button/action-button.component.ts  | 21 +--------
 .../action-button/action-button.module.ts     |  2 +
 .../action-button.component.fixture.ts        | 12 ++---
 9 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.html b/skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.html
index b857d0f12..8c4d70ee8 100644
--- a/skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.html
+++ b/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>
diff --git a/skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.ts b/skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.ts
index d6ad2c65b..7a9d19e30 100644
--- a/skyux-spa-visual-tests/src/app/action-button/action-button-visual.component.ts
+++ b/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() {
diff --git a/src/demos/action-button/action-button-demo.component.html b/src/demos/action-button/action-button-demo.component.html
index 1db837418..5812bcafc 100644
--- a/src/demos/action-button/action-button-demo.component.html
+++ b/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>
diff --git a/src/demos/action-button/action-button-demo.component.ts b/src/demos/action-button/action-button-demo.component.ts
index 7c8173c63..79542e00e 100644
--- a/src/demos/action-button/action-button-demo.component.ts
+++ b/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');
   }
diff --git a/src/modules/action-button/action-button.component.html b/src/modules/action-button/action-button.component.html
index 62016da0a..d597611cd 100644
--- a/src/modules/action-button/action-button.component.html
+++ b/src/modules/action-button/action-button.component.html
@@ -1,9 +1,8 @@
 <a
-  *ngIf="permalink"
+  *ngIf="permalink && permalink.route"
   class="sky-action-button sky-btn-default sky-rounded-corners"
   tabindex="0"
   [fragment]="permalink.route?.extras?.fragment"
-  [href]="permalink.url"
   [queryParams]="permalink.route?.extras?.queryParams"
   [queryParamsHandling]="permalink.route?.extras?.queryParamsHandling"
   [routerLink]="permalink.route?.commands">
@@ -12,6 +11,16 @@
   </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="!permalink"
   class="sky-action-button sky-btn-default sky-rounded-corners"
diff --git a/src/modules/action-button/action-button.component.spec.ts b/src/modules/action-button/action-button.component.spec.ts
index 1418e339a..55044daac 100644
--- a/src/modules/action-button/action-button.component.spec.ts
+++ b/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
       ]
     });
@@ -68,21 +73,13 @@ describe('Action button component', () => {
   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('')
-    expect(actionButton.getAttribute('routerLink')).toBeFalsy();
-    expect(actionButton.getAttribute('fragment')).toBeFalsy()
-    expect(actionButton.getAttribute('queryParams')).toBeFalsy()
-    expect(actionButton.getAttribute('queryParamsHandling')).toBeFalsy()
+    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(1);
+    let actionButton = el.querySelectorAll('.sky-action-button').item(2);
     expect(actionButton.tagName === 'a');
-    expect(actionButton.getAttribute('routerLink')).toBeTruthy()
-    expect(actionButton.getAttribute('fragment')).toBe('fragment')
-    expect(actionButton.getAttribute('queryParams')).toBeTruthy()
-    expect(actionButton.getAttribute('queryParamsHandling')).toBeTruthy()
-    expect(actionButton.getAttribute('href')).toBeFalsy();
+    expect(actionButton.getAttribute('href')).toBe('/?page=1#fragment');
   });
 
   it('should use a div element when permalink is not provided', () => {
diff --git a/src/modules/action-button/action-button.component.ts b/src/modules/action-button/action-button.component.ts
index c4f79a21c..bcde9de43 100644
--- a/src/modules/action-button/action-button.component.ts
+++ b/src/modules/action-button/action-button.component.ts
@@ -16,30 +16,11 @@ import {
 })
 export class SkyActionButtonComponent {
   @Input()
-  public get permalink(): SkyActionButtonPermalink {
-    if (!this._permaLink) {
-      return undefined;
-    }
-
-    if (this._permaLink.url) {
-      return {
-        url: this._permaLink.url
-      };
-    }
-
-    return {
-      route: this._permaLink.route
-    };
-  }
-  public set permalink(value: SkyActionButtonPermalink) {
-    this._permaLink = value;
-  }
+  public permalink: SkyActionButtonPermalink;
 
   @Output()
   public actionClick = new EventEmitter<any>();
 
-  private _permaLink: SkyActionButtonPermalink;
-
   public buttonClicked() {
     this.actionClick.emit();
   }
diff --git a/src/modules/action-button/action-button.module.ts b/src/modules/action-button/action-button.module.ts
index 203eea75a..9c4efa3a1 100644
--- a/src/modules/action-button/action-button.module.ts
+++ b/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
   ],
diff --git a/src/modules/action-button/fixtures/action-button.component.fixture.ts b/src/modules/action-button/fixtures/action-button.component.fixture.ts
index e79a4b25b..f62aa4add 100644
--- a/src/modules/action-button/fixtures/action-button.component.fixture.ts
+++ b/src/modules/action-button/fixtures/action-button.component.fixture.ts
@@ -8,19 +8,21 @@ import { SkyActionButtonPermalink } from '../types';
 export class ActionButtonTestComponent {
 
   public permalink1: SkyActionButtonPermalink = {
-    url: 'https://host.nxt.blackbaud.com/skyux2/?component=SkyIconDemoComponent'
-  }
+    url: 'https://developer.blackbaud.com/skyux/components'
+  };
 
   public permalink2: SkyActionButtonPermalink = {
     route: {
       commands: [],
       extras: {
         fragment: 'fragment',
-        queryParams: {},
-        queryParamsHandling: {}
+        queryParams: {
+          page: 1
+        },
+        queryParamsHandling: 'merge'
       }
     }
-  }
+  };
 
   public buttonIsClicked: boolean = false;
 

From f04555e4d29fd75c2a6b2e1bba180dad34d3f6b3 Mon Sep 17 00:00:00 2001
From: Conor Wright <Conor.Wright@blackbaud.com>
Date: Mon, 20 Aug 2018 16:10:44 -0400
Subject: [PATCH 3/3] fixed lint issue

---
 src/modules/action-button/types/action-button-permalink.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/action-button/types/action-button-permalink.ts b/src/modules/action-button/types/action-button-permalink.ts
index de8f00d3c..83ce3856d 100644
--- a/src/modules/action-button/types/action-button-permalink.ts
+++ b/src/modules/action-button/types/action-button-permalink.ts
@@ -6,6 +6,6 @@ export interface SkyActionButtonPermalink {
   route?: {
     commands: any[],
     extras: NavigationExtras
-  },
-  url?: string
+  };
+  url?: string;
 }