Docs and demos site stub

rolfsmeds · Jul 4, 2018 · 59bdf80 · 59bdf80
1 parent 1d8e6e8
commit 59bdf80
Show file tree

Hide file tree

Showing 9 changed files with 11,725 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
-bower_components
 node_modules
+site/build
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, viewport-fit=cover">
+
+    <title>j-elements docs and demos</title>
+    <meta name="description" content="Documentation and examples for the j-elements project">
+
+    <!-- See https://goo.gl/OOhYW5 -->
+    <link rel="manifest" href="/manifest.json">
+
+    <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
+
+    <script type="module" src="/src/j-site.js"></script>
+  </head>
+  <body>
+    <j-site></j-site>
+  </body>
+</html>
diff --git a/site/manifest.json b/site/manifest.json
@@ -0,0 +1,7 @@
+{
+  "name": "j-elements docs and demos",
+  "short_name": "j-elements docs and demos",
+  "description": "Documentation and examples for the j-elements project",
+  "start_url": "/",
+  "display": "standalone"
+}
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "j-elements-site",
+  "description": "Documentation and examples for the j-elements project",
+  "dependencies": {
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/router": "^0.4.0",
+    "@vaadin/vaadin-checkbox": "^2.2.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "^1.0.0-pre.6",
+    "@vaadin/vaadin-tabs": "^2.1.0-alpha2",
+    "@vaadin/vaadin-text-field": "^2.0.1-pre.2",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "polymer-cli": "^1.7.7"
+  },
+  "devDependencies": {
+    "@webcomponents/webcomponentsjs": "^2.0.0"
+  }
+}
diff --git a/site/polymer.json b/site/polymer.json
@@ -0,0 +1,24 @@
+{
+  "entrypoint": "index.html",
+  "shell": "src/j-site.js",
+  "npm": true,
+  "lint": {
+    "rules": [
+      "polymer-3"
+    ]
+  },
+  "sources": [
+   "src/**/*"
+  ],
+  "extraDependencies": [
+    "manifest.json",
+    "node_modules/@webcomponents/webcomponentsjs/**"
+  ],
+  "builds": [
+    {
+      "name": "bundled",
+      "preset": "es5-bundled" ,
+      "addServiceWorker": false
+    }
+  ]
+}
diff --git a/site/src/avatar-demo.js b/site/src/avatar-demo.js
@@ -0,0 +1,115 @@
+import {JAvatar} from 'j-elements';
+import '@polymer/iron-demo-helpers/demo-snippet';
+
+class Page extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <h1>Avatar</h1>
+
+      <h3>Default avatar</h3>
+      <demo-snippet>
+        <template>
+          <j-avatar></j-avatar>
+        </template>
+      </demo-snippet>
+
+      <h3>Abbreviation</h3>
+      <demo-snippet>
+        <template>
+          <!-- Computed from name -->
+          <j-avatar name="John Doe"></j-avatar>
+
+          <!-- Explicit -->
+          <j-avatar name="John Doe" abbr="J"></j-avatar>
+        </template>
+      </demo-snippet>
+
+      <h3>Image</h3>
+      <demo-snippet>
+        <template>
+          <j-avatar image="https://placeimg.com/80/80/people" name="John Doe"></j-avatar>
+        </template>
+      </demo-snippet>
+
+      <h3>Size</h3>
+      <demo-snippet>
+        <template>
+          <style>
+            j-avatar.small {
+              width: 24px;
+              height: 24px;
+            }
+
+            j-avatar.large {
+              width: 48px;
+              height: 48px;
+            }
+          </style>
+
+          <p>
+            <j-avatar class="small"></j-avatar>
+            <j-avatar></j-avatar>
+            <j-avatar class="large"></j-avatar>
+          </p>
+
+          <p>
+            <j-avatar name="John Doe" class="small"></j-avatar>
+            <j-avatar name="John Doe"></j-avatar>
+            <j-avatar name="John Doe" class="large"></j-avatar>
+          </p>
+
+          <p>
+            <j-avatar image="https://placeimg.com/70/70/people" name="John Doe" class="small"></j-avatar>
+            <j-avatar image="https://placeimg.com/80/80/people" name="John Doe"></j-avatar>
+            <j-avatar image="https://placeimg.com/90/90/people" name="John Doe" class="large"></j-avatar>
+          </p>
+        </template>
+      </demo-snippet>
+
+      <h3>Custom style</h3>
+      <script type="module">
+        import '@vaadin/vaadin-lumo-styles/sizing.js';
+      </script>
+      <demo-snippet>
+        <template>
+          <j-avatar class="custom"></j-avatar>
+          <j-avatar class="lumo"></j-avatar>
+
+          <style>
+            .custom {
+              width: 50px;
+              height: 50px;
+              background: orange;
+              color: black;
+              border-radius: 4px;
+            }
+
+            /*
+              Import the following modules after installing the 'vaadin-lumo-styles'
+              package to use the Lumo CSS properties:
+
+              <script type="module">
+                import '@vaadin/vaadin-lumo-styles/sizing.js';
+                import '@vaadin/vaadin-lumo-styles/style.js';
+                import '@vaadin/vaadin-lumo-styles/color.js';
+                import '@vaadin/vaadin-lumo-styles/typography.js';
+              </script>
+            */
+            .lumo {
+              width: var(--lumo-size-m);
+              height: var(--lumo-size-m);
+              box-shadow: 0 1px 2px 1px var(--lumo-shade-10pct), 0 1px 1px 0 var(--lumo-shade-10pct);
+              background: #FFF linear-gradient(var(--lumo-contrast-40pct), var(--lumo-contrast-50pct));
+              font-family: var(--lumo-font-family);
+              font-size: var(--lumo-size-l);
+              color: var(--lumo-base-color);
+              font-weight: 600;
+            }
+          </style>
+        </template>
+      </demo-snippet>
+    `;
+  }
+}
+
+window.customElements.define('avatar-demo', Page);
diff --git a/site/src/index-page.js b/site/src/index-page.js
@@ -0,0 +1,9 @@
+class Page extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <h1>Index</h1>
+    `;
+  }
+}
+
+window.customElements.define('index-page', Page);
diff --git a/site/src/j-site.js b/site/src/j-site.js
@@ -0,0 +1,52 @@
+import {Router} from '@vaadin/router/dist/vaadin-router.js';
+import '@vaadin/vaadin-tabs';
+import './index-page.js';
+import './avatar-demo.js';
+import {JAppLayout, JPlaceholder} from 'j-elements';
+
+class JSite extends HTMLElement {
+  constructor() {
+    super();
+    this.innerHTML = `
+      <j-app-layout type="top" class="drawer-visible">
+        <h1 slot="brand">j-elements</h1>
+        <j-placeholder slot="menu"></j-placeholder>
+
+        <vaadin-tabs slot="drawer" orientation="vertical">
+          <vaadin-tab><a href="/">Getting started</a></vaadin-tab>
+          <h4>Components</h4>
+          <vaadin-tab><a href="/avatar">Avatar</a></vaadin-tab>
+          <vaadin-tab><a href="/card">Card</a></vaadin-tab>
+          <vaadin-tab><a href="/dialog">Dialog</a></vaadin-tab>
+          <vaadin-tab><a href="/field">Field</a></vaadin-tab>
+          <vaadin-tab><a href="/icon">Icon</a></vaadin-tab>
+          <vaadin-tab><a href="/placeholder">Placeholder</a></vaadin-tab>
+          <vaadin-tab><a href="/tooltip">Tooltip</a></vaadin-tab>
+          <h4>Utilities</h4>
+          <vaadin-tab><a href="/stylable-mixin">Stylable mixin</a></vaadin-tab>
+          <vaadin-tab><a href="/teleporting-element">Teleporting element</a></vaadin-tab>
+        </vaadin-tabs>
+
+        <div class="content"></div>
+      </j-app-layout>
+
+      <style>
+        .content {
+          margin: 0 auto;
+          max-width: 800px;
+        }
+      </style>
+    `;
+  }
+
+  connectedCallback() {
+    const router = new Router(this.querySelector('j-app-layout .content'));
+    router.setRoutes([
+      {path: '/', component: 'index-page'},
+      {path: '/avatar', component: 'avatar-demo'},
+      {path: '/card', component: 'card-demo'}
+    ]);
+  }
+}
+
+window.customElements.define('j-site', JSite);