Create stub of shopping list items component

bower.json

@@ -17,7 +17,10 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
     "paper-card": "PolymerElements/paper-card#^2.0.0",
     "paper-fab": "PolymerElements/paper-fab#^2.0.0",
-    "iron-icons": "PolymerElements/iron-icons#^2.0.0"
+    "iron-icons": "PolymerElements/iron-icons#^2.0.0",
+    "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
+    "paper-item": "PolymerElements/paper-item#^2.0.0",
+    "paper-checkbox": "PolymerElements/paper-checkbox#^2.0.0"
   },
   "resolutions": {
     "polymer": "^2.0.0"

polymer.json

@@ -3,6 +3,7 @@
   "shell": "src/my-app.html",
   "fragments": [
     "src/my-lists.html",
+    "src/my-items.html",
     "src/my-view404.html"
   ],
   "sources": [

src/my-app.html

@@ -23,6 +23,7 @@
 <link rel="import" href="my-icons.html">
 
 <link rel="lazy-import" href="my-lists.html">
+<link rel="lazy-import" href="my-items.html">
 <link rel="lazy-import" href="my-view404.html">
 
 <dom-module id="my-app">
@@ -98,6 +99,7 @@
             fallback-selection="view404"
             role="main">
           <my-lists name="lists"></my-lists>
+          <my-items name="items" route="{{subroute}}"></my-items>
           <my-view404 name="view404"></my-view404>
         </iron-pages>
       </app-header-layout>

src/my-items.html

@@ -0,0 +1,60 @@
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
+<link rel="import" href="../bower_components/paper-item/paper-item.html">
+<link rel="import" href="../bower_components/paper-item/paper-item-body.html">
+<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
+<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
+
+<dom-module id="my-items">
+  <template>
+    <style>
+      :host {
+        display: block;
+      }
+
+      paper-item[data-checked] {
+        text-decoration: line-through;
+        color: var(--paper-item-disabled-color, var(--disabled-text-color));
+      }
+
+      paper-fab {
+        position: fixed;
+        right: 16px;
+        bottom: 16px;
+      }
+    </style>
+
+    <paper-listbox>
+      <paper-item data-checked>
+        <paper-checkbox checked></paper-checkbox>
+        <paper-item-body>
+          <div>Mangos</div>
+        </paper-item-body>
+      </paper-item>
+      <paper-item>
+        <paper-checkbox ></paper-checkbox>
+        <paper-item-body>
+          <div>Oranges</div>
+        </paper-item-body>
+      </paper-item>
+      <paper-item>
+        <paper-checkbox></paper-checkbox>
+        <paper-item-body>
+          <div>Pears</div>
+        </paper-item-body>
+      </paper-item>
+    </paper-listbox>
+
+    <paper-fab mini icon="add"></paper-fab>
+
+  </template>
+  <script>
+    class MyItems extends Polymer.Element {
+
+      static get is() { return "my-items"; }
+
+    }
+    window.customElements.define(MyItems.is, MyItems);
+  </script>
+</dom-module>