Big button component (#322)

* Initial implementation of button-large component

TODO:
  - unit tests
  - documentation/demo tweaks
  - visual tests

* Add unit tests for button large unit tests

TODO:
  - docs
  - visual tests

* visual tests for large button

* Update to use action-button instead of button-large

* Fix tslint error

* Update documentation for action buttons

* Add tabindex="0" and enter press

src/app/components/action-button/action-button-demo.component.html

@@ -0,0 +1,27 @@
+<div>
+  <sky-action-button
+    (actionClick)="filterActionClick()">
+    <sky-action-button-icon
+      iconType="filter"
+    ></sky-action-button-icon>
+    <sky-action-button-header>
+      Build a new list
+    </sky-action-button-header>
+    <sky-action-button-details>
+      Start from scratch and fine-tune with filters
+    </sky-action-button-details>
+  </sky-action-button>
+
+  <sky-action-button
+    (actionClick)="openActionClick()">
+    <sky-action-button-icon
+      iconType="folder-open-o">
+    </sky-action-button-icon>
+    <sky-action-button-header>
+      Open a saved list
+    </sky-action-button-header>
+    <sky-action-button-details>
+      Open a list with filters saved in the web view
+    </sky-action-button-details>
+  </sky-action-button>
+</div>

src/app/components/action-button/action-button-demo.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-action-button-demo',
+  templateUrl: './action-button-demo.component.html'
+})
+export class SkyActionButtonDemoComponent {
+  public filterActionClick() {
+    alert('Filter action clicked');
+  }
+
+  public openActionClick() {
+    alert('Open action clicked');
+  }
+}

src/app/components/action-button/index.html

@@ -0,0 +1,28 @@
+<sky-demo-page title="Action button">
+  <sky-demo-page-summary>
+    <p>
+      The action button component creates a large button with an icon, header, and details. These buttons can be used to allow users to pick an action during a branching point in the system.
+    </p>
+    <p>
+      The <code>sky-action-button</code> component consists of three inner components: <code>sky-action-button-icon</code>, <code>sky-action-button-header</code>, and <code>sky-action-button-details</code>.
+    </p>
+  </sky-demo-page-summary>
+
+  <sky-demo-page-properties sectionHeading="Action button events">
+    <sky-demo-page-property
+      propertyName="actionClick">
+      Fires when the user clicks the action button.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+
+  <sky-demo-page-properties sectionHeading="Action button icon properties">
+    <sky-demo-page-property
+      propertyName="iconType">
+      Specifies an icon to be used from the Font Awesome library. For example, to use the <code>fa-filter</code> icon, use <code>filter</code> as the <code>iconType</code>.
+    </sky-demo-page-property>
+  </sky-demo-page-properties>
+  <sky-demo-page-example>
+    <sky-action-button-demo></sky-action-button-demo>
+    <sky-demo-page-code demoName="Action button"></sky-demo-page-code>
+  </sky-demo-page-example>
+</sky-demo-page>

src/app/components/demo-components.service.ts

@@ -47,6 +47,28 @@ export class SkyDemoComponentsService {
           ];
         }
       },
+      {
+        name: 'Action button',
+        icon: 'square-o',
+        // tslint:disable-next-line
+        summary:
+          `The action button component creates a large button with an icon, heading, and details.`,
+        url: '/components/action-button',
+        getCodeFiles: function () {
+          return [
+            {
+              name: 'action-button-demo.component.html',
+              fileContents: require('!!raw!./action-button/action-button-demo.component.html')
+            },
+            {
+              name: 'action-button-demo.component.ts',
+              fileContents: require('!!raw!./action-button/action-button-demo.component.ts'),
+              componentName: 'SkyActionButtonDemoComponent',
+              bootstrapSelector: 'sky-action-button-demo'
+            }
+          ];
+        }
+      },
       {
         name: 'Card',
         icon: 'th-large',

src/core.ts

@@ -4,6 +4,7 @@ import { SKY_MODAL_PROVIDERS } from './modules/modal';
 import { SKY_WAIT_PROVIDERS } from './modules/wait';
 import { SkyAlertModule } from './modules/alert';
 import { SkyAvatarModule } from './modules/avatar';
+import { SkyActionButtonModule } from './modules/action-button';
 import { SkyCardModule } from './modules/card';
 import { SkyCheckboxModule } from './modules/checkbox';
 import { SkyChevronModule } from './modules/chevron';
@@ -32,6 +33,7 @@ import { SkyWaitModule } from './modules/wait';
   exports: [
     SkyAlertModule,
     SkyAvatarModule,
+    SkyActionButtonModule,
     SkyCardModule,
     SkyCheckboxModule,
     SkyChevronModule,
@@ -61,6 +63,7 @@ export class SkyModule { }
 
 export * from './modules/alert';
 export * from './modules/avatar';
+export * from './modules/action-button';
 export * from './modules/card';
 export * from './modules/checkbox';
 export * from './modules/definition-list';

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

@@ -0,0 +1,10 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-action-button-details',
+  templateUrl: '../shared/simple-content.html'
+})
+export class SkyActionButtonDetailsComponent {
+}

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

@@ -0,0 +1,3 @@
+<div class="sky-action-button-header sky-section-heading">
+  <ng-content></ng-content>
+</div>

src/modules/action-button/action-button-header.component.scss

@@ -0,0 +1,19 @@
+@import '../../scss/mixins';
+
+.sky-action-button-header {
+  display: inline-block;
+}
+
+@media (max-width: $sky-screen-xs-max) {
+  .sky-action-button-header {
+    margin-left: $sky-margin-half;
+    margin-right: $sky-margin-half;
+  }
+}
+
+@media (min-width: $sky-screen-sm-min) {
+  .sky-action-button-header {
+    display: block;
+    margin-bottom: $sky-margin-double;
+  }
+}

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

@@ -0,0 +1,11 @@
+import {
+  Component
+} from '@angular/core';
+
+@Component({
+  selector: 'sky-action-button-header',
+  styleUrls: ['./action-button-header.component.scss'],
+  templateUrl: './action-button-header.component.html'
+})
+export class SkyActionButtonHeaderComponent {
+}

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

@@ -0,0 +1,6 @@
+<span class="sky-action-button-icon-container">
+  <i
+    class="fa sky-action-button-icon"
+    [ngClass]="['fa-' + iconType, fontSizeClass]">
+  </i>
+</span>

src/modules/action-button/action-button-icon.component.scss

@@ -0,0 +1,23 @@
+@import '../../scss/mixins';
+
+.sky-action-button-icon-container {
+  display: inline-block;
+}
+
+@media (max-width: $sky-screen-xs-max) {
+  .sky-action-button-icon-container {
+    margin-left: $sky-margin-half;
+    margin-right: $sky-margin-half;
+  }
+}
+
+@media (min-width: $sky-screen-sm-min) {
+  .sky-action-button-icon-container {
+    display: block;
+    margin-bottom: $sky-margin-double;
+  }
+}
+
+.sky-action-button-icon {
+  color: $sky-color-blue;
+}

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

@@ -0,0 +1,43 @@
+import {
+  Component,
+  Input,
+  OnDestroy
+} from '@angular/core';
+
+import {
+  SkyMediaQueryService,
+  SkyMediaBreakpoints
+} from '../media-queries';
+
+import {
+  Subscription
+} from 'rxjs';
+
+@Component({
+  selector: 'sky-action-button-icon',
+  styleUrls: ['./action-button-icon.component.scss'],
+  templateUrl: './action-button-icon.component.html'
+})
+export class SkyActionButtonIconComponent implements OnDestroy {
+
+  @Input()
+  public iconType: string;
+
+  public fontSizeClass: string;
+
+  private subscription: Subscription;
+
+  constructor(private mediaQueryService: SkyMediaQueryService) {
+    this.subscription = this.mediaQueryService.subscribe((args: SkyMediaBreakpoints) => {
+      if (args === SkyMediaBreakpoints.xs) {
+        this.fontSizeClass = 'fa-2x';
+      } else {
+        this.fontSizeClass = 'fa-3x';
+      }
+    });
+  }
+
+  public ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,13 @@
+<div
+  class="sky-action-button"
+  role="button"
+  (click)="buttonClicked()"
+  (keyup)="enterPress($event)"
+  tabindex="0"
+  >
+  <div class="sky-action-button-icon-header-container">
+    <ng-content select="sky-action-button-icon"></ng-content>
+    <ng-content select="sky-action-button-header"></ng-content>
+  </div>
+  <ng-content select="sky-action-button-details"></ng-content>
+</div>

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

@@ -0,0 +1,30 @@
+@import '../../scss/mixins';
+
+.sky-action-button {
+  @include sky-button-variant($sky-text-color, $sky-color-white, $sky-color-gray-lighter);
+  @include sky-border(dark, top, bottom, left, right);
+  max-width: 236px;
+  border-radius: 3px;
+  margin-top: $sky-margin-double;
+  margin-right: $sky-margin-double;
+  cursor: pointer;
+  display: inline-block;
+  padding-top: 20px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-bottom: 30px;
+  text-align: center;
+}
+
+@media (min-width: $sky-screen-sm-min) {
+  .sky-action-button {
+    padding: 30px 20px;
+  }
+}
+
+@media (max-width: $sky-screen-xs-max) {
+  .sky-action-button-icon-header-container {
+    margin-bottom: $sky-margin-double;
+  }
+}
+