@atlaskit/profilecard 24.14.0 → 24.15.0

package/dist/es2019/components/User/ReportingLinesDetailsCompiled.js

@@ -0,0 +1,96 @@
+/* ReportingLinesDetailsCompiled.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ReportingLinesDetailsCompiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { cx } from '@atlaskit/css';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import messages from '../../messages';
+import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
+import { reportingLinesClicked } from '../../util/analytics';
+function getProfileHref(userId, profileUrl) {
+  return profileUrl ? profileUrl + userId : undefined;
+}
+const styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n",
+  reportingLinesHeadingDefaultStyles: "_11c81vhk _syaz1fxt _k48p1pd9 _otyru2gc",
+  reportingLinesHeadingStyles: "_otyrze3t"
+};
+const avatarGroupMaxCount = 5;
+const ReportingLinesDetails = props => {
+  var _manager$pii, _manager$pii2;
+  const {
+    formatMessage
+  } = useIntl();
+  const {
+    fireAnalyticsWithDuration,
+    reportingLines = {},
+    reportingLinesProfileUrl,
+    onReportingLinesClick
+  } = props;
+  const {
+    managers = [],
+    reports = []
+  } = reportingLines;
+  const manager = managers.length >= 1 ? managers[0] : undefined;
+  const hasReports = reports.length > 0;
+  const getReportingLinesOnClick = (user, userType) => onReportingLinesClick ? () => {
+    fireAnalyticsWithDuration(duration => reportingLinesClicked({
+      duration,
+      userType
+    }));
+    onReportingLinesClick(user);
+  } : undefined;
+  const onReportingLinksClick = (user, userType, href) => {
+    let shouldPreventDefault = false;
+    if (onReportingLinesClick) {
+      shouldPreventDefault = onReportingLinesClick(user) === false;
+    }
+    fireAnalyticsWithDuration(duration => reportingLinesClicked({
+      duration,
+      userType
+    }));
+    if (shouldPreventDefault) {
+      return;
+    }
+    if (href) {
+      window.location.href = href;
+    }
+  };
+  const showMoreButtonProps = {
+    'aria-label': formatMessage(messages.profileCardMoreReportingLinesLabel, {
+      count: reports.length - avatarGroupMaxCount + 1
+    })
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.reportingLinesHeadingDefaultStyles, styles.reportingLinesHeadingStyles)
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
+    onClick: () => onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl)),
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xsmall",
+    src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.reportingLinesHeadingDefaultStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
+    appearance: "stack",
+    size: "small",
+    data: reports.map(member => {
+      var _member$pii, _member$pii2;
+      return {
+        key: member.accountIdentifier,
+        name: ((_member$pii = member.pii) === null || _member$pii === void 0 ? void 0 : _member$pii.name) || '',
+        src: (_member$pii2 = member.pii) === null || _member$pii2 === void 0 ? void 0 : _member$pii2.picture,
+        href: getProfileHref(member.accountIdentifier, reportingLinesProfileUrl),
+        onClick: getReportingLinesOnClick(member, 'direct-report')
+      };
+    }),
+    maxCount: avatarGroupMaxCount,
+    testId: "profilecard-reports-avatar-group",
+    showMoreButtonProps: showMoreButtonProps
+  })));
+};
+export default ReportingLinesDetails;

package/dist/es2019/components/common/ProfileCardWrapper.compiled.css

@@ -0,0 +1 @@
+._1bsb1gwv{width:360px}

package/dist/es2019/components/common/ProfileCardWrapper.js

@@ -1,16 +1,17 @@
+/* ProfileCardWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ProfileCardWrapper.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box, xcss } from '@atlaskit/primitives';
-const styles = xcss({
-  width: '360px'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapper: "_1bsb1gwv"
+};
 export const ProfileCardWrapper = ({
   children,
   testId
 }) => {
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles,
+    xcss: styles.wrapper,
     testId: testId
   }, children);
 };

package/dist/es2019/components/team-profile-card/main.js

@@ -9,7 +9,9 @@ import AvatarGroup from '@atlaskit/avatar-group';
 import Heading from '@atlaskit/heading';
 import LinkItem from '@atlaskit/menu/link-item';
 import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Flex, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
 import { fireEvent } from '../../util/analytics';
@@ -72,24 +74,31 @@ export const TeamProfileCard = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   // Ensure that the current container is not the only connection for this team before showing the "Where we work" section
   const hasOtherTeamConnections = useMemo(() => teamContainers.filter(tc => tc.id === containerId).length < teamContainers.length, [containerId, teamContainers]);
 
   // TODO: set isNewLayout to be true when clean up 'team-bi-directional-container-connection' experiment
   const isNewLayout = Boolean(props.isKudosEnabled || props.otherActions);
   const onClick = useCallback(() => {
-    if (createAnalyticsEvent) {
-      fireEvent(createAnalyticsEvent, {
-        action: 'clicked',
-        actionSubject: 'button',
-        actionSubjectId: 'viewTeamProfileButton',
-        attributes: {}
-      });
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.button.clicked.viewTeamProfileButton', {});
+    } else {
+      if (createAnalyticsEvent) {
+        fireEvent(createAnalyticsEvent, {
+          action: 'clicked',
+          actionSubject: 'button',
+          actionSubjectId: 'viewTeamProfileButton',
+          attributes: {}
+        });
+      }
     }
     if (!isNewLayout) {
       window.open(teamProfileUrl, '_blank');
     }
-  }, [createAnalyticsEvent, teamProfileUrl, isNewLayout]);
+  }, [createAnalyticsEvent, teamProfileUrl, isNewLayout, fireEventNext]);
   if (isNewLayout) {
     return /*#__PURE__*/React.createElement(Box, {
       xcss: styles.wrapperStyles,
@@ -174,7 +183,8 @@ export const TeamProfileCard = ({
         testId: "team-app-tile",
         alt: "team-app-tile",
         xcss: styles.teamAppTileStyles
-      })
+      }),
+      testId: "team-profile-card-profile-link-item"
     }, /*#__PURE__*/React.createElement(Text, {
       maxLines: 1,
       color: "color.text"

package/dist/es2019/components/team-profile-card/team-actions/more-actions/index.js

@@ -5,8 +5,7 @@ import { IconButton } from '@atlaskit/button/new';
 import MoreIcon from '@atlaskit/icon/core/migration/show-more-horizontal--more';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { messages } from './messages';
 export const MoreActions = ({
   actions,

package/dist/es2019/components/team-profile-card/team-connections/main.js

@@ -4,7 +4,9 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { LinkItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { ContainerIcon, getContainerProperties } from '@atlaskit/teams-public';
 import { fireEvent } from '../../../util/analytics';
 const styles = {
@@ -30,16 +32,25 @@ export const TeamConnections = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const onClick = useCallback(() => {
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'teamConnectionItem',
-      actionSubjectId: 'teamProfileCard',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.teamConnectionItem.clicked.teamProfileCard', {
         container: containerType
-      }
-    });
-  }, [containerType, createAnalyticsEvent]);
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'teamConnectionItem',
+        actionSubjectId: 'teamProfileCard',
+        attributes: {
+          container: containerType
+        }
+      });
+    }
+  }, [containerType, createAnalyticsEvent, fireEventNext]);
   return /*#__PURE__*/React.createElement(LinkItem, {
     href: link,
     onClick: onClick,
@@ -87,16 +98,25 @@ export const NewTeamConnections = ({
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    fireEvent: fireEventNext
+  } = useAnalyticsEventsNext();
   const onClick = useCallback(() => {
-    fireEvent(createAnalyticsEvent, {
-      action: 'clicked',
-      actionSubject: 'teamConnectionItem',
-      actionSubjectId: 'teamProfileCard',
-      attributes: {
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireEventNext('ui.teamConnectionItem.clicked.teamProfileCard', {
         container: containerType
-      }
-    });
-  }, [containerType, createAnalyticsEvent]);
+      });
+    } else {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'teamConnectionItem',
+        actionSubjectId: 'teamProfileCard',
+        attributes: {
+          container: containerType
+        }
+      });
+    }
+  }, [containerType, createAnalyticsEvent, fireEventNext]);
   return /*#__PURE__*/React.createElement(LinkItem, {
     href: link,
     onClick: onClick,
@@ -120,7 +140,8 @@ export const NewTeamConnections = ({
       backgroundColor: 'color.background.neutral.subtle',
       xcss: styles.containerTypeIconButtonStyles,
       testId: "container-type-icon"
-    }, icon)
+    }, icon),
+    testId: "team-connection-item"
   }, /*#__PURE__*/React.createElement(Text, {
     maxLines: 1,
     color: "color.text"

package/dist/es2019/styled/CoverImage.compiled.css

@@ -6,7 +6,9 @@
 ._1e0c1txw{display:flex}
 ._1reo15vq{overflow-x:hidden}
 ._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
 ._4t3i1qr7{height:8pc}
 ._4t3i1wug{height:auto}
+._5ral1dfr{object-fit:cover}
 ._kqswh2mm{position:relative}
 ._qrwq12b0{border-top-right-radius:var(--ds-radius-small,4px)}

package/dist/es2019/styled/CoverImage.js

@@ -2,10 +2,12 @@
 import "./CoverImage.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 const styles = {
   container: "_1reo15vq _18m915vq _1bsb1osq _4t3i1qr7 _kqswh2mm _13li12b0 _qrwq12b0 _1e0c1txw _1bah1h6o _4cvr1h6o",
-  image: "_1bsbnklw _4t3i1wug"
+  image: "_1bsbnklw _4t3i1wug",
+  imageNext: "_4t3i1osq _5ral1dfr"
 };
 
 /**
@@ -26,6 +28,6 @@ export const CoverImage = ({
     ref: imgRef,
     src: src,
     alt: alt,
-    xcss: styles.image
+    xcss: fg('cover-header-image-team-profilecard') ? styles.imageNext : styles.image
   }));
 };

package/dist/es2019/styled/Error.compiled.css

@@ -1,9 +1,7 @@
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
-._syaz1fxt{color:var(--ds-text,#172b4d)}
 ._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
 ._y3gn1h6o{text-align:center}

package/dist/es2019/styled/Error.js

@@ -4,19 +4,21 @@ import "./Error.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { cx } from '@atlaskit/css';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import { N200 } from '@atlaskit/theme/colors';
 const styles = {
   errorWrapper: "_y3gn1h6o _ca0q1ejb _u5f31ejb _n3td1ejb _19bv1ejb",
-  errorTitle: "_11c82smr _syaz1fxt _19pku2gc",
+  errorTitle: "_19pku2gc",
   teamErrorText: "_syaz1wmz _19pku2gc"
 };
 export const ErrorWrapper = props => /*#__PURE__*/React.createElement(Box, _extends({
   xcss: cx(styles.errorWrapper)
 }, props));
 export const ErrorTitle = props => /*#__PURE__*/React.createElement(Box, {
-  xcss: cx(styles.errorTitle)
-}, props.children);
+  xcss: styles.errorTitle
+}, /*#__PURE__*/React.createElement(Text, {
+  color: "color.text"
+}, props.children));
 export const TeamErrorText = props => /*#__PURE__*/React.createElement(Box, {
   xcss: cx(styles.teamErrorText)
 }, props.children);

package/dist/es2019/util/analytics.js

@@ -4,7 +4,7 @@ import { getPageTime } from './performance';
 const ANALYTICS_CHANNEL = 'peopleTeams';
 export const PACKAGE_META_DATA = {
   packageName: "@atlaskit/profilecard",
-  packageVersion: "24.13.7"
+  packageVersion: "0.0.0-development"
 };
 const runItLater = cb => {
   const requestIdleCallback = window.requestIdleCallback;
@@ -45,7 +45,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "24.13.7",
+    packageVersion: "0.0.0-development",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }
@@ -62,6 +62,11 @@ export const getActionSubject = type => {
       return 'user';
   }
 };
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const cardTriggered = (type, method, teamId) => {
   return createEvent('ui', 'triggered', getActionSubject(type), undefined, {
     method,
@@ -70,13 +75,63 @@ export const cardTriggered = (type, method, teamId) => {
     } : {})
   });
 };
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const teamRequestAnalytics = (action, attributes) => createEvent('operational', action, TEAM_SUBJECT, 'request', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const userRequestAnalytics = (action, attributes) => createEvent('operational', action, USER_SUBJECT, 'request', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const profileCardRendered = (type, actionSubjectId, attributes) => createEvent('ui', 'rendered', getActionSubject(type), actionSubjectId, attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const actionClicked = (type, attributes) => createEvent('ui', 'clicked', getActionSubject(type), 'action', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const reportingLinesClicked = attributes => createEvent('ui', 'clicked', USER_SUBJECT, 'reportingLines', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const moreActionsClicked = (type, attributes) => createEvent('ui', 'clicked', getActionSubject(type), 'moreActions', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const teamAvatarClicked = attributes => createEvent('ui', 'clicked', TEAM_SUBJECT, 'avatar', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const moreMembersClicked = attributes => createEvent('ui', 'clicked', TEAM_SUBJECT, 'moreMembers', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const errorRetryClicked = attributes => createEvent('ui', 'clicked', TEAM_SUBJECT, 'errorRetry', attributes);
+
+/**
+ * @private
+ * @deprecated Analytics events should be fired using the `@atlaskit/teams-app-internal-analytics` package.
+ */
 export const agentRequestAnalytics = (action, actionSubjectId, attributes) => createEvent('operational', action, AGENT_SUBJECT, actionSubjectId || 'request', attributes);

package/dist/esm/client/ProfileCardClient.js

@@ -42,8 +42,8 @@ var ProfileCardClient = /*#__PURE__*/function () {
     }
   }, {
     key: "getTeamProfile",
-    value: function getTeamProfile(teamId, orgId, analytics) {
-      return this.teamClient.getProfile(teamId, orgId, analytics);
+    value: function getTeamProfile(teamId, orgId, analytics, analyticsNext) {
+      return this.teamClient.getProfile(teamId, orgId, analytics, analyticsNext);
     }
   }, {
     key: "getReportingLines",
@@ -147,27 +147,27 @@ var ProfileCardClient = /*#__PURE__*/function () {
     }()
   }, {
     key: "getRovoAgentProfile",
-    value: function getRovoAgentProfile(id, analytics) {
+    value: function getRovoAgentProfile(id, analytics, analyticsNext) {
       var _this$rovoAgentClient2;
-      return (_this$rovoAgentClient2 = this.rovoAgentClient) === null || _this$rovoAgentClient2 === void 0 ? void 0 : _this$rovoAgentClient2.getProfile(id, analytics);
+      return (_this$rovoAgentClient2 = this.rovoAgentClient) === null || _this$rovoAgentClient2 === void 0 ? void 0 : _this$rovoAgentClient2.getProfile(id, analytics, analyticsNext);
     }
   }, {
     key: "getRovoAgentPermissions",
-    value: function getRovoAgentPermissions(id, fireAnalytics) {
+    value: function getRovoAgentPermissions(id, fireAnalytics, analyticsNext) {
       var _this$rovoAgentClient3;
-      return (_this$rovoAgentClient3 = this.rovoAgentClient) === null || _this$rovoAgentClient3 === void 0 ? void 0 : _this$rovoAgentClient3.getPermissions(id, fireAnalytics);
+      return (_this$rovoAgentClient3 = this.rovoAgentClient) === null || _this$rovoAgentClient3 === void 0 ? void 0 : _this$rovoAgentClient3.getPermissions(id, fireAnalytics, analyticsNext);
     }
   }, {
     key: "deleteAgent",
-    value: function deleteAgent(id, analytics) {
+    value: function deleteAgent(id, analytics, analyticsNext) {
       var _this$rovoAgentClient4;
-      return (_this$rovoAgentClient4 = this.rovoAgentClient) === null || _this$rovoAgentClient4 === void 0 ? void 0 : _this$rovoAgentClient4.deleteAgent(id, analytics);
+      return (_this$rovoAgentClient4 = this.rovoAgentClient) === null || _this$rovoAgentClient4 === void 0 ? void 0 : _this$rovoAgentClient4.deleteAgent(id, analytics, analyticsNext);
     }
   }, {
     key: "setFavouriteAgent",
-    value: function setFavouriteAgent(id, isFavourite, analytics) {
+    value: function setFavouriteAgent(id, isFavourite, analytics, analyticsNext) {
       var _this$rovoAgentClient5;
-      return (_this$rovoAgentClient5 = this.rovoAgentClient) === null || _this$rovoAgentClient5 === void 0 ? void 0 : _this$rovoAgentClient5.setFavouriteAgent(id, isFavourite, analytics);
+      return (_this$rovoAgentClient5 = this.rovoAgentClient) === null || _this$rovoAgentClient5 === void 0 ? void 0 : _this$rovoAgentClient5.setFavouriteAgent(id, isFavourite, analytics, analyticsNext);
     }
   }]);
 }();