@atlaskit/profilecard/dist/esm/styled/TeamCard.js

A React component to display a card with user information.

/* TeamCard.tsx generated by @compiled/babel-plugin v0.36.1 */
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
import _extends from "@babel/runtime/helpers/extends";
var _templateObject;
import "./TeamCard.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import styled from '@emotion/styled';
import { cx } from '@atlaskit/css';
import Heading from '@atlaskit/heading';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, Text } from '@atlaskit/primitives/compiled';
import { N20, N200 } from '@atlaskit/theme/colors';
import { borderRadius } from '@atlaskit/theme/constants';
import { bgColor, teamHeaderBgColor } from './constants';
import { CoverImage } from './CoverImage';
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"
};
export var CardTriggerWrapper = function CardTriggerWrapper() {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.cardtriggerwrapper)
  }) : /*#__PURE__*/React.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.div({
  display: 'inherit'
});
export var CardWrapper = function CardWrapper(_ref) {
  var testId = _ref.testId,
    children = _ref.children;
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.cardwrapper),
    backgroundColor: "elevation.surface.overlay",
    testId: testId
  }, children) : /*#__PURE__*/React.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.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: 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(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'
});
export var TeamForbiddenErrorStateWrapper = function TeamForbiddenErrorStateWrapper(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.teamforbiddenerrorstatewrapper)
  }, props)) : /*#__PURE__*/React.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.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'
});
export var CardHeader = function CardHeader(_ref2) {
  var image = _ref2.image,
    isLoading = _ref2.isLoading,
    label = _ref2.label;
  return fg('compiled-migration-profilecard') ? isLoading || !image ? /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.cardheader),
    backgroundColor: "color.background.neutral"
  }) : /*#__PURE__*/React.createElement(CoverImage, {
    alt: label || '',
    src: image
  }) : /*#__PURE__*/React.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.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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(N20, ")") : props.image ? '' : teamHeaderBgColor;
}, function (props) {
  return props.image ? "url(".concat(props.image, ")") : '';
});
export var CardContent = function CardContent(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.cardcontent)
  }, props)) : /*#__PURE__*/React.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.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'
});
export var TeamName = function TeamName(props) {
  return fg('compiled-migration-profilecard') ? fg('enable_profilecard_h2tag_a11y_fix') ? /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.teamname)
  }, /*#__PURE__*/React.createElement(Heading, {
    size: "medium",
    as: "h2",
    children: props.children
  })) : /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.teamname)
  }, props)) : /*#__PURE__*/React.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.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'
});
export var MemberCount = function MemberCount(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.membercount)
  }, props)) : /*#__PURE__*/React.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.div({
  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
  marginTop: "var(--ds-space-050, 4px)"
});
export var AvatarSection = function AvatarSection(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.avatarsection)
  }, props)) : /*#__PURE__*/React.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.div({
  marginTop: "var(--ds-space-200, 16px)",
  marginLeft: "var(--ds-space-negative-025, -2px)"
});
export var DescriptionWrapper = function DescriptionWrapper(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.descriptionwrapper)
  }, props)) : /*#__PURE__*/React.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.div({
  marginTop: "var(--ds-space-200, 16px)",
  alignItems: 'center',
  display: 'flex'
});
export var Description = function Description(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
    xcss: cx(styles.description)
  }, /*#__PURE__*/React.createElement(Text, _extends({
    maxLines: 3
  }, props))) : /*#__PURE__*/React.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.span({
  overflow: 'hidden',
  maxHeight: '60px',
  display: '-webkit-box',
  WebkitLineClamp: 3,
  WebkitBoxOrient: 'vertical'
});
export var ActionButtons = function ActionButtons(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.actionbuttons),
    backgroundColor: "elevation.surface.overlay"
  }, props)) : /*#__PURE__*/React.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.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))"
});
export var WrappedButton = function WrappedButton(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.wrappedbutton)
  }, props)) : /*#__PURE__*/React.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.div({
  flexBasis: 0,
  flexGrow: 1,
  marginLeft: "var(--ds-space-100, 8px)"
});
export var MoreButton = function MoreButton(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.morebutton)
  }, props)) : /*#__PURE__*/React.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.div({
  marginLeft: "var(--ds-space-100, 8px)"
});
export var LoadingWrapper = function LoadingWrapper(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.loadingwrapper)
  }, props)) : /*#__PURE__*/React.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.div({
  textAlign: 'center',
  marginTop: "var(--ds-space-500, 40px)"
});
export var AccessLockSVGWrapper = function AccessLockSVGWrapper(props) {
  return fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, _extends({
    xcss: cx(styles.accesslocksvgwrapper)
  }, props)) : /*#__PURE__*/React.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.div({
  marginBottom: "var(--ds-space-300, 24px)"
});