@atlaskit/give-kudos 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @atlassian/give-kudos
+
+## 0.2.0
+
+### Minor Changes
+
+- [`dd476d8114a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd476d8114a) - [ux] Move give kudos to a public package and rename to atlaskit/give-kudos
+
+## 0.1.0
+
+### Minor Changes
+
+- [`5bf301d7026`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5bf301d7026) - [ux] Initial release
+
+## 0.0.1
+
+### Patch Changes
+
+- [`650c976b33d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/650c976b33d) - Initial version

package/README.md

@@ -0,0 +1,3 @@
+# GiveKudos
+
+Give Kudos experience 

package/dist/cjs/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GiveKudosLauncher", {
+  enumerable: true,
+  get: function get() {
+    return _GiveKudosLauncher.default;
+  }
+});
+
+var _GiveKudosLauncher = _interopRequireDefault(require("./ui/GiveKudosLauncher"));

package/dist/cjs/messages.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactIntlNext = require("react-intl-next");
+
+var messages = (0, _reactIntlNext.defineMessages)({
+  giveKudosButton: {
+    id: 'team-central.give-kudos.button',
+    defaultMessage: 'Give kudos',
+    description: 'Title for the button to give a kudos'
+  },
+  kudosCreatedFlag: {
+    id: 'team-central.give-kudos.created.title.flag',
+    defaultMessage: 'Kudos created',
+    description: 'Title text for kudos creation flag.'
+  },
+  kudosCreatedDescriptionFlag: {
+    id: 'team-central.give-kudos.created.description.flag',
+    defaultMessage: 'Your kudos has been sent. <a>View kudos</a>',
+    description: 'Description text for the kudos created flag. This includes a link to view the newly created kudos.'
+  },
+  unsavedKudosWarning: {
+    id: 'team-central.give-kudos.unsaved.warning',
+    defaultMessage: 'Changes that you made will not be saved.',
+    description: 'Shown when the user tries to navigate away from the kudos creation screen with unsaved changes.'
+  },
+  unsavedKudosWarningCancelButton: {
+    id: 'team-central.give-kudos.unsaved.warning.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button that cancels closing the create kudos drawer.'
+  },
+  unsavedKudosWarningCloseButton: {
+    id: 'team-central.give-kudos.unsaved.warning.close',
+    defaultMessage: 'Close',
+    description: 'Button that closes the warning modal and closes the drawer.'
+  }
+});
+var _default = messages;
+exports.default = _default;

package/dist/cjs/types.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KudosType = void 0;
+var KudosType;
+exports.KudosType = KudosType;
+
+(function (KudosType) {
+  KudosType["INDIVIDUAL"] = "individual";
+  KudosType["TEAM"] = "team";
+})(KudosType || (exports.KudosType = KudosType = {}));

package/dist/cjs/ui/GiveKudosLauncher/index.js

@@ -0,0 +1,223 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.GiveKudosLauncher = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _drawer = _interopRequireDefault(require("@atlaskit/drawer"));
+
+var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _messages = _interopRequireDefault(require("../../messages"));
+
+var _styled = require("./styled");
+
+var _templateObject;
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var GiveKudosDrawerWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > Drawer > iframe {\n    border: 0;\n  }\n"])));
+
+var GiveKudosLauncher = function GiveKudosLauncher(props) {
+  var _props$recipient;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isCloseConfirmModalOpen = _useState2[0],
+      setIsCloseConfirmModalOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isDirty = _useState4[0],
+      setIsDirty = _useState4[1];
+
+  var iframeEl = (0, _react.useRef)(null);
+  var messageListenerEventHandler = (0, _react.useRef)(function (e) {});
+  var unloadEventHandler = (0, _react.useRef)(function (e) {});
+  var intl = (0, _reactIntlNext.useIntl)();
+  var addFlag = props.addFlag,
+      teamCentralBaseUrl = props.teamCentralBaseUrl,
+      analytics = props.analytics,
+      analyticsSource = props.analyticsSource,
+      onClose = props.onClose,
+      testId = props.testId;
+  var shouldBlockTransition = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    e.returnValue = intl.formatMessage(_messages.default.unsavedKudosWarning);
+  }, [intl]);
+  var sendAnalytic = (0, _react.useCallback)(function (action, options) {
+    if (analytics && analyticsSource) {// TODO analytics(`${analyticsSource}.${action}`, options);
+    }
+  }, [analytics, analyticsSource]);
+  var closeDrawer = (0, _react.useCallback)(function () {
+    setIsDirty(false);
+    setIsCloseConfirmModalOpen(false);
+    onClose();
+  }, [onClose]);
+
+  var closeWarningModal = function closeWarningModal() {
+    setIsCloseConfirmModalOpen(false);
+  };
+
+  var messageListener = (0, _react.useCallback)(function (event) {
+    if (!props.isOpen) {
+      return;
+    }
+
+    if (String(event.data).startsWith('kudos-created-')) {
+      var uuid = String(event.data).replace(/^(kudos-created-)/, '');
+      closeDrawer();
+      sendAnalytic('created', {
+        id: 'createKudos'
+      });
+      addFlag && addFlag({
+        title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.kudosCreatedFlag),
+        id: "kudosCreatedFlag-".concat(uuid),
+        description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.default.kudosCreatedDescriptionFlag, {
+          values: {
+            a: function a(s) {
+              return /*#__PURE__*/_react.default.createElement("a", {
+                href: "".concat(teamCentralBaseUrl, "/people/kudos/").concat(uuid)
+              }, s);
+            }
+          }
+        })),
+        icon: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)
+      });
+    } else if (event.data === 'dirty') {
+      setIsDirty(true);
+    } else if (event.data === 'close') {
+      closeDrawer();
+    }
+  }, [props.isOpen, addFlag, teamCentralBaseUrl, sendAnalytic, closeDrawer]);
+  (0, _react.useEffect)(function () {
+    window.removeEventListener('message', messageListenerEventHandler.current);
+    messageListenerEventHandler.current = messageListener;
+    window.addEventListener('message', messageListenerEventHandler.current, false);
+    return function () {
+      window.removeEventListener('message', messageListenerEventHandler.current);
+    };
+  }, [messageListener]);
+  (0, _react.useEffect)(function () {
+    window.removeEventListener('beforeunload', unloadEventHandler.current);
+
+    if (isDirty) {
+      unloadEventHandler.current = shouldBlockTransition;
+      window.addEventListener('beforeunload', unloadEventHandler.current, false);
+    }
+
+    return function () {
+      window.removeEventListener('beforeunload', unloadEventHandler.current);
+    };
+  }, [isDirty, shouldBlockTransition]);
+
+  var sendCancelAnalytic = function sendCancelAnalytic() {
+    sendAnalytic('cancelled', {
+      id: 'createKudos'
+    }); // props.analytics.pushTrackEvent({
+    //   source: props.analyticsSource,
+    //   actionSubject: 'createKudos',
+    //   action: 'cancelled',
+    // });
+  };
+
+  var handleCloseDrawerClickedFunc = function handleCloseDrawerClickedFunc() {
+    if (!isDirty) {
+      sendCancelAnalytic();
+      closeDrawer();
+      return;
+    }
+
+    setIsCloseConfirmModalOpen(true);
+  };
+
+  var handleCloseDrawerClickedFuncRef = (0, _react.useRef)(handleCloseDrawerClickedFunc);
+  (0, _react.useEffect)(function () {
+    handleCloseDrawerClickedFuncRef.current = handleCloseDrawerClickedFunc; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDirty]);
+
+  var renderIframe = function renderIframe() {
+    return /*#__PURE__*/_react.default.createElement("iframe", {
+      src: giveKudosUrl,
+      ref: iframeEl,
+      width: "100%",
+      height: "100%",
+      frameBorder: "0",
+      allow: "camera;microphone"
+    });
+  };
+
+  var handleCloseDrawerClicked = function handleCloseDrawerClicked() {
+    handleCloseDrawerClickedFuncRef.current();
+  };
+
+  var renderSidebar = function renderSidebar() {
+    return /*#__PURE__*/_react.default.createElement(_styled.SidebarContainer, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      onClick: handleCloseDrawerClicked
+    }, /*#__PURE__*/_react.default.createElement(_arrowLeft.default, {
+      label: "Close drawer"
+    })));
+  };
+
+  var renderDrawer = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_drawer.default, {
+      width: "full",
+      isOpen: props.isOpen,
+      onClose: handleCloseDrawerClicked // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+      ,
+      overrides: {
+        Content: {
+          component: renderIframe
+        },
+        Sidebar: {
+          component: renderSidebar
+        }
+      }
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_props$recipient = props.recipient) === null || _props$recipient === void 0 ? void 0 : _props$recipient.recipientId, props.isOpen]);
+  var recipientParam = props.recipient ? "&type=".concat(props.recipient.type, "&recipientId=").concat(props.recipient.recipientId) : '';
+  var giveKudosUrl = "".concat(props.teamCentralBaseUrl, "/give-kudos?cloudId=").concat(props.cloudId).concat(recipientParam, "&unsavedMessage=").concat(intl.formatMessage(_messages.default.unsavedKudosWarning));
+  return /*#__PURE__*/_react.default.createElement(GiveKudosDrawerWrapper, {
+    "data-testid": testId
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isCloseConfirmModalOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: closeWarningModal,
+    width: "small"
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, "Confirm Close")), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarning)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "subtle",
+    onClick: closeWarningModal,
+    autoFocus: true
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarningCancelButton)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "primary",
+    onClick: function onClick() {
+      sendCancelAnalytic();
+      closeDrawer();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.unsavedKudosWarningCloseButton))))), renderDrawer);
+};
+
+exports.GiveKudosLauncher = GiveKudosLauncher;
+var _default = GiveKudosLauncher;
+exports.default = _default;

package/dist/cjs/ui/GiveKudosLauncher/styled.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SidebarContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+var SidebarContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  margin: 16px 0 0 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  > Button {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    background: 0;\n    border-radius: 50%;\n    line-height: 1;\n  }\n"])));
+
+exports.SidebarContainer = SidebarContainer;

package/dist/cjs/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/give-kudos",
+	"version": "0.2.0",
+	"sideEffects": false
+}

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+import GiveKudosLauncher from './ui/GiveKudosLauncher';
+export { GiveKudosLauncher };

package/dist/es2019/messages.js

@@ -0,0 +1,34 @@
+import { defineMessages } from 'react-intl-next';
+const messages = defineMessages({
+  giveKudosButton: {
+    id: 'team-central.give-kudos.button',
+    defaultMessage: 'Give kudos',
+    description: 'Title for the button to give a kudos'
+  },
+  kudosCreatedFlag: {
+    id: 'team-central.give-kudos.created.title.flag',
+    defaultMessage: 'Kudos created',
+    description: 'Title text for kudos creation flag.'
+  },
+  kudosCreatedDescriptionFlag: {
+    id: 'team-central.give-kudos.created.description.flag',
+    defaultMessage: 'Your kudos has been sent. <a>View kudos</a>',
+    description: 'Description text for the kudos created flag. This includes a link to view the newly created kudos.'
+  },
+  unsavedKudosWarning: {
+    id: 'team-central.give-kudos.unsaved.warning',
+    defaultMessage: 'Changes that you made will not be saved.',
+    description: 'Shown when the user tries to navigate away from the kudos creation screen with unsaved changes.'
+  },
+  unsavedKudosWarningCancelButton: {
+    id: 'team-central.give-kudos.unsaved.warning.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button that cancels closing the create kudos drawer.'
+  },
+  unsavedKudosWarningCloseButton: {
+    id: 'team-central.give-kudos.unsaved.warning.close',
+    defaultMessage: 'Close',
+    description: 'Button that closes the warning modal and closes the drawer.'
+  }
+});
+export default messages;

package/dist/es2019/types.js

@@ -0,0 +1,6 @@
+export let KudosType;
+
+(function (KudosType) {
+  KudosType["INDIVIDUAL"] = "individual";
+  KudosType["TEAM"] = "team";
+})(KudosType || (KudosType = {}));

package/dist/es2019/ui/GiveKudosLauncher/index.js

@@ -0,0 +1,184 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import styled from 'styled-components';
+import Button from '@atlaskit/button/standard-button';
+import Drawer from '@atlaskit/drawer';
+import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import messages from '../../messages';
+import { SidebarContainer } from './styled';
+const GiveKudosDrawerWrapper = styled.span`
+  > Drawer > iframe {
+    border: 0;
+  }
+`;
+export const GiveKudosLauncher = props => {
+  var _props$recipient;
+
+  const [isCloseConfirmModalOpen, setIsCloseConfirmModalOpen] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
+  const iframeEl = useRef(null);
+  const messageListenerEventHandler = useRef(e => {});
+  const unloadEventHandler = useRef(e => {});
+  const intl = useIntl();
+  const {
+    addFlag,
+    teamCentralBaseUrl,
+    analytics,
+    analyticsSource,
+    onClose,
+    testId
+  } = props;
+  const shouldBlockTransition = useCallback(e => {
+    e.preventDefault();
+    e.returnValue = intl.formatMessage(messages.unsavedKudosWarning);
+  }, [intl]);
+  const sendAnalytic = useCallback((action, options) => {
+    if (analytics && analyticsSource) {// TODO analytics(`${analyticsSource}.${action}`, options);
+    }
+  }, [analytics, analyticsSource]);
+  const closeDrawer = useCallback(() => {
+    setIsDirty(false);
+    setIsCloseConfirmModalOpen(false);
+    onClose();
+  }, [onClose]);
+
+  const closeWarningModal = () => {
+    setIsCloseConfirmModalOpen(false);
+  };
+
+  const messageListener = useCallback(event => {
+    if (!props.isOpen) {
+      return;
+    }
+
+    if (String(event.data).startsWith('kudos-created-')) {
+      const uuid = String(event.data).replace(/^(kudos-created-)/, '');
+      closeDrawer();
+      sendAnalytic('created', {
+        id: 'createKudos'
+      });
+      addFlag && addFlag({
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreatedFlag),
+        id: `kudosCreatedFlag-${uuid}`,
+        description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
+          values: {
+            a: s => /*#__PURE__*/React.createElement("a", {
+              href: `${teamCentralBaseUrl}/people/kudos/${uuid}`
+            }, s)
+          }
+        })),
+        icon: /*#__PURE__*/React.createElement(React.Fragment, null)
+      });
+    } else if (event.data === 'dirty') {
+      setIsDirty(true);
+    } else if (event.data === 'close') {
+      closeDrawer();
+    }
+  }, [props.isOpen, addFlag, teamCentralBaseUrl, sendAnalytic, closeDrawer]);
+  useEffect(() => {
+    window.removeEventListener('message', messageListenerEventHandler.current);
+    messageListenerEventHandler.current = messageListener;
+    window.addEventListener('message', messageListenerEventHandler.current, false);
+    return () => {
+      window.removeEventListener('message', messageListenerEventHandler.current);
+    };
+  }, [messageListener]);
+  useEffect(() => {
+    window.removeEventListener('beforeunload', unloadEventHandler.current);
+
+    if (isDirty) {
+      unloadEventHandler.current = shouldBlockTransition;
+      window.addEventListener('beforeunload', unloadEventHandler.current, false);
+    }
+
+    return () => {
+      window.removeEventListener('beforeunload', unloadEventHandler.current);
+    };
+  }, [isDirty, shouldBlockTransition]);
+
+  const sendCancelAnalytic = () => {
+    sendAnalytic('cancelled', {
+      id: 'createKudos'
+    }); // props.analytics.pushTrackEvent({
+    //   source: props.analyticsSource,
+    //   actionSubject: 'createKudos',
+    //   action: 'cancelled',
+    // });
+  };
+
+  const handleCloseDrawerClickedFunc = () => {
+    if (!isDirty) {
+      sendCancelAnalytic();
+      closeDrawer();
+      return;
+    }
+
+    setIsCloseConfirmModalOpen(true);
+  };
+
+  const handleCloseDrawerClickedFuncRef = useRef(handleCloseDrawerClickedFunc);
+  useEffect(() => {
+    handleCloseDrawerClickedFuncRef.current = handleCloseDrawerClickedFunc; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDirty]);
+
+  const renderIframe = () => {
+    return /*#__PURE__*/React.createElement("iframe", {
+      src: giveKudosUrl,
+      ref: iframeEl,
+      width: "100%",
+      height: "100%",
+      frameBorder: "0",
+      allow: "camera;microphone"
+    });
+  };
+
+  const handleCloseDrawerClicked = () => {
+    handleCloseDrawerClickedFuncRef.current();
+  };
+
+  const renderSidebar = () => {
+    return /*#__PURE__*/React.createElement(SidebarContainer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: handleCloseDrawerClicked
+    }, /*#__PURE__*/React.createElement(ArrowLeft, {
+      label: "Close drawer"
+    })));
+  };
+
+  const renderDrawer = useMemo(() => {
+    return /*#__PURE__*/React.createElement(Drawer, {
+      width: "full",
+      isOpen: props.isOpen,
+      onClose: handleCloseDrawerClicked // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+      ,
+      overrides: {
+        Content: {
+          component: renderIframe
+        },
+        Sidebar: {
+          component: renderSidebar
+        }
+      }
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_props$recipient = props.recipient) === null || _props$recipient === void 0 ? void 0 : _props$recipient.recipientId, props.isOpen]);
+  const recipientParam = props.recipient ? `&type=${props.recipient.type}&recipientId=${props.recipient.recipientId}` : '';
+  const giveKudosUrl = `${props.teamCentralBaseUrl}/give-kudos?cloudId=${props.cloudId}${recipientParam}&unsavedMessage=${intl.formatMessage(messages.unsavedKudosWarning)}`;
+  return /*#__PURE__*/React.createElement(GiveKudosDrawerWrapper, {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(ModalTransition, null, isCloseConfirmModalOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: closeWarningModal,
+    width: "small"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, "Confirm Close")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarning)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: closeWarningModal,
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCancelButton)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: () => {
+      sendCancelAnalytic();
+      closeDrawer();
+    }
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCloseButton))))), renderDrawer);
+};
+export default GiveKudosLauncher;

package/dist/es2019/ui/GiveKudosLauncher/styled.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+export const SidebarContainer = styled.div`
+  position: absolute;
+  margin: 16px 0 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > Button {
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    background: 0;
+    border-radius: 50%;
+    line-height: 1;
+  }
+`;

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/give-kudos",
+	"version": "0.2.0",
+	"sideEffects": false
+}

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+import GiveKudosLauncher from './ui/GiveKudosLauncher';
+export { GiveKudosLauncher };

package/dist/esm/messages.js

@@ -0,0 +1,34 @@
+import { defineMessages } from 'react-intl-next';
+var messages = defineMessages({
+  giveKudosButton: {
+    id: 'team-central.give-kudos.button',
+    defaultMessage: 'Give kudos',
+    description: 'Title for the button to give a kudos'
+  },
+  kudosCreatedFlag: {
+    id: 'team-central.give-kudos.created.title.flag',
+    defaultMessage: 'Kudos created',
+    description: 'Title text for kudos creation flag.'
+  },
+  kudosCreatedDescriptionFlag: {
+    id: 'team-central.give-kudos.created.description.flag',
+    defaultMessage: 'Your kudos has been sent. <a>View kudos</a>',
+    description: 'Description text for the kudos created flag. This includes a link to view the newly created kudos.'
+  },
+  unsavedKudosWarning: {
+    id: 'team-central.give-kudos.unsaved.warning',
+    defaultMessage: 'Changes that you made will not be saved.',
+    description: 'Shown when the user tries to navigate away from the kudos creation screen with unsaved changes.'
+  },
+  unsavedKudosWarningCancelButton: {
+    id: 'team-central.give-kudos.unsaved.warning.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button that cancels closing the create kudos drawer.'
+  },
+  unsavedKudosWarningCloseButton: {
+    id: 'team-central.give-kudos.unsaved.warning.close',
+    defaultMessage: 'Close',
+    description: 'Button that closes the warning modal and closes the drawer.'
+  }
+});
+export default messages;

package/dist/esm/types.js

@@ -0,0 +1,6 @@
+export var KudosType;
+
+(function (KudosType) {
+  KudosType["INDIVIDUAL"] = "individual";
+  KudosType["TEAM"] = "team";
+})(KudosType || (KudosType = {}));

package/dist/esm/ui/GiveKudosLauncher/index.js

@@ -0,0 +1,193 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import styled from 'styled-components';
+import Button from '@atlaskit/button/standard-button';
+import Drawer from '@atlaskit/drawer';
+import ArrowLeft from '@atlaskit/icon/glyph/arrow-left';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import messages from '../../messages';
+import { SidebarContainer } from './styled';
+var GiveKudosDrawerWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  > Drawer > iframe {\n    border: 0;\n  }\n"])));
+export var GiveKudosLauncher = function GiveKudosLauncher(props) {
+  var _props$recipient;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isCloseConfirmModalOpen = _useState2[0],
+      setIsCloseConfirmModalOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isDirty = _useState4[0],
+      setIsDirty = _useState4[1];
+
+  var iframeEl = useRef(null);
+  var messageListenerEventHandler = useRef(function (e) {});
+  var unloadEventHandler = useRef(function (e) {});
+  var intl = useIntl();
+  var addFlag = props.addFlag,
+      teamCentralBaseUrl = props.teamCentralBaseUrl,
+      analytics = props.analytics,
+      analyticsSource = props.analyticsSource,
+      onClose = props.onClose,
+      testId = props.testId;
+  var shouldBlockTransition = useCallback(function (e) {
+    e.preventDefault();
+    e.returnValue = intl.formatMessage(messages.unsavedKudosWarning);
+  }, [intl]);
+  var sendAnalytic = useCallback(function (action, options) {
+    if (analytics && analyticsSource) {// TODO analytics(`${analyticsSource}.${action}`, options);
+    }
+  }, [analytics, analyticsSource]);
+  var closeDrawer = useCallback(function () {
+    setIsDirty(false);
+    setIsCloseConfirmModalOpen(false);
+    onClose();
+  }, [onClose]);
+
+  var closeWarningModal = function closeWarningModal() {
+    setIsCloseConfirmModalOpen(false);
+  };
+
+  var messageListener = useCallback(function (event) {
+    if (!props.isOpen) {
+      return;
+    }
+
+    if (String(event.data).startsWith('kudos-created-')) {
+      var uuid = String(event.data).replace(/^(kudos-created-)/, '');
+      closeDrawer();
+      sendAnalytic('created', {
+        id: 'createKudos'
+      });
+      addFlag && addFlag({
+        title: /*#__PURE__*/React.createElement(FormattedMessage, messages.kudosCreatedFlag),
+        id: "kudosCreatedFlag-".concat(uuid),
+        description: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.kudosCreatedDescriptionFlag, {
+          values: {
+            a: function a(s) {
+              return /*#__PURE__*/React.createElement("a", {
+                href: "".concat(teamCentralBaseUrl, "/people/kudos/").concat(uuid)
+              }, s);
+            }
+          }
+        })),
+        icon: /*#__PURE__*/React.createElement(React.Fragment, null)
+      });
+    } else if (event.data === 'dirty') {
+      setIsDirty(true);
+    } else if (event.data === 'close') {
+      closeDrawer();
+    }
+  }, [props.isOpen, addFlag, teamCentralBaseUrl, sendAnalytic, closeDrawer]);
+  useEffect(function () {
+    window.removeEventListener('message', messageListenerEventHandler.current);
+    messageListenerEventHandler.current = messageListener;
+    window.addEventListener('message', messageListenerEventHandler.current, false);
+    return function () {
+      window.removeEventListener('message', messageListenerEventHandler.current);
+    };
+  }, [messageListener]);
+  useEffect(function () {
+    window.removeEventListener('beforeunload', unloadEventHandler.current);
+
+    if (isDirty) {
+      unloadEventHandler.current = shouldBlockTransition;
+      window.addEventListener('beforeunload', unloadEventHandler.current, false);
+    }
+
+    return function () {
+      window.removeEventListener('beforeunload', unloadEventHandler.current);
+    };
+  }, [isDirty, shouldBlockTransition]);
+
+  var sendCancelAnalytic = function sendCancelAnalytic() {
+    sendAnalytic('cancelled', {
+      id: 'createKudos'
+    }); // props.analytics.pushTrackEvent({
+    //   source: props.analyticsSource,
+    //   actionSubject: 'createKudos',
+    //   action: 'cancelled',
+    // });
+  };
+
+  var handleCloseDrawerClickedFunc = function handleCloseDrawerClickedFunc() {
+    if (!isDirty) {
+      sendCancelAnalytic();
+      closeDrawer();
+      return;
+    }
+
+    setIsCloseConfirmModalOpen(true);
+  };
+
+  var handleCloseDrawerClickedFuncRef = useRef(handleCloseDrawerClickedFunc);
+  useEffect(function () {
+    handleCloseDrawerClickedFuncRef.current = handleCloseDrawerClickedFunc; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDirty]);
+
+  var renderIframe = function renderIframe() {
+    return /*#__PURE__*/React.createElement("iframe", {
+      src: giveKudosUrl,
+      ref: iframeEl,
+      width: "100%",
+      height: "100%",
+      frameBorder: "0",
+      allow: "camera;microphone"
+    });
+  };
+
+  var handleCloseDrawerClicked = function handleCloseDrawerClicked() {
+    handleCloseDrawerClickedFuncRef.current();
+  };
+
+  var renderSidebar = function renderSidebar() {
+    return /*#__PURE__*/React.createElement(SidebarContainer, null, /*#__PURE__*/React.createElement(Button, {
+      onClick: handleCloseDrawerClicked
+    }, /*#__PURE__*/React.createElement(ArrowLeft, {
+      label: "Close drawer"
+    })));
+  };
+
+  var renderDrawer = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Drawer, {
+      width: "full",
+      isOpen: props.isOpen,
+      onClose: handleCloseDrawerClicked // eslint-disable-next-line @atlaskit/design-system/no-deprecated-apis
+      ,
+      overrides: {
+        Content: {
+          component: renderIframe
+        },
+        Sidebar: {
+          component: renderSidebar
+        }
+      }
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [(_props$recipient = props.recipient) === null || _props$recipient === void 0 ? void 0 : _props$recipient.recipientId, props.isOpen]);
+  var recipientParam = props.recipient ? "&type=".concat(props.recipient.type, "&recipientId=").concat(props.recipient.recipientId) : '';
+  var giveKudosUrl = "".concat(props.teamCentralBaseUrl, "/give-kudos?cloudId=").concat(props.cloudId).concat(recipientParam, "&unsavedMessage=").concat(intl.formatMessage(messages.unsavedKudosWarning));
+  return /*#__PURE__*/React.createElement(GiveKudosDrawerWrapper, {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(ModalTransition, null, isCloseConfirmModalOpen && /*#__PURE__*/React.createElement(Modal, {
+    onClose: closeWarningModal,
+    width: "small"
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, "Confirm Close")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarning)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: closeWarningModal,
+    autoFocus: true
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCancelButton)), /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    onClick: function onClick() {
+      sendCancelAnalytic();
+      closeDrawer();
+    }
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.unsavedKudosWarningCloseButton))))), renderDrawer);
+};
+export default GiveKudosLauncher;

package/dist/esm/ui/GiveKudosLauncher/styled.js

@@ -0,0 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import styled from 'styled-components';
+export var SidebarContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  margin: 16px 0 0 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  > Button {\n    padding: 0;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    background: 0;\n    border-radius: 50%;\n    line-height: 1;\n  }\n"])));

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/give-kudos",
+	"version": "0.2.0",
+	"sideEffects": false
+}

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+import GiveKudosLauncher from './ui/GiveKudosLauncher';
+export type { KudosType, KudosRecipient, GiveKudosDrawerProps } from './types';
+export { GiveKudosLauncher };

package/dist/types/messages.d.ts

@@ -0,0 +1,33 @@
+declare const messages: {
+    giveKudosButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    kudosCreatedFlag: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    kudosCreatedDescriptionFlag: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    unsavedKudosWarning: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    unsavedKudosWarningCancelButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    unsavedKudosWarningCloseButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/types/types.d.ts

@@ -0,0 +1,19 @@
+export declare enum KudosType {
+    INDIVIDUAL = "individual",
+    TEAM = "team"
+}
+export interface KudosRecipient {
+    type: KudosType;
+    recipientId: string;
+}
+export interface GiveKudosDrawerProps {
+    testId?: string;
+    isOpen: boolean;
+    onClose: () => void;
+    analytics?: any;
+    analyticsSource: string;
+    recipient?: KudosRecipient;
+    teamCentralBaseUrl: string;
+    cloudId: string;
+    addFlag?: (flag: any) => void;
+}

package/dist/types/ui/GiveKudosLauncher/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GiveKudosDrawerProps } from '../../types';
+export declare const GiveKudosLauncher: (props: GiveKudosDrawerProps) => JSX.Element;
+export default GiveKudosLauncher;

package/dist/types/ui/GiveKudosLauncher/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SidebarContainer: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>>;

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@atlaskit/give-kudos",
+  "version": "0.2.0",
+  "description": "Give Kudos experience ",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Team Central",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "GiveKudos"
+    }
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "lint": "(cd ../../.. && yarn eslint 'packages/team-central/give-kudos/**/*.{ts,tsx}')",
+    "test": "(cd ../../.. && yarn test 'packages/team-central/give-kudos')",
+    "typecheck": "NODE_OPTIONS=--max-old-space-size=4096 tsc --noEmit --project ./tsconfig.json"
+  },
+  "dependencies": {
+    "@atlaskit/button": "^16.3.1",
+    "@atlaskit/drawer": "^7.1.10",
+    "@atlaskit/icon": "^21.10.7",
+    "@atlaskit/modal-dialog": "^12.2.9",
+    "@babel/runtime": "^7.0.0",
+    "react-intl-next": "npm:react-intl@^5.18.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "styled-components": "^3.4.10"
+  },
+  "devDependencies": {
+    "@atlaskit/docs": "*",
+    "@atlaskit/flag": "^14.5.9",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@emotion/core": "^10.0.9",
+    "@testing-library/react": "^8.0.1",
+    "react-dom": "^16.8.0",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "code-structure": [
+        "tangerine-next"
+      ],
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "analytics": [
+        "analytics-next"
+      ],
+      "theming": [
+        "react-context",
+        "tokens"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}