Added property class feature to IonicComponent

src/components/app/test/barkpark/main.js

@@ -4,14 +4,14 @@ import {FormBuilder, Validators, FormDirectives, CongrolGroup} from 'angular2/fo
 
 import {Log} from 'ionic2/util'
 
-import {NavViewport, View} from 'ionic2/ionic2'
+import {NavViewport, View, Button} from 'ionic2/ionic2'
 
 @Component({
   selector: 'login-page'
 })
 @Template({
   url: 'pages/login.html',
-  directives: [View, FormDirectives]
+  directives: [View, FormDirectives, Button]
 })
 export class LoginPage {
   constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
@@ -29,6 +29,42 @@ export class LoginPage {
   doLogin(event) {
     Log.log('Doing login')
     event.preventDefault();
+    console.log(this.loginForm.value);
+    //this.viewport.push(SecondPage)
+  }
+  doSignup(event) {
+    this.viewport.push(SignupPage)
+  }
+}
+
+@Component({
+  selector: 'signup-page'
+})
+@Template({
+  url: 'pages/signup.html',
+  directives: [View, FormDirectives]
+})
+export class SignupPage {
+  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+    this.viewport = viewport
+    Log.log('SIGNUP PAGE')
+
+    var fb = new FormBuilder()
+
+    this.loginForm = fb.group({
+      name: ['', Validators.required],
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  doLogin(event) {
+    this.viewport.pop()
+  }
+  doSignup(event) {
+    Log.log('Doing login')
+    event.preventDefault();
+    console.log(this.loginForm.value);
     //this.viewport.push(SecondPage)
   }
 }

src/components/app/test/barkpark/pages/login.html

@@ -1,13 +1,14 @@
-<ion-view nav-title="Login">
+<ion-view nav-title="Login" style="padding: 20px">
   <form (^submit)="doLogin($event)" [control-group]="loginForm">
     <ion-input>
       <input control="email" type="email" placeholder="Your email">
     </ion-input>
     <ion-input>
-      <input control="password" type="email" placeholder="Your email">
+      <input control="password" type="email" placeholder="Your password">
     </ion-input>
-    <button type="submit">Log in</button>
-
-    {{loginForm.controls.email.value}}
+    <button ion-button stable type="submit">Log in</button>
+    <div>
+      Or <button ion-button primary (click)="doSignup()">Create an account</button>
+    </div>
   </form>
 </ion-view>

src/components/button/button.js

@@ -2,7 +2,7 @@ import {NgElement, Decorator} from 'angular2/angular2'
 import {IonicComponent} from 'ionic2/config/component'
 
 @Decorator({
-  selector: '.button',
+  selector: 'ion-button, [ion-button],.button',
 })
 export class Button {
   constructor(
@@ -12,4 +12,6 @@ export class Button {
     this.config = Button.config.invoke(this)
   }
 }
-new IonicComponent(Button, {})
+new IonicComponent(Button, {
+  propClasses: ['primary', 'secondary', 'danger', 'light', 'stable', 'dark']
+})

src/components/button/test/basic/main.html

@@ -47,3 +47,14 @@
   <button class="button button-dark hover">hover</button>
   <button class="button button-dark activated">activated</button>
 </div>
+
+<h2>With Properties</h2>
+
+<div>
+  <button ion-button primary>button.primary</button>
+  <button ion-button secondary>button.secondary</button>
+  <button ion-button stable>button.stable</button>
+  <button ion-button light>button.light</button>
+  <button ion-button dark>button.dark</button>
+  <button ion-button danger>button.danger</button>
+</div>