@spectrum-web-components/icon - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,12 @@ # Change Log
 
+# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/icon@0.2.0...@spectrum-web-components/icon@0.3.0) (2019-11-01)
+
+### Bug Fixes
+
+-   remove ":" based namespacing of events ([d77a843](https://github.com/adobe/spectrum-web-components/commit/d77a843))
+
+### Features
+
+-   **icon:** allow <sp-icon> to accept a slotted icon ([cbf7a07](https://github.com/adobe/spectrum-web-components/commit/cbf7a07))
+
 # [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/icon@0.1.3...@spectrum-web-components/icon@0.2.0) (2019-10-14)
@@ -8,0 +18,0 @@

lib/icon.css.js

@@ -18,5 +18,5 @@ /*
 var(--spectrum-global-dimension-size-225))*2);width:calc(var(--spectrum-alias-workflow-icon-size,
-var(--spectrum-global-dimension-size-225))*2)}:host([size=xl]),:host([size=xl]) img,:host([size=xl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*2);width:calc(var(--spectrum-global-dimension-size-300)*2)}:host([size=xxl]),:host([size=xxl]) img,:host([size=xxl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*3);width:calc(var(--spectrum-global-dimension-size-300)*3)}#container{height:100%}
+var(--spectrum-global-dimension-size-225))*2)}:host([size=xl]),:host([size=xl]) img,:host([size=xl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*2);width:calc(var(--spectrum-global-dimension-size-300)*2)}:host([size=xxl]),:host([size=xxl]) img,:host([size=xxl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*3);width:calc(var(--spectrum-global-dimension-size-300)*3)}#container{height:100%}img{height:auto}::slotted(*),img{width:100%;vertical-align:top}::slotted(*){height:100%}
 `;
 export default styles;
 //# sourceMappingURL=icon.css.js.map

lib/icon.d.ts

@@ -19,4 +19,3 @@ import { LitElement, CSSResultArray, TemplateResult } from 'lit-element';
     private parseIcon;
-    private renderIcon;
     protected _getUpdateComplete(): Promise<void>;
 }

lib/icon.js

@@ -16,3 +16,3 @@ /*
 import iconStyles from './icon.css.js';
-import { nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 export class Icon extends LitElement {
@@ -38,7 +38,7 @@ constructor() {
         super.connectedCallback();
-        window.addEventListener('sp-iconset:added', this.iconsetListener);
+        window.addEventListener('sp-iconset-added', this.iconsetListener);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        window.removeEventListener('sp-iconset:added', this.iconsetListener);
+        window.removeEventListener('sp-iconset-added', this.iconsetListener);
     }
@@ -53,4 +53,14 @@ firstUpdated() {
     render() {
+        if (this.name) {
+            return html `
+                <div id="container"></div>
+            `;
+        }
+        else if (this.src) {
+            return html `
+                <img src="${this.src}" alt=${ifDefined(this.label)} />
+            `;
+        }
         return html `
-            <div id="container">${this.renderIcon()}</div>
+            <slot></slot>
         `;
@@ -86,12 +96,2 @@ }
     }
-    renderIcon() {
-        // handle src image case
-        return html `
-            ${this.src
-            ? html `
-                      <img src="${this.src}" />
-                  `
-            : nothing}
-        `;
-    }
     async _getUpdateComplete() {
@@ -98,0 +98,0 @@ await super._getUpdateComplete();

package.json

@@ -21,3 +21,3 @@ {
     ],
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "",
@@ -40,6 +40,6 @@ "main": "lib/index.js",
     "dependencies": {
-        "@spectrum-web-components/iconset": "^0.1.4",
+        "@spectrum-web-components/iconset": "^0.1.5",
         "tslib": "^1.10.0"
     },
-    "gitHead": "7c3e131bc2bc3b1195e736ff65d3c4e044590ace"
+    "gitHead": "2157014e1c3f8cf184663261e4095eef59011b37"
 }

README.md

 ## Overview
 
-**sp-icon** will allow you to render icons that have been supplied to the page via icon sets.
+`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.
 
 ## Example
 
-<sp-icons-medium></sp-icons-medium>
+Names icons on this page are provided by the [`<sp-icons-medium>` icon set](/components/icons). Learn how to create your own via [`sp-iconset`](/components/iconset).
 
 ```html
+<sp-icons-medium></sp-icons-medium>
 <sp-icon name="ui:Magnifier"></sp-icon>
@@ -19,2 +20,3 @@ ```
 
+```html
 <sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
@@ -27,12 +29,3 @@ <sp-icon size="xs" name="ui:Magnifier"></sp-icon>
 <sp-icon size="xxl" name="ui:Magnifier"></sp-icon>
-
 ```
-<sp-icon size="xxs" name="ui:Magnifier"></sp-icon>
-<sp-icon size="xs" name="ui:Magnifier"></sp-icon>
-<sp-icon size="s" name="ui:Magnifier"></sp-icon>
-<sp-icon size="m" name="ui:Magnifier"></sp-icon>
-<sp-icon size="l" name="ui:Magnifier"></sp-icon>
-<sp-icon size="xl" name="ui:Magnifier"></sp-icon>
-<sp-icon size="xxl" name="ui:Magnifier"></sp-icon>
-```
 
@@ -43,6 +36,91 @@ ## Color Icon
 
+```html
 <sp-icon name="ui:Magnifier" style="color: red;"></sp-icon>
+```
 
+## Image Icon
+
+An image icon can be supplied via the `src` attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriately prepared for including in your applications design requirements.
+
+```html
+<sp-icon
+    size="xxs"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
+<sp-icon
+    size="xs"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
+<sp-icon
+    size="s"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
+<sp-icon
+    size="m"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
+<sp-icon
+    size="l"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
+<sp-icon
+    size="xl"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
+<sp-icon
+    size="xxl"
+    src="https://spectrum.corp.adobe.com/static/icons/workflow_22/Smock_FullScreen_22_N.svg"
+></sp-icon>
 ```
-<sp-icon name="ui:Magnifier" style="color: red;"></sp-icon>
+
+## Element Icon
+
+Icons can also be supplied as HTML elements to be applied via the default `<slot>`.
+
+```html
+<sp-icon size="xxs">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+        role="img"
+        fill="currentColor"
+        height="18"
+        width="18"
+        aria-hidden="true"
+    >
+        <path
+            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
+        ></path>
+    </svg>
+</sp-icon>
+<sp-icon>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+        role="img"
+        fill="currentColor"
+        height="18"
+        width="18"
+        aria-hidden="true"
+    >
+        <path
+            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
+        ></path>
+    </svg>
+</sp-icon>
+<sp-icon size="xxl">
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 22 22"
+        role="img"
+        fill="currentColor"
+        height="18"
+        width="18"
+        aria-hidden="true"
+    >
+        <path
+            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
+        ></path>
+    </svg>
+</sp-icon>
 ```
@@ -54,6 +132,4 @@
 
+```html
 <sp-icon name="ui:Magnifier" label="Magnify"></sp-icon>
-
 ```
-<sp-icon name="ui:Magnifier" label="Magnify"></sp-icon>
-```

src/icon.css.ts

@@ -18,4 +18,4 @@ /*
 var(--spectrum-global-dimension-size-225))*2);width:calc(var(--spectrum-alias-workflow-icon-size,
-var(--spectrum-global-dimension-size-225))*2)}:host([size=xl]),:host([size=xl]) img,:host([size=xl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*2);width:calc(var(--spectrum-global-dimension-size-300)*2)}:host([size=xxl]),:host([size=xxl]) img,:host([size=xxl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*3);width:calc(var(--spectrum-global-dimension-size-300)*3)}#container{height:100%}
+var(--spectrum-global-dimension-size-225))*2)}:host([size=xl]),:host([size=xl]) img,:host([size=xl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*2);width:calc(var(--spectrum-global-dimension-size-300)*2)}:host([size=xxl]),:host([size=xxl]) img,:host([size=xxl]) svg{height:calc(var(--spectrum-global-dimension-size-300)*3);width:calc(var(--spectrum-global-dimension-size-300)*3)}#container{height:100%}img{height:auto}::slotted(*),img{width:100%;vertical-align:top}::slotted(*){height:100%}
 `;
 export default styles;

src/icon.ts

@@ -25,3 +25,3 @@ /*
 import iconStyles from './icon.css.js';
-import { nothing } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
 
@@ -54,3 +54,3 @@ export class Icon extends LitElement {
         super.connectedCallback();
-        window.addEventListener('sp-iconset:added', this.iconsetListener);
+        window.addEventListener('sp-iconset-added', this.iconsetListener);
     }
@@ -60,3 +60,3 @@
         super.disconnectedCallback();
-        window.removeEventListener('sp-iconset:added', this.iconsetListener);
+        window.removeEventListener('sp-iconset-added', this.iconsetListener);
     }
@@ -89,4 +89,13 @@
     protected render(): TemplateResult {
+        if (this.name) {
+            return html`
+                <div id="container"></div>
+            `;
+        } else if (this.src) {
+            return html`
+                <img src="${this.src}" alt=${ifDefined(this.label)} />
+            `;
+        }
         return html`
-            <div id="container">${this.renderIcon()}</div>
+            <slot></slot>
         `;
@@ -130,13 +139,2 @@ }
 
-    private renderIcon(): TemplateResult {
-        // handle src image case
-        return html`
-            ${this.src
-                ? html`
-                      <img src="${this.src}" />
-                  `
-                : nothing}
-        `;
-    }
-
     protected async _getUpdateComplete(): Promise<void> {
@@ -143,0 +141,0 @@ await super._getUpdateComplete();

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

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

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

Improved metrics

Total package byte prevSize

205542

increased by1.8%

Lines of code

2632

increased by0.3%

Number of lines in readme file

132

increased by135.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@spectrum-web-components/iconset@^0.1.5