UNPKG

@atlaskit/profilecard

Version:

A React component to display a card with user information.

242 lines (240 loc) 15.1 kB
/* 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)" });