@atlaskit/reactions 36.6.0 → 36.7.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/reactions
 
+## 36.7.0
+
+### Minor Changes
+
+- [`7fc9148294cc8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7fc9148294cc8) -
+  Render agent and person avatars in the reaction dialog when the actor has agent data.
+
 ## 36.6.0
 
 ### Minor Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _createAndFireEvents = _interopRequireDefault(require("@atlaskit/analytics-n
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 var packageName = "@atlaskit/reactions";
-var packageVersion = "36.5.0";
+var packageVersion = "36.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/AgentReactionAvatar.compiled.css

@@ -0,0 +1,16 @@
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._12l21i6y{margin-inline-end:var(--ds-space-negative-025,-2px)}
+._154if6fq{top:18px}
+._16qsz8ju{box-shadow:0 0 0 1px var(--ds-surface,#fff)}
+._18m915vq{overflow-y:hidden}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1e02f6fq{inset-inline-start:18px}
+._1o9zidpf{flex-shrink:0}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
+._1reo15vq{overflow-x:hidden}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
+._ahbq1i6y{margin-inline-start:var(--ds-space-negative-025,-2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/cjs/components/AgentReactionAvatar.js

@@ -0,0 +1,61 @@
+/* AgentReactionAvatar.tsx generated by @compiled/babel-plugin v3.0.2 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AgentReactionAvatar = void 0;
+require("./AgentReactionAvatar.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _Avatar = _interopRequireDefault(require("@atlaskit/avatar/Avatar"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var agentAvatarStyle = null;
+var personAvatarStyle = null;
+var personAvatarClipStyle = null;
+var personAvatarShiftStyle = null;
+var AgentReactionAvatar = exports.AgentReactionAvatar = function AgentReactionAvatar(_ref) {
+  var _user$profilePicture;
+  var user = _ref.user,
+    agent = _ref.agent,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
+  var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+  var agentAvatar = /*#__PURE__*/React.createElement(_Avatar.default, {
+    appearance: "hexagon",
+    size: "medium",
+    src: agent.avatarUrl,
+    name: agent.name,
+    borderColor: "transparent",
+    label: "",
+    testId: "agent-profile"
+  });
+  var personAvatar = /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _2rko1rr0 _1bsb7vkz _4t3i7vkz"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1pfh1i6y _6rth1i6y _ahbq1i6y _12l21i6y"])
+  }, /*#__PURE__*/React.createElement(_Avatar.default, {
+    size: "xxsmall",
+    src: profile,
+    name: user.displayName,
+    borderColor: "transparent",
+    label: "",
+    testId: "agent-person-profile"
+  })));
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswh2mm _1bsbzwfg _4t3izwfg _1o9zidpf"])
+  }, ProfileCardWrapper && agent.identityAccountId ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+    userId: agent.identityAccountId,
+    isAnonymous: false,
+    canViewProfile: true,
+    position: "left-start"
+  }, agentAvatar) : agentAvatar, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_2rko1rr0 _kqswstnw _154if6fq _1e02f6fq _1bsb7vkz _4t3i7vkz _16qsz8ju"])
+  }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+    userId: user.accountId,
+    isAnonymous: false,
+    canViewProfile: true,
+    position: "left-start"
+  }, personAvatar) : personAvatar));
+};

package/dist/cjs/components/ReactionView.js

@@ -18,6 +18,7 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 var _tabPanel = _interopRequireDefault(require("@atlaskit/tabs/tab-panel"));
 var _i18n = require("../shared/i18n");
+var _AgentReactionAvatar = require("./AgentReactionAvatar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var userListStyle = null;
 var userStyle = null;
@@ -54,7 +55,11 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
     return /*#__PURE__*/React.createElement("li", {
       key: user.id,
       className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _ca0q1b66 _n3td1b66 _19bvidpf _u5f3idpf _24rcpxbi"])
-    }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(_compiled.Box, {
+    }, user.agent ? /*#__PURE__*/React.createElement(_AgentReactionAvatar.AgentReactionAvatar, {
+      user: user,
+      agent: user.agent,
+      ProfileCardWrapper: ProfileCardWrapper
+    }) : ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(_compiled.Box, {
       xcss: styles.profileWrapperStyle
     }, /*#__PURE__*/React.createElement(ProfileCardWrapper, {
       userId: user.accountId,

package/dist/es2019/analytics/index.js

@@ -2,7 +2,7 @@ import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "36.5.0";
+const packageVersion = "36.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/AgentReactionAvatar.compiled.css

@@ -0,0 +1,16 @@
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._12l21i6y{margin-inline-end:var(--ds-space-negative-025,-2px)}
+._154if6fq{top:18px}
+._16qsz8ju{box-shadow:0 0 0 1px var(--ds-surface,#fff)}
+._18m915vq{overflow-y:hidden}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1e02f6fq{inset-inline-start:18px}
+._1o9zidpf{flex-shrink:0}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
+._1reo15vq{overflow-x:hidden}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
+._ahbq1i6y{margin-inline-start:var(--ds-space-negative-025,-2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/es2019/components/AgentReactionAvatar.js

@@ -0,0 +1,53 @@
+/* AgentReactionAvatar.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./AgentReactionAvatar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Avatar from '@atlaskit/avatar/Avatar';
+const agentAvatarStyle = null;
+const personAvatarStyle = null;
+const personAvatarClipStyle = null;
+const personAvatarShiftStyle = null;
+export const AgentReactionAvatar = ({
+  user,
+  agent,
+  ProfileCardWrapper
+}) => {
+  var _user$profilePicture;
+  const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+  const agentAvatar = /*#__PURE__*/React.createElement(Avatar, {
+    appearance: "hexagon",
+    size: "medium",
+    src: agent.avatarUrl,
+    name: agent.name,
+    borderColor: "transparent",
+    label: "",
+    testId: "agent-profile"
+  });
+  const personAvatar = /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1bsb7vkz _4t3i7vkz"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfh1i6y _6rth1i6y _ahbq1i6y _12l21i6y"])
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xxsmall",
+    src: profile,
+    name: user.displayName,
+    borderColor: "transparent",
+    label: "",
+    testId: "agent-person-profile"
+  })));
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswh2mm _1bsbzwfg _4t3izwfg _1o9zidpf"])
+  }, ProfileCardWrapper && agent.identityAccountId ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+    userId: agent.identityAccountId,
+    isAnonymous: false,
+    canViewProfile: true,
+    position: "left-start"
+  }, agentAvatar) : agentAvatar, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1rr0 _kqswstnw _154if6fq _1e02f6fq _1bsb7vkz _4t3i7vkz _16qsz8ju"])
+  }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+    userId: user.accountId,
+    isAnonymous: false,
+    canViewProfile: true,
+    position: "left-start"
+  }, personAvatar) : personAvatar));
+};

package/dist/es2019/components/ReactionView.js

@@ -10,6 +10,7 @@ import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import TabPanel from '@atlaskit/tabs/tab-panel';
 import { messages } from '../shared/i18n';
+import { AgentReactionAvatar } from './AgentReactionAvatar';
 const userListStyle = null;
 const userStyle = null;
 const styles = {
@@ -46,7 +47,11 @@ export const ReactionView = ({
     return /*#__PURE__*/React.createElement("li", {
       key: user.id,
       className: ax(["_1e0c1txw _4cvr1h6o _ca0q1b66 _n3td1b66 _19bvidpf _u5f3idpf _24rcpxbi"])
-    }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(Box, {
+    }, user.agent ? /*#__PURE__*/React.createElement(AgentReactionAvatar, {
+      user: user,
+      agent: user.agent,
+      ProfileCardWrapper: ProfileCardWrapper
+    }) : ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(Box, {
       xcss: styles.profileWrapperStyle
     }, /*#__PURE__*/React.createElement(ProfileCardWrapper, {
       userId: user.accountId,

package/dist/esm/analytics/index.js

@@ -5,7 +5,7 @@ import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-t
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 import createAndFireEvent from '@atlaskit/analytics-next/createAndFireEvents';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "36.5.0";
+var packageVersion = "36.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/AgentReactionAvatar.compiled.css

@@ -0,0 +1,16 @@
+._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}._12l21i6y{margin-inline-end:var(--ds-space-negative-025,-2px)}
+._154if6fq{top:18px}
+._16qsz8ju{box-shadow:0 0 0 1px var(--ds-surface,#fff)}
+._18m915vq{overflow-y:hidden}
+._1bsb7vkz{width:1pc}
+._1bsbzwfg{width:2pc}
+._1e02f6fq{inset-inline-start:18px}
+._1o9zidpf{flex-shrink:0}
+._1pfh1i6y{margin-block-start:var(--ds-space-negative-025,-2px)}
+._1reo15vq{overflow-x:hidden}
+._4t3i7vkz{height:1pc}
+._4t3izwfg{height:2pc}
+._6rth1i6y{margin-block-end:var(--ds-space-negative-025,-2px)}
+._ahbq1i6y{margin-inline-start:var(--ds-space-negative-025,-2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}

package/dist/esm/components/AgentReactionAvatar.js

@@ -0,0 +1,52 @@
+/* AgentReactionAvatar.tsx generated by @compiled/babel-plugin v3.0.2 */
+import "./AgentReactionAvatar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Avatar from '@atlaskit/avatar/Avatar';
+var agentAvatarStyle = null;
+var personAvatarStyle = null;
+var personAvatarClipStyle = null;
+var personAvatarShiftStyle = null;
+export var AgentReactionAvatar = function AgentReactionAvatar(_ref) {
+  var _user$profilePicture;
+  var user = _ref.user,
+    agent = _ref.agent,
+    ProfileCardWrapper = _ref.ProfileCardWrapper;
+  var profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+  var agentAvatar = /*#__PURE__*/React.createElement(Avatar, {
+    appearance: "hexagon",
+    size: "medium",
+    src: agent.avatarUrl,
+    name: agent.name,
+    borderColor: "transparent",
+    label: "",
+    testId: "agent-profile"
+  });
+  var personAvatar = /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _2rko1rr0 _1bsb7vkz _4t3i7vkz"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1pfh1i6y _6rth1i6y _ahbq1i6y _12l21i6y"])
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xxsmall",
+    src: profile,
+    name: user.displayName,
+    borderColor: "transparent",
+    label: "",
+    testId: "agent-person-profile"
+  })));
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswh2mm _1bsbzwfg _4t3izwfg _1o9zidpf"])
+  }, ProfileCardWrapper && agent.identityAccountId ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+    userId: agent.identityAccountId,
+    isAnonymous: false,
+    canViewProfile: true,
+    position: "left-start"
+  }, agentAvatar) : agentAvatar, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_2rko1rr0 _kqswstnw _154if6fq _1e02f6fq _1bsb7vkz _4t3i7vkz _16qsz8ju"])
+  }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+    userId: user.accountId,
+    isAnonymous: false,
+    canViewProfile: true,
+    position: "left-start"
+  }, personAvatar) : personAvatar));
+};

package/dist/esm/components/ReactionView.js

@@ -10,6 +10,7 @@ import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner/spinner';
 import TabPanel from '@atlaskit/tabs/tab-panel';
 import { messages } from '../shared/i18n';
+import { AgentReactionAvatar } from './AgentReactionAvatar';
 var userListStyle = null;
 var userStyle = null;
 var styles = {
@@ -45,7 +46,11 @@ export var ReactionView = function ReactionView(_ref) {
     return /*#__PURE__*/React.createElement("li", {
       key: user.id,
       className: ax(["_1e0c1txw _4cvr1h6o _ca0q1b66 _n3td1b66 _19bvidpf _u5f3idpf _24rcpxbi"])
-    }, ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(Box, {
+    }, user.agent ? /*#__PURE__*/React.createElement(AgentReactionAvatar, {
+      user: user,
+      agent: user.agent,
+      ProfileCardWrapper: ProfileCardWrapper
+    }) : ProfileCardWrapper && user.accountId ? /*#__PURE__*/React.createElement(Box, {
       xcss: styles.profileWrapperStyle
     }, /*#__PURE__*/React.createElement(ProfileCardWrapper, {
       userId: user.accountId,

package/dist/types/components/AgentReactionAvatar.d.ts

@@ -0,0 +1,6 @@
+import { type ProfileCardWrapper, type User } from '../types';
+export declare const AgentReactionAvatar: ({ user, agent, ProfileCardWrapper, }: {
+    agent: NonNullable<User['agent']>;
+    ProfileCardWrapper?: ProfileCardWrapper;
+    user: User;
+}) => JSX.Element;

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

@@ -1,10 +1,10 @@
 export interface User {
     accountId?: string;
-    /**
-     * Agent that reacted with the user
-     */
+    /** Agent identity for a reaction made with a person. */
     agent?: {
         name: string;
+        avatarUrl?: string;
+        identityAccountId?: string;
     };
     /**
      * name of user clicked on the reaction

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "36.6.0",
+	"version": "36.7.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"