@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
73 lines • 3.75 kB
JavaScript
/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./avatar-item.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, Fragment } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
import { Text } from '@atlaskit/primitives/compiled';
import { getCustomElement } from './utilities';
var bgColorCssVar = '--avatar-item-bg-color';
var styles = {
root: "_2rko1l7b _12ji1r31 _1qu2glyw _12y31o36 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1h6d1j28 _1dqonqa1 _189e1bk5 _1e0c1txw _vchhusvi _1bsb1osq _4cvr1h6o _bfhk1g13 _syaz1kw7 _1wyb1kw7 _zg8l4jg8 _k48pi7a9 _vwz4kb7n _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t _85i51b66 _1q511b66 _y4ti1b66 _bozg1b66 _y3gn1e5h",
rootDisabled: "_80om13gf _tzy41e4z _lcxvglyw",
rootInteractive: "_nt751r31 _49pcglyw _1hvw1o36 _858u194a _9oik1r31 _1bnxglyw _jf4cnqa1 _irr314ae _d0altlke _1di61l7b",
avatarItem: "_16jlkb7n _1o9zkb7n _i0dl1osq _1ul9idpf _p12f1osq _vwz419ii _bozgu2gc",
baseText: "_1e0c1ule _syaz1fxt",
truncation: "_1reo15vq _1bto1l2s _o5721q9c",
secondaryTextLegacy: "_syaz131l _1wyb181o"
};
/**
* __Avatar item__
*
* An avatar item is a wrapper that goes around an avatar when it's displayed alongside text, such as a name or status.
*
* - [Examples](https://atlassian.design/components/avatar/avatar-item/examples)
* - [Code](https://atlassian.design/components/avatar/avatar-item/code)
*/
var AvatarItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
var avatar = _ref.avatar,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor,
isTruncationDisabled = _ref.isTruncationDisabled,
href = _ref.href,
isDisabled = _ref.isDisabled,
onClick = _ref.onClick,
primaryText = _ref.primaryText,
secondaryText = _ref.secondaryText,
target = _ref.target,
testId = _ref.testId,
label = _ref.label;
var Container = getCustomElement(isDisabled, href, onClick);
var isInteractive = Boolean(onClick || href);
return /*#__PURE__*/React.createElement(Container, _extends({
style: _defineProperty({}, bgColorCssVar, backgroundColor),
ref: ref,
"aria-label": isInteractive ? label : undefined,
onClick: onClick,
disabled: isDisabled,
"data-testid": testId ? "".concat(testId, "--itemInner") : undefined,
type: Container === 'button' ? 'button' : undefined
}, href && {
href: href,
target: target,
rel: target === '_blank' ? 'noopener noreferrer' : undefined
}, {
className: ax([styles.root, isInteractive && styles.rootInteractive, isDisabled && styles.rootDisabled])
}), avatar, /*#__PURE__*/React.createElement("div", {
className: ax([styles.avatarItem])
}, fg('platform.design-system-team.avatar-item-font-size_830x6') ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Text, {
maxLines: isTruncationDisabled ? undefined : 1
}, primaryText), /*#__PURE__*/React.createElement(Text, {
color: "color.text.subtlest",
maxLines: isTruncationDisabled ? undefined : 1,
size: "UNSAFE_small"
}, secondaryText)) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
className: ax([styles.baseText, !isTruncationDisabled && styles.truncation])
}, primaryText), /*#__PURE__*/React.createElement("span", {
className: ax([styles.baseText, styles.secondaryTextLegacy, !isTruncationDisabled && styles.truncation])
}, secondaryText))));
});
AvatarItem.displayName = 'AvatarItem';
export default AvatarItem;