@forter/icon - npm Package Compare versions

Comparing version 3.0.1 to 3.2.0

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+# [3.2.0](https://github.com/forter/web-components/compare/@forter/icon@3.1.0...@forter/icon@3.2.0) (2019-09-16)
+
+
+### Features
+
+* **icon:** add --fc-icon-size css var ([e46e9ee](https://github.com/forter/web-components/commit/e46e9ee))
+* **icon:** refactor that bumps version ([3c16f0e](https://github.com/forter/web-components/commit/3c16f0e))
+
+
+
+
+
+# [3.1.0](https://github.com/forter/web-components/compare/@forter/icon@3.0.1...@forter/icon@3.1.0) (2019-09-09)
+
+
+### Features
+
+* **icon:** changing colors ([5b9a354](https://github.com/forter/web-components/commit/5b9a354))
+
+
+
+
+
 ## [3.0.1](https://github.com/forter/web-components/compare/@forter/icon@3.0.0...@forter/icon@3.0.1) (2019-09-03)
@@ -8,0 +31,0 @@

fc-icon.css.js

@@ -5,2 +5,4 @@ import { css } from 'lit-element';
   opacity: 1;
+  height: var(--fc-icon-size, 20px);
+  width: var(--fc-icon-size, 20px);
 }
@@ -15,3 +17,3 @@
 
-  --fc-icon-fill-hover: var(--ftr-cyan);
+  --fc-icon-fill-hover: var(--ftr-apply);
 }
@@ -18,0 +20,0 @@

FcIcon.js

 import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
-import { IsSlottedMixin } from '@forter/mixins/is-slotted-mixin';
 import { LitElement, property, html } from 'lit-element';
@@ -19,15 +18,6 @@ import { getPxString as getPxString$1 } from '@forter/functions/get-px-string';
 const getPxString = getPxString$1(DEFAULT_SIZE);
-/** @typedef {import('lit-html').SVGTemplateResult} Icon */
+/** @typedef {import('lit-html').SVGTemplateResult} SVGTemplateResult */
 
-/** @typedef {Map<string, Icon>} IconCache */
-
 /**
- * # `<fc-icon>`
  *
- * ## Styling
- * | Variable | Description | Default |
- * | -------- | ----------- | ------- |
- * | `--fc-icon-fill` | icon's svg fill | --ftr-secondary-1
- * | `--fc-icon-fill-hover` | icon's svg fill on hover | --ftr-primary-2
- *
  * ### Example
@@ -47,10 +37,12 @@ * Create blue icon and red on hover.
  *
- * @customElement
- * @mixes IsSlottedMixin
+ * @element fc-icon
  *
+ * @cssprop --fc-icon-fill - icon's svg fill. default: `currentColor`
+ * @cssprop --fc-icon-fill-hover - icon's svg fill on hover. default: `var(--cyan-5)`
+ *
  */
 
 
-let FcIcon = _decorate(null, function (_initialize, _IsSlottedMixin) {
-  class FcIcon extends _IsSlottedMixin {
+let FcIcon = _decorate(null, function (_initialize, _LitElement) {
+  class FcIcon extends _LitElement {
     constructor(...args) {
@@ -92,3 +84,4 @@ super(...args);
       decorators: [property({
-        type: String
+        type: String,
+        attribute: 'fallback-icon'
       })],
@@ -145,3 +138,3 @@ key: "fallbackIcon",
       value() {
-        return '20px';
+        return 20;
       }
@@ -155,3 +148,3 @@
        * Reference to the icon cache. This globally shared reference stores icons for all instance.
-       * @type {IconCache}
+       * @type {Map<string, Object>}
        */
@@ -162,2 +155,3 @@
        * @type {Boolean}
+       * @attr
        */
@@ -168,2 +162,3 @@
        * @type {String}
+       * @attr fallback-icon
        */
@@ -174,2 +169,3 @@
        * @type {String}
+       * @attr
        */
@@ -180,2 +176,3 @@
        * @type {Boolean}
+       * @attr original-fill
        */
@@ -186,2 +183,4 @@
        * @type {String}
+       * @attr
+       * @deprecated
        */
@@ -229,8 +228,8 @@ function size() {
         } = this;
-        const width = size;
-        const height = size;
+        const styles = {
+          '--fc-icon-size': size
+        };
         return html`
       <div id="content" style="${styleMap({
-          height,
-          width
+          styles
         })}">
@@ -264,3 +263,3 @@ ${until(this.getIcon(icon), '')}
        * @param  {String} key icon name
-       * @return {Promise<Icon>} Icon
+       * @return {Promise<SVGTemplateResult>} Icon
        */
@@ -272,5 +271,17 @@
       value: function getIcon(key) {
-        return !isMap(this.cache) ? '' : this.cache.has(key) ? this.cache.get(key) : import(`./icons/${key}.svg.js`).then(getDefaultExport).then(this.cacheIcon.bind(this, key)).catch(constant(this.cache.get(DEFAULT_ICON) || ''));
+        return !isMap(this.cache) ? '' : this.cache.has(key) ? this.cache.get(key) : this.importIcon(key);
       }
       /**
+       * Imports an icon dynamically by key
+       * @param  {String} key icon name
+       * @return {Promise<SVGTemplateResult>}
+       */
+
+    }, {
+      kind: "method",
+      key: "importIcon",
+      value: function importIcon(key) {
+        return import(`./icons/${key}.svg.js`).then(getDefaultExport).then(this.cacheIcon.bind(this, key)).catch(constant(this.cache.get(DEFAULT_ICON) || ''));
+      }
+      /**
        * Sets an icon to the cache, then returns the icon
@@ -289,19 +300,7 @@ * @param {String} key icon name
       }
-      /** @inheritdoc */
-
-    }, {
-      kind: "method",
-      key: "updated",
-      value: function updated() {
-        const {
-          hasTooltipContent: oldVal
-        } = this;
-        this._hasTooltipContent = this.isSlotted('tooltip-content');
-        this.requestUpdate('hasTooltipContent', oldVal);
-      }
     }]
   };
-}, IsSlottedMixin(LitElement));
+}, LitElement);
 
 export { FcIcon };
 //# sourceMappingURL=FcIcon.js.map

package.json

 {
   "name": "@forter/icon",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "Icon Component from Forter Components",
@@ -47,3 +47,3 @@ "main": "index.js",
     "@forter/functions": "^2.0.0",
-    "@forter/mixins": "^2.0.0",
+    "@forter/mixins": "^3.0.0",
     "crocks": "^0.11.1",
@@ -53,3 +53,3 @@ "lit-element": "^2.1.0",
   },
-  "gitHead": "3a02cb2ef78ee9d597e98f1db7a3c9d820319f11"
+  "gitHead": "95651597e8de75c722b9e06ebba9fba86f66108e"
 }

src/fc-icon.spec.js

@@ -80,3 +80,3 @@ import constant from 'crocks/combinators/constant';
     beforeEach(setupTest);
-    it('converts attr', assertProperties({ size: '20px' }));
+    it('converts attr', assertProperties({ size: 20 }));
     it('renders size', assertRender);
@@ -83,0 +83,0 @@ });

src/FcIcon.js

@@ -1,2 +0,1 @@
-import { IsSlottedMixin } from '@forter/mixins/is-slotted-mixin';
 import { LitElement, html, property } from 'lit-element';
@@ -17,14 +16,6 @@ import { getPxString as _getPxString } from '@forter/functions/get-px-string';
 
-/** @typedef {import('lit-html').SVGTemplateResult} Icon */
-/** @typedef {Map<string, Icon>} IconCache */
+/** @typedef {import('lit-html').SVGTemplateResult} SVGTemplateResult */
 
 /**
- * # `<fc-icon>`
  *
- * ## Styling
- * | Variable | Description | Default |
- * | -------- | ----------- | ------- |
- * | `--fc-icon-fill` | icon's svg fill | --ftr-secondary-1
- * | `--fc-icon-fill-hover` | icon's svg fill on hover | --ftr-primary-2
- *
  * ### Example
@@ -44,10 +35,12 @@ * Create blue icon and red on hover.
  *
- * @customElement
- * @mixes IsSlottedMixin
+ * @element fc-icon
  *
+ * @cssprop --fc-icon-fill - icon's svg fill. default: `currentColor`
+ * @cssprop --fc-icon-fill-hover - icon's svg fill on hover. default: `var(--cyan-5)`
+ *
  */
-export class FcIcon extends IsSlottedMixin(LitElement) {
+export class FcIcon extends LitElement {
   /**
    * Reference to the icon cache. This globally shared reference stores icons for all instance.
-   * @type {IconCache}
+   * @type {Map<string, Object>}
    */
@@ -59,2 +52,3 @@ @property({ attribute: false }) cache = cache;
    * @type {Boolean}
+   * @attr
    */
@@ -66,4 +60,5 @@ @property({ type: Boolean, reflect: true }) hoverable = false;
    * @type {String}
+   * @attr fallback-icon
    */
-  @property({ type: String }) fallbackIcon = DEFAULT_ICON;
+  @property({ type: String, attribute: 'fallback-icon' }) fallbackIcon = DEFAULT_ICON;
 
@@ -73,2 +68,3 @@ /**
    * @type {String}
+   * @attr
    */
@@ -80,2 +76,3 @@ @property({ type: String, attribute: 'icon' }) icon = '';
    * @type {Boolean}
+   * @attr original-fill
    */
@@ -87,2 +84,4 @@ @property({ type: Boolean, attribute: 'original-fill' }) originalFill = false;
    * @type {String}
+   * @attr
+   * @deprecated
    */
@@ -94,3 +93,3 @@ @property({ type: Number, converter: {
 
-  _size = '20px';
+  _size = 20;
 
@@ -118,7 +117,8 @@ get size() {
 
-    const width = size;
-    const height = size;
+    const styles = {
+      '--fc-icon-size': size,
+    };
 
     return html`
-      <div id="content" style="${styleMap({ height, width })}">
+      <div id="content" style="${styleMap({ styles })}">
         ${until(this.getIcon(icon), '')}
@@ -144,3 +144,3 @@ </div>
    * @param  {String} key icon name
-   * @return {Promise<Icon>} Icon
+   * @return {Promise<SVGTemplateResult>} Icon
    */
@@ -151,6 +151,3 @@ getIcon(key) {
       : this.cache.has(key) ? this.cache.get(key)
-      : import(`./icons/${key}.svg.js`)
-        .then(getDefaultExport)
-        .then(this.cacheIcon.bind(this, key))
-        .catch(constant(this.cache.get(DEFAULT_ICON) || ''))
+      : this.importIcon(key)
     );
@@ -160,2 +157,14 @@ }
   /**
+   * Imports an icon dynamically by key
+   * @param  {String} key icon name
+   * @return {Promise<SVGTemplateResult>}
+   */
+  importIcon(key) {
+    return import(`./icons/${key}.svg.js`)
+      .then(getDefaultExport)
+      .then(this.cacheIcon.bind(this, key))
+      .catch(constant(this.cache.get(DEFAULT_ICON) || ''));
+  }
+
+  /**
    * Sets an icon to the cache, then returns the icon
@@ -170,9 +179,2 @@ * @param {String} key icon name
   }
-
-  /** @inheritdoc */
-  updated() {
-    const { hasTooltipContent: oldVal } = this;
-    this._hasTooltipContent = this.isSlotted('tooltip-content');
-    this.requestUpdate('hasTooltipContent', oldVal);
-  }
 }

stories/icon.stories.js

@@ -13,4 +13,3 @@ import { html } from 'lit-html';
 
-function elementProperties({
-  size = 24,
+export function elementProperties({
   originalFill = false,
@@ -26,3 +25,2 @@ hoverable = false,
         ?original-fill="${boolean('originalFill', originalFill)}"
-        size="${number('size', size, { range: true, min: 10, max: 500 })}px"
         icon="${text('icon', icon)}"
@@ -33,11 +31,7 @@ ></fc-icon>
 
-function size() {
-  return elementProperties({ size: 24 });
-}
-
-function noIcon() {
+export function noIconsInCache() {
   return elementProperties({ icon: null });
 }
 
-function customStyles() {
+export function customStyles() {
   return html`
@@ -47,2 +41,4 @@ <style>
       --fc-icon-fill: ${color('--fc-icon-fill', 'blue')};
+      --fc-icon-size: ${number('size', 18, { range: true, min: 10, max: 500 })}px;
+
     }
@@ -54,14 +50,3 @@ </style>
 
-function hoverable() {
-  return html`
-    <style>
-    fc-icon {
-      --fc-icon-fill-hover: ${color('--fc-icon-fill-hover', 'orange')};
-    }
-    </style>
-    ${elementProperties({ hoverable: true })}
-  `;
-}
-
-function customCache() {
+export function customCache() {
   const def = m => m.default;
@@ -74,2 +59,9 @@ async function loadCustomCacheTpl() {
     }));
+
+    const iconKnob = select('icon', [
+      'device-desktop',
+      'microphone',
+      'admin',
+    ], 'device-desktop');
+
     return html`
@@ -83,8 +75,4 @@ <style>
       .cache="${cache}"
-      ?original-fill="${boolean('originalFill', true)}"
-      icon="${select('icon', [
-      'device-desktop',
-      'microphone',
-      'admin',
-    ], 'device-desktop')}"
+      ?original-fill="${boolean('original-fill', true)}"
+      icon="${iconKnob}"
     ></fc-icon>`;
@@ -95,10 +83,20 @@ }
 
-(storiesOf('Display Components|Icon', module)
-  .addDecorator(withKnobs)
-  .add('Element Properties', elementProperties, { notes, options })
-  .add('No Icon in Cache', noIcon, { notes, options })
-  .add('Size', size, { notes, options })
-  .add('Custom Styles', customStyles, { notes, options })
-  .add('Custom Cache', customCache, { notes, options })
-  .add('Hoverable', hoverable, { notes, options })
-);
+export function hoverable() {
+  return html`
+    <style>
+    fc-icon {
+      --fc-icon-fill-hover: ${color('--fc-icon-fill-hover', 'orange')};
+    }
+    </style>
+    ${elementProperties({ hoverable: true })}
+  `;
+}
+
+export default {
+  title: 'Display Components|Icon',
+  decorators: [withKnobs],
+  parameters: {
+    notes: { markdown },
+    options: { selectedPanel: 'storybooks/knobs/panel' },
+  },
+};

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

Worsened metrics

Total package byte prevSize

154927

decreased by-2.59%

Number of package files

142

decreased by-0.7%

Lines of code

1817

decreased by-3.56%

Number of lines in readme file

1

decreased by-95.45%

Dependency changes

• + Added@forter/mixins@3.2.8(transitive)

• - Removed@forter/mixins@2.0.0(transitive)

• Updated@forter/mixins@^3.0.0