Merge pull request #198 from TAMULib/sprint11-staging

Sprint11 staging

angular.json

@@ -62,12 +62,12 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1mb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "2.2mb",
+                  "maximumError": "3mb"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "50kb",
+                  "maximumWarning": "250kb",
                   "maximumError": "500kb"
                 }
               ]

lighthouserc.json

@@ -11,7 +11,7 @@
       "assertions": {
         "first-contentful-paint": "off",
         "categories:performance": ["error", {"minScore":  0}],
-        "categories:accessibility": ["error", {"minScore":  0.85}],
+        "categories:accessibility": ["error", {"minScore":  0.8}],
         "categories:best-practices": ["error", {"minScore":  0}],
         "categories:seo": ["error", {"minScore":  0}],
         "categories:pwa":["error", {"minScore":  0}]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamu-library-components",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "build": "ng build --prod --output-hashing none",
@@ -43,7 +43,7 @@
     "@angular/platform-browser-dynamic": "^10.0.12",
     "@angular/router": "^10.0.12",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
-    "@wvr/elements": "1.4.0",
+    "@wvr/elements": "1.5.0",
     "bootstrap": "^4.5.2",
     "classlist.js": "^1.1.20150312",
     "document-register-element": "^1.14.5",

src/app/tl-alert/tl-alert.component.html

@@ -0,0 +1,8 @@
+<wvr-alert-element
+[alertType]="alertType"
+[alertClass]="alertClass"
+[closable]="closable"
+[closeTimer]="closeTimer">
+  <ng-content select="wvr-text, wvr-text-element" ngProjectAs="wvr-text"></ng-content>
+  <ng-content select="tl-custom-alert" ngProjectAs="wvr-custom-alert"></ng-content>
+</wvr-alert-element>

src/app/tl-alert/tl-alert.component.scss

@@ -0,0 +1,74 @@
+@import "../shared/styles/tl-encapsulated.scss";
+@import "../shared/styles/tl-branded-btn.scss";
+
+:host {
+
+  wvr-alert-element {
+    ::ng-deep {
+      .alert {
+        border-radius: 0;
+      }
+
+      .btn.btn-danger.close:hover,
+      .btn.btn-dark.close:hover,
+      .btn.btn-info.close:hover,
+      .btn.btn-light.close:hover,
+      .btn.btn-primary.close:hover,
+      .btn.btn-secondary.close:hover,
+      .btn.btn-success.close:hover,
+      .btn.btn-warning.close:hover {
+        color: var(--tl-black);
+        text-decoration: none;
+        background: transparent;
+        opacity: .75;
+      }
+
+      .btn.btn-danger.close:focus,
+      .btn.btn-dark.close:focus,
+      .btn.btn-info.close:focus,
+      .btn.btn-light.close:focus,
+      .btn.btn-primary.close:focus,
+      .btn.btn-secondary.close:focus,
+      .btn.btn-success.close:focus,
+      .btn.btn-warning.close:focus {
+        opacity: .75;
+        color: var(--tl-black);
+        background: transparent;
+        // border: 0.12rem solid var(--tl-black);
+        top: -2px;
+      }
+
+      .btn.btn-danger.close:focus,
+      .btn.btn-dark.close:focus,
+      .btn.btn-info.close:focus,
+      .btn.btn-light.close:focus,
+      .btn.btn-primary.close:focus,
+      .btn.btn-secondary.close:focus,
+      .btn.btn-success.close:focus,
+      .btn.btn-warning.close:focus {
+        box-shadow: none;
+      }
+
+      .btn.btn-danger.close:active,
+      .btn.btn-danger.close.active,
+      .btn.btn-dark.close:active,
+      .btn.btn-dark.close.active,
+      .btn.btn-info.close:active,
+      .btn.btn-info.close.active,
+      .btn.btn-light.close:active,
+      .btn.btn-light.close.active,
+      .btn.btn-primary.close:active,
+      .btn.btn-primary.close.active,
+      .btn.btn-secondary.close:active,
+      .btn.btn-secondary.close.active,
+      .btn.btn-success.close:active,
+      .btn.btn-success.close.active,
+      .btn.btn-warning.close:active,
+      .btn.btn-warning.close.active {
+        color: var(--tl-black);
+        background: transparent;
+      }
+
+    }
+  }
+}

src/app/tl-alert/tl-alert.component.spec.ts

@@ -0,0 +1,45 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { TlAlertComponent } from './tl-alert.component';
+
+describe('TlAlertComponent', () => {
+  let component: TlAlertComponent;
+  let fixture: ComponentFixture<TlAlertComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [ TlAlertComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TlAlertComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should customize alertClass', () => {
+    expect(component.alertClass)
+      .toBeUndefined();
+    component.alertClass = 'success';
+    fixture.detectChanges();
+    expect(component.alertClass)
+      .toEqual('success');
+  });
+
+  it('should customize alertType', () => {
+    expect(component.alertType)
+      .toBeUndefined();
+    component.alertType = 'custom';
+    fixture.detectChanges();
+    expect(component.alertType)
+      .toEqual('custom');
+  });
+});

src/app/tl-alert/tl-alert.component.ts

@@ -0,0 +1,27 @@
+import { Component, Injector, Input } from '@angular/core';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
+
+@Component({
+  selector: 'tl-alert-element',
+  templateUrl: './tl-alert.component.html',
+  styleUrls: ['./tl-alert.component.scss']
+})
+export class TlAlertComponent extends TamuAbstractBaseComponent {
+
+  /** Used to override the alert class. */
+  @Input() alertClass: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
+
+  /** Used to override the type of alert.  */
+  @Input() alertType: 'basic' | 'self-closing' | 'custom';
+
+  /** Used to override if close button has to be present for an alert.  */
+  @Input() closable: 'true' | 'false' = 'true';
+
+  @Input() closeTimer;
+
+  // tslint:disable-next-line:unnecessary-constructor
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+}

src/app/tl-lib.module.ts

@@ -2,6 +2,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { WvrLibModule } from '@wvr/elements';
+import { TlAlertComponent } from './tl-alert/tl-alert.component';
 import { TlButtonComponent } from './tl-button/tl-button.component';
 import { TlDropDownComponent } from './tl-drop-down/tl-drop-down.component';
 import { TamuFooterComponent } from './tl-footer/tl-footer.component';
@@ -11,9 +12,13 @@ import { TamuItWorksComponent } from './tl-it-works/tl-it-works.component';
 import { TlMegaMenuSectionComponent } from './tl-mega-menu/tl-mega-menu-section/tl-mega-menu-section.component';
 import { TlMegaMenuComponent } from './tl-mega-menu/tl-mega-menu.component';
 import { TamuNavListComponent } from './tl-nav-list/tl-nav-list.component';
+import { TlTabsComponent } from './tl-tabs/tl-tabs.component';
+import { TlTabComponent } from './tl-tabs/tl-tab/tl-tab.component';
+
 
 /** This property contains a list of TAMU components and the selector tags. */
 const elements = [
+  { component: TlAlertComponent, selector: 'tl-alert' },
   { component: TlButtonComponent, selector: 'tl-button' },
   { component: TlDropDownComponent, selector: 'tl-drop-down' },
   { component: TamuFooterComponent, selector: 'tl-footer' },
@@ -22,11 +27,14 @@ const elements = [
   { component: TamuItWorksComponent, selector: 'tl-it-works' },
   { component: TlMegaMenuComponent, selector: 'tl-mega-menu' },
   { component: TlMegaMenuSectionComponent, selector: 'tl-mega-menu-section' },
-  { component: TamuNavListComponent, selector: 'tl-nav-list' }
+  { component: TamuNavListComponent, selector: 'tl-nav-list' },
+  { component: TlTabsComponent, selector: 'tl-tabs' },
+  { component: TlTabComponent, selector: 'tl-tab' }
 ];
 
 /** This property contains a list of TAMU components classes. */
 const components = [
+  TlAlertComponent,
   TlButtonComponent,
   TlDropDownComponent,
   TamuFooterComponent,
@@ -35,7 +43,9 @@ const components = [
   TlIconComponent,
   TlMegaMenuComponent,
   TlMegaMenuSectionComponent,
-  TamuNavListComponent
+  TamuNavListComponent,
+  TlTabsComponent,
+  TlTabComponent
 ];
 
 /** The main module for the TAMU Compnent library. */
@@ -66,7 +76,7 @@ export class TamuLibModule {
   ngDoBootstrap(): void {
     elements.forEach(element => {
       try {
-        customElements.define(element.selector, createCustomElement(element.component, { 
+        customElements.define(element.selector, createCustomElement(element.component, {
           injector: this.injector
          }));
       } catch (e) {

src/app/tl-tabs/tl-tab/tl-tab.component.html

@@ -0,0 +1,3 @@
+<wvr-tab-element [tabText]="tabText">
+  <ng-content></ng-content>
+</wvr-tab-element>

src/app/tl-tabs/tl-tab/tl-tab.component.scss

@@ -0,0 +1,28 @@
+@import "../../shared/styles/tl-encapsulated.scss";
+@import "../../shared/styles/tl-branded-btn.scss";
+
+:host {
+
+  ::ng-deep {
+
+    .nav-item {
+      display: inline-block;
+      .nav-link {
+        border: 1px solid var(--tl-grey);
+        border-top: 5px solid var(--tl-grey);
+        border-radius: 0px 0px 0 0;
+        color: #5a534d;
+      }
+      .nav-link:hover,
+      .nav-link.active {
+        color: #000000;
+        background-color: #fff;
+        border-top: 5px solid var(--tl-primary);
+      }
+      .nav-link:hover {
+        border-bottom: 1px solid var(--tl-grey);
+      }
+    }
+  }
+
+}

src/app/tl-tabs/tl-tab/tl-tab.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { TlTabComponent } from './tl-tab.component';
+
+describe('TlTabComponent', () => {
+  let component: TlTabComponent;
+  let fixture: ComponentFixture<TlTabComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [ TlTabComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TlTabComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+});

src/app/tl-tabs/tl-tab/tl-tab.component.ts

@@ -0,0 +1,18 @@
+import { Component, Injector, Input } from '@angular/core';
+import { TamuAbstractBaseComponent } from '../../shared/tl-abstract-base.component';
+
+@Component({
+  selector: 'tl-tab',
+  templateUrl: './tl-tab.component.html',
+  styleUrls: ['./tl-tab.component.scss']
+})
+export class TlTabComponent extends TamuAbstractBaseComponent {
+
+  @Input() tabText = `Tab ${this.id}`;
+
+  // tslint:disable-next-line:unnecessary-constructor
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+}

src/app/tl-tabs/tl-tabs.component.html

@@ -0,0 +1,3 @@
+<wvr-tabs-element>
+  <ng-content select="tl-tab, tl-tab-element" ngProjectAs="wvr-tab"></ng-content>
+</wvr-tabs-element>

src/app/tl-tabs/tl-tabs.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { TlTabsComponent } from './tl-tabs.component';
+
+describe('TlTabsComponent', () => {
+  let component: TlTabsComponent;
+  let fixture: ComponentFixture<TlTabsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BrowserAnimationsModule],
+      declarations: [ TlTabsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TlTabsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+});

src/app/tl-tabs/tl-tabs.component.ts

@@ -0,0 +1,17 @@
+import { Component, Injector, OnInit } from '@angular/core';
+import { __extends } from 'tslib';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
+
+@Component({
+  selector: 'tl-tabs-element',
+  templateUrl: './tl-tabs.component.html',
+  styleUrls: ['./tl-tabs.component.scss']
+})
+export class TlTabsComponent extends TamuAbstractBaseComponent {
+
+  // tslint:disable-next-line:unnecessary-constructor
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+}