@vaadin/vaadin-cookie-consent - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0-alpha1

package.json

 {
+  "name": "@vaadin/vaadin-cookie-consent",
+  "version": "3.0.0-alpha1",
   "description": "vaadin-cookie-consent",
+  "main": "vaadin-cookie-consent.js",
+  "module": "vaadin-cookie-consent.js",
+  "repository": "vaadin/vaadin-cookie-consent",
   "keywords": [
@@ -10,7 +15,2 @@ "Vaadin",
   ],
-  "repository": "vaadin/vaadin-cookie-consent",
-  "homepage": "https://vaadin.com/components",
-  "name": "@vaadin/vaadin-cookie-consent",
-  "version": "2.0.0",
-  "main": "vaadin-cookie-consent.js",
   "author": "Vaadin Ltd",
@@ -21,38 +21,71 @@ "license": "https://raw.githubusercontent.com/vaadin/vaadin-cookie-consent/master/LICENSE",
   },
+  "homepage": "https://vaadin.com/components",
   "files": [
     "vaadin-*.d.ts",
     "vaadin-*.js",
-    "@types",
     "src",
     "theme"
   ],
-  "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0"
+  "scripts": {
+    "analyze": "polymer analyze vaadin-* > analysis.json",
+    "check-version": "magi check-version",
+    "debug": "web-test-runner test/*.test.js --watch",
+    "dist": "rimraf dist && npm run analyze && rollup -c rollup.config.js && cp analysis.json dist",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:css": "stylelint src/*.js",
+    "lint:js": "eslint src theme test",
+    "prestart": "npm run analyze",
+    "preversion": "magi update-version",
+    "screenshots": "hermione test/visual/test.js --update-refs",
+    "serve:dist": "web-dev-server --app-index dist/index.html --open",
+    "start": "web-dev-server --node-resolve --open",
+    "test": "web-test-runner test/*.test.js --coverage",
+    "test:sauce": "TEST_ENV=sauce npm test",
+    "test:visual": "hermione test/visual/test.js"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
   "dependencies": {
-    "cookieconsent": "^3.0.6",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1",
     "@vaadin/vaadin-element-mixin": "^2.4.1",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0",
-    "@vaadin/vaadin-material-styles": "^1.1.0",
-    "@vaadin/vaadin-license-checker": "^2.1.0"
+    "@vaadin/vaadin-license-checker": "^2.1.0",
+    "@vaadin/vaadin-lumo-styles": "^1.6.1",
+    "@vaadin/vaadin-material-styles": "^1.3.2",
+    "cookieconsent": "^3.0.6"
   },
-  "scripts": {
-    "generate-typings": "gen-typescript-declarations --outDir . --verify"
-  },
   "devDependencies": {
-    "axe-core": "^3.0.3",
-    "pwa-helpers": "^0.8.3",
+    "@esm-bundle/chai": "^4.1.5",
+    "@open-wc/rollup-plugin-html": "^1.2.5",
+    "@open-wc/testing-helpers": "^1.8.12",
     "@polymer/iron-component-page": "^4.0.0",
-    "@polymer/iron-demo-helpers": "^3.0.0",
-    "@webcomponents/webcomponentsjs": "^2.0.0",
-    "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.1.0"
+    "@polymer/iron-test-helpers": "^3.0.1",
+    "@web/dev-server": "^0.1.5",
+    "@web/test-runner": "^0.12.7",
+    "@web/test-runner-saucelabs": "^0.4.1",
+    "eslint": "^7.18.0",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "hermione": "^3.9.0",
+    "hermione-esm": "^0.4.0",
+    "hermione-sauce": "^0.1.0",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.1",
+    "magi-cli": "^0.29.0",
+    "prettier": "^2.2.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.34.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "stylelint": "^13.8.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-vaadin": "^0.2.10"
   }
 }

README.md

@@ -1,4 +0,1 @@
-[![Build Status](https://travis-ci.org/vaadin/vaadin-cookie-consent.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-cookie-consent)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
-
 # <vaadin-cookie-consent>
@@ -10,97 +7,52 @@
 
-
 [<vaadin-cookie-consent>](https://vaadin.com/components/vaadin-cookie-consent) is a web component used for showing a cookie consent banner the first time a user visits the application. Cookie Consent is part of the [Vaadin components](https://vaadin.com/components).
 
+[![npm version](https://badgen.net/npm/v/@vaadin/vaadin-cookie-consent)](https://www.npmjs.com/package/@vaadin/vaadin-cookie-consent)
+[![Build Status](https://travis-ci.org/vaadin/vaadin-cookie-consent.svg?branch=master)](https://travis-ci.org/vaadin/vaadin-cookie-consent)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
-## Getting Started
-
-### Install Vaadin Cookie Consent in your project
-```
-$ bower install --save vaadin/vaadin-cookie-consent
-```
-
-### Import Vaadin Cookie Consent
-Add html import
 ```html
-<link rel="import" href="../../bower_components/vaadin-cookie-consent/vaadin-cookie-consent.html">
-```
-
-### Use Vaadin Cookie Consent
-Create your first Vaadin Cookie Consent
-```html
 <vaadin-cookie-consent></vaadin-cookie-consent>
 ```
 
-### Install License Key
-After one day using Vaadin Cookie Consent in a development environment you will see a pop-up that asks you to enter the license key.
-You can get your trial key from [https://vaadin.com/pro/licenses](https://vaadin.com/pro/licenses).
-If the license is valid, it will be saved to the local storage of the browser and you will not see the pop-up again.
+[<img src="https://raw.githubusercontent.com/vaadin/vaadin-cookie-consent/master/screenshot.png" alt="Screenshot of vaadin-details" width="847">](https://vaadin.com/components/vaadin-cookie-consent)
 
-- **Trial license** https://vaadin.com/pro/licenses
+### Installation
 
+Install `vaadin-cookie-consent`:
 
-## Customizing Vaadin Cookie Consent
-<!--
+```sh
+npm i @vaadin/vaadin-cookie-consent --save
 ```
-<custom-element-demo>
-  <template>
-    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
-    <link rel="import" href="vaadin-cookie-consent.html">
-    <next-code-block></next-code-block>
-  </template>
-</custom-element-demo>
-```
--->
-```html
-<vaadin-cookie-consent
-  message="We are using cookies to make your visit here awesome!"
-  dismiss="Accept"
-  learn-more="Why?"
-  learn-more-link="https://yourdomain.com/terms-of-service">
-</vaadin-cookie-consent>
-```
 
-[<img src="https://raw.githubusercontent.com/vaadin/vaadin-cookie-consent/master/screenshot.png" width="100%" alt="Screenshot of vaadin-cookie-consent">](https://vaadin.com/components/vaadin-cookie-consent)
+Once installed, import it in your application:
 
+```js
+import '@vaadin/vaadin-board/vaadin-cookie-consent.js';
+```
 
-## The file structure for Vaadin components
+## Running API docs and tests in a browser
 
-Vaadin components use the Lumo theme by default.
+1. Fork the `vaadin-cookie-consent` repository and clone it locally.
 
-- `src/vaadin-cookie-consent.html`
+1. Make sure you have [node.js](https://nodejs.org/) 12.x installed.
 
-  Unstyled component.
-
-- `theme/lumo/vaadin-cookie-consent.html`
-
-  Component with Lumo theme.
-
-- `vaadin-cookie-consent.html`
-
-  Alias for theme/lumo/vaadin-cookie-consent.html
-
-
-## Running demos and tests in browser
-
-1. Fork the `vaadin-cookie-consent` repository and clone it locally.
-
 1. Make sure you have [npm](https://www.npmjs.com/) installed.
 
-1. When in the `vaadin-cookie-consent` directory, run `npm install` and then `bower install` to install dependencies.
+1. When in the `vaadin-cookie-consent` directory, run `npm install` to install dependencies.
 
-1. Make sure you have [polymer-cli](https://www.npmjs.com/package/polymer-cli) installed globally: `npm i -g polymer-cli`.
+1. Run `npm start`, browser will automatically open the component API documentation.
 
-1. Run `polymer serve --open`, browser will automatically open the component API documentation.
+1. You can also open visual tests, for example:
 
-1. You can also open demo or in-browser tests by adding **demo** or **test** to the URL, for example:
+  - http://localhost:8000/test/visual/default.html
 
-  - http://127.0.0.1:8080/components/vaadin-cookie-consent/demo
-  - http://127.0.0.1:8080/components/vaadin-cookie-consent/test
+## Running tests from the command line
 
+1. When in the `vaadin-cookie-consent` directory, run `npm test`
 
-## Running tests from the command line
+## Debugging tests in the browser
 
-1. When in the `vaadin-cookie-consent` directory, run `polymer test`
+1. Run `npm run debug`, then choose manual mode (M) and open the link in browser.
 
-
 ### Big Thanks
@@ -113,3 +65,3 @@
 
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `gulp 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 `gulp lint`, which will automatically lint all `.js` files.
 
@@ -116,0 +68,0 @@

src/vaadin-cookie-consent.d.ts

@@ -1,22 +0,3 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   src/vaadin-cookie-consent.js
- */
+import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 
-
-// tslint:disable:variable-name Describing an API that's defined elsewhere.
-
-import {PolymerElement} from '@polymer/polymer/polymer-element.js';
-
-import {ThemableMixin} from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import {ElementMixin} from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import {html} from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -48,7 +29,3 @@ * `<vaadin-cookie-consent>` is used to show a cookie consent banner the first
  */
-declare class CookieConsentElement extends
-  ElementMixin(
-  ThemableMixin(
-  PolymerElement)) {
-
+declare class CookieConsentElement extends ElementMixin(HTMLElement) {
   /**
@@ -83,3 +60,3 @@ * The message to show in the popup.
    */
-  position: CookieConsentPosition;
+  position: 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
@@ -93,5 +70,2 @@ /**
   cookieName: string;
-  static _finalizeClass(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
 
@@ -105,10 +79,7 @@ /**
 declare global {
-
   interface HTMLElementTagNameMap {
-    "vaadin-cookie-consent": CookieConsentElement;
+    'vaadin-cookie-consent': CookieConsentElement;
   }
 }
 
-export {CookieConsentElement};
-
-import {CookieConsentPosition} from '../@types/interfaces';
+export { CookieConsentElement };

src/vaadin-cookie-consent.js

 /**
-@license
-Copyright (c) 2018 - 2020 Vaadin Ltd
-This program is available under Commercial Vaadin Developer License 4.0 (CVDLv4).
-
-See <a href="https://vaadin.com/license/cvdl-4.0">the website</a> for the complete license.
-*/
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+ * @license
+ * Copyright (c) 2018 - 2021 Vaadin Ltd
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import 'cookieconsent/build/cookieconsent.min.js';
@@ -42,18 +37,14 @@
  *
- * @extends PolymerElement
+ * @extends HTMLElement
  * @mixes ElementMixin
- * @mixes ThemableMixin
- * @demo demo/index.html
  */
-class CookieConsentElement extends
-  ElementMixin(
-    ThemableMixin(PolymerElement)) {
+class CookieConsentElement extends ElementMixin(PolymerElement) {
   static get template() {
     return html`
-    <style>
-      :host {
-        display: none;
-      }
-    </style>
-`;
+      <style>
+        :host {
+          display: none;
+        }
+      </style>
+    `;
   }
@@ -66,3 +57,3 @@
   static get version() {
-    return '2.0.0';
+    return '3.0.0-alpha1';
   }
@@ -122,3 +113,3 @@
        * it is shown as a smaller popup.
-       * @type {!CookieConsentPosition}
+       * @type {string}
        */
@@ -155,2 +146,3 @@ position: {
     const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
+    /* c8 ignore next 3 */
     if (typeof licenseChecker === 'function') {
@@ -172,2 +164,3 @@ licenseChecker(CookieConsentElement);
     this._css = document.createElement('style');
+    // prettier-ignore
     this._css.innerText = '.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Helvetica,Calibri,Arial,sans-serif;font-size:16px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}'; // eslint-disable-line max-len
@@ -174,0 +167,0 @@ document.head.appendChild(this._css);

vaadin-cookie-consent.d.ts

@@ -1,15 +0,2 @@
-/**
- * DO NOT EDIT
- *
- * This file was automatically generated by
- *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
- *
- * To modify these typings, edit the source file(s):
- *   vaadin-cookie-consent.js
- */
-
-
-// tslint:disable:variable-name Describing an API that's defined elsewhere.
-
 export * from './src/vaadin-cookie-consent.js';
 export * from './@types/interfaces';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dependency count

6

decreased by-14.29%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

33280

decreased by-4.45%

Dev dependency count

24

increased by242.86%

Number of package files

9

decreased by-10%

Lines of code

311

decreased by-10.37%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

77

decreased by-38.4%

Dependency changes

• - Removed@vaadin/vaadin-themable-mixin@^1.6.1

• - Removed@vaadin/vaadin-themable-mixin@1.6.2(transitive)

• - Removedlit-element@2.5.1(transitive)

• - Removedlit-html@1.4.1(transitive)

• Updated@vaadin/vaadin-lumo-styles@^1.6.1

• Updated@vaadin/vaadin-material-styles@^1.3.2