Align with skeleton: use latest vaadin-demo-helpers, improve demos

bower.json

@@ -31,7 +31,7 @@
     "iron-test-helpers": "^2.0.0",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.0.1"
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^2.2.0"
   },
   "dependencies": {
     "polymer": "^2.0.0",

demo/button-a11y-demos.html

@@ -8,7 +8,7 @@
 
     <h3>Accessible Button</h3>
     <p>You can focus the button using the keyboard, and activate it with the <kbd>Enter</kbd> and <kbd>Space</kbd> keys. Notice how the visual active style is also triggered, giving keyboard users clear visual feedback that the button was clicked.</p>
-    <vaadin-demo-snippet id='button-a11y-demos-accessible-label'>
+    <vaadin-demo-snippet id="button-a11y-demos-accessible-label">
       <template preserve-content>
         <vaadin-button>OK</vaadin-button>
       </template>
@@ -17,7 +17,7 @@ <h3>Accessible Button</h3>
 
     <h3>Accessible Icon Button</h3>
     <p>If you only place an icon as the content of the button, you should provide an alternative label for screen reader users by using the standard <code>aria-label</code> attribute.</p>
-    <vaadin-demo-snippet id='button-a11y-demos-accessible-label'>
+    <vaadin-demo-snippet id="button-a11y-demos-accessible-label">
       <template preserve-content>
         <vaadin-button aria-label="Create new">
           <iron-icon icon="lumo:plus"></iron-icon>

demo/button-basic-demos.html

@@ -8,29 +8,32 @@
 
     <h3>Basic Button</h3>
     <p>The <code>&lt;vaadin-button&gt;</code> element works the same as the native <code>&lt;button&gt;</code> element, but offers better styling support and accessibility features.</p>
-    <vaadin-demo-snippet id='button-basic-demos-basic'>
+    <vaadin-demo-snippet id="button-basic-demos-basic" when-defined="vaadin-button">
       <template preserve-content>
-        <vaadin-button id="my-button">Button</vaadin-button>
+        <vaadin-button>Button</vaadin-button>
+        clicked <span>0</span> times.
         <script>
           window.addDemoReadyListener('#button-basic-demos-basic', function(document) {
-            document.querySelector('#my-button').addEventListener('click', function(e) {
-              window.console.log(e.target.id + ' clicked');
+            let i = 0;
+            const button = document.querySelector('vaadin-button');
+            button.addEventListener('click', function() {
+              button.nextElementSibling.textContent = ++i;
             });
           });
         </script>
       </template>
     </vaadin-demo-snippet>
 
     <h3>Disabled</h3>
-    <vaadin-demo-snippet id='button-basic-demos-disabled'>
+    <vaadin-demo-snippet id="button-basic-demos-disabled">
       <template preserve-content>
         <vaadin-button disabled>Disabled</vaadin-button>
       </template>
     </vaadin-demo-snippet>
 
     <h3>Using an Icon</h3>
     <p>Follow these tips when using icons in buttons. Check out the <a href="#button-accessibility-demos">Accessible Icon Button</a> example as well.</p>
-    <vaadin-demo-snippet id='button-basic-demos-icon'>
+    <vaadin-demo-snippet id="button-basic-demos-icon">
       <template preserve-content>
         <!-- Use the "prefix/suffix" slots to place an icon before/after the text label.
              This ensure proper alignment of the icon. -->

demo/button-theme-variants-demos.html

@@ -20,7 +20,7 @@ <h3>Types</h3>
 
     <h3>Colors</h3>
     <p>Use <code>"contrast"</code> if you need increased legibility or a more subdued look. Use <code>"success"</code> for actions that complete a longer sequence of steps, like a checkout flow. Use <code>"error"</code> for actions that can cause permanent data-loss, like deleting content created by the user.</p>
-    <vaadin-demo-snippet id='button-theme-variants-demos-colors'>
+    <vaadin-demo-snippet id="button-theme-variants-demos-colors">
       <template preserve-content>
         <h4>Contrast</h4>
 
@@ -44,7 +44,7 @@ <h4>Error</h4>
 
     <h3>Sizes</h3>
     <p>You can combine the sizes with any other theme variation.</p>
-    <vaadin-demo-snippet id='button-theme-variants-demos-sizes'>
+    <vaadin-demo-snippet id="button-theme-variants-demos-sizes">
       <template preserve-content>
         <vaadin-button theme="large">Large</vaadin-button>
         <vaadin-button>Normal</vaadin-button>
@@ -54,7 +54,7 @@ <h3>Sizes</h3>
 
     <h3>Icon Buttons</h3>
     <p>Icon-only buttons should use the <code>"icon"</code> variation which reduces the width of the button.</p>
-    <vaadin-demo-snippet id='button-theme-variants-demos-icons'>
+    <vaadin-demo-snippet id="button-theme-variants-demos-icons">
       <template preserve-content>
         <!-- Icon in place of label -->
         <vaadin-button theme="icon" aria-label="Add new item">