Merge pull request #8 from unicef-polymer/update-to-polymer3

Update to polymer3

.eslintrc.json

@@ -1,7 +1,8 @@
 {
   "extends": ["eslint:recommended", "google"],
   "parserOptions": {
-    "ecmaVersion": 6
+    "ecmaVersion": 6,
+    "sourceType": "module"
   },
   "env": {
     "browser": true

.gitignore

@@ -1,2 +1,3 @@
 /bower_components
 /node_modules
+.idea/

README.md

@@ -1,10 +1,10 @@
 # \<etools-content-panel\>
 
 A simple panel with header to display a collapsible content.
-The header can also have buttons on the right side on the title (slotted content `slot="panel-btns""`, 
+The header can also have buttons on the right side on the title (slotted content `slot="panel-btns""`,
 check first usage example).
 
-![alt tag](etools-content-panel-demo.png)
+![alt tag](https://raw.githubusercontent.com/unicef-polymer/etools-content-panel/HEAD/etools-content-panel-demo.png)
 
 ## Usage
 ```html
@@ -49,34 +49,37 @@ You can use defined variables and mixins to change panel style.
 Custom property | Description | Default
 ----------------|-------------|----------
 `--ecp-header-height` | Header height | `48px`
-`--ecp-header-bg` | Header background color | `#1e86bf`
-`--ecp-header-color` | Header color | `#ffffff`
-`--ecp-header` | Mixin applied to header | `{}`
+`--ecp-header-bg` | Header background color | `#0099ff`
+`--epc-header-color` | Header color | `#ffffff`
+`--epc-header` | Mixin applied to header | `{}`
+`--ecp-title-white-space` | Header title white space | `nowrap`
 `--ecp-toggle-btn` | Mixin applied to expand content button | `{}`
 `--ecp-header-title` | Mixin applied to the header title | `{}`
 `--ecp-header-btns-wrapper` | Mixin appplied to panel header right btns container | `{}`
 `--ecp-content` | Mixin applied to content | `{}`
+`--ecp-content-bg-color` | Content Header color | `#ffffff`
 `--ecp-disabled` | Mixin applied in disabled state | `{}`
 
 ## Install
 ```bash
-$ bower install --save etools-content-panel
+$ npm i --save @unicef-polymer/etools-content-panel
 ```
 
-## Install the Polymer-CLI
+## Linting the code
 
-First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.
+Install local npm packages (run `npm install`)
+Then just run the linting task
 
-## Viewing Your Element
-
-```
-$ polymer serve
+```bash
+$ npm run lint
 ```
 
-## Running Tests
+## Preview element locally
+Install needed dependencies by running: `$ npm install`.
+Make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `$ polymer serve` to serve your element application locally.
 
+## Running Tests
+TODO: improve and add more tests
 ```
 $ polymer test
 ```
-
-Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.