@polymer/paper-badge - npm Package Compare versions

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

demo/test-button.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
@@ -16,4 +17,4 @@ import '@polymer/polymer/polymer-legacy.js';
 import '../paper-badge.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 Polymer({
@@ -20,0 +21,0 @@ _template: html`

package.json

@@ -17,24 +17,16 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.20",
+    "@polymer/iron-icons": "^3.0.0-pre.21",
+    "@polymer/paper-icon-button": "^3.0.0-pre.20",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "wct-browser-legacy": "^1.0.1",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/iron-demo-helpers": "^3.0.0-pre.21",
-    "@polymer/paper-icon-button": "^3.0.0-pre.21",
-    "@polymer/test-fixture": "^3.0.0-pre.21",
-    "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "paper-badge.js",
@@ -44,7 +36,7 @@ "author": "The Polymer Authors",
     "@polymer/polymer": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0-pre.21",
-    "@polymer/paper-styles": "^3.0.0-pre.21",
-    "@polymer/iron-icon": "^3.0.0-pre.21",
-    "@polymer/iron-flex-layout": "^3.0.0-pre.21"
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.20",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
+    "@polymer/iron-icon": "^3.0.0-pre.20",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.20"
   }
 }

paper-badge.js

 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
 */
+import '@polymer/iron-icon/iron-icon.js';
+import '@polymer/iron-flex-layout/iron-flex-layout.js';
+import '@polymer/paper-styles/default-theme.js';
+import '@polymer/paper-styles/typography.js';
+
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -18,5 +28,6 @@ `<paper-badge>` is a circular text badge that is displayed on the top right
 it to the id of the desired icon. Please note that you should still set the
-`label` attribute in order to keep the element accessible. Also note that you will need to import
-the `iron-iconset` that includes the icons you want to use. See [iron-icon](../iron-icon)
-for more information on how to import and use icon sets.
+`label` attribute in order to keep the element accessible. Also note that you
+will need to import the `iron-iconset` that includes the icons you want to use.
+See [iron-icon](../iron-icon) for more information on how to import and use icon
+sets.
 
@@ -32,8 +43,22 @@ Example:
       <paper-button id="btn">Status</paper-button>
-      <paper-badge icon="favorite" for="btn" label="favorite icon"></paper-badge>
+      <paper-badge
+          icon="favorite"
+          for="btn"
+          label="favorite icon">
+      </paper-badge>
     </div>
 
     <div>
-      <paper-icon-button id="account-box" icon="account-box" alt="account-box"></paper-icon-button>
-      <paper-badge icon="social:mood" for="account-box" label="mood icon"></paper-badge>
+      <paper-icon-button
+          id="account-box"
+          icon="account-box"
+          alt="account-box">
+      </paper-icon-button>
+      <paper-badge
+          icon="social:mood"
+          for="account-box"
+          label="mood
+          icon">
+      </paper-badge>
+
     </div>
@@ -60,17 +85,2 @@
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import '@polymer/polymer/polymer-legacy.js';
-
-import '@polymer/iron-icon/iron-icon.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import '@polymer/paper-styles/default-theme.js';
-import '@polymer/paper-styles/typography.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -118,3 +128,3 @@ _template: html`
     </div>
-`,
+  `,
 
@@ -124,5 +134,9 @@ is: 'paper-badge',
   /** @private */
-  hostAttributes: {role: 'status', tabindex: 0},
+  hostAttributes: {
+    role: 'status',
+    tabindex: 0,
+  },
 
   behaviors: [IronResizableBehavior],
+
   listeners: {'iron-resize': 'updatePosition'},
@@ -135,3 +149,6 @@
      */
-    for: {type: String, observer: '_forChanged'},
+    for: {
+      type: String,
+      observer: '_forChanged',
+    },
 
@@ -142,3 +159,6 @@ /**
      */
-    label: {type: String, observer: '_labelChanged'},
+    label: {
+      type: String,
+      observer: '_labelChanged',
+    },
 
@@ -151,3 +171,6 @@ /**
      */
-    icon: {type: String, value: ''},
+    icon: {
+      type: String,
+      value: '',
+    },
 
@@ -154,0 +177,0 @@ _boundNotifyResize: {

README.md

@@ -0,35 +1,109 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-badge.svg)](https://www.npmjs.com/package/@polymer/paper-badge)
+[![Build status](https://travis-ci.org/PolymerElements/paper-badge.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-badge)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-badge)
 
-<!---
+## &lt;paper-badge&gt;
 
-This README is automatically generated from the comments in these files:
-paper-badge.html
+`<paper-badge>` is a circular text badge that is displayed on the top right
+corner of an element, representing a status or a notification. It will badge
+the anchor element specified in the `for` attribute, or, if that doesn't exist,
+centered to the parent node containing it.
 
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-badge),
+  [Demo](https://www.webcomponents.org/element/@polymer/paper-badge/demo/demo/index.html).
 
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
+## Usage
 
--->
+### Installation
+```
+npm install --save @polymer/paper-badge
+```
 
-[![Build status](https://travis-ci.org/PolymerElements/paper-badge.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-badge)
+### In an html file
+```html
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/paper-badge/paper-badge.js';
+      import '@polymer/paper-button/paper-button.js';
+      import '@polymer/paper-icon-button/paper-icon-button.js';
+      import '@polymer/iron-icons/iron-icons.js';
+      import '@polymer/iron-icons/social-icons.js';
+    </script>
+  </head>
+  <body>
+    <div style="display:inline-block">
+      <span>Inbox</span>
+      <paper-badge label="3"></paper-badge>
+    </div>
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/paper-badge)_
+    <div>
+      <paper-button id="btn">Status</paper-button>
+      <paper-badge
+          icon="favorite"
+          for="btn"
+          label="favorite icon">
+      </paper-badge>
+    </div>
 
-## Changes in 2.0
-* Target updates target in an animation frame rather than 1 ms.
+    <div>
+      <paper-icon-button
+          id="account-box"
+          icon="account-box"
+          alt="account-box">
+      </paper-icon-button>
+      <paper-badge
+          icon="social:mood"
+          for="account-box"
+          label="mood icon">
+      </paper-badge>
+    </div>
+  </body>
+</html>
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-badge/paper-badge.js';
+import '@polymer/paper-button/paper-button.js';
+import '@polymer/paper-icon-button/paper-icon-button.js';
+import '@polymer/iron-icons/iron-icons.js';
+import '@polymer/iron-icons/social-icons.js';
 
-## &lt;paper-badge&gt;
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <div style="display:inline-block">
+        <span>Inbox</span>
+        <paper-badge label="3"></paper-badge>
+      </div>
 
-`<paper-badge>` is a circular text badge that is displayed on the top right
-corner of an element, representing a status or a notification. It will badge
-the anchor element specified in the `for` attribute, or, if that doesn't exist,
-centered to the parent node containing it.
+      <div>
+        <paper-button id="btn">Status</paper-button>
+        <paper-badge
+            icon="favorite"
+            for="btn"
+            label="favorite icon">
+        </paper-badge>
+      </div>
 
-Badges can also contain an icon by adding the `icon` attribute and setting
-it to the id of the desired icon. Please note that you should still set the
-`label` attribute in order to keep the element accessible. Also note that you will need to import
-the `iron-iconset` that includes the icons you want to use. See [iron-icon](../iron-icon)
-for more information on how to import and use icon sets.
+      <div>
+        <paper-icon-button
+            id="account-box"
+            icon="account-box"
+            alt="account-box">
+        </paper-icon-button>
+        <paper-badge
+            icon="social:mood"
+            for="account-box"
+            label="mood icon">
+        </paper-badge>
+      </div>
+    `;
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
 
+
 Example:
@@ -53,18 +127,23 @@
 ```
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
 
-### Styling
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-badge
+cd paper-badge
+npm install
+npm install -g polymer-cli
+```
 
-The following custom properties and mixins are available for styling:
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
 
-| Custom property | Description | Default |
-| --- | --- | --- |
-| `--paper-badge-background` | The background color of the badge | `--accent-color` |
-| `--paper-badge-opacity` | The opacity of the badge | `1.0` |
-| `--paper-badge-text-color` | The color of the badge text | `white` |
-| `--paper-badge-width` | The width of the badge circle | `20px` |
-| `--paper-badge-height` | The height of the badge circle | `20px` |
-| `--paper-badge-margin-left` | Optional spacing added to the left of the badge. | `0px` |
-| `--paper-badge-margin-bottom` | Optional spacing added to the bottom of the badge. | `0px` |
-| `--paper-badge` | Mixin applied to the badge | `{}` |
-
-
+### Running the tests
+```sh
+polymer test --npm
+```

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

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

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

Improved metrics

Dev dependency count

7

decreased by-22.22%

Lines of code

416

increased by31.23%

Number of lines in readme file

148

increased by111.43%

Worsened metrics

Total package byte prevSize

23981

decreased by-38.06%

Number of package files

7

decreased by-53.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-flex-layout@^3.0.0-pre.20

• Updated@polymer/iron-icon@^3.0.0-pre.20

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.20

• Updated@polymer/paper-styles@^3.0.0-pre.20