Initial changes for 2.0

PolymerElements · Sep 13, 2016 · 04d8624 · 04d8624
1 parent bf21c5c
commit 04d8624
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 84 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-icons",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "description": "A set of icons for use with iron-icon",
   "authors": [
     "The Polymer Authors"
@@ -19,20 +19,28 @@
   "license": "http://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/PolymerElements/paper-icons",
   "dependencies": {
-    "iron-icon": "polymerelements/iron-icon#^1.0.0",
-    "iron-iconset-svg": "polymerelements/iron-iconset-svg#^1.0.0",
-    "polymer": "Polymer/polymer#^1.0.0"
+    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
+    "polymer": "Polymer/polymer#2.0-preview"
   },
   "devDependencies": {
     "paper-styles": "polymerelements/paper-styles#^1.0.2",
     "iron-component-page": "polymerelements/iron-component-page#1.0.0",
-    "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
-    "iron-meta": "polymerelements/iron-meta#^1.0.0",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-meta": "PolymerElements/iron-meta#2.0-preview",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
     "web-component-tester": "^4.0.0"
   },
   "ignore": [
     "util",
     "update-icons.sh"
-  ]
+  ],
+  "resolutions": {
+    "iron-icon": "2.0-preview",
+    "iron-meta": "2.0-preview",
+    "iron-iconset-svg": "2.0-preview",
+    "iron-flex-layout": "2.0-preview",
+    "webcomponentsjs": "v1",
+    "polymer": "2.0-preview"
+  }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -15,6 +15,7 @@
   <link rel="import" href="../../paper-styles/demo-pages.html">
   <link rel="import" href="../../paper-styles/color.html">
   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="../../iron-meta/iron-meta.html">
 
   <!-- load default iconset -->
   <link rel="import" href="../iron-icons.html">
@@ -31,86 +32,102 @@
   <link rel="import" href="../social-icons.html">
   <link rel="import" href="../places-icons.html">
 
-  <style is="custom-style">
-    h2 {
-      text-transform: capitalize;
-    }
-
-    iron-icon {
-      transition: all 0.2s;
-      -webkit-transition: all 0.2s;
-    }
-
-    iron-icon:hover {
-      fill: var(--google-yellow-700);
-    }
-
-    .set {
-      margin: auto;
-      padding: 1em 0;
-      border-bottom: 1px solid silver;
-      @apply(--layout-horizontal);
-      @apply(--layout-wrap);
-    }
-
-    .set:last-of-type {
-      border-bottom: none;
-    }
-
-    .set:nth-of-type(4n-3) {
-      color: var(--paper-grey-700);
-    }
-
-    .set:nth-of-type(4n-2) {
-      color: var(--paper-pink-500);
-    }
-
-    .set:nth-of-type(4n-1) {
-      color: var(--google-green-500);
-    }
-
-    .set:nth-of-type(4n) {
-      color: var( --google-blue-500);
-    }
-
-    .container {
-      min-width: 10em;
-      padding: 1em 0.5em;
-      text-align: center;
-      @apply(--layout-vertical);
-      @apply(--layout-center);
-      @apply(--layout-flex);
-    }
-
-    .container > div {
-      margin-top: 0.5em;
-      color: black;
-      font-size: 10px;
-    }
-  </style>
+  <custom-style>
+    <style is="custom-style">
+      h2 {
+        text-transform: capitalize;
+      }
+
+      iron-icon {
+        transition: all 0.2s;
+        -webkit-transition: all 0.2s;
+      }
+
+      iron-icon:hover {
+        fill: var(--google-yellow-700);
+      }
+
+      .set {
+        margin: auto;
+        padding: 1em 0;
+        border-bottom: 1px solid silver;
+        @apply(--layout-horizontal);
+        @apply(--layout-wrap);
+      }
+
+      .set:last-of-type {
+        border-bottom: none;
+      }
+
+      .set:nth-of-type(4n-3) {
+        color: var(--paper-grey-700);
+      }
+
+      .set:nth-of-type(4n-2) {
+        color: var(--paper-pink-500);
+      }
+
+      .set:nth-of-type(4n-1) {
+        color: var(--google-green-500);
+      }
+
+      .set:nth-of-type(4n) {
+        color: var( --google-blue-500);
+      }
+
+      .container {
+        min-width: 10em;
+        padding: 1em 0.5em;
+        text-align: center;
+        @apply(--layout-vertical);
+        @apply(--layout-center);
+        @apply(--layout-flex);
+      }
+
+      .container > div {
+        margin-top: 0.5em;
+        color: black;
+        font-size: 10px;
+      }
+    </style>
+  </custom-style>
+
+  <script>
+    window.addEventListener('load', function() {
+      document.querySelector('dom-bind').getIconNames = function(iconset) {
+        return iconset.getIconNames();
+      };
+
+      // `list` is only available as a getter on `<iron-meta>` elements, not
+      // IronMeta instances. All iconsets have loaded by this point - given that
+      // they're in imports above, so the 'load' event should be late enough to
+      // get them.
+
+      var meta = document.createElement('iron-meta');
+      meta.type = 'iconset';
+      document.querySelector('dom-bind').iconsets = meta.list;
+    });
+  </script>
 </head>
 <body>
-  <template is="dom-bind">
-   <iron-meta type="iconset" list="{{iconsets}}"></iron-meta>
-
-    <template is="dom-repeat" items="{{iconsets}}">
-      <h2>{{item.name}}</h2>
-
-      <div class="set">
-        <template is="dom-repeat" items="{{getIconNames(item)}}">
-          <span class="container">
-            <iron-icon icon="{{item}}"></iron-icon>
-            <div>{{item}}</div>
-          </span>
+  <dom-bind>
+    <template>
+      <dom-repeat items="{{iconsets}}">
+        <template>
+          <h2>{{item.name}}</h2>
+          <div class="set">
+            <dom-repeat is="dom-repeat" items="{{getIconNames(item)}}">
+              <template>
+                <span class="container">
+                  <iron-icon icon="{{item}}"></iron-icon>
+                  <div>{{item}}</div>
+                </span>
+              </template>
+            </dom-repeat>
+          </div>
         </template>
-      </div>
+      </dom-repeat>
     </template>
-  </template>
-
-  <script>
-    document.querySelector('[is=dom-bind]').getIconNames = function(iconset) {
-      return iconset.getIconNames();
-    };
-  </script>
+  </dom-bind>
 </body>
 </html>