feat(button): add danger option (#46)

projects/ng-aquila/documentation/examples/button-danger/button-danger-example.css

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+  width: 100%;
+}
+
+button {
+  margin: 0 8px 16px;
+}

projects/ng-aquila/documentation/examples/button-danger/button-danger-example.html

@@ -0,0 +1,7 @@
+<button nxButton="primary danger" type="button">Primary</button>
+<button nxButton="secondary danger" type="button">Secondary</button>
+<button nxButton="tertiary danger" type="button">Tertiary</button>
+
+<button nxButton="primary danger" type="button" disabled>Disabled</button>
+<button nxButton="secondary danger" type="button" disabled>Disabled</button>
+<button nxButton="tertiary danger" type="button" disabled>Disabled</button>

projects/ng-aquila/documentation/examples/button-danger/button-danger-example.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+/**
+* @title Danger Buttons Example
+*/
+@Component({
+  templateUrl: './button-danger-example.html',
+  styleUrls: ['./button-danger-example.css']
+})
+export class ButtonDangerExampleComponent {
+}

projects/ng-aquila/documentation/examples/button-plain/button-plain-example.html

@@ -5,3 +5,5 @@
 <button nxPlainButton type="button" aria-label="add item">
   <nx-icon name="plus"></nx-icon>
 </button>
+<br>
+<button nxPlainButton="danger" type="button">Danger</button>

projects/ng-aquila/src/button/button-base.ts

@@ -34,6 +34,8 @@ export class NxButtonBase {
   /** @docs-private */
   @HostBinding('class.nx-button--small') get isSmall(): boolean { return this.size === 'small'; }
 
+  /** @docs-private */
+  @HostBinding('class.nx-button--danger') get isDanger(): boolean { return this.danger; }
   /** @docs-private */
   @HostBinding('class.nx-button--block') get isBlock(): boolean { return this.block; }
   /** @docs-private */
@@ -45,6 +47,7 @@ export class NxButtonBase {
   /** @docs-private */
   size: NxButtonSize = DEFAULT_SIZE;
 
+  danger: boolean = false;
   negative: boolean = false;
   block: boolean = false;
 
@@ -63,6 +66,7 @@ export class NxButtonBase {
     const [size = null] = this._classNames.match(/small-medium|small|medium|large/) || [DEFAULT_SIZE];
     this.size = size as NxButtonSize;
 
+    this.danger = /danger/.test(this._classNames);
     this.negative = /negative/.test(this._classNames);
     this.block = /block/.test(this._classNames);
 

projects/ng-aquila/src/button/button.component.spec.ts

@@ -17,11 +17,12 @@ abstract class ButtonTest {
 
   buttonType: NxButtonType = 'primary';
   buttonSize: NxButtonSize = 'medium';
+  danger: string = '';
   negative: string = '';
   block: string = '';
 
   get classNames(): string {
-    return `${this.buttonType} ${this.buttonSize} ${this.negative} ${this.block}`;
+    return `${this.buttonType} ${this.buttonSize} ${this.danger} ${this.negative} ${this.block}`;
   }
 }
 @Component({
@@ -103,7 +104,7 @@ class ConfigurableOnPushIconButton extends ButtonTest {
       fixture.detectChanges();
       testInstance = fixture.componentInstance;
       buttonInstance = testInstance.buttonInstance;
-      buttonNativeElement = <HTMLButtonElement>fixture.nativeElement.querySelector('button');
+      buttonNativeElement = (fixture.nativeElement.querySelector('button') as HTMLButtonElement);
     }
 
     function changeAndCheckButtonSize(testSize: NxButtonSize, expectedClass: string) {
@@ -165,6 +166,11 @@ class ConfigurableOnPushIconButton extends ButtonTest {
         expect(buttonNativeElement.classList).toContain('nx-button--primary');
       });
 
+      it('creates a non-danger button', () => {
+        createTestComponent(testTarget.basic);
+        expect(buttonNativeElement.classList).not.toContain('nx-button--danger');
+      });
+
       it('creates a non-negative button', () => {
         createTestComponent(testTarget.basic);
         expect(buttonNativeElement.classList).not.toContain('nx-button--negative');
@@ -202,6 +208,21 @@ class ConfigurableOnPushIconButton extends ButtonTest {
       });
     });
 
+    describe('danger', () => {
+      it('displays a danger button', () => {
+        createTestComponent(testTarget.configurable);
+        fixture.componentInstance.danger = 'danger';
+        fixture.detectChanges();
+        expect(buttonInstance.danger).toBe(true);
+        expect(buttonNativeElement.classList).toContain('nx-button--danger');
+
+        fixture.componentInstance.danger = '';
+        fixture.detectChanges();
+        expect(buttonInstance.danger).toBe(false);
+        expect(buttonNativeElement.classList).not.toContain('nx-button--danger');
+      });
+    });
+
     describe('negative styling', () => {
       it('displays a negative button', () => {
         createTestComponent(testTarget.configurable);
@@ -250,6 +271,19 @@ class ConfigurableOnPushIconButton extends ButtonTest {
         changeAndCheckButtonSizeProgrammaticly('small-medium', 'nx-button--small-medium');
       });
 
+      it('updates view on danger change', () => {
+        createTestComponent(testTarget.onPush);
+        buttonInstance.classNames = 'danger';
+        fixture.detectChanges();
+        expect(buttonInstance.danger).toBe(true);
+        expect(buttonNativeElement.classList).toContain('nx-button--danger');
+
+        buttonInstance.classNames = '';
+        fixture.detectChanges();
+        expect(buttonInstance.danger).toBe(false);
+        expect(buttonNativeElement.classList).not.toContain('nx-button--danger');
+      });
+
       it('updates view on negative change', () => {
         createTestComponent(testTarget.onPush);
         buttonInstance.classNames = 'negative';

projects/ng-aquila/src/button/button.md

@@ -31,6 +31,10 @@ We work with five different types of buttons. The primary's heavy appearance is
 
 <!-- example(button-large) -->
 
+### Danger
+
+<!-- example(button-danger) -->
+
 ### Block
 
 <!-- example(button-block) -->

projects/ng-aquila/src/button/button.scss

@@ -90,6 +90,10 @@ $button-margin-bottom: nx-spacer(m);
   @include button-theme(primary);
 }
 
+:host(.nx-button--primary.nx-button--danger) {
+  @include button-theme(primary-danger);
+}
+
 :host(.nx-button--primary.nx-button--negative) {
   @include var(background-color, negative);
   @include var(border-color, negative);
@@ -127,6 +131,10 @@ $button-margin-bottom: nx-spacer(m);
   @include button-theme(secondary);
 }
 
+:host(.nx-button--secondary.nx-button--danger) {
+  @include button-theme(secondary-danger);
+}
+
 :host(.nx-button--secondary.nx-button--negative) {
   @include var(color, negative);
   @include var(border-color, negative);
@@ -163,6 +171,10 @@ $button-margin-bottom: nx-spacer(m);
   @include button-theme(tertiary);
 }
 
+:host(.nx-button--tertiary.nx-button--danger) {
+  @include button-theme(tertiary-danger);
+}
+
 :host(.nx-button--tertiary.nx-button--negative) {
   @include var(color, negative);
 

projects/ng-aquila/src/button/plain-button.component.scss

@@ -40,6 +40,29 @@
   }
 }
 
+:host.nx-plain-button--danger {
+  @include var(color, plain-button-danger-color);
+
+  &:hover {
+    @include var(color, plain-button-danger-hover-color);
+  }
+
+  // reset hover styles for devices that don't support hover
+  @media (hover: none) {
+    &:hover {
+      @include var(color, plain-button-danger-color);
+    }
+  }
+
+  &:active {
+    @include var(color, plain-button-danger-active-color);
+  }
+
+  &:disabled {
+    @include var(color, plain-button-danger-disabled-color);
+  }
+}
+
 :host([nxplainbutton]) {
   ::ng-deep nx-icon {
     @include var(font-size, plain-button-icon-size);

projects/ng-aquila/src/button/plain-button.component.spec.ts

@@ -8,6 +8,8 @@ import { NxPlainButtonComponent } from './plain-button.component';
 @Directive()
 abstract class ButtonTest {
   @ViewChild('button') buttonInstance: NxPlainButtonComponent;
+
+  classNames: string;
 }
 
 describe('NxBreadcrumbComponent', () => {
@@ -19,7 +21,7 @@ describe('NxBreadcrumbComponent', () => {
     fixture = TestBed.createComponent(component);
     fixture.detectChanges();
     testInstance = fixture.componentInstance;
-    buttonElement = <HTMLButtonElement>fixture.nativeElement.querySelector('button');
+    buttonElement = (fixture.nativeElement.querySelector('button') as HTMLButtonElement);
   }
 
   beforeEach(async(() => {
@@ -39,12 +41,32 @@ describe('NxBreadcrumbComponent', () => {
     expect(buttonElement).toBeTruthy();
     expect(buttonElement.textContent).toBe('Hello Button');
   });
+
+  it('creates a non-danger button', () => {
+    createTestComponent(BasicButton);
+    expect(testInstance.buttonInstance.danger).toBe(false);
+    expect(buttonElement.classList).not.toContain('nx-plain-button--danger');
+  });
+
+  describe('danger', () => {
+    it('displays a danger button', () => {
+      createTestComponent(BasicButton);
+      fixture.componentInstance.classNames = 'danger';
+      fixture.detectChanges();
+      expect(testInstance.buttonInstance.danger).toBe(true);
+      expect(buttonElement.classList).toContain('nx-plain-button--danger');
+
+      fixture.componentInstance.classNames = '';
+      fixture.detectChanges();
+      expect(testInstance.buttonInstance.danger).toBe(false);
+      expect(buttonElement.classList).not.toContain('nx-plain-button--danger');
+    });
+  });
 });
 
 @Component({
   template: `
-    <button nxButton #button class="some-arbitray-class-name">Hello Button</button>
+    <button [nxPlainButton]="classNames" #button>Hello Button</button>
   `
 })
-class BasicButton extends ButtonTest {
-}
+class BasicButton extends ButtonTest {}

projects/ng-aquila/src/button/plain-button.component.ts

@@ -1,11 +1,35 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'button[nxPlainButton]',
   templateUrl: './plain-button.component.html',
   styleUrls: ['plain-button.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  inputs: ['classNames:nxPlainButton'],
+  host: {
+    '[class.nx-plain-button--danger]': 'danger'
+  }
 })
 export class NxPlainButtonComponent {
+
+  private _classNames: string;
+
+  danger: boolean = false;
+
+  public set classNames(value: string) {
+    if (this._classNames === value) {
+      return;
+    }
+
+    this._classNames = value;
+    this.danger = /danger/.test(this._classNames);
+    this._changeDetectorRef.markForCheck();
+  }
+
+  public get classNames(): string {
+    return this._classNames;
+  }
+
+  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
 }

projects/ng-aquila/src/shared-styles/theming/mixins.scss

@@ -90,8 +90,6 @@
 /// @returns a css style definition (e.g. background: var(--button-background);)
 /// @example - @include(background, button-background)
 @mixin var($property, $token) {
-  $fallbackValue: _get-fallback-value($token);
-
   #{$property}: var(--#{$token});
 }
 

projects/ng-aquila/src/shared-styles/theming/tokens.scss

@@ -351,6 +351,45 @@ $nx-theme: (
   button-cta-disabled-text-color: rgba(255, 255, 255, 0.4),
   button-cta-disabled-border-color: transparent,
 
+  button-primary-danger-background-color: danger,
+  button-primary-danger-border-color: transparent,
+  button-primary-danger-text-color: text-02,
+  button-primary-danger-hover-background-color: #EB5C6A,
+  button-primary-danger-hover-border-color: transparent,
+  button-primary-danger-hover-text-color: text-02,
+  button-primary-danger-active-background-color: #E94959,
+  button-primary-danger-active-text-color: text-02,
+  button-primary-danger-active-border-color: transparent,
+  button-primary-danger-disabled-background-color: rgba(#ED6F7C, 0.4),
+  button-primary-danger-disabled-text-color: rgba(0, 0, 0, 0.4),
+  button-primary-danger-disabled-border-color: transparent,
+
+  button-secondary-danger-background-color: transparent,
+  button-secondary-danger-border-color: danger,
+  button-secondary-danger-text-color: danger,
+  button-secondary-danger-hover-background-color: #EB5C6A,
+  button-secondary-danger-hover-border-color: transparent,
+  button-secondary-danger-hover-text-color: text-02,
+  button-secondary-danger-active-background-color: #E94959,
+  button-secondary-danger-active-text-color: text-02,
+  button-secondary-danger-active-border-color: transparent,
+  button-secondary-danger-disabled-background-color: transparent,
+  button-secondary-danger-disabled-text-color: rgba(#ED6F7C, 0.4),
+  button-secondary-danger-disabled-border-color: rgba(#ED6F7C, 0.4),
+
+  button-tertiary-danger-background-color: transparent,
+  button-tertiary-danger-border-color: transparent,
+  button-tertiary-danger-text-color: button-secondary-danger-text-color,
+  button-tertiary-danger-hover-background-color: #333333,
+  button-tertiary-danger-hover-border-color: transparent,
+  button-tertiary-danger-hover-text-color: #EB5C6A,
+  button-tertiary-danger-active-background-color: #474747,
+  button-tertiary-danger-active-text-color: #E94959,
+  button-tertiary-danger-active-border-color: transparent,
+  button-tertiary-danger-disabled-background-color: button-secondary-danger-disabled-background-color,
+  button-tertiary-danger-disabled-text-color: button-secondary-danger-disabled-text-color,
+  button-tertiary-danger-disabled-border-color: transparent,
+
   button-text-transform: uppercase,
   button-border-radius: 4px,
   button-border-width: 2px,
@@ -368,6 +407,12 @@ $nx-theme: (
   plain-button-hover-color: link-hover-color,
   plain-button-active-color: link-active-color,
   plain-button-disabled-color: link-disabled-color,
+
+  plain-button-danger-color: danger,
+  plain-button-danger-hover-color: #EB5C6A,
+  plain-button-danger-active-color: #E94959,
+  plain-button-danger-disabled-color: rgba(#ED6F7C, 0.4),
+
   plain-button-font-size: link-small-font-size,
   plain-button-line-height: link-small-line-height,
   plain-button-font-weight: link-small-font-weight,