@atlaskit/profilecard
Version:
A React component to display a card with user information.
187 lines • 7.71 kB
JavaScript
/* Card.tsx generated by @compiled/babel-plugin v0.39.1 */
/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
import "./Card.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useRef } from 'react';
import { cx } from '@atlaskit/css';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, Text } from '@atlaskit/primitives/compiled';
import Tooltip from '@atlaskit/tooltip';
var kudosButtonAnimationTransformationCompiled = null;
var styles = {
profileImage: "_kqswstnw _154i1jfw _1ltv1ejb",
actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
animatedKudosButton: "_18u0u2gc",
overflowActionButtonsWrapper: "_1e0c1o8l _1bsbzwfg _4t3izwfg",
cardContent: "_1e0c1txw _2lx21bp4 _1tkebv7e",
detailsGroup: "_1e0c1txw _2lx21bp4 _18u01epz _19bvxy5q _1bsb18pt",
disabledInfo: "_11c8wadc _syazi7uo _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t",
lozengeWrapper: "_19pkpxbi _1e0c1ule",
customLozengeContainer: "_1e0c1txw _2lx2vrvc _1n261g80 _1bah1y6m _19pkutpp",
cardContainer: "_1reo15vq _18m915vq _kqswh2mm _12vemgnk _1lrw14bs _ca0q1ejb _19bv1ejb _u5f31ejb _n3td1ejb",
cardContainerActiveUser: "_1itkybvv",
cardContainerDisabledUser: "_1itk1387",
cardContainerWithElevation: "_2rko12b0 _16qs130s",
detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
detailsLabelNext: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _19bvze3t _o5721q9c",
detailsLabelExtraTopSpace: "_19pkxy5q",
detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz1rpy _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
detailsLabelText: "_1reo15vq _18m915vq _11c8rymc _1bto1l2s _syazi7uo _19pkze3t _18u0ze3t",
kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkdsyg",
appTitleLabel: "_2rko12b0 _syazi7uo _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
};
var stylesCompiled = {
jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t _1br315cr",
actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw _1oqbazsu"
};
export var ProfileImage = function ProfileImage(_ref) {
var children = _ref.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.profileImage)
}, children);
};
export var ActionsFlexSpacer = function ActionsFlexSpacer() {
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.actionsFlexSpacer)
});
};
export var KudosBlobAnimationStyle = function KudosBlobAnimationStyle() {
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.kudosBlobAnimationStyle)
});
};
export var KudosBlobAnimation = function KudosBlobAnimation() {
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.kudosBlobAnimationStyle)
});
};
export var AnimationWrapper = function AnimationWrapper(_ref2) {
var children = _ref2.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.animationWrapper)
}, children);
};
export var AnimatedKudosButton = function AnimatedKudosButton(_ref3) {
var children = _ref3.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.animatedKudosButton)
}, children);
};
export var ActionButtonGroup = function ActionButtonGroup(_ref4) {
var children = _ref4.children,
testId = _ref4.testId;
return /*#__PURE__*/React.createElement(Box, {
testId: testId,
xcss: cx(stylesCompiled.actionButtonGroup),
id: "profile-card-action-button-group"
}, children);
};
export var OverflowActionButtonsWrapper = function OverflowActionButtonsWrapper(_ref5) {
var children = _ref5.children,
testId = _ref5.testId;
return /*#__PURE__*/React.createElement(Box, {
testId: testId,
xcss: cx(styles.overflowActionButtonsWrapper)
}, children);
};
export var CardContent = function CardContent(_ref6) {
var children = _ref6.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.cardContent)
}, children);
};
export var DetailsGroup = function DetailsGroup(_ref7) {
var children = _ref7.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.detailsGroup)
}, children);
};
export var DisabledInfo = function DisabledInfo(_ref8) {
var children = _ref8.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.disabledInfo)
}, children);
};
export var LozengeWrapper = function LozengeWrapper(_ref9) {
var children = _ref9.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.lozengeWrapper)
}, children);
};
export var CustomLozengeContainer = function CustomLozengeContainer(_ref0) {
var children = _ref0.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.customLozengeContainer)
}, children);
};
export var JobTitleLabel = function JobTitleLabel(_ref1) {
var children = _ref1.children;
var textRef = useRef(null);
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(stylesCompiled.jobTitleLabel)
}, fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
content: children,
position: "bottom",
isScreenReaderAnnouncementDisabled: true,
canAppear: function canAppear() {
if (!textRef.current) {
return false;
}
// Only showing the tooltip when the element has been truncated (ellipsis)
return textRef.current.scrollHeight > textRef.current.clientHeight;
}
}, /*#__PURE__*/React.createElement(Text, {
ref: textRef,
maxLines: 1,
color: "color.text.inverse",
id: "profile-card-job-title-label-text"
}, children)) : /*#__PURE__*/React.createElement(Text, {
maxLines: 1,
color: "color.text.inverse",
id: "profile-card-job-title-label-text"
}, children));
};
export var AppTitleLabel = function AppTitleLabel(_ref10) {
var children = _ref10.children;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.appTitleLabel),
backgroundColor: "color.background.neutral"
}, /*#__PURE__*/React.createElement(Text, {
color: "color.text",
size: "small",
weight: "bold"
}, children));
};
export var CardContainer = function CardContainer(_ref11) {
var children = _ref11.children,
isDisabledUser = _ref11.isDisabledUser,
withoutElevation = _ref11.withoutElevation;
return /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.cardContainer, isDisabledUser ? styles.cardContainerDisabledUser : styles.cardContainerActiveUser, !withoutElevation && styles.cardContainerWithElevation)
}, children);
};
export var DetailsLabel = function DetailsLabel(_ref12) {
var children = _ref12.children,
_ref12$extraTopSpace = _ref12.extraTopSpace,
extraTopSpace = _ref12$extraTopSpace === void 0 ? false : _ref12$extraTopSpace;
return /*#__PURE__*/React.createElement(Box, {
as: "dl",
xcss: cx(styles.detailsLabelNext, extraTopSpace && styles.detailsLabelExtraTopSpace)
}, children);
};
export var DetailsLabelIcon = function DetailsLabelIcon(_ref13) {
var children = _ref13.children;
return /*#__PURE__*/React.createElement(Box, {
as: "dt",
xcss: cx(styles.detailsLabelIcon)
}, children);
};
export var DetailsLabelText = function DetailsLabelText(_ref14) {
var children = _ref14.children;
return /*#__PURE__*/React.createElement(Box, {
as: "dd",
xcss: cx(styles.detailsLabelText)
}, children);
};