@forter/icon - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

_virtual/_rollupPluginBabelHelpers.js

@@ -470,2 +470,2 @@ function _getPrototypeOf(o) {
 
-export { _getPrototypeOf as getPrototypeOf, _superPropBase as superPropBase, _get as get, _toArray as toArray, _arrayWithHoles as arrayWithHoles, _iterableToArray as iterableToArray, _nonIterableRest as nonIterableRest, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey, _decorate as decorate };
+export { _arrayWithHoles as arrayWithHoles, _decorate as decorate, _get as get, _getPrototypeOf as getPrototypeOf, _iterableToArray as iterableToArray, _nonIterableRest as nonIterableRest, _superPropBase as superPropBase, _toArray as toArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

cache.js

@@ -8,2 +8,2 @@ const instances = new Map();
 
-export { instances, cache, registerIconCache };
+export { cache, instances, registerIconCache };

FcIcon.js

 import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 import { IsSlottedMixin } from '@forter/helpers/mixins/is-slotted-mixin';
 import { translate } from '@forter/directives';
+import { getPxString } from '@forter/helpers/functions/get-px-string';
 import constant from 'crocks/combinators/constant';
@@ -15,12 +16,8 @@ import { property, html, LitElement } from 'lit-element';
 const getDefaultExport = module => module.default;
-/**
- * Returns a css size string
- * @param  {String|Number} size
- * @return {String|NaN}
- */
 
-
-function getSize(size) {
-  return !size ? '20px' : Number.isNaN(size) ? size : `${size}px`;
-}
+const DEFAULT_SIZE = 20;
+const sizeConverter = {
+  fromAttribute: getPxString(DEFAULT_SIZE),
+  toAttribute: String
+};
 /**
@@ -51,3 +48,2 @@ * # `<fc-icon>`
 
-
 let FcIcon = _decorate(null, function (_initialize, _IsSlottedMixin) {
@@ -79,15 +75,11 @@ class FcIcon extends _IsSlottedMixin {
       decorators: [property({
-        type: String,
-        attribute: 'icon'
-      })],
-      key: "icon",
-      value: void 0
-    }, {
-      kind: "field",
-      decorators: [property({
         type: Boolean,
-        attribute: 'original-fill'
+        reflect: true
       })],
-      key: "originalFill",
-      value: void 0
+      key: "hoverable",
+
+      value() {
+        return false;
+      }
+
     }, {
@@ -98,4 +90,8 @@ kind: "field",
       })],
-      key: "tooltip",
-      value: void 0
+      key: "hoverDuration",
+
+      value() {
+        return '80ms';
+      }
+
     }, {
@@ -105,14 +101,22 @@ kind: "field",
         type: String,
-        attribute: 'width'
+        attribute: 'icon'
       })],
-      key: "width",
-      value: void 0
+      key: "icon",
+
+      value() {
+        return '';
+      }
+
     }, {
       kind: "field",
       decorators: [property({
-        type: String,
-        attribute: 'height'
+        type: Boolean,
+        attribute: 'original-fill'
       })],
-      key: "height",
-      value: void 0
+      key: "originalFill",
+
+      value() {
+        return true;
+      }
+
     }, {
@@ -123,6 +127,6 @@ kind: "field",
       })],
-      key: "hoverDuration",
+      key: "position",
 
       value() {
-        return '80ms';
+        return 'bottom';
       }
@@ -133,8 +137,19 @@
       decorators: [property({
+        converter: sizeConverter
+      })],
+      key: "size",
+
+      value() {
+        return `${DEFAULT_SIZE}px`;
+      }
+
+    }, {
+      kind: "field",
+      decorators: [property({
         type: String
       })],
-      key: "position",
+      key: "tooltip",
 
       value() {
-        return 'bottom';
+        return '';
       }
@@ -167,13 +182,11 @@
         const {
+          icon,
           originalFill,
           position,
+          size,
           tooltip
         } = this;
         const noOriginalFill = !originalFill;
-        let {
-          width,
-          height
-        } = this;
-        width = getSize(width);
-        height = getSize(height);
+        const width = size;
+        const height = size;
         return html`
@@ -202,3 +215,3 @@ ${!tooltip ? '' : html`
         })}">
-        ${until(this.getIcon(this.icon), FALLBACK_ICON)}
+        ${until(this.getIcon(icon), FALLBACK_ICON)}
      </div>
@@ -238,4 +251,3 @@ </div>
       value: async function getIcon(key) {
-        if (this.cache.has(key)) return this.cache.get(key);
-        return await import(`./icons/${key}.svg.js`).then(getDefaultExport).then(this.cacheIcon.bind(this, key)).catch(constant(FALLBACK_ICON));
+        return this.cache.has(key) ? this.cache.get(key) : await import(`./icons/${key}.svg.js`).then(getDefaultExport).then(this.cacheIcon.bind(this, key)).catch(constant(FALLBACK_ICON));
       }
@@ -242,0 +254,0 @@ /**

index.js

@@ -1,2 +0,2 @@
-export { instances, cache, registerIconCache } from './cache.js';
+export { cache, instances, registerIconCache } from './cache.js';
 export { default as forter } from './icons/forter.svg.js';
@@ -3,0 +3,0 @@ import './fc-icon.js';

package.json

 {
   "name": "@forter/icon",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Icon Component from Forter Components",
@@ -46,3 +46,3 @@ "main": "index.js",
     "@forter/directives": "^1.0.0-alpha.0",
-    "@forter/helpers": "^1.0.0-alpha.0",
+    "@forter/helpers": "^1.0.0-alpha.1",
     "@forter/styles": "^1.0.0-alpha.2",
@@ -58,3 +58,3 @@ "crocks": "^0.11.1"
   },
-  "gitHead": "734b02841a03001ac2a7abe19bf267fe5ff3e1eb"
+  "gitHead": "922162e80565d1a5211c94043f0f90e5cb33ba65"
 }

src/fc-icon.spec.js

@@ -12,2 +12,34 @@ import { expect, fixture, defineCE } from '@open-wc/testing';
   });
+
+  describe('size', function() {
+    it('accepts a size attr as string', async function() {
+      const el = await fixture(`<${Icon} size="20"></${Icon}>`);
+      expect(el.size).to.equal('20px');
+    });
+
+    it('converts a number size attr', async function() {
+      const el = await fixture(`<${Icon} size="20"></${Icon}>`);
+      expect(el.size).to.equal('20px');
+    });
+
+    it('converts a string size attr', async function() {
+      const el = await fixture(`<${Icon} size="30px"></${Icon}>`);
+      expect(el.size).to.equal('30px');
+    });
+
+    it('falls back to default for bad size attr', async function() {
+      const el = await fixture(`<${Icon} size="undefined"></${Icon}>`);
+      expect(el.size).to.equal('20px');
+    });
+
+    it('falls back to default for empty size attr', async function() {
+      const el = await fixture(`<${Icon} size></${Icon}>`);
+      expect(el.size).to.equal('20px');
+    });
+
+    it('falls back to default for no size attr', async function() {
+      const el = await fixture(`<${Icon}></${Icon}>`);
+      expect(el.size).to.equal('20px');
+    });
+  });
 });

src/FcIcon.js

 import { IsSlottedMixin } from '@forter/helpers/mixins/is-slotted-mixin';
 import { translate } from '@forter/directives';
+import { getPxString } from '@forter/helpers/functions/get-px-string';
+
 import constant from 'crocks/combinators/constant';
@@ -16,11 +18,8 @@
 const getDefaultExport = module => module.default;
+const DEFAULT_SIZE = 20;
 
-/**
- * Returns a css size string
- * @param  {String|Number} size
- * @return {String|NaN}
- */
-function getSize(size) {
-  return !size ? '20px' : Number.isNaN(size) ? size : `${size}px`;
-}
+const sizeConverter = {
+  fromAttribute: getPxString(DEFAULT_SIZE),
+  toAttribute: String,
+};
 
@@ -54,15 +53,15 @@ /**
 
-  @property({ type: String, attribute: 'icon' }) icon;
+  @property({ type: Boolean, reflect: true }) hoverable = false;
 
-  @property({ type: Boolean, attribute: 'original-fill' }) originalFill;
+  @property({ type: String }) hoverDuration = '80ms';
 
-  @property({ type: String }) tooltip;
+  @property({ type: String, attribute: 'icon' }) icon = '';
 
-  @property({ type: String, attribute: 'width' }) width;
+  @property({ type: Boolean, attribute: 'original-fill' }) originalFill = true;
 
-  @property({ type: String, attribute: 'height' }) height;
+  @property({ type: String }) position = 'bottom';
 
-  @property({ type: String }) hoverDuration = '80ms';
+  @property({ converter: sizeConverter }) size = `${DEFAULT_SIZE}px`;
 
-  @property({ type: String }) position = 'bottom';
+  @property({ type: String }) tooltip = '';
 
@@ -78,7 +77,7 @@ static is = 'fc-icon';
   render() {
-    const { originalFill, position, tooltip } = this;
+    const { icon, originalFill, position, size, tooltip } = this;
     const noOriginalFill = !originalFill;
-    let { width, height } = this;
-    width = getSize(width);
-    height = getSize(height);
+    const width = size;
+    const height = size;
+
     return html`
@@ -102,3 +101,3 @@ ${!tooltip ? '' : html`
           style="${styleMap({ height, width })}">
-        ${until(this.getIcon(this.icon), FALLBACK_ICON)}
+        ${until(this.getIcon(icon), FALLBACK_ICON)}
      </div>
@@ -127,7 +126,8 @@ </div>
   async getIcon(key) {
-    if (this.cache.has(key)) return this.cache.get(key);
-    return await import(`./icons/${key}.svg.js`)
-      .then(getDefaultExport)
-      .then(this.cacheIcon.bind(this, key))
-      .catch(constant(FALLBACK_ICON));
+    return this.cache.has(key)
+      ? this.cache.get(key)
+      : await import(`./icons/${key}.svg.js`)
+        .then(getDefaultExport)
+        .then(this.cacheIcon.bind(this, key))
+        .catch(constant(FALLBACK_ICON));
   }
@@ -134,0 +134,0 @@

stories/icon.stories.js

 import { html } from 'lit-html';
 import { withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
-import { withKnobs, color } from '@storybook/addon-knobs';
+import { withKnobs, color, number, object } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/polymer';
@@ -13,9 +13,14 @@
 
-const withTemplate = (template, overrides) =>
-  withClassPropertiesKnobs(FcIcon, { template, overrides });
+function elementProperties() {
+  return withClassPropertiesKnobs(FcIcon, { template: html`
+    <fc-icon></fc-icon>
+  `, overrides: el => [
+    { key: 'cache', fn: () => el.cache }
+  ]});
+}
 
-const basic = withTemplate(html`<fc-icon></fc-icon>`);
-
-function defaultView() {
-  return basic
+function size() {
+  return html`
+    <fc-icon size="${number('Size', 24, { range: true, min: 10, max: 500 })}px"></fc-icon>
+  `;
 }
@@ -30,3 +35,3 @@
     </style>
-    ${basic}
+    <fc-icon></fc-icon>
   `;
@@ -42,5 +47,3 @@ }
     </style>
-    ${withTemplate(html`
-      <fc-icon hoverable></fc-icon>
-    `)}
+    <fc-icon hoverable></fc-icon>
   `;
@@ -51,5 +54,6 @@ }
   .addDecorator(withKnobs)
-  .add('Default', defaultView, { notes, options })
+  .add('Element Properties', elementProperties, { notes, options })
+  .add('Size', size, { notes, options })
   .add('Custom Styles', customStyles, { notes, options })
   .add('Hoverable', hoverable, { notes, options })
 );

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

Improved metrics

Total package byte prevSize

96664

increased by1.4%

Lines of code

1540

increased by2.19%

Dependency changes

• Updated@forter/helpers@^1.0.0-alpha.1