Initial implementations for avatar, card and tooltip

rolfsmeds · Feb 12, 2018 · 9bed199 · 9bed199
1 parent f4928fd
commit 9bed199
Show file tree

Hide file tree

Showing 8 changed files with 839 additions and 12 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components
+node_modules
diff --git a/LICENSE b/LICENSE
@@ -175,18 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2018 Vaadin Ltd
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

diff --git a/bower.json b/bower.json
@@ -0,0 +1,34 @@
+{
+  "name": "j-elements",
+  "homepage": "https://github.com/jouni/j-elements",
+  "authors": [
+    "Jouni Koivuviita <[email protected]>"
+  ],
+  "description": "Proof-of-concept and prototype web components to fill some gaps in the Vaadin Elements collection",
+  "main": "",
+  "keywords": [
+    "web-components",
+    "vaadin",
+    "elements",
+    "lumo",
+    "polymer"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "polymer": "^2.5.0",
+    "iron-icon": "^2.0.1",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.0.0",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.1.5",
+    "vaadin-overlay": "^2.0.5"
+  },
+  "devDependencies": {
+    "vaadin-button": "^2.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<head>
+  <title>j-elements demo</title>
+  <meta name="viewport" content="width=device-width">
+
+  <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+  <link rel="import" href="../j-avatar.html">
+  <link rel="import" href="../j-card.html">
+  <link rel="import" href="../../vaadin-lumo-styles/typography.html">
+  <link rel="import" href="../../vaadin-lumo-styles/color.html">
+  <link rel="import" href="../../vaadin-lumo-styles/badge.html">
+  <link rel="import" href="../../vaadin-lumo-styles/icons.html">
+  <link rel="import" href="../../vaadin-button/vaadin-button.html">
+
+  <custom-style>
+    <style include="lumo-color lumo-typography lumo-badge">
+      html {
+        background-color: var(--lumo-contrast-10pct);
+      }
+
+      .cards {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+      }
+
+      j-card {
+        max-width: 300px;
+        margin: 1em;
+      }
+    </style>
+  </custom-style>
+</head>
+
+<body>
+
+  <h2>Cards</h2>
+
+  <section class="cards">
+
+    <j-card image="https://placeimg.com/480/320/nature">
+      <div slot="header">Header</div>
+
+      <h6 slot="title">Supertitle</h6>
+      <h3 slot="title">Card title</h3>
+      <h5 slot="title">Subtitle for this card</h5>
+
+      <j-avatar name="User Name" image="https://placeimg.com/80/80/people" slot="title-suffix"></j-avatar>
+
+      <p>Card content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
+      <vaadin-button theme="primary">Action</vaadin-button>
+      <vaadin-button>Action</vaadin-button>
+
+      <div slot="footer">Footer</div>
+    </j-card>
+
+    <j-card image="https://placeimg.com/481/322/nature" theme="image-overlay" image-aspect="0.7">
+      <h6 slot="title">Supertitle</h6>
+      <h3 slot="title">Card title</h3>
+      <h5 slot="title">Subtitle for this card</h5>
+
+      <j-avatar name="User Name" image="https://placeimg.com/79/79/people" slot="title-suffix"></j-avatar>
+
+      <p>Card content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
+      <vaadin-button theme="primary">Action</vaadin-button>
+      <vaadin-button>Action</vaadin-button>
+    </j-card>
+
+    <j-card>
+      <div slot="header">Header</div>
+
+      <h6 slot="title">Supertitle</h6>
+      <h3 slot="title">Long card title that wraps</h3>
+
+      <div slot="title-suffix">
+        <j-avatar-group>
+          <j-avatar name="Manny Calavera" image="https://placeimg.com/81/81/people" theme="small"></j-avatar>
+          <j-avatar name="Guybrush Threepwood" image="https://placeimg.com/82/82/people" theme="small"></j-avatar>
+          <j-avatar name="Bernard" image="https://placeimg.com/83/83/people" theme="small"></j-avatar>
+        </j-avatar-group>
+      </div>
+      <p>Card content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
+      <vaadin-button theme="primary">Action</vaadin-button>
+      <vaadin-button>Action</vaadin-button>
+      <div slot="footer">
+        <span theme="badge error">
+          <iron-icon icon="lumo:bell"></iron-icon>
+          <span>Alarm</span>
+        </span>
+      </div>
+    </j-card>
+
+    <j-card image="https://placeimg.com/480/321/nature">
+      <div slot="header">
+        <span theme="badge primary success">
+          <iron-icon icon="lumo:clock"></iron-icon>
+          <span>Closing soon</span>
+        </span>
+      </div>
+      <h3 slot="title">Card title</h3>
+      <h5 slot="title">Subtitle for this card</h5>
+      <div>
+        <p>Card content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
+      </div>
+      <div slot="footer">
+        <vaadin-button theme="tertiary-inline">Action</vaadin-button>
+        &nbsp;
+        <vaadin-button theme="tertiary-inline">Action</vaadin-button>
+      </div>
+    </j-card>
+
+    <j-card>
+      <div slot="header">Card title</div>
+      <p>Card content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
+      <vaadin-button theme="primary">Action</vaadin-button>
+      <vaadin-button>Action</vaadin-button>
+    </j-card>
+
+    <j-card>
+      <h3 slot="title">Card title</h3>
+      <h5 slot="title">Subtitle for this card</h5>
+      <p>Card content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
+      <vaadin-button theme="primary">Action</vaadin-button>
+      <vaadin-button>Action</vaadin-button>
+    </j-card>
+  </section>
+
+  <h2>Avatar types</h2>
+  Empty:
+  <j-avatar></j-avatar>
+  <br>
+  Name:
+  <j-avatar name="User Name"></j-avatar>
+  <br>
+  Explicit abbreviation:
+  <j-avatar name="User Name" abbr="N"></j-avatar>
+  <br>
+  Image:
+  <j-avatar name="User Name" abbr="N" image="https://placeimg.com/65/65/people"></j-avatar>
+
+
+  <h2>Avatar sizes</h2>
+  <j-avatar theme="x-small" name="X Small"></j-avatar>
+  <j-avatar theme="small" name="Small"></j-avatar>
+  <j-avatar name="Medium"></j-avatar>
+  <j-avatar theme="large" name="Large"></j-avatar>
+  <j-avatar theme="x-large" name="X Large"></j-avatar>
+
+  <h2>Avatar shapes</h2>
+  <j-avatar name="Circle"></j-avatar>
+  <j-avatar theme="rect" name="Rounded rectangle"></j-avatar>
+
+
+  <h2>Avatar group</h2>
+  <j-avatar-group>
+    <j-avatar name="User Name" image="https://placeimg.com/80/80/people"></j-avatar>
+    <j-avatar name="User Name" image="https://placeimg.com/81/81/people"></j-avatar>
+    <j-avatar name="User Name" image="https://placeimg.com/83/83/people"></j-avatar>
+  </j-avatar-group>
+
+</body>