Merge pull request #1 from Granze/v2

Update to Polymer 2
Granze · Aug 3, 2017 · da490e6 · da490e6
2 parents 619d0ff + 3720537
commit da490e6
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 167 deletions.
diff --git a/.yo-rc.json b/.yo-rc.json
diff --git a/README.md b/README.md
@@ -1,14 +1,26 @@
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/granze/identicon-avatar)
+
 # &lt;identicon-avatar&gt;
 
 GitHub style identicon avatar using [Blockies](https://github.com/download13/blockies).
 
-## Documentation and Demo
-
-See the [component page](http://Granze.github.io/identicon-avatar) for more information.
+## Demo
+Full demo [here](https://www.webcomponents.org/element/granze/identicon-avatar/demo/demo/index.html)
 
-## Screenshot 
-
-![identicon-avatar](http://i.imgur.com/OxleviU.png)
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="identicon-avatar.html">
+    <next-code-block></next-code-block>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<identicon-avatar></identicon-avatar>
+```
 
 ## Installation
 
@@ -17,3 +29,7 @@ Install using [Bower](http://bower.io):
 ```shell
  bower install identicon-avatar
 ```
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)
diff --git a/blockies-import.html b/blockies-import.html
@@ -1,13 +1 @@
-<!--
-@license
-Copyright (c) 2015 by Maurizio Mangione
-
-Adapted from PolymerElements/seed-element:
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
 <script src="../blockies/blockies.js"></script>
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "identicon-avatar",
-  "version": "0.1.1",
+  "version": "2.0.0",
   "authors": [
     "Maurizio Mangione <[email protected]>"
   ],
@@ -13,19 +13,18 @@
     "avatar",
     "github"
   ],
-  "main": "identicon-avatar.html",
-  "license": "http://polymer.github.io/LICENSE.txt",
   "homepage": "https://github.com/granze/identicon-avatar/",
-  "ignore": [
-    "/.*",
-    "/test/"
-  ],
+  "main": "identicon-avatar.html",
   "dependencies": {
-    "blockies": "~0.1.1",
-    "polymer": "Polymer/polymer#^1.4.0"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "blockies": "^0.1.1"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "web-component-tester": "*"
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -1,48 +1,44 @@
 <!doctype html>
-<!--
-@license
-Copyright (c) 2015 by Maurizio Mangione
-
-Adapted from PolymerElements/seed-element:
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>identicon-avatar Demo</title>
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>identicon-avatar demo</title>
+
     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../identicon-avatar.html">
-    <style>
-      .wrapper {
-        width: 960px;
-        margin: 20px auto;
-        text-align: center;
-      }
-      .wrapper code {
-        display: inline-block;
-        margin: 10px;
-        padding: 6px;
-        background-color: #ddd;
-      }
-    </style>
+
+    <custom-style>
+      <style is="custom-style" include="demo-pages-shared-styles">
+      </style>
+    </custom-style>
   </head>
-  <body unresolved>
+  <body>
+    <div class="vertical-section-container centered">
+      <h3>identicon-avatar (seed)</h3>
+      <demo-snippet>
+        <template>
+          <identicon-avatar seed="granze"></identicon-avatar>
+        </template>
+      </demo-snippet>
 
-    <div class="wrapper">
-      <code>&lt;identicon-avatar <strong>seed=&quot;granze&quot;</strong>&gt;&lt;/identicon-avatar&gt;</code>
-      <identicon-avatar seed="granze"></identicon-avatar>
-      <code>&lt;identicon-avatar <strong>seed=&quot;polymer&quot; color=&quot;#6F2B36&quot;</strong>&gt;&lt;/identicon-avatar&gt;</code>
-      <identicon-avatar seed="polymer" color="#6F2B36"></identicon-avatar>
-      <code>&lt;identicon-avatar <strong>seed=&quot;webcomponents&quot;
-        bg-color=&quot;#333&quot;</strong>&gt;&lt;/identicon-avatar&gt;</code>
-      <identicon-avatar seed="webcomponents" bg-color="#333"></identicon-avatar>
-    </div>
+      <h3>identicon-avatar (seed + color)</h3>
+      <demo-snippet>
+        <template>
+          <identicon-avatar seed="polymer" color="#6F2B36"></identicon-avatar>
+        </template>
+      </demo-snippet>
 
+      <h3>identicon-avatar (seed + bg color)</h3>
+      <demo-snippet>
+        <template>
+          <identicon-avatar seed="webcomponents" bg-color="#333"></identicon-avatar>
+        </template>
+      </demo-snippet>
+    </div>
   </body>
 </html>
diff --git a/identicon-avatar.html b/identicon-avatar.html
@@ -1,85 +1,64 @@
-<!--
-@license
-Copyright (c) 2015 by Maurizio Mangione
-
-Adapted from PolymerElements/seed-element:
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="blockies-import.html">
 
-<!--
-GitHub style identicon avatar using [Blockies](https://github.com/download13/blockies).
-
-Example:
-
-    <identicon-avatar seed="granze"></identicon-avatar>
-
-    <identicon-avatar seed="polymer" color="#6F2B36"></identicon-avatar>
-
-    <identicon-avatar seed="webcomponents" bg-color="#333"></identicon-avatar>
-
-@element identicon-avatar
-@demo
--->
 <dom-module id="identicon-avatar">
-
-  <style>
-    :host {
-      display: block;
-      box-sizing: border-box;
-    }
-  </style>
-
-  <template></template>
-
+  <template>
+    <style>
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+    </style>
+  </template>
 </dom-module>
 
 <script>
-
-  Polymer({
-
-    is: 'identicon-avatar',
-
-    properties: {
-      seed: {
-        type: String,
-        value: 'test'
-      },
-      color: {
-        type: String,
-        value: '#88df88'
-      },
-      bgColor: {
-        type: String,
-        value: '#eee'
-      },
-      size: {
-        type: Number,
-        value: 5
-      },
-      scale: {
-        type: Number,
-        value: 50
-      }
-    },
-
-    ready: function() {
-      var avatar = blockies.create({
+  /**
+   * `identicon-avatar`
+   *
+   *
+   * @customElement
+   * @polymer
+   * @demo demo/index.html
+   */
+  class IdenticonAvatar extends Polymer.Element {
+    static get is() { return 'identicon-avatar'; }
+    static get properties() {
+      return {
+        seed: {
+          type: String,
+          value: 'test'
+        },
+        color: {
+          type: String,
+          value: '#88df88'
+        },
+        bgColor: {
+          type: String,
+          value: '#eee'
+        },
+        size: {
+          type: Number,
+          value: 5
+        },
+        scale: {
+          type: Number,
+          value: 50
+        }
+      };
+    }
+    ready() {
+      super.ready();
+      const avatar = blockies.create({
         seed: this.seed,
         color: this.color,
         bgcolor: this.bgColor,
         size: this.size,
         scale: this.scale
       });
-      Polymer.dom(this.root).appendChild(avatar)
+      this.shadowRoot.appendChild(avatar);
     }
+  }
 
-  });
-
+  window.customElements.define(IdenticonAvatar.is, IdenticonAvatar);
 </script>
diff --git a/index.html b/index.html
@@ -1,29 +1,16 @@
 <!doctype html>
-<!--
-@license
-Copyright (c) 2015 by Maurizio Mangione
-
-Adapted from PolymerElements/seed-element:
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
 <html>
-<head>
-
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../iron-component-page/iron-component-page.html">
-
-</head>
-<body unresolved>
-
-  <iron-component-page></iron-component-page>
-
-</body>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="refresh" content="0;url=demo/" />
+    <title>identicon-avatar</title>
+  </head>
+  <body>
+    <!--
+        ELEMENT API DOCUMENTATION SUPPORT COMING SOON
+        Visit demo/index.html to see live examples of your element running.
+        This page will automatically redirect you there when run in the browser
+        with `polymer serve`.
+      -->
+  </body>
 </html>
diff --git a/polymer.json b/polymer.json
@@ -0,0 +1,7 @@
+{
+  "lint": {
+    "rules": [
+      "polymer-2"
+    ]
+  }
+}