iOS checkbox

scripts/snapshot/snapshot.task.js

@@ -32,7 +32,7 @@ module.exports = function(gulp, argv, buildConfig) {
       platform_count: 1,
       width: 400,
       height: 800,
-      test_id: uuid.v4()
+      test_id: uuid.v4().split('-')[0]
     }
   }, argv);
 

src/components/checkbox/extensions/ios.scss

@@ -2,8 +2,14 @@
 // iOS Checkbox
 // --------------------------------------------------
 
-.list-ios .checkbox {
+$checkbox-ios-color:          #007aff;
 
 
+.list-ios {
+
+  .media-checkbox {
+    min-width: 20px;
+    color: $checkbox-ios-color;
+  }
 
 }

src/components/checkbox/test/checkbox-ios/main.html

@@ -3,14 +3,14 @@
 
   <div class="pane-container">
 
-    <div class="bar">
+    <div class="content" style="background: #efeff4">
-      iOS Checkbox Tests
-    </div>
-
-    <div class="content">
 
       <div class="list list-ios">
 
+        <div class="list-header">
+          iOS Checkboxes
+        </div>
+
         <div class="list-content">
 
 
@@ -20,15 +20,59 @@
                aria-checked="true"
                aria-invalid="false">
 
-            <div class="item-media">
+            <div class="item-media media-checkbox">
-              <div class="checkbox-off">Off</div>
+              <icon class="ion-ios-circle-outline checkbox-off"></icon>
-              <div class="checkbox-on">On</div>
+              <icon class="ion-ios-checkmark checkbox-on"></icon>
             </div>
 
             <div class="item-content">
 
               <div class="item-title">
-                I am pleased
+                Apples
+              </div>
+
+            </div>
+
+          </div>
+
+
+
+          <div class="item checkbox ios-checkbox"
+               role="checkbox"
+               aria-checked="false"
+               aria-invalid="false">
+
+            <div class="item-media media-checkbox">
+              <icon class="ion-ios-circle-outline checkbox-off"></icon>
+              <icon class="ion-ios-checkmark checkbox-on"></icon>
+            </div>
+
+            <div class="item-content">
+
+              <div class="item-title">
+                Bananas
+              </div>
+
+            </div>
+
+          </div>
+
+
+
+          <div class="item checkbox ios-checkbox"
+               role="checkbox"
+               aria-checked="true"
+               aria-invalid="false">
+
+            <div class="item-media media-checkbox">
+              <icon class="ion-ios-circle-outline checkbox-off"></icon>
+              <icon class="ion-ios-checkmark checkbox-on"></icon>
+            </div>
+
+            <div class="item-content">
+
+              <div class="item-title">
+                Oranges
               </div>
 
             </div>

src/components/icon/icon.js

@@ -5,7 +5,6 @@ import {NgElement, Decorator} from 'angular2/angular2'
 })
 export class Icon {
   constructor(@NgElement() ngEle:NgElement) {
-    ngEle.domElement.setAttribute('class', 'icon ion-home')
+    ngEle.domElement.setAttribute('aria-hidden', 'hidden')
   }
-
 }

src/components/icon/icon.scss

@@ -15,5 +15,6 @@
 @import "ionicons-icons";
 
 icon {
+  display: inline-block;
   font-size: 1.8em;
 }

src/components/item/extensions/ios.scss

@@ -15,6 +15,10 @@ $item-ios-border-color:         $list-ios-border-color !default;
     padding-left: $item-ios-padding-left;
   }
 
+  .item-media + .item-content {
+    margin-left: $item-ios-padding-left;
+  }
+
   .item-content {
     min-height: $item-ios-min-height;
     padding: 0;