Initial Setup.

sohrabtaee · sohrabtaee · commit 6e54e4308315 · 2019-07-02T14:09:44.000+03:00
diff --git a/README.md b/README.md
@@ -1,28 +1,26 @@
-# &lt;vcf-element&gt;
-
-**Note that this is a starter boilerplate for creating Polymer 3 based components.**
+# &lt;vcf-avatar-item&gt;
 
 ## Installation
 
-Install `vcf-element`:
+Install `vcf-avatar-item`:
 
 ```sh
-npm i @vaadin/vcf-element --save
+npm i @vaadin/vcf-avatar-item --save
 ```
 
 Once installed, import it in your application:
 
 ```js
-import '@vaadin/vcf-element/vcf-element.js';
+import '@vaadin/vcf-avatar-item/vcf-avatar-item.js';
 ```
 
 ## Running demo
 
-1. Fork the `vcf-element` repository and clone it locally.
+1. Fork the `vcf-avatar-item` repository and clone it locally.
 
 1. Make sure you have [npm](https://www.npmjs.com/) installed.
 
-1. When in the `vcf-element` directory, run `npm install` to install dependencies.
+1. When in the `vcf-avatar-item` directory, run `npm install` to install dependencies.
 
 1. Run `npm start` to open the demo.
 
diff --git a/demo/index.html b/demo/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-    <title>vcf-element demo</title>
+    <title>vcf-avatar-item demo</title>
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
     <script type="module">
       import '@polymer/iron-demo-helpers/demo-pages-shared-styles';
       import '@polymer/iron-demo-helpers/demo-snippet';
-      import '../theme/lumo/vcf-element.js';
+      import '../theme/lumo/vcf-avatar-item.js';
     </script>
     <custom-style>
       <style is="custom-style" include="demo-pages-shared-styles"></style>
@@ -18,7 +18,7 @@
     <div class="vertical-section-container">
       <demo-snippet>
         <template>
-          <vcf-element></vcf-element>
+          <vcf-avatar-item></vcf-avatar-item>
         </template>
       </demo-snippet>
     </div>
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="refresh" content="0;url=demo/" />
-    <title>vcf-element</title>
+    <title>vcf-avatar-item</title>
   </head>
   <body>
     <!--
diff --git a/package.json b/package.json
@@ -1,18 +1,19 @@
 {
-  "name": "vcf-element",
+  "name": "vcf-avatar-item",
   "version": "0.1.0",
-  "description": "Hierarchical element visualizing web component",
-  "main": "theme/lumo/vcf-element.js",
+  "description": "Vaadin Component Factory Avatar Item",
+  "main": "theme/lumo/vcf-avatar-item.js",
   "author": "Vaadin Ltd",
   "license": "https://raw.githubusercontent.com/vaadin/vaadin-incubator-element/master/LICENSE",
   "repository": {
     "type": "git",
-    "url": "vaadin-component-factory/vcf-element"
+    "url": "vaadin-component-factory/vcf-avatar-item"
   },
   "keywords": [
     "Vaadin",
     "vaadin-incubator-element",
     "vaadin-component-factory",
+    "vcf-avatar-item",
     "web-components",
     "web-component",
     "polymer"
diff --git a/src/vcf-avatar-item.js b/src/vcf-avatar-item.js
@@ -2,7 +2,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin';
 
-class VcfElement extends ElementMixin(ThemableMixin(PolymerElement)) {
+class VcfAvatarItem extends ElementMixin(ThemableMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -14,7 +14,7 @@ class VcfElement extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 
   static get is() {
-    return 'vcf-element';
+    return 'vcf-avatar-item';
   }
 
   static get version() {
@@ -32,4 +32,4 @@ class VcfElement extends ElementMixin(ThemableMixin(PolymerElement)) {
   }
 }
 
-customElements.define(VcfElement.is, VcfElement);
+customElements.define(VcfAvatarItem.is, VcfAvatarItem);
diff --git a/test/index.html b/test/index.html
@@ -11,7 +11,7 @@
     <script>
       // Load and run all tests (.html, .js):
       WCT.loadSuites([
-        'vcf-element_test.html'
+        'vcf-avatar-item_test.html'
       ]);
     </script>
   </body>
diff --git a/test/vcf-avatar-item_test.html b/test/vcf-avatar-item_test.html
@@ -4,26 +4,26 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 
-    <title>vcf-element test</title>
+    <title>vcf-avatar-item test</title>
 
     <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script>
     <script src="../node_modules/mocha/mocha.js"></script>
     <script src="../node_modules/chai/chai.js"></script>
     <script src="../node_modules/wct-mocha/wct-mocha.js"></script>
 
-    <script type="module" src="../theme/lumo/vcf-element.js"></script>
+    <script type="module" src="../theme/lumo/vcf-avatar-item.js"></script>
   </head>
   <body>
 
     <test-fixture id="BasicTestFixture">
       <template>
-        <vcf-element></vcf-element>
+        <vcf-avatar-item></vcf-avatar-item>
       </template>
     </test-fixture>
 
     <script type="module">
-      suite('vcf-element', () => {
+      suite('vcf-avatar-item', () => {
 
       });
     </script>
diff --git a/theme/lumo/vcf-avatar-item-styles.js b/theme/lumo/vcf-avatar-item-styles.js
@@ -6,8 +6,8 @@ import '@vaadin/vaadin-lumo-styles/style';
 import '@vaadin/vaadin-lumo-styles/typography';
 
 styleModule({
-  themeFor: 'vcf-element',
-  themeName: 'vcf-element-lumo',
+  themeFor: 'vcf-avatar-item',
+  themeName: 'vcf-avatar-item-lumo',
   include: 'lumo-color lumo-typography',
   styles: `
     :host {
diff --git a/theme/lumo/vcf-avatar-item.js b/theme/lumo/vcf-avatar-item.js
@@ -0,0 +1,2 @@
+import './vcf-avatar-item-styles';
+import '../../src/vcf-avatar-item';
diff --git a/theme/lumo/vcf-element.js b/theme/lumo/vcf-element.js

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element';`
`2`	`2`	`import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';`
`3`	`3`	`import { ElementMixin } from '@vaadin/vaadin-element-mixin';`
`4`	`4`
`5`		`-class VcfElement extends ElementMixin(ThemableMixin(PolymerElement)) {`
	`5`	`+class VcfAvatarItem extends ElementMixin(ThemableMixin(PolymerElement)) {`
`6`	`6`	`static get template() {`
`7`	`7`	return html`
`8`	`8`	`<style>`
`@@ -14,7 +14,7 @@ class VcfElement extends ElementMixin(ThemableMixin(PolymerElement)) {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`static get is() {`
`17`		`- return 'vcf-element';`
	`17`	`+ return 'vcf-avatar-item';`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`static get version() {`
`@@ -32,4 +32,4 @@ class VcfElement extends ElementMixin(ThemableMixin(PolymerElement)) {`
`32`	`32`	`}`
`33`	`33`	`}`
`34`	`34`
`35`		`-customElements.define(VcfElement.is, VcfElement);`
	`35`	`+customElements.define(VcfAvatarItem.is, VcfAvatarItem);`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import './vcf-avatar-item-styles';`
	`2`	`+import '../../src/vcf-avatar-item';`