Skip to content

Commit

Permalink
feat!: convert to Polymer 3, add events type definitions (#119)
Browse files Browse the repository at this point in the history
  • Loading branch information
web-padawan authored Dec 23, 2020
1 parent 0d8b6ca commit cf6ab9c
Show file tree
Hide file tree
Showing 120 changed files with 2,568 additions and 3,105 deletions.
17 changes: 8 additions & 9 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
{
"extends": "vaadin",
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"plugins": ["prettier"],
"env": {
"browser": true,
"node": true,
"es6": true
},
"plugins": [
"html"
],
"globals": {
"Polymer": false,
"Vaadin": false,
"MockInteractions": false
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2020
}
}
47 changes: 47 additions & 0 deletions .github/workflows/sauce.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
name: sauce

on:
push:
branches:
- '**'
tags-ignore:
- '*.*'

jobs:
unit-tests:
runs-on: ubuntu-latest
if: "! contains(toJSON(github.event.commits.*.message), '[skip ci]')"

steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12

- name: Install dependencies
run: npm install

- name: SauceLabs tests
env:
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
run: npm run test:sauce

visual-tests:
runs-on: ubuntu-latest
if: "! contains(toJSON(github.event.commits.*.message), '[skip ci]')"

steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12

- name: Install dependencies
run: npm install

- name: Visual tests
env:
SAUCE_USERNAME: ${{ secrets.SAUCE_USERNAME }}
SAUCE_ACCESS_KEY: ${{ secrets.SAUCE_ACCESS_KEY }}
run: npm run test:visual
43 changes: 43 additions & 0 deletions .github/workflows/tests.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
name: tests

on: [pull_request]

jobs:
lint:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12

- name: Install dependencies
run: npm install

- name: Check version
run: npm run check-version

- name: Lint JavaScript
run: npm run lint:js

- name: Lint CSS
run: npm run lint:css

- name: Lint typings
run: npm run lint:types

unit-tests:
runs-on: ubuntu-latest

steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 12

- name: Install dependencies
run: npm install

- name: Unit tests
run: npm test
4 changes: 1 addition & 3 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,5 @@ node_modules
package-lock.json
yarn.lock
coverage
dist
analysis.json
.vscode
.idea/
*.iml
21 changes: 21 additions & 0 deletions .hermione.conf.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
module.exports = {
browsers: {
chrome: {
baseUrl: 'http://localhost:8080/test/visual/',
screenshotsDir: () => 'test/visual/screens/vaadin-login-overlay',
desiredCapabilities: {
browserName: 'chrome',
version: '85.0',
platform: 'Windows 10'
}
}
},
plugins: {
'hermione-esm': {
port: 8080
},
'hermione-sauce': {
verbose: false
}
}
};
6 changes: 6 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"singleQuote": true,
"printWidth": 120,
"trailingComma": "none",
"htmlWhitespaceSensitivity": "strict"
}
5 changes: 4 additions & 1 deletion .stylelintrc
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
{
"extends": "stylelint-config-vaadin"
"extends": [
"stylelint-config-vaadin",
"stylelint-config-prettier"
]
}
64 changes: 0 additions & 64 deletions .travis.yml

This file was deleted.

75 changes: 26 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,3 @@
[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
[![Bower version](https://badgen.net/github/release/vaadin/vaadin-login)](https://github.com/vaadin/vaadin-login/releases)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-login)
[![Build Status](https://travis-ci.org/vaadin/vaadin-login.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-login)
[![Coverage Status](https://coveralls.io/repos/github/vaadin/vaadin-login/badge.svg?branch=master)](https://coveralls.io/github/vaadin/vaadin-login?branch=master)
[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-login-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)


# <vaadin-login>

[Live Demo ↗](https://vaadin.com/components/vaadin-login/html-examples)
Expand All @@ -19,6 +8,13 @@

<vaadin-login-overlay> is a Web Component providing a painless login experience, part of the [Vaadin components](https://vaadin.com/components). Component shows the <vaadin-login-form> inside of an overlay.

[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-login)](https://www.npmjs.com/package/@vaadin/vaadin-login)
[![Build Status](https://travis-ci.org/vaadin/vaadin-login.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-login)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/vaadin/vaadin-login)
[![Published on Vaadin Directory](https://img.shields.io/badge/Vaadin%20Directory-published-00b4f0.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/vaadin-login-directory-urlidentifier.svg)](https://vaadin.com/directory/component/vaadinvaadin-login)
[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)

```html
<vaadin-login-overlay opened></vaadin-login-overlay>
```
Expand All @@ -33,29 +29,6 @@

## Installation

The Vaadin components are distributed as Bower and npm packages.
Please note that the version range is the same, as the API has not changed.
You should not mix Bower and npm versions in the same application, though.

Unlike the official Polymer Elements, the converted Polymer 3 compatible Vaadin components
are only published on npm, not pushed to GitHub repositories.

### Polymer 2 and HTML Imports compatible version

Install `vaadin-login`:

```sh
bower i vaadin/vaadin-login --save
```

Once installed, import it in your application:

```html
<link rel="import" href="bower_components/vaadin-login/vaadin-login-overlay.html">
```
### Polymer 3 and ES Modules compatible version


Install `vaadin-login`:

```sh
Expand All @@ -78,46 +51,50 @@ To use the Material theme, import the correspondent file from the `theme/materia

- The component with the Lumo theme:

`theme/lumo/vaadin-login-overlay.html`
`theme/lumo/vaadin-login-form.html`
`theme/lumo/vaadin-login-overlay.js`
`theme/lumo/vaadin-login-form.js`

- The component with the Material theme:

`theme/material/vaadin-login-overlay.html`
`theme/material/vaadin-login-form.html`
`theme/material/vaadin-login-overlay.js`
`theme/material/vaadin-login-form.js`

- Aliases for lumo themed components:

`vaadin-login-overlay.html`
`vaadin-login-form.html`
`vaadin-login-overlay.js`
`vaadin-login-form.js`


## Running demos and tests in browser
## Running API docs and tests in a browser

1. Fork the `vaadin-login` repository and clone it locally.

1. Make sure you have [npm](https://www.npmjs.com/) installed.
1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.

1. When in the `vaadin-login` directory, run `npm install` and then `bower install` to install dependencies.
1. Make sure you have [npm](https://www.npmjs.com/) installed.

1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
1. When in the `vaadin-login` directory, run `npm install` to install dependencies.

1. Run `npm start`, browser will automatically open the component API documentation.

1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
1. You can also open visual tests, for example:

- http://127.0.0.1:8080/components/vaadin-login/demo
- http://127.0.0.1:8080/components/vaadin-login/test
- http://127.0.0.1:3000/test/visual/default.html


## Running tests from the command line

1. When in the `vaadin-login` directory, run `polymer test`
1. When in the `vaadin-login` directory, run `npm test`

## Debugging tests in the browser

1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.



## Following the coding style

We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files.
We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `npm run lint`, which will automatically lint all `.js` files.


## Big Thanks
Expand Down
Loading

0 comments on commit cf6ab9c

Please sign in to comment.