@atlaskit/profilecard
Version:
A React component to display a card with user information.
242 lines (240 loc) • 15.1 kB
JavaScript
/* TeamCard.tsx generated by @compiled/babel-plugin v0.36.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.WrappedButton = exports.TeamName = exports.TeamForbiddenErrorStateWrapper = exports.MoreButton = exports.MemberCount = exports.LoadingWrapper = exports.DescriptionWrapper = exports.Description = exports.CardWrapper = exports.CardTriggerWrapper = exports.CardHeader = exports.CardContent = exports.AvatarSection = exports.ActionButtons = exports.AccessLockSVGWrapper = void 0;
require("./TeamCard.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _styled = _interopRequireDefault(require("@emotion/styled"));
var _css = require("@atlaskit/css");
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _colors = require("@atlaskit/theme/colors");
var _constants = require("@atlaskit/theme/constants");
var _constants2 = require("./constants");
var _CoverImage = require("./CoverImage");
var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var styles = {
cardtriggerwrapper: "_1e0c1kw7",
cardwrapper: "_2rkoglpi _1bsbnklw _kqswh2mm",
teamforbiddenerrorstatewrapper: "_1bsbnklw _kqswh2mm",
cardheader: "_4t3i1qr7 _1bsb1osq",
cardcontent: "_1e0c1txw _2lx21bp4 _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb _1tke1l8a",
teamname: "_11c8lodh _1reo15vq _18m915vq _1p1dglyw _c71lckbl _1e0ccj1k",
membercount: "_syaz1wmz _19pk1b66",
avatarsection: "_19pkpxbi _18u01i6y",
descriptionwrapper: "_19pkpxbi _4cvr1h6o _1e0c1txw",
description: "_1reo15vq _18m915vq _c71l1wqb _1e0ccj1k",
actionbuttons: "_1bsb1osq _1e0c1txw _1bah1yb4 _19pk1ejb _2hwx10v4 _otyridpf _18u0x0bf",
wrappedbutton: "_i0dlidpf _16jlkb7n _18u0u2gc",
morebutton: "_18u0u2gc",
loadingwrapper: "_y3gn1h6o _19pk1jfw _otyr1jfw",
accesslocksvgwrapper: "_otyr1ejb"
};
var CardTriggerWrapper = exports.CardTriggerWrapper = function CardTriggerWrapper() {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.cardtriggerwrapper)
}) : /*#__PURE__*/_react.default.createElement(CardTriggerWrapperLegacy, null);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var CardTriggerWrapperLegacy = _styled.default.div({
display: 'inherit'
});
var CardWrapper = exports.CardWrapper = function CardWrapper(_ref) {
var testId = _ref.testId,
children = _ref.children;
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.cardwrapper),
backgroundColor: "elevation.surface.overlay",
testId: testId
}, children) : /*#__PURE__*/_react.default.createElement(CardWrapperLegacy, {
"data-testid": testId
}, children);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var CardWrapperLegacy = _styled.default.div({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundColor: _constants2.bgColor,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: '320px',
position: 'relative',
WebkitFontSmoothing: 'antialiased',
MozOsxFontSmoothing: 'grayscale'
});
var TeamForbiddenErrorStateWrapper = exports.TeamForbiddenErrorStateWrapper = function TeamForbiddenErrorStateWrapper(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.teamforbiddenerrorstatewrapper)
}, props)) : /*#__PURE__*/_react.default.createElement(TeamForbiddenErrorStateWrapperLegacy, {
"data-testid": props.testId
}, props.children);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var TeamForbiddenErrorStateWrapperLegacy = _styled.default.div({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: '320px',
position: 'relative'
});
var CardHeader = exports.CardHeader = function CardHeader(_ref2) {
var image = _ref2.image,
isLoading = _ref2.isLoading,
label = _ref2.label;
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.cardheader),
backgroundColor: "color.background.neutral"
}) : /*#__PURE__*/_react.default.createElement(_CoverImage.CoverImage, {
alt: label || '',
src: image
}) : /*#__PURE__*/_react.default.createElement(CardHeaderLegacy, {
image: image,
isLoading: isLoading
});
};
// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var CardHeaderLegacy = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground-color: ", ";\n\tbackground-image: ", ";\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tbox-sizing: content-box;\n\theight: 128px;\n"])), function (props) {
return props.isLoading ? "var(--ds-background-neutral, ".concat(_colors.N20, ")") : props.image ? '' : _constants2.teamHeaderBgColor;
}, function (props) {
return props.image ? "url(".concat(props.image, ")") : '';
});
var CardContent = exports.CardContent = function CardContent(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.cardcontent)
}, props)) : /*#__PURE__*/_react.default.createElement(CardContentLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var CardContentLegacy = _styled.default.div({
display: 'flex',
flexDirection: 'column',
padding: "var(--ds-space-300, 24px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
minHeight: '104px'
});
var TeamName = exports.TeamName = function TeamName(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? (0, _platformFeatureFlags.fg)('enable_profilecard_h2tag_a11y_fix') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.teamname)
}, /*#__PURE__*/_react.default.createElement(_heading.default, {
size: "medium",
as: "h2",
children: props.children
})) : /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.teamname)
}, props)) : /*#__PURE__*/_react.default.createElement(TeamNameLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
var TeamNameLegacy = _styled.default.h6({
font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
textTransform: 'none',
overflow: 'hidden',
maxHeight: '48px',
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical'
});
var MemberCount = exports.MemberCount = function MemberCount(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.membercount)
}, props)) : /*#__PURE__*/_react.default.createElement(MemberCountLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var MemberCountLegacy = _styled.default.div({
color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
marginTop: "var(--ds-space-050, 4px)"
});
var AvatarSection = exports.AvatarSection = function AvatarSection(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.avatarsection)
}, props)) : /*#__PURE__*/_react.default.createElement(AvatarSectionLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
var AvatarSectionLegacy = _styled.default.div({
marginTop: "var(--ds-space-200, 16px)",
marginLeft: "var(--ds-space-negative-025, -2px)"
});
var DescriptionWrapper = exports.DescriptionWrapper = function DescriptionWrapper(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.descriptionwrapper)
}, props)) : /*#__PURE__*/_react.default.createElement(DescriptionWrapperLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var DescriptionWrapperLegacy = _styled.default.div({
marginTop: "var(--ds-space-200, 16px)",
alignItems: 'center',
display: 'flex'
});
var Description = exports.Description = function Description(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: (0, _css.cx)(styles.description)
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, (0, _extends2.default)({
maxLines: 3
}, props))) : /*#__PURE__*/_react.default.createElement(DescriptionLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var DescriptionLegacy = _styled.default.span({
overflow: 'hidden',
maxHeight: '60px',
display: '-webkit-box',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical'
});
var ActionButtons = exports.ActionButtons = function ActionButtons(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.actionbuttons),
backgroundColor: "elevation.surface.overlay"
}, props)) : /*#__PURE__*/_react.default.createElement(ActionButtonsLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var ActionButtonsLegacy = _styled.default.div({
width: 'calc(100% + 8px)',
display: 'flex',
justifyContent: 'space-between',
margin: "var(--ds-space-300, 24px)".concat(" ", "var(--ds-space-negative-300, -24px)", " 0 ", "var(--ds-space-negative-100, -8px)"),
backgroundColor: "var(--ds-surface-overlay, hsla(0, 100%, 100%, 0.2))"
});
var WrappedButton = exports.WrappedButton = function WrappedButton(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.wrappedbutton)
}, props)) : /*#__PURE__*/_react.default.createElement(WrappedButtonLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var WrappedButtonLegacy = _styled.default.div({
flexBasis: 0,
flexGrow: 1,
marginLeft: "var(--ds-space-100, 8px)"
});
var MoreButton = exports.MoreButton = function MoreButton(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.morebutton)
}, props)) : /*#__PURE__*/_react.default.createElement(MoreButtonLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
var MoreButtonLegacy = _styled.default.div({
marginLeft: "var(--ds-space-100, 8px)"
});
var LoadingWrapper = exports.LoadingWrapper = function LoadingWrapper(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.loadingwrapper)
}, props)) : /*#__PURE__*/_react.default.createElement(LoadingWrapperLegacy, {
"data-testid": props.testId
}, props.children);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var LoadingWrapperLegacy = _styled.default.div({
textAlign: 'center',
marginTop: "var(--ds-space-500, 40px)"
});
var AccessLockSVGWrapper = exports.AccessLockSVGWrapper = function AccessLockSVGWrapper(props) {
return (0, _platformFeatureFlags.fg)('compiled-migration-profilecard') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
xcss: (0, _css.cx)(styles.accesslocksvgwrapper)
}, props)) : /*#__PURE__*/_react.default.createElement(AccessLockSVGWrapperLegacy, props);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/use-primitives -- Ignored via go/DSP-18766
var AccessLockSVGWrapperLegacy = _styled.default.div({
marginBottom: "var(--ds-space-300, 24px)"
});