@paprika/avatar - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

lib/Avatar.js

@@ -32,6 +32,6 @@ "use strict";
   /** Background color of the Avatar */
-  backgroundColor: _propTypes["default"].string.isRequired,
+  backgroundColor: _propTypes["default"].string,
 
   /** Color for the initial or icon */
-  color: _propTypes["default"].string.isRequired,
+  color: _propTypes["default"].string,
 
@@ -42,3 +42,5 @@ /** Size of Avatar */
 var defaultProps = {
+  backgroundColor: null,
   children: null,
+  color: null,
   size: "medium"
@@ -51,3 +53,9 @@ };
       color = props.color,
-      moreProps = (0, _objectWithoutProperties2["default"])(props, ["backgroundColor", "size", "color"]);
+      children = props.children,
+      moreProps = (0, _objectWithoutProperties2["default"])(props, ["backgroundColor", "size", "color", "children"]);
+
+  var getInitial = function getInitial(children) {
+    return children.substring(0, 1).toUpperCase();
+  };
+
   return /*#__PURE__*/_react["default"].createElement(sc.Avatar, (0, _extends2["default"])({
@@ -58,3 +66,3 @@ "data-pka-anchor": "avatar",
     size: size
-  }, moreProps));
+  }, moreProps), typeof children === "string" ? getInitial(children) : children);
 }
@@ -61,0 +69,0 @@

lib/Avatar.styles.js

@@ -19,2 +19,6 @@ "use strict";
 
+var _tokens = _interopRequireDefault(require("@paprika/tokens"));
+
+var _helpers2 = require("./helpers");
+
 var smallSize = "".concat((0, _helpers.spacer)(4));
@@ -34,5 +38,12 @@ var mediumSize = "".concat((0, _helpers.spacer)(5));
       $color = _ref.$color,
-      size = _ref.size;
+      size = _ref.size,
+      children = _ref.children;
   var sizeValue = avatarSizeStyles[size];
-  return "\n      background-color: ".concat($backgroundColor, ";\n      color: ").concat($color, ";\n      ").concat(sizeValue, ";\n    ");
+  var color = typeof children !== "string" ? {
+    backgroundColor: _tokens["default"].color.blackLighten60,
+    fontColor: _tokens["default"].color.blackLighten20
+  } : (0, _helpers2.getAvatarColors)(children);
+  var backgroundColor = $backgroundColor !== null && $backgroundColor !== void 0 ? $backgroundColor : color.backgroundColor;
+  var fontColor = $color !== null && $color !== void 0 ? $color : color.fontColor;
+  return "\n      background-color: ".concat(backgroundColor, ";\n      color: ").concat(fontColor, ";\n      ").concat(sizeValue, ";\n    ");
 });
@@ -39,0 +50,0 @@

lib/helpers.js

@@ -11,3 +11,3 @@ "use strict";
 
-exports["default"] = getAvatarColors;
+exports.getAvatarColors = getAvatarColors;
 
@@ -14,0 +14,0 @@ var _tokens = _interopRequireDefault(require("@paprika/tokens"));

lib/index.js

@@ -5,2 +5,4 @@ "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs2/core-js/object/keys");
+
 var _Object$defineProperty = require("@babel/runtime-corejs2/core-js/object/define-property");
@@ -12,2 +14,4 @@
 
+var _exportNames = {};
+
 _Object$defineProperty(exports, "default", {
@@ -20,12 +24,17 @@ enumerable: true,
 
-_Object$defineProperty(exports, "calculateAvatarColours", {
-  enumerable: true,
-  get: function get() {
-    return _helpers["default"];
-  }
-});
-
 var _Avatar = _interopRequireDefault(require("./Avatar"));
 
-var _helpers = _interopRequireDefault(require("./helpers"));
+var _helpers = require("./helpers");
+
+_Object$keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _helpers[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@paprika/avatar",
-  "version": "0.1.0",
-  "description": "An Avatar component represents an object or entity and displays initials or icon.",
+  "version": "0.1.1",
+  "description": "Avatar component represents an object or entity and displays initials or icon.",
   "author": "@paprika",
@@ -18,3 +18,3 @@ "main": "lib/index.js",
     "@babel/runtime-corejs2": "^7.3.1",
-    "@paprika/helpers": "^0.2.12",
+    "@paprika/helpers": "^0.2.13",
     "@paprika/stylers": "^0.2.8",
@@ -29,3 +29,3 @@ "@paprika/tokens": "^0.1.14",
   },
-  "gitHead": "7b083dceb950000bb404068c7a3de3a1d2435e8a"
+  "gitHead": "fca10c03f84f6ba0772c360556835c83d91ebb5b"
 }

README.md

@@ -8,20 +8,37 @@ <!-- autogenerated don't modify -->
 
-An `Avatar` component represents an object or entity and displays initials or icon.
+`Avatar` component represents an object or entity and displays initials or icon.
 
 ### Usage
 
+By default, Avatar component sets the background and text color using the `getAvatarColor`function with the children props value as the parameter.
+
 ```js
-<Avatar backgroundColor="black" color="white" size="small">A</Avatar>
+import Avatar from "@paprika/avatar";
+
+<Avatar>Terry Fox</Avatar>;
 ```
 
-Avatar using getAvatarColors() to use consistent avatar colors
+Access `getAvatarColors`
 
 ```js
-import Avatar, { getAvatarColors } from '@paprika/avatar';
+import Avatar from "@paprika/avatar";
+import { getAvatarColors } from "@paprika/avatar/lib/helpers";
 
-const color = getAvatarColors(text);
+const color = getAvatarColors("Terry Fox");
 
-<Avatar backgroundColor="black" color="white" size="small">A</Avatar>
+<Avatar backgroundColor={color.backgroundColor} color={color.fontColor}>
+  Terry Fox
+</Avatar>;
 ```
 
-<!-- eoContent -->
+Set custom size, background and text color
+
+```js
+import Avatar from "@paprika/avatar";
+
+<Avatar backgroundColor="black" color="white" size="small">
+  Terry Fox
+</Avatar>;
+```
+
+<!-- eoContent -->

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

19213

increased by17%

Lines of code

170

increased by14.09%

Number of lines in readme file

44

increased by69.23%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@paprika/helpers@^0.2.13