@forter/avatar - npm Package Compare versions

Comparing version 4.0.8 to 4.0.9

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [4.0.9](https://github.com/forter/web-components/compare/@forter/avatar@4.0.8...@forter/avatar@4.0.9) (2021-11-02)
+
+**Note:** Version bump only for package @forter/avatar
+
+
+
+
+
 ## [4.0.8](https://github.com/forter/web-components/compare/@forter/avatar@4.0.6...@forter/avatar@4.0.8) (2020-04-06)
@@ -8,0 +16,0 @@

fc-avatar.css.js

@@ -5,2 +5,6 @@ import { css } from 'lit-element';
   --fc-avatar-size: 48px;
+  --fc-avatar-font-size: 3em;
+  --fc-avatar-hover-background-color: var(--fc-gray-300);
+  --fc-avatar-background-color: var(--fc-gray-300);
+  --fc-avatar-font-color: var(--fc-gray-700);
 
@@ -16,4 +20,3 @@ border-radius: 50%;
 button {
-  transition: all 0.3s ease-out;
-  background-color: var(--fc-avatar-background-color, rgba(0, 0, 0, 0.1));
+  background-color: var(--fc-avatar-background-color);
 
@@ -30,2 +33,3 @@ /* background-color: transparent; */
   width: 100%;
+  transition: all 0.3s;
 }
@@ -35,3 +39,4 @@
 button:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--fc-avatar-hover-background-color);
+  transform: scale(1.1);
 }
@@ -53,5 +58,5 @@
   align-items: center;
-  color: dimgray;
+  color: var(--fc-avatar-font-color);
   display: grid;
-  font-size: 3em;
+  font-size: var(--fc-avatar-font-size, 3em);
   font-weight: bold;
@@ -58,0 +63,0 @@ height: 100%;

FcAvatar.js

@@ -8,7 +8,11 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
  * @function
- * @param {String} x the current value
+ * @param {String} name the current value
  * @return {String} the first two letters
  */
 
-const initial = x => typeof x !== 'string' ? '' : x.substring(0, 1).toUpperCase();
+const initial = name => {
+  if (typeof name !== 'string') return '';
+  const initials = name.split(' ');
+  return initials.length > 1 ? (initials.shift().charAt(0) + initials.pop().charAt(0)).toUpperCase() : name.substring(0, 1).toUpperCase();
+};
 /**
@@ -32,4 +36,6 @@ * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
  * @element fc-avatar
+ * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px`
  * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`
  * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`
+ * @cssprop --fc-avatar-hover-background-color - the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)`
  */
@@ -36,0 +42,0 @@

package.json

 {
   "name": "@forter/avatar",
-  "version": "4.0.8",
+  "version": "4.0.9",
   "description": "Avatar from Forter Components",
@@ -54,3 +54,3 @@ "main": "index.js",
   },
-  "gitHead": "e5656b1ed9d4533b603332dd93e241493195ebca"
+  "gitHead": "bf4a028e57cbaa7adbc514c63e25e86f00454a9f"
 }

README.md

@@ -27,5 +27,7 @@ # fc-avatar
 
-| Property                       | Description                                      |
-|--------------------------------|--------------------------------------------------|
-| `--fc-avatar-background-color` | the color. default: `transparent`, example: `gold` |
-| `--fc-avatar-size`             | height and width. default: `48px`, example: `96px` |
+| Property                             | Description                                      |
+|--------------------------------------|--------------------------------------------------|
+| `--fc-avatar-background-color`       | the color. default: `transparent`, example: `gold` |
+| `--fc-avatar-font-size`              | abbr font size. default: `3em`, example: `18px`  |
+| `--fc-avatar-hover-background-color` | the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)` |
+| `--fc-avatar-size`                   | height and width. default: `48px`, example: `96px` |

src/FcAvatar.js

@@ -8,9 +8,14 @@ import { LitElement, html, property } from 'lit-element';
  * @function
- * @param {String} x the current value
+ * @param {String} name the current value
  * @return {String} the first two letters
  */
-const initial = x =>
-    typeof x !== 'string' ? ''
-  : x.substring(0, 1).toUpperCase();
+const initial = name => {
+  if (typeof name !== 'string') return '';
+  const initials = name.split(' ');
 
+  return initials.length > 1 ?
+      (initials.shift().charAt(0) + initials.pop().charAt(0)).toUpperCase() :
+      name.substring(0, 1).toUpperCase();
+};
+
 /**
@@ -34,4 +39,6 @@ * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.
  * @element fc-avatar
+ * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px`
  * @cssprop --fc-avatar-size - height and width. default: `48px`, example: `96px`
  * @cssprop --fc-avatar-background-color - the color. default: `transparent`, example: `gold`
+ * @cssprop --fc-avatar-hover-background-color - the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)`
  */
@@ -38,0 +45,0 @@ export class FcAvatar extends LitElement {

web-components.json

@@ -7,3 +7,3 @@ {
       "description": "Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n<!-- Author: Liron Goldenberg <[e-mail]> -->\n\n## Usage\n\n```html\n<script>\n   import '@forter/avatar';\n</script>\n\n<fc-avatar>\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 * <!-- Author: Liron Goldenberg <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/avatar';\n * </script>\n *\n * <fc-avatar>\n * </fc-avatar>\n * ```\n *\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 */",
+      "jsDoc": "/**\n * Avatar circular element they used to represent person or an object. Can represent either an image or an initial.\n * <!-- Author: Liron Goldenberg <[e-mail]> -->\n *\n * ## Usage\n *\n * ```html\n * <script>\n *   import '@forter/avatar';\n * </script>\n *\n * <fc-avatar>\n * </fc-avatar>\n * ```\n *\n *\n *\n * @element fc-avatar\n * @cssprop --fc-avatar-font-size - abbr font size. default: `3em`, example: `18px`\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 * @cssprop --fc-avatar-hover-background-color - the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)`\n */",
       "attributes": [
@@ -51,2 +51,6 @@ {
         {
+          "name": "--fc-avatar-hover-background-color",
+          "description": "the color. default: `var(--fc-gray-300)`, example: `var(--fc-red-100)`"
+        },
+        {
           "name": "--fc-avatar-background-color",
@@ -58,2 +62,6 @@ "description": "the color. default: `transparent`, example: `gold`"
           "description": "height and width. default: `48px`, example: `96px`"
+        },
+        {
+          "name": "--fc-avatar-font-size",
+          "description": "abbr font size. default: `3em`, example: `18px`"
         }
@@ -60,0 +68,0 @@ ]

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

52212

increased by5.78%

Lines of code

797

increased by4.05%

Number of lines in readme file

33

increased by6.45%

No dependency changes