Merge pull request #213 from TAMULib/sprint11-207-wvr-alert-component

Added wvr alert component

projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.html

@@ -0,0 +1,57 @@
+<div *ngIf="!alertClosed"
+  class="wvr-components wvr-alert alert"
+  [ngClass]="{
+    'alert-primary': alertClass==='primary',
+    'alert-secondary': alertClass==='secondary',
+    'alert-success': alertClass==='success',
+    'alert-danger': alertClass==='danger',
+    'alert-warning': alertClass==='warning',
+    'alert-info': alertClass==='info',
+    'alert-light': alertClass==='light',
+    'alert-dark': alertClass==='dark'
+  }"
+  role="alert">
+
+    <div *ngIf="alertType==='basic'" class="basic flex-fill align-self-stretch">
+      <ng-container *ngTemplateOutlet="basic"></ng-container>
+    </div>
+
+    <div *ngIf="alertType==='closable'" class="closable flex-fill align-self-stretch">
+      <ng-container *ngTemplateOutlet="closable"></ng-container>
+    </div>
+
+    <div *ngIf="alertType==='self-closing'" class="self-closing flex-fill align-self-stretch">
+      <ng-container *ngTemplateOutlet="selfClosing"></ng-container>
+    </div>
+
+    <div *ngIf="alertType==='custom'" class="custom flex-fill align-self-stretch">
+      <ng-container *ngTemplateOutlet="custom"></ng-container>
+    </div>
+
+</div>
+
+<ng-template #basic>
+  <ng-content select="wvr-text, wvr-text-element"></ng-content>
+</ng-template>
+
+<ng-template #closable>
+   <div class="alert-dismissible">
+      <ng-container *ngTemplateOutlet="basic"></ng-container>
+      <button type="button" class="close btn btn-{{alertClass}}" aria-label="Close" (click)="clickClose($event)">
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
+</ng-template>
+
+<ng-template #selfClosing>
+  <div class="alert-dismissible" (close)="alertClosed = true">
+    <ng-container *ngTemplateOutlet="basic"></ng-container>
+  </div>
+</ng-template>
+
+<ng-template #custom>
+  <ng-content select="wvr-custom-alert"></ng-content>
+</ng-template>
+
+
+

projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.scss

@@ -0,0 +1,186 @@
+@import "../shared/styles/wvr-variables.scss";
+
+:host {
+
+  // alert-primary
+  --wvr-alert-primary-color-default: #004085;
+  --wvr-alert-primary-background-default: #cce5ff;
+  --wvr-alert-primary-border-default: #b8daff;
+
+  --wvr-alert-link-primary-color-default: #002752;
+
+  // .alert-secondary
+  --wvr-alert-secondary-color-default: #383d41;
+  --wvr-alert-secondary-background-default: #e2e3e5;
+  --wvr-alert-secondary-border-default: #d6d8db;
+
+  --wvr-alert-link-secondary-color-default: #202326;
+
+  // alert-success
+  --wvr-alert-success-color-default: #155724;
+  --wvr-alert-success-background-default: #d4edda;
+  --wvr-alert-success-border-default: #c3e6cb;
+
+  --wvr-alert-link-success-color-default: #0b2e13;
+
+  // alert-danger
+  --wvr-alert-danger-color-default: #721c24;
+  --wvr-alert-danger-background-default: #f8d7da;
+  --wvr-alert-danger-border-default: #f5c6cb;
+
+  --wvr-alert-link-danger-color-default: #491217;
+
+  // alert-warning
+  --wvr-alert-warning-color-default: #856404;
+  --wvr-alert-warning-background-default: #fff3cd;
+  --wvr-alert-warning-border-default: #ffeeba;
+
+  --wvr-alert-link-warning-color-default: #533f03;
+
+  // alert-info
+  --wvr-alert-info-color-default: #0c5460;
+  --wvr-alert-info-background-default: #d1ecf1;
+  --wvr-alert-info-border-default: #bee5eb;
+
+  --wvr-alert-link-info-color-default: #062c33;
+
+  // alert-light
+  --wvr-alert-light-color-default: #818182;
+  --wvr-alert-light-background-default: #fefefe;
+  --wvr-alert-light-border-default: #fdfdfe;
+
+  --wvr-alert-light-warning-color-default: #686868;
+
+  // alert-dark
+  --wvr-alert-dark-color-default: #1b1e21;
+  --wvr-alert-dark-background-default: #d6d8d9;
+  --wvr-alert-dark-border-default: #c6c8ca;
+
+  --wvr-alert-link-dark-color-default : #040505;
+
+  .alert {
+    position: relative;
+    padding: .75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: .25rem;
+  }
+
+  .alert-dismissible {
+    padding-right: 4rem;
+  }
+
+  .alert-dismissible .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: .75rem 1.25rem;
+    color: inherit;
+  }
+
+  .alert-heading {
+    color: inherit;
+  }
+
+  .btn.btn-primary,
+  .btn.btn-secondary,
+  .btn.btn-success,
+  .btn.btn-danger,
+  .btn.btn-warning,
+  .btn.btn-info,
+  .btn.btn-light,
+  .btn.btn-dark {
+    font-size: 1.2rem;
+    box-shadow: none;
+  }
+
+  a {
+    text-decoration: none;
+    background-color: transparent;
+  }
+
+  .alert-link {
+    font-weight: 700;
+  }
+
+  .alert-primary {
+    color: var(--wvr-alert-primary-color-default);
+    background-color: var(--wvr-alert-primary-background-default);
+    border-color: var(--wvr-alert-primary-border-default);
+  }
+
+  .alert-primary .alert-link {
+    color: var(--wvr-alert-link-primary-color-default);
+  }
+
+  .alert-secondary {
+    color: var(--wvr-alert-secondary-color-default);
+    background-color: var(--wvr-alert-secondary-background-default);
+    border-color: var(--wvr-alert-secondary-border-default);
+  }
+
+  .alert-secondary .alert-link {
+    color: var(--wvr-alert-link-secondary-color-default);
+  }
+
+  .alert-success {
+    color: var(--wvr-alert-success-color-default);
+    background-color: var(--wvr-alert-success-background-default);
+    border-color: var(--wvr-alert-success-border-default);
+  }
+
+  .alert-success .alert-link {
+    color: var(--wvr-alert-link-success-color-default);
+  }
+
+  .alert-danger {
+    color: var(--wvr-alert-danger-color-default);
+    background-color: var(--wvr-alert-danger-background-default);
+    border-color: var(--wvr-alert-danger-border-default);
+  }
+
+  .alert-danger .alert-link {
+    color: var(--wvr-alert-link-danger-color-default);
+  }
+
+  .alert-warning {
+    color: var(--wvr-alert-warning-color-default);
+    background-color: var(--wvr-alert-warning-background-default);
+    border-color: var(--wvr-alert-warning-border-default);
+  }
+
+  .alert-warning .alert-link {
+    color: var(--wvr-alert-link-warning-color-default);
+  }
+
+  .alert-info {
+    color: var(--wvr-alert-info-color-default);
+    background-color: var(--wvr-alert-info-background-default);
+    border-color: var(--wvr-alert-info-border-default);
+  }
+
+  .alert-info .alert-link {
+    color: var(--wvr-alert-link-info-color-default);
+  }
+
+  .alert-light {
+    color: var(--wvr-alert-light-color-default);
+    background-color: var(--wvr-alert-light-background-default);
+    border-color: var(--wvr-alert-light-border-default);
+  }
+
+  .alert-light .alert-link {
+    color: var(--wvr-alert-light-warning-color-default);
+  }
+
+  .alert-dark {
+    color: var(--wvr-alert-dark-color-default);
+    background-color: var(--wvr-alert-dark-background-default);
+    border-color: var(--wvr-alert-dark-border-default);
+  }
+
+  .alert-dark .alert-link {
+    color: var(--wvr-alert-link-dark-color-default);
+  }
+
+}

projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.spec.ts

@@ -0,0 +1,53 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { WvrAlertComponent } from './wvr-alert.component';
+
+describe('WvrAlertComponent', () => {
+  let component: WvrAlertComponent;
+  let fixture: ComponentFixture<WvrAlertComponent>;
+
+  // tslint:disable-next-line: deprecation
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [WvrAlertComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WvrAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+    .toBeTruthy();
+  });
+
+  it("should have as alert Class as 'primary'", () => {
+    expect(component.alertClass)
+      .toEqual('primary');
+  });
+
+  it("should have as alert type as 'basic'", () => {
+    expect(component.alertType)
+      .toEqual('basic');
+  });
+
+  it('should close when closable', () => {
+    component.alertType = 'closable';
+    fixture.detectChanges();
+    const alertElem = fixture.elementRef.nativeElement as HTMLElement;
+    // tslint:disable-next-line: no-unnecessary-type-assertion
+    const closeButton = alertElem.querySelector('button.close') as HTMLElement;
+    expect(component.alertClosed)
+      .toBeFalse();
+    closeButton.dispatchEvent(new MouseEvent('click'));
+    expect(component.alertClosed)
+    .toBeTrue();
+  });
+});

projects/wvr-elements/src/lib/wvr-alert/wvr-alert.component.ts

@@ -0,0 +1,44 @@
+import { Component, HostListener, Injector, Input, OnInit } from '@angular/core';
+import { WvrBaseComponent } from '../shared/wvr-base.component';
+
+@Component({
+  selector: 'wvr-alert-element',
+  templateUrl: './wvr-alert.component.html',
+  styleUrls: ['./wvr-alert.component.scss']
+})
+export class WvrAlertComponent extends WvrBaseComponent implements OnInit {
+
+  /** Used to define the class type of an alert component.  */
+  @Input() alertClass: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' = 'primary';
+
+  /** Used to define the type of alert.  */
+  @Input() alertType: 'basic' | 'closable' | 'self-closing' | 'custom' = 'basic';
+
+  /** Used to self close the alert box. */
+  alertClosed = false;
+
+  /** Setting the delay timer for the self closing alert message */
+  @Input() closeTimer = 5000;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  /**
+   * An event handle method for the `document:click` event.
+   * Closes the alert box once the `X` is clicked.
+   */
+  clickClose($event: MouseEvent): void {
+    if (($event.target as HTMLElement).closest('div.closable')) {
+      this.alertClosed = true;
+    }
+  }
+
+  ngOnInit(): void {
+    const alertType = (this._eRef.nativeElement as HTMLElement).getAttribute('alert-type');
+    setTimeout(() => {
+        this.alertClosed = (alertType === 'self-closing') ? true : false;
+    }, this.closeTimer);
+  }
+
+}