From ae165dc5d2093a78d851ee3962766773e7170189 Mon Sep 17 00:00:00 2001
From: rajashekar9 <rajshekar851@gmail.com>
Date: Thu, 14 Sep 2017 18:01:13 +0530
Subject: [PATCH] Upgraded to Polymer 2.0, added googleplus link

---
 behance-link.html         | 118 ++++++++++++++++---------------
 bower.json                |  12 ++--
 convoo-link.html          | 112 +++++++++++++++--------------
 demo/index.html           |   4 ++
 dribbble-link.html        | 114 ++++++++++++++++--------------
 email-link.html           | 124 +++++++++++++++++---------------
 facebook-link.html        | 111 +++++++++++++++--------------
 github-link.html          | 107 ++++++++++++++--------------
 googleplus-link.html      |  72 +++++++++++++++++++
 instagram-link.html       | 115 ++++++++++++++++--------------
 linkedin-link.html        | 112 +++++++++++++++--------------
 pinterest-link.html       | 119 +++++++++++++++++--------------
 skype-link.html           | 112 +++++++++++++++--------------
 snapchat-link.html        | 111 +++++++++++++++--------------
 social-link-behavior.html |   2 +-
 social-link.html          | 145 +++++++++++++++++++-------------------
 social-links.html         |   3 +-
 twitter-link.html         | 118 +++++++++++++++++--------------
 vimeo-link.html           | 119 +++++++++++++++++--------------
 youtube-link.html         | 110 +++++++++++++++--------------
 20 files changed, 1030 insertions(+), 810 deletions(-)
 create mode 100644 googleplus-link.html

diff --git a/behance-link.html b/behance-link.html
index 54755bb..653c420 100644
--- a/behance-link.html
+++ b/behance-link.html
@@ -1,67 +1,71 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `behance-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <behance-link></behance-link>
+Example:
+    <behance-link>
+      <h2>Hello behance-link</h2>
+   </behance-link>
+@demo demo/index.html
 -->
-
 <dom-module id="behance-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
-
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
-
-        <svg viewBox="0 0 26.01 16.26" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path id="Behance" d="M23.92,2.82H17.46V1.21h6.47V2.82h0ZM13.15,9.4a4.25,4.25,0,0,1,.63,2.35,4.68,4.68,0,0,1-.71,2.56,4.44,4.44,0,0,1-1.14,1.26,4.39,4.39,0,0,1-1.81.81,11.2,11.2,0,0,1-2.27.22H0.62V0.54H8.37c2,0,3.34.6,4.16,1.71a4.09,4.09,0,0,1,.73,2.45,3.57,3.57,0,0,1-.74,2.36A3.79,3.79,0,0,1,11.3,8,3.57,3.57,0,0,1,13.15,9.4ZM4.32,6.87h3.4a3.22,3.22,0,0,0,1.7-.4,1.52,1.52,0,0,0,.65-1.41,1.44,1.44,0,0,0-.86-1.48,6.07,6.07,0,0,0-1.9-.25h-3V6.87Zm6.07,4.65a1.72,1.72,0,0,0-1-1.72,4,4,0,0,0-1.61-.27H4.32v4.28H7.71a3.77,3.77,0,0,0,1.63-.28A2,2,0,0,0,10.4,11.52ZM26.32,8.91a15.1,15.1,0,0,1,.1,2.28H18a2.75,2.75,0,0,0,1.2,2.43,3,3,0,0,0,1.66.43,2.34,2.34,0,0,0,2.29-1.32h3.07a3.74,3.74,0,0,1-1.11,2.08,5.59,5.59,0,0,1-4.33,1.68,6.28,6.28,0,0,1-4.05-1.42Q15,13.66,15,10.47A6.23,6.23,0,0,1,16.6,5.89a5.55,5.55,0,0,1,4.11-1.6,6.56,6.56,0,0,1,2.7.54,4.66,4.66,0,0,1,2,1.7A5.68,5.68,0,0,1,26.32,8.91Zm-3,.3a2.51,2.51,0,0,0-.8-1.82,2.62,2.62,0,0,0-1.78-.62,2.38,2.38,0,0,0-1.79.66,3.1,3.1,0,0,0-.8,1.78H23.3Z" transform="translate(-0.52 -0.44)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"/>
-        </svg>
-
-
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Behance<p>
-        </template>
-    </div>
-</a>
-
-</template>
-
-<script>
-    Polymer({
-
-    is: 'behance-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-
-    properties: {
-        color: {
-            value: "#1769ff"
+    <template>
+        <style>
+        :host {
+            display: inline-block;
         }
+        a{
+            text-decoration: none;
+            color: black;
+        }
+            a:hover{
+            text-decoration: underline;
+            color: black;
+        }
+        .container {
+            cursor: hand;
+            cursor: pointer;
+            @apply(--layout-horizontal);
+        }
+        p {
+            margin: 0px 0px 0px 5px;
+            @apply(--layout-flex-none)
+        }
+        </style>
+    
+    <a href="{{href}}" target="_blank" style="color:{{color}}">
+        <div class="container">
+    
+            <svg viewBox="0 0 26.01 16.26" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+            <path id="Behance" d="M23.92,2.82H17.46V1.21h6.47V2.82h0ZM13.15,9.4a4.25,4.25,0,0,1,.63,2.35,4.68,4.68,0,0,1-.71,2.56,4.44,4.44,0,0,1-1.14,1.26,4.39,4.39,0,0,1-1.81.81,11.2,11.2,0,0,1-2.27.22H0.62V0.54H8.37c2,0,3.34.6,4.16,1.71a4.09,4.09,0,0,1,.73,2.45,3.57,3.57,0,0,1-.74,2.36A3.79,3.79,0,0,1,11.3,8,3.57,3.57,0,0,1,13.15,9.4ZM4.32,6.87h3.4a3.22,3.22,0,0,0,1.7-.4,1.52,1.52,0,0,0,.65-1.41,1.44,1.44,0,0,0-.86-1.48,6.07,6.07,0,0,0-1.9-.25h-3V6.87Zm6.07,4.65a1.72,1.72,0,0,0-1-1.72,4,4,0,0,0-1.61-.27H4.32v4.28H7.71a3.77,3.77,0,0,0,1.63-.28A2,2,0,0,0,10.4,11.52ZM26.32,8.91a15.1,15.1,0,0,1,.1,2.28H18a2.75,2.75,0,0,0,1.2,2.43,3,3,0,0,0,1.66.43,2.34,2.34,0,0,0,2.29-1.32h3.07a3.74,3.74,0,0,1-1.11,2.08,5.59,5.59,0,0,1-4.33,1.68,6.28,6.28,0,0,1-4.05-1.42Q15,13.66,15,10.47A6.23,6.23,0,0,1,16.6,5.89a5.55,5.55,0,0,1,4.11-1.6,6.56,6.56,0,0,1,2.7.54,4.66,4.66,0,0,1,2,1.7A5.68,5.68,0,0,1,26.32,8.91Zm-3,.3a2.51,2.51,0,0,0-.8-1.82,2.62,2.62,0,0,0-1.78-.62,2.38,2.38,0,0,0-1.79.66,3.1,3.1,0,0,0-.8,1.78H23.3Z" transform="translate(-0.52 -0.44)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"/>
+            </svg>
+    
+    
+            <template is="dom-if" if="{{text}}">
+                <p style="color:{{color}}; font-size: {{height}};">Behance<p>
+            </template>
+        </div>
+    </a>
+    
+    </template>
+ <script>
+   class BehanceLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element){
+     static get is(){ return 'behance-link';}
+     static get properties() {
+        return {
+            color: {
+                type: String,
+                value: '#1769ff'
+            },
+        };
     }
 
-    });
-</script>
+   }
+   customElements.define(BehanceLink.is,BehanceLink);
+ </script>
 </dom-module>
+
diff --git a/bower.json b/bower.json
index b9deeea..5dce9d1 100644
--- a/bower.json
+++ b/bower.json
@@ -3,13 +3,13 @@
   "main": "social-links.html",
   "version": "0.0.2",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.4.0",
-    "iron-flex-layout": "^1.3.1"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "iron-flex-layout": "^2.0.0"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+    "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",    
+    "iron-component-page": "PolymerElements/iron-component-page#^3.0.1"
   }
 }
diff --git a/convoo-link.html b/convoo-link.html
index f39a5ad..c3e1456 100644
--- a/convoo-link.html
+++ b/convoo-link.html
@@ -1,66 +1,74 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `convoo-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <convoo-link></convoo-link>
+Example:
+    <convoo-link>
+      <h2>Hello convoo-link</h2>
+   </convoo-link>
+@demo demo/index.html
 -->
-
 <dom-module id="convoo-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 16.23 16.33" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path d="M0.37,8.79a10.13,10.13,0,0,1,1.51-5.6c1.3-2,3.61-3.35,6-2.61S11.8,3.65,12.37,6c0.31,1.24.14,2.54,0.45,3.77a2.14,2.14,0,0,0,.91,1.45,1,1,0,0,0,.8-0.06,3.36,3.36,0,0,1,.68.1c0.19,0,.07.09,0.14,0a4.92,4.92,0,0,0-.08-0.64,3.8,3.8,0,0,1,.13-1.11,5.1,5.1,0,0,0,0-2.2c-0.15-.59-0.51-1.55-1.25-1.56a1.07,1.07,0,0,0-.83.52C13.21,6.37,12.91,7,12.9,7s-0.43-2-.49-2.15a4.31,4.31,0,0,1-.37-1,1.53,1.53,0,0,1,.66-0.71c1.44-1,2.7.5,3.22,1.75a9.22,9.22,0,0,1-.41,7.87c-0.8,1.27-2.22,1.76-3.32.54a6.84,6.84,0,0,1-1.41-4c-0.11-1.44-.08-2.84-1.15-4a2.38,2.38,0,0,0-3.54,0A4.84,4.84,0,0,0,5,9.6c0.13,0.63.51,1.16,0.63,1.78a2.83,2.83,0,0,1-.05,1.08,4.54,4.54,0,0,0-.23,1c0.53-.25,1-0.59,1.56-0.84a8,8,0,0,1,1.42-.22,2.64,2.64,0,0,0,1.15-.68A3.61,3.61,0,0,0,10.09,11a8.33,8.33,0,0,1,.36-0.78s0.25,1.21.28,1.33a7.45,7.45,0,0,0,.46,1.22,1.49,1.49,0,0,1,.27.59,2.21,2.21,0,0,1-.39.65,7.2,7.2,0,0,1-1,1.15,5.05,5.05,0,0,1-5.19,1.32,6.51,6.51,0,0,1-3.49-3.27A9.53,9.53,0,0,1,.6,10.77c-0.07-.31-0.11-0.63-0.15-1a3.94,3.94,0,0,0-.08-1C0.37,8.64.38,8.81,0.37,8.79Z" transform="translate(-0.37 -0.38)"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Convoo<p>
-        </template>
-    </div>
-</a>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-</template>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-<script>
-    Polymer({
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-    is: 'convoo-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#b03142"
-        }
-    }
+                <svg viewBox="0 0 16.23 16.33" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M0.37,8.79a10.13,10.13,0,0,1,1.51-5.6c1.3-2,3.61-3.35,6-2.61S11.8,3.65,12.37,6c0.31,1.24.14,2.54,0.45,3.77a2.14,2.14,0,0,0,.91,1.45,1,1,0,0,0,.8-0.06,3.36,3.36,0,0,1,.68.1c0.19,0,.07.09,0.14,0a4.92,4.92,0,0,0-.08-0.64,3.8,3.8,0,0,1,.13-1.11,5.1,5.1,0,0,0,0-2.2c-0.15-.59-0.51-1.55-1.25-1.56a1.07,1.07,0,0,0-.83.52C13.21,6.37,12.91,7,12.9,7s-0.43-2-.49-2.15a4.31,4.31,0,0,1-.37-1,1.53,1.53,0,0,1,.66-0.71c1.44-1,2.7.5,3.22,1.75a9.22,9.22,0,0,1-.41,7.87c-0.8,1.27-2.22,1.76-3.32.54a6.84,6.84,0,0,1-1.41-4c-0.11-1.44-.08-2.84-1.15-4a2.38,2.38,0,0,0-3.54,0A4.84,4.84,0,0,0,5,9.6c0.13,0.63.51,1.16,0.63,1.78a2.83,2.83,0,0,1-.05,1.08,4.54,4.54,0,0,0-.23,1c0.53-.25,1-0.59,1.56-0.84a8,8,0,0,1,1.42-.22,2.64,2.64,0,0,0,1.15-.68A3.61,3.61,0,0,0,10.09,11a8.33,8.33,0,0,1,.36-0.78s0.25,1.21.28,1.33a7.45,7.45,0,0,0,.46,1.22,1.49,1.49,0,0,1,.27.59,2.21,2.21,0,0,1-.39.65,7.2,7.2,0,0,1-1,1.15,5.05,5.05,0,0,1-5.19,1.32,6.51,6.51,0,0,1-3.49-3.27A9.53,9.53,0,0,1,.6,10.77c-0.07-.31-0.11-0.63-0.15-1a3.94,3.94,0,0,0-.08-1C0.37,8.64.38,8.81,0.37,8.79Z"
+                        transform="translate(-0.37 -0.38)" />
+                </svg>
 
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Convoo
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
-</dom-module>
+    </template>
+    <script>
+        class ConvooLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'convoo-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#b03142'
+                    }
+                };
+            }
+        }
+        customElements.define(ConvooLink.is, ConvooLink);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/demo/index.html b/demo/index.html
index 4c2d1b1..ccfa9e9 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -25,6 +25,7 @@
     <link rel="import" href="../dribbble-link.html">
     <link rel="import" href="../convoo-link.html">
     <link rel="import" href="../snapchat-link.html">
+    <link rel="import" href="../googleplus-link.html">
     <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
 
     <style is="custom-style" include="demo-pages-shared-styles">
@@ -54,6 +55,7 @@ <h3>Minimal social-link demo</h3>
                 <social-link network="github" href="https://www.github.com/@bkawk" height="15px" color="grey"></social-link>
                 <social-link network="instagram" href="https://www.instagram.com/@bkawk" height="15px" color="grey"></social-link>
                 <social-link network="dribbble" href="https://www.dribbble.com/@bkawk" height="15px" color="grey"></social-link>
+                <social-link network="googleplus" href="https://www.plus.google.com/@bkawk" height="15px" color="grey"></social-link>                
             </div>
         </template>
       </demo-snippet>
@@ -75,6 +77,7 @@ <h3>Default colors social-links demo</h3>
                 <github-link href="https://www.github.com/@bkawk" height="15px"></github-link>
                 <instagram-link href="https://www.instagram.com/@bkawk" height="15px"></instagram-link>
                 <dribbble-link href="https://www.dribbble.com/@bkawk" height="15px"></dribbble-link>
+                <googleplus-link href="https://www.plus.google.com/@bkawk" height="15px"></googleplus-link>
             </div>
         </template>
       </demo-snippet>
@@ -96,6 +99,7 @@ <h3>Minimal social-links demo</h3>
                 <github-link href="https://www.github.com/@bkawk" height="15px" color="grey"></github-link>
                 <instagram-link href="https://www.instagram.com/@bkawk" height="15px" color="grey"></instagram-link>
                 <dribbble-link href="https://www.dribbble.com/@bkawk" height="15px" color="grey"></dribbble-link>
+                <googleplus-link href="https://www.plus.google.com/@bkawk" height="15px" color="grey"></googleplus-link>
             </div>
         </template>
       </demo-snippet>
diff --git a/dribbble-link.html b/dribbble-link.html
index da6e8b3..95acb91 100644
--- a/dribbble-link.html
+++ b/dribbble-link.html
@@ -1,67 +1,75 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
-`dribbble-link`
-@demo demo/index.html 
+`dribble-link`
+Sample usage of this element
+Example:
+    <dribble-link></dribble-link>
+Example:
+    <dribble-link>
+      <h2>Hello dribble-link</h2>
+   </dribble-link>
+@demo demo/index.html
 -->
+<dom-module id="dribble-link">
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<dom-module id="dribbble-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
-
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 16.35 16.35" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path d="M15.51,4.42a8.14,8.14,0,0,0-3-3A8,8,0,0,0,8.43.35a8,8,0,0,0-4.1,1.1,8.14,8.14,0,0,0-3,3,8,8,0,0,0-1.1,4.1,8,8,0,0,0,1.1,4.1,8.14,8.14,0,0,0,3,3,8,8,0,0,0,4.1,1.1,8,8,0,0,0,4.1-1.1,8.14,8.14,0,0,0,3-3,8,8,0,0,0,1.1-4.1A8,8,0,0,0,15.51,4.42ZM8.43,1.54A6.73,6.73,0,0,1,13,3.28l-0.13.19a4.62,4.62,0,0,1-.4.43,6.84,6.84,0,0,1-.7.61,9.34,9.34,0,0,1-1,.65,9.88,9.88,0,0,1-1.38.64A30.35,30.35,0,0,0,6.78,1.74,7,7,0,0,1,8.43,1.54ZM3,4.19a6.89,6.89,0,0,1,2.49-2,36.64,36.64,0,0,1,2.6,4,25.25,25.25,0,0,1-6.45.85A6.9,6.9,0,0,1,3,4.19ZM1.92,11a6.85,6.85,0,0,1-.47-2.52,1.73,1.73,0,0,1,0-.22,24.89,24.89,0,0,0,7.16-1Q9,8,9.19,8.49L9,8.54l-0.14,0-0.39.14a8.19,8.19,0,0,0-1.06.51q-0.65.36-1.39,0.86a9.51,9.51,0,0,0-1.52,1.33,8.92,8.92,0,0,0-1.31,1.77A7,7,0,0,1,1.92,11ZM8.43,15.5A6.85,6.85,0,0,1,4,13.91L4.14,14a5.7,5.7,0,0,1,1.1-1.58,9.25,9.25,0,0,1,1.39-1.22,13.74,13.74,0,0,1,1.46-.87q0.79-.41,1.07-0.52l0.46-.18h0a28.77,28.77,0,0,1,1.49,5.3A7,7,0,0,1,8.43,15.5Zm5.88-3.21a7,7,0,0,1-2,2,30,30,0,0,0-1.36-5,10.05,10.05,0,0,1,4.35.31A6.89,6.89,0,0,1,14.31,12.29Zm1-3.87L15,8.38l-0.39-.06-0.51-.07-0.6-.06-0.68,0-0.73,0-0.78,0q-0.41,0-.79.07A1.26,1.26,0,0,1,10.47,8L10.4,7.86l-0.47-1a10.92,10.92,0,0,0,1.4-.69,10.88,10.88,0,0,0,1.06-.69,8.85,8.85,0,0,0,.76-0.64,6.14,6.14,0,0,0,.46-0.47l0.2-.26h0a6.83,6.83,0,0,1,1.59,4.36Z" transform="translate(-0.26 -0.35)"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">dribbble<p>
-        </template>
-    </div>
-</a>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-</template>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-<script>
-    Polymer({
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-    is: 'dribbble-link',
+                <svg viewBox="0 0 16.35 16.35" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M15.51,4.42a8.14,8.14,0,0,0-3-3A8,8,0,0,0,8.43.35a8,8,0,0,0-4.1,1.1,8.14,8.14,0,0,0-3,3,8,8,0,0,0-1.1,4.1,8,8,0,0,0,1.1,4.1,8.14,8.14,0,0,0,3,3,8,8,0,0,0,4.1,1.1,8,8,0,0,0,4.1-1.1,8.14,8.14,0,0,0,3-3,8,8,0,0,0,1.1-4.1A8,8,0,0,0,15.51,4.42ZM8.43,1.54A6.73,6.73,0,0,1,13,3.28l-0.13.19a4.62,4.62,0,0,1-.4.43,6.84,6.84,0,0,1-.7.61,9.34,9.34,0,0,1-1,.65,9.88,9.88,0,0,1-1.38.64A30.35,30.35,0,0,0,6.78,1.74,7,7,0,0,1,8.43,1.54ZM3,4.19a6.89,6.89,0,0,1,2.49-2,36.64,36.64,0,0,1,2.6,4,25.25,25.25,0,0,1-6.45.85A6.9,6.9,0,0,1,3,4.19ZM1.92,11a6.85,6.85,0,0,1-.47-2.52,1.73,1.73,0,0,1,0-.22,24.89,24.89,0,0,0,7.16-1Q9,8,9.19,8.49L9,8.54l-0.14,0-0.39.14a8.19,8.19,0,0,0-1.06.51q-0.65.36-1.39,0.86a9.51,9.51,0,0,0-1.52,1.33,8.92,8.92,0,0,0-1.31,1.77A7,7,0,0,1,1.92,11ZM8.43,15.5A6.85,6.85,0,0,1,4,13.91L4.14,14a5.7,5.7,0,0,1,1.1-1.58,9.25,9.25,0,0,1,1.39-1.22,13.74,13.74,0,0,1,1.46-.87q0.79-.41,1.07-0.52l0.46-.18h0a28.77,28.77,0,0,1,1.49,5.3A7,7,0,0,1,8.43,15.5Zm5.88-3.21a7,7,0,0,1-2,2,30,30,0,0,0-1.36-5,10.05,10.05,0,0,1,4.35.31A6.89,6.89,0,0,1,14.31,12.29Zm1-3.87L15,8.38l-0.39-.06-0.51-.07-0.6-.06-0.68,0-0.73,0-0.78,0q-0.41,0-.79.07A1.26,1.26,0,0,1,10.47,8L10.4,7.86l-0.47-1a10.92,10.92,0,0,0,1.4-.69,10.88,10.88,0,0,0,1.06-.69,8.85,8.85,0,0,0,.76-0.64,6.14,6.14,0,0,0,.46-0.47l0.2-.26h0a6.83,6.83,0,0,1,1.59,4.36Z"
+                        transform="translate(-0.26 -0.35)" />
+                </svg>
 
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#444444"
-        }
-    }
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">dribbble
+                        <p>
+                </template>
+            </div>
+        </a>
 
+    </template>
 
-    });
-</script>
+    <script>
+        class DribbleLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'dribble-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#444444'
+                    }
+                };
+            }            
+        }
+        customElements.define(DribbleLink.is, DribbleLink);
+    </script>
 </dom-module>
diff --git a/email-link.html b/email-link.html
index efa642f..9d0e009 100644
--- a/email-link.html
+++ b/email-link.html
@@ -1,62 +1,76 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `email-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <email-link></email-link>
+Example:
+    <email-link>
+      <h2>Hello email-link</h2>
+   </email-link>
+@demo demo/index.html
 -->
-
 <dom-module id="email-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
-
-<a href="mailto:{{email}}" target="_blank" style="color:{{color}}">
-    <div class="container">
-
-
-
-        <svg viewBox="0 0 2.05 15.6" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path id="LinkedIn" d="M0.58,16.42H2.43V1H0.58v15.4Z" transform="translate(-0.48 -0.92)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"/>
-        </svg>
-
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Contact us at {{email}}<p>
-        </template>
-    </div>
-</a>
-
-</template>
-
-<script>
-    Polymer({
-
-    is: 'email-link',
-    behaviors: [
-        SocialLinkBehavior
-    ]
-
-    });
-</script>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
+
+            a {
+                text-decoration: none;
+                color: black;
+            }
+
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
+
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
+
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
+
+        <a href="mailto:{{email}}" target="_blank" style="color:{{color}}">
+            <div class="container">
+
+
+
+                <svg viewBox="0 0 2.05 15.6" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path id="LinkedIn" d="M0.58,16.42H2.43V1H0.58v15.4Z" transform="translate(-0.48 -0.92)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"
+                    />
+                </svg>
+
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Contact us at {{email}}
+                        <p>
+                </template>
+            </div>
+        </a>
+
+    </template>
+    <script>
+        class EmailLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'email-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: 'red'
+                    }
+                };
+            }            
+        }
+        customElements.define(EmailLink.is, EmailLink);
+    </script>
 </dom-module>
diff --git a/facebook-link.html b/facebook-link.html
index 24eac9a..bf57642 100644
--- a/facebook-link.html
+++ b/facebook-link.html
@@ -1,66 +1,75 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `facebook-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <facebook-link></facebook-link>
+Example:
+    <facebook-link>
+      <h2>Hello facebook-link</h2>
+   </facebook-link>
+@demo demo/index.html
 -->
-
 <dom-module id="facebook-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 7.94 16.74" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path d="M5.39,16.79H2.29V8.52H0.22V5.67H2.29V4c0-2.32.63-3.74,3.37-3.74H7.94V3.1H6.51c-1.07,0-1.12.4-1.12,1.14V5.67H8L7.65,8.52H5.39v8.27Z" transform="translate(-0.12 -0.15)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Facebook<p>
-        </template>
-    </div>
-</a>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-</template>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-<script>
-    Polymer({
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-    is: 'facebook-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#3b5998"
-        }
-    }
+                <svg viewBox="0 0 7.94 16.74" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M5.39,16.79H2.29V8.52H0.22V5.67H2.29V4c0-2.32.63-3.74,3.37-3.74H7.94V3.1H6.51c-1.07,0-1.12.4-1.12,1.14V5.67H8L7.65,8.52H5.39v8.27Z"
+                        transform="translate(-0.12 -0.15)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"
+                    />
+                </svg>
 
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Facebook
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
+    </template>
+    <script>
+        class FacebookLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'facebook-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#3b5998'
+                    }
+                };
+            }            
+        }
+        customElements.define(FacebookLink.is, FacebookLink);
+    </script>
 </dom-module>
diff --git a/github-link.html b/github-link.html
index 6638798..f984f0c 100644
--- a/github-link.html
+++ b/github-link.html
@@ -1,66 +1,71 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `github-link`
-@demo demo/index.html 
+Example:
+    <github-link>
+      <h2>Hello github-link</h2>
+   </github-link>
+@demo demo/index.html
 -->
-
 <dom-module id="github-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg  viewBox="0 0 16.73 16.32" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path d="M11.46,16.53a1.53,1.53,0,0,1-.25.08,0.41,0.41,0,0,1-.53-0.44c0-.61,0-1.22,0-1.83a2.6,2.6,0,0,0-.54-2c0.32-.06.6-0.1,0.88-0.16a3.45,3.45,0,0,0,2.9-3.49,3.53,3.53,0,0,0-.76-2.64,0.32,0.32,0,0,1,0-.26,3.21,3.21,0,0,0-.08-1.88,0.24,0.24,0,0,0-.29-0.19,2.91,2.91,0,0,0-1.46.51,1.53,1.53,0,0,1-1.3.23,7.31,7.31,0,0,0-3.29.08,0.6,0.6,0,0,1-.4-0.08A5.23,5.23,0,0,0,4.7,3.79c-0.46-.09-0.5-0.07-0.62.38a3.09,3.09,0,0,0,0,1.68A0.34,0.34,0,0,1,4,6.11C2.8,7.46,3.24,10,4.06,11a3.92,3.92,0,0,0,2.41,1.28L7,12.36c-0.14.36-.27,0.71-0.41,1a0.35,0.35,0,0,1-.19.15,1.71,1.71,0,0,1-2.23-.74A1.74,1.74,0,0,0,3,11.94H2.9L2.47,12a1.17,1.17,0,0,0,.25.33,2.41,2.41,0,0,1,.95,1.18,1.82,1.82,0,0,0,1.68,1.17c0.38,0,.76,0,1.18,0,0,0.47,0,1,0,1.55,0,0.29-.3.4-0.65,0.29a7.56,7.56,0,0,1-2.52-1.4A8,8,0,0,1,.54,6.56,7.94,7.94,0,0,1,7.17.44,8.36,8.36,0,0,1,11.46,16.53ZM7,12.34v0H7ZM4.81,13.85A1.07,1.07,0,0,0,5,14a0.54,0.54,0,0,0,.18-0.13,1.63,1.63,0,0,0-.3-0.11A0.3,0.3,0,0,0,4.81,13.85ZM5.49,14a0.21,0.21,0,0,0,.17.11A0.42,0.42,0,0,0,5.83,14l-0.26-.23A0.6,0.6,0,0,0,5.49,14Zm0.83-.2a0.67,0.67,0,0,0-.19.13l0.14,0.17,0.2-.18A0.34,0.34,0,0,0,6.32,13.76Zm-2.06-.28a1.87,1.87,0,0,0,.18.24,0.7,0.7,0,0,0,.1-0.17,0.92,0.92,0,0,0-.19-0.17A0.29,0.29,0,0,0,4.26,13.48Z" transform="translate(-0.23 -0.3)"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">github<p>
-        </template>
-    </div>
-</a>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-</template>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-<script>
-    Polymer({
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-    is: 'github-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#333"
-        }
-    }
+                <svg viewBox="0 0 16.73 16.32" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M11.46,16.53a1.53,1.53,0,0,1-.25.08,0.41,0.41,0,0,1-.53-0.44c0-.61,0-1.22,0-1.83a2.6,2.6,0,0,0-.54-2c0.32-.06.6-0.1,0.88-0.16a3.45,3.45,0,0,0,2.9-3.49,3.53,3.53,0,0,0-.76-2.64,0.32,0.32,0,0,1,0-.26,3.21,3.21,0,0,0-.08-1.88,0.24,0.24,0,0,0-.29-0.19,2.91,2.91,0,0,0-1.46.51,1.53,1.53,0,0,1-1.3.23,7.31,7.31,0,0,0-3.29.08,0.6,0.6,0,0,1-.4-0.08A5.23,5.23,0,0,0,4.7,3.79c-0.46-.09-0.5-0.07-0.62.38a3.09,3.09,0,0,0,0,1.68A0.34,0.34,0,0,1,4,6.11C2.8,7.46,3.24,10,4.06,11a3.92,3.92,0,0,0,2.41,1.28L7,12.36c-0.14.36-.27,0.71-0.41,1a0.35,0.35,0,0,1-.19.15,1.71,1.71,0,0,1-2.23-.74A1.74,1.74,0,0,0,3,11.94H2.9L2.47,12a1.17,1.17,0,0,0,.25.33,2.41,2.41,0,0,1,.95,1.18,1.82,1.82,0,0,0,1.68,1.17c0.38,0,.76,0,1.18,0,0,0.47,0,1,0,1.55,0,0.29-.3.4-0.65,0.29a7.56,7.56,0,0,1-2.52-1.4A8,8,0,0,1,.54,6.56,7.94,7.94,0,0,1,7.17.44,8.36,8.36,0,0,1,11.46,16.53ZM7,12.34v0H7ZM4.81,13.85A1.07,1.07,0,0,0,5,14a0.54,0.54,0,0,0,.18-0.13,1.63,1.63,0,0,0-.3-0.11A0.3,0.3,0,0,0,4.81,13.85ZM5.49,14a0.21,0.21,0,0,0,.17.11A0.42,0.42,0,0,0,5.83,14l-0.26-.23A0.6,0.6,0,0,0,5.49,14Zm0.83-.2a0.67,0.67,0,0,0-.19.13l0.14,0.17,0.2-.18A0.34,0.34,0,0,0,6.32,13.76Zm-2.06-.28a1.87,1.87,0,0,0,.18.24,0.7,0.7,0,0,0,.1-0.17,0.92,0.92,0,0,0-.19-0.17A0.29,0.29,0,0,0,4.26,13.48Z"
+                        transform="translate(-0.23 -0.3)" />
+                </svg>
 
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">github
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
+    </template>
+    <script>
+        class GithubLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'github-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#333'
+                    }
+                };
+            }
+        }
+        customElements.define(GithubLink.is, GithubLink);
+    </script>
 </dom-module>
diff --git a/googleplus-link.html b/googleplus-link.html
new file mode 100644
index 0000000..d687e85
--- /dev/null
+++ b/googleplus-link.html
@@ -0,0 +1,72 @@
+<link rel="import" href="../polymer/polymer-element.html">
+<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="social-link-behavior.html">
+<!--
+`googleplus-link`
+Sample usage of this element
+Example:
+    <googleplus-link></googleplus-link>
+Example:
+    <googleplus-link>
+      <h2>Hello googleplus-link</h2>
+   </googleplus-link>
+@demo demo/index.html
+-->
+<dom-module id="googleplus-link">
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
+
+            a {
+                text-decoration: none;
+                color: black;
+            }
+
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
+
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
+
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
+
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
+
+                <svg viewBox="0 0 52 52" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path class="515a544b-2ee6-4052-8329-f9002443fb0f" d="M52.218,25.852h-7.512v-7.51c0-0.573-0.465-1.039-1.037-1.039H41.53c-0.576,0-1.041,0.466-1.041,1.039v7.51h-7.512   c-0.572,0-1.039,0.467-1.039,1.041v2.139c0,0.574,0.467,1.039,1.039,1.039h7.512v7.514c0,0.574,0.465,1.039,1.041,1.039h2.139   c0.572,0,1.037-0.465,1.037-1.039V30.07h7.512c0.572,0,1.039-0.465,1.039-1.039v-2.139C53.257,26.318,52.79,25.852,52.218,25.852z M26.974,32.438c-1.58-1.119-3.016-2.76-3.041-3.264c0-0.918,0.082-1.357,2.141-2.961c2.662-2.084,4.128-4.824,4.128-7.719   c0-2.625-0.802-4.957-2.167-6.595h1.059c0.219,0,0.434-0.068,0.609-0.196l2.955-2.141c0.367-0.263,0.521-0.732,0.381-1.161   c-0.141-0.428-0.537-0.72-0.988-0.72H18.835c-1.446,0-2.915,0.255-4.357,0.751c-4.816,1.661-8.184,5.765-8.184,9.978   c0,5.969,4.624,10.493,10.805,10.635c-0.121,0.473-0.182,0.939-0.182,1.396c0,0.92,0.233,1.791,0.713,2.633c-0.056,0-0.11,0-0.17,0   c-5.892,0-11.21,2.891-13.229,7.193c-0.526,1.119-0.794,2.25-0.794,3.367c0,1.086,0.279,2.131,0.826,3.113   c1.269,2.27,3.994,4.031,7.677,4.961c1.901,0.48,3.944,0.725,6.065,0.725c1.906,0,3.723-0.246,5.403-0.732   c5.238-1.521,8.625-5.377,8.625-9.828C32.032,37.602,30.659,35.045,26.974,32.438z M10.283,42.215c0-3.107,3.947-5.832,8.446-5.832   h0.121c0.979,0.012,1.934,0.156,2.834,0.432c0.309,0.213,0.607,0.416,0.893,0.611c2.084,1.42,3.461,2.357,3.844,3.861   c0.09,0.379,0.135,0.758,0.135,1.125c0,3.869-2.885,5.83-8.578,5.83C13.663,48.242,10.283,45.596,10.283,42.215z M14.377,12.858   c0.703-0.803,1.624-1.227,2.658-1.227l0.117,0.002c2.921,0.086,5.716,3.341,6.23,7.256c0.289,2.192-0.199,4.253-1.301,5.509   c-0.705,0.805-1.613,1.229-2.689,1.229c0,0,0,0-0.002,0h-0.047c-2.861-0.088-5.716-3.467-6.227-7.377   C12.829,16.064,13.289,14.099,14.377,12.858z"
+                        transform="translate(-0.36 -0.55)" />
+                </svg>
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Google Plus
+                        <p>
+                </template>
+            </div>
+        </a>
+    </template>
+    <script>
+        class GoogleplusLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'googleplus-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: 'red'
+                    }
+                };
+            }
+        }
+        customElements.define(GoogleplusLink.is, GoogleplusLink);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/instagram-link.html b/instagram-link.html
index 4d1957b..eaea5a6 100644
--- a/instagram-link.html
+++ b/instagram-link.html
@@ -1,67 +1,76 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `instagram-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <instagram-link></instagram-link>
+Example:
+    <instagram-link>
+      <h2>Hello instagram-link</h2>
+   </instagram-link>
+@demo demo/index.html
 -->
-
 <dom-module id="instagram-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
-
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-        <svg viewBox="0 0 16.47 16.47" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path d="M12.21,0.27H4.83A4.55,4.55,0,0,0,.28,4.82V12.2a4.55,4.55,0,0,0,4.54,4.55h7.38a4.55,4.55,0,0,0,4.55-4.55V4.82A4.55,4.55,0,0,0,12.21.27ZM15.29,12.2a3.09,3.09,0,0,1-3.08,3.08H4.83A3.09,3.09,0,0,1,1.75,12.2V4.82A3.09,3.09,0,0,1,4.83,1.73h7.38a3.09,3.09,0,0,1,3.08,3.08V12.2h0Z" transform="translate(-0.28 -0.27)"/><path d="M8.52,4.26a4.24,4.24,0,1,0,4.24,4.24A4.25,4.25,0,0,0,8.52,4.26Zm0,7A2.78,2.78,0,1,1,11.3,8.51,2.79,2.79,0,0,1,8.52,11.29Z" transform="translate(-0.28 -0.27)"/><path d="M12.94,3a1.07,1.07,0,1,0,.76.31A1.08,1.08,0,0,0,12.94,3Z" transform="translate(-0.28 -0.27)"/></svg>
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">instagram<p>
-        </template>
-    </div>
-</a>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-</template>
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-<script>
-    Polymer({
+                <svg viewBox="0 0 16.47 16.47" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M12.21,0.27H4.83A4.55,4.55,0,0,0,.28,4.82V12.2a4.55,4.55,0,0,0,4.54,4.55h7.38a4.55,4.55,0,0,0,4.55-4.55V4.82A4.55,4.55,0,0,0,12.21.27ZM15.29,12.2a3.09,3.09,0,0,1-3.08,3.08H4.83A3.09,3.09,0,0,1,1.75,12.2V4.82A3.09,3.09,0,0,1,4.83,1.73h7.38a3.09,3.09,0,0,1,3.08,3.08V12.2h0Z"
+                        transform="translate(-0.28 -0.27)" />
+                    <path d="M8.52,4.26a4.24,4.24,0,1,0,4.24,4.24A4.25,4.25,0,0,0,8.52,4.26Zm0,7A2.78,2.78,0,1,1,11.3,8.51,2.79,2.79,0,0,1,8.52,11.29Z"
+                        transform="translate(-0.28 -0.27)" />
+                    <path d="M12.94,3a1.07,1.07,0,1,0,.76.31A1.08,1.08,0,0,0,12.94,3Z" transform="translate(-0.28 -0.27)" />
+                </svg>
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">instagram
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    is: 'instagram-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "black"
+    </template>
+    <script>
+        class InstagramLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'instagram-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: 'black'
+                    }
+                };
+            }
         }
-    }
-
-
-    });
-</script>
-</dom-module>
+        customElements.define(InstagramLink.is, InstagramLink);
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/linkedin-link.html b/linkedin-link.html
index 6c5db1b..a1e9af1 100644
--- a/linkedin-link.html
+++ b/linkedin-link.html
@@ -1,64 +1,74 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `linkedin-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <linkedin-link></linkedin-link>
+Example:
+    <linkedin-link>
+      <h2>Hello linkedin-link</h2>
+   </linkedin-link>
+@demo demo/index.html
 -->
-
 <dom-module id="linkedin-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
-        <svg viewBox="0 0 16.91 16.16" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path id="LinkedIn" d="M17.19,10.24v6.18H13.61V10.65c0-1.45-.52-2.44-1.81-2.44A2,2,0,0,0,10,9.53a2.45,2.45,0,0,0-.12.87v6H6.26s0-9.76,0-10.77H9.84V7.17l0,0h0v0a3.56,3.56,0,0,1,3.23-1.78C15.42,5.39,17.19,6.93,17.19,10.24ZM2.51,0.45a1.87,1.87,0,1,0,0,3.72h0A1.87,1.87,0,1,0,2.51.45Zm-1.81,16H4.28V5.64H0.69V16.42Z" transform="translate(-0.38 -0.35)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"/>
-        </svg>
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Linked In<p>
-        </template>
-    </div>
-</a>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-</template>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-<script>
-    Polymer({
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-    is: 'linkedin-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#0077b5"
-        }
-    }
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
+                <svg viewBox="0 0 16.91 16.16" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path id="LinkedIn" d="M17.19,10.24v6.18H13.61V10.65c0-1.45-.52-2.44-1.81-2.44A2,2,0,0,0,10,9.53a2.45,2.45,0,0,0-.12.87v6H6.26s0-9.76,0-10.77H9.84V7.17l0,0h0v0a3.56,3.56,0,0,1,3.23-1.78C15.42,5.39,17.19,6.93,17.19,10.24ZM2.51,0.45a1.87,1.87,0,1,0,0,3.72h0A1.87,1.87,0,1,0,2.51.45Zm-1.81,16H4.28V5.64H0.69V16.42Z"
+                        transform="translate(-0.38 -0.35)" style="stroke:#000;stroke-miterlimit:10;stroke-width:0.20000000298023224px"
+                    />
+                </svg>
 
-    });
-</script>
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Linked In
+                        <p>
+                </template>
+            </div>
+        </a>
+
+    </template>
+    <script>
+        class LinkedLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'linkedin-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#0077b5'
+                    }
+                };
+            }
+        }
+        customElements.define(LinkedLink.is, LinkedLink);
+    </script>
 </dom-module>
diff --git a/pinterest-link.html b/pinterest-link.html
index 4462307..67c7e6f 100644
--- a/pinterest-link.html
+++ b/pinterest-link.html
@@ -1,67 +1,84 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `pinterest-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <pinterest-link></pinterest-link>
+Example:
+    <pinterest-link>
+      <h2>Hello pinterest-link</h2>
+   </pinterest-link>
+@demo demo/index.html
 -->
-
 <dom-module id="pinterest-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 16.36 16.36" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path id="Path" d="M4.3,1A6.06,6.06,0,0,0,.37,5.56a6.67,6.67,0,0,0,.43,4,4.46,4.46,0,0,0,.47.79,3.7,3.7,0,0,0,.29.34,3.43,3.43,0,0,0,.54-0.25A12.35,12.35,0,0,0,4,8.92c-2-2.36.12-5.28,2.82-5.93,2.51-.61,5.92.44,6.68,3a2.89,2.89,0,0,1-.76,3A3.38,3.38,0,0,1,11,9.82a4,4,0,0,1-1.09,0,4.63,4.63,0,0,1-.6-0.1C9,9.68,8.72,9.69,8.72,9.33V5.09c0-.29,0-0.23-0.21-0.26L7.94,4.77a8.26,8.26,0,0,0-2,0c-0.25,0-.26,0-0.26.27V7.3c0,1.58.12,3.18,0.05,4.75,0,0.47,0,1.6-.56,1.83S4,13.59,3.44,13.47c0.08,0.79-.42,2.36.5,2.76a3.8,3.8,0,0,0,2.71.2c1.87-.63,2.47-2.71,2.24-4.42a6.14,6.14,0,0,0,7.23-3.18,5.46,5.46,0,0,0-.81-5.73C12.83,0.13,7.8-.43,4.3,1Z" transform="translate(-0.24 -0.23)"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">pinterest<p>
-        </template>
-    </div>
-</a>
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-</template>
+                <svg viewBox="0 0 16.36 16.36" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path id="Path" d="M4.3,1A6.06,6.06,0,0,0,.37,5.56a6.67,6.67,0,0,0,.43,4,4.46,4.46,0,0,0,.47.79,3.7,3.7,0,0,0,.29.34,3.43,3.43,0,0,0,.54-0.25A12.35,12.35,0,0,0,4,8.92c-2-2.36.12-5.28,2.82-5.93,2.51-.61,5.92.44,6.68,3a2.89,2.89,0,0,1-.76,3A3.38,3.38,0,0,1,11,9.82a4,4,0,0,1-1.09,0,4.63,4.63,0,0,1-.6-0.1C9,9.68,8.72,9.69,8.72,9.33V5.09c0-.29,0-0.23-0.21-0.26L7.94,4.77a8.26,8.26,0,0,0-2,0c-0.25,0-.26,0-0.26.27V7.3c0,1.58.12,3.18,0.05,4.75,0,0.47,0,1.6-.56,1.83S4,13.59,3.44,13.47c0.08,0.79-.42,2.36.5,2.76a3.8,3.8,0,0,0,2.71.2c1.87-.63,2.47-2.71,2.24-4.42a6.14,6.14,0,0,0,7.23-3.18,5.46,5.46,0,0,0-.81-5.73C12.83,0.13,7.8-.43,4.3,1Z"
+                        transform="translate(-0.24 -0.23)" />
+                </svg>
 
-<script>
-    Polymer({
 
-    is: 'pinterest-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#bd081c"
-        }
-    }
 
-    });
-</script>
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">pinterest
+                        <p>
+                </template>
+            </div>
+        </a>
+
+    </template>
+    <script>
+        class PinterestLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'pinterest-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#3b5998'
+                    }
+                };
+            }
+            //static get observers() {return [];}
+            //static get actions() {return MixinActions();}
+            connectedCallback() {
+                super.connectedCallback();
+            }
+            ready() {
+                super.ready();
+            }
+        }
+        customElements.define(PinterestLink.is, PinterestLink);
+    </script>
 </dom-module>
diff --git a/skype-link.html b/skype-link.html
index eea7227..d5480af 100644
--- a/skype-link.html
+++ b/skype-link.html
@@ -1,66 +1,76 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `skype-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <skype-link></skype-link>
+Example:
+    <skype-link>
+      <h2>Hello skype-link</h2>
+   </skype-link>
+@demo demo/index.html
 -->
-
 <dom-module id="skype-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-    <svg viewBox="0 0 16.28 16.28" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path id="Skype" d="M15.82,9.62A7.55,7.55,0,0,0,8.36.88,7.63,7.63,0,0,0,7.18,1,4.57,4.57,0,0,0,.9,7.26,7.69,7.69,0,0,0,.81,8.44,7.56,7.56,0,0,0,9.54,15.9,4.57,4.57,0,0,0,15.82,9.62Zm-3.87,2.26A3.13,3.13,0,0,1,10.55,13a5.59,5.59,0,0,1-2.18.39,5.21,5.21,0,0,1-2.5-.53,3.23,3.23,0,0,1-1.14-1,2.22,2.22,0,0,1-.44-1.25,0.83,0.83,0,0,1,.27-0.62,1,1,0,0,1,.69-0.26,0.86,0.86,0,0,1,.57.2,1.53,1.53,0,0,1,.39.58,3.68,3.68,0,0,0,.41.74,1.64,1.64,0,0,0,.62.49,2.45,2.45,0,0,0,1.06.19,2.53,2.53,0,0,0,1.46-.39,1.13,1.13,0,0,0,.56-1A1,1,0,0,0,10,9.79a2,2,0,0,0-.78-0.44Q8.77,9.2,7.95,9a10.2,10.2,0,0,1-1.84-.56,3,3,0,0,1-1.18-.88A2.18,2.18,0,0,1,4.49,6.2,2.26,2.26,0,0,1,5,4.8a2.89,2.89,0,0,1,1.34-.94,5.82,5.82,0,0,1,2-.33A5.44,5.44,0,0,1,10,3.75a3.57,3.57,0,0,1,1.14.58,2.47,2.47,0,0,1,.67.76,1.66,1.66,0,0,1,.21.78,0.91,0.91,0,0,1-.27.64,0.89,0.89,0,0,1-.67.28,0.81,0.81,0,0,1-.56-0.17,2.22,2.22,0,0,1-.41-0.55,2.42,2.42,0,0,0-.66-0.82A2,2,0,0,0,8.2,5a2.26,2.26,0,0,0-1.26.32A0.9,0.9,0,0,0,6.46,6a0.72,0.72,0,0,0,.16.47,1.34,1.34,0,0,0,.45.34,3.1,3.1,0,0,0,.58.23l1,0.24q0.86,0.18,1.56.41a4.89,4.89,0,0,1,1.19.55,2.32,2.32,0,0,1,.77.82,2.47,2.47,0,0,1,.28,1.22A2.65,2.65,0,0,1,11.95,11.87Z" transform="translate(-0.22 -0.3)"/>
-    </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Skype<p>
-        </template>
-    </div>
-</a>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-</template>
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-<script>
-    Polymer({
+                <svg viewBox="0 0 16.28 16.28" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path id="Skype" d="M15.82,9.62A7.55,7.55,0,0,0,8.36.88,7.63,7.63,0,0,0,7.18,1,4.57,4.57,0,0,0,.9,7.26,7.69,7.69,0,0,0,.81,8.44,7.56,7.56,0,0,0,9.54,15.9,4.57,4.57,0,0,0,15.82,9.62Zm-3.87,2.26A3.13,3.13,0,0,1,10.55,13a5.59,5.59,0,0,1-2.18.39,5.21,5.21,0,0,1-2.5-.53,3.23,3.23,0,0,1-1.14-1,2.22,2.22,0,0,1-.44-1.25,0.83,0.83,0,0,1,.27-0.62,1,1,0,0,1,.69-0.26,0.86,0.86,0,0,1,.57.2,1.53,1.53,0,0,1,.39.58,3.68,3.68,0,0,0,.41.74,1.64,1.64,0,0,0,.62.49,2.45,2.45,0,0,0,1.06.19,2.53,2.53,0,0,0,1.46-.39,1.13,1.13,0,0,0,.56-1A1,1,0,0,0,10,9.79a2,2,0,0,0-.78-0.44Q8.77,9.2,7.95,9a10.2,10.2,0,0,1-1.84-.56,3,3,0,0,1-1.18-.88A2.18,2.18,0,0,1,4.49,6.2,2.26,2.26,0,0,1,5,4.8a2.89,2.89,0,0,1,1.34-.94,5.82,5.82,0,0,1,2-.33A5.44,5.44,0,0,1,10,3.75a3.57,3.57,0,0,1,1.14.58,2.47,2.47,0,0,1,.67.76,1.66,1.66,0,0,1,.21.78,0.91,0.91,0,0,1-.27.64,0.89,0.89,0,0,1-.67.28,0.81,0.81,0,0,1-.56-0.17,2.22,2.22,0,0,1-.41-0.55,2.42,2.42,0,0,0-.66-0.82A2,2,0,0,0,8.2,5a2.26,2.26,0,0,0-1.26.32A0.9,0.9,0,0,0,6.46,6a0.72,0.72,0,0,0,.16.47,1.34,1.34,0,0,0,.45.34,3.1,3.1,0,0,0,.58.23l1,0.24q0.86,0.18,1.56.41a4.89,4.89,0,0,1,1.19.55,2.32,2.32,0,0,1,.77.82,2.47,2.47,0,0,1,.28,1.22A2.65,2.65,0,0,1,11.95,11.87Z"
+                        transform="translate(-0.22 -0.3)" />
+                </svg>
 
-    is: 'skype-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#00aff0"
-        }
-    }
 
-    });
-</script>
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Skype
+                        <p>
+                </template>
+            </div>
+        </a>
+
+    </template>
+
+    <script>
+        class SkypeLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'skype-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#00aff0'
+                    }
+                };
+            }           
+        }
+        customElements.define(SkypeLink.is, SkypeLink);
+    </script>
 </dom-module>
diff --git a/snapchat-link.html b/snapchat-link.html
index d5286ff..58b1f2f 100644
--- a/snapchat-link.html
+++ b/snapchat-link.html
@@ -1,66 +1,75 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `snapchat-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <snapchat-link></snapchat-link>
+Example:
+    <snapchat-link>
+      <h2>Hello snapchat-link</h2>
+   </snapchat-link>
+@demo demo/index.html
 -->
-
 <dom-module id="snapchat-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 17.26 16.11" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path d="M17.07,12.62A4.78,4.78,0,0,1,13.8,9.81v0a0.66,0.66,0,0,1-.08-0.53,1.52,1.52,0,0,1,.91-0.52l0.23-.08a1.15,1.15,0,0,0,.93-0.94A0.81,0.81,0,0,0,15.2,7a1.06,1.06,0,0,0-.4-0.08,0.9,0.9,0,0,0-.37.08,1.9,1.9,0,0,1-.68.2,0.65,0.65,0,0,1-.18,0l0-.29V6.84a8.6,8.6,0,0,0-.22-3.51A4.66,4.66,0,0,0,9,.54H8.69A4.66,4.66,0,0,0,4.36,3.33a8.59,8.59,0,0,0-.22,3.51l0,0.34a0.67,0.67,0,0,1-.22,0A1.81,1.81,0,0,1,3.2,7a1,1,0,0,0-1.26.59c-0.05.29,0.06,0.7,0.92,1L3.12,8.73A1.5,1.5,0,0,1,4,9.25a0.69,0.69,0,0,1-.09.56,4.91,4.91,0,0,1-3.33,2.8,0.46,0.46,0,0,0-.39.48,0.59,0.59,0,0,0,0,.2c0.19,0.44.91,0.75,2.28,1a2.86,2.86,0,0,1,.08.33c0,0.13.06,0.27,0.1,0.41a0.5,0.5,0,0,0,.52.38,2.31,2.31,0,0,0,.41-0.06,4.38,4.38,0,0,1,.89-0.1,3.91,3.91,0,0,1,.63.05,3,3,0,0,1,1.18.61,3.45,3.45,0,0,0,2.28.76H8.83a4.32,4.32,0,0,0,2.55-.76,3.06,3.06,0,0,1,1.18-.61,3.93,3.93,0,0,1,.64-0.05,4.42,4.42,0,0,1,.89.09,2.2,2.2,0,0,0,.43,0A0.49,0.49,0,0,0,15,15c0-.14.07-0.27,0.1-0.41a2.94,2.94,0,0,1,.08-0.33c1.34-.21,2-0.51,2.22-1a0.59,0.59,0,0,0,0-.2A0.47,0.47,0,0,0,17.07,12.62Z" transform="translate(-0.2 -0.54)"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Snapchat<p>
-        </template>
-    </div>
-</a>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-</template>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-<script>
-    Polymer({
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-    is: 'snapchat-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#fffc00"
-        }
-    }
+                <svg viewBox="0 0 17.26 16.11" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M17.07,12.62A4.78,4.78,0,0,1,13.8,9.81v0a0.66,0.66,0,0,1-.08-0.53,1.52,1.52,0,0,1,.91-0.52l0.23-.08a1.15,1.15,0,0,0,.93-0.94A0.81,0.81,0,0,0,15.2,7a1.06,1.06,0,0,0-.4-0.08,0.9,0.9,0,0,0-.37.08,1.9,1.9,0,0,1-.68.2,0.65,0.65,0,0,1-.18,0l0-.29V6.84a8.6,8.6,0,0,0-.22-3.51A4.66,4.66,0,0,0,9,.54H8.69A4.66,4.66,0,0,0,4.36,3.33a8.59,8.59,0,0,0-.22,3.51l0,0.34a0.67,0.67,0,0,1-.22,0A1.81,1.81,0,0,1,3.2,7a1,1,0,0,0-1.26.59c-0.05.29,0.06,0.7,0.92,1L3.12,8.73A1.5,1.5,0,0,1,4,9.25a0.69,0.69,0,0,1-.09.56,4.91,4.91,0,0,1-3.33,2.8,0.46,0.46,0,0,0-.39.48,0.59,0.59,0,0,0,0,.2c0.19,0.44.91,0.75,2.28,1a2.86,2.86,0,0,1,.08.33c0,0.13.06,0.27,0.1,0.41a0.5,0.5,0,0,0,.52.38,2.31,2.31,0,0,0,.41-0.06,4.38,4.38,0,0,1,.89-0.1,3.91,3.91,0,0,1,.63.05,3,3,0,0,1,1.18.61,3.45,3.45,0,0,0,2.28.76H8.83a4.32,4.32,0,0,0,2.55-.76,3.06,3.06,0,0,1,1.18-.61,3.93,3.93,0,0,1,.64-0.05,4.42,4.42,0,0,1,.89.09,2.2,2.2,0,0,0,.43,0A0.49,0.49,0,0,0,15,15c0-.14.07-0.27,0.1-0.41a2.94,2.94,0,0,1,.08-0.33c1.34-.21,2-0.51,2.22-1a0.59,0.59,0,0,0,0-.2A0.47,0.47,0,0,0,17.07,12.62Z"
+                        transform="translate(-0.2 -0.54)" />
+                </svg>
 
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Snapchat
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
+    </template>
+
+    <script>
+        class SnapchatLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'snapchat-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#fffc00'
+                    }
+                };
+            }
+        }
+        customElements.define(SnapchatLink.is, SnapchatLink);
+    </script>
 </dom-module>
diff --git a/social-link-behavior.html b/social-link-behavior.html
index 4b4211e..0f521f6 100644
--- a/social-link-behavior.html
+++ b/social-link-behavior.html
@@ -1,4 +1,4 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <script>
     SocialLinkBehavior = {
         properties: {
diff --git a/social-link.html b/social-link.html
index 685f690..e2897e0 100644
--- a/social-link.html
+++ b/social-link.html
@@ -1,85 +1,84 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 
 <link rel="import" href="social-link-behavior.html">
 <link rel="import" href="social-links.html">
-
-
 <!--
 `social-link`
-@demo demo/index.html 
+Example:
+    <social-link></social-link>
+Example:
+    <social-link>
+      <h2>Hello social-link</h2>
+   </social-link>
+@demo demo/index.html
 -->
-
 <dom-module id="social-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
+        </style>
 
-    <template is="dom-if" if="{{_isNetwork(network,'twitter')}}">
-        <twitter-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></twitter-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'facebook')}}">
-        <facebook-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></facebook-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'linkedin')}}">
-        <linkedin-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></linkedin-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'email')}}">
-        <email-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></email-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'behance')}}">
-        <behance-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></behance-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'youtube')}}">
-        <youtube-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></youtube-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'skype')}}">
-        <skype-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></skype-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'vimeo')}}">
-        <vimeo-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></vimeo-link>
+        <template is="dom-if" if="{{_isNetwork(network,'twitter')}}">
+            <twitter-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></twitter-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'facebook')}}">
+            <facebook-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></facebook-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'linkedin')}}">
+            <linkedin-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></linkedin-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'email')}}">
+            <email-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></email-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'behance')}}">
+            <behance-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></behance-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'youtube')}}">
+            <youtube-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></youtube-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'skype')}}">
+            <skype-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></skype-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'vimeo')}}">
+            <vimeo-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></vimeo-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'pinterest')}}">
+            <pinterest-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></pinterest-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'github')}}">
+            <github-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></github-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'instagram')}}">
+            <instagram-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></instagram-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'dribbble')}}">
+            <dribbble-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></dribbble-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'convoo')}}">
+            <convoo-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></convoo-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'snapchat')}}">
+            <snapchat-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></snapchat-link>
+        </template>
+        <template is="dom-if" if="{{_isNetwork(network,'googleplus')}}">
+            <googleplus-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></googleplus-link>
+        </template>
     </template>
-    <template is="dom-if" if="{{_isNetwork(network,'pinterest')}}">
-        <pinterest-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></pinterest-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'github')}}">
-        <github-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></github-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'instagram')}}">
-        <instagram-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></instagram-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'dribbble')}}">
-        <dribbble-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></dribbble-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'convoo')}}">
-        <convoo-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></convoo-link>
-    </template>
-    <template is="dom-if" if="{{_isNetwork(network,'snapchat')}}">
-        <snapchat-link href="[[href]]" text="[[text]]" color="[[color]]" height="[[height]]"></snapchat-link>
-    </template>
-    
-</template>
-
-<script>
-    Polymer({
-
-    is: 'social-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
+    <script>
+        class SocialLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'social-link'; }
+            static get properties() {
+                return {
+                    network: String
+                };
+            }
 
-    properties: {
-        network: {
-            type: String
+            _isNetwork(thisNetwork, network) {
+                return thisNetwork == network;
+            }
         }
-    },
-
-    _isNetwork: function(thisNetwork,network){
-        return thisNetwork == network;
-    }
-
-    });
-</script>
+        customElements.define(SocialLink.is, SocialLink);
+    </script>
 </dom-module>
diff --git a/social-links.html b/social-links.html
index dab5d2b..8f00824 100644
--- a/social-links.html
+++ b/social-links.html
@@ -11,4 +11,5 @@
 <link rel="import" href="instagram-link.html">
 <link rel="import" href="dribbble-link.html">
 <link rel="import" href="convoo-link.html">
-<link rel="import" href="snapchat-link.html">
\ No newline at end of file
+<link rel="import" href="snapchat-link.html">
+<link rel="import" href="googleplus-link.html">
\ No newline at end of file
diff --git a/twitter-link.html b/twitter-link.html
index f1822b3..5728808 100644
--- a/twitter-link.html
+++ b/twitter-link.html
@@ -1,65 +1,81 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `twitter-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <twitter-link></twitter-link>
+Example:
+    <twitter-link>
+      <h2>Hello twitter-link</h2>
+   </twitter-link>
+@demo demo/index.html
 -->
-
 <dom-module id="twitter-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 20.34 16.17" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path class="515a544b-2ee6-4052-8329-f9002443fb0f" d="M7,16.61A11.39,11.39,0,0,0,18.43,5.14q0-.26,0-0.52a8.2,8.2,0,0,0,2-2.09,8,8,0,0,1-2.31.63A4,4,0,0,0,19.89.94a8.08,8.08,0,0,1-2.56,1,4,4,0,0,0-6.87,3.68A11.44,11.44,0,0,1,2.15,1.38,4,4,0,0,0,3.4,6.76a4,4,0,0,1-1.83-.5s0,0,0,.05a4,4,0,0,0,3.23,4A4,4,0,0,1,3,10.33a4,4,0,0,0,3.77,2.8,8.09,8.09,0,0,1-5,1.73,8.19,8.19,0,0,1-1-.06A11.41,11.41,0,0,0,7,16.61" transform="translate(-0.36 -0.55)"/>
-        </svg>
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Twitter<p>
-        </template>
-    </div>
-</a>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-</template>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-<script>
-    Polymer({
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-    is: 'twitter-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#1da1f2"
-        }
-    }
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
+                <svg viewBox="0 0 20.34 16.17" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path class="515a544b-2ee6-4052-8329-f9002443fb0f" d="M7,16.61A11.39,11.39,0,0,0,18.43,5.14q0-.26,0-0.52a8.2,8.2,0,0,0,2-2.09,8,8,0,0,1-2.31.63A4,4,0,0,0,19.89.94a8.08,8.08,0,0,1-2.56,1,4,4,0,0,0-6.87,3.68A11.44,11.44,0,0,1,2.15,1.38,4,4,0,0,0,3.4,6.76a4,4,0,0,1-1.83-.5s0,0,0,.05a4,4,0,0,0,3.23,4A4,4,0,0,1,3,10.33a4,4,0,0,0,3.77,2.8,8.09,8.09,0,0,1-5,1.73,8.19,8.19,0,0,1-1-.06A11.41,11.41,0,0,0,7,16.61"
+                        transform="translate(-0.36 -0.55)" />
+                </svg>
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Twitter
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
+    </template>
+    <script>
+        class TwitterLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'twitter-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#1da1f2'
+                    }
+                };
+            }
+            //static get observers() {return [];}
+            //static get actions() {return MixinActions();}
+            connectedCallback() {
+                super.connectedCallback();
+            }
+            ready() {
+                super.ready();
+            }
+        }
+        customElements.define(TwitterLink.is, TwitterLink);
+    </script>
 </dom-module>
diff --git a/vimeo-link.html b/vimeo-link.html
index 5b6f863..558317d 100644
--- a/vimeo-link.html
+++ b/vimeo-link.html
@@ -1,67 +1,84 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `vimeo-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <vimeo-link></vimeo-link>
+Example:
+    <vimeo-link>
+      <h2>Hello vimeo-link</h2>
+   </vimeo-link>
+@demo demo/index.html
 -->
-
 <dom-module id="vimeo-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-        <svg viewBox="0 0 18.84 16.33" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-            <path id="Vimeo" d="M16.46,0.25q-3.93-.13-5.32,4.41a3.65,3.65,0,0,1,1.4-.3Q14,4.36,13.8,6a7.33,7.33,0,0,1-1.26,2.84q-1.19,1.87-1.77,1.87-0.76,0-1.4-2.88Q9.15,6.95,8.61,3.47,8.1,0.25,5.91.46a6.22,6.22,0,0,0-2.78,1.7Q1.77,3.38.37,4.61L1.26,5.76a5.85,5.85,0,0,1,1.48-.89q1,0,1.82,3.05,0.76,2.8,1.52,5.6c0.76,2,1.69,3.05,2.78,3.05q2.66,0,6.5-5Q19.08,6.78,19.2,4,19.37,0.33,16.46.25Z" transform="translate(-0.37 -0.24)"/>
-        </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">Vimeo<p>
-        </template>
-    </div>
-</a>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-</template>
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-<script>
-    Polymer({
+                <svg viewBox="0 0 18.84 16.33" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path id="Vimeo" d="M16.46,0.25q-3.93-.13-5.32,4.41a3.65,3.65,0,0,1,1.4-.3Q14,4.36,13.8,6a7.33,7.33,0,0,1-1.26,2.84q-1.19,1.87-1.77,1.87-0.76,0-1.4-2.88Q9.15,6.95,8.61,3.47,8.1,0.25,5.91.46a6.22,6.22,0,0,0-2.78,1.7Q1.77,3.38.37,4.61L1.26,5.76a5.85,5.85,0,0,1,1.48-.89q1,0,1.82,3.05,0.76,2.8,1.52,5.6c0.76,2,1.69,3.05,2.78,3.05q2.66,0,6.5-5Q19.08,6.78,19.2,4,19.37,0.33,16.46.25Z"
+                        transform="translate(-0.37 -0.24)" />
+                </svg>
 
-    is: 'vimeo-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#1ab7ea"
-        }
-    }
 
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">Vimeo
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
+    </template>
+
+    <script>
+        class VimeoLink extends Polymer.mixinBehaviors([SocialLinkBehavior], Polymer.Element) {
+            static get is() { return 'vimeo-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#1ab7ea'
+                    }
+                };
+            }
+            //static get observers() {return [];}
+            //static get actions() {return MixinActions();}
+            connectedCallback() {
+                super.connectedCallback();
+            }
+            ready() {
+                super.ready();
+            }
+        }
+        customElements.define(VimeoLink.is, VimeoLink);
+    </script>
 </dom-module>
diff --git a/youtube-link.html b/youtube-link.html
index 4e8abe4..85ee756 100644
--- a/youtube-link.html
+++ b/youtube-link.html
@@ -1,66 +1,74 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="social-link-behavior.html">
-
 <!--
 `youtube-link`
-@demo demo/index.html 
+Sample usage of this element
+Example:
+    <youtube-link></youtube-link>
+Example:
+    <youtube-link>
+      <h2>Hello youtube-link</h2>
+   </youtube-link>
+@demo demo/index.html
 -->
-
 <dom-module id="youtube-link">
-<template>
-    <style>
-    :host {
-        display: inline-block;
-    }
-    a{
-        text-decoration: none;
-        color: black;
-    }
-        a:hover{
-        text-decoration: underline;
-        color: black;
-    }
-    .container {
-        cursor: hand;
-        cursor: pointer;
-        @apply(--layout-horizontal);
-    }
-    p {
-        margin: 0px 0px 0px 5px;
-        @apply(--layout-flex-none)
-    }
-    </style>
+    <template>
+        <style>
+             :host {
+                display: inline-block;
+            }
 
-<a href="{{href}}" target="_blank" style="color:{{color}}">
-    <div class="container">
+            a {
+                text-decoration: none;
+                color: black;
+            }
 
-    <svg  viewBox="0 0 22.74 15.92" style="height:{{height}};fill:{{color}}; padding-left: 15px">
-        <path d="M23,4a3.4,3.4,0,0,0-3.4-3.4H3.69A3.4,3.4,0,0,0,.29,4v9.12a3.4,3.4,0,0,0,3.4,3.4H19.63a3.4,3.4,0,0,0,3.4-3.4V4ZM9.39,12.43V3.87l6.49,4.28Zm0,0" transform="translate(-0.29 -0.63)" style="fill-rule:evenodd"/>
-    </svg>
+            a:hover {
+                text-decoration: underline;
+                color: black;
+            }
 
-        <template is="dom-if" if="{{text}}">
-            <p style="color:{{color}}; font-size: {{height}};">YouTube<p>
-        </template>
-    </div>
-</a>
+            .container {
+                cursor: hand;
+                cursor: pointer;
+                @apply(--layout-horizontal);
+            }
 
-</template>
+            p {
+                margin: 0px 0px 0px 5px;
+                @apply(--layout-flex-none)
+            }
+        </style>
 
-<script>
-    Polymer({
+        <a href="{{href}}" target="_blank" style="color:{{color}}">
+            <div class="container">
 
-    is: 'youtube-link',
-    behaviors: [
-        SocialLinkBehavior
-    ],
-    properties: {
-        color: {
-            value: "#cd201f"
-        }
-    }
+                <svg viewBox="0 0 22.74 15.92" style="height:{{height}};fill:{{color}}; padding-left: 15px">
+                    <path d="M23,4a3.4,3.4,0,0,0-3.4-3.4H3.69A3.4,3.4,0,0,0,.29,4v9.12a3.4,3.4,0,0,0,3.4,3.4H19.63a3.4,3.4,0,0,0,3.4-3.4V4ZM9.39,12.43V3.87l6.49,4.28Zm0,0"
+                        transform="translate(-0.29 -0.63)" style="fill-rule:evenodd" />
+                </svg>
 
+                <template is="dom-if" if="{{text}}">
+                    <p style="color:{{color}}; font-size: {{height}};">YouTube
+                        <p>
+                </template>
+            </div>
+        </a>
 
-    });
-</script>
+    </template>
+    <script>
+        class YoutubeLink extends Polymer.mixinBehaviors([SocialLinkBehavior],Polymer.Element) {
+            static get is() { return 'youtube-link'; }
+            static get properties() {
+                return {
+                    color: {
+                        type: String,
+                        value: '#cd201f'
+                    }
+                };
+            }            
+        }
+        customElements.define(YoutubeLink.is, YoutubeLink);
+    </script>
 </dom-module>