New demos (#48)

* Add theme module in main page, so as its available when demo component loads * Adapting demos to new site * Adapting demos to new site * Adapting demos to new site * Remove styling demos * Formatting eslintrc file * Remove custom button theme * Adding annotations for mixins
vaadin · Sep 19, 2017 · 88ba027 · 88ba027
1 parent 6e38dc9
commit 88ba027
Show file tree

Hide file tree

Showing 9 changed files with 5,200 additions and 867 deletions.
diff --git a/bower.json b/bower.json
@@ -24,16 +24,16 @@
     "wct.conf.js"
   ],
   "devDependencies": {
-    "elements-demo-resources": "^2.0.0",
     "iron-component-page": "^3.0.0",
     "iron-demo-helpers": "^2.0.0",
     "iron-test-helpers": "^2.0.0",
     "webcomponentsjs": "^1.0.0",
-    "web-component-tester": "^6.1.5"
+    "web-component-tester": "^6.1.5",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers"
   },
   "dependencies": {
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^1.0.0",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.1.0"
+    "vaadin-themable-mixin": "^1.2.0"
   }
 }
diff --git a/demo/.eslintrc.json b/demo/.eslintrc.json
@@ -0,0 +1,8 @@
+{
+  "rules": {
+  },
+  "globals": {
+    "ButtonDemo": false,
+    "DemoReadyEventEmitter": false
+  }
+}
diff --git a/demo/button-basic-demos.html b/demo/button-basic-demos.html
@@ -0,0 +1,63 @@
+<dom-module id="button-basic-demos">
+  <template>
+    <style>
+       :host {
+        display: block;
+      }
+
+    </style>
+
+
+    <h3>Default button</h3>
+    <vaadin-demo-snippet id='button-basic-demos-default-button'>
+      <template preserve-content>
+        <vaadin-button onclick="console.log('clicked')">Vaadin Button</vaadin-button>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Button with autofocus</h3>
+    <vaadin-demo-snippet id='button-basic-demos-button-with-autofocus'>
+      <template preserve-content>
+        <vaadin-button autofocus>
+          <img src="vaadin-logo.svg">
+        </vaadin-button>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Button with Accessible Label</h3>
+    <vaadin-demo-snippet id='button-basic-demos-button-with-accessible-label'>
+      <template preserve-content>
+        <vaadin-button aria-label="Click Me">Accessible</vaadin-button>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Buttons with custom tabindex</h3>
+    <vaadin-demo-snippet id='button-basic-demos-buttons-with-custom-tabindex'>
+      <template preserve-content>
+        <vaadin-button tabindex="3">3</vaadin-button>
+        <vaadin-button tabindex="2">2</vaadin-button>
+        <vaadin-button tabindex="1">1</vaadin-button>
+      </template>
+    </vaadin-demo-snippet>
+
+
+    <h3>Disabled button</h3>
+    <vaadin-demo-snippet id='button-basic-demos-disabled-button'>
+      <template preserve-content>
+        <vaadin-button disabled>Disabled</vaadin-button>
+      </template>
+    </vaadin-demo-snippet>
+  </div>
+  </template>
+  <script>
+    class ButtonBasicDemos extends DemoReadyEventEmitter(ButtonDemo(Polymer.Element)) {
+      static get is() {
+        return 'button-basic-demos';
+      }
+    }
+    customElements.define(ButtonBasicDemos.is, ButtonBasicDemos);
+  </script>
+</dom-module>
diff --git a/demo/button-demo.html b/demo/button-demo.html
@@ -0,0 +1,17 @@
+<script>
+  /* @polymerMixin */
+  ButtonDemo = superClass => {
+    return class extends superClass {
+      static get properties() {
+        return {
+        };
+      }
+    };
+  };
+</script>
+
+<script>
+   window.addEventListener('WebComponentsReady', () => {
+     document.body.removeAttribute('unresolved');
+   });
+</script>
diff --git a/demo/common.html b/demo/common.html
diff --git a/demo/demos.json b/demo/demos.json
@@ -0,0 +1,15 @@
+{
+  "name": "Vaadin Button",
+  "pages": [
+  {
+    "name": "Basic Examples",
+    "url": "button-basic-demos",
+    "src": "button-basic-demos.html",
+    "meta": {
+      "title": "vaadin-button Basic Examples",
+      "description": "",
+      "image": ""
+     }
+  }
+  ]
+}
diff --git a/demo/index.html b/demo/index.html
@@ -3,57 +3,28 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-
-  <title>vaadin-button Basic Examples</title>
-
+  <title>vaadin-button Examples</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="common.html">
-</head>
 
-<body unresolved>
-  <div class="vertical-section-container centered">
-
-    <demo-navigation></demo-navigation>
-
-    <h3>Default button</h3>
-    <demo-snippet>
-      <template>
-        <vaadin-button onclick="console.log('clicked')">Vaadin Button</vaadin-button>
-      </template>
-    </demo-snippet>
+  <style>
+    body {
+      font-family: sans-serif;
+    }
+  </style>
+</head>
 
-    <h3>Button with autofocus</h3>
-    <demo-snippet>
-      <template>
-        <vaadin-button autofocus>
-          <img src="vaadin-logo.svg">
-        </vaadin-button>
-      </template>
-    </demo-snippet>
+<body>
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
+  <link rel="import" href="../../vaadin-demo-helpers/vaadin-component-demo.html">
+  <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-snippet.html">
+  <link rel="import" href="../../vaadin-demo-helpers/vaadin-demo-ready-event-emitter.html">
 
-    <h3>Button with Accessible Label</h3>
-    <demo-snippet>
-      <template>
-        <vaadin-button aria-label="Click Me">Accessible</vaadin-button>
-      </template>
-    </demo-snippet>
+  <link rel="import" href="button-demo.html">
 
-    <h3>Buttons with custom tabindex</h3>
-    <demo-snippet>
-      <template>
-        <vaadin-button tabindex="3">3</vaadin-button>
-        <vaadin-button tabindex="2">2</vaadin-button>
-        <vaadin-button tabindex="1">1</vaadin-button>
-      </template>
-    </demo-snippet>
+  <link rel="import" href="../../paper-styles/default-theme.html">
+  <link rel="import" href="../vaadin-button.html">
 
-    <h3>Disabled button</h3>
-    <demo-snippet>
-      <template>
-        <vaadin-button disabled>Disabled</vaadin-button>
-      </template>
-    </demo-snippet>
-  </div>
+  <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
 </body>
 </html>
diff --git a/demo/styling.html b/demo/styling.html