@atlaskit/profilecard 23.8.0 → 23.9.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/profilecard
 
+## 23.9.0
+
+### Minor Changes
+
+- [#145365](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145365)
+  [`f172c99cc3866`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f172c99cc3866) -
+  [ux] show more icon in the team profile card if more action provided
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 23.8.0
 
 ### Minor Changes

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.8.0");
+  headers.append('atl-client-version', "23.9.0");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.8.0");
+  headers.append('atl-client-version', "23.9.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -19,6 +19,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var _teamsPublic = require("@atlaskit/teams-public");
 var _analytics = require("../../util/analytics");
+var _teamActions = require("./team-actions");
 var _main = require("./team-connections/main");
 var _teamContainersSkeleton = require("./team-containers-skeleton");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -66,7 +67,9 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     cloudId = _ref3.cloudId,
     userId = _ref3.userId,
     isVerified = _ref3.isVerified,
-    teamProfileUrl = _ref3.teamProfileUrl;
+    teamProfileUrl = _ref3.teamProfileUrl,
+    isKudosEnabled = _ref3.isKudosEnabled,
+    otherActions = _ref3.otherActions;
   var _useTeamContainers = (0, _teamsPublic.useTeamContainers)(teamId),
     teamContainers = _useTeamContainers.teamContainers,
     loading = _useTeamContainers.loading;
@@ -147,7 +150,11 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3)
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  })), isKudosEnabled || otherActions ? /*#__PURE__*/_react.default.createElement(_teamActions.ButtonSection, {
+    teamProfileUrl: teamProfileUrl,
+    isKudosEnabled: isKudosEnabled,
+    otherActions: otherActions
+  }) : teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: onClick,

package/dist/cjs/components/team-profile-card/team-actions/index.compiled.css

@@ -0,0 +1,7 @@
+._15a5nqa1{border-top-style:solid}
+._16jlkb7n{flex-grow:1}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1i53muej{border-top-color:var(--ds-border,#091e4224)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,71 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonSection = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _new = require("@atlaskit/button/new");
+var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
+var _analytics = require("../../../util/analytics");
+var _messages = require("./messages");
+var _moreActions = require("./more-actions");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var GIVE_KUDOS_ACTION_ID = 'give-kudos';
+var styles = {
+  containerStyles: "_uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb _ca0qpxbi",
+  actionContainerStyles: "_16jlkb7n"
+};
+var ButtonSection = exports.ButtonSection = function ButtonSection(_ref) {
+  var teamProfileUrl = _ref.teamProfileUrl,
+    isKudosEnabled = _ref.isKudosEnabled,
+    otherActions = _ref.otherActions;
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var onTeamProfileClick = (0, _react.useCallback)(function () {
+    if (createAnalyticsEvent) {
+      (0, _analytics.fireEvent)(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'viewTeamProfileButton',
+        attributes: {}
+      });
+    }
+  }, [createAnalyticsEvent]);
+  var extraActions = [];
+  if (isKudosEnabled) {
+    extraActions.push({
+      id: GIVE_KUDOS_ACTION_ID,
+      item: /*#__PURE__*/_react.default.createElement(_menu.ButtonItem, null, formatMessage(_messages.messages.giveKudos))
+    });
+  }
+  if (otherActions) {
+    extraActions.push.apply(extraActions, (0, _toConsumableArray2.default)(otherActions));
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    space: "space.050"
+  }, teamProfileUrl && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: styles.actionContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_new.LinkButton, {
+    onClick: onTeamProfileClick,
+    href: teamProfileUrl,
+    target: "_blank",
+    shouldFitContainer: true
+  }, formatMessage(_messages.messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/_react.default.createElement(_moreActions.MoreActions, {
+    actions: extraActions
+  })));
+};

package/dist/cjs/components/team-profile-card/team-actions/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  viewProfile: {
+    id: 'team-profile-card.team-actions.view-profile',
+    defaultMessage: 'View profile',
+    description: 'View profile button text'
+  },
+  giveKudos: {
+    id: 'team-profile-card.team-actions.give-kudos',
+    defaultMessage: 'Give kudos',
+    description: 'Give kudos button text'
+  }
+});

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoreActions = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = require("@atlaskit/button/new");
+var _showMoreHorizontalMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--more"));
+var _menu = require("@atlaskit/menu");
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _primitives = require("@atlaskit/primitives");
+var _messages = require("./messages");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var MoreActions = exports.MoreActions = function MoreActions(_ref) {
+  var actions = _ref.actions;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var onMoreClick = (0, _react.useCallback)(function (shouldBeOpen) {
+    setOpen(shouldBeOpen);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_popup.default, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    content: function content() {
+      return /*#__PURE__*/_react.default.createElement(_menu.MenuGroup, {
+        spacing: "cozy"
+      }, /*#__PURE__*/_react.default.createElement(_menu.Section, null, actions.map(function (action) {
+        return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+          key: action.id
+        }, action.item);
+      })));
+    },
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/_react.default.createElement(_new.IconButton, (0, _extends2.default)({}, triggerProps, {
+        icon: _showMoreHorizontalMore.default,
+        label: formatMessage(_messages.messages.showMoreIconLabel),
+        onClick: function onClick() {
+          return onMoreClick(!isOpen);
+        },
+        isSelected: isOpen
+      }));
+    },
+    placement: "right-start",
+    shouldRenderToParent: false
+  });
+};

package/dist/cjs/components/team-profile-card/team-actions/more-actions/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  showMoreIconLabel: {
+    id: 'team-profile-card.team-actions.more-actions.show-more-icon-label',
+    defaultMessage: 'Show more',
+    description: 'Show more icon label'
+  }
+});

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.8.0"
+      packageVersion: "23.9.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.8.0");
+  headers.append('atl-client-version', "23.9.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.8.0");
+  headers.append('atl-client-version', "23.9.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

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

@@ -11,6 +11,7 @@ import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compil
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
 import { fireEvent } from '../../util/analytics';
+import { ButtonSection } from './team-actions';
 import { TeamConnections } from './team-connections/main';
 import { TeamContainersSkeleton } from './team-containers-skeleton';
 const noop = () => {};
@@ -54,7 +55,9 @@ export const TeamProfileCard = ({
   cloudId,
   userId,
   isVerified,
-  teamProfileUrl
+  teamProfileUrl,
+  isKudosEnabled,
+  otherActions
 }) => {
   const {
     teamContainers,
@@ -134,7 +137,11 @@ export const TeamProfileCard = ({
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
+  })), isKudosEnabled || otherActions ? /*#__PURE__*/React.createElement(ButtonSection, {
+    teamProfileUrl: teamProfileUrl,
+    isKudosEnabled: isKudosEnabled,
+    otherActions: otherActions
+  }) : teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,

package/dist/es2019/components/team-profile-card/team-actions/index.compiled.css

@@ -0,0 +1,7 @@
+._15a5nqa1{border-top-style:solid}
+._16jlkb7n{flex-grow:1}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1i53muej{border-top-color:var(--ds-border,#091e4224)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,63 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { LinkButton } from '@atlaskit/button/new';
+import { ButtonItem } from '@atlaskit/menu';
+import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { fireEvent } from '../../../util/analytics';
+import { messages } from './messages';
+import { MoreActions } from './more-actions';
+const GIVE_KUDOS_ACTION_ID = 'give-kudos';
+const styles = {
+  containerStyles: "_uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb _ca0qpxbi",
+  actionContainerStyles: "_16jlkb7n"
+};
+export const ButtonSection = ({
+  teamProfileUrl,
+  isKudosEnabled,
+  otherActions
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const {
+    formatMessage
+  } = useIntl();
+  const onTeamProfileClick = useCallback(() => {
+    if (createAnalyticsEvent) {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'viewTeamProfileButton',
+        attributes: {}
+      });
+    }
+  }, [createAnalyticsEvent]);
+  const extraActions = [];
+  if (isKudosEnabled) {
+    extraActions.push({
+      id: GIVE_KUDOS_ACTION_ID,
+      item: /*#__PURE__*/React.createElement(ButtonItem, null, formatMessage(messages.giveKudos))
+    });
+  }
+  if (otherActions) {
+    extraActions.push(...otherActions);
+  }
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.050"
+  }, teamProfileUrl && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.actionContainerStyles
+  }, /*#__PURE__*/React.createElement(LinkButton, {
+    onClick: onTeamProfileClick,
+    href: teamProfileUrl,
+    target: "_blank",
+    shouldFitContainer: true
+  }, formatMessage(messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/React.createElement(MoreActions, {
+    actions: extraActions
+  })));
+};

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

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  viewProfile: {
+    id: 'team-profile-card.team-actions.view-profile',
+    defaultMessage: 'View profile',
+    description: 'View profile button text'
+  },
+  giveKudos: {
+    id: 'team-profile-card.team-actions.give-kudos',
+    defaultMessage: 'Give kudos',
+    description: 'Give kudos button text'
+  }
+});

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

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+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';
+import { Box } from '@atlaskit/primitives';
+import { messages } from './messages';
+export const MoreActions = ({
+  actions
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const [isOpen, setOpen] = useState(false);
+  const onMoreClick = useCallback(shouldBeOpen => {
+    setOpen(shouldBeOpen);
+  }, []);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: () => setOpen(false),
+    content: () => /*#__PURE__*/React.createElement(MenuGroup, {
+      spacing: "cozy"
+    }, /*#__PURE__*/React.createElement(Section, null, actions.map(action => /*#__PURE__*/React.createElement(Box, {
+      key: action.id
+    }, action.item)))),
+    trigger: triggerProps => /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
+      icon: MoreIcon,
+      label: formatMessage(messages.showMoreIconLabel),
+      onClick: () => onMoreClick(!isOpen),
+      isSelected: isOpen
+    })),
+    placement: "right-start",
+    shouldRenderToParent: false
+  });
+};

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

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  showMoreIconLabel: {
+    id: 'team-profile-card.team-actions.more-actions.show-more-icon-label',
+    defaultMessage: 'Show more',
+    description: 'Show more icon label'
+  }
+});

package/dist/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.8.0",
+    packageVersion: "23.9.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './graphqlUtils';
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.8.0");
+  headers.append('atl-client-version', "23.9.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.8.0");
+  headers.append('atl-client-version', "23.9.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -11,6 +11,7 @@ import { Box, Inline, Pressable, Stack, Text } from '@atlaskit/primitives/compil
 import TeamAvatar from '@atlaskit/teams-avatar';
 import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
 import { fireEvent } from '../../util/analytics';
+import { ButtonSection } from './team-actions';
 import { TeamConnections } from './team-connections/main';
 import { TeamContainersSkeleton } from './team-containers-skeleton';
 var noop = function noop() {};
@@ -56,7 +57,9 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
     cloudId = _ref3.cloudId,
     userId = _ref3.userId,
     isVerified = _ref3.isVerified,
-    teamProfileUrl = _ref3.teamProfileUrl;
+    teamProfileUrl = _ref3.teamProfileUrl,
+    isKudosEnabled = _ref3.isKudosEnabled,
+    otherActions = _ref3.otherActions;
   var _useTeamContainers = useTeamContainers(teamId),
     teamContainers = _useTeamContainers.teamContainers,
     loading = _useTeamContainers.loading;
@@ -137,7 +140,11 @@ export var TeamProfileCard = function TeamProfileCard(_ref3) {
     },
     filterContainerId: containerId,
     isDisplayedOnProfileCard: true
-  })), teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
+  })), isKudosEnabled || otherActions ? /*#__PURE__*/React.createElement(ButtonSection, {
+    teamProfileUrl: teamProfileUrl,
+    isKudosEnabled: isKudosEnabled,
+    otherActions: otherActions
+  }) : teamProfileUrl && /*#__PURE__*/React.createElement(Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/React.createElement(Pressable, {
     onClick: onClick,

package/dist/esm/components/team-profile-card/team-actions/index.compiled.css

@@ -0,0 +1,7 @@
+._15a5nqa1{border-top-style:solid}
+._16jlkb7n{flex-grow:1}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1i53muej{border-top-color:var(--ds-border,#091e4224)}
+._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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

@@ -0,0 +1,61 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { LinkButton } from '@atlaskit/button/new';
+import { ButtonItem } from '@atlaskit/menu';
+import { Box, Inline, Stack } from '@atlaskit/primitives';
+import { fireEvent } from '../../../util/analytics';
+import { messages } from './messages';
+import { MoreActions } from './more-actions';
+var GIVE_KUDOS_ACTION_ID = 'give-kudos';
+var styles = {
+  containerStyles: "_uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb _ca0qpxbi",
+  actionContainerStyles: "_16jlkb7n"
+};
+export var ButtonSection = function ButtonSection(_ref) {
+  var teamProfileUrl = _ref.teamProfileUrl,
+    isKudosEnabled = _ref.isKudosEnabled,
+    otherActions = _ref.otherActions;
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var onTeamProfileClick = useCallback(function () {
+    if (createAnalyticsEvent) {
+      fireEvent(createAnalyticsEvent, {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'viewTeamProfileButton',
+        attributes: {}
+      });
+    }
+  }, [createAnalyticsEvent]);
+  var extraActions = [];
+  if (isKudosEnabled) {
+    extraActions.push({
+      id: GIVE_KUDOS_ACTION_ID,
+      item: /*#__PURE__*/React.createElement(ButtonItem, null, formatMessage(messages.giveKudos))
+    });
+  }
+  if (otherActions) {
+    extraActions.push.apply(extraActions, _toConsumableArray(otherActions));
+  }
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.containerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    space: "space.050"
+  }, teamProfileUrl && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.actionContainerStyles
+  }, /*#__PURE__*/React.createElement(LinkButton, {
+    onClick: onTeamProfileClick,
+    href: teamProfileUrl,
+    target: "_blank",
+    shouldFitContainer: true
+  }, formatMessage(messages.viewProfile))), extraActions.length > 0 && /*#__PURE__*/React.createElement(MoreActions, {
+    actions: extraActions
+  })));
+};

package/dist/esm/components/team-profile-card/team-actions/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  viewProfile: {
+    id: 'team-profile-card.team-actions.view-profile',
+    defaultMessage: 'View profile',
+    description: 'View profile button text'
+  },
+  giveKudos: {
+    id: 'team-profile-card.team-actions.give-kudos',
+    defaultMessage: 'Give kudos',
+    description: 'Give kudos button text'
+  }
+});

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

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+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';
+import { Box } from '@atlaskit/primitives';
+import { messages } from './messages';
+export var MoreActions = function MoreActions(_ref) {
+  var actions = _ref.actions;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var onMoreClick = useCallback(function (shouldBeOpen) {
+    setOpen(shouldBeOpen);
+  }, []);
+  return /*#__PURE__*/React.createElement(Popup, {
+    isOpen: isOpen,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    content: function content() {
+      return /*#__PURE__*/React.createElement(MenuGroup, {
+        spacing: "cozy"
+      }, /*#__PURE__*/React.createElement(Section, null, actions.map(function (action) {
+        return /*#__PURE__*/React.createElement(Box, {
+          key: action.id
+        }, action.item);
+      })));
+    },
+    trigger: function trigger(triggerProps) {
+      return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
+        icon: MoreIcon,
+        label: formatMessage(messages.showMoreIconLabel),
+        onClick: function onClick() {
+          return onMoreClick(!isOpen);
+        },
+        isSelected: isOpen
+      }));
+    },
+    placement: "right-start",
+    shouldRenderToParent: false
+  });
+};

package/dist/esm/components/team-profile-card/team-actions/more-actions/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  showMoreIconLabel: {
+    id: 'team-profile-card.team-actions.more-actions.show-more-icon-label',
+    defaultMessage: 'Show more',
+    description: 'Show more icon label'
+  }
+});

package/dist/esm/util/analytics.js

@@ -39,7 +39,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.8.0"
+      packageVersion: "23.9.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/components/team-profile-card/main.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import { type AvatarProps } from '@atlaskit/avatar-group';
 interface TeamProfileCardProps {
     containerId: string;
@@ -13,6 +17,11 @@ interface TeamProfileCardProps {
     userId: string;
     isVerified?: boolean;
     teamProfileUrl?: string;
+    isKudosEnabled?: boolean;
+    otherActions?: {
+        id: string;
+        item: React.ReactNode;
+    }[];
 }
-export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, }: TeamProfileCardProps) => JSX.Element;
+export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, isKudosEnabled, otherActions, }: TeamProfileCardProps) => JSX.Element;
 export {};

package/dist/types/components/team-profile-card/team-actions/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ActionItem } from './more-actions';
+type ButtonSectionProps = {
+    teamProfileUrl?: string;
+    isKudosEnabled?: boolean;
+    otherActions?: ActionItem[];
+};
+export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, }: ButtonSectionProps) => React.JSX.Element;
+export {};

package/dist/types/components/team-profile-card/team-actions/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    viewProfile: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    giveKudos: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/components/team-profile-card/team-actions/more-actions/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ActionItem = {
+    id: string;
+    item: React.ReactNode;
+};
+type MoreActionsProps = {
+    actions: ActionItem[];
+};
+export declare const MoreActions: ({ actions }: MoreActionsProps) => React.JSX.Element;
+export {};

package/dist/types/components/team-profile-card/team-actions/more-actions/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    showMoreIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/components/team-profile-card/main.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
 import { type AvatarProps } from '@atlaskit/avatar-group';
 interface TeamProfileCardProps {
     containerId: string;
@@ -13,6 +17,11 @@ interface TeamProfileCardProps {
     userId: string;
     isVerified?: boolean;
     teamProfileUrl?: string;
+    isKudosEnabled?: boolean;
+    otherActions?: {
+        id: string;
+        item: React.ReactNode;
+    }[];
 }
-export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, }: TeamProfileCardProps) => JSX.Element;
+export declare const TeamProfileCard: ({ containerId, teamId, displayName, description, avatarImageUrl, headerImageUrl, memberAvatars, memberCount, cloudId, userId, isVerified, teamProfileUrl, isKudosEnabled, otherActions, }: TeamProfileCardProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/components/team-profile-card/team-actions/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ActionItem } from './more-actions';
+type ButtonSectionProps = {
+    teamProfileUrl?: string;
+    isKudosEnabled?: boolean;
+    otherActions?: ActionItem[];
+};
+export declare const ButtonSection: ({ teamProfileUrl, isKudosEnabled, otherActions, }: ButtonSectionProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/components/team-profile-card/team-actions/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    viewProfile: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    giveKudos: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types-ts4.5/components/team-profile-card/team-actions/more-actions/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ActionItem = {
+    id: string;
+    item: React.ReactNode;
+};
+type MoreActionsProps = {
+    actions: ActionItem[];
+};
+export declare const MoreActions: ({ actions }: MoreActionsProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/components/team-profile-card/team-actions/more-actions/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    showMoreIconLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.8.0",
+	"version": "23.9.0",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,10 +56,10 @@
 		"@atlaskit/avatar-group": "^12.0.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/dropdown-menu": "^14.0.0",
+		"@atlaskit/dropdown-menu": "^14.1.0",
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/give-kudos": "^4.0.0",
+		"@atlaskit/give-kudos": "^4.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/logo": "^16.0.0",
@@ -95,7 +95,7 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "^1.3.0",
+		"@af/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ptc-test-utils": "^0.8.0",
 		"@testing-library/react": "^13.4.0",