diff --git a/e2e/app.e2e-spec.ts b/e2e/app.e2e-spec.ts index 3873709..3fda486 100644 --- a/e2e/app.e2e-spec.ts +++ b/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); }); diff --git a/package.json b/package.json index cdbf76d..bcb5460 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 36e8d6c..fe273cf 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/shell/buttons/buttons.component.html b/src/app/shell/buttons/buttons.component.html index fb39b46..3ca75e8 100644 --- a/src/app/shell/buttons/buttons.component.html +++ b/src/app/shell/buttons/buttons.component.html @@ -4,41 +4,45 @@ Back +

Buttons

+

SHAPES

+
+ + + + + + + +
+ +
+
+

COLORS

+

Primary Button

-
+
+ + - + - + -

Secondary Button

-
+
+ + - + - + -
diff --git a/src/app/shell/buttons/buttons.component.spec.ts b/src/app/shell/buttons/buttons.component.spec.ts index 5df3106..0db78f5 100644 --- a/src/app/shell/buttons/buttons.component.spec.ts +++ b/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'; diff --git a/src/app/shell/contact-us/contact-us.component.html b/src/app/shell/contact-us/contact-us.component.html new file mode 100644 index 0000000..a911752 --- /dev/null +++ b/src/app/shell/contact-us/contact-us.component.html @@ -0,0 +1,44 @@ +
+ +
+Back + + + +

Contact Us Form

+
+
+
+

Form 1

+ + +
+ +
+

Form 2

+ + +
+
+
+ + diff --git a/src/app/shell/contact-us/contact-us.component.scss b/src/app/shell/contact-us/contact-us.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shell/contact-us/contact-us.component.spec.ts b/src/app/shell/contact-us/contact-us.component.spec.ts new file mode 100644 index 0000000..543a2f3 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactUsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactUsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shell/contact-us/contact-us.component.ts b/src/app/shell/contact-us/contact-us.component.ts new file mode 100644 index 0000000..ed6e875 --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/shell/form/form.component.html b/src/app/shell/form/form.component.html new file mode 100644 index 0000000..b21a751 --- /dev/null +++ b/src/app/shell/form/form.component.html @@ -0,0 +1,47 @@ +
+ +
+Back + + + +

Form Input Elements

+
+ + +
+
+

Form 1

+ + +
+
+

Form 2

+ + +
+
+
+ + diff --git a/src/app/shell/form/form.component.scss b/src/app/shell/form/form.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shell/form/form.component.spec.ts b/src/app/shell/form/form.component.spec.ts new file mode 100644 index 0000000..0ace80a --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FormComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shell/form/form.component.ts b/src/app/shell/form/form.component.ts new file mode 100644 index 0000000..69a907a --- /dev/null +++ b/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() { + } + +} diff --git a/src/app/shell/headings/headings.component.html b/src/app/shell/headings/headings.component.html new file mode 100644 index 0000000..5b79a79 --- /dev/null +++ b/src/app/shell/headings/headings.component.html @@ -0,0 +1,45 @@ +
+ +
+Back + + + +

Headings

+ + + +
+ +

Colors

+
+ + + +
+
+ + + + + diff --git a/src/app/shell/headings/headings.component.scss b/src/app/shell/headings/headings.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shell/headings/headings.component.spec.ts b/src/app/shell/headings/headings.component.spec.ts new file mode 100644 index 0000000..f28aae6 --- /dev/null +++ b/src/app/shell/headings/headings.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HeadingsComponent } from './headings.component'; + +describe('HeadingsComponent', () => { + let component: HeadingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HeadingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HeadingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shell/headings/headings.component.ts b/src/app/shell/headings/headings.component.ts new file mode 100644 index 0000000..86247e9 --- /dev/null +++ b/src/app/shell/headings/headings.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-headings', + templateUrl: './headings.component.html', + styleUrls: ['./headings.component.scss'] +}) +export class HeadingsComponent implements OnInit { + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/src/app/shell/input-elements/input-elements.component.html b/src/app/shell/input-elements/input-elements.component.html new file mode 100644 index 0000000..7fcf8b9 --- /dev/null +++ b/src/app/shell/input-elements/input-elements.component.html @@ -0,0 +1,44 @@ +
+ +
+Back + + + +

Input Elements

+ + +
+ +

Sizes

+ +
+
+ + + +
+
+ + + diff --git a/src/app/shell/input-elements/input-elements.component.scss b/src/app/shell/input-elements/input-elements.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shell/input-elements/input-elements.component.spec.ts b/src/app/shell/input-elements/input-elements.component.spec.ts new file mode 100644 index 0000000..8c8a325 --- /dev/null +++ b/src/app/shell/input-elements/input-elements.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputElementsComponent } from './input-elements.component'; + +describe('InputElementsComponent', () => { + let component: InputElementsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputElementsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputElementsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shell/input-elements/input-elements.component.ts b/src/app/shell/input-elements/input-elements.component.ts new file mode 100644 index 0000000..d5d0e14 --- /dev/null +++ b/src/app/shell/input-elements/input-elements.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-input-elements', + templateUrl: './input-elements.component.html', + styleUrls: ['./input-elements.component.scss'] +}) +export class InputElementsComponent implements OnInit { + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/src/app/shell/labels/labels.component.html b/src/app/shell/labels/labels.component.html new file mode 100644 index 0000000..0a994e4 --- /dev/null +++ b/src/app/shell/labels/labels.component.html @@ -0,0 +1,41 @@ +
+ +
+Back + + + +

Labels

+ + +
+

COLORS

+ +
+ + +
+
+ + + diff --git a/src/app/shell/labels/labels.component.scss b/src/app/shell/labels/labels.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shell/labels/labels.component.spec.ts b/src/app/shell/labels/labels.component.spec.ts new file mode 100644 index 0000000..c2bd416 --- /dev/null +++ b/src/app/shell/labels/labels.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LabelsComponent } from './labels.component'; + +describe('LabelsComponent', () => { + let component: LabelsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LabelsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LabelsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shell/labels/labels.component.ts b/src/app/shell/labels/labels.component.ts new file mode 100644 index 0000000..59c38f5 --- /dev/null +++ b/src/app/shell/labels/labels.component.ts @@ -0,0 +1,16 @@ +import {Component, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-labels', + templateUrl: './labels.component.html', + styleUrls: ['./labels.component.scss'] +}) +export class LabelsComponent implements OnInit { + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/src/app/shell/landing-page/landing-page.component.html b/src/app/shell/landing-page/landing-page.component.html index e167780..777de45 100644 --- a/src/app/shell/landing-page/landing-page.component.html +++ b/src/app/shell/landing-page/landing-page.component.html @@ -4,20 +4,48 @@ src="src/assets/logo_tool42.svg">
+
+ publish ccp + Link to current style + + Duplicate this library + + Import new element +
+
+
+

{{atomsSectionTitle}}

- Labels - Buttons - Inputs +
+

{{moleculesSectionTitle}}

- Form Input field + +
@@ -25,6 +53,12 @@

{{organismsSectionTitle}}

- Contact Up Form + + +
diff --git a/src/app/shell/landing-page/landing-page.component.spec.ts b/src/app/shell/landing-page/landing-page.component.spec.ts index a164706..4c623dd 100644 --- a/src/app/shell/landing-page/landing-page.component.spec.ts +++ b/src/app/shell/landing-page/landing-page.component.spec.ts @@ -1,9 +1,11 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { LandingPageComponent } from './landing-page.component'; + import {expect} from 'chai'; import {NO_ERRORS_SCHEMA} from '@angular/core'; + describe('LandingPageComponent', () => { let component: LandingPageComponent; let fixture: ComponentFixture; @@ -24,5 +26,6 @@ describe('LandingPageComponent', () => { it('should create', () => { expect(component).to.exist; + }); }); diff --git a/src/app/shell/landing-page/landing-page.component.ts b/src/app/shell/landing-page/landing-page.component.ts index c5c53de..1ca3514 100644 --- a/src/app/shell/landing-page/landing-page.component.ts +++ b/src/app/shell/landing-page/landing-page.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-landing-page', @@ -10,7 +10,8 @@ export class LandingPageComponent implements OnInit { moleculesSectionTitle = 'Molecules'; organismsSectionTitle = 'Organisms'; - constructor() { } + constructor() { + } ngOnInit() { } diff --git a/src/app/widget/index.ts b/src/app/widget/index.ts index 6ddeeb9..ff8a0ce 100644 --- a/src/app/widget/index.ts +++ b/src/app/widget/index.ts @@ -1,4 +1,9 @@ export * from './navigation'; export * from './search-form'; export * from './tool42-button'; +export * from './tool42-contact-us'; +export * from './tool42-form-input-field'; +export * from './tool42-heading'; +export * from './tool42-input'; +export * from './tool42-label'; export * from './widget.module'; diff --git a/src/app/widget/tool42-button/tool42-button.component.html b/src/app/widget/tool42-button/tool42-button.component.html index 74747e8..dbef200 100644 --- a/src/app/widget/tool42-button/tool42-button.component.html +++ b/src/app/widget/tool42-button/tool42-button.component.html @@ -1 +1,2 @@ - + + diff --git a/src/app/widget/tool42-button/tool42-button.component.scss b/src/app/widget/tool42-button/tool42-button.component.scss index e337d06..0741c09 100644 --- a/src/app/widget/tool42-button/tool42-button.component.scss +++ b/src/app/widget/tool42-button/tool42-button.component.scss @@ -2,64 +2,97 @@ background-color: #ff6600; /* Green */ border: none; color: white; - padding: 15px 32px; + padding: 5px 10px; text-align: center; + width:8em; + height:3em; text-decoration: none; display: inline-block; font-size: 16px; + border-radius:12px; } +.t42-btn-primary--active:hover{ + background-color: #cc3300; +} + + .t42-btn-primary--disabled { background-color: #999966;/* Green */ border: none; color: white; - padding: 15px 32px; + + padding: 5px 10px; text-align: center; + width:8em; + height:3em; text-decoration: none; display: inline-block; font-size: 16px; + border-radius:12px; } .t42-btn-primary--hover { background-color: #cc3300;/* Green */ border: none; color: white; - padding: 15px 32px; + padding: 5px 10px; text-align: center; + width:8em; + height:3em; text-decoration: none; display: inline-block; font-size: 16px; + border-radius:12px; + } .t42-btn-secondary--active { background-color: #ffffff; /* Green */ color:#ff6600; + width:10em; border: 1px solid #ff6600; - padding: 15px 32px; + padding: 5px 10px; text-align: center; + width:8em; + height:3em; text-decoration: none; display: inline-block; font-size: 16px; + border-radius:12px; } +.t42-btn-secondary--active:hover{ + background-color: #cc3300; +} + + .t42-btn-secondary--hover { background-color: #cc3300;/* Green */ border: 1px solid #cc3300; color: white; - padding: 15px 32px; + + padding: 5px 10px; text-align: center; + width:8em; + height:3em; text-decoration: none; display: inline-block; font-size: 16px; + border-radius:12px; } .t42-btn-secondary--disabled { background-color: #ffffff; /* Green */ color:#999966; border: 1px solid #999966; - padding: 15px 32px; + padding: 5px 10px; text-align: center; + width:8em; + height:3em; text-decoration: none; display: inline-block; font-size: 16px; + border-radius:12px; + } diff --git a/src/app/widget/tool42-button/tool42-button.component.spec.ts b/src/app/widget/tool42-button/tool42-button.component.spec.ts index 599ffd2..dc20ee2 100644 --- a/src/app/widget/tool42-button/tool42-button.component.spec.ts +++ b/src/app/widget/tool42-button/tool42-button.component.spec.ts @@ -1,16 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Tool42ButtonComponent } from './tool42-button.component'; + import {expect} from 'chai'; import {NO_ERRORS_SCHEMA} from '@angular/core'; + describe('Tool42ButtonComponent', () => { let component: Tool42ButtonComponent; let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ Tool42ButtonComponent ] }) .compileComponents(); @@ -24,5 +28,6 @@ describe('Tool42ButtonComponent', () => { it('should create', () => { expect(component).to.exist; + }); }); diff --git a/src/app/widget/tool42-button/tool42-button.component.ts b/src/app/widget/tool42-button/tool42-button.component.ts index ede7bf0..4f9c5e8 100644 --- a/src/app/widget/tool42-button/tool42-button.component.ts +++ b/src/app/widget/tool42-button/tool42-button.component.ts @@ -8,8 +8,9 @@ import {Component, Input, OnInit} from '@angular/core'; export class Tool42ButtonComponent implements OnInit { @Input() type: string; @Input() state: string; - @Input() size: string; - + @Input() width: string; + @Input() height: string; + @Input() text: string; className: String; constructor() { @@ -39,6 +40,5 @@ export class Tool42ButtonComponent implements OnInit { } - } } diff --git a/src/app/widget/tool42-contact-us/index.ts b/src/app/widget/tool42-contact-us/index.ts new file mode 100644 index 0000000..b22a9fa --- /dev/null +++ b/src/app/widget/tool42-contact-us/index.ts @@ -0,0 +1 @@ +export * from './tool42-contact-us.component'; diff --git a/src/app/widget/tool42-contact-us/tool42-contact-us.component.html b/src/app/widget/tool42-contact-us/tool42-contact-us.component.html new file mode 100644 index 0000000..6b29750 --- /dev/null +++ b/src/app/widget/tool42-contact-us/tool42-contact-us.component.html @@ -0,0 +1,3 @@ +
+

+ diff --git a/src/app/widget/tool42-contact-us/tool42-contact-us.component.scss b/src/app/widget/tool42-contact-us/tool42-contact-us.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/widget/tool42-contact-us/tool42-contact-us.component.spec.ts b/src/app/widget/tool42-contact-us/tool42-contact-us.component.spec.ts new file mode 100644 index 0000000..2981462 --- /dev/null +++ b/src/app/widget/tool42-contact-us/tool42-contact-us.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Tool42ContactUsComponent } from './tool42-contact-us.component'; + +import {expect} from 'chai'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; + +describe('Tool42ContactUsComponent', () => { + let component: Tool42ContactUsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ Tool42ContactUsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Tool42ContactUsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).to.exist; + }); +}); diff --git a/src/app/widget/tool42-contact-us/tool42-contact-us.component.ts b/src/app/widget/tool42-contact-us/tool42-contact-us.component.ts new file mode 100644 index 0000000..7c7c99f --- /dev/null +++ b/src/app/widget/tool42-contact-us/tool42-contact-us.component.ts @@ -0,0 +1,17 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-tool42-contact-us', + templateUrl: './tool42-contact-us.component.html', + styleUrls: ['./tool42-contact-us.component.scss'] +}) +export class Tool42ContactUsComponent implements OnInit { + @Input() type: string; + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/src/app/widget/tool42-form-input-field/index.ts b/src/app/widget/tool42-form-input-field/index.ts new file mode 100644 index 0000000..8e74665 --- /dev/null +++ b/src/app/widget/tool42-form-input-field/index.ts @@ -0,0 +1 @@ +export * from './tool42-form-input-field.component'; diff --git a/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.html b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.html new file mode 100644 index 0000000..a1caff2 --- /dev/null +++ b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.html @@ -0,0 +1,4 @@ +
+
+ + diff --git a/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.scss b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.spec.ts b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.spec.ts new file mode 100644 index 0000000..cd50b5c --- /dev/null +++ b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Tool42FormInputFieldComponent } from './tool42-form-input-field.component'; + +import {expect} from 'chai'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; + +describe('Tool42FormInputFieldComponent', () => { + let component: Tool42FormInputFieldComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ Tool42FormInputFieldComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Tool42FormInputFieldComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).to.exist; + }); +}); diff --git a/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.ts b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.ts new file mode 100644 index 0000000..3c971ca --- /dev/null +++ b/src/app/widget/tool42-form-input-field/tool42-form-input-field.component.ts @@ -0,0 +1,19 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-tool42-form-input-field', + templateUrl: './tool42-form-input-field.component.html', + styleUrls: ['./tool42-form-input-field.component.scss'] +}) +export class Tool42FormInputFieldComponent implements OnInit { + @Input() type: string; + @Input() buttonText: string; + @Input() inputPlaceholder: string; + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/src/app/widget/tool42-heading/index.ts b/src/app/widget/tool42-heading/index.ts new file mode 100644 index 0000000..82601aa --- /dev/null +++ b/src/app/widget/tool42-heading/index.ts @@ -0,0 +1 @@ +export * from './tool42-heading.component'; diff --git a/src/app/widget/tool42-heading/tool42-heading.component.html b/src/app/widget/tool42-heading/tool42-heading.component.html new file mode 100644 index 0000000..99252a7 --- /dev/null +++ b/src/app/widget/tool42-heading/tool42-heading.component.html @@ -0,0 +1 @@ +

{{text}}

diff --git a/src/app/widget/tool42-heading/tool42-heading.component.scss b/src/app/widget/tool42-heading/tool42-heading.component.scss new file mode 100644 index 0000000..8a5cef6 --- /dev/null +++ b/src/app/widget/tool42-heading/tool42-heading.component.scss @@ -0,0 +1,7 @@ +.t42-heading-primary { + font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 600; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; +} + +.t42-heading-secondary { + font-family: 'Raleway',sans-serif; font-size: 62px; font-weight: 600; line-height: 72px; margin: 0 0 24px; text-align: center; text-transform: uppercase; +} diff --git a/src/app/widget/tool42-heading/tool42-heading.component.spec.ts b/src/app/widget/tool42-heading/tool42-heading.component.spec.ts new file mode 100644 index 0000000..19aca3e --- /dev/null +++ b/src/app/widget/tool42-heading/tool42-heading.component.spec.ts @@ -0,0 +1,28 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Tool42HeadingComponent } from './tool42-heading.component'; +import {expect} from 'chai'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; + +describe('Tool42HeadingComponent', () => { + let component: Tool42HeadingComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ Tool42HeadingComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Tool42HeadingComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).to.exist; + }); +}); diff --git a/src/app/widget/tool42-heading/tool42-heading.component.ts b/src/app/widget/tool42-heading/tool42-heading.component.ts new file mode 100644 index 0000000..71f8821 --- /dev/null +++ b/src/app/widget/tool42-heading/tool42-heading.component.ts @@ -0,0 +1,28 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-tool42-heading', + templateUrl: './tool42-heading.component.html', + styleUrls: ['./tool42-heading.component.scss'] +}) +export class Tool42HeadingComponent implements OnInit { + @Input() text: string; + @Input() type: string; + @Input() color: string; + className: string; + + constructor() { + } + + ngOnInit() { + switch (this.type) { + case 'primary': + this.className = 't42-heading-primary'; + break; + case 'secondary': + this.className = 't42-heading-secondary'; + break; + } + } + +} diff --git a/src/app/widget/tool42-input/index.ts b/src/app/widget/tool42-input/index.ts new file mode 100644 index 0000000..e3e2962 --- /dev/null +++ b/src/app/widget/tool42-input/index.ts @@ -0,0 +1 @@ +export * from './tool42-input.component'; diff --git a/src/app/widget/tool42-input/tool42-input.component.html b/src/app/widget/tool42-input/tool42-input.component.html new file mode 100644 index 0000000..0970024 --- /dev/null +++ b/src/app/widget/tool42-input/tool42-input.component.html @@ -0,0 +1 @@ + diff --git a/src/app/widget/tool42-input/tool42-input.component.scss b/src/app/widget/tool42-input/tool42-input.component.scss new file mode 100644 index 0000000..e6305fa --- /dev/null +++ b/src/app/widget/tool42-input/tool42-input.component.scss @@ -0,0 +1,8 @@ +.t42-input-primary{ + resize: none; + border:1px solid #ff6600; +} +.t42-input-secondary{ + resize: none; + border:1px solid #ff944d; +} diff --git a/src/app/widget/tool42-input/tool42-input.component.spec.ts b/src/app/widget/tool42-input/tool42-input.component.spec.ts new file mode 100644 index 0000000..882e6d2 --- /dev/null +++ b/src/app/widget/tool42-input/tool42-input.component.spec.ts @@ -0,0 +1,28 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Tool42InputComponent } from './tool42-input.component'; +import {expect} from 'chai'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; + +describe('Tool42InputComponent', () => { + let component: Tool42InputComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ Tool42InputComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Tool42InputComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).to.exist; + }); +}); diff --git a/src/app/widget/tool42-input/tool42-input.component.ts b/src/app/widget/tool42-input/tool42-input.component.ts new file mode 100644 index 0000000..2c4e688 --- /dev/null +++ b/src/app/widget/tool42-input/tool42-input.component.ts @@ -0,0 +1,30 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-tool42-input', + templateUrl: './tool42-input.component.html', + styleUrls: ['./tool42-input.component.scss'] +}) +export class Tool42InputComponent implements OnInit { + @Input() height: string; + @Input() type: string; + @Input() placeHolder: string; + style: string; + className: string; + + constructor() { + } + + ngOnInit() { + this.style = this.height + ' px;'; + switch (this.type) { + case 'primary': + this.className = 't42-input-primary'; + break; + case 'secondary': + this.className = 't42-input-secondary'; + break; + } + } + +} diff --git a/src/app/widget/tool42-label/index.ts b/src/app/widget/tool42-label/index.ts new file mode 100644 index 0000000..65f75a0 --- /dev/null +++ b/src/app/widget/tool42-label/index.ts @@ -0,0 +1 @@ +export * from './tool42-label.component'; diff --git a/src/app/widget/tool42-label/tool42-label.component.html b/src/app/widget/tool42-label/tool42-label.component.html new file mode 100644 index 0000000..0d7e40a --- /dev/null +++ b/src/app/widget/tool42-label/tool42-label.component.html @@ -0,0 +1 @@ + diff --git a/src/app/widget/tool42-label/tool42-label.component.scss b/src/app/widget/tool42-label/tool42-label.component.scss new file mode 100644 index 0000000..f65bfc8 --- /dev/null +++ b/src/app/widget/tool42-label/tool42-label.component.scss @@ -0,0 +1,6 @@ +.t42-label-primary{ + color: #ff6600; +} +.t42-label-secondary{ + color: #ff944d; +} diff --git a/src/app/widget/tool42-label/tool42-label.component.spec.ts b/src/app/widget/tool42-label/tool42-label.component.spec.ts new file mode 100644 index 0000000..41f9e7c --- /dev/null +++ b/src/app/widget/tool42-label/tool42-label.component.spec.ts @@ -0,0 +1,28 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { Tool42LabelComponent } from './tool42-label.component'; +import {expect} from 'chai'; +import {NO_ERRORS_SCHEMA} from '@angular/core'; + +describe('Tool42LabelComponent', () => { + let component: Tool42LabelComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ Tool42LabelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(Tool42LabelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).to.exist; + }); +}); diff --git a/src/app/widget/tool42-label/tool42-label.component.ts b/src/app/widget/tool42-label/tool42-label.component.ts new file mode 100644 index 0000000..11702f5 --- /dev/null +++ b/src/app/widget/tool42-label/tool42-label.component.ts @@ -0,0 +1,27 @@ +import {Component, Input, OnInit} from '@angular/core'; + +@Component({ + selector: 'app-tool42-label', + templateUrl: './tool42-label.component.html', + styleUrls: ['./tool42-label.component.scss'] +}) +export class Tool42LabelComponent implements OnInit { + @Input() text: string; + @Input() type: string; + className: string; + + constructor() { + } + + ngOnInit() { + switch (this.type) { + case 'primary': + this.className = 't42-label-primary'; + break; + case 'secondary': + this.className = 't42-label-secondary'; + break; + } + } + +} diff --git a/src/app/widget/widget.module.ts b/src/app/widget/widget.module.ts index 6b6cba4..dd9ba65 100644 --- a/src/app/widget/widget.module.ts +++ b/src/app/widget/widget.module.ts @@ -1,13 +1,18 @@ -import { CommonModule } from '@angular/common'; -import { NgModule } from '@angular/core'; -import { ReactiveFormsModule } from '@angular/forms'; -import { RouterModule } from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; +import {ReactiveFormsModule} from '@angular/forms'; +import {RouterModule} from '@angular/router'; +import {UtilitiesModule} from './../utilities/utilities.module'; +import {SearchFormComponent} from './search-form/search-form.component'; +import {NavigationComponent} from './navigation/components/navigation.component'; +import {NavigationItemComponent} from './navigation/components/navigation-item.component'; +import {Tool42ButtonComponent} from './tool42-button/tool42-button.component'; +import {Tool42HeadingComponent} from './tool42-heading/tool42-heading.component'; +import {Tool42ContactUsComponent} from './tool42-contact-us/tool42-contact-us.component'; +import {Tool42FormInputFieldComponent} from './tool42-form-input-field/tool42-form-input-field.component'; +import {Tool42LabelComponent} from './tool42-label/tool42-label.component'; +import {Tool42InputComponent} from './tool42-input/tool42-input.component'; -import { UtilitiesModule } from './../utilities/utilities.module'; -import { SearchFormComponent } from './search-form/search-form.component'; -import { NavigationComponent } from './navigation/components/navigation.component'; -import { NavigationItemComponent } from './navigation/components/navigation-item.component'; -import { Tool42ButtonComponent } from './tool42-button/tool42-button.component'; @NgModule({ imports: [ @@ -19,13 +24,23 @@ import { Tool42ButtonComponent } from './tool42-button/tool42-button.component'; exports: [ SearchFormComponent, NavigationComponent, - Tool42ButtonComponent + Tool42ButtonComponent, + Tool42InputComponent, + Tool42LabelComponent, + Tool42FormInputFieldComponent, + Tool42ContactUsComponent, + Tool42HeadingComponent ], declarations: [ SearchFormComponent, NavigationComponent, NavigationItemComponent, - Tool42ButtonComponent + Tool42ButtonComponent, + Tool42InputComponent, + Tool42LabelComponent, + Tool42FormInputFieldComponent, + Tool42ContactUsComponent, + Tool42HeadingComponent ] }) export class WidgetModule { diff --git a/src/styles.css b/src/styles.css index 968e31c..4be4983 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,5 @@ /* You can add global styles to this file, and also import other style files */ + body{ background-color: #f7f7f6; } @@ -8,7 +9,11 @@ h1{ margin-top: 10px; } -section{ +h2 { + color: #707070; +} + +section { border-top: 1px solid #707070; padding: 10px 0 10px 0; } @@ -17,12 +22,14 @@ section{ height: 68px; padding: 10px 0 10px 0; } - -.logo-img{ +.logo-img { float: right; } -md-card{ +md-card { margin: 5px 0 5px 0; + line-height: 5px; + height: 50px; + border: 1px solid #f7f7f6; cursor: pointer; }