feat(alert): add outline alerts (#590)

src/framework/theme/components/alert/_alert.component.theme.scss

@@ -11,8 +11,6 @@
   border-top-right-radius: nb-theme(alert-border-radius);
   color: nb-theme(alert-fg-heading);
 
-
-
   @include nb-headings();
 }
 
@@ -23,7 +21,7 @@
     font-weight: nb-theme(alert-font-weight);
 
     background: nb-theme(alert-bg);
-    color: nb-theme(alert-fg);
+    color: nb-theme(alert-outline-fg);
     // TODO: move alert margin style to layout
     margin-bottom: nb-theme(alert-margin);
     border-radius: nb-theme(alert-border-radius);
@@ -35,6 +33,10 @@
         nb-theme(scrollbar-bg),
         nb-theme(scrollbar-width));
 
+    &.status {
+      color: nb-theme(alert-fg);
+    }
+
     &.xxsmall-alert {
       height: nb-theme(alert-height-xxsmall);
     }
@@ -111,6 +113,28 @@
       border-top-color: nb-theme(alert-danger-bg);
     }
 
+    &.outline-active {
+      border: 2px solid nb-theme(alert-active-bg);
+    }
+    &.outline-disabled {
+      border: 2px solid nb-theme(alert-disabled-bg);
+    }
+    &.outline-primary {
+      border: 2px solid nb-theme(alert-primary-bg);
+    }
+    &.outline-success {
+      border: 2px solid nb-theme(alert-success-bg);
+    }
+    &.outline-info {
+      border: 2px solid nb-theme(alert-info-bg);
+    }
+    &.outline-warning {
+      border: 2px solid nb-theme(alert-warning-bg);
+    }
+    &.outline-danger {
+      border: 2px solid nb-theme(alert-danger-bg);
+    }
+
     .close {
       padding: nb-theme(alert-padding);
       font-size: 1.5rem;

src/framework/theme/components/alert/alert.component.ts

@@ -32,10 +32,13 @@ import { convertToBoolProperty } from '../helpers';
  * Colored alerts could be simply configured by providing a `status` property:
  * @stacked-example(Colored Alert, alert/alert-colors.component)
  *
- * It is also possible to assign an `accent` property for a slight card highlight
+ * It is also possible to assign an `accent` property for a slight alert highlight
  * as well as combine it with `status`:
  * @stacked-example(Accent Alert, alert/alert-accents.component)
  *
+ * And `outline` property:
+ * @stacked-example(Outline Alert, alert/alert-outline.component)
+ *
  * @additional-example(Multiple Sizes, alert/alert-sizes.component)
  *
  * @styles
@@ -44,6 +47,7 @@ import { convertToBoolProperty } from '../helpers';
  * alert-line-height:
  * alert-font-weight:
  * alert-fg:
+ * alert-outline-fg:
  * alert-bg:
  * alert-active-bg:
  * alert-disabled-bg:
@@ -103,9 +107,18 @@ export class NbAlertComponent {
   static readonly ACCENT_WARNING = 'warning';
   static readonly ACCENT_DANGER = 'danger';
 
+  static readonly OUTLINE_ACTIVE = 'active';
+  static readonly OUTLINE_DISABLED = 'disabled';
+  static readonly OUTLINE_PRIMARY = 'primary';
+  static readonly OUTLINE_INFO = 'info';
+  static readonly OUTLINE_SUCCESS = 'success';
+  static readonly OUTLINE_WARNING = 'warning';
+  static readonly OUTLINE_DANGER = 'danger';
+
   size: string;
-  status: string = NbAlertComponent.STATUS_SUCCESS;
+  status: string;
   accent: string;
+  outline: string;
 
   @HostBinding('class.closable')
   closableValue: boolean = false;
@@ -193,6 +206,11 @@ export class NbAlertComponent {
     return this.accent;
   }
 
+  @HostBinding('class.status')
+  get hasStatus() {
+    return this.status;
+  }
+
   @HostBinding('class.accent-primary')
   get primaryAccent() {
     return this.accent === NbAlertComponent.ACCENT_PRIMARY;
@@ -228,6 +246,46 @@ export class NbAlertComponent {
     return this.accent === NbAlertComponent.ACCENT_DISABLED;
   }
 
+  @HostBinding('class.outline')
+  get hasOutline() {
+    return this.outline;
+  }
+
+  @HostBinding('class.outline-primary')
+  get primaryOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_PRIMARY;
+  }
+
+  @HostBinding('class.outline-info')
+  get infoOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_INFO;
+  }
+
+  @HostBinding('class.outline-success')
+  get successOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_SUCCESS;
+  }
+
+  @HostBinding('class.outline-warning')
+  get warningOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_WARNING;
+  }
+
+  @HostBinding('class.outline-danger')
+  get dangerOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_DANGER;
+  }
+
+  @HostBinding('class.outline-active')
+  get activeOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_ACTIVE;
+  }
+
+  @HostBinding('class.outline-disabled')
+  get disabledOutline() {
+    return this.outline === NbAlertComponent.OUTLINE_DISABLED;
+  }
+
   /**
    * Alert size, available sizes:
    * xxsmall, xsmall, small, medium, large, xlarge, xxlarge
@@ -258,6 +316,16 @@ export class NbAlertComponent {
     this.accent = val;
   }
 
+  /**
+   * Alert outline (color of the border):
+   * active, disabled, primary, info, success, warning, danger
+   * @param {string} val
+   */
+  @Input('outline')
+  private set setOutline(val: string) {
+    this.outline = val;
+  }
+
   /**
    * Emits when chip is removed
    * @type EventEmitter<any>

src/framework/theme/components/alert/alert.spec.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NbAlertComponent } from './alert.component';
+
+describe('Component: NbAlert', () => {
+
+  let alert: NbAlertComponent;
+  let fixture: ComponentFixture<NbAlertComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [NbAlertComponent],
+    });
+
+    fixture = TestBed.createComponent(NbAlertComponent);
+    alert = fixture.componentInstance;
+  });
+
+  it('should set class danger', () => {
+    alert.status = 'danger';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('danger-alert'))
+      .toBeTruthy()
+  });
+
+  it('should set outline class', () => {
+    alert.outline = 'success';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('outline-success'))
+      .toBeTruthy()
+  });
+
+  it('should set shape class', () => {
+    alert.accent = 'warning';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('accent-warning'))
+      .toBeTruthy()
+  });
+
+  it('should set size class', () => {
+    alert.size = 'xxsmall';
+    fixture.detectChanges();
+    expect(
+      fixture
+        .debugElement.nativeElement.classList.contains('xxsmall-alert'))
+      .toBeTruthy()
+  });
+});

src/framework/theme/styles/themes/_default.scss

@@ -469,8 +469,9 @@ $theme: (
 
   alert-font-size: font-size,
   alert-line-height: line-height,
-  alert-font-weight: font-weight-bold,
+  alert-font-weight: font-weight-normal,
   alert-fg: color-white,
+  alert-outline-fg: color-fg,
   alert-bg: color-bg,
   alert-active-bg: color-fg,
   alert-disabled-bg: color-disabled,

src/playground/alert/alert-outline.component.html

@@ -0,0 +1,11 @@
+<nb-card>
+  <nb-card-body>
+    <nb-alert outline="success">You have been successfully authenticated!</nb-alert>
+    <nb-alert outline="danger">You have been successfully authenticated!</nb-alert>
+    <nb-alert outline="primary">You have been successfully authenticated!</nb-alert>
+    <nb-alert outline="info">You have been successfully authenticated!</nb-alert>
+    <nb-alert outline="warning">You have been successfully authenticated!</nb-alert>
+    <nb-alert outline="active">You have been successfully authenticated!</nb-alert>
+    <nb-alert outline="disabled">You have been successfully authenticated!</nb-alert>
+  </nb-card-body>
+</nb-card>

src/playground/alert/alert-outline.component.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'nb-alert-outline',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './alert-outline.component.html',
+})
+export class NbAlertOutlineComponent {
+}

src/playground/playground-routing.module.ts

@@ -103,6 +103,7 @@ import { NbAlertShowcaseComponent } from './alert/alert-showcase.component';
 import { NbAlertColorsComponent } from './alert/alert-colors.component';
 import { NbAlertAccentsComponent } from './alert/alert-accents.component';
 import { NbAlertSizesComponent } from './alert/alert-sizes.component';
+import { NbAlertOutlineComponent } from './alert/alert-outline.component';
 import { NbChatShowcaseComponent } from './chat/chat-showcase.component';
 import { NbChatColorsComponent } from './chat/chat-colors.component';
 import { NbChatSizesComponent } from './chat/chat-sizes.component';
@@ -359,6 +360,10 @@ export const routes: Routes = [
             path: 'alert-sizes.component',
             component: NbAlertSizesComponent,
           },
+          {
+            path: 'alert-outline.component',
+            component: NbAlertOutlineComponent,
+          },
         ],
       },
       {

src/playground/playground.module.ts

@@ -137,6 +137,7 @@ import { NbAlertColorsComponent } from './alert/alert-colors.component';
 import { NbAlertAccentsComponent } from './alert/alert-accents.component';
 import { NbAlertSizesComponent } from './alert/alert-sizes.component';
 import { NbAlertTestComponent } from './alert/alert-test.component';
+import { NbAlertOutlineComponent } from './alert/alert-outline.component';
 import { NbChatShowcaseComponent } from './chat/chat-showcase.component';
 import { NbChatColorsComponent } from './chat/chat-colors.component';
 import { NbChatSizesComponent } from './chat/chat-sizes.component';
@@ -294,6 +295,7 @@ export const NB_EXAMPLE_COMPONENTS = [
   NbAlertAccentsComponent,
   NbAlertSizesComponent,
   NbAlertTestComponent,
+  NbAlertOutlineComponent,
   NbChatShowcaseComponent,
   NbChatColorsComponent,
   NbChatSizesComponent,