@astrouxds/rux-icon - npm Package Compare versions

Comparing version 3.0.2 to 4.0.0-0

package.json

 {
-  "_args": [
-    [
-      "@astrouxds/rux-icon@1.0.3",
-      "/private/var/www/astro/05-components.astrouxds.com"
-    ]
-  ],
-  "_from": "@astrouxds/rux-icon@1.0.3",
-  "_id": "@astrouxds/rux-icon@1.0.3",
-  "_inBundle": false,
-  "_integrity": "sha512-KehmJZFSPgBBbEu1rEDGLzaA+HLsiwhdRr1GjbD8PKc3aMkr3DO3dZ7doj1qwG6WmGQ6dN7uZjKXioMW4NNfQg==",
-  "_location": "/@astrouxds/rux-icon",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "version",
-    "registry": true,
-    "raw": "@astrouxds/rux-icon@1.0.3",
-    "name": "@astrouxds/rux-icon",
-    "escapedName": "@astrouxds%2frux-icon",
-    "scope": "@astrouxds",
-    "rawSpec": "1.0.3",
-    "saveSpec": null,
-    "fetchSpec": "1.0.3"
-  },
-  "_requiredBy": [
-    "/",
-    "/@astrouxds/rux-button",
-    "/@astrouxds/rux-modal",
-    "/@astrouxds/rux-notification",
-    "/@astrouxds/rux-status"
-  ],
-  "_resolved": "https://registry.npmjs.org/@astrouxds/rux-icon/-/rux-icon-1.0.3.tgz",
-  "_spec": "1.0.3",
-  "_where": "/private/var/www/astro/05-components.astrouxds.com",
-  "author": {
-    "name": "Rocket Communications",
-    "email": "[e-mail]"
-  },
   "dependencies": {
-    "@polymer/polymer": "^3.0.2",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "lit-element": "^2.1.0",
+    "@webcomponents/webcomponentsjs": "^2.2.10"
   },
   "description": "Astro Web Component for icons",
-  "license": "GPL-3.0",
+  "license": "CC0-1.0",
   "main": "rux-icon.js",
@@ -50,3 +13,3 @@ "name": "@astrouxds/rux-icon",
   },
-  "version": "3.0.2"
+  "version": "4.0.0-0"
 }

README.md

@@ -1,43 +0,92 @@
-#Icons
-The RUX Icon component is … RUX Icon is based on the industry standard [WebComponents v1 spec](https://html.spec.whatwg.org/multipage/custom-elements.html) and implemented with [Polymer Project 3](https://www.polymer-project.org) for backwards compatibility and document binding.
+# Icons
 
-RUX Icon is available as a preview release and should not be used in production code.
+Display icons used in the Astro Design System
 
-For stylesheet usage outside of a WebComponent environment, please see [Astro UXDS Stylesheets](https://bitbucket.org/rocketcom/astro-styles)
+## Guidelines
 
-##Guidelines
+- [Astro UXDS: Icons and Symbols](https://astrouxds.com/ui-components/icons-and-symbols)
 
-* [Astro UXDS: Buttons](http://www.astrouxds.com/library/icons)
+## Installation
 
-##Installation
-`npm i -S @astrouxds/rux-icon`
+`npm i -save @astrouxds/rux-icon`
 
-###Dependancies
+## Web Components Usage
 
-* [Polymer 3](https://www.polymer-project.com)
-* [Astro 3 Core CSS](https://bitbucket.org/rocketcom/astro-styles/src/master/)
+### 1. Installation
 
-##Usage
-###Import the RUX Icon
+#### ** Install the Astro RUX Icon package via Command Line** (Preferred Method)
 
+```sh
+npm i --save @astrouxds/rux-icon
+```
+
+You may use Yarn, NPM, or your Node package manager of choice. The `--save` flag adds this component as a dependency in your `package.json` file.
+
+#### **Alternatively**, download the [Astro Component Library](https://bitbucket.org/rocketcom/astro-components/src/master/) source to your project.
+
+Via CLI:
+
+```sh
+git clone https://bitbucket.org/rocketcom/astro-components.git
+```
+
+Or, [download Astro Components as a .zip](https://bitbucket.org/rocketcom/astro-components/get/master.zip)
+
+### 2. Import the RUX Icon Web Component
+
+This example assumes you're using the NPM package in `node_modules`. Otherwise, import the component using the path to the Astro Components directory in your project.
+
 ```javascript
-import { RuxIcon } from "@astro-components/rux-icon/rux-icon.js";
+import { RuxIcon } from '@astro-components/rux-icon/rux-icon.js';
 ```
 
-###Basic HTML Usage
+### 3. Render the RUX Icon Web Component
 
 ```xml
-<rux-icon icon="default:settings"></rux-icon>
+<rux-icon icon="altitude" label="Altitude for Satellite X"></rux-icon>
 ```
 
-###Properties
-| Property | Type | Description |
-| -------- | ---- | ------------|
-| `icon` | `string` | Defines the icon to be used. RUX Icon uses the convention of `namespace:icon-name` to avoid potential namespace collision. RUX ships with the following icon sets: `default`,`advanced-status` and `status`. For a [full list of icon symbols see the Icons section in Astro UXDS Guidelines](<(https://cms.astrouxds.com/library/buttons)>)
-| `color` | `string` | Changes the icon color. Accepted values can be entered as hex, rgba, hsl and HTML string. **Caution: the `status` icon set cannot and should not be overidden** |
-| `size` | `string` | Allows for large icon variants |
+External icon sets are supported via the `library` attribute. External icon libraries must be SVGs and each icon must have its own unique id. Icon library properties should be the root relative path to your icons
 
-###Standard Icons
+```xml
+<rux-icon library="icons/my-custom-icons.svg" icon="my-icon"></rux-icon>
 
-###Events
-RUX Icons do not support events. If you need an Icon button use the RUX Button Icon type
+```
+
+Icons support color and size overrides. The color property supports any CSS3 valid color value.
+
+```xml
+<rux-icon icon="caution" color="#fff" >
+</rux-icon>
+```
+
+---
+
+## Properties
+
+| Property  | Type     | Required | Description                                                                                                                                                     |
+| --------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `icon`    | `string` | `true`   | Defines the icon to be used. For a [full list of icon symbols see the Icons section in Astro UXDS Guidelines](https://astrouxds.com/library/icons-and-symbols)  |
+| `label`   | `string` | `true`   | A descriptive label of the icon, **Required for ARIA/Accessibility**                                                                                            |
+| `library` | `string` | `false`  | Load an external icon set. Icons must be an SVG with individual icons having their own unique `id` attribute.                                                   |
+| `color`   | `string` | `false`  | Changes the icon color. Accepted values can be entered as hex, rgba, hsl and HTML string. **Caution: the `status` icon set cannot and should not be overidden** |
+| `size`    | `string` | `false`  | Allows for large icon variants                                                                                                                                  |
+
+### Standard Icons
+
+## Revision History
+
+##### **TODO BEFORE RELEASE**
+
+- Look at ditching class string manipulation happening in the template render function and replace with `:host`-level attributes. Keep existing class-based styles working for users of previous versions
+- Are sizes dynamic or a set series of icon sizes?
+
+##### **4.1**
+
+- Added support for external icon libraries viat the `library` property
+- Replaced the DOM manipulation library for loading icons in favor of an HTML5 template TODO: add support for template outside of WebComponents when browser’s support shadowDOM piercing
+- Removed status indicators
+- Added a default libaray via template method
+- Removed the namespace:icon pattern in favor of supporting
+
+- Replaced [Polymer 3](https://www.polymer-project.org) implementation with [LitElement](https://lit-element.polymer-project.org/) for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.

rux-icon.js

@@ -1,9 +0,13 @@
-import { PolymerElement, html } from "@polymer/polymer/polymer-element.js";
-import { RuxIconLibrary } from "./rux-icon-library.js";
-import "./rux-icons-svg.js";
-/**
- * @polymer
- * @extends HTMLElement
- */
-export class RuxIcon extends PolymerElement {
+import { LitElement, html } from 'lit-element';
+import { directive } from 'lit-html';
+
+const getIcon = directive((library, icon) => part => {
+  try {
+    part.setValue(`${library}#${icon}`);
+  } catch (error) {
+    console.error(error);
+  }
+});
+
+export class RuxIcon extends LitElement {
   static get properties() {
@@ -13,98 +17,84 @@ return {
         type: String,
-        observer: "_updateIcon"
       },
       size: {
-        type: String
+        type: String,
       },
       color: {
-        type: String
-      }
+        type: String,
+      },
+      library: {
+        type: String,
+      },
+      label: {
+        type: String,
+      },
     };
   }
-  static get template() {
-    return html`
-    <style>
-    :host {
-      display: inline-block;
-      line-height: 0;
-      fill: var(--iconDefaultColor, rgb(77, 172, 255));
-      height: var(--icon-size--default, 44px);
-      /* width: var(--default-icon-width, 44px); */
-      /* outline: 1px solid red; */
-    }
-    
-    :host svg {
-      height: 100%;
-      width: auto;
-    }
-    
-    /* small variant */
-    
-    :host(.rux-icon--small) {
-      height: var(--icon-size--small, 32px);
-      width: var(--icon-size--small, 32px);
-    }
-    
-    /* status symbol icon size */
-    
-    :host(.rux-icon--status) {
-      height: var(--icon-size--status, 12px);
-      width: var(--icon-size--status, 12px);
-    }
-    
-    :host(.rux-icon--button) {
-      height: var(--icon-size--button, 19px);
-      width: var(--icon-size--button, 19px);
-      fill: var(--icon-color--button);
-    }
-    
-    :host(.rux-icon--button--large) {
-      height: var(--icon-size--button-large, 24px);
-      width: var(--icon-size--button-large, 24px);
-    }
-    </style>`;
-  }
+
   constructor() {
     super();
-    this._iconLibraryEvent = this._iconLibraryLoaded.bind(this);
+
+    this.library = '/icons/astro.svg';
+    /* TODO: a non-presumptive way to assign a better default label if the user doesn’t provide one */
+    this.label = 'icon';
   }
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener("icon-library-added", this._iconLibraryEvent);
+
+  firstUpdated() {
+    this.style.setProperty('--iconDefaultColor', this.color);
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("icon-library-added", this._iconLibraryEvent);
-  }
-  ready() {
-    super.ready();
-  }
-  //
-  _iconLibraryLoaded(e) {}
-  //
-  _updateIcon(icon) {
-    // get the icon library and icon name
-    const parts = icon.split(":");
-    this._iconName = parts.pop();
-    this._iconLibrary = parts.pop();
 
-    // quick fix for repaint bug in icons
-    if (this.shadowRoot.querySelectorAll("svg")[0]) {
-      this.shadowRoot.removeChild(this.shadowRoot.querySelectorAll("svg")[0]);
+  updated(changedProperties) {
+    if (changedProperties.get('color')) {
+      this.style.setProperty('--iconDefaultColor', this.color);
     }
+  }
 
-    //
-    window.dispatchEvent(
-      new CustomEvent("set-icon", {
-        detail: {
-          el: this,
-          icon: this._iconName,
-          library: this._iconLibrary,
-          size: this.size,
-          color: this.color
+  render() {
+    return html`
+      <style>
+        :host {
+          --iconDefaultSize: 2.7rem;
+          --iconDefaultColor: rgb(77, 172, 255);
+
+          display: inline-block;
+          fill: var(--iconDefaultColor, rgb(77, 172, 255));
+
+          height: var(--iconDefaultSize, 2.75rem);
+          width: var(--iconDefaultSize, 2.75rem);
         }
-      })
-    );
+
+        :host svg {
+          height: 100%;
+          width: auto;
+        }
+
+        :host([size='extra-small']) {
+          height: 1rem;
+          width: 1rem;
+        }
+
+        :host([size='small']) {
+          height: 2rem;
+          width: 2rem;
+        }
+
+        :host([size='large']) {
+          height: 4rem;
+          width: 4rem;
+        }
+      </style>
+
+      <i id="rux-icon" title="${this.label}">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 128 128"
+          preserveAspectRatio="xMidYMid meet"
+          focusable="false"
+        >
+          <use href="${getIcon(this.library, this.icon)}"></use>
+        </svg>
+      </i>
+    `;
   }
 }
-customElements.define("rux-icon", RuxIcon);
+customElements.define('rux-icon', RuxIcon);

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

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

Copyleft License

License

(Experimental) Copyleft license information was found.

Found 1 instance in 1 package

Non-permissive License

License

(Experimental) A license not known to be considered permissive was found.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

License quality

100

increased by42.86%

Number of lines in readme file

93

increased by111.36%

Worsened metrics

Total package byte prevSize

6605

decreased by-79.55%

Number of package files

3

decreased by-57.14%

Lines of code

85

decreased by-77.15%

Number of low maintenance alerts

2

increased by100%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlit-element@^2.1.0

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)

• - Removed@polymer/polymer@^3.0.2

• - Removed@polymer/polymer@3.5.2(transitive)

• - Removed@webcomponents/shadycss@1.11.2(transitive)

• Updated@webcomponents/webcomponentsjs@^2.2.10