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,