@atlaskit/profilecard 16.8.0 → 16.10.0

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

@@ -18,6 +18,7 @@ import { LinkItem, MenuGroup } from '@atlaskit/menu';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import messages from '../../messages';
+import { AnimatedKudosButton, KudosBlobAnimation } from '../../styled/Card';
 import { ErrorWrapper, TeamErrorText, TeamErrorTitle } from '../../styled/Error';
 import { ActionButtons, AvatarSection, CardContent, CardHeader, CardWrapper, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
 import { errorRetryClicked, moreActionsClicked, moreMembersClicked, teamActionClicked, teamAvatarClicked, teamProfileCardRendered } from '../../util/analytics';
@@ -25,6 +26,7 @@ import { isBasicClick } from '../../util/click';
 import { ErrorIllustration } from '../Error';
 import TeamLoadingState from './TeamLoadingState';
 var LARGE_MEMBER_COUNT = 50;
+var GIVE_KUDOS_ACTION_ID = 'give-kudos';
 
 function onMemberClick(callback, userId, analytics, index, hasHref) {
   return function (event) {
@@ -121,11 +123,19 @@ var ActionButton = function ActionButton(_ref2) {
   var action = _ref2.action,
       analytics = _ref2.analytics,
       index = _ref2.index;
-  return /*#__PURE__*/React.createElement(WrappedButton, null, /*#__PURE__*/React.createElement(Button, {
-    href: action.link,
+  var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
+  var actionButton = /*#__PURE__*/React.createElement(Button, {
+    key: action.id || index,
     onClick: onActionClick(action, analytics, index),
+    href: action.link,
     shouldFitContainer: true
-  }, action.label));
+  }, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(KudosBlobAnimation, null));
+
+  if (isGiveKudosActionButton) {
+    return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, actionButton);
+  }
+
+  return /*#__PURE__*/React.createElement(WrappedButton, null, actionButton);
 };
 
 var ExtraActions = function ExtraActions(_ref3) {

package/dist/esm/components/Team/TeamProfileCardTrigger.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";
@@ -12,10 +13,13 @@ 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 { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import _filterActions from '../../internal/filterActions';
+import messages from '../../messages';
 import { fireEvent, teamCardTriggered, teamProfileCardRendered } from '../../util/analytics';
 import { isBasicClick } from '../../util/click';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
@@ -144,6 +148,26 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "openKudosDrawer", function () {
+      _this.hideProfilecard(DELAY_MS_HIDE);
+
+      _this.setState({
+        kudosDrawerOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeKudosDrawer", function () {
+      _this.setState({
+        kudosDrawerOpen: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "kudosUrl", function () {
+      var recipientId = _this.props.teamId && "&recipientId=".concat(_this.props.teamId) || '';
+      var cloudId = _this.props.cloudId && "&cloudId=".concat(_this.props.cloudId) || '';
+      return "".concat(_this.state.teamCentralBaseUrl, "/kudos/give?type=team").concat(recipientId).concat(cloudId);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "stopPropagation", function (event) {
       // We need to stop propagation when users click on the card, so that it
       // doesn't trigger any special effects that occur when clicking the trigger.
@@ -167,7 +191,10 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       isLoading: undefined,
       hasError: false,
       error: null,
-      data: null
+      data: null,
+      shouldShowGiveKudos: false,
+      teamCentralBaseUrl: undefined,
+      kudosDrawerOpen: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "clientFetchProfile", function () {
@@ -189,8 +216,11 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
           _this.fireAnalytics(event);
         };
 
-        _this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent).then(function (res) {
-          return _this.handleClientSuccess(res);
+        var requests = Promise.all([_this.props.resourceClient.getTeamProfile(teamId, orgId, fireEvent), _this.props.resourceClient.shouldShowGiveKudos()]);
+        requests.then(function (res) {
+          var _this2;
+
+          return (_this2 = _this).handleClientSuccess.apply(_this2, _toConsumableArray(res));
         }, function (err) {
           return _this.handleClientError(err);
         }).catch(function (err) {
@@ -243,6 +273,23 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       }))));
     });
 
+    _defineProperty(_assertThisInitialized(_this), "renderKudosLauncher", function () {
+      return _this.state.shouldShowGiveKudos && /*#__PURE__*/React.createElement(Suspense, {
+        fallback: null
+      }, /*#__PURE__*/React.createElement(GiveKudosLauncherLazy, {
+        isOpen: _this.state.kudosDrawerOpen,
+        recipient: {
+          type: KudosType.TEAM,
+          recipientId: _this.props.teamId
+        },
+        analyticsSource: "team-profile-card",
+        teamCentralBaseUrl: _this.state.teamCentralBaseUrl,
+        cloudId: _this.props.cloudId || '',
+        addFlag: _this.props.addFlag,
+        onClose: _this.closeKudosDrawer
+      }));
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderTrigger", function (triggerProps) {
       var _this$props3 = _this.props,
           children = _this$props3.children,
@@ -250,12 +297,12 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
           viewProfileLink = _this$props3.viewProfileLink;
 
       if (triggerLinkType === 'none') {
-        return /*#__PURE__*/React.createElement("span", _extends({
+        return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/React.createElement("span", _extends({
           "data-testid": "team-profilecard-trigger-wrapper"
-        }, triggerProps, _this.triggerListeners), children);
+        }, triggerProps, _this.triggerListeners), children));
       }
 
-      return /*#__PURE__*/React.createElement("a", _extends({
+      return /*#__PURE__*/React.createElement(React.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/React.createElement("a", _extends({
         "data-testid": "team-profilecard-trigger-wrapper",
         style: {
           color: 'initial',
@@ -264,7 +311,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         href: viewProfileLink
       }, triggerProps, {
         ref: triggerProps.ref
-      }, _this.triggerListeners), children);
+      }, _this.triggerListeners), children));
     });
 
     return _this;
@@ -299,7 +346,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
     }
   }, {
     key: "handleClientSuccess",
-    value: function handleClientSuccess(res) {
+    value: function handleClientSuccess(team, shouldShowGiveKudos) {
       if (!this._isMounted) {
         return;
       }
@@ -307,7 +354,9 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       this.setState({
         isLoading: false,
         hasError: false,
-        data: res
+        data: team,
+        shouldShowGiveKudos: shouldShowGiveKudos,
+        teamCentralBaseUrl: this.props.resourceClient.getTeamCentralBaseUrl()
       });
     }
   }, {
@@ -326,12 +375,28 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
   }, {
     key: "filterActions",
     value: function filterActions() {
-      return _filterActions(this.props.actions, this.state.data);
+      var _this3 = this;
+
+      var actions = _filterActions(this.props.actions, this.state.data);
+
+      if (this.state.shouldShowGiveKudos) {
+        var kudosAction = {
+          label: /*#__PURE__*/React.createElement(FormattedMessage, messages.giveKudosButton),
+          id: 'give-kudos',
+          callback: function callback() {
+            _this3.openKudosDrawer();
+          },
+          link: this.kudosUrl()
+        };
+        return actions.concat([kudosAction]);
+      }
+
+      return actions;
     }
   }, {
     key: "renderPopup",
     value: function renderPopup() {
-      var _this2 = this;
+      var _this4 = this;
 
       if (this.state.renderError) {
         return this.props.children;
@@ -345,7 +410,7 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         placement: this.props.position,
         content: this.renderProfileCard,
         trigger: function trigger(triggerProps) {
-          return _this2.renderTrigger(triggerProps);
+          return _this4.renderTrigger(triggerProps);
         },
         zIndex: layers.modal(),
         shouldFlip: true

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

@@ -220,7 +220,6 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
           type: KudosType.INDIVIDUAL,
           recipientId: this.props.userId
         },
-        analytics: this.props.analytics,
         analyticsSource: "profile-card",
         teamCentralBaseUrl: newProps.teamCentralBaseUrl,
         cloudId: this.props.cloudId,

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

@@ -292,7 +292,6 @@ var ProfilecardTrigger = /*#__PURE__*/function (_React$PureComponent) {
           type: KudosType.INDIVIDUAL,
           recipientId: this.props.userId
         },
-        analytics: this.props.analytics,
         analyticsSource: "profile-card",
         teamCentralBaseUrl: this.state.teamCentralBaseUrl,
         cloudId: this.props.cloudId,

package/dist/esm/i18n/en.js

@@ -25,6 +25,7 @@ export default {
   'pt.profile-card.inactive.account.has.date.this.month': 'Their account was deactivated this month.',
   'pt.profile-card.inactive.account.has.date.this.week': 'Their account was deactivated this week.',
   'pt.profile-card.inactive.account.no.date': 'Their account has been deactivated.',
+  'pt.profile-card.more-icon-label': 'More',
   'pt.team-profile-card.directReports.heading': 'Direct reports',
   'pt.team-profile-card.error.refresh-button': 'Try again',
   'pt.team-profile-card.error.suggestion': 'Wait a few moments, then try again.',

package/dist/esm/i18n/en_GB.js

@@ -25,6 +25,7 @@ export default {
   'pt.profile-card.inactive.account.has.date.this.month': 'Their account was deactivated this month.',
   'pt.profile-card.inactive.account.has.date.this.week': 'Their account was deactivated this week.',
   'pt.profile-card.inactive.account.no.date': 'Their account has been deactivated.',
+  'pt.profile-card.more-icon-label': 'More',
   'pt.team-profile-card.directReports.heading': 'Direct reports',
   'pt.team-profile-card.error.refresh-button': 'Try again',
   'pt.team-profile-card.error.suggestion': 'Wait a few moments, then try again.',

package/dist/esm/i18n/en_ZZ.js

@@ -25,6 +25,7 @@ export default {
   'pt.profile-card.inactive.account.has.date.this.month': '⁣⁢Their account was deactivated this month.‍‌⁡⁡؜⁠‍‍⁣⁤',
   'pt.profile-card.inactive.account.has.date.this.week': '⁣⁢Their account was deactivated this week.⁠‍⁠‍⁡؜⁣⁤',
   'pt.profile-card.inactive.account.no.date': '⁣⁢Their account has been deactivated.‌⁠⁠⁠‌⁡‌؜⁠⁠‌⁣⁤',
+  'pt.profile-card.more-icon-label': '⁣⁢More‌‌‍؜⁡؜⁠⁠؜؜⁣⁤',
   'pt.team-profile-card.directReports.heading': '⁣⁢Direct reports⁠‍⁡⁠؜⁠‌؜⁣⁤',
   'pt.team-profile-card.error.refresh-button': '⁣⁢Try again⁡⁠‍‌⁠⁠⁡⁠؜⁠⁡‍⁣⁤',
   'pt.team-profile-card.error.suggestion': '⁣⁢Wait a few moments, then try again.‌⁡‌‌‍⁠⁠⁡‍؜‌⁡⁠⁠⁡⁠‍‍⁣⁤',

package/dist/esm/styled/Card.js

@@ -17,7 +17,7 @@ export var ProfileImage = styled.div(_templateObject3 || (_templateObject3 = _ta
 export var ActionsFlexSpacer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  flex: 1 0 auto;\n"])));
 var kudosButtonAnimationTransformation = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["{\n  0%   { transform: translate(-80px, -50px); }\n  100% { transform: translate(90px, -70px); }\n}"])));
 export var KudosBlobAnimation = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: none;\n  height: 150px;\n  width: 150px;\n  z-index: -1;\n  position: absolute;\n  animation-name: ", ";\n  animation-iteration-count: 1;\n  animation-duration: 3s;\n  background-image: radial-gradient(\n    circle,\n    ", " 0%,\n    ", " 25%,\n    transparent 50%\n  );\n  overflow: hidden;\n"])), kudosButtonAnimationTransformation, token('color.background.information.pressed', '#85B8FF'), token('color.background.discovery.pressed', '#B8ACF6'));
-export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  &:hover ", " {\n    display: block;\n  }\n\n  button,\n  a {\n    clip-path: inset(0px 0px 0px 0px round ", "px);\n  }\n"])), gridSize, KudosBlobAnimation, borderRadius);
+export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  &:hover ", " {\n    display: block;\n  }\n\n  button,\n  a {\n    clip-path: inset(0px 0px 0px 0px round ", "px);\n  }\n  overflow: hidden;\n"])), gridSize, KudosBlobAnimation, borderRadius);
 export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  user-select: none;\n  margin: ", "px 0 0 0;\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\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(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 32px;\n  height: 32px;\n  margin-left: ", "px;\n"])), gridSize);
 export var CardContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: ", "px;\n"])), gridSize() * 17);

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.8.0"
+      packageVersion: "16.10.0"
     }, attributes), {}, {
       firedAt: getPageTime()
     })

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "16.8.0"
+	"version": "16.10.0"
 }

package/dist/types/components/Team/TeamProfileCardTrigger.d.ts

@@ -18,6 +18,9 @@ export declare class TeamProfileCardTriggerInternal extends React.PureComponent<
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
+    openKudosDrawer: () => void;
+    closeKudosDrawer: () => void;
+    kudosUrl: () => string;
     stopPropagation: (event: React.MouseEvent<HTMLElement>) => void;
     triggerListeners: {
         onClick: (event: React.MouseEvent<HTMLElement>) => void;
@@ -35,10 +38,11 @@ export declare class TeamProfileCardTriggerInternal extends React.PureComponent<
     componentWillUnmount(): void;
     clientFetchProfile: () => void;
     onErrorBoundary: () => void;
-    handleClientSuccess(res: Team): void;
+    handleClientSuccess(team: Team, shouldShowGiveKudos: boolean): void;
     handleClientError(err: any): void;
     filterActions(): ProfileCardAction[];
     renderProfileCard: () => JSX.Element;
+    renderKudosLauncher: () => false | JSX.Element | undefined;
     renderTrigger: (triggerProps: TriggerProps) => JSX.Element;
     renderPopup(): React.ReactNode;
     render(): React.ReactNode;

package/dist/types/i18n/en.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
     'pt.profile-card.inactive.account.has.date.this.month': string;
     'pt.profile-card.inactive.account.has.date.this.week': string;
     'pt.profile-card.inactive.account.no.date': string;
+    'pt.profile-card.more-icon-label': string;
     'pt.team-profile-card.directReports.heading': string;
     'pt.team-profile-card.error.refresh-button': string;
     'pt.team-profile-card.error.suggestion': string;

package/dist/types/i18n/en_GB.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
     'pt.profile-card.inactive.account.has.date.this.month': string;
     'pt.profile-card.inactive.account.has.date.this.week': string;
     'pt.profile-card.inactive.account.no.date': string;
+    'pt.profile-card.more-icon-label': string;
     'pt.team-profile-card.directReports.heading': string;
     'pt.team-profile-card.error.refresh-button': string;
     'pt.team-profile-card.error.suggestion': string;

package/dist/types/i18n/en_ZZ.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
     'pt.profile-card.inactive.account.has.date.this.month': string;
     'pt.profile-card.inactive.account.has.date.this.week': string;
     'pt.profile-card.inactive.account.no.date': string;
+    'pt.profile-card.more-icon-label': string;
     'pt.team-profile-card.directReports.heading': string;
     'pt.team-profile-card.error.refresh-button': string;
     'pt.team-profile-card.error.suggestion': string;

package/dist/types/types.d.ts

@@ -133,6 +133,9 @@ export interface TeamProfileCardTriggerState {
     error?: any;
     data: Team | null;
     renderError?: boolean;
+    shouldShowGiveKudos?: boolean;
+    teamCentralBaseUrl?: string;
+    kudosDrawerOpen: boolean;
 }
 export interface TeamProfilecardCoreProps {
     /**
@@ -236,6 +239,14 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
       interacted with according to the method specified by the trigger prop.
      */
     children?: React.ReactNode;
+    /**
+     * Used by the card to show Flags.
+     */
+    addFlag?: (flag: any) => void;
+    /**
+     * Optional cloudId. Pass this if rendering card within a sited context.
+     */
+    cloudId?: string;
 }
 export declare type StatusType = 'active' | 'inactive' | 'closed';
 export declare type TriggerType = 'hover' | 'click';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "16.8.0",
+  "version": "16.10.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/avatar-group": "^9.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/dropdown-menu": "^11.2.0",
-    "@atlaskit/give-kudos": "^0.3.0",
+    "@atlaskit/give-kudos": "^0.5.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/lozenge": "^11.0.0",
     "@atlaskit/menu": "^1.3.0",