@forter/avatar - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.0-alpha.1

_virtual/_rollupPluginBabelHelpers.js

@@ -433,2 +433,2 @@ function _toArray(arr) {
 
-export { _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, _iterableToArray as iterableToArray, _nonIterableRest as nonIterableRest, _toArray as toArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };

FcAvatar.js

@@ -40,3 +40,7 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
       key: "src",
-      value: void 0
+
+      value() {
+        return '';
+      }
+
     }, {
@@ -48,3 +52,7 @@ kind: "field",
       key: "abbr",
-      value: void 0
+
+      value() {
+        return '';
+      }
+
     }, {
@@ -80,5 +88,10 @@ kind: "field",
       function render() {
+        const {
+          abbr,
+          alt,
+          src
+        } = this;
         return html`
       <button>
-        ${this.src ? html`<img alt="${this.alt}" src="${this.src}"></img>` : html`<div id="abbr">${initial(this.abbr)}</div>`}
+        ${src ? html`<img alt="${alt}" src="${src}"></img>` : html`<div id="abbr">${initial(abbr)}</div>`}
       </button>
@@ -85,0 +98,0 @@ `;

package.json

 {
   "name": "@forter/avatar",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.1",
   "description": "Avatar from Forter Components",
@@ -21,3 +21,4 @@ "main": "index.js",
     "type": "git",
-    "url": "git+https://github.com/forter/web-components.git"
+    "url": "git+https://github.com/forter/web-components.git",
+    "directory": "packages/avatar"
   },
@@ -58,5 +59,5 @@ "publishConfig": {
   "dependencies": {
-    "@forter/helpers": "^1.0.0-alpha.0"
+    "@forter/helpers": "^1.0.0-alpha.1"
   },
-  "gitHead": "8f10a43ebb7d05fa2cd442c9142cf5eb8e9179c5"
+  "gitHead": "f8eae8782618154c7688b8c84892ddff96d1f82a"
 }

src/FcAvatar.js

@@ -17,6 +17,6 @@ import { LitElement, html, property } from 'lit-element';
   /** URL to avatar image */
-  @property({ type: String }) src;
+  @property({ type: String }) src = '';
 
   /** Fallback Text Initial */
-  @property({ type: String }) abbr;
+  @property({ type: String }) abbr = '';
 
@@ -29,7 +29,8 @@ static is = 'fc-avatar';
   render() {
+    const { abbr, alt, src } = this;
     return html`
       <button>
         ${(
-            this.src ? html`<img alt="${this.alt}" src="${this.src}"></img>`
-          : html`<div id="abbr">${initial(this.abbr)}</div>`
+            src ? html`<img alt="${alt}" src="${src}"></img>`
+          : html`<div id="abbr">${initial(abbr)}</div>`
         )}
@@ -36,0 +37,0 @@ </button>

stories/avatar.stories.js

 import { html } from 'lit-html';
 import { withClassPropertiesKnobs } from '@open-wc/demoing-storybook';
-import { withKnobs, number } from '@storybook/addon-knobs';
+import { withKnobs, number, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/polymer';
@@ -13,15 +13,18 @@
 
-const withTemplate = (template, overrides) =>
-  withClassPropertiesKnobs(FcAvatar, { template, overrides });
+function elementProperties() {
+  return withClassPropertiesKnobs(FcAvatar, { template: html`
+    <fc-avatar></fc-avatar>
+  `, overrides: el => [
+    { key: 'abbr', fn: () => text('abbr', el.abbr) },
+    { key: 'alt', fn: () => text('alt', el.alt) },
+    { key: 'src', fn: () => text('src', el.src) },
+  ]});
+}
 
 function withAbbreviation() {
-  return withTemplate(html`
-    <fc-avatar abbr="F"></fc-avatar>
-  `);
+  return html`<fc-avatar abbr="${text('Abbreviation', 'Forter')}"></fc-avatar>`;
 }
 
 function withImage() {
-  return withTemplate(html`
-    <fc-avatar src="https://placekitten.com/128/128"></fc-avatar>
-  `);
+  return html`<fc-avatar src="${text('Image URL', 'https://placekitten.com/128/128')}"></fc-avatar>`;
 }
@@ -36,5 +39,3 @@
     </style>
-    ${withTemplate(html`
-      <fc-avatar abbr="A"></fc-avatar>
-    `)}
+    <fc-avatar abbr="A"></fc-avatar>
   `;
@@ -45,2 +46,3 @@ }
   .addDecorator(withKnobs)
+  .add('Element Properties', elementProperties, { notes, options })
   .add('With Abbreviation', withAbbreviation, { notes, options })
@@ -47,0 +49,0 @@ .add('With Image', withImage, { 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

36302

increased by1.18%

Lines of code

689

increased by1.77%

Dependency changes

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