chore: include images

Author: SvetoslavTsenov

app/animate-child.component.ts

@@ -10,8 +10,8 @@ import { Component } from "@angular/core";
 
 @Component({
     template: `
-        <StackLayout class="parent" width="500" height="500" [@parent]="parentVal">
-          <StackLayout class="child" [@child]="childVal"></StackLayout>>
+        <StackLayout class="parent" width="500" height="500" [@parent]="parentVal" automationText="parent">
+          <StackLayout class="child" [@child]="childVal" automationText="child"></StackLayout>>
         </StackLayout>
     `,
     animations: [

app/animations-list.component.ts

@@ -8,15 +8,14 @@ class Link {
 
 @Component({
     template: `
-        <ListView [items]="links">
-            <ng-template let-item="item">
-                <Button
-                    [text]="item.title"
-                    [nsRouterLink]="item.link"
-                    [automationText]="item.link.replace('/', '')"
-                ></Button>
-            </ng-template>
-        </ListView>
+        <WrapLayout [items]="links">
+            <Button
+                *ngFor="let item of links"
+                [text]="item.title"
+                [nsRouterLink]="item.link"
+                [automationText]="item.link.replace('/', '')">
+            </Button>
+        </WrapLayout>
     `
 })
 export class AnimationsListComponent {

app/app.android.css

@@ -0,0 +1,9 @@
+Button {
+    font-size: 8px;
+    padding: 0px;
+    margin: 0px;
+}
+
+Label{
+    font-size: 8px;
+}

app/app.css

@@ -1,9 +1,9 @@
 <FlexboxLayout flexDirection="column">
     <FlexboxLayout>
-        <Button (tap)="heroes.addInactive()" text="Add inactive" ></Button>
-        <Button (tap)="heroes.addActive()" text="Add active"></Button>
-        <Button (tap)="heroes.remove()" text="Remove"></Button>
-        <Button (tap)="heroes.reset()" text="Reset"></Button>
+        <Button (tap)="heroes.addInactive()" text="Add inactive" automationText="addInactive" ></Button>
+        <Button (tap)="heroes.addActive()" text="Add active" automationText="addActive" ></Button>
+        <Button (tap)="heroes.remove()" text="Remove" automationText="remove" ></Button>
+        <Button (tap)="heroes.reset()" text="Reset" automationText="reset" ></Button>
     </FlexboxLayout>
 
     <FlexboxLayout flexDirection="column">

app/hero/hero-team-builder.component.html

@@ -5,6 +5,7 @@ import { Heroes } from "./hero.service";
 @Component({
     moduleId: module.id,
     selector: "hero-team-builder",
+    styleUrls: ["./hero-team-builder.component.css"],
     templateUrl: "./hero-team-builder.component.html",
     providers: [Heroes]
 })

app/hero/hero-team-builder.component.ts

@@ -9,24 +9,26 @@ import {
 
 @Component({
     template: `
-        <StackLayout>
+        <StackLayout automationText="itemsContainer">
             <Button
                 text="Add hero"
                 (tap)="addNew()"
                 [isEnabled]="extraHeroes.length > 0"
                 [ngClass]="extraHeroes.length > 0 ? 'enabled' : 'disabled'"
+                automationText="add"
             ></Button>
 
 
             <Button
                 *ngFor="let hero of heroes"
-                [text]="hero"
+                [text]="hero" 
                 [@flyInOut]="'in'"
                 (tap)="flyOut(hero)"
                 backgroundColor="hotpink"
+                [automationText]="hero"
                 height="75"
             ></Button>
-
+ 
         </StackLayout>
     `,
     styles: [

app/options-default.component.ts

@@ -31,7 +31,7 @@ import { Component } from "@angular/core";
     template: `
         <FlexboxLayout flexDirection="column"
             automationText="itemsContainer">
-            <Button text="add" (tap)="items.push('random')"></Button>
+            <Button text="add" automationText="add" (tap)="items.push('random')"></Button>
 
             <FlexboxLayout
                 flexDirection="column"