@hig/avatar
Advanced tools
Comparing version 0.2.0-alpha.fbb1eed0 to 0.2.0
@@ -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": { |
@@ -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": { |
{ | ||
"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" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
38148
7
805
6