@atlaskit/profilecard 15.7.0 → 15.8.2

package/dist/cjs/mocks/simple-mock-clients.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.simpleProfileClient = exports.simpleMockTeamClient = exports.simpleMockUserClient = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _ProfileCardClient = _interopRequireDefault(require("../client/ProfileCardClient"));
+
+var _TeamProfileCardClient = _interopRequireDefault(require("../client/TeamProfileCardClient"));
+
+var _UserProfileCardClient = _interopRequireDefault(require("../client/UserProfileCardClient"));
+
+var _profileData = _interopRequireDefault(require("./profile-data"));
+
+var _teamData = _interopRequireDefault(require("./team-data"));
+
+var _util = require("./util");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+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; } }
+
+var SimpleMockTeamClient = /*#__PURE__*/function (_TeamProfileCardClien) {
+  (0, _inherits2.default)(SimpleMockTeamClient, _TeamProfileCardClien);
+
+  var _super = _createSuper(SimpleMockTeamClient);
+
+  function SimpleMockTeamClient() {
+    (0, _classCallCheck2.default)(this, SimpleMockTeamClient);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(SimpleMockTeamClient, [{
+    key: "makeRequest",
+    value: function makeRequest(teamId) {
+      var simpleMockTeam = (0, _teamData.default)({
+        members: 5
+      });
+      return Promise.resolve(_objectSpread({
+        teamId: teamId
+      }, simpleMockTeam));
+    }
+  }]);
+  return SimpleMockTeamClient;
+}(_TeamProfileCardClient.default);
+
+var SimpleMockUserClient = /*#__PURE__*/function (_UserProfileCardClien) {
+  (0, _inherits2.default)(SimpleMockUserClient, _UserProfileCardClien);
+
+  var _super2 = _createSuper(SimpleMockUserClient);
+
+  function SimpleMockUserClient() {
+    (0, _classCallCheck2.default)(this, SimpleMockUserClient);
+    return _super2.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(SimpleMockUserClient, [{
+    key: "makeRequest",
+    value: function makeRequest(cloudId, userId) {
+      var profile = _profileData.default[0];
+      var weekday = (0, _util.getWeekday)();
+
+      var data = _objectSpread({}, profile);
+
+      data.remoteTimeString = (0, _util.getTimeString)();
+      data.remoteWeekdayIndex = weekday.index;
+      data.remoteWeekdayString = weekday.string;
+      return Promise.resolve(data);
+    }
+  }]);
+  return SimpleMockUserClient;
+}(_UserProfileCardClient.default);
+
+var args = {
+  cacheSize: 10,
+  maxCacheAge: 0,
+  url: '/graphql/directory'
+};
+var simpleMockUserClient = new SimpleMockUserClient(args);
+exports.simpleMockUserClient = simpleMockUserClient;
+var simpleMockTeamClient = new SimpleMockTeamClient(args);
+exports.simpleMockTeamClient = simpleMockTeamClient;
+var simpleProfileClient = new _ProfileCardClient.default(args, {
+  userClient: simpleMockUserClient,
+  teamClient: simpleMockTeamClient
+});
+exports.simpleProfileClient = simpleProfileClient;

package/dist/cjs/mocks/team-data.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = teamData;
+
+var _sample = _interopRequireDefault(require("lodash/sample"));
+
+var avatarImages = ['data:image/gif;base64,R0lGODdhgACAAPIHAABRzMHT8l6O3o2w6env+zh22P///xRe0CwAAAAAgACAAAAD/wi63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq83CwGDgTA4RA4DBHoBAnADeoh7BQ8HgokGA24Cj4gED3mUBoVsmJmbC5OZe22iepEMh6V+a6UGAQ2poouspacLsZmrap2UswsFpa9sjZnCsLJuBY6IAbrHiQSfbQcCAQED0g8FA9YCznbg4eLj5OVO2zMDvlXKrt8qB3kE61LEg/Qo8ZX4TvrQ2SbaQXvHxB+lPicAiWomBdejaCUEFiPIxOGjAPw04GnFkIiKxYveOFRrBQlLKJKEKDagFohkySwSSRK4NgBbAQE1uS2TCdCKQZdAUaq0ImBn0KN6IIppiTQon6FbqBlt+hBhmm1Tj/LpebVaVkoz1YUrQDZnTbIZzaldy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0uenDcBADs=', 'data:image/gif;base64,R0lGODdhgACAAPIHAACjv2fE1sXp70S2zR+qxJbV4////+r3+SwAAAAAgACAAAAD/wi63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq83BwKD4VAgRAgFB3oCAXAFeoh7Aw8EgokGBW4Bj4gHD3mUBoVsmJmbC5OZe22iepEMh6V+a6UGAg2poouspacLsZmrap2UswsDpa9sjZnCsLJuA46IArrHiQefbQQBAgIF0g8DBdYBznbg4eLj5OVO2zMFvlXKrt8qBHkH61LEg/Qo8ZX4TvrQ2SbaQXvHxB+lPicAiWomBdejaCUEFiPIxOEjAfw04GnFkIiKxYveOFRrBQlLKJKEKDagFohkySwSSR64VgDbgAA1uS2TCdCKQZdAUaq0EmBn0KN6IIppiTQon6FbqBlt+hBhmm1Tj/LpebVaVkoz1YUbQDZnTbIZzaldy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0uenDcBADs=', 'data:image/gif;base64,R0lGODdhgACAAPIHAACHWur18arVxYjDrlarjMnk2v///yeUbSwAAAAAgACAAAAD/wi63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq83CQKDISA4RA4DAXoFBHADeoh7fg4HgokGAm4Ej4gBDwWUeoVsmJkGmwuTnpZsnnqRDIemi2qmBgUNqp6gaa4Dsa6saXmzDQemsGyNmai4mbpqw4kFyAu8lbTCAwUFAtEOeNQDzXbd3t/g4eJMgDPbWMPMLwd5AdxPyq/vJQedilT1jwHXJQSOlfOS5Mt0zgQgT+qiPKO0r98/SgkVuiIUgoC9TBGlLMRIIIagBIuuIGERFdKaRwUH8Dz0dCuLv5CVqg0YQKDmzGkrTTXcwg6mz58Zt7z8SVQfPy6BihINUHAMoJxKEzE96UVl1ErW4AASAJWhgKZ1UhK4ObMm1XFo06pdy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI8tNAAA7', 'data:image/gif;base64,R0lGODdhgACAAPIHAFJCqfDu+LGp2XlqvJGFyGBRsP///9TQ6iwAAAAAgACAAAAD/wi63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq83BweDISAoRAoCAXoHBHACeoh7Aw8FgokGAm4Ej4gBD3mUBoVsmJmbC5OZe22iepEMh6V+a6UGBw2poouspacLsZmrap2UswsDpa9sjZnCsLJuA46IB7rHiQGfbQUEBwcC0g8DAtYEznbg4eLj5OVO2zMCvlXKrt8qBXkB61LEg/Qo8ZX4TvrQ2SbaQXvHxB+lPicAiWomBdejaCUEFiPIxOGjA/w04GnFkIiKxYveOFRrBQlLKJKEKDagFohkySwSSQa4JgDbAAI1uS2TCdCKQZdAUaq0QmBn0KN6IIppiTQon6FbqBlt+hBhmm1Tj/LpebVaVkoz1YUbQDZnTbIZzaldy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0uenDcBADs=', 'data:image/gif;base64,R0lGODdhgACAAPIHAN41Cvzs6vfMxPGgkeRTNeBAG////+lvVywAAAAAgACAAEAD/wi63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+62DMdEA8REDTA+x7uZ1BUIDIdoHDbzkh9H6DG5N1EFpngoO0eRjorrvndOwgHLqD9OC8Jbvf8Lh8Tq/b7/i8fs/v+/+AgYKDhIUrYFgNR2BKho6GBQJgA0UmBYtCRI8RXoienwYBlJukpaanqKmqq6ytrq+wsbKztLW2t7i5uru8vRySjA1VYAG9wFeNCwSIAr7OzzAFX0NtKQTHNqWYVlkhB8dXmqeRoOXmAtWwXdPmSGvQ8PHy8/T19vf4+fr7/P3+/wADChxIsKDBgwgTKlzIsKHDhxAjSpxI4tsMUZUeXPrSzYfXMCvFHIDbkUyXJzEKtglJZ+ukIk8ZcwXh9kDlDJa4LgkQ8E5Cl51RKAodGieIuBbkspEih6TkiQPsQsUsZPOiUxBQmU2l+inLVgsWXaLKWi4AzzRn0AwQEBVREldk28m1SmvjXE8YezlhW5YnTqKAAwseTLiw4cOIEytezLix48eQI0smkQAAOw==', 'data:image/gif;base64,R0lGODdhgACAAPIHAP+ZH/+vUv/Rnf+gMv+9cf/26//////mySwAAAAAgACAAAAD/wi63P4wykmrvTjrzbv/YCiOZGmeaKqubOu+cCzPdG3feK7vfO//wKBwSCwaj8ikcslsOp/QqHRKrVqv2Kx2y+16v+CweEwum8/otHrNbrvf8Lh8Tq83AweDoSAYRAYCBXoHBHACeoh7AQ8DgokGAm4Ej4gFD3mUBoVsmJmbC5OZe22iepEMh6V+a6UGBw2poouspacLsZmrap2UswsBpa9sjZnCsLJuAY6IB7rHiQWfbQMEBwcC0g8BAtYEznbg4eLj5OVO2zMCvlXKrt8qA3kF61LEg/Qo8ZX4TvrQ2SbaQXvHxB+lPicAiWomBdejaCUEFiPIxOGjA/w04GnFkIiKxYveOFRrBQlLKJKEKDagFohkySwSSRa4JgBbAAI1uS2TCdCKQZdAUaq0QmBn0KN6IIppiTQon6FbqBlt+hBhmm1Tj/LpebVaVkoz1YULQDZnTbIZzaldy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0uenDcBADs=', '' // to test invalid img src
+];
+
+var getAvatar = function getAvatar() {
+  return (0, _sample.default)(avatarImages);
+};
+
+var memberNames = ['Kramer Hatfield', 'Schwartz Mclaughlin', 'Nichole Walter', 'Cleveland Rodriquez', 'Hess Stone', 'Lewis Cervantes', 'Abbott Lamb', 'Conner Duncan', 'Bauer Burch', 'Mcbride Haynes', 'Maddy Estes', 'Nikki Villanueva', 'Adam Burks', 'Milly Walters', 'Phoebe Clarkson', 'Samuel Dunlap', 'Naomi Boyer', 'Silas Gomez', 'Josie Lancaster', 'Fred Kirkpatrick', 'Beck Rutledge', 'Rebecca Woods'];
+var members = memberNames.map(function (name, index) {
+  return {
+    id: index.toString(),
+    avatarUrl: getAvatar(),
+    fullName: name
+  };
+});
+var sampleImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABACAMAAACqVYydAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGBQTFRF/zX7+DP73i77uyb8kR78ZhX9PQz+GwX+/jT78jL71Sz7ryT8hRv8WhL9Mwr+EwT+/TT76jD7yyr7pCL8eRn9ThD9KQj+DAL/+jT74i/7wCj8lx/8bBb9Qw3+IAb+BgH/HFKiKQAAAIBJREFUeJztzjkOggAAAEEEORTkFOQS/v9L+u1INDQ7L5ggOOkGIURwhxgSSOHsz6BBgwYNGjRo0OBvgxk84Ak5FPCCEiowaNCgQYMGDRo0eG2whgZa6OANPQzwAYMGDRo0aNCgQYPXBkeYYIYFVvjCBjsYNGjQoEGDBg0a/GvwADIe8BAKQVCtAAAAAElFTkSuQmCC';
+var names = {
+  Short: 'Lemon',
+  Medium: 'The Fat Cats',
+  Long: 'People and Teams Collective Developers',
+  Overlong: "Teamwork Platform's People and Teams Collective Frontend Developer Group"
+};
+var longDescription = 'This is information about the team. They are responsible for all the cool stuff that happens at Acme.';
+var descriptions = {
+  None: '',
+  Short: 'A very cool team!',
+  Medium: 'This is a pretty cool team, that does a lot of work here.',
+  Long: longDescription,
+  Overlong: [longDescription, longDescription].join(' ')
+};
+
+function teamData(_ref) {
+  var _ref$headerImage = _ref.headerImage,
+      headerImage = _ref$headerImage === void 0 ? 'None' : _ref$headerImage,
+      _ref$displayName = _ref.displayName,
+      displayName = _ref$displayName === void 0 ? 'Short' : _ref$displayName,
+      _ref$members = _ref.members,
+      memberCount = _ref$members === void 0 ? 1 : _ref$members,
+      _ref$description = _ref.description,
+      description = _ref$description === void 0 ? 'Long' : _ref$description;
+  return {
+    id: 'team-id',
+    largeHeaderImageUrl: headerImage === 'Picture' ? sampleImage : undefined,
+    displayName: names[displayName] || names.Short,
+    members: members.slice(0, memberCount),
+    description: description ? descriptions[description] : descriptions.Long
+  };
+}

package/dist/cjs/mocks/util.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTimeString = exports.getWeekday = exports.random = void 0;
+
+function padMinutes(minutes) {
+  return minutes < 10 ? "0".concat(minutes) : String(minutes);
+}
+
+var random = function random(int) {
+  return Math.floor(Math.random() * (int + 1));
+};
+
+exports.random = random;
+
+var getWeekday = function getWeekday() {
+  var array = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+  var index = random(6);
+  return {
+    index: index,
+    string: array[index]
+  };
+};
+
+exports.getWeekday = getWeekday;
+
+var getTimeString = function getTimeString() {
+  var hours = random(23);
+  var minutes = random(59);
+  var meridiem = ['am', 'pm'][Math.floor(hours / 12)];
+  return "".concat(hours === 0 ? 12 : hours % 12, ":").concat(padMinutes(minutes)).concat(meridiem);
+};
+
+exports.getTimeString = getTimeString;

package/dist/cjs/styled/Card.js

@@ -15,8 +15,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _elevation = require("@atlaskit/theme/elevation");
-
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
@@ -96,7 +94,7 @@ var CardContainer = _styledComponents.default.div(_templateObject15 || (_templat
     return '';
   }
 
-  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      ", "\n      border-radius: ", "px;\n    "])), _elevation.e200, _constants.borderRadius);
+  return (0, _styledComponents.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n      box-shadow: ", ";\n      border-radius: ", "px;\n    "])), _constants2.boxShadow, _constants.borderRadius);
 });
 
 exports.CardContainer = CardContainer;

package/dist/cjs/styled/Error.js

@@ -17,6 +17,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
@@ -37,6 +39,6 @@ var TeamErrorTitle = _styledComponents.default.p(_templateObject4 || (_templateO
 
 exports.TeamErrorTitle = TeamErrorTitle;
 
-var TeamErrorText = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), _colors.N200, (0, _constants.gridSize)() * 1);
+var TeamErrorText = _styledComponents.default.p(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 1);
 
 exports.TeamErrorText = TeamErrorText;

package/dist/cjs/styled/TeamCard.js

@@ -19,6 +19,8 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _typography = require("@atlaskit/theme/typography");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants2 = require("../styled/constants");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
@@ -34,7 +36,7 @@ exports.CardTriggerWrapper = CardTriggerWrapper;
 var CardWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  width: ", "px;\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 40);
 
 exports.CardWrapper = CardWrapper;
-var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _colors.N20);
+var loadingImage = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.subtleNeutral.resting', _colors.N20));
 var defaultImage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _constants2.teamHeaderBgColor);
 
 var CardHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  background-repeat: no-repeat;\n  background-size: cover;\n  box-sizing: content-box;\n  height: ", "px;\n"])), function (props) {
@@ -59,7 +61,7 @@ var TeamName = _styledComponents.default.h6(_templateObject8 || (_templateObject
 
 exports.TeamName = TeamName;
 
-var MemberCount = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), _colors.N200, (0, _constants.gridSize)() * 0.5);
+var MemberCount = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-top: ", "px;\n"])), (0, _tokens.token)('color.text.lowEmphasis', _colors.N200), (0, _constants.gridSize)() * 0.5);
 
 exports.MemberCount = MemberCount;
 
@@ -75,7 +77,7 @@ var Description = _styledComponents.default.span(_templateObject12 || (_template
 
 exports.Description = Description;
 
-var ActionButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: hsla(0, 100%, 100%, 0.2);\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)());
+var ActionButtons = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% + 8px);\n  display: flex;\n  justify-content: space-between;\n  margin: ", "px -", "px 0 -", "px;\n  background-color: ", ";\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3, (0, _constants.gridSize)(), (0, _tokens.token)('color.background.overlay', 'hsla(0, 100%, 100%, 0.2)'));
 
 exports.ActionButtons = ActionButtons;
 

package/dist/cjs/styled/constants.js

@@ -5,78 +5,85 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.errorTextColor = exports.errorTitleColor = exports.errorIconColor = exports.labelIconColor = exports.labelTextColor = exports.appLabelTextColor = exports.appLabelBgColor = exports.headerTextColorInactive = exports.headerTextColor = exports.headerBgColorDisabledUser = exports.teamHeaderBgColor = exports.headerBgColor = exports.bgColor = void 0;
+exports.boxShadow = exports.errorTextColor = exports.errorTitleColor = exports.errorIconColor = exports.labelIconColor = exports.labelTextColor = exports.appLabelTextColor = exports.appLabelBgColor = exports.headerTextColorInactive = exports.headerTextColor = exports.headerBgColorDisabledUser = exports.teamHeaderBgColor = exports.headerBgColor = exports.bgColor = void 0;
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
+var _tokens = require("@atlaskit/tokens");
+
 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 bgColor = (0, _components.themed)({
-  light: colors.N0,
-  dark: colors.DN50
+  light: (0, _tokens.token)('color.background.overlay', colors.N0),
+  dark: (0, _tokens.token)('color.background.overlay', colors.DN50)
 });
 exports.bgColor = bgColor;
 var headerBgColor = (0, _components.themed)({
-  light: colors.B500,
-  dark: colors.B100
+  light: (0, _tokens.token)('color.background.boldBrand.resting', colors.B500),
+  dark: (0, _tokens.token)('color.background.boldBrand.resting', colors.B100)
 });
 exports.headerBgColor = headerBgColor;
 var teamHeaderBgColor = (0, _components.themed)({
-  light: colors.N50,
-  dark: colors.N50
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N50)
 });
 exports.teamHeaderBgColor = teamHeaderBgColor;
 var headerBgColorDisabledUser = (0, _components.themed)({
-  light: colors.N30,
-  dark: colors.B100
+  light: (0, _tokens.token)('color.background.disabled', colors.N30),
+  dark: (0, _tokens.token)('color.background.disabled', colors.B100)
 });
 exports.headerBgColorDisabledUser = headerBgColorDisabledUser;
 var headerTextColor = (0, _components.themed)({
-  light: colors.N0,
-  dark: colors.N0
+  light: (0, _tokens.token)('color.text.onBold', colors.N0),
+  dark: (0, _tokens.token)('color.text.onBold', colors.N0)
 });
 exports.headerTextColor = headerTextColor;
 var headerTextColorInactive = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.N0
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N0)
 });
 exports.headerTextColorInactive = headerTextColorInactive;
 var appLabelBgColor = (0, _components.themed)({
-  light: colors.N20,
-  dark: colors.N20
+  light: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
+  dark: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20)
 });
 exports.appLabelBgColor = appLabelBgColor;
 var appLabelTextColor = (0, _components.themed)({
-  light: colors.N500,
-  dark: colors.N500
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N500),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.N500)
 });
 exports.appLabelTextColor = appLabelTextColor;
 var labelTextColor = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN900
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN900)
 });
 exports.labelTextColor = labelTextColor;
 var labelIconColor = (0, _components.themed)({
-  light: colors.N60,
-  dark: colors.DN100
+  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N60),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN100)
 });
 exports.labelIconColor = labelIconColor;
 var errorIconColor = (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
+  light: (0, _tokens.token)('color.text.disabled', colors.N90),
+  dark: (0, _tokens.token)('color.text.disabled', colors.DN90)
 });
 exports.errorIconColor = errorIconColor;
 var errorTitleColor = (0, _components.themed)({
-  light: colors.N800,
-  dark: colors.DN800
+  light: (0, _tokens.token)('color.text.highEmphasis', colors.N800),
+  dark: (0, _tokens.token)('color.text.highEmphasis', colors.DN800)
 });
 exports.errorTitleColor = errorTitleColor;
 var errorTextColor = (0, _components.themed)({
-  light: colors.N90,
-  dark: colors.DN90
+  light: (0, _tokens.token)('color.text.lowEmphasis', colors.N90),
+  dark: (0, _tokens.token)('color.text.lowEmphasis', colors.DN90)
+});
+exports.errorTextColor = errorTextColor;
+var boxShadow = (0, _components.themed)({
+  light: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(colors.N50A, ", 0 0 1px ").concat(colors.N60A)),
+  dark: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(colors.DN50A, ", 0 0 1px ").concat(colors.DN60A))
 });
-exports.errorTextColor = errorTextColor;
+exports.boxShadow = boxShadow;

package/dist/cjs/util/analytics.js

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

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "15.7.0"
+	"version": "15.8.2"
 }

package/dist/es2019/components/Error/ErrorIllustration.js

@@ -1,4 +1,6 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 export const ErrorIllustration = () => {
   return /*#__PURE__*/React.createElement("svg", {
     width: "42",
@@ -10,7 +12,7 @@ export const ErrorIllustration = () => {
     clipPath: "url(#clip0)"
   }, /*#__PURE__*/React.createElement("path", {
     d: "M0.649902 0H163.93V212H0.649902V0Z",
-    fill: "white",
+    fill: token('color.background.overlay', 'white'),
     fillOpacity: "0.01"
   }), /*#__PURE__*/React.createElement("path", {
     d: "M95.4299 74.1603L161.87 189.24C167.71 199.36 160.41 212 148.73 212H15.8499C4.16994 212 -3.13006 199.35 2.70994 189.24L69.1499 74.1603C74.9899 64.0403 89.5899 64.0403 95.4299 74.1603ZM87.8699 157.71L90.7499 113.36C91.0899 108.07 86.8899 103.58 81.5899 103.58C76.2799 103.58 72.0799 108.06 72.4299 113.36L75.3099 157.71C75.5299 161.02 78.2699 163.6 81.5899 163.6C84.8999 163.6 87.6499 161.02 87.8699 157.71ZM72.0299 181.25C72.0299 186.91 76.7899 191.35 82.4199 190.83C87.2699 190.38 91.1499 186.33 91.2499 181.46C91.3599 176.01 86.9399 171.52 81.5199 171.52C76.2899 171.51 72.0299 175.89 72.0299 181.25Z",

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

@@ -7,6 +7,7 @@ import Button from '@atlaskit/button/custom-theme-button';
 import Lozenge from '@atlaskit/lozenge';
 import Spinner from '@atlaskit/spinner';
 import { N0 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { AnalyticsName } from '../../internal/analytics';
 import relativeDate from '../../internal/relative-date';
 import messages from '../../messages';
@@ -234,7 +235,7 @@ export default class Profilecard extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(ProfileImage, null, /*#__PURE__*/React.createElement(Avatar, {
         size: "xlarge",
         src: this.props.status !== 'closed' ? this.props.avatarUrl : undefined,
-        borderColor: N0
+        borderColor: token('color.background.overlay', N0)
       })), /*#__PURE__*/React.createElement(CardContent, null, this.renderCardDetails(), actions ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), actions) : null));
     }
 

package/dist/es2019/i18n/index.js

@@ -4,33 +4,33 @@
  * This file is automatically generated by i18n-tools.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-export { default as en_ZZ } from './en_ZZ';
+export { default as zh } from './zh';
+export { default as zh_TW } from './zh_TW';
 export { default as cs } from './cs';
 export { default as da } from './da';
-export { default as de } from './de';
-export { default as en } from './en';
-export { default as en_GB } from './en_GB';
-export { default as es } from './es';
+export { default as nl } from './nl';
 export { default as et } from './et';
 export { default as fi } from './fi';
 export { default as fr } from './fr';
+export { default as de } from './de';
 export { default as hu } from './hu';
-export { default as is } from './is';
 export { default as it } from './it';
 export { default as ja } from './ja';
 export { default as ko } from './ko';
 export { default as nb } from './nb';
-export { default as nl } from './nl';
 export { default as pl } from './pl';
 export { default as pt_BR } from './pt_BR';
 export { default as pt_PT } from './pt_PT';
-export { default as ro } from './ro';
 export { default as ru } from './ru';
 export { default as sk } from './sk';
+export { default as es } from './es';
 export { default as sv } from './sv';
 export { default as th } from './th';
 export { default as tr } from './tr';
 export { default as uk } from './uk';
 export { default as vi } from './vi';
-export { default as zh } from './zh';
-export { default as zh_TW } from './zh_TW';
+export { default as en_ZZ } from './en_ZZ';
+export { default as en } from './en';
+export { default as en_GB } from './en_GB';
+export { default as is } from './is';
+export { default as ro } from './ro';

package/dist/es2019/mocks/index.js

@@ -0,0 +1,4 @@
+export { default as getMockProfileClient } from './mock-profile-client';
+export { default as getMockTeamClient } from './mock-team-client';
+export { default as profiles } from './profile-data';
+export { simpleMockTeamClient, simpleMockUserClient, simpleProfileClient } from './simple-mock-clients';

package/{mock-helpers/mock-profile-client.ts → dist/es2019/mocks/mock-profile-client.js}

@@ -1,51 +1,49 @@
-import UserProfileCardClient from '../src/client/UserProfileCardClient';
-import { ClientOverrides, ProfileClientOptions } from '../src/types';
-
+import UserProfileCardClient from '../client/UserProfileCardClient';
 import profiles from './profile-data';
 import { getTimeString, getWeekday, random } from './util';
-
-export default function getMockProfileClient(
-  BaseProfileClient: any,
-  modifyResponse: any,
-): any {
+export default function getMockProfileClient(BaseProfileClient, modifyResponse) {
   class MockUserClient extends UserProfileCardClient {
-    makeRequest(cloudId: string, userId: string) {
+    makeRequest(cloudId, userId) {
       const timeout = random(1500) + 500;
       const matchError = userId.match(/^error:([0-9a-zA-Z\-]+)$/);
       const error = matchError && matchError[1];
-
-      return new Promise<any>((resolve, reject) => {
+      return new Promise((resolve, reject) => {
         setTimeout(() => {
           if (error) {
-            return reject({ reason: error });
+            return reject({
+              reason: error
+            });
           }
 
           const userIdAsIndex = parseInt(userId, 10);
           const profile = profiles[userIdAsIndex] || profiles[0];
 
           if (!profile) {
-            return reject({ reason: 'default' });
+            return reject({
+              reason: 'default'
+            });
           }
 
           const weekday = getWeekday();
-          const data: any = { ...profile };
-
+          const data = { ...profile
+          };
           data.remoteTimeString = getTimeString();
           data.remoteWeekdayIndex = weekday.index;
           data.remoteWeekdayString = weekday.string;
-
           return resolve(modifyResponse(data));
         }, timeout);
       });
     }
+
   }
 
   return class MockProfileClient extends BaseProfileClient {
-    constructor(options: ProfileClientOptions, clients: ClientOverrides = {}) {
+    constructor(options, clients = {}) {
       super(options, {
         userClient: new MockUserClient(options),
-        ...clients,
+        ...clients
       });
     }
+
   };
-}
+}

package/{mock-helpers/mock-team-client.ts → dist/es2019/mocks/mock-team-client.js}

@@ -1,17 +1,12 @@
-import TeamProfileCardClient from '../src/client/TeamProfileCardClient';
-import { Team } from '../src/types';
-
-export default function getMockTeamClient(data: {
-  team: Team;
-  timeout: number;
-  error: any;
-  errorRate: number;
-}) {
+import TeamProfileCardClient from '../client/TeamProfileCardClient';
+export default function getMockTeamClient(data) {
   return class MockTeamClient extends TeamProfileCardClient {
-    makeRequest(teamId: string): Promise<Team> {
+    makeRequest(teamId) {
       if (!data.timeout) {
         if (data.error && Math.random() < data.errorRate) {
-          return Promise.reject({ reason: data.error });
+          return Promise.reject({
+            reason: data.error
+          });
         }
 
         return Promise.resolve(data.team);
@@ -20,12 +15,15 @@ export default function getMockTeamClient(data: {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           if (data.error && Math.random() < data.errorRate) {
-            reject({ reason: data.error });
+            reject({
+              reason: data.error
+            });
           }
 
           return resolve(data.team);
         }, data.timeout);
       });
     }
+
   };
-}
+}