e2e

gulpfile.js

@@ -52,19 +52,27 @@ gulp.task('clean', function(done) {
   del([buildConfig.dist], done);
 });
 
-gulp.task('examples', ['sass'], function() {
+gulp.task('e2e', function() {
-  var exampleSrc = path.join(__dirname, 'src/components/**/examples/**/*');
+  var e2eSrc = path.join(__dirname, 'src/components/**/test/**/*');
   var templateSrc = path.join(__dirname, 'scripts/examples/index.template.html');
-  var exampleDest = path.join(__dirname, 'dist/examples/');
+  var e2eDest = path.join(__dirname, 'dist/e2e/');
 
-  return gulp.src(exampleSrc)
+  return gulp.src(e2eSrc)
     .pipe(gulpif(/index.html/, wrap({
       src: templateSrc
     })))
     .pipe(rename(function(file) {
-      file.dirname = file.dirname.replace('/examples/', '/');
+      file.dirname = file.dirname.replace('/test/', '/');
     }))
-    .pipe(gulpif({ isFile: true }, gulp.dest(exampleDest)));
+    .pipe(gulpif({ isFile: true }, gulp.dest(e2eDest)));
+});
+
+gulp.task('e2e-watch', ['e2e'], function() {
+  gulp.watch(buildConfig.src.scss, ['sass']);
+  return gulp.watch([
+    'src/components/**/test/**/*',
+    buildConfig.src.examples.concat('scripts/examples/index.template.html')
+  ], ['e2e']);
 });
 
 require('./scripts/snapshot/snapshot.task')(gulp, argv, buildConfig);
@@ -86,6 +94,7 @@ gulp.task('ng2-rename', function(done) {
       .on('end', done);
   });
 });
+
 gulp.task('ng2', ['ng2-rename'], function() {
   var builder = new SystemJsBuilder();
   builder.config({

scripts/snapshot/protractor.config.js

@@ -8,7 +8,7 @@ exports.config = {
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   specs: [
-    path.resolve(projectRoot, 'dist/examples/**/*.scenario.js'),
+    path.resolve(projectRoot, 'dist/e2e/**/e2e.js'),
   ],
 
   // Options to be passed to Jasmine-node.

src/components/app/ionic.scss

@@ -18,7 +18,7 @@
   "typography";
 
 
-// Components
+// Default Components
 @import
   "../aside/aside",
   "../button/button",
@@ -30,6 +30,16 @@
   "../toolbar/toolbar";
 
 
+// Android Components
+@import
+  "../item/extensions/android/item-android";
+
+
+// iOS Components
+@import
+  "../item/extensions/ios/item-ios";
+
+
 // Icons
 @import
   "../icon/icon";

src/components/item/examples/item-default/index.html

@@ -1,57 +0,0 @@
-<div class="pane">
-
-  <div class="pane-container">
-
-    <div class="bar">
-      List/Item Default CSS Tests
-    </div>
-
-    <div class="content">
-
-      <div class="list-header">
-        List Header
-      </div>
-
-      <ul class="list">
-
-        <li class="item">
-          <div class="item-content">
-            <div class="item-title">
-              Item 1
-            </div>
-            <div class="item-accessory">
-              Label
-            </div>
-          </div>
-        </li>
-
-        <li class="item">
-          <div class="item-content">
-            <div class="item-title">
-              Item 2
-            </div>
-            <div class="item-accessory">
-              Label
-            </div>
-          </div>
-        </li>
-
-        <li class="item">
-          <div class="item-content">
-            <div class="item-title">
-              Item 3
-            </div>
-            <div class="item-accessory">
-              Label
-            </div>
-          </div>
-        </li>
-
-      </ul>
-
-
-    </div>
-
-  </div>
-
-</div>

src/components/item/extensions/ios/item-ios.scss

@@ -0,0 +1,31 @@
+
+// iOS Item
+// --------------------------------------------------
+
+$item-ios-min-height:           44px !default;
+$item-ios-padding-top:          8px !default;
+$item-ios-padding-right:        15px !default;
+$item-ios-padding-bottom:       7px !default;
+$item-ios-padding-left:         15px !default;
+$item-ios-accessory-color:      #8e8e93 !default;
+
+
+
+.list-ios {
+
+  .item {
+    min-height: $item-ios-min-height;
+    padding-left: $item-ios-padding-left;
+  }
+
+  .item-content {
+    min-height: $item-ios-min-height;
+    padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom 0;
+  }
+
+  .item-accessory {
+    color: $item-ios-accessory-color;
+    color: red;
+  }
+
+}

src/components/item/item.scss

@@ -3,12 +3,24 @@
 // --------------------------------------------------
 
 $item-min-height:         44px !default;
-$item-padding-top:        8px !default;
+$item-padding-top:        15px !default;
 $item-padding-right:      15px !default;
-$item-padding-bottom:     7px !default;
+$item-padding-bottom:     15px !default;
 $item-padding-left:       15px !default;
 
 
+//  <li class="item">
+//    <div class="item-content">
+//      <div class="item-title">
+//        Item Title
+//      </div>
+//      <div class="item-accessory">
+//        Badge
+//      </div>
+//    </div>
+//  </li>
+
+
 .item {
   position: relative;
 
@@ -17,8 +29,8 @@ $item-padding-left:       15px !default;
   @include flex-align-items(center);
 
   min-height: $item-min-height;
-
+  margin: 0;
-  padding-left: $item-padding-left;
+  padding: 0;
 }
 
 .item-content {
@@ -32,9 +44,7 @@ $item-padding-left:       15px !default;
   width: 100%;
   min-height: $item-min-height;
 
-  padding-right: $item-padding-right;
+  padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
-  padding-top: $item-padding-top;
-  padding-bottom: $item-padding-bottom;
 }
 
 .item-title {

src/components/item/test/item-default/index.html

@@ -0,0 +1,64 @@
+<div class="pane">
+
+  <div class="pane-container">
+
+    <div class="bar">
+      List/Item Default CSS Tests
+    </div>
+
+    <div class="content">
+
+      <div class="list">
+
+        <div class="list-header">
+          List Header
+        </div>
+
+        <ul class="list-content">
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 1
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 2
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 3
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+        </ul>
+
+        <div class="list-footer">
+          List Footer
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/components/item/test/item-ios-default/index.html

@@ -0,0 +1,65 @@
+<div class="pane">
+
+  <div class="pane-container">
+
+    <div class="bar">
+      iOS List/Item Default CSS Tests
+    </div>
+
+    <div class="content">
+
+      <div class="list list-ios">
+
+        <div class="list-header">
+          List Header
+        </div>
+
+        <ul class="list-content">
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 1
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 2
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+          <li class="item">
+            <div class="item-content">
+              <div class="item-title">
+                Item 3
+              </div>
+              <div class="item-accessory">
+                Label
+              </div>
+            </div>
+          </li>
+
+        </ul>
+
+        <div class="list-footer">
+          List Footer
+        </div>
+
+      </div>
+
+
+    </div>
+
+  </div>
+
+</div>

src/components/list/list.scss

@@ -2,25 +2,49 @@
 // List
 // --------------------------------------------------
 
-$list-margin: 35px 0 !default;
+$list-margin: 35px             0 !default;
+$list-content-margin:          10px 0 !default;
 
 
+//  <div class="list">
+//    <div class="list-header">
+//      List Header
+//    </div>
+//    <ul class="list-content">
+//      ...
+//    </ul>
+//    <div class="list-footer">
+//      List Footer
+//    </div>
+//  </div>
+
 
 .list {
+  position: relative;
+  display: block;
   margin: $list-margin;
-  padding: 0;
+  width: 100%;
-  list-style-type: none;
 }
 
 .list-header {
   position: relative;
-  margin: 35px 15px 10px;
 
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.list-header + .list {
+.list-header + .list-content {
-  margin-top: 10px;
+  margin: $list-content-margin;
 }
+
+.list-content {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.list-footer {
+  margin: 10px 0;
+}
+

src/components/modal/modal.html

@@ -1,3 +0,0 @@
-<div class="modal">
-  <h2>I'm a modal!</h2>
-</div>