Tekathon imrovements

e2e/app.e2e-spec.ts

@@ -10,6 +10,15 @@ describe('angular-cli-widgets App', () => {
   });
 
   it('should display message saying app works', () => {
+
+    // page.navigateTo();
+    // expect(page.getParagraphText()).to.eventually.contain('app works!');
+
+    var width = 800;
+    var height = 600;
+    browser.driver.manage().window().setSize(width, height);
+
+
     page.navigateTo();
     expect(true).to.equal(true);
   });

package.json

@@ -43,6 +43,7 @@
   },
   "private": false,
   "dependencies": {
+
     "@angular/animations": "4.0.x",
     "@angular/common": "4.0.x",
     "@angular/compiler": "4.0.x",
@@ -63,7 +64,7 @@
   },
   "devDependencies": {
     "@angular/cli": "^1.0.0",
-    "@angular/compiler-cli": "^4.0.1",
+    "@angular/compiler-cli": "^4.0.0",
     "@angular/flex-layout": "^2.0.0-beta.8",
     "@types/chai-as-promised": "0.0.30",
     "@types/chai-string": "^1.1.30",

src/app/app.module.ts

@@ -7,24 +7,39 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { StoreModule, ActionReducer, combineReducers } from '@ngrx/store';
-
 import { AppComponent } from './app.component';
-import { ButtonsComponent } from './shell/buttons/buttons.component';
+import {WidgetModule} from './widget/widget.module';
 import { LandingPageComponent } from './shell/landing-page/landing-page.component';
-import { treeElements } from './widget/navigation/reducer/menu.reducer';
-import { WidgetModule } from './widget/widget.module';
+import { ButtonsComponent } from './shell/buttons/buttons.component';
+import { InputElementsComponent } from './shell/input-elements/input-elements.component';
+import { LabelsComponent } from './shell/labels/labels.component';
+import { FormComponent } from './shell/form/form.component';
+import { ContactUsComponent } from './shell/contact-us/contact-us.component';
+import { HeadingsComponent } from './shell/headings/headings.component';
+import {treeElements} from './widget/navigation/reducer/menu.reducer';
 
 const routes: Routes = [
-  { path: '', component: LandingPageComponent },
-  { path: 'buttons', component: ButtonsComponent },
-  { path: 'main', component: LandingPageComponent }
+  {path: '', component: LandingPageComponent},
+  { path: 'buttons', component: ButtonsComponent},
+  { path: 'input-element', component: InputElementsComponent},
+  { path: 'labels', component: LabelsComponent},
+  { path: 'headings', component: HeadingsComponent},
+  { path: 'forms', component: FormComponent},
+  { path: 'contact-us', component: ContactUsComponent},
+  { path: 'main', component: LandingPageComponent}
+
 ];
 
 @NgModule({
   declarations: [
     AppComponent,
     LandingPageComponent,
-    ButtonsComponent
+    ButtonsComponent,
+    LabelsComponent,
+    InputElementsComponent,
+    FormComponent,
+    ContactUsComponent,
+    HeadingsComponent,
   ],
   imports: [
     MaterialModule,

src/app/shell/buttons/buttons.component.html

@@ -4,41 +4,45 @@
 </div>
 <a routerLink="/main">Back</a>
 
+
 <h1> Buttons</h1>
 
 <section>
+  <h2>SHAPES</h2>
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="8%">
+
+    <app-tool42-button type="primary" state="active" text="default"></app-tool42-button>
+
+    <app-tool42-button type="primary" text="mini" state="active" width="70"></app-tool42-button>
+
+    <app-tool42-button type="primary" state="active" text="slim" height="35"></app-tool42-button>
+
+  </div>
+
+</section>
+<section>
+  <h2>COLORS</h2>
+
   <h3>Primary Button</h3>
-  <div fxLayout="row"
-       fxLayoutAlign="start">
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="8%">
+
+    <app-tool42-button type="primary" state="active" text="active"></app-tool42-button>
 
-    <app-tool42-button type="primary"
-                       state="active"
-                       fxFlex="15"></app-tool42-button>
+    <app-tool42-button type="primary" state="hover" text="hover"></app-tool42-button>
 
-    <app-tool42-button type="primary"
-                       state="hover"
-                       fxFlex="15"></app-tool42-button>
+    <app-tool42-button type="primary" state="disabled" text="disabled"></app-tool42-button>
 
-    <app-tool42-button type="primary"
-                       state="disabled"
-                       fxFlex="15"></app-tool42-button>
   </div>
   <br>
   <h3>Secondary Button</h3>
-  <div fxLayout="row"
-       fxLayoutAlign="start">
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="8%">
+
+    <app-tool42-button type="secondary" state="active" text="active"></app-tool42-button>
 
-    <app-tool42-button type="secondary"
-                       state="active"
-                       fxFlex="15"></app-tool42-button>
+    <app-tool42-button type="secondary" state="hover" text="hover"></app-tool42-button>
 
-    <app-tool42-button type="secondary"
-                       state="hover"
-                       fxFlex="15"></app-tool42-button>
+    <app-tool42-button type="secondary" state="disabled" text="disabled"></app-tool42-button>
 
-    <app-tool42-button type="secondary"
-                       state="disabled"
-                       fxFlex="15"></app-tool42-button>
   </div>
 </section>
 

src/app/shell/buttons/buttons.component.spec.ts

@@ -1,6 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ButtonsComponent } from './buttons.component';
+
 import {NO_ERRORS_SCHEMA} from '@angular/core';
 import {expect} from 'chai';
 

src/app/shell/contact-us/contact-us.component.html

@@ -0,0 +1,44 @@
+<div class="logo-wrp">
+  <img class="logo-img"
+       src="src/assets/logo_tool42.svg">
+</div>
+<a routerLink="/main">Back</a>
+
+<!--<section>
+  <h2>SHAPES</h2>
+  <h3>Default Size</h3>
+  <button type="button" class="btn btn-default" style="width:100px;">Label</button>
+  <h3>Mini Size</h3>
+  <button type="button" class="btn btn-default" >Label</button>
+  <h3>Slim Size</h3>
+  <button type="button" class="btn btn-default" style="height:30px;">Label</button>
+</section>-->
+
+<h1>Contact Us Form</h1>
+<section>
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="8%" >
+    <div>
+  <h3>Form 1</h3>
+
+    <app-tool42-contact-us type="primary"></app-tool42-contact-us>
+    </div>
+
+  <div>
+  <h3>Form 2</h3>
+
+    <app-tool42-contact-us type="secondary"></app-tool42-contact-us>
+  </div>
+  </div>
+</section>
+
+<!--<section style = "background-color: #999966;">
+  <h2>COLORS ON DARK BACKGROUND</h2>
+  <h3>Normal</h3>
+  <button type="button" class="btn btn-default">Label</button>
+  <h3>Mouse Over</h3>
+  <button type="button" class="btn btn-primary">Label</button>
+  <h3>Active</h3>
+  <button type="button" class="btn btn-success">Label</button>
+  <h3>Disabled</h3>
+  <button type="button" class="btn btn-danger">Label</button>
+</section> -->

src/app/shell/contact-us/contact-us.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactUsComponent } from './contact-us.component';
+
+describe('ContactUsComponent', () => {
+  let component: ContactUsComponent;
+  let fixture: ComponentFixture<ContactUsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactUsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactUsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shell/contact-us/contact-us.component.ts

@@ -0,0 +1,15 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-contact-us',
+  templateUrl: './contact-us.component.html',
+  styleUrls: ['./contact-us.component.scss']
+})
+export class ContactUsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shell/form/form.component.html

@@ -0,0 +1,47 @@
+<div class="logo-wrp">
+  <img class="logo-img"
+       src="src/assets/logo_tool42.svg">
+</div>
+<a routerLink="/main">Back</a>
+
+<!--<section>
+  <h2>SHAPES</h2>
+  <h3>Default Size</h3>
+  <button type="button" class="btn btn-default" style="width:100px;">Label</button>
+  <h3>Mini Size</h3>
+  <button type="button" class="btn btn-default" >Label</button>
+  <h3>Slim Size</h3>
+  <button type="button" class="btn btn-default" style="height:30px;">Label</button>
+</section>-->
+
+<h1>Form Input Elements</h1>
+<section>
+
+
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="8%">
+    <div>
+      <h3>Form 1</h3>
+      <app-tool42-form-input-field type="primary" buttonText="Button"
+                                   inputPlaceholder="Enter text"></app-tool42-form-input-field>
+
+    </div>
+    <div>
+      <h3>Form 2</h3>
+
+      <app-tool42-form-input-field type="secondary" buttonText="Button" buttonWidth="70"
+                                   inputPlaceholder="Enter text"></app-tool42-form-input-field>
+    </div>
+  </div>
+</section>
+
+<!--<section style = "background-color: #999966;">
+  <h2>COLORS ON DARK BACKGROUND</h2>
+  <h3>Normal</h3>
+  <button type="button" class="btn btn-default">Label</button>
+  <h3>Mouse Over</h3>
+  <button type="button" class="btn btn-primary">Label</button>
+  <h3>Active</h3>
+  <button type="button" class="btn btn-success">Label</button>
+  <h3>Disabled</h3>
+  <button type="button" class="btn btn-danger">Label</button>
+</section> -->

src/app/shell/form/form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormComponent } from './form.component';
+
+describe('FormComponent', () => {
+  let component: FormComponent;
+  let fixture: ComponentFixture<FormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shell/form/form.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form',
+  templateUrl: './form.component.html',
+  styleUrls: ['./form.component.scss']
+})
+export class FormComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shell/headings/headings.component.html

@@ -0,0 +1,45 @@
+<div class="logo-wrp">
+  <img class="logo-img"
+       src="src/assets/logo_tool42.svg">
+</div>
+<a routerLink="/main">Back</a>
+
+
+<!--<section>
+  <h2>SHAPES</h2>
+  <h3>Default Size</h3>
+  <button type="button" class="btn btn-default" style="width:100px;">Label</button>
+  <h3>Mini Size</h3>
+  <button type="button" class="btn btn-default" >Label</button>
+  <h3>Slim Size</h3>
+  <button type="button" class="btn btn-default" style="height:30px;">Label</button>
+
+</section>-->
+<h1>Headings</h1>
+
+
+
+<section>
+
+  <h2>Colors</h2>
+  <div fxLayout="row" fxLayoutAlign="start" fxLayoutGap="8%">
+    <app-tool42-heading type = "primary" color ="#558C89" text = "Smalt Blue"> </app-tool42-heading>
+
+    <app-tool42-heading type = "secondary" color="#D9853B" text = "Sienna"> </app-tool42-heading>
+  </div>
+</section>
+
+
+
+
+<!--<section style = "background-color: #999966;">
+  <h2>COLORS ON DARK BACKGROUND</h2>
+  <h3>Normal</h3>
+  <button type="button" class="btn btn-default">Label</button>
+  <h3>Mouse Over</h3>
+  <button type="button" class="btn btn-primary">Label</button>
+  <h3>Active</h3>
+  <button type="button" class="btn btn-success">Label</button>
+  <h3>Disabled</h3>
+  <button type="button" class="btn btn-danger">Label</button>
+</section> -->