@atlaskit/profilecard 16.5.0 → 16.7.0

package/dist/esm/client/TeamCentralCardClient.js

@@ -22,11 +22,12 @@ var buildReportingLinesQuery = function buildReportingLinesQuery(aaid) {
   };
 };
 
-var buildCheckFeatureFlagQuery = function buildCheckFeatureFlagQuery(featureKey) {
+var buildCheckFeatureFlagQuery = function buildCheckFeatureFlagQuery(featureKey, context) {
   return {
-    query: "\n    query isFeatureKeyEnabled($featureKey: String!) {\n      isFeatureEnabled(featureKey: $featureKey) {\n        enabled\n      }\n    }\n  ",
+    query: "\n    query isFeatureKeyEnabled($featureKey: String!, $context: [IsFeatureEnabledContextInput]) {\n      isFeatureEnabled(featureKey: $featureKey, context: $context) {\n        enabled\n      }\n    }\n  ",
     variables: {
-      featureKey: featureKey
+      featureKey: featureKey,
+      context: context || []
     }
   };
 };
@@ -59,7 +60,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
   _createClass(TeamCentralCardClient, [{
     key: "makeFeatureFlagCheckRequest",
     value: function () {
-      var _makeFeatureFlagCheckRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(featureKey) {
+      var _makeFeatureFlagCheckRequest = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(featureKey, context) {
         var query, response;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
@@ -73,7 +74,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
                 throw new Error('options.teamCentralUrl is a required parameter for retrieving Team Central data');
 
               case 2:
-                query = buildCheckFeatureFlagQuery(featureKey);
+                query = buildCheckFeatureFlagQuery(featureKey, context);
                 _context.next = 5;
                 return graphqlQuery(this.options.teamCentralUrl, query);
 
@@ -89,7 +90,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee, this);
       }));
 
-      function makeFeatureFlagCheckRequest(_x) {
+      function makeFeatureFlagCheckRequest(_x, _x2) {
         return _makeFeatureFlagCheckRequest.apply(this, arguments);
       }
 
@@ -128,7 +129,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         }, _callee2, this);
       }));
 
-      function makeRequest(_x2) {
+      function makeRequest(_x3) {
         return _makeRequest.apply(this, arguments);
       }
 
@@ -182,7 +183,7 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
     }
   }, {
     key: "getFlagEnabled",
-    value: function getFlagEnabled(featureKey) {
+    value: function getFlagEnabled(featureKey, productIdentifier) {
       var _this3 = this;
 
       if (!featureKey) {
@@ -197,8 +198,12 @@ var TeamCentralCardClient = /*#__PURE__*/function (_CachingClient) {
         return Promise.resolve(false);
       }
 
+      var context = [{
+        key: 'productIdentifier',
+        value: productIdentifier || 'unset'
+      }];
       return new Promise(function (resolve) {
-        _this3.makeFeatureFlagCheckRequest(featureKey).then(function (enabled) {
+        _this3.makeFeatureFlagCheckRequest(featureKey, context).then(function (enabled) {
           _this3.featureFlagKeys.set(featureKey, enabled);
 
           resolve(enabled);

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

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef", "isSelected", "testId"];
+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 var OverflowProfileCardButtons = function OverflowProfileCardButtons(props) {
+  var intl = useIntl();
+  return /*#__PURE__*/React.createElement(OverflowActionButtonsWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
+    placement: 'bottom-end',
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+          isSelected = _ref.isSelected,
+          testId = _ref.testId,
+          providedProps = _objectWithoutProperties(_ref, _excluded);
+
+      return /*#__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(function (action) {
+    return /*#__PURE__*/React.createElement(DropdownItem, {
+      key: action.id,
+      onClick: function onClick(event) {
+        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+          args[_key - 1] = arguments[_key];
+        }
+
+        props.onItemClick(action, args, event);
+      },
+      href: action.link
+    }, action.label);
+  }))));
+};

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -28,6 +29,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';
 
 var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
@@ -61,14 +63,35 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "giveKudosCallback", function (clickedUserId) {
-      if (clickedUserId) {
-        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual&recipientId=").concat(clickedUserId));
+    _defineProperty(_assertThisInitialized(_this), "kudosUrl", function () {
+      var recipientId = _this.props.userId && "&recipientId=".concat(_this.props.userId) || '';
+      var cloudId = _this.props.cloudId && "&cloudId=".concat(_this.props.cloudId) || '';
+      return "".concat(_this.props.teamCentralBaseUrl, "/kudos/give?type=individual").concat(recipientId).concat(cloudId);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "kudosButtonCallback", function () {
+      if (_this.props.openKudosDrawer) {
+        _this.props.openKudosDrawer();
       } else {
-        window.open("".concat(_this.props.teamCentralBaseUrl, "/give-kudos?type=individual"));
+        window.open(_this.kudosUrl());
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderButton", function (action, idx) {
+      return /*#__PURE__*/React.createElement(Button, {
+        appearance: idx === 0 ? 'default' : 'subtle',
+        key: action.id || idx,
+        onClick: function onClick(event) {
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+
+          return _this.onActionClick(action, args, event);
+        },
+        href: action.link
+      }, action.label);
+    });
+
     _this.timeOpen = null;
 
     _this.clientFetchProfile = function () {
@@ -108,9 +131,9 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
           label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
           id: 'give-kudos',
           callback: function callback() {
-            _this3.giveKudosCallback(_this3.props.userId);
+            _this3.kudosButtonCallback();
           },
-          link: this.props.userId ? "".concat(this.props.teamCentralBaseUrl, "/give-kudos?type=individual&recipientId=").concat(this.props.userId) : "".concat(this.props.teamCentralBaseUrl, "/give-kudos?type=individual")
+          link: this.kudosUrl()
         };
         return actions.concat([kudosAction]);
       }
@@ -127,30 +150,30 @@ var Profilecard = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var actions = this.getActions();
-      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, actions.map(function (action, idx) {
-        return /*#__PURE__*/React.createElement(Button, {
-          appearance: idx === 0 ? 'default' : 'subtle',
-          key: action.id || idx,
-          onClick: function onClick(event) {
-            _this4.callAnalytics(AnalyticsName.PROFILE_CARD_CLICK, {
-              id: action.id || null,
-              duration: _this4.durationSince(_this4.timeOpen)
-            });
-
-            if (action.callback && isBasicClick(event)) {
-              event.preventDefault();
-
-              for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-                args[_key - 1] = arguments[_key];
-              }
-
-              action.callback.apply(action, [event].concat(args));
-            }
-          },
-          href: action.link
-        }, action.label);
+      var firstTwoActions = actions.slice(0, 2);
+      var restOfActions = actions && actions.length > 2 ? actions.slice(2) : undefined;
+      return /*#__PURE__*/React.createElement(ActionButtonGroup, null, firstTwoActions.map(function (action, idx) {
+        return _this4.renderButton(action, idx);
+      }), restOfActions && /*#__PURE__*/React.createElement(OverflowProfileCardButtons, {
+        actions: restOfActions,
+        onItemClick: function onItemClick(action, args, event) {
+          return _this4.onActionClick(action, args, event);
+        }
       }));
     }
+  }, {
+    key: "onActionClick",
+    value: function 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.apply(action, [event].concat(_toConsumableArray(args)));
+      }
+    }
   }, {
     key: "renderCardDetailsDefault",
     value: function renderCardDetailsDefault() {

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -15,7 +16,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-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';
@@ -47,7 +49,9 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       hasError: false,
       error: null,
       data: null,
-      reportingLinesData: undefined
+      reportingLinesData: undefined,
+      isKudosEnabled: false,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "callAnalytics", function (id) {
@@ -75,9 +79,11 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId), _this.props.resourceClient.getReportingLines(userId)]);
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos()]);
         requests.then(function (res) {
-          return _this.handleClientSuccess(res[0], res[1]);
+          var _this2;
+
+          return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -90,6 +96,18 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
       return filterActions(_this.props.actions, _this.state.data);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "openKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
     return _this;
   }
 
@@ -125,7 +143,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(profileData, reportingLinesData) {
+    value: function handleClientSuccess(profileData, reportingLinesData, shouldShowGiveKudos) {
       if (!this._isMounted) {
         return;
       }
@@ -134,7 +152,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         isLoading: false,
         hasError: false,
         data: profileData,
-        reportingLinesData: reportingLinesData
+        reportingLinesData: reportingLinesData,
+        isKudosEnabled: shouldShowGiveKudos
       });
     }
   }, {
@@ -158,10 +177,14 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
           hasError = _this$state.hasError,
           error = _this$state.error,
           data = _this$state.data,
-          reportingLinesData = _this$state.reportingLinesData;
+          reportingLinesData = _this$state.reportingLinesData,
+          isKudosEnabled = _this$state.isKudosEnabled;
       var _this$props3 = this.props,
           analytics = _this$props3.analytics,
-          onReportingLinesClick = _this$props3.onReportingLinesClick;
+          onReportingLinesClick = _this$props3.onReportingLinesClick,
+          cloudId = _this$props3.cloudId,
+          userId = _this$props3.userId,
+          addFlag = _this$props3.addFlag;
       var isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
 
       if (isFetchingOrNotStartToFetchYet) {
@@ -173,18 +196,39 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }));
       }
 
-      var newProps = _objectSpread({
+      var newProps = _objectSpread(_objectSpread({
         hasError: hasError,
         errorType: error,
         clientFetchProfile: this.clientFetchProfile,
         analytics: analytics,
         reportingLines: reportingLinesData,
-        onReportingLinesClick: onReportingLinesClick
-      }, data);
+        onReportingLinesClick: onReportingLinesClick,
+        cloudId: cloudId,
+        userId: userId,
+        addFlag: addFlag
+      }, data), {}, {
+        isKudosEnabled: 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/esm/components/User/ProfileCardTrigger.js

@@ -19,6 +19,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 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';
@@ -106,7 +107,8 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       data: null,
       reportingLinesData: undefined,
       shouldShowGiveKudos: false,
-      teamCentralBaseUrl: undefined
+      teamCentralBaseUrl: undefined,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "clientFetchProfile", function () {
@@ -142,6 +144,20 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "openKudosDrawer", function () {
+      _this.hideProfilecard();
+
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
       var isLoading = _this.state.isLoading;
 
@@ -229,7 +245,9 @@ var ProfilecardTrigger = /*#__PURE__*/function (_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
       });
 
       var wrapperProps = this.props.trigger === 'hover' ? {
@@ -250,7 +268,7 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
     value: function renderWithTrigger() {
       var _this3 = this;
 
-      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,
@@ -266,7 +284,21 @@ var ProfilecardTrigger = /*#__PURE__*/function (_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
+      })));
     }
   }, {
     key: "render",

package/dist/esm/messages.js

@@ -144,6 +144,11 @@ var 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/esm/mocks/mock-profile-client.js

@@ -98,6 +98,11 @@ export default function getMockProfileClient(BaseProfileClient, modifyResponse)
           }, timeout);
         });
       }
+    }, {
+      key: "getFlagEnabled",
+      value: function getFlagEnabled(featureKey) {
+        return Promise.resolve(true);
+      }
     }]);
 
     return MockTeamCentralClient;

package/dist/esm/styled/Card.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-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;
 
 import styled, { css } from 'styled-components';
 import { borderRadius, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
@@ -14,21 +14,22 @@ export var CardContainerEmpty = styled.div(_templateObject || (_templateObject =
 export var CardWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n"])), bgColor, borderRadius, gridSize() * 45);
 export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n"])), gridSize() * 3, gridSize() * 3);
 export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
-export var ActionButtonGroup = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 * gridSize(), gridSize);
-export var CardContent = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
-export var DetailsGroup = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
-export var DisabledInfo = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), fontSizeSmall, labelTextColor, gridSize() * 1.5, gridSize() * 2);
-export var FullNameLabel = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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) {
+export var ActionButtonGroup = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 * gridSize(), gridSize);
+export var OverflowActionButtonsWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), gridSize);
+export var CardContent = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);
+export var DetailsGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-left: ", "px;\n  width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
+export var DisabledInfo = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  color: ", ";\n  margin: ", "px 0 0 0;\n  line-height: ", "px;\n"])), fontSizeSmall, labelTextColor, gridSize() * 1.5, gridSize() * 2);
+export var FullNameLabel = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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 ? headerTextColorInactive : headerTextColor;
 }, function (props) {
   return getFullNameMargin(props);
 }, 24 / 18);
-export var LozengeWrapper = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), gridSize() * 2);
-export var CustomLozengeContainer = styled(LozengeWrapper)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\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"])), gridSize() * 1.5, gridSize() / 2, gridSize() / 2);
-export var JobTitleLabel = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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"])), headerTextColor, gridSize() * 1.5, 24 / 14);
-export var AppTitleLabel = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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"])), appLabelBgColor, appLabelTextColor, borderRadius(), gridSize() * 1.5, 24 / 14);
-export var SpinnerContainer = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), gridSize() * 12);
-export var CardContainer = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\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) {
+export var LozengeWrapper = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  text-transform: uppercase;\n  display: block;\n"])), gridSize() * 2);
+export var CustomLozengeContainer = styled(LozengeWrapper)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\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"])), gridSize() * 1.5, gridSize() / 2, gridSize() / 2);
+export var JobTitleLabel = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\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"])), headerTextColor, gridSize() * 1.5, 24 / 14);
+export var AppTitleLabel = styled.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\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"])), appLabelBgColor, appLabelTextColor, borderRadius(), gridSize() * 1.5, 24 / 14);
+export var SpinnerContainer = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  position: relative;\n"])), gridSize() * 12);
+export var CardContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\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 ? headerBgColorDisabledUser : headerBgColor;
 }, function (props) {
   return props.isDisabledUser ? headerBgColorDisabledUser : headerBgColor;
@@ -37,8 +38,8 @@ export var CardContainer = styled.div(_templateObject15 || (_templateObject15 =
     return '';
   }
 
-  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), boxShadow, borderRadius);
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), boxShadow, borderRadius);
 });
-export var DetailsLabel = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\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"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
-export var DetailsLabelIcon = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\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"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);
-export var DetailsLabelText = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), labelTextColor, gridSize() / 2);
+export var DetailsLabel = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\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"])), gridSize() * 3, gridSize() * 1.5, gridSize() * 2, gridSize() / 4);
+export var DetailsLabelIcon = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\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"])), labelIconColor, gridSize() * 2, gridSize() * 2, gridSize() / 2);
+export var DetailsLabelText = styled.span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: ", ";\n  padding-left: ", "px;\n"])), labelTextColor, gridSize() / 2);

package/dist/esm/util/analytics.js

@@ -45,7 +45,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: getPageTime()
     })

package/dist/esm/version.json

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

package/dist/types/client/TeamCentralCardClient.d.ts

@@ -3,6 +3,10 @@ import CachingClient from './CachingClient';
 declare type TeamCentralCardClientOptions = ProfileClientOptions & {
     teamCentralUrl: string;
 };
+declare type FeatureFlagExtraContext = {
+    key: string;
+    value: string;
+};
 declare class TeamCentralCardClient extends CachingClient<TeamCentralReportingLinesData> {
     options: TeamCentralCardClientOptions;
     /**
@@ -16,10 +20,10 @@ declare class TeamCentralCardClient extends CachingClient<TeamCentralReportingLi
     bypassOnFailure: boolean;
     featureFlagKeys: Map<string, boolean>;
     constructor(options: TeamCentralCardClientOptions);
-    makeFeatureFlagCheckRequest(featureKey: string): Promise<boolean>;
+    makeFeatureFlagCheckRequest(featureKey: string, context?: FeatureFlagExtraContext[]): Promise<boolean>;
     makeRequest(userId: string): Promise<TeamCentralReportingLinesData>;
     getReportingLines(userId: string): Promise<TeamCentralReportingLinesData>;
-    getFlagEnabled(featureKey: string): Promise<boolean>;
+    getFlagEnabled(featureKey: string, productIdentifier?: string): Promise<boolean>;
     private filterReportingLinesUser;
 }
 export default TeamCentralCardClient;

package/dist/types/client/graphqlUtils.d.ts

@@ -1,6 +1,6 @@
 interface Query {
     query: string;
-    variables: Record<string, string>;
+    variables: Record<string, any>;
 }
 export interface GraphQLError {
     code?: number;

package/dist/types/components/User/OverflowProfileCardButtons.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProfileCardAction } from '../../types';
+declare type OverflowButtonsProps = {
+    actions: ProfileCardAction[];
+    onItemClick: (action: ProfileCardAction, args: any, event: React.MouseEvent | React.KeyboardEvent) => void;
+};
+export declare const OverflowProfileCardButtons: (props: OverflowButtonsProps) => JSX.Element;
+export {};

package/dist/types/components/User/ProfileCard.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { LozengeProps, ProfilecardProps } from '../../types';
+import React, { ReactElement } from 'react';
+import { LozengeProps, ProfileCardAction, ProfilecardProps } from '../../types';
 export default class Profilecard extends React.PureComponent<ProfilecardProps> {
     static defaultProps: ProfilecardProps;
     private timeOpen;
@@ -10,9 +10,12 @@ export default class Profilecard extends React.PureComponent<ProfilecardProps> {
     callAnalytics: (id: string, options: any) => void;
     componentDidMount(): void;
     renderErrorMessage(): JSX.Element;
-    giveKudosCallback: (clickedUserId?: string | undefined) => void;
-    getActions(): import("../../types").ProfileCardAction[];
+    kudosUrl: () => string;
+    kudosButtonCallback: () => void;
+    getActions(): ProfileCardAction[];
+    renderButton: (action: ProfileCardAction, idx: number) => ReactElement;
     renderActionsButtons(): JSX.Element | null;
+    private onActionClick;
     renderCardDetailsDefault(): JSX.Element;
     renderCardDetailsForDisabledAccount(): JSX.Element;
     getDisabledAccountName(): string | JSX.Element | null | undefined;

package/dist/types/components/User/ProfileCardResourced.d.ts

@@ -9,8 +9,10 @@ export default class ProfileCardResourced extends React.PureComponent<ProfileCar
     componentWillUnmount(): void;
     private callAnalytics;
     clientFetchProfile: () => void;
-    handleClientSuccess(profileData: ProfileCardClientData, reportingLinesData: TeamCentralReportingLinesData): void;
+    handleClientSuccess(profileData: ProfileCardClientData, reportingLinesData: TeamCentralReportingLinesData, shouldShowGiveKudos: boolean): void;
     handleClientError(err: any): void;
     filterActions: () => ProfileCardAction[];
+    openKudosDrawer: () => void;
+    closeKudosDrawer: () => void;
     render(): React.ReactNode;
 }