@atlaskit/profilecard
Version:
A React component to display a card with user information.
196 lines (195 loc) • 10.2 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 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.KudosBlobAnimationStyle = exports.KudosBlobAnimation = exports.JobTitleLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardContent = exports.CardContainer = exports.AppTitleLabel = exports.AnimationWrapper = exports.AnimatedKudosButton = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
require("./Card.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireWildcard(require("react"));
var _css = require("@atlaskit/css");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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"
};
var ProfileImage = exports.ProfileImage = function ProfileImage(_ref) {
var children = _ref.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.profileImage)
}, children);
};
var ActionsFlexSpacer = exports.ActionsFlexSpacer = function ActionsFlexSpacer() {
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.actionsFlexSpacer)
});
};
var KudosBlobAnimationStyle = exports.KudosBlobAnimationStyle = function KudosBlobAnimationStyle() {
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.kudosBlobAnimationStyle)
});
};
var KudosBlobAnimation = exports.KudosBlobAnimation = function KudosBlobAnimation() {
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.kudosBlobAnimationStyle)
});
};
var AnimationWrapper = exports.AnimationWrapper = function AnimationWrapper(_ref2) {
var children = _ref2.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.animationWrapper)
}, children);
};
var AnimatedKudosButton = exports.AnimatedKudosButton = function AnimatedKudosButton(_ref3) {
var children = _ref3.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.animatedKudosButton)
}, children);
};
var ActionButtonGroup = exports.ActionButtonGroup = function ActionButtonGroup(_ref4) {
var children = _ref4.children,
testId = _ref4.testId;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
testId: testId,
xcss: (0, _css.cx)(stylesCompiled.actionButtonGroup),
id: "profile-card-action-button-group"
}, children);
};
var OverflowActionButtonsWrapper = exports.OverflowActionButtonsWrapper = function OverflowActionButtonsWrapper(_ref5) {
var children = _ref5.children,
testId = _ref5.testId;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
testId: testId,
xcss: (0, _css.cx)(styles.overflowActionButtonsWrapper)
}, children);
};
var CardContent = exports.CardContent = function CardContent(_ref6) {
var children = _ref6.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.cardContent)
}, children);
};
var DetailsGroup = exports.DetailsGroup = function DetailsGroup(_ref7) {
var children = _ref7.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.detailsGroup)
}, children);
};
var DisabledInfo = exports.DisabledInfo = function DisabledInfo(_ref8) {
var children = _ref8.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.disabledInfo)
}, children);
};
var LozengeWrapper = exports.LozengeWrapper = function LozengeWrapper(_ref9) {
var children = _ref9.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.lozengeWrapper)
}, children);
};
var CustomLozengeContainer = exports.CustomLozengeContainer = function CustomLozengeContainer(_ref0) {
var children = _ref0.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.customLozengeContainer)
}, children);
};
var JobTitleLabel = exports.JobTitleLabel = function JobTitleLabel(_ref1) {
var children = _ref1.children;
var textRef = (0, _react.useRef)(null);
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(stylesCompiled.jobTitleLabel)
}, (0, _platformFeatureFlags.fg)('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
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.default.createElement(_compiled.Text, {
ref: textRef,
maxLines: 1,
color: "color.text.inverse",
id: "profile-card-job-title-label-text"
}, children)) : /*#__PURE__*/_react.default.createElement(_compiled.Text, {
maxLines: 1,
color: "color.text.inverse",
id: "profile-card-job-title-label-text"
}, children));
};
var AppTitleLabel = exports.AppTitleLabel = function AppTitleLabel(_ref10) {
var children = _ref10.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.appTitleLabel),
backgroundColor: "color.background.neutral"
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
color: "color.text",
size: "small",
weight: "bold"
}, children));
};
var CardContainer = exports.CardContainer = function CardContainer(_ref11) {
var children = _ref11.children,
isDisabledUser = _ref11.isDisabledUser,
withoutElevation = _ref11.withoutElevation;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.cardContainer, isDisabledUser ? styles.cardContainerDisabledUser : styles.cardContainerActiveUser, !withoutElevation && styles.cardContainerWithElevation)
}, children);
};
var DetailsLabel = exports.DetailsLabel = function DetailsLabel(_ref12) {
var children = _ref12.children,
_ref12$extraTopSpace = _ref12.extraTopSpace,
extraTopSpace = _ref12$extraTopSpace === void 0 ? false : _ref12$extraTopSpace;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "dl",
xcss: (0, _css.cx)(styles.detailsLabelNext, extraTopSpace && styles.detailsLabelExtraTopSpace)
}, children);
};
var DetailsLabelIcon = exports.DetailsLabelIcon = function DetailsLabelIcon(_ref13) {
var children = _ref13.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "dt",
xcss: (0, _css.cx)(styles.detailsLabelIcon)
}, children);
};
var DetailsLabelText = exports.DetailsLabelText = function DetailsLabelText(_ref14) {
var children = _ref14.children;
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "dd",
xcss: (0, _css.cx)(styles.detailsLabelText)
}, children);
};