@atlaskit/avatar
Version:
An avatar is a visual representation of a user or entity.
74 lines • 3.35 kB
JavaScript
/* avatar-item.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
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';
const bgColorCssVar = '--avatar-item-bg-color';
const 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)
*/
const AvatarItem = /*#__PURE__*/forwardRef(({
avatar,
backgroundColor = 'transparent',
isTruncationDisabled,
href,
isDisabled,
onClick,
primaryText,
secondaryText,
target,
testId,
label
}, ref) => {
const Container = getCustomElement(isDisabled, href, onClick);
const isInteractive = Boolean(onClick || href);
return /*#__PURE__*/React.createElement(Container, _extends({
style: {
[bgColorCssVar]: backgroundColor
},
ref: ref,
"aria-label": isInteractive ? label : undefined,
onClick: onClick,
disabled: isDisabled,
"data-testid": testId ? `${testId}--itemInner` : undefined,
type: Container === 'button' ? 'button' : undefined
}, href && {
href,
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;