@atlaskit/profilecard 16.5.0 → 16.7.0

package/dist/cjs/styled/Card.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SpinnerContainer = exports.ProfileImage = exports.LozengeWrapper = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainerEmpty = exports.CardContainer = exports.AppTitleLabel = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
+exports.SpinnerContainer = exports.ProfileImage = exports.OverflowActionButtonsWrapper = exports.LozengeWrapper = exports.JobTitleLabel = exports.FullNameLabel = exports.DisabledInfo = exports.DetailsLabelText = exports.DetailsLabelIcon = exports.DetailsLabel = exports.DetailsGroup = exports.CustomLozengeContainer = exports.CardWrapper = exports.CardContent = exports.CardContainerEmpty = exports.CardContainer = exports.AppTitleLabel = exports.ActionsFlexSpacer = exports.ActionButtonGroup = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _constants2 = require("../styled/constants");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -43,23 +43,27 @@ var ActionsFlexSpacer = _styledComponents.default.div(_templateObject4 || (_temp
 
 exports.ActionsFlexSpacer = ActionsFlexSpacer;
 
-var ActionButtonGroup = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button,\n  a {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * (0, _constants.gridSize)(), _constants.gridSize);
+var ActionButtonGroup = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n\n  button,\n  a,\n  span {\n    margin-left: ", "px;\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), 2 * (0, _constants.gridSize)(), _constants.gridSize);
 
 exports.ActionButtonGroup = ActionButtonGroup;
 
-var CardContent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), (0, _constants.gridSize)() * 17);
+var OverflowActionButtonsWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), _constants.gridSize);
+
+exports.OverflowActionButtonsWrapper = OverflowActionButtonsWrapper;
+
+var CardContent = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), (0, _constants.gridSize)() * 17);
 
 exports.CardContent = CardContent;
 
-var DetailsGroup = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
+var DetailsGroup = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
 
 exports.DetailsGroup = DetailsGroup;
 
-var DisabledInfo = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2);
+var DisabledInfo = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2);
 
 exports.DisabledInfo = DisabledInfo;
 
-var FullNameLabel = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
+var FullNameLabel = _styledComponents.default.span(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 18px;\n  color: ", ";\n  margin: ", ";\n  line-height: ", "em;\n"])), function (props) {
   return props.isDisabledAccount ? _constants2.headerTextColorInactive : _constants2.headerTextColor;
 }, function (props) {
   return getFullNameMargin(props);
@@ -67,25 +71,25 @@ var FullNameLabel = _styledComponents.default.span(_templateObject9 || (_templat
 
 exports.FullNameLabel = FullNameLabel;
 
-var LozengeWrapper = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), (0, _constants.gridSize)() * 2);
+var LozengeWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), (0, _constants.gridSize)() * 2);
 
 exports.LozengeWrapper = LozengeWrapper;
-var CustomLozengeContainer = (0, _styledComponents.default)(LozengeWrapper)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
+var CustomLozengeContainer = (0, _styledComponents.default)(LozengeWrapper)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: ", "px;\n  > * {\n    margin-top: ", "px;\n    &:not(:last-child) {\n      margin-right: ", "px;\n    }\n  }\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() / 2, (0, _constants.gridSize)() / 2);
 exports.CustomLozengeContainer = CustomLozengeContainer;
 
-var JobTitleLabel = _styledComponents.default.span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.headerTextColor, (0, _constants.gridSize)() * 1.5, 24 / 14);
+var JobTitleLabel = _styledComponents.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  font-size: 14px;\n  color: ", ";\n  margin: 0 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.headerTextColor, (0, _constants.gridSize)() * 1.5, 24 / 14);
 
 exports.JobTitleLabel = JobTitleLabel;
 
-var AppTitleLabel = _styledComponents.default.span(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), (0, _constants.gridSize)() * 1.5, 24 / 14);
+var AppTitleLabel = _styledComponents.default.span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  color: ", ";\n  border-radius: ", ";\n  padding: 0 6px;\n  width: fit-content;\n  font-weight: bold;\n  text-transform: uppercase;\n\n  font-size: 12px;\n  margin: 4px 0 ", "px 0;\n  line-height: ", "em;\n"])), _constants2.appLabelBgColor, _constants2.appLabelTextColor, (0, _constants.borderRadius)(), (0, _constants.gridSize)() * 1.5, 24 / 14);
 
 exports.AppTitleLabel = AppTitleLabel;
 
-var SpinnerContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), (0, _constants.gridSize)() * 12);
+var SpinnerContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), (0, _constants.gridSize)() * 12);
 
 exports.SpinnerContainer = SpinnerContainer;
 
-var CardContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  ", "\n"])), function (props) {
+var CardContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  background-image: linear-gradient(\n    to bottom,\n    ", "\n      0%,\n    ", "\n      100%\n  );\n  background-repeat: no-repeat;\n  background-size: 100% ", "px;\n  box-sizing: content-box;\n  padding: ", "px;\n  ", "\n"])), function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? _constants2.headerBgColorDisabledUser : _constants2.headerBgColor;
@@ -94,19 +98,19 @@ var CardContainer = _styledComponents.default.div(_templateObject15 || (_templat
     return '';
   }
 
-  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
+  return (0, _styledComponents.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
 });
 
 exports.CardContainer = CardContainer;
 
-var DetailsLabel = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 4);
+var DetailsLabel = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  line-height: ", "px;\n  font-size: ", "px;\n  margin: ", "px 0 0 0;\n  white-space: nowrap;\n\n  & + & {\n    margin-top: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 4);
 
 exports.DetailsLabel = DetailsLabel;
 
-var DetailsLabelIcon = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), _constants2.labelIconColor, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 2);
+var DetailsLabelIcon = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-shrink: 0;\n  color: ", ";\n  width: ", "px;\n  height: ", "px;\n  padding: ", "px;\n  vertical-align: top;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])), _constants2.labelIconColor, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() / 2);
 
 exports.DetailsLabelIcon = DetailsLabelIcon;
 
-var DetailsLabelText = _styledComponents.default.span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), _constants2.labelTextColor, (0, _constants.gridSize)() / 2);
+var DetailsLabelText = _styledComponents.default.span(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), _constants2.labelTextColor, (0, _constants.gridSize)() / 2);
 
 exports.DetailsLabelText = DetailsLabelText;

package/dist/cjs/util/analytics.js

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

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.5.0"
+	"version": "16.7.0"
 }

package/dist/es2019/client/ProfileCardClient.js

@@ -41,11 +41,11 @@ class ProfileCardClient {
   }
 
   shouldShowGiveKudos() {
-    var _this$tcClient4, _this$tcClient5;
+    var _this$tcClient4, _this$tcClient5, _this$tcClient6;
 
     // Check if the kudos feature enabled and if the user has TC
     // if the user does not have TC the tc client will be undefined.
-    return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2')) || Promise.resolve(false);
+    return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2', (_this$tcClient6 = this.tcClient) === null || _this$tcClient6 === void 0 ? void 0 : _this$tcClient6.options.productIdentifier)) || Promise.resolve(false);
   }
 
 }

package/dist/es2019/client/TeamCentralCardClient.js

@@ -32,16 +32,17 @@ const buildReportingLinesQuery = aaid => ({
   }
 });
 
-const buildCheckFeatureFlagQuery = featureKey => ({
+const buildCheckFeatureFlagQuery = (featureKey, context) => ({
   query: `
-    query isFeatureKeyEnabled($featureKey: String!) {
-      isFeatureEnabled(featureKey: $featureKey) {
+    query isFeatureKeyEnabled($featureKey: String!, $context: [IsFeatureEnabledContextInput]) {
+      isFeatureEnabled(featureKey: $featureKey, context: $context) {
         enabled
       }
     }
   `,
   variables: {
-    featureKey
+    featureKey,
+    context: context || []
   }
 });
 
@@ -61,12 +62,12 @@ class TeamCentralCardClient extends CachingClient {
     this.featureFlagKeys = new Map();
   }
 
-  async makeFeatureFlagCheckRequest(featureKey) {
+  async makeFeatureFlagCheckRequest(featureKey, context) {
     if (!this.options.teamCentralUrl) {
       throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
     }
 
-    const query = buildCheckFeatureFlagQuery(featureKey);
+    const query = buildCheckFeatureFlagQuery(featureKey, context);
     const response = await graphqlQuery(this.options.teamCentralUrl, query);
     return response.isFeatureEnabled.enabled;
   }
@@ -124,7 +125,7 @@ class TeamCentralCardClient extends CachingClient {
     });
   }
 
-  getFlagEnabled(featureKey) {
+  getFlagEnabled(featureKey, productIdentifier) {
     if (!featureKey) {
       return Promise.reject(new Error('featureKey missing'));
     }
@@ -137,8 +138,12 @@ class TeamCentralCardClient extends CachingClient {
       return Promise.resolve(false);
     }
 
+    const context = [{
+      key: 'productIdentifier',
+      value: productIdentifier || 'unset'
+    }];
     return new Promise(resolve => {
-      this.makeFeatureFlagCheckRequest(featureKey).then(enabled => {
+      this.makeFeatureFlagCheckRequest(featureKey, context).then(enabled => {
         this.featureFlagKeys.set(featureKey, enabled);
         resolve(enabled);
       }).catch(error => {

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

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/custom-theme-button';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/glyph/more';
+import messages from '../../messages';
+import { OverflowActionButtonsWrapper } from '../../styled/Card';
+export const OverflowProfileCardButtons = props => {
+  const intl = useIntl();
+  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+    placement: 'bottom-end',
+    trigger: ({
+      triggerRef,
+      isSelected,
+      testId,
+      ...providedProps
+    }) => /*#__PURE__*/React.createElement(Button, _extends({
+      type: "button"
+    }, providedProps, {
+      ref: triggerRef,
+      iconBefore: /*#__PURE__*/React.createElement(MoreIcon, {
+        label: intl.formatMessage(messages.profileCardMoreIconLabel)
+      })
+    }))
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, props.actions.map(action => /*#__PURE__*/React.createElement(DropdownItem, {
+    key: action.id,
+    onClick: (event, ...args) => {
+      props.onItemClick(action, args, event);
+    },
+    href: action.link
+  }, action.label)))));
+};

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

@@ -15,6 +15,7 @@ import { ActionButtonGroup, ActionsFlexSpacer, AppTitleLabel, CardContainer, Car
 import { isBasicClick } from '../../util/click';
 import { ErrorMessage } from '../Error';
 import { IconLabel } from '../Icon';
+import { OverflowProfileCardButtons } from './OverflowProfileCardButtons';
 import ReportingLinesDetails from './ReportingLinesDetails';
 export default class Profilecard extends React.PureComponent {
   constructor(props) {
@@ -37,14 +38,29 @@ export default class Profilecard extends React.PureComponent {
       }
     });
 
-    _defineProperty(this, "giveKudosCallback", clickedUserId => {
-      if (clickedUserId) {
-        window.open(`${this.props.teamCentralBaseUrl}/give-kudos?type=individual&recipientId=${clickedUserId}`);
+    _defineProperty(this, "kudosUrl", () => {
+      const recipientId = this.props.userId && `&recipientId=${this.props.userId}` || '';
+      const cloudId = this.props.cloudId && `&cloudId=${this.props.cloudId}` || '';
+      return `${this.props.teamCentralBaseUrl}/kudos/give?type=individual${recipientId}${cloudId}`;
+    });
+
+    _defineProperty(this, "kudosButtonCallback", () => {
+      if (this.props.openKudosDrawer) {
+        this.props.openKudosDrawer();
       } else {
-        window.open(`${this.props.teamCentralBaseUrl}/give-kudos?type=individual`);
+        window.open(this.kudosUrl());
       }
     });
 
+    _defineProperty(this, "renderButton", (action, idx) => {
+      return /*#__PURE__*/React.createElement(Button, {
+        appearance: idx === 0 ? 'default' : 'subtle',
+        key: action.id || idx,
+        onClick: (event, ...args) => this.onActionClick(action, args, event),
+        href: action.link
+      }, action.label);
+    });
+
     this.timeOpen = null;
 
     this.clientFetchProfile = (...args) => {
@@ -73,9 +89,9 @@ export default class Profilecard extends React.PureComponent {
         label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
         id: 'give-kudos',
         callback: () => {
-          this.giveKudosCallback(this.props.userId);
+          this.kudosButtonCallback();
         },
-        link: this.props.userId ? `${this.props.teamCentralBaseUrl}/give-kudos?type=individual&recipientId=${this.props.userId}` : `${this.props.teamCentralBaseUrl}/give-kudos?type=individual`
+        link: this.kudosUrl()
       };
       return actions.concat([kudosAction]);
     }
@@ -89,22 +105,24 @@ export default class Profilecard extends React.PureComponent {
     }
 
     const actions = this.getActions();
-    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map((action, idx) => /*#__PURE__*/React.createElement(Button, {
-      appearance: idx === 0 ? 'default' : 'subtle',
-      key: action.id || idx,
-      onClick: (event, ...args) => {
-        this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-          id: action.id || null,
-          duration: this.durationSince(this.timeOpen)
-        });
-
-        if (action.callback && isBasicClick(event)) {
-          event.preventDefault();
-          action.callback(event, ...args);
-        }
-      },
-      href: action.link
-    }, action.label)));
+    const firstTwoActions = actions.slice(0, 2);
+    const restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
+    return /*#__PURE__*/React.createElement(ActionButtonGroup, null, firstTwoActions.map((action, idx) => this.renderButton(action, idx)), restOfActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
+      actions: restOfActions,
+      onItemClick: (action, args, event) => this.onActionClick(action, args, event)
+    }));
+  }
+
+  onActionClick(action, args, event) {
+    this.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
+      id: action.id || null,
+      duration: this.durationSince(this.timeOpen)
+    });
+
+    if (action.callback && isBasicClick(event)) {
+      event.preventDefault();
+      action.callback(event, ...args);
+    }
   }
 
   renderCardDetailsDefault() {

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+import React, { Suspense } from 'react';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { AnalyticsName } from '../../internal/analytics';
 import filterActions from '../../internal/filterActions';
 import { CardWrapper } from '../../styled/Card';
@@ -19,7 +20,9 @@ export default class ProfileCardResourced extends React.PureComponent {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      isKudosEnabled: false,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(this, "callAnalytics", (id, options = {}) => {
@@ -51,12 +54,24 @@ export default class ProfileCardResourced extends React.PureComponent {
         hasError: false,
         data: null
       }, () => {
-        const requests = Promise.all([this.props.resourceClient.getProfile(cloudId, userId), this.props.resourceClient.getReportingLines(userId)]);
-        requests.then(res => this.handleClientSuccess(res[0], res[1]), err => this.handleClientError(err)).catch(err => this.handleClientError(err));
+        const requests = Promise.all([this.props.resourceClient.getProfile(cloudId, userId), this.props.resourceClient.getReportingLines(userId), this.props.resourceClient.shouldShowGiveKudos()]);
+        requests.then(res => this.handleClientSuccess(...res), err => this.handleClientError(err)).catch(err => this.handleClientError(err));
       });
     });
 
     _defineProperty(this, "filterActions", () => filterActions(this.props.actions, this.state.data));
+
+    _defineProperty(this, "openKudosDrawer", () => {
+      this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(this, "closeKudosDrawer", () => {
+      this.setState({
+        kudosDrawerOpen: false
+      });
+    });
   }
 
   componentDidMount() {
@@ -89,7 +104,7 @@ export default class ProfileCardResourced extends React.PureComponent {
     this._isMounted = false;
   }
 
-  handleClientSuccess(profileData, reportingLinesData) {
+  handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
     if (!this._isMounted) {
       return;
     }
@@ -98,7 +113,8 @@ export default class ProfileCardResourced extends React.PureComponent {
       isLoading: false,
       hasError: false,
       data: profileData,
-      reportingLinesData
+      reportingLinesData,
+      isKudosEnabled: shouldShowGiveKudos
     });
   }
 
@@ -120,11 +136,15 @@ export default class ProfileCardResourced extends React.PureComponent {
       hasError,
       error,
       data,
-      reportingLinesData
+      reportingLinesData,
+      isKudosEnabled
     } = this.state;
     const {
       analytics,
-      onReportingLinesClick
+      onReportingLinesClick,
+      cloudId,
+      userId,
+      addFlag
     } = this.props;
     const isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
 
@@ -144,11 +164,31 @@ export default class ProfileCardResourced extends React.PureComponent {
       analytics,
       reportingLines: reportingLinesData,
       onReportingLinesClick: onReportingLinesClick,
-      ...data
+      cloudId,
+      userId,
+      addFlag,
+      ...data,
+      isKudosEnabled,
+      teamCentralBaseUrl: this.props.resourceClient.getTeamCentralBaseUrl(),
+      openKudosDrawer: this.openKudosDrawer
     };
-    return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(ProfileCard, _extends({}, newProps, {
+    return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, isKudosEnabled && /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+      isOpen: this.state.kudosDrawerOpen,
+      recipient: {
+        type: KudosType.INDIVIDUAL,
+        recipientId: this.props.userId
+      },
+      analytics: this.props.analytics,
+      analyticsSource: "profile-card",
+      teamCentralBaseUrl: newProps.teamCentralBaseUrl,
+      cloudId: this.props.cloudId,
+      addFlag: this.props.addFlag,
+      onClose: this.closeKudosDrawer
+    })), /*#__PURE__*/React.createElement(ProfileCard, _extends({}, newProps, {
       actions: this.filterActions()
-    })));
+    }))));
   }
 
 }

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Suspense } from 'react';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import filterActions from '../../internal/filterActions';
@@ -74,7 +75,8 @@ class ProfilecardTrigger extends React.PureComponent {
       data: null,
       reportingLinesData: undefined,
       shouldShowGiveKudos: false,
-      teamCentralBaseUrl: undefined
+      teamCentralBaseUrl: undefined,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(this, "clientFetchProfile", () => {
@@ -104,6 +106,19 @@ class ProfilecardTrigger extends React.PureComponent {
       });
     });
 
+    _defineProperty(this, "openKudosDrawer", () => {
+      this.hideProfilecard();
+      this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(this, "closeKudosDrawer", () => {
+      this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
     _defineProperty(this, "renderCard", () => {
       const {
         isLoading
@@ -186,7 +201,9 @@ class ProfilecardTrigger extends React.PureComponent {
       reportingLines: this.state.reportingLinesData,
       onReportingLinesClick: this.props.onReportingLinesClick,
       isKudosEnabled: this.state.shouldShowGiveKudos,
-      teamCentralBaseUrl: this.state.teamCentralBaseUrl
+      teamCentralBaseUrl: this.state.teamCentralBaseUrl,
+      cloudId: this.props.cloudId,
+      openKudosDrawer: this.openKudosDrawer
     };
     const wrapperProps = this.props.trigger === 'hover' ? {
       onMouseEnter: this.showProfilecard,
@@ -203,7 +220,7 @@ class ProfilecardTrigger extends React.PureComponent {
   }
 
   renderWithTrigger() {
-    return /*#__PURE__*/React.createElement(Popup, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
       isOpen: !!this.state.visible,
       onClose: this.hideProfilecard,
       placement: this.props.position,
@@ -220,7 +237,21 @@ class ProfilecardTrigger extends React.PureComponent {
       },
       zIndex: layers.modal(),
       shouldUseCaptureOnOutsideClick: true
-    });
+    }), this.state.shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
+      fallback: null
+    }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+      isOpen: this.state.kudosDrawerOpen,
+      recipient: {
+        type: KudosType.INDIVIDUAL,
+        recipientId: this.props.userId
+      },
+      analytics: this.props.analytics,
+      analyticsSource: "profile-card",
+      teamCentralBaseUrl: this.state.teamCentralBaseUrl,
+      cloudId: this.props.cloudId,
+      addFlag: this.props.addFlag,
+      onClose: this.closeKudosDrawer
+    })));
   }
 
   render() {

package/dist/es2019/messages.js

@@ -144,6 +144,11 @@ const messages = defineMessages({
     id: 'pt.profile-card.give-kudos',
     defaultMessage: 'Give kudos',
     description: 'Title for the button on the profile card for a user to give a kudos'
+  },
+  profileCardMoreIconLabel: {
+    id: 'pt.profile-card.more-icon-label',
+    defaultMessage: 'More',
+    description: 'Label for the meatballs icon on the profile card, which when clicked will provide more options'
   }
 });
 export default messages;

package/dist/es2019/mocks/mock-profile-client.js

@@ -57,6 +57,10 @@ export default function getMockProfileClient(BaseProfileClient, modifyResponse)
       });
     }
 
+    getFlagEnabled(featureKey) {
+      return Promise.resolve(true);
+    }
+
   }
 
   return class MockProfileClient extends BaseProfileClient {

package/dist/es2019/styled/Card.js

@@ -24,7 +24,8 @@ export const ActionButtonGroup = styled.div`
   text-align: right;
 
   button,
-  a {
+  a,
+  span {
     margin-left: ${gridSize}px;
 
     &:first-child {
@@ -32,6 +33,12 @@ export const ActionButtonGroup = styled.div`
     }
   }
 `;
+export const OverflowActionButtonsWrapper = styled.div`
+  display: inline-block;
+  width: 32px;
+  height: 32px;
+  margin-left: ${gridSize}px;
+`;
 export const CardContent = styled.div`
   display: flex;
   flex-direction: column;

package/dist/es2019/util/analytics.js

@@ -35,7 +35,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "16.5.0",
+    packageVersion: "16.7.0",
     ...attributes,
     firedAt: getPageTime()
   }

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.5.0"
+	"version": "16.7.0"
 }

package/dist/esm/client/ProfileCardClient.js

@@ -58,11 +58,11 @@ var ProfileCardClient = /*#__PURE__*/function () {
   }, {
     key: "shouldShowGiveKudos",
     value: function shouldShowGiveKudos() {
-      var _this$tcClient4, _this$tcClient5;
+      var _this$tcClient4, _this$tcClient5, _this$tcClient6;
 
       // Check if the kudos feature enabled and if the user has TC
       // if the user does not have TC the tc client will be undefined.
-      return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2')) || Promise.resolve(false);
+      return ((_this$tcClient4 = this.tcClient) === null || _this$tcClient4 === void 0 ? void 0 : _this$tcClient4.options.teamCentralBaseUrl) && ((_this$tcClient5 = this.tcClient) === null || _this$tcClient5 === void 0 ? void 0 : _this$tcClient5.getFlagEnabled('team-central-kudos-enabled-m2', (_this$tcClient6 = this.tcClient) === null || _this$tcClient6 === void 0 ? void 0 : _this$tcClient6.options.productIdentifier)) || Promise.resolve(false);
     }
   }]);