@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/esm/MockReactionsClient.js

@@ -0,0 +1,257 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { constants } from './shared';
+export var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
+export var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
+export var getReactionSummary = function getReactionSummary(shortName, count, reacted) {
+  return {
+    ari: ari,
+    containerAri: containerAri,
+    emojiId: constants.DefaultReactionsByShortName.get(shortName).id,
+    count: count,
+    reacted: reacted
+  };
+};
+export var getUser = function getUser(id, displayName) {
+  return {
+    id: id,
+    displayName: displayName
+  };
+};
+
+var getReactionKey = function getReactionKey(containerAri, ari) {
+  return "".concat(containerAri, "|").concat(ari);
+};
+
+var defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
+
+var mockData = _defineProperty({}, getReactionKey(containerAri, ari), [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]);
+/**
+ * Mocked version of the client to fetch user information
+ */
+
+
+export var MockReactionsClient = /*#__PURE__*/function () {
+  function MockReactionsClient() {
+    var _this = this;
+
+    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+
+    _classCallCheck(this, MockReactionsClient);
+
+    _defineProperty(this, "delayPromise", function () {
+      return new Promise(function (resolve) {
+        return window.setTimeout(resolve, _this.delay);
+      });
+    });
+
+    this.delay = delay;
+  }
+
+  _createClass(MockReactionsClient, [{
+    key: "getReactions",
+    value: function () {
+      var _getReactions = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(containerAri, aris) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                return _context.abrupt("return", aris.reduce(function (results, ari) {
+                  var reactionKey = getReactionKey(containerAri, ari);
+                  results[ari] = mockData[reactionKey] || [];
+                  return results;
+                }, {}));
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, this);
+      }));
+
+      function getReactions(_x, _x2) {
+        return _getReactions.apply(this, arguments);
+      }
+
+      return getReactions;
+    }()
+  }, {
+    key: "getDetailedReaction",
+    value: function () {
+      var _getDetailedReaction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(containerAri, ari, emojiId) {
+        var reactionKey, reactionsMockData, reaction, users;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                _context2.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                reactionKey = "".concat(containerAri, "|").concat(ari);
+                reactionsMockData = mockData[reactionKey];
+
+                if (!reactionsMockData) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                reaction = reactionsMockData.find(function (reaction_1) {
+                  return reaction_1.emojiId === emojiId;
+                });
+
+                if (!reaction) {
+                  _context2.next = 9;
+                  break;
+                }
+
+                users = [].concat(defaultUsers).slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
+                return _context2.abrupt("return", _objectSpread(_objectSpread({}, reaction), {}, {
+                  users: users
+                }));
+
+              case 9:
+                return _context2.abrupt("return", {
+                  containerAri: containerAri,
+                  ari: ari,
+                  emojiId: emojiId,
+                  count: 1,
+                  reacted: true,
+                  users: []
+                });
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this);
+      }));
+
+      function getDetailedReaction(_x3, _x4, _x5) {
+        return _getDetailedReaction.apply(this, arguments);
+      }
+
+      return getDetailedReaction;
+    }()
+  }, {
+    key: "addReaction",
+    value: function () {
+      var _addReaction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(containerAri, ari, emojiId) {
+        var reactionKey, found, reactionsMockData;
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                reactionKey = getReactionKey(containerAri, ari);
+                found = false;
+                reactionsMockData = mockData[reactionKey];
+
+                if (reactionsMockData) {
+                  mockData[reactionKey] = reactionsMockData.map(function (reaction) {
+                    if (reaction.emojiId === emojiId) {
+                      found = true;
+                      return _objectSpread(_objectSpread({}, reaction), {}, {
+                        count: reaction.count + 1,
+                        reacted: true
+                      });
+                    }
+
+                    return reaction;
+                  });
+                }
+
+                if (!found) {
+                  mockData[reactionKey] = [].concat(_toConsumableArray(reactionsMockData ? reactionsMockData : []), [{
+                    containerAri: containerAri,
+                    ari: ari,
+                    emojiId: emojiId,
+                    count: 1,
+                    reacted: true
+                  }]);
+                }
+
+                return _context3.abrupt("return", mockData[reactionKey]);
+
+              case 8:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function addReaction(_x6, _x7, _x8) {
+        return _addReaction.apply(this, arguments);
+      }
+
+      return addReaction;
+    }()
+  }, {
+    key: "deleteReaction",
+    value: function () {
+      var _deleteReaction = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(containerAri, ari, emojiId) {
+        var reactionKey;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                _context4.next = 2;
+                return this.delayPromise();
+
+              case 2:
+                reactionKey = getReactionKey(containerAri, ari);
+                mockData[reactionKey] = mockData[reactionKey].map(function (reaction) {
+                  if (reaction.emojiId === emojiId) {
+                    if (reaction.count === 1) {
+                      return undefined;
+                    }
+
+                    return _objectSpread(_objectSpread({}, reaction), {}, {
+                      count: reaction.count - 1,
+                      reacted: false
+                    });
+                  }
+
+                  return reaction;
+                }).filter(function (reaction_1) {
+                  return !!reaction_1;
+                });
+                return _context4.abrupt("return", mockData[reactionKey]);
+
+              case 5:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this);
+      }));
+
+      function deleteReaction(_x9, _x10, _x11) {
+        return _deleteReaction.apply(this, arguments);
+      }
+
+      return deleteReaction;
+    }()
+  }]);
+
+  return MockReactionsClient;
+}();

package/dist/esm/analytics/analytics.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
+import { name as packageName, version as packageVersion } from '../version.json';
+export var createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
+export var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {
+  if (createAnalyticsEvent) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+
+    createAndFireEventInElementsChannel(creator.apply(void 0, args))(createAnalyticsEvent);
+  }
+};
+
+var createPayload = function createPayload(action, actionSubject, eventType, actionSubjectId) {
+  return function () {
+    var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      action: action,
+      actionSubject: actionSubject,
+      eventType: eventType,
+      actionSubjectId: actionSubjectId,
+      attributes: _objectSpread(_objectSpread({}, attributes), {}, {
+        packageName: packageName,
+        packageVersion: packageVersion
+      })
+    };
+  };
+};
+
+var calculateDuration = function calculateDuration(startTime) {
+  return startTime ? Date.now() - startTime : undefined;
+};
+
+var getPreviousState = function getPreviousState(reaction) {
+  if (reaction) {
+    if (reaction.reacted) {
+      return 'existingReacted';
+    }
+
+    return 'existingNotReacted';
+  }
+
+  return 'new';
+};
+
+export var createRestSucceededEvent = function createRestSucceededEvent(actionSubject) {
+  return createPayload('succeeded', actionSubject, OPERATIONAL_EVENT_TYPE)();
+};
+export var createRestFailedEvent = function createRestFailedEvent(actionSubject, errorCode) {
+  return createPayload('failed', actionSubject, OPERATIONAL_EVENT_TYPE)({
+    errorCode: errorCode
+  });
+};
+export var createReactionsRenderedEvent = function createReactionsRenderedEvent(startTime) {
+  return createPayload('rendered', 'reactionView', OPERATIONAL_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createPickerButtonClickedEvent = function createPickerButtonClickedEvent(reactionEmojiCount) {
+  return createPayload('clicked', 'reactionPickerButton', UI_EVENT_TYPE)({
+    reactionEmojiCount: reactionEmojiCount
+  });
+};
+export var createPickerCancelledEvent = function createPickerCancelledEvent(startTime) {
+  return createPayload('cancelled', 'reactionPicker', UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createPickerMoreClickedEvent = function createPickerMoreClickedEvent(startTime) {
+  return createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'more')({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createReactionSelectionEvent = function createReactionSelectionEvent(source, emojiId, reaction, startTime) {
+  return createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'emoji')({
+    duration: calculateDuration(startTime),
+    source: source,
+    previousState: getPreviousState(reaction),
+    emojiId: emojiId
+  });
+};
+export var createReactionHoveredEvent = function createReactionHoveredEvent(startTime) {
+  return createPayload('hovered', 'existingReaction', UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createReactionClickedEvent = function createReactionClickedEvent(added, emojiId) {
+  return createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
+    added: added,
+    emojiId: emojiId
+  });
+};

package/dist/esm/analytics/index.js

@@ -1,100 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import { createAndFireEvent } from '@atlaskit/analytics-next';
-import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
-import { name as packageName, version as packageVersion } from '../version.json';
+import * as _Analytics from './analytics';
+export { _Analytics as Analytics };
 import * as _UFO from './ufo';
-export { _UFO as UFO };
-export var createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
-export var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {
-  if (createAnalyticsEvent) {
-    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      args[_key - 2] = arguments[_key];
-    }
-
-    createAndFireEventInElementsChannel(creator.apply(void 0, args))(createAnalyticsEvent);
-  }
-};
-
-var createPayload = function createPayload(action, actionSubject, eventType, actionSubjectId) {
-  return function (attributes) {
-    return {
-      action: action,
-      actionSubject: actionSubject,
-      eventType: eventType,
-      actionSubjectId: actionSubjectId,
-      attributes: _objectSpread(_objectSpread({}, attributes), {}, {
-        packageName: packageName,
-        packageVersion: packageVersion
-      })
-    };
-  };
-};
-
-var calculateDuration = function calculateDuration(startTime) {
-  return startTime ? Date.now() - startTime : undefined;
-};
-
-var getPreviousState = function getPreviousState(reaction) {
-  if (reaction) {
-    if (reaction.reacted) {
-      return 'existingReacted';
-    }
-
-    return 'existingNotReacted';
-  }
-
-  return 'new';
-};
-
-export var createRestSucceededEvent = function createRestSucceededEvent(actionSubject) {
-  return createPayload('succeeded', actionSubject, OPERATIONAL_EVENT_TYPE)({});
-};
-export var createRestFailedEvent = function createRestFailedEvent(actionSubject, errorCode) {
-  return createPayload('failed', actionSubject, OPERATIONAL_EVENT_TYPE)({
-    errorCode: errorCode
-  });
-};
-export var createReactionsRenderedEvent = function createReactionsRenderedEvent(startTime) {
-  return createPayload('rendered', 'reactionView', OPERATIONAL_EVENT_TYPE)({
-    duration: calculateDuration(startTime)
-  });
-};
-export var createPickerButtonClickedEvent = function createPickerButtonClickedEvent(reactionEmojiCount) {
-  return createPayload('clicked', 'reactionPickerButton', UI_EVENT_TYPE)({
-    reactionEmojiCount: reactionEmojiCount
-  });
-};
-export var createPickerCancelledEvent = function createPickerCancelledEvent(startTime) {
-  return createPayload('cancelled', 'reactionPicker', UI_EVENT_TYPE)({
-    duration: calculateDuration(startTime)
-  });
-};
-export var createPickerMoreClickedEvent = function createPickerMoreClickedEvent(startTime) {
-  return createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'more')({
-    duration: calculateDuration(startTime)
-  });
-};
-export var createReactionSelectionEvent = function createReactionSelectionEvent(source, emojiId, reaction, startTime) {
-  return createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'emoji')({
-    duration: calculateDuration(startTime),
-    source: source,
-    previousState: getPreviousState(reaction),
-    emojiId: emojiId
-  });
-};
-export var createReactionHoveredEvent = function createReactionHoveredEvent(startTime) {
-  return createPayload('hovered', 'existingReaction', UI_EVENT_TYPE)({
-    duration: calculateDuration(startTime)
-  });
-};
-export var createReactionClickedEvent = function createReactionClickedEvent(added, emojiId) {
-  return createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
-    added: added,
-    emojiId: emojiId
-  });
-};
+export { _UFO as UFO };

package/dist/esm/analytics/ufo.js

@@ -2,7 +2,6 @@ import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, Experi
 import { withSampling } from '@atlaskit/emoji';
 /**
  * Initial experience config object (deferred from @atlaskit/ufo inner types)
- * TODO: Check if possible to add this to exported types from @atlaskit/ufo
  */
 
 /**

package/dist/esm/client/ReactionServiceClient.js

@@ -7,7 +7,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { utils } from '@atlaskit/util-service-support';
+
+/**
+ * Utility class to retrieve/modify all actions on reactions collection
+ */
 export var ReactionServiceClient = /*#__PURE__*/function () {
+  /**
+   * oAuth token
+   */
+
+  /**
+   * API config
+   */
+
+  /**
+   *
+   * @param baseUrl base domain url
+   * @param sessionToken oAuth token for reactions emoji services
+   */
   function ReactionServiceClient(baseUrl, sessionToken) {
     var _this = this;
 
@@ -24,17 +41,18 @@ export var ReactionServiceClient = /*#__PURE__*/function () {
     };
     this.sessionToken = sessionToken;
   }
+  /**
+   * Get http headers for the "fetch" request
+   * @param hasBody
+   */
+
 
   _createClass(ReactionServiceClient, [{
     key: "getHeaders",
     value: function getHeaders() {
-      var hasBody = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
       var headers = {};
       headers['Accept'] = 'application/json';
-
-      if (hasBody) {
-        headers['Content-Type'] = 'application/json';
-      }
+      headers['Content-Type'] = 'application/json';
 
       if (this.sessionToken) {
         headers['Authorization'] = this.sessionToken;
@@ -42,6 +60,12 @@ export var ReactionServiceClient = /*#__PURE__*/function () {
 
       return headers;
     }
+    /**
+     * Send a request to remote service
+     * @param path endpoint api url
+     * @param options Optional custom params
+     */
+
   }, {
     key: "getReactions",
     value: function getReactions(containerAri, aris) {
@@ -64,7 +88,7 @@ export var ReactionServiceClient = /*#__PURE__*/function () {
     key: "getDetailedReaction",
     value: function getDetailedReaction(containerAri, ari, emojiId) {
       var reactionId = "".concat(containerAri, "|").concat(ari, "|").concat(emojiId);
-      var headers = this.getHeaders(false);
+      var headers = this.getHeaders();
       return this.requestService('reactions', {
         queryParams: {
           reactionId: reactionId

package/dist/esm/components/{Counter.js → Counter/Counter.js}

@@ -1,36 +1,31 @@
 /** @jsx jsx */
+import React from 'react';
 import { jsx, css } from '@emotion/core';
-import { N500, B400 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-import React, { memo } from 'react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-export var counterTestId = 'counter-container';
-export var countStyle = css({
-  fontSize: 11,
-  // TODO: nice to have a theme level token for fontSize
-  color: token('color.text.subtlest', N500),
-  overflow: 'hidden',
-  position: 'relative',
-  padding: '4px 8px 4px 0',
-  lineHeight: '14px'
-});
-export var highlightStyle = css({
-  color: token('color.text.selected', B400),
-  fontWeight: 600
-});
-export var containerStyle = css({
-  display: 'flex',
-  flexDirection: 'column'
-});
-export var Counter = /*#__PURE__*/memo(function (_ref) {
+import * as styles from './styles';
+/**
+ * Test id for wrapper div
+ */
+
+export var RENDER_COUNTER_TESTID = 'counter-container';
+/**
+ * Test id for container div
+ */
+
+export var RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
+
+/**
+ * Display reaction count next to the emoji button
+ */
+export var Counter = function Counter(_ref) {
   var _ref$highlight = _ref.highlight,
       highlight = _ref$highlight === void 0 ? false : _ref$highlight,
       _ref$limit = _ref.limit,
-      limit = _ref$limit === void 0 ? 100 : _ref$limit,
+      limit = _ref$limit === void 0 ? 1000 : _ref$limit,
       _ref$overLimitLabel = _ref.overLimitLabel,
-      overLimitLabel = _ref$overLimitLabel === void 0 ? '99+' : _ref$overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? '1k+' : _ref$overLimitLabel,
       className = _ref.className,
       value = _ref.value,
       _ref$animationDuratio = _ref.animationDuration,
@@ -55,10 +50,10 @@ export var Counter = /*#__PURE__*/memo(function (_ref) {
   var increase = previousValue ? previousValue < value : false;
   return jsx("div", {
     className: className,
-    css: countStyle,
-    style: {
+    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    css: [styles.countStyle, {
       width: label.length * 7
-    }
+    }]
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
@@ -66,14 +61,14 @@ export var Counter = /*#__PURE__*/memo(function (_ref) {
   }, function (motion, direction) {
     return jsx("div", {
       ref: motion.ref,
-      css: [containerStyle, css({
+      css: [styles.containerStyle, css({
         position: direction === 'exiting' ? 'absolute' : undefined
       })],
       className: motion.className,
-      "data-testid": counterTestId
+      "data-testid": RENDER_COUNTER_TESTID
     }, jsx("div", {
-      css: highlight && highlightStyle,
+      css: highlight && styles.highlightStyle,
       key: value
     }, label));
   })));
-});
+};

package/dist/esm/components/Counter/index.js

@@ -0,0 +1,3 @@
+export { Counter, RENDER_COUNTER_TESTID, RENDER_COUNTER_WRAPPER_TESTID } from './Counter';
+import * as _styles from './styles';
+export { _styles as styles };

package/dist/esm/components/Counter/styles.js

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { css } from '@emotion/core';
+import { N90, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+export var countStyle = css({
+  fontSize: 11,
+  color: token('color.text.subtlest', N90),
+  overflow: 'hidden',
+  position: 'relative',
+  padding: '4px 8px 4px 0',
+  lineHeight: '14px'
+});
+export var highlightStyle = css({
+  color: token('color.text.selected', B400),
+  fontWeight: 600
+});
+export var containerStyle = css({
+  display: 'flex',
+  flexDirection: 'column'
+});