Merge pull request #289 from TAMULib/sprint17-270-tl-modal

Sprint17 270 tl modal

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

@@ -3,6 +3,9 @@
     *ngIf="href!== ''"
     [themeVariant]="themeVariant"
     [btnSize]="btnSize"
+    [btnTxt]="btnTxt"
+    [dispatchAction]="dispatchAction"
+    [dispatchActionProps]="dispatchActionProps"
     [href]="href"
     [wvrBtnType]="wvrBtnType">
     <ng-content select="wvre-text, wvr-text-component" ngProjectAs="wvre-btn-content"></ng-content>
@@ -11,6 +14,9 @@
     *ngIf="href === ''"
     [themeVariant]="themeVariant"
     [btnSize]="btnSize"
+    [btnTxt]="btnTxt"
+    [dispatchAction]="dispatchAction"
+    [dispatchActionProps]="dispatchActionProps"
     [wvrBtnType]="wvrBtnType">
     <ng-content select="wvre-text, wvr-text-component" ngProjectAs="wvre-btn-content"></ng-content>
   </wvr-button-component>

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

@@ -21,6 +21,12 @@ export class TlButtonComponent extends TamuAbstractBaseComponent {
   /** Allows for the button component to be an anchor tag component if hrefUrl property present. */
   @Input() href;
 
+  @Input() btnTxt;
+
+  @Input() dispatchAction;
+
+  @Input() dispatchActionProps;
+
   // tslint:disable-next-line:unnecessary-constructor
   constructor(injector: Injector) {
     super(injector);

src/app/tl-lib.module.ts

@@ -13,6 +13,7 @@ import { TlIconComponent } from './tl-icon/tl-icon.component';
 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 { TlModalComponent } from './tl-modal/tl-modal.component';
 import { TamuNavListComponent } from './tl-nav-list/tl-nav-list.component';
 import { TlTabComponent } from './tl-tabs/tl-tab/tl-tab.component';
 import { TlTabsComponent } from './tl-tabs/tl-tabs.component';
@@ -39,6 +40,7 @@ const TL_ELEMENTS = [
   { component: TlIconComponent, selector: 'tl-icon' },
   { component: TamuItWorksComponent, selector: 'tl-it-works' },
   { component: TlMegaMenuComponent, selector: 'tl-mega-menu' },
+  { component: TlModalComponent, selector: 'tl-modal'},
   { component: TlMegaMenuSectionComponent, selector: 'tl-mega-menu-section' },
   { component: TamuNavListComponent, selector: 'tl-nav-list' },
   { component: TlTabsComponent, selector: 'tl-tabs' },
@@ -58,6 +60,7 @@ const TL_COMPONENTS = [
   TlIconComponent,
   TlMegaMenuComponent,
   TlMegaMenuSectionComponent,
+  TlModalComponent,
   TamuNavListComponent,
   TlTabsComponent,
   TlTabComponent,

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

@@ -0,0 +1,7 @@
+<wvr-modal-component #animationRoot
+  [themeVariant]="btnThemeVariant"
+  [title]="title"
+  [btnText]="btnText">
+  <ng-content select="tl-modal-body" ngProjectAs="wvre-modal-body"></ng-content>
+  <ng-content select="tl-modal-footer" ngProjectAs="wvre-modal-footer"></ng-content>
+</wvr-modal-component>

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

@@ -0,0 +1,14 @@
+@import "../shared/styles/tl-encapsulated.scss";
+@import "../shared/styles/tl-branded-btn.scss";
+
+:host {
+
+  wvr-modal-component {
+    font-family: var(--tl-font-family-sans-serif);
+    ::ng-deep {
+      .wvr-modal {
+        font-family: var(--tl-font-family-sans-serif);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { provideMockStore } from '@ngrx/store/testing';
+import { APP_CONFIG, testAppConfig } from '@wvr/elements';
+import { TlModalComponent } from './tl-modal.component';
+
+describe('TlModalComponent', () => {
+  let component: TlModalComponent;
+  let fixture: ComponentFixture<TlModalComponent>;
+  const initialState = { theme: {
+    themes: {}
+  }};
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule
+      ],
+      providers: [
+        provideMockStore({initialState}),
+        {
+          provide: APP_CONFIG,
+          useValue: testAppConfig
+        }
+      ],
+      declarations: [ TlModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TlModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component)
+      .toBeTruthy();
+  });
+
+});

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

@@ -0,0 +1,25 @@
+import { Component, Injector, Input } from '@angular/core';
+import { TamuAbstractBaseComponent } from '../shared/tl-abstract-base.component';
+
+@Component({
+  selector: 'tl-modal-component',
+  templateUrl: './tl-modal.component.html',
+  styleUrls: ['./tl-modal.component.scss']
+})
+export class TlModalComponent extends TamuAbstractBaseComponent {
+
+  btnThemeVariant = 'primary';
+
+  @Input() title;
+
+  @Input() btnText;
+
+  constructor(injector: Injector) {
+    super(injector);
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+  }
+
+}

src/index.html

@@ -719,6 +719,18 @@
   <tl-it-works text="TAMU Library Components Work Really Well"></tl-it-works>
 
   <hr><br><br><br>
+  <div class="container" style="text-align: center;margin: 10px 60px;">
+    <wvre-text value="Modal Component" text-decoration="underline"></wvre-text><br /><br />
+    <tl-modal title="Tl Modal Title" btn-text="Launch Tl Modal Button">
+      <tl-modal-body>
+        <wvre-text value="Tl Modal Message"></wvre-text>
+      </tl-modal-body>
+      <tl-modal-footer>
+        <tl-button btn-txt="Cancel" theme-variant="secondary" dispatch-action="Modal.closeModal" dispatch-action-props="{id: 'Tl Modal Title'}">
+        </tl-button>
+      </tl-modal-footer>
+    </tl-modal>
+  </div>
   <div class="container" style="text-align: center;margin: 10px 60px;">
     <wvre-text value="Editor Component" text-decoration="underline"></wvre-text><br /><br />
     <tl-wysiwyg></tl-wysiwyg> <br /><br />