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>

src/config/component.js

@@ -11,12 +11,15 @@ let platformName = platform.getName()
 export class IonicComponent {
   constructor(ComponentClass, {
     bind,
-    delegates
+    delegates,
+    propClasses
   }) {
     // TODO give errors if not providing valid delegates
     ComponentClass.config = this
     this.componentCssName = util.pascalCaseToDashCase(ComponentClass.name)
 
+    console.log(propClasses);
+
     this.bind = bind || (bind = {})
     for (let attrName in bind) {
       let binding = bind[attrName]
@@ -27,7 +30,9 @@ export class IonicComponent {
       }
     }
 
+
     this.delegates = delegates || (delegates = {})
+    this.propClasses = propClasses || (propClasses = []);
     // for (let delegateName of delegates) {
     //   let delegate = delegates[delegateName]
     // }
@@ -42,6 +47,13 @@ export class IonicComponent {
     instance.domElement.classList.add(this.componentCssName)
     instance.domElement.classList.add(`${this.componentCssName}-${platformName}`)
 
+    // For each property class, check if it exists on the element and add the
+    // corresponding classname for it
+    for (let propClass of this.propClasses) {
+      if(instance.domElement.hasAttribute(propClass)) {
+        instance.domElement.classList.add(`${this.componentCssName}-${propClass}`)
+      }
+    }
 
     /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
     /*
@@ -60,6 +72,9 @@ export class IonicComponent {
     /****** TODO: HACK!!! MAKE MORE GOOD!!! ********/
 
 
+    // Check and apply and property classes (properties that should be
+    // converted to class names). For example, <button primary> should
+    // add the class button-primary
 
     for (let attrName in this.bind) {
       let binding = this.bind[attrName]

src/ionic.scss

@@ -34,6 +34,7 @@
   "components/checkbox/checkbox",
   "components/content/content",
   "components/item/item",
+  "components/input/input",
   "components/layout/layout",
   "components/list/list",
   "components/modal/modal",