@forter/avatar - npm Package Compare versions

Comparing version 3.0.2 to 3.0.3

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [3.0.3](https://github.com/forter/web-components/compare/@forter/avatar@3.0.2...@forter/avatar@3.0.3) (2019-11-27)
+
+**Note:** Version bump only for package @forter/avatar
+
+
+
+
+
 ## [3.0.2](https://github.com/forter/web-components/compare/@forter/avatar@3.0.1...@forter/avatar@3.0.2) (2019-09-16)
@@ -8,0 +16,0 @@

fc-avatar.css.js

@@ -16,4 +16,5 @@ import { css } from 'lit-element';
   transition: all 0.3s ease-out;
-  background-color: rgba(0, 0, 0, 0.1);
-  background-color: transparent;
+  background-color: var(--fc-avatar-background-color, rgba(0, 0, 0, 0.1));
+
+  /* background-color: transparent; */
   border-color: transparent;
@@ -20,0 +21,0 @@ border-radius: 50%;

FcAvatar.js

 import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 import { LitElement, property, html } from 'lit-element';
-import style from './fc-avatar.css.js';
+import style from './fc-avatar.css';
 
 const initial = x => typeof x !== 'string' ? '' : x.substring(0, 1).toUpperCase();
 /**
- * Avatar element. Can represent either an image or an initial.
+ * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
  *
  * ## Usage
+ *
  * ```html
- * <fc-avatar abbr="Foo Bar"></fc-avatar>
+ * <script>
+ *   import '@forter/avatar';
+ * </script>
  *
  * <fc-avatar
- *   src="https://gravatar.com/avatar/foo"
- *   alt="Photo of Mr. Foo"
- * ></fc-avatar>
+ *   abbr="Foo Bar">
+ * </fc-avatar>
  * ```
  *
  * @element fc-avatar
- * @cssprop --fc-avatar-size - height and width of the avatar. default: `48px`
+ * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`
+ * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`
  */
@@ -39,10 +42,7 @@
       decorators: [property({
-        type: String
+        type: String,
+        reflect: true
       })],
-      key: "alt",
-
-      value() {
-        return 'User Avatar';
-      }
-
+      key: "src",
+      value: void 0
     }, {
@@ -53,6 +53,6 @@ kind: "field",
       })],
-      key: "src",
+      key: "alt",
 
       value() {
-        return '';
+        return 'User Avatar';
       }
@@ -63,10 +63,7 @@
       decorators: [property({
-        type: String
+        type: String,
+        reflect: true
       })],
       key: "abbr",
-
-      value() {
-        return '';
-      }
-
+      value: void 0
     }, {
@@ -95,17 +92,14 @@ kind: "field",
       /**
-       * URL to avatar image
+       * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`
        * @type {String}
-       * @attr
        */
 
       /**
-       * URL to avatar image
+       * alternative text for accessibility. example: `with`
        * @type {String}
-       * @attr
        */
 
       /**
-       * Fallback Text Initial
+       * two chars in the generated avatar.
        * @type {String}
-       * @attr
        */
@@ -120,5 +114,13 @@
         } = this;
+
+        if (src) {
+          return html`<button>
+          <img alt="${alt}" src="${src}"></img>
+        </button> 
+      `;
+        }
+
         return html`
       <button>
-        ${src ? html`<img alt="${alt}" src="${src}"></img>` : html`<div id="abbr">${initial(abbr)}</div>`}
+        <div id="abbr">${initial(abbr)}</div>
       </button>
@@ -125,0 +127,0 @@ `;

package.json

 {
   "name": "@forter/avatar",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Avatar from Forter Components",
@@ -50,7 +50,7 @@ "main": "index.js",
   "dependencies": {
-    "@forter/core": "^2.0.0",
+    "@forter/core": "^2.0.1",
     "lit-element": "^2.1.0",
     "lit-html": "^1.1.0"
   },
-  "gitHead": "95651597e8de75c722b9e06ebba9fba86f66108e"
+  "gitHead": "26a81b071f7d326de0472263bfd092842d61a9f8"
 }

README.md

 # fc-avatar
 
-Avatar element. Can represent either an image or an initial.
+Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
 
 ## Usage
+
 ```html
-<fc-avatar abbr="Foo Bar"></fc-avatar>
+<script>
+   import '@forter/avatar';
+</script>
 
 <fc-avatar
-   src="https://gravatar.com/avatar/foo"
-   alt="Photo of Mr. Foo"
-></fc-avatar>
+   abbr="Foo Bar">
+</fc-avatar>
 ```
@@ -17,12 +19,13 @@
 
-| Property | Attribute | Type             | Default       | Description           |
-|----------|-----------|------------------|---------------|-----------------------|
-| `abbr`   | `abbr`    | `string`         |               | Fallback Text Initial |
-| `alt`    | `alt`     | `string`         | "User Avatar" | URL to avatar image   |
-| `src`    | `src`     | `TemplateResult` |               |                       |
+| Property | Attribute | Type     | Default       | Description                                      |
+|----------|-----------|----------|---------------|--------------------------------------------------|
+| `abbr`   | `abbr`    | `string` |               | two chars in the generated avatar.               |
+| `alt`    | `alt`     | `string` | "User Avatar" | alternative text for accessibility. example: `with` |
+| `src`    | `src`     | `string` |               | URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png` |
 
 ## CSS Custom Properties
 
-| Property           | Description                                     |
-|--------------------|-------------------------------------------------|
-| `--fc-avatar-size` | height and width of the avatar. default: `48px` |
+| Property                       | Description                                      |
+|--------------------------------|--------------------------------------------------|
+| `--fc-avatar-background-color` | the color. default: `transparent`, example: `gold` |
+| `--fc-avatar-size`             | height and width. default: `48px`, example: `96px` |

src/FcAvatar.js

@@ -10,38 +10,38 @@ import { LitElement, html, property } from 'lit-element';
 /**
- * Avatar element. Can represent either an image or an initial.
+ * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
  *
  * ## Usage
+ *
  * ```html
- * <fc-avatar abbr="Foo Bar"></fc-avatar>
+ * <script>
+ *   import '@forter/avatar';
+ * </script>
  *
  * <fc-avatar
- *   src="https://gravatar.com/avatar/foo"
- *   alt="Photo of Mr. Foo"
- * ></fc-avatar>
+ *   abbr="Foo Bar">
+ * </fc-avatar>
  * ```
  *
  * @element fc-avatar
- * @cssprop --fc-avatar-size - height and width of the avatar. default: `48px`
+ * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`
+ * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`
  */
 export class FcAvatar extends LitElement {
   /**
-   * URL to avatar image
+   * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`
    * @type {String}
-   * @attr
    */
-  @property({ type: String }) alt = 'User Avatar';
+  @property({ type: String, reflect: true }) src;
 
   /**
-   * URL to avatar image
+   * alternative text for accessibility. example: `with`
    * @type {String}
-   * @attr
    */
-  @property({ type: String }) src = '';
+  @property({ type: String }) alt = 'User Avatar';
 
   /**
-   * Fallback Text Initial
+   * two chars in the generated avatar.
    * @type {String}
-   * @attr
    */
-  @property({ type: String }) abbr = '';
+  @property({ type: String, reflect: true }) abbr;
 
@@ -55,8 +55,13 @@ static is = 'fc-avatar';
     const { abbr, alt, src } = this;
+
+    if (src) {
+      return html`<button>
+          <img alt="${alt}" src="${src}"></img>
+        </button> 
+      `;
+    }
+
     return html`
       <button>
-        ${(
-            src ? html`<img alt="${alt}" src="${src}"></img>`
-          : html`<div id="abbr">${initial(abbr)}</div>`
-        )}
+        <div id="abbr">${initial(abbr)}</div>
       </button>
@@ -63,0 +68,0 @@ `;

stories/avatar.stories.js

@@ -1,37 +0,23 @@
-import { html } from 'lit-html';
-import { withKnobs, number, text } from '@storybook/addon-knobs';
-
+import {html} from 'lit-html';
+import { withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook';
+import '../src/fc-avatar.js';
+import {FcAvatar} from '../src/FcAvatar';
 import markdown from '../README.md';
 
-import { enumerateProperties } from '../../../lib/storybook-helpers';
+import {markdownToStories} from '../../../lib/storybook-helpers';
 
-import '../src';
-import { FcAvatar } from '../src/FcAvatar';
+export const {
+  defaultProperties,
+  abbr,
+  src,
+  alt,
+  size,
+  backgroundColor
+} = markdownToStories(FcAvatar, markdown);
 
-const story = enumerateProperties(FcAvatar);
-
-export const withAbbreviation = () => story(html`
-  <fc-avatar abbr="${text('Abbreviation', 'Forter')}"></fc-avatar>
-`) ;
-
-export const withImage = () => story(html`
-  <fc-avatar src="${text('Image URL', 'https://placekitten.com/128/128')}"></fc-avatar>
-`);
-
-export const withCustomStyles = () => story(html`
-  <style>
-  fc-avatar {
-    --fc-avatar-size: ${number('--fc-avatar-size', 48, { range: true, min: 12, max: 128, step: 1 })}px;
-  }
-  </style>
-  <fc-avatar abbr="A"></fc-avatar>
-`);
-
 export default {
   title: 'Display Components|Avatar',
-  decorators: [withKnobs],
-  parameters: {
-    notes: { markdown },
-    options: { selectedPanel: 'storybooks/knobs/panel' },
-  },
+  component: 'fc-avatar',
+  decorators: [withKnobs, withWebComponentsKnobs],
+  parameters: { options: { selectedPanel: 'storybookjs/knobs/panel' } },
 };

web-components.json

@@ -6,9 +6,15 @@ {
       "name": "fc-avatar",
-      "description": "Avatar element. Can represent either an image or an initial.\n\n## Usage\n```html\n<fc-avatar abbr=\"Foo Bar\"></fc-avatar>\n\n<fc-avatar\n   src=\"https://gravatar.com/avatar/foo\"\n   alt=\"Photo of Mr. Foo\"\n></fc-avatar>\n```",
-      "jsDoc": "/**\n * Avatar element. Can represent either an image or an initial.\n *\n * ## Usage\n * ```html\n * <fc-avatar abbr=\"Foo Bar\"></fc-avatar>\n *\n * <fc-avatar\n *   src=\"https://gravatar.com/avatar/foo\"\n *   alt=\"Photo of Mr. Foo\"\n * ></fc-avatar>\n * ```\n *\n * @element fc-avatar\n * @cssprop --fc-avatar-size - height and width of the avatar. default: `48px`\n */",
+      "description": "Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n\n## Usage\n\n```html\n<script>\n   import '@forter/avatar';\n</script>\n\n<fc-avatar\n   abbr=\"Foo Bar\">\n</fc-avatar>\n```",
+      "jsDoc": "/**\n * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/avatar';\n * </script>\n *\n * <fc-avatar\n *   abbr=\"Foo Bar\">\n * </fc-avatar>\n * ```\n *\n * @element fc-avatar\n * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`\n * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`\n */",
       "attributes": [
         {
+          "name": "src",
+          "description": "URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`",
+          "jsDoc": "/**\n   * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`\n   * @type {String}\n   */",
+          "type": "string"
+        },
+        {
           "name": "alt",
-          "description": "URL to avatar image",
-          "jsDoc": "/**\n   * URL to avatar image\n   * @type {String}\n   * @attr\n   */",
+          "description": "alternative text for accessibility. example: `with`",
+          "jsDoc": "/**\n   * alternative text for accessibility. example: `with`\n   * @type {String}\n   */",
           "type": "string"
@@ -18,9 +24,5 @@ },
           "name": "abbr",
-          "description": "Fallback Text Initial",
-          "jsDoc": "/**\n   * Fallback Text Initial\n   * @type {String}\n   * @attr\n   */",
+          "description": "two chars in the generated avatar.",
+          "jsDoc": "/**\n   * two chars in the generated avatar.\n   * @type {String}\n   */",
           "type": "string"
-        },
-        {
-          "name": "src",
-          "type": "TemplateResult"
         }
@@ -30,5 +32,11 @@ ],
         {
+          "name": "src",
+          "description": "URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`",
+          "jsDoc": "/**\n   * URL of avatar image can be `png` or `svg`. example: `https://www.w3schools.com/w3images/avatar2.png`\n   * @type {String}\n   */",
+          "type": "string"
+        },
+        {
           "name": "alt",
-          "description": "URL to avatar image",
-          "jsDoc": "/**\n   * URL to avatar image\n   * @type {String}\n   * @attr\n   */",
+          "description": "alternative text for accessibility. example: `with`",
+          "jsDoc": "/**\n   * alternative text for accessibility. example: `with`\n   * @type {String}\n   */",
           "type": "string"
@@ -38,15 +46,19 @@ },
           "name": "abbr",
-          "description": "Fallback Text Initial",
-          "jsDoc": "/**\n   * Fallback Text Initial\n   * @type {String}\n   * @attr\n   */",
+          "description": "two chars in the generated avatar.",
+          "jsDoc": "/**\n   * two chars in the generated avatar.\n   * @type {String}\n   */",
           "type": "string"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--fc-avatar-background-color",
+          "description": "the color. default: `transparent`, example: `gold`"
         },
         {
-          "name": "src",
-          "type": "TemplateResult"
+          "name": "--fc-avatar-size",
+          "description": "height and width. default: `48px`, example: `96px`"
         }
-      ],
-      "events": [],
-      "slots": []
+      ]
     }
   ]
 }

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48439

increased by4.49%

Lines of code

807

increased by1.25%

Number of lines in readme file

31

increased by10.71%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@forter/core@^2.0.1