@hig/avatar - npm Package Compare versions

Comparing version 0.2.0-alpha.fbb1eed0 to 0.2.0

build/index.es.js

@@ -19,2 +19,4 @@ import React, { Component } from 'react';
 
+var _modifiersBySize;
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -26,2 +28,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
@@ -31,3 +35,3 @@ * @param {number} value
  * @param {number[]} range2
- * @returns {number}
+ * @returns {string}
  */
@@ -40,3 +44,3 @@ function convertRanges(value, range1, range2) {
  * @param {string} name
- * @returns {number}
+ * @returns {string}
  */
@@ -72,3 +76,3 @@ function backgroundIdFromName(name) {
   return React.createElement(
-    "div",
+    "span",
     { className: "hig__avatarV2__image-wrapper" },
@@ -94,3 +98,3 @@ React.createElement("img", {
   return React.createElement(
-    "div",
+    "span",
     { className: "hig__avatarV2__initials", "aria-hidden": "true" },
@@ -101,6 +105,20 @@ initialsFromName(name)
 
+var modifiersBySize = (_modifiersBySize = {}, _defineProperty(_modifiersBySize, sizes.SMALL_16, "hig__avatarV2--size--small"), _defineProperty(_modifiersBySize, sizes.MEDIUM_24, "hig__avatarV2--size--medium"), _defineProperty(_modifiersBySize, sizes.MEDIUM_32, "hig__avatarV2--size--medium-32"), _defineProperty(_modifiersBySize, sizes.LARGE_36, "hig__avatarV2--size--large"), _defineProperty(_modifiersBySize, sizes.LARGE_48, "hig__avatarV2--size--large-48"), _defineProperty(_modifiersBySize, sizes.XLARGE_64, "hig__avatarV2--size--extralarge"), _modifiersBySize);
+
+var modifiersByBackgroundId = {
+  "1": "hig__avatarV2__background--turquoise",
+  "2": "hig__avatarV2__background--purple",
+  "3": "hig__avatarV2__background--pink",
+  "4": "hig__avatarV2__background--salmon",
+  "5": "hig__avatarV2__background--blue",
+  "6": "hig__avatarV2__background--green",
+  "7": "hig__avatarV2__background--turquoise",
+  "8": "hig__avatarV2__background--indigo",
+  "9": "hig__avatarV2__background--gold"
+};
+
 /**
  * @typedef {Object} AvatarProps
- * @param {string} name
- * @param {string} size
+ * @param {string} [name]
+ * @param {string} [size]
  * @param {string} [image]
@@ -110,4 +128,2 @@ * @param {Function} [onImageError]
 /**
- *
- *
  * @typedef {Object} AvatarState
@@ -148,2 +164,5 @@ * @property {boolean} hasImageError
 
+  /** @type {AvatarState} */
+
+
   _createClass(Avatar, [{
@@ -160,9 +179,10 @@ key: "render",
 
+      var backgroundId = backgroundIdFromName(name);
       var label = "Avatar for " + name;
       var showImage = imageUrl && !hasImageError;
-      var classes = cx("hig__avatarV2", "hig__avatarV2--size--" + size, "hig__avatarV2__background--" + backgroundIdFromName(name));
+      var classes = cx("hig__avatarV2", modifiersBySize[size], modifiersByBackgroundId[backgroundId]);
 
       return React.createElement(
-        "figure",
-        { className: classes, "aria-label": label },
+        "span",
+        { "aria-label": label, className: classes, role: "img" },
         !showImage ? null : React.createElement(Image, { image: imageUrl, name: name, onError: handleImageError }),
@@ -194,5 +214,2 @@ React.createElement(Initials, { name: name })
 
-    /** @type {AvatarState} */
-
-
     /**
@@ -209,5 +226,5 @@ * @param {Event} errorEvent
   /** The name for the avatar */
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   /** Set the size of the avatar */
-  size: PropTypes.oneOf(AVAILABLE_SIZES).isRequired,
+  size: PropTypes.oneOf(AVAILABLE_SIZES),
   /** URL to a profile image */
@@ -219,2 +236,6 @@ // eslint-disable-next-line react/no-unused-prop-types
 };
+Avatar.defaultProps = {
+  name: "Anonymous User",
+  size: sizes.MEDIUM_32
+};
 
@@ -224,3 +245,3 @@
 Avatar.__docgenInfo = {
-  "description": "@typedef {Object} AvatarProps\n@param {string} name\n@param {string} size\n@param {string} [image]\n@param {Function} [onImageError]\n\n/**\n\n\n@typedef {Object} AvatarState\n@property {boolean} hasImageError\n@property {string} [imageUrl]",
+  "description": "@typedef {Object} AvatarProps\n@param {string} [name]\n@param {string} [size]\n@param {string} [image]\n@param {Function} [onImageError]\n\n/**\n@typedef {Object} AvatarState\n@property {boolean} hasImageError\n@property {string} [imageUrl]",
   "displayName": "Avatar",
@@ -232,4 +253,8 @@ "props": {
       },
-      "required": true,
-      "description": "The name for the avatar"
+      "required": false,
+      "description": "The name for the avatar",
+      "defaultValue": {
+        "value": "\"Anonymous User\"",
+        "computed": false
+      }
     },
@@ -242,4 +267,8 @@ "size": {
       },
-      "required": true,
-      "description": "Set the size of the avatar"
+      "required": false,
+      "description": "Set the size of the avatar",
+      "defaultValue": {
+        "value": "sizes.MEDIUM_32",
+        "computed": true
+      }
     },
@@ -246,0 +275,0 @@ "image": {

build/index.js

@@ -26,2 +26,4 @@ 'use strict';
 
+var _modifiersBySize;
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -33,2 +35,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 /**
@@ -38,3 +42,3 @@ * @param {number} value
  * @param {number[]} range2
- * @returns {number}
+ * @returns {string}
  */
@@ -47,3 +51,3 @@ function convertRanges(value, range1, range2) {
  * @param {string} name
- * @returns {number}
+ * @returns {string}
  */
@@ -79,3 +83,3 @@ function backgroundIdFromName(name) {
   return React__default.createElement(
-    "div",
+    "span",
     { className: "hig__avatarV2__image-wrapper" },
@@ -101,3 +105,3 @@ React__default.createElement("img", {
   return React__default.createElement(
-    "div",
+    "span",
     { className: "hig__avatarV2__initials", "aria-hidden": "true" },
@@ -108,6 +112,20 @@ initialsFromName(name)
 
+var modifiersBySize = (_modifiersBySize = {}, _defineProperty(_modifiersBySize, sizes.SMALL_16, "hig__avatarV2--size--small"), _defineProperty(_modifiersBySize, sizes.MEDIUM_24, "hig__avatarV2--size--medium"), _defineProperty(_modifiersBySize, sizes.MEDIUM_32, "hig__avatarV2--size--medium-32"), _defineProperty(_modifiersBySize, sizes.LARGE_36, "hig__avatarV2--size--large"), _defineProperty(_modifiersBySize, sizes.LARGE_48, "hig__avatarV2--size--large-48"), _defineProperty(_modifiersBySize, sizes.XLARGE_64, "hig__avatarV2--size--extralarge"), _modifiersBySize);
+
+var modifiersByBackgroundId = {
+  "1": "hig__avatarV2__background--turquoise",
+  "2": "hig__avatarV2__background--purple",
+  "3": "hig__avatarV2__background--pink",
+  "4": "hig__avatarV2__background--salmon",
+  "5": "hig__avatarV2__background--blue",
+  "6": "hig__avatarV2__background--green",
+  "7": "hig__avatarV2__background--turquoise",
+  "8": "hig__avatarV2__background--indigo",
+  "9": "hig__avatarV2__background--gold"
+};
+
 /**
  * @typedef {Object} AvatarProps
- * @param {string} name
- * @param {string} size
+ * @param {string} [name]
+ * @param {string} [size]
  * @param {string} [image]
@@ -117,4 +135,2 @@ * @param {Function} [onImageError]
 /**
- *
- *
  * @typedef {Object} AvatarState
@@ -155,2 +171,5 @@ * @property {boolean} hasImageError
 
+  /** @type {AvatarState} */
+
+
   _createClass(Avatar, [{
@@ -167,9 +186,10 @@ key: "render",
 
+      var backgroundId = backgroundIdFromName(name);
       var label = "Avatar for " + name;
       var showImage = imageUrl && !hasImageError;
-      var classes = cx("hig__avatarV2", "hig__avatarV2--size--" + size, "hig__avatarV2__background--" + backgroundIdFromName(name));
+      var classes = cx("hig__avatarV2", modifiersBySize[size], modifiersByBackgroundId[backgroundId]);
 
       return React__default.createElement(
-        "figure",
-        { className: classes, "aria-label": label },
+        "span",
+        { "aria-label": label, className: classes, role: "img" },
         !showImage ? null : React__default.createElement(Image, { image: imageUrl, name: name, onError: handleImageError }),
@@ -201,5 +221,2 @@ React__default.createElement(Initials, { name: name })
 
-    /** @type {AvatarState} */
-
-
     /**
@@ -216,5 +233,5 @@ * @param {Event} errorEvent
   /** The name for the avatar */
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   /** Set the size of the avatar */
-  size: PropTypes.oneOf(AVAILABLE_SIZES).isRequired,
+  size: PropTypes.oneOf(AVAILABLE_SIZES),
   /** URL to a profile image */
@@ -226,2 +243,6 @@ // eslint-disable-next-line react/no-unused-prop-types
 };
+Avatar.defaultProps = {
+  name: "Anonymous User",
+  size: sizes.MEDIUM_32
+};
 
@@ -231,3 +252,3 @@
 Avatar.__docgenInfo = {
-  "description": "@typedef {Object} AvatarProps\n@param {string} name\n@param {string} size\n@param {string} [image]\n@param {Function} [onImageError]\n\n/**\n\n\n@typedef {Object} AvatarState\n@property {boolean} hasImageError\n@property {string} [imageUrl]",
+  "description": "@typedef {Object} AvatarProps\n@param {string} [name]\n@param {string} [size]\n@param {string} [image]\n@param {Function} [onImageError]\n\n/**\n@typedef {Object} AvatarState\n@property {boolean} hasImageError\n@property {string} [imageUrl]",
   "displayName": "Avatar",
@@ -239,4 +260,8 @@ "props": {
       },
-      "required": true,
-      "description": "The name for the avatar"
+      "required": false,
+      "description": "The name for the avatar",
+      "defaultValue": {
+        "value": "\"Anonymous User\"",
+        "computed": false
+      }
     },
@@ -249,4 +274,8 @@ "size": {
       },
-      "required": true,
-      "description": "Set the size of the avatar"
+      "required": false,
+      "description": "Set the size of the avatar",
+      "defaultValue": {
+        "value": "sizes.MEDIUM_32",
+        "computed": true
+      }
     },
@@ -253,0 +282,0 @@ "image": {

package.json

 {
   "name": "@hig/avatar",
-  "version": "0.2.0-alpha.fbb1eed0",
+  "version": "0.2.0",
   "description": "HIG Avatar",
@@ -23,3 +23,3 @@ "author": "Autodesk Inc.",
     "prop-types": "^15.6.1",
-    "react-lifecycles-compat": "^3.0.2"
+    "react-lifecycles-compat": "^3.0.4"
   },
@@ -30,7 +30,8 @@ "peerDependencies": {
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.fbb1eed0",
-    "@hig/eslint-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/scripts": "0.2.0-alpha.fbb1eed0",
-    "@hig/semantic-release-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/styles": "^0.1.1"
+    "@hig/babel-preset": "^0.1.0",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/styles": "^0.2.3"
   },
@@ -40,2 +41,3 @@ "scripts": {
     "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
     "release": "hig-scripts-release"
@@ -46,2 +48,5 @@ },
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
   "release": {
@@ -48,0 +53,0 @@ "extends": "@hig/semantic-release-config"

No alert changes

Improved metrics

Total package byte prevSize

38148

11.28%

Number of package files

7

16.67%

Lines of code

805

7.48%

Worsened metrics

Dev dependency count

6

20%

Dependency changes

• Updated

  react-lifecycles-compat@^3.0.4