@commercetools-uikit/avatar
Version:
A component for rendering profile images
208 lines (199 loc) • 10.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
var react$1 = require('react');
var react = require('@emotion/react');
var utils = require('@commercetools-uikit/utils');
var designSystem = require('@commercetools-uikit/design-system');
var jsxRuntime = require('@emotion/react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
const fontSizeMap = {
s: {
narrow: designSystem.designTokens.fontSize30,
wide: designSystem.designTokens.fontSize10
},
m: {
narrow: designSystem.designTokens.fontSize50,
wide: designSystem.designTokens.fontSize30
},
l: {
narrow: designSystem.designTokens.fontSize90,
wide: designSystem.designTokens.fontSize80
}
};
const widthSizeMap = {
s: '32px',
m: '40px',
l: '100px'
};
const colorsMap = {
accent: {
normal: designSystem.designTokens.colorAccent90,
highlighted: designSystem.designTokens.colorAccent95
},
purple: {
normal: designSystem.designTokens.colorPurple90,
highlighted: designSystem.designTokens.colorPurple95
},
turquoise: {
normal: designSystem.designTokens.colorTurquoise90,
highlighted: designSystem.designTokens.colorTurquoise95
},
brown: {
normal: designSystem.designTokens.colorBrown90,
highlighted: designSystem.designTokens.colorBrown95
}
};
const getFontSize = (avatarInitials, avatarSize) => {
const widthCode = avatarInitials.length > 1 ? 'wide' : 'narrow';
return fontSizeMap[avatarSize][widthCode];
};
const getWidthSize = avatarSize => widthSizeMap[avatarSize];
const getBackgroundColor = function () {
let avatarColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'accent';
let isHighlighted = arguments.length > 1 ? arguments[1] : undefined;
return colorsMap[avatarColor][isHighlighted ? 'highlighted' : 'normal'];
};
const getForegroundColor = avatarColor => {
switch (avatarColor) {
case 'brown':
return designSystem.designTokens.colorBrown35;
case 'purple':
return designSystem.designTokens.colorPurple50;
case 'turquoise':
return designSystem.designTokens.colorTurquoise35;
default:
return designSystem.designTokens.colorAccent30;
}
};
const getAvatarStyles = avatarProps => {
const avatarSize = getWidthSize(avatarProps.size);
const backgroundColor = getBackgroundColor(avatarProps.color, avatarProps.isHighlighted);
const foregroundColor = getForegroundColor(avatarProps.color);
return /*#__PURE__*/react.css("align-items:center;background-color:", backgroundColor, ";border-radius:100%;font-size:", designSystem.designTokens.fontSize30, ";font-weight:", designSystem.designTokens.fontWeight600, ";color:", foregroundColor, ";display:flex;justify-content:center;overflow:hidden;position:relative;fill:", foregroundColor, ";height:", avatarSize, ";width:", avatarSize, ";" + ("" ), "" );
};
const _excluded = ["firstName", "lastName", "isHighlighted", "size", "color"];
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
const getFirstChar = str => {
var _context;
return typeof str === 'string' ? _sliceInstanceProperty__default["default"](_context = _trimInstanceProperty__default["default"](str).call(str)).call(_context, 0, 1).toUpperCase() : '';
};
const getInitialsFromName = _ref => {
let _ref$firstName = _ref.firstName,
firstName = _ref$firstName === void 0 ? '' : _ref$firstName,
_ref$lastName = _ref.lastName,
lastName = _ref$lastName === void 0 ? '' : _ref$lastName;
return `${getFirstChar(firstName)}${getFirstChar(lastName)}`;
};
/**
* `s` - defines the size. We want a bigger one if the user is on a retina-display
* `d` - defines the default if the user is not known to Gravatar. It returns a blank image,
* which let the initials underneath shine through
*
* @see: https://de.gravatar.com/site/implement/images/
*/
const createGravatarImgUrl = function (md5Hash, size) {
let multiplyBy = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
const imageSize = getWidthSize(size);
const sizeAsInt = _parseInt__default["default"](imageSize.replace(/px$/, ''), 10);
const gravatarSize = sizeAsInt * multiplyBy;
return `https://www.gravatar.com/avatar/${md5Hash}?s=${gravatarSize}&d=blank`;
};
const GravatarImg = props => jsxRuntime.jsx("img", {
css: /*#__PURE__*/react.css("background-position:center center;background-size:contain;position:relative;z-index:10;", props.isHighlighted ? 'opacity: 0.7;' : '', ";" + ("" ), "" ),
src: createGravatarImgUrl(props.gravatarHash, props.size),
srcSet: [`${createGravatarImgUrl(props.gravatarHash, props.size)} 1x`, `${createGravatarImgUrl(props.gravatarHash, props.size, 2)} 2x`].join(',')
/**
* Based on https://www.w3.org/WAI/tutorials/images/decision-tree/:
* image contributes meaning to the current page or context and it shows content that is redundant to real text nearby
*/,
alt: ""
});
GravatarImg.displayName = 'GravatarImg';
const Initials = props => {
const initialsFromName = getInitialsFromName({
firstName: props.firstName,
lastName: props.lastName
});
return jsxRuntime.jsx("div", {
css: /*#__PURE__*/react.css("position:absolute;font-size:", getFontSize(initialsFromName, props.size), ";" + ("" ), "" ),
children: initialsFromName
});
};
Initials.displayName = 'Initials';
const Avatar = _ref2 => {
let _ref2$firstName = _ref2.firstName,
firstName = _ref2$firstName === void 0 ? '' : _ref2$firstName,
_ref2$lastName = _ref2.lastName,
lastName = _ref2$lastName === void 0 ? '' : _ref2$lastName,
_ref2$isHighlighted = _ref2.isHighlighted,
isHighlighted = _ref2$isHighlighted === void 0 ? false : _ref2$isHighlighted,
_ref2$size = _ref2.size,
size = _ref2$size === void 0 ? 's' : _ref2$size,
_ref2$color = _ref2.color,
color = _ref2$color === void 0 ? 'accent' : _ref2$color,
props = _objectWithoutProperties(_ref2, _excluded);
const avatarSize = getWidthSize(size);
return jsxRuntime.jsx("div", _objectSpread(_objectSpread({
css: getAvatarStyles(_objectSpread({
firstName,
lastName,
isHighlighted,
size,
color
}, props))
}, utils.filterDataAttributes(_objectSpread({
firstName,
lastName,
isHighlighted,
size,
color
}, props))), {}, {
children: props?.icon ? jsxRuntime.jsx("div", {
css: /*#__PURE__*/react.css("height:calc(", avatarSize, " - 45%);width:calc(", avatarSize, " - 45%);" + ("" ), "" ),
children: /*#__PURE__*/react$1.cloneElement(props?.icon, {
size: 'scale'
})
}) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [jsxRuntime.jsx(GravatarImg, {
gravatarHash: props.gravatarHash,
size: size,
isHighlighted: isHighlighted
}), jsxRuntime.jsx(Initials, {
size: size,
firstName: firstName,
lastName: lastName
})]
})
}));
};
Avatar.displayName = 'Avatar';
var Avatar$1 = Avatar;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.6.5";
exports["default"] = Avatar$1;
exports.version = version;