@atlaskit/profilecard
Version:
A React component to display a card with user information.
211 lines (209 loc) • 11.7 kB
JavaScript
/* TeamCard.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
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';
const 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 const CardTriggerWrapper = () => 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
const CardTriggerWrapperLegacy = styled.div({
display: 'inherit'
});
export const CardWrapper = ({
testId,
children
}) => 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
const 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: `${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 const TeamForbiddenErrorStateWrapper = props => 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
const 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 const CardHeader = ({
image,
isLoading,
label
}) => 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
const CardHeaderLegacy = styled.div`
background-color: ${props => props.isLoading ? `var(--ds-background-neutral, ${N20})` : props.image ? '' : teamHeaderBgColor};
background-image: ${props => props.image ? `url(${props.image})` : ''};
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-sizing: content-box;
height: 128px;
`;
export const CardContent = props => 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
const 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 const TeamName = props => 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
const 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 const MemberCount = props => 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
const MemberCountLegacy = styled.div({
color: `var(--ds-text-subtlest, ${N200})`,
marginTop: "var(--ds-space-050, 4px)"
});
export const AvatarSection = props => 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
const AvatarSectionLegacy = styled.div({
marginTop: "var(--ds-space-200, 16px)",
marginLeft: "var(--ds-space-negative-025, -2px)"
});
export const DescriptionWrapper = props => 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
const DescriptionWrapperLegacy = styled.div({
marginTop: "var(--ds-space-200, 16px)",
alignItems: 'center',
display: 'flex'
});
export const Description = props => 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
const DescriptionLegacy = styled.span({
overflow: 'hidden',
maxHeight: '60px',
display: '-webkit-box',
WebkitLineClamp: 3,
WebkitBoxOrient: 'vertical'
});
export const ActionButtons = props => 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
const ActionButtonsLegacy = styled.div({
width: 'calc(100% + 8px)',
display: 'flex',
justifyContent: 'space-between',
margin: `${"var(--ds-space-300, 24px)"} ${"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 const WrappedButton = props => 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
const WrappedButtonLegacy = styled.div({
flexBasis: 0,
flexGrow: 1,
marginLeft: "var(--ds-space-100, 8px)"
});
export const MoreButton = props => 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
const MoreButtonLegacy = styled.div({
marginLeft: "var(--ds-space-100, 8px)"
});
export const LoadingWrapper = props => 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
const LoadingWrapperLegacy = styled.div({
textAlign: 'center',
marginTop: "var(--ds-space-500, 40px)"
});
export const AccessLockSVGWrapper = props => 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
const AccessLockSVGWrapperLegacy = styled.div({
marginBottom: "var(--ds-space-300, 24px)"
});