@atlaskit/profilecard
Version:
A React component to display a card with user information.
428 lines (414 loc) • 18.4 kB
JavaScript
/* Card.tsx generated by @compiled/babel-plugin v0.36.1 */
/* eslint-disable @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation */
import "./Card.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 { keyframes } from '@emotion/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 { fg } from '@atlaskit/platform-feature-flags';
import { Box, Text } from '@atlaskit/primitives/compiled';
import { B200, N50A, N60A } from '@atlaskit/theme/colors';
import { borderRadius } from '@atlaskit/theme/constants';
import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, labelIconColor, labelTextColor } from './constants';
const kudosButtonAnimationTransformationCompiled = null;
const styles = {
cardWrapper: "_2rkoglpi _1bsb1gwv",
profileImage: "_kqswstnw _154i1ejb _1ltv1ejb",
actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
animatedKudosButton: "_18u0u2gc",
actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw",
overflowActionButtonsWrapper: "_1e0c1o8l _1bsbzwfg _4t3izwfg",
cardContent: "_1e0c1txw _2lx21bp4 _1tkebv7e",
detailsGroup: "_1e0c1txw _2lx21bp4 _18u01epz _19bvxy5q _1bsb18pt",
disabledInfo: "_11c81o8v _syaz1fxt _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t",
lozengeWrapper: "_19pkpxbi _1e0c1ule",
customLozengeContainer: "_1e0c1txw _2lx2vrvc _1n261g80 _1bah1y6m _19pkutpp",
spinnerContainer: "_4cvr1h6o _1e0c1txw _4t3i16xz _1bah1h6o _kqswh2mm",
cardContainer: "_1reo15vq _18m915vq _kqswh2mm _12vemgnk _1lrw14bs _ca0q1ejb _19bv1ejb _u5f31ejb _n3td1ejb",
cardContainerActiveUser: "_1itk1419",
cardContainerDisabledUser: "_1itkkf3t",
cardContainerWithElevation: "_2rkoglpi _16qs1cd0",
detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
detailsLabelExtraTopSpace: "_19pkxy5q",
detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz131l _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
detailsLabelText: "_1reo15vq _18m915vq _11c8dcr7 _1bto1l2s _syaz1fxt _19pkze3t _18u0ze3t",
kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkq1hn",
jobTitleLabel: "_19pkze3t _otyrze3t _18u0utpp _2hwxze3t",
appTitleLabel: "_2rkoglpi _syaz1fxt _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
};
export const CardWrapper = ({
children,
role,
testId,
labelledBy
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.cardWrapper),
backgroundColor: 'elevation.surface.overlay',
role: role,
testId: testId,
"aria-labelledby": labelledBy
}, children) : /*#__PURE__*/React.createElement(CardWrapperLegacy, {
"data-testid": testId,
role: role,
"aria-labelledby": labelledBy
}, 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`
background-color: ${bgColor};
border-radius: ${"var(--ds-border-radius, 3px)"};
width: 360px;
`;
export const ProfileImage = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.profileImage)
}, children) : /*#__PURE__*/React.createElement(ProfileImageLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const ProfileImageLegacy = styled.div`
position: absolute;
top: ${"var(--ds-space-300, 24px)"};
left: ${"var(--ds-space-300, 24px)"};
`;
export const ActionsFlexSpacer = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.actionsFlexSpacer)
}) : /*#__PURE__*/React.createElement(ActionsFlexSpacerLegacy, null);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const ActionsFlexSpacerLegacy = styled.div`
flex: 1 0 auto;
`;
// eslint-disable-next-line @atlaskit/design-system/no-keyframes-tagged-template-expression -- needs manual remediation
const kudosButtonAnimationTransformation = keyframes`
0% { transform: translate(-80px, -50px); }
100% { transform: translate(90px, -70px); }
`;
export const KudosBlobAnimationStyle = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.kudosBlobAnimationStyle)
}) :
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
React.createElement(KudosBlobAnimationStyleLegacy, {
className: "kudos-blob-animation"
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
const KudosBlobAnimationStyleLegacy = styled.div`
display: none;
height: 150px;
width: 150px;
z-index: -1;
position: absolute;
top: ${32 / 14}em;
animation-name: ${kudosButtonAnimationTransformation};
animation-iteration-count: 1;
animation-duration: 3s;
background-image: radial-gradient(
circle,
${"var(--ds-background-information-pressed, #85B8FF)"} 0%,
${"var(--ds-background-discovery-pressed, #B8ACF6)"} 25%,
transparent 50%
);
overflow: hidden;
`;
export const KudosBlobAnimation = () => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.kudosBlobAnimationStyle)
}) : /*#__PURE__*/React.createElement(KudosBlobAnimationLegacy, null);
const KudosBlobAnimationLegacy = () => /*#__PURE__*/React.createElement(KudosBlobAnimationStyle, null);
export const AnimationWrapper = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.animationWrapper)
}, children) : /*#__PURE__*/React.createElement(AnimationWrapperLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const AnimationWrapperLegacy = styled.div`
clip-path: inset(0px 0px 0px 0px round ${borderRadius()}px);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
`;
export const AnimatedKudosButton = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.animatedKudosButton)
}, children) : /*#__PURE__*/React.createElement(AnimatedKudosButtonLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const AnimatedKudosButtonLegacy = styled.div`
margin-left: ${"var(--ds-space-100, 8px)"};
/* Need babel-plugin-emotion to use component selector */
/* Previously with styled-components: &:hover {KudosBlobAnimation} { */
&:focus-within .kudos-blob-animation,
&:focus .kudos-blob-animation,
&:hover .kudos-blob-animation {
display: block;
}
`;
export const ActionButtonGroup = ({
children,
testId
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
testId: testId,
xcss: cx(styles.actionButtonGroup)
}, children) : /*#__PURE__*/React.createElement(ActionButtonGroupLegacy, {
"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 ActionButtonGroupLegacy = styled.div`
user-select: none;
margin: ${"var(--ds-space-200, 16px)"} 0 0 0;
text-align: right;
display: flex;
justify-content: flex-end;
button,
a {
position: relative;
}
button,
a,
span {
margin-left: ${"var(--ds-space-100, 8px)"};
&:first-child {
margin-left: ${"var(--ds-space-0, 0px)"};
}
}
a,
button {
&:focus {
outline-color: ${`var(--ds-border-focused, ${B200})`};
outline-offset: ${"var(--ds-border-width, 2px)"};
outline-style: solid;
outline-width: ${"var(--ds-border-width, 2px)"};
}
}
`;
export const OverflowActionButtonsWrapper = ({
children,
testId
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
testId: testId,
xcss: cx(styles.overflowActionButtonsWrapper)
}, children) : /*#__PURE__*/React.createElement(OverflowActionButtonsWrapperLegacy, {
"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 OverflowActionButtonsWrapperLegacy = styled.div`
display: inline-block;
width: ${"var(--ds-space-400, 32px)"};
height: ${"var(--ds-space-400, 32px)"};
margin-left: ${"var(--ds-space-100, 8px)"};
button {
&:focus {
outline-color: ${`var(--ds-border-focused, ${B200})`};
outline-offset: ${"var(--ds-border-width, 2px)"};
outline-style: solid;
outline-width: ${"var(--ds-border-width, 2px)"};
}
}
`;
export const CardContent = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.cardContent)
}, children) : /*#__PURE__*/React.createElement(CardContentLegacy, null, children);
// 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;
flex-direction: column;
min-height: 136px;
`;
export const DetailsGroup = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.detailsGroup)
}, children) : /*#__PURE__*/React.createElement(DetailsGroupLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const DetailsGroupLegacy = styled.div`
display: flex;
flex-direction: column;
margin-left: 116px;
width: 196px;
`;
export const DisabledInfo = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.disabledInfo)
}, children) : /*#__PURE__*/React.createElement(DisabledInfoLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const DisabledInfoLegacy = styled.div`
font: ${"var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
color: ${labelTextColor};
margin: ${"var(--ds-space-150, 12px)"} 0 0 0;
line-height: 16px;
`;
export const LozengeWrapper = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.lozengeWrapper)
}, children) : /*#__PURE__*/React.createElement(LozengeWrapperLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const LozengeWrapperLegacy = styled.div`
margin-top: ${"var(--ds-space-200, 16px)"};
text-transform: uppercase;
display: block;
`;
export const CustomLozengeContainer = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.customLozengeContainer)
}, children) : /*#__PURE__*/React.createElement(CustomLozengeContainerLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const CustomLozengeContainerLegacy = styled(LozengeWrapper)`
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: ${"var(--ds-space-150, 12px)"};
> * {
margin-top: ${"var(--ds-space-050, 4px)"};
&:not(:last-child) {
margin-right: ${"var(--ds-space-050, 4px)"};
}
}
`;
export const JobTitleLabel = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.jobTitleLabel)
}, /*#__PURE__*/React.createElement(Text, {
maxLines: 1,
color: "color.text.inverse"
}, children)) : /*#__PURE__*/React.createElement(JobTitleLabelLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const JobTitleLabelLegacy = styled.span`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font: ${"var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
color: ${headerTextColor};
margin: 0 0 ${"var(--ds-space-150, 12px)"} 0;
`;
export const AppTitleLabel = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.appTitleLabel),
backgroundColor: "color.background.neutral"
}, /*#__PURE__*/React.createElement(Text, {
color: "color.text",
size: "UNSAFE_small",
weight: "bold"
}, children)) : /*#__PURE__*/React.createElement(AppTitleLabelLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const AppTitleLabelLegacy = styled.span`
background: ${appLabelBgColor};
color: ${appLabelTextColor};
border-radius: ${borderRadius()};
padding: 0 ${"var(--ds-space-075, 6px)"};
width: fit-content;
font-weight: ${"var(--ds-font-weight-bold, 700)"};
text-transform: uppercase;
font: ${"var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
margin: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-150, 12px)"} 0;
`;
export const SpinnerContainer = ({
children,
testId
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
testId: testId,
xcss: cx(styles.spinnerContainer)
}, children) : /*#__PURE__*/React.createElement(SpinnerContainerLegacy, {
"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 SpinnerContainerLegacy = styled.div`
align-items: center;
display: flex;
height: 96px;
justify-content: center;
position: relative;
`;
export const CardContainer = ({
children,
isDisabledUser,
withoutElevation
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.cardContainer, isDisabledUser ? styles.cardContainerDisabledUser : styles.cardContainerActiveUser, !withoutElevation && styles.cardContainerWithElevation)
}, children) : /*#__PURE__*/React.createElement(CardContainerLegacy, {
isDisabledUser: isDisabledUser,
withoutElevation: withoutElevation
}, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const CardContainerLegacy = styled.div`
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-image: linear-gradient(
to bottom,
${props => props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor}
0%,
${props => props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor} 100%
);
background-repeat: no-repeat;
background-size: 100% 96px;
box-sizing: content-box;
padding: ${"var(--ds-space-300, 24px)"};
box-shadow: ${props => props.withoutElevation ? '' : `${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`}`};
border-radius: ${props => props.withoutElevation ? '' : `${borderRadius()}px`};
overflow: hidden;
`;
export const DetailsLabel = ({
children,
extraTopSpace = false
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
xcss: cx(styles.detailsLabel, extraTopSpace && styles.detailsLabelExtraTopSpace)
}, children) : /*#__PURE__*/React.createElement(DetailsLabelLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const DetailsLabelLegacy = styled.div`
display: flex;
align-items: center;
margin: ${"var(--ds-space-200, 16px)"} 0 0 0;
white-space: nowrap;
& + & {
margin-top: ${"var(--ds-space-025, 2px)"};
}
`;
export const DetailsLabelIcon = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
as: "dt",
xcss: cx(styles.detailsLabelIcon)
}, children) : /*#__PURE__*/React.createElement(DetailsLabelIconLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const DetailsLabelIconLegacy = styled.dt`
display: flex;
flex-shrink: 0;
color: ${labelIconColor};
width: ${"var(--ds-space-200, 16px)"};
height: ${"var(--ds-space-200, 16px)"};
padding: ${"var(--ds-space-050, 4px)"};
vertical-align: top;
svg {
width: 100%;
height: 100%;
}
`;
export const DetailsLabelText = ({
children
}) => fg('compiled-migration-profilecard') ? /*#__PURE__*/React.createElement(Box, {
as: "dd",
xcss: cx(styles.detailsLabelText)
}, children) : /*#__PURE__*/React.createElement(DetailsLabelTextLegacy, null, children);
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
const DetailsLabelTextLegacy = styled.dd`
overflow: hidden;
text-overflow: ellipsis;
color: ${labelTextColor};
font: ${"var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"};
padding-block: ${"var(--ds-space-050, 4px)"};
padding-left: ${"var(--ds-space-050, 4px)"};
margin-inline-start: 0;
margin-top: 0;
`;