@atlaskit/profilecard/dist/es2019/styled/Card.js

A React component to display a card with user information.

/* Card.tsx generated by @compiled/babel-plugin v0.39.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, { useRef } from 'react';
import { cx } from '@atlaskit/css';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, Text } from '@atlaskit/primitives/compiled';
import Tooltip from '@atlaskit/tooltip';
const kudosButtonAnimationTransformationCompiled = null;
const styles = {
  profileImage: "_kqswstnw _154i1jfw _1ltv1ejb",
  actionsFlexSpacer: "_16jlkb7n _1o9zidpf _i0dl1wug",
  kudosBlobAnimationStyle: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _154ixy5q",
  animationWrapper: "_mkrz1rip _kqswstnw _154ize3t _1ltvze3t _94n5ze3t _1xi2ze3t",
  animatedKudosButton: "_18u0u2gc",
  overflowActionButtonsWrapper: "_1e0c1o8l _1bsbzwfg _4t3izwfg",
  cardContent: "_1e0c1txw _2lx21bp4 _1tkebv7e",
  detailsGroup: "_1e0c1txw _2lx21bp4 _18u01epz _19bvxy5q _1bsb18pt",
  disabledInfo: "_11c8wadc _syazi7uo _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t",
  lozengeWrapper: "_19pkpxbi _1e0c1ule",
  customLozengeContainer: "_1e0c1txw _2lx2vrvc _1n261g80 _1bah1y6m _19pkutpp",
  cardContainer: "_1reo15vq _18m915vq _kqswh2mm _12vemgnk _1lrw14bs _ca0q1ejb _19bv1ejb _u5f31ejb _n3td1ejb",
  cardContainerActiveUser: "_1itkybvv",
  cardContainerDisabledUser: "_1itk1387",
  cardContainerWithElevation: "_2rko12b0 _16qs130s",
  detailsLabel: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _o5721q9c",
  detailsLabelNext: "_zulpu2gc _1e0c1txw _4cvr1h6o _1bah1y6m _19pkutpp _2hwxze3t _18u0ze3t _otyrze3t _19bvze3t _o5721q9c",
  detailsLabelExtraTopSpace: "_19pkxy5q",
  detailsLabelIcon: "_1e0c1txw _1o9zidpf _syaz1rpy _1bsb7vkz _4t3i7vkz _s7n4jp4b _19pkze3t",
  detailsLabelText: "_1reo15vq _18m915vq _11c8rymc _1bto1l2s _syazi7uo _19pkze3t _18u0ze3t",
  kudosBlobAnimation: "_1e0cglyw _4t3i1w81 _1bsb1w81 _1pby1mrw _kqswstnw _j7hq1q51 _tip8kb7n _5sagi11n _1itkdsyg",
  appTitleLabel: "_2rko12b0 _syazi7uo _u5f312x7 _19bv12x7 _1bsb1ns9 _19pk1b66 _otyrze3t _18u0utpp _2hwxze3t"
};
const stylesCompiled = {
  jobTitleLabel: "_19pkze3t _otyrze3t _18u0ze3t _2hwxze3t _1br315cr",
  actionButtonGroup: "_zulp12x7 _uiztglyw _19pkpxbi _2hwxze3t _18u0ze3t _otyrze3t _y3gnusic _1bahesu3 _1e0c1txw _1oqbazsu"
};
export const ProfileImage = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.profileImage)
}, children);
export const ActionsFlexSpacer = () => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.actionsFlexSpacer)
});
export const KudosBlobAnimationStyle = () => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.kudosBlobAnimationStyle)
});
export const KudosBlobAnimation = () => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.kudosBlobAnimationStyle)
});
export const AnimationWrapper = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.animationWrapper)
}, children);
export const AnimatedKudosButton = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.animatedKudosButton)
}, children);
export const ActionButtonGroup = ({
  children,
  testId
}) => /*#__PURE__*/React.createElement(Box, {
  testId: testId,
  xcss: cx(stylesCompiled.actionButtonGroup),
  id: "profile-card-action-button-group"
}, children);
export const OverflowActionButtonsWrapper = ({
  children,
  testId
}) => /*#__PURE__*/React.createElement(Box, {
  testId: testId,
  xcss: cx(styles.overflowActionButtonsWrapper)
}, children);
export const CardContent = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.cardContent)
}, children);
export const DetailsGroup = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.detailsGroup)
}, children);
export const DisabledInfo = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.disabledInfo)
}, children);
export const LozengeWrapper = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.lozengeWrapper)
}, children);
export const CustomLozengeContainer = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.customLozengeContainer)
}, children);
export const JobTitleLabel = ({
  children
}) => {
  const textRef = useRef(null);
  return /*#__PURE__*/React.createElement(Box, {
    xcss: cx(stylesCompiled.jobTitleLabel)
  }, fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
    content: children,
    position: "bottom",
    isScreenReaderAnnouncementDisabled: true,
    canAppear: () => {
      if (!textRef.current) {
        return false;
      }
      // Only showing the tooltip when the element has been truncated (ellipsis)
      return textRef.current.scrollHeight > textRef.current.clientHeight;
    }
  }, /*#__PURE__*/React.createElement(Text, {
    ref: textRef,
    maxLines: 1,
    color: "color.text.inverse",
    id: "profile-card-job-title-label-text"
  }, children)) : /*#__PURE__*/React.createElement(Text, {
    maxLines: 1,
    color: "color.text.inverse",
    id: "profile-card-job-title-label-text"
  }, children));
};
export const AppTitleLabel = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.appTitleLabel),
  backgroundColor: "color.background.neutral"
}, /*#__PURE__*/React.createElement(Text, {
  color: "color.text",
  size: "small",
  weight: "bold"
}, children));
export const CardContainer = ({
  children,
  isDisabledUser,
  withoutElevation
}) => /*#__PURE__*/React.createElement(Box, {
  xcss: cx(styles.cardContainer, isDisabledUser ? styles.cardContainerDisabledUser : styles.cardContainerActiveUser, !withoutElevation && styles.cardContainerWithElevation)
}, children);
export const DetailsLabel = ({
  children,
  extraTopSpace = false
}) => /*#__PURE__*/React.createElement(Box, {
  as: "dl",
  xcss: cx(styles.detailsLabelNext, extraTopSpace && styles.detailsLabelExtraTopSpace)
}, children);
export const DetailsLabelIcon = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  as: "dt",
  xcss: cx(styles.detailsLabelIcon)
}, children);
export const DetailsLabelText = ({
  children
}) => /*#__PURE__*/React.createElement(Box, {
  as: "dd",
  xcss: cx(styles.detailsLabelText)
}, children);