@atlaskit/profilecard 24.14.0 → 24.15.0

package/dist/es2019/components/Team/TeamProfileCard.js

@@ -17,22 +17,34 @@ import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../..
 import { ErrorWrapper, TeamErrorText } from '../../styled/Error';
 import { ActionButtons, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { CardContent, CardHeader, CardWrapper } from '../../styled/TeamTrigger';
-import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
+import { actionClicked, errorRetryClicked, moreActionsClicked, moreMembersClicked, PACKAGE_META_DATA, profileCardRendered, teamAvatarClicked } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
+import { getPageTime } from '../../util/performance';
 import { ErrorIllustration } from '../Error';
 import TeamForbiddenErrorState from './TeamForbiddenErrorState';
 import TeamLoadingState from './TeamLoadingState';
 const LARGE_MEMBER_COUNT = 50;
 const GIVE_KUDOS_ACTION_ID = 'give-kudos';
 const avatarGroupMaxCount = 9;
-function onMemberClick(callback, userId, analytics, index, hasHref) {
+function onMemberClick(callback, userId, analytics, analyticsNext, index, hasHref) {
   return event => {
-    analytics(duration => teamAvatarClicked({
-      duration,
-      hasHref,
-      hasOnClick: !!callback,
-      index
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.avatar', duration => ({
+        duration,
+        hasHref,
+        hasOnClick: !!callback,
+        index,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => teamAvatarClicked({
+        duration,
+        hasHref,
+        hasOnClick: !!callback,
+        index
+      }));
+    }
     if (callback) {
       callback(userId, event);
     }
@@ -44,6 +56,7 @@ const TeamMembers = ({
   members,
   onUserClick,
   includingYou,
+  analyticsNext,
   isTriggeredByKeyboard
 }) => {
   const {
@@ -68,13 +81,22 @@ const TeamMembers = ({
       current: isOpen
     } = isMoreMembersOpen;
     if (!isOpen) {
-      analytics(duration => moreMembersClicked({
-        duration,
-        memberCount: count
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreMembers', duration => ({
+          duration,
+          memberCount: count,
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        }));
+      } else {
+        analytics(duration => moreMembersClicked({
+          duration,
+          memberCount: count
+        }));
+      }
     }
     isMoreMembersOpen.current = !isOpen;
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   const showMoreButtonProps = {
     onClick: onMoreClick,
     'aria-label': formatMessage(messages.profileCardMoreMembersLabel, {
@@ -89,7 +111,7 @@ const TeamMembers = ({
     appearance: "stack",
     data: members.map((member, index) => {
       const href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
-      const onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      const onClick = onMemberClick(onUserClick, member.id, analytics, analyticsNext, index, !!generateUserLink);
       return {
         key: member.id,
         name: member.fullName,
@@ -112,15 +134,27 @@ const TeamMembers = ({
     }
   })));
 };
-function onActionClick(action, analytics, index) {
+function onActionClick(action, analytics, analyticsNext, index) {
   return (event, ...args) => {
-    analytics(duration => actionClicked('team', {
-      duration,
-      hasHref: !!action.link,
-      hasOnClick: !!action.callback,
-      index,
-      actionId: action.id || ''
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.action', duration => ({
+        duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index,
+        actionId: action.id || '',
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => actionClicked('team', {
+        duration,
+        hasHref: !!action.link,
+        hasOnClick: !!action.callback,
+        index,
+        actionId: action.id || ''
+      }));
+    }
     if (action.callback && isBasicClick(event)) {
       event.preventDefault();
       action.callback(event, ...args);
@@ -130,12 +164,13 @@ function onActionClick(action, analytics, index) {
 const ActionButton = ({
   action,
   analytics,
+  analyticsNext,
   index
 }) => {
   const isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
   const actionButton = /*#__PURE__*/React.createElement(LinkButton, {
     key: action.id || index,
-    onClick: onActionClick(action, analytics, index),
+    onClick: onActionClick(action, analytics, analyticsNext, index),
     href: action.link || '',
     target: action.target,
     shouldFitContainer: true
@@ -147,20 +182,30 @@ const ActionButton = ({
 };
 const ExtraActions = ({
   actions,
-  analytics
+  analytics,
+  analyticsNext
 }) => {
   const [isOpen, setOpen] = useState(false);
   const count = actions.length;
   const onMoreClick = useCallback(shouldBeOpen => {
     if (shouldBeOpen) {
       // Only fire this event when OPENING the dropdown
-      analytics(duration => moreActionsClicked('team', {
-        duration,
-        numActions: count + 2
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        analyticsNext('ui.teamProfileCard.clicked.moreActions', duration => ({
+          duration,
+          numActions: count + 2,
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        }));
+      } else {
+        analytics(duration => moreActionsClicked('team', {
+          duration,
+          numActions: count + 2
+        }));
+      }
     }
     setOpen(shouldBeOpen);
-  }, [analytics, count]);
+  }, [analytics, count, analyticsNext]);
   if (!count) {
     return null;
   }
@@ -169,7 +214,7 @@ const ExtraActions = ({
     onClose: () => setOpen(false),
     placement: "bottom-start",
     content: () => /*#__PURE__*/React.createElement(MenuGroup, null, actions.map((action, index) => /*#__PURE__*/React.createElement(LinkItem, {
-      onClick: onActionClick(action, analytics, index + 2),
+      onClick: onActionClick(action, analytics, analyticsNext, index + 2),
       key: action.id || index,
       href: action.link
     }, action.label))),
@@ -189,7 +234,8 @@ const ExtraActions = ({
 };
 const ButtonSection = ({
   actions,
-  analytics
+  analytics,
+  analyticsNext
 }) => {
   if (!actions) {
     return null;
@@ -199,16 +245,19 @@ const ButtonSection = ({
   return /*#__PURE__*/React.createElement(ActionButtons, null, initialActions.map((action, index) => /*#__PURE__*/React.createElement(ActionButton, {
     action: action,
     analytics: analytics,
+    analyticsNext: analyticsNext,
     index: index,
     key: index
   })), extraActions && /*#__PURE__*/React.createElement(ExtraActions, {
     actions: extraActions,
-    analytics: analytics
+    analytics: analytics,
+    analyticsNext: analyticsNext
   }));
 };
 const TeamProfilecardContent = ({
   actions,
   analytics,
+  analyticsNext,
   team,
   viewingUserId,
   generateUserLink,
@@ -225,17 +274,34 @@ const TeamProfilecardContent = ({
   }, ...(actions || [])];
   const includingYou = team.members && team.members.some(member => member.id === viewingUserId);
   useEffect(() => {
-    analytics(duration => {
-      var _team$members;
-      return profileCardRendered('team', 'content', {
-        duration,
-        numActions: allActions.length,
-        memberCount: (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length,
-        includingYou,
-        descriptionLength: team.description.length,
-        titleLength: team.displayName.length
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.content', duration => {
+        var _team$members$length, _team$members;
+        return {
+          duration,
+          numActions: allActions.length,
+          memberCount: (_team$members$length = (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length) !== null && _team$members$length !== void 0 ? _team$members$length : null,
+          includingYou: includingYou !== null && includingYou !== void 0 ? includingYou : null,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length,
+          firedAt: Math.round(getPageTime()),
+          ...PACKAGE_META_DATA
+        };
       });
-    });
+    } else {
+      analytics(duration => {
+        var _team$members2;
+        return profileCardRendered('team', 'content', {
+          duration,
+          numActions: allActions.length,
+          memberCount: (_team$members2 = team.members) === null || _team$members2 === void 0 ? void 0 : _team$members2.length,
+          includingYou,
+          descriptionLength: team.description.length,
+          titleLength: team.displayName.length
+        });
+      });
+    }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
   return /*#__PURE__*/React.createElement(CardWrapper, {
@@ -247,6 +313,7 @@ const TeamProfilecardContent = ({
     content: team.displayName
   }, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
     analytics: analytics,
+    analyticsNext: analyticsNext,
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
@@ -254,29 +321,48 @@ const TeamProfilecardContent = ({
     isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/React.createElement(DescriptionWrapper, null, /*#__PURE__*/React.createElement(Description, null, team.description)), /*#__PURE__*/React.createElement(ButtonSection, {
     actions: allActions,
-    analytics: analytics
+    analytics: analytics,
+    analyticsNext: analyticsNext
   })));
 };
 const ErrorMessage = ({
   analytics,
+  analyticsNext,
   clientFetchProfile,
   isLoading
 }) => {
   const hasRetry = !!clientFetchProfile;
   useEffect(() => {
-    analytics(duration => profileCardRendered('team', 'error', {
-      duration,
-      hasRetry
-    }));
-  }, [analytics, hasRetry]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.rendered.error', duration => ({
+        duration,
+        hasRetry,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => profileCardRendered('team', 'error', {
+        duration,
+        hasRetry
+      }));
+    }
+  }, [analytics, analyticsNext, hasRetry]);
   const retry = useCallback(() => {
-    analytics(duration => errorRetryClicked({
-      duration
-    }));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      analyticsNext('ui.teamProfileCard.clicked.errorRetry', duration => ({
+        duration,
+        firedAt: Math.round(getPageTime()),
+        ...PACKAGE_META_DATA
+      }));
+    } else {
+      analytics(duration => errorRetryClicked({
+        duration
+      }));
+    }
     if (clientFetchProfile) {
       clientFetchProfile();
     }
-  }, [analytics, clientFetchProfile]);
+  }, [analytics, analyticsNext, clientFetchProfile]);
   return /*#__PURE__*/React.createElement(ErrorWrapper, {
     testId: "team-profilecard-error"
   }, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
@@ -292,6 +378,7 @@ const ErrorMessage = ({
 const TeamProfileCard = props => {
   const {
     analytics,
+    analyticsNext,
     clientFetchProfile,
     hasError,
     isLoading,
@@ -301,13 +388,15 @@ const TeamProfileCard = props => {
   if (hasError) {
     if ((errorType === null || errorType === void 0 ? void 0 : errorType.reason) === 'TEAMS_FORBIDDEN') {
       return /*#__PURE__*/React.createElement(TeamForbiddenErrorState, {
-        analytics: analytics
+        analytics: analytics,
+        analyticsNext: analyticsNext
       });
     } else {
       return /*#__PURE__*/React.createElement(CardWrapper, {
         testId: "team-profilecard"
       }, /*#__PURE__*/React.createElement(ErrorMessage, {
         analytics: analytics,
+        analyticsNext: analyticsNext,
         clientFetchProfile: clientFetchProfile,
         isLoading: isLoading
       }));
@@ -315,7 +404,8 @@ const TeamProfileCard = props => {
   }
   if (isLoading) {
     return /*#__PURE__*/React.createElement(TeamLoadingState, {
-      analytics: analytics
+      analytics: analytics,
+      analyticsNext: analyticsNext
     });
   }
   if (team) {

package/dist/es2019/components/Team/TeamProfileCardTrigger.js

@@ -5,13 +5,14 @@ import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 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 { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import { layers } from '@atlaskit/theme/constants';
 import filterActions from '../../internal/filterActions';
 import messages from '../../messages';
-import { cardTriggered, fireEvent, profileCardRendered } from '../../util/analytics';
+import { cardTriggered, fireEvent, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
 import { getPageTime } from '../../util/performance';
@@ -35,10 +36,24 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         fireEvent(this.props.createAnalyticsEvent, payload);
       }
     });
+    _defineProperty(this, "fireAnalyticsNext", (eventKey, ...attributes) => {
+      // Don't fire any analytics if the component is unmounted
+      if (!this._isMounted) {
+        return;
+      }
+      if (this.props.fireEvent) {
+        this.props.fireEvent(eventKey, ...attributes);
+      }
+    });
     _defineProperty(this, "fireAnalyticsWithDuration", generator => {
       const event = generator(getPageTime() - this.openTime);
       this.fireAnalytics(event);
     });
+    _defineProperty(this, "fireAnalyticsWithDurationNext", (eventKey, generator) => {
+      const duration = getPageTime() - this.openTime;
+      const attributes = generator(duration);
+      this.fireAnalyticsNext(eventKey, attributes);
+    });
     _defineProperty(this, "hideProfilecard", (delay = 0) => {
       clearTimeout(this.showTimer);
       clearTimeout(this.hideTimer);
@@ -78,7 +93,16 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         this.openedByHover = false;
         this.showProfilecard(0);
         if (!this.state.visible) {
-          this.fireAnalytics(cardTriggered('team', 'click', this.props.teamId));
+          if (fg('ptc-enable-profile-card-analytics-refactor')) {
+            this.fireAnalyticsNext('ui.teamProfileCard.triggered', {
+              method: 'click',
+              ...PACKAGE_META_DATA,
+              firedAt: Math.round(getPageTime()),
+              teamId: this.props.teamId
+            });
+          } else {
+            this.fireAnalytics(cardTriggered('team', 'click', this.props.teamId));
+          }
         }
       }
     });
@@ -88,7 +112,16 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       }
       if (!this.state.visible) {
         this.openedByHover = true;
-        this.fireAnalytics(cardTriggered('team', 'hover', this.props.teamId));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          this.fireAnalyticsNext('ui.teamProfileCard.triggered', {
+            method: 'hover',
+            ...PACKAGE_META_DATA,
+            firedAt: Math.round(getPageTime()),
+            teamId: this.props.teamId
+          });
+        } else {
+          this.fireAnalytics(cardTriggered('team', 'hover', this.props.teamId));
+        }
       }
       this.showProfilecard(DELAY_MS_SHOW);
     });
@@ -108,7 +141,16 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         });
         this.showProfilecard(0);
         if (!this.state.visible) {
-          this.fireAnalytics(cardTriggered('team', 'click', this.props.teamId));
+          if (fg('ptc-enable-profile-card-analytics-refactor')) {
+            this.fireAnalyticsNext('ui.teamProfileCard.triggered', {
+              method: 'click',
+              firedAt: Math.round(getPageTime()),
+              teamId: this.props.teamId,
+              ...PACKAGE_META_DATA
+            });
+          } else {
+            this.fireAnalytics(cardTriggered('team', 'click', this.props.teamId));
+          }
         }
       }
     });
@@ -179,7 +221,10 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         const fireEvent = event => {
           this.fireAnalytics(event);
         };
-        const requests = Promise.all([this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent), this.props.resourceClient.shouldShowGiveKudos(), this.props.resourceClient.getTeamCentralBaseUrl({
+        const fireAnalyticsNext = (eventKey, ...attributes) => {
+          this.fireAnalyticsNext(eventKey, ...attributes);
+        };
+        const requests = Promise.all([this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent, fireAnalyticsNext), this.props.resourceClient.shouldShowGiveKudos(), this.props.resourceClient.getTeamCentralBaseUrl({
           withOrgContext: true,
           withSiteContext: true
         })]);
@@ -187,9 +232,17 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       });
     });
     _defineProperty(this, "onErrorBoundary", () => {
-      this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
-        duration: 0
-      }));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        this.fireAnalyticsNext('ui.teamProfileCard.rendered.errorBoundary', {
+          ...PACKAGE_META_DATA,
+          firedAt: Math.round(getPageTime()),
+          duration: 0
+        });
+      } else {
+        this.fireAnalytics(profileCardRendered('team', 'errorBoundary', {
+          duration: 0
+        }));
+      }
       this.setState({
         renderError: true
       });
@@ -212,6 +265,7 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         clientFetchProfile: this.clientFetchProfile,
         actions: this.filterActions(),
         analytics: this.fireAnalyticsWithDuration,
+        analyticsNext: this.fireAnalyticsWithDurationNext,
         team: data || undefined,
         generateUserLink,
         onUserClick,
@@ -221,7 +275,8 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       };
       return /*#__PURE__*/React.createElement("div", this.cardListeners, this.state.visible && /*#__PURE__*/React.createElement(Suspense, {
         fallback: /*#__PURE__*/React.createElement(TeamLoadingState, {
-          analytics: this.fireAnalyticsWithDuration
+          analytics: this.fireAnalyticsWithDuration,
+          analyticsNext: this.fireAnalyticsWithDurationNext
         })
       }, /*#__PURE__*/React.createElement(TeamProfileCardLazy, _extends({}, newProps, {
         isLoading: isLoading,
@@ -372,4 +427,12 @@ _defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-export default withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal));
+const TeamProfileCardTriggerWithAnalytics = props => {
+  const {
+    fireEvent
+  } = useAnalyticsEvents();
+  return /*#__PURE__*/React.createElement(TeamProfileCardTriggerInternal, _extends({}, props, {
+    fireEvent: fireEvent
+  }));
+};
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', injectIntl(TeamProfileCardTriggerWithAnalytics), withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal)));

package/dist/es2019/components/User/ProfileCardDetails.compiled.css

@@ -5,7 +5,6 @@
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
-._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bguutpp#profilecard-name-label{margin-bottom:var(--ds-space-150,9pt)}
 ._1bto1l2s{text-overflow:ellipsis}
 ._1hpmutpp#profilecard-name-label{margin-top:var(--ds-space-150,9pt)}

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

@@ -7,16 +7,13 @@ import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl-next';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Text } from '@atlaskit/primitives';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box, Text } from '@atlaskit/primitives/compiled';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
 import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
 import { IconLabel } from '../Icon';
 import ReportingLinesDetails from './ReportingLinesDetails';
 const styles = {
-  detailedListWrapper: "_19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
   fullNameLabel: "_1reo15vq _18m915vq _11c81ixg _1bto1l2s _o5721q9c",
   noMetaLabel: "_2hwxidpf _18u0idpf _rcujxy5q _1l6uutpp",

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

@@ -6,6 +6,7 @@ import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-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';
 import { Pressable } from '@atlaskit/primitives/compiled';
@@ -13,6 +14,7 @@ import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
 import { PACKAGE_META_DATA, reportingLinesClicked } from '../../util/analytics';
 import { getPageTime } from '../../util/performance';
+import { default as ReportingLinesDetailsCompiled } from './ReportingLinesDetailsCompiled';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -122,4 +124,5 @@ const ReportingLinesDetails = props => {
     showMoreButtonProps: showMoreButtonProps
   })));
 };
-export default ReportingLinesDetails;
+const ReportingLinesDetailsExport = componentWithFG('profilecard_primitives_compiled', ReportingLinesDetailsCompiled, ReportingLinesDetails);
+export default ReportingLinesDetailsExport;

package/dist/es2019/components/User/ReportingLinesDetailsCompiled.compiled.css

@@ -0,0 +1,11 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}