@atlaskit/util-data-test 17.5.5 → 17.5.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/util-data-test
 
+## 17.5.7
+
+### Patch Changes
+
+- [`588c8a3e413`](https://bitbucket.org/atlassian/atlassian-frontend/commits/588c8a3e413) - Update mocks to include interface fetchByEmojiId
+- Updated dependencies
+
+## 17.5.6
+
+### Patch Changes
+
+- [`12e166e12ee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/12e166e12ee) - Updated user picker team data to demonstrate a hover effect on the custom icon. New example component added for custom icon.
+
 ## 17.5.5
 
 ### Patch Changes

package/dist/cjs/emoji/mock-non-uploading-emoji-resource.js

@@ -123,6 +123,19 @@ var MockNonUploadingEmojiResource = /*#__PURE__*/function (_AbstractResource) {
       var emoji = this.emojiRepository.findByShortName(shortName);
       return this.promiseBuilder(emoji, 'findByShortName');
     }
+  }, {
+    key: "fetchByEmojiId",
+    value: function fetchByEmojiId(emojiId, optimistic) {
+      var id = emojiId.id,
+          shortName = emojiId.shortName;
+
+      if (id) {
+        var emoji = this.emojiRepository.findById(id);
+        return this.promiseBuilder(emoji, 'fetchByEmojiId');
+      }
+
+      return this.emojiRepository.findByShortName(shortName);
+    }
   }, {
     key: "findByEmojiId",
     value: function findByEmojiId(emojiId) {

package/dist/cjs/user-picker/ChevronRight.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+/** @jsx jsx */
+var wrapper = (0, _core.css)({
+  display: 'flex'
+});
+
+var _default = function _default() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMouseHovered = _useState2[0],
+      setHoverState = _useState2[1];
+
+  var onMouseEnter = (0, _react.useCallback)(function () {
+    return setHoverState(true);
+  }, [setHoverState]);
+  var onMouseLeave = (0, _react.useCallback)(function () {
+    return setHoverState(false);
+  }, [setHoverState]);
+  return (0, _core.jsx)("div", {
+    css: wrapper,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, (0, _core.jsx)(_chevronRight.default, {
+    testId: "chevron-right-icon",
+    label: "chevron right",
+    size: "large",
+    primaryColor: (0, _tokens.token)('color.text.subtlest', isMouseHovered ? _colors.N200 : _colors.N50)
+  }));
+};
+
+exports.default = _default;

package/dist/cjs/user-picker/user-picker-team-data.js

@@ -9,7 +9,7 @@ exports.userPickerTeamData = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+var _ChevronRight = _interopRequireDefault(require("./ChevronRight"));
 
 var userPickerTeamData = [{
   id: 'team-custom-icon',
@@ -17,10 +17,7 @@ var userPickerTeamData = [{
   type: 'team',
   fixed: false,
   description: 'This team has a custom icon',
-  lozenge: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-    label: "chevron right",
-    size: "large"
-  })
+  lozenge: /*#__PURE__*/_react.default.createElement(_ChevronRight.default, null)
 }, {
   id: 'team-custom-icon-and-byline',
   name: 'Team with custom icon and byline',
@@ -28,9 +25,6 @@ var userPickerTeamData = [{
   fixed: false,
   description: 'This team has a custom icon and byline which is not reliant on memberCount and includesYou props',
   byline: 'Select team members',
-  lozenge: /*#__PURE__*/_react.default.createElement(_chevronRight.default, {
-    label: "chevron right",
-    size: "large"
-  })
+  lozenge: /*#__PURE__*/_react.default.createElement(_ChevronRight.default, null)
 }];
 exports.userPickerTeamData = userPickerTeamData;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/util-data-test",
-	"version": "17.5.5"
+	"version": "17.5.7"
 }

package/dist/es2019/emoji/mock-non-uploading-emoji-resource.js

@@ -57,6 +57,20 @@ export class MockNonUploadingEmojiResource extends AbstractResource {
     return this.promiseBuilder(emoji, 'findByShortName');
   }
 
+  fetchByEmojiId(emojiId, optimistic) {
+    const {
+      id,
+      shortName
+    } = emojiId;
+
+    if (id) {
+      const emoji = this.emojiRepository.findById(id);
+      return this.promiseBuilder(emoji, 'fetchByEmojiId');
+    }
+
+    return this.emojiRepository.findByShortName(shortName);
+  }
+
   findByEmojiId(emojiId) {
     const {
       id,

package/dist/es2019/user-picker/ChevronRight.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import { N50, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+const wrapper = css({
+  display: 'flex'
+});
+export default (() => {
+  const [isMouseHovered, setHoverState] = useState(false);
+  const onMouseEnter = useCallback(() => setHoverState(true), [setHoverState]);
+  const onMouseLeave = useCallback(() => setHoverState(false), [setHoverState]);
+  return jsx("div", {
+    css: wrapper,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, jsx(ChevronRightIcon, {
+    testId: "chevron-right-icon",
+    label: "chevron right",
+    size: "large",
+    primaryColor: token('color.text.subtlest', isMouseHovered ? N200 : N50)
+  }));
+});

package/dist/es2019/user-picker/user-picker-team-data.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import ChevronRight from './ChevronRight';
 export const userPickerTeamData = [{
   id: 'team-custom-icon',
   name: 'Team with custom icon',
   type: 'team',
   fixed: false,
   description: 'This team has a custom icon',
-  lozenge: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-    label: "chevron right",
-    size: "large"
-  })
+  lozenge: /*#__PURE__*/React.createElement(ChevronRight, null)
 }, {
   id: 'team-custom-icon-and-byline',
   name: 'Team with custom icon and byline',
@@ -17,8 +14,5 @@ export const userPickerTeamData = [{
   fixed: false,
   description: 'This team has a custom icon and byline which is not reliant on memberCount and includesYou props',
   byline: 'Select team members',
-  lozenge: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-    label: "chevron right",
-    size: "large"
-  })
+  lozenge: /*#__PURE__*/React.createElement(ChevronRight, null)
 }];

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/util-data-test",
-	"version": "17.5.5"
+	"version": "17.5.7"
 }

package/dist/esm/emoji/mock-non-uploading-emoji-resource.js

@@ -108,6 +108,19 @@ export var MockNonUploadingEmojiResource = /*#__PURE__*/function (_AbstractResou
       var emoji = this.emojiRepository.findByShortName(shortName);
       return this.promiseBuilder(emoji, 'findByShortName');
     }
+  }, {
+    key: "fetchByEmojiId",
+    value: function fetchByEmojiId(emojiId, optimistic) {
+      var id = emojiId.id,
+          shortName = emojiId.shortName;
+
+      if (id) {
+        var emoji = this.emojiRepository.findById(id);
+        return this.promiseBuilder(emoji, 'fetchByEmojiId');
+      }
+
+      return this.emojiRepository.findByShortName(shortName);
+    }
   }, {
     key: "findByEmojiId",
     value: function findByEmojiId(emojiId) {

package/dist/esm/user-picker/ChevronRight.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { useCallback, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import { N50, N200 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
+var wrapper = css({
+  display: 'flex'
+});
+export default (function () {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMouseHovered = _useState2[0],
+      setHoverState = _useState2[1];
+
+  var onMouseEnter = useCallback(function () {
+    return setHoverState(true);
+  }, [setHoverState]);
+  var onMouseLeave = useCallback(function () {
+    return setHoverState(false);
+  }, [setHoverState]);
+  return jsx("div", {
+    css: wrapper,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, jsx(ChevronRightIcon, {
+    testId: "chevron-right-icon",
+    label: "chevron right",
+    size: "large",
+    primaryColor: token('color.text.subtlest', isMouseHovered ? N200 : N50)
+  }));
+});

package/dist/esm/user-picker/user-picker-team-data.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import ChevronRight from './ChevronRight';
 export var userPickerTeamData = [{
   id: 'team-custom-icon',
   name: 'Team with custom icon',
   type: 'team',
   fixed: false,
   description: 'This team has a custom icon',
-  lozenge: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-    label: "chevron right",
-    size: "large"
-  })
+  lozenge: /*#__PURE__*/React.createElement(ChevronRight, null)
 }, {
   id: 'team-custom-icon-and-byline',
   name: 'Team with custom icon and byline',
@@ -17,8 +14,5 @@ export var userPickerTeamData = [{
   fixed: false,
   description: 'This team has a custom icon and byline which is not reliant on memberCount and includesYou props',
   byline: 'Select team members',
-  lozenge: /*#__PURE__*/React.createElement(ChevronRightIcon, {
-    label: "chevron right",
-    size: "large"
-  })
+  lozenge: /*#__PURE__*/React.createElement(ChevronRight, null)
 }];

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/util-data-test",
-	"version": "17.5.5"
+	"version": "17.5.7"
 }

package/dist/types/emoji/mock-non-uploading-emoji-resource.d.ts

@@ -16,6 +16,7 @@ export declare class MockNonUploadingEmojiResource extends AbstractResource<stri
     getCurrentUser(): OptionalUser;
     filter(query?: string, options?: SearchOptions): void;
     findByShortName(shortName: string): Promise<OptionalEmojiDescription>;
+    fetchByEmojiId(emojiId: EmojiId, optimistic: boolean): Promise<OptionalEmojiDescription> | OptionalEmojiDescription;
     findByEmojiId(emojiId: EmojiId): Promise<OptionalEmojiDescription> | OptionalEmojiDescription;
     findById(id: string): Promise<OptionalEmojiDescription>;
     findInCategory(categoryId: CategoryId): Promise<EmojiDescription[]>;

package/dist/types/user-picker/ChevronRight.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/dist/types-ts4.0/emoji/mock-non-uploading-emoji-resource.d.ts

@@ -16,6 +16,7 @@ export declare class MockNonUploadingEmojiResource extends AbstractResource<stri
     getCurrentUser(): OptionalUser;
     filter(query?: string, options?: SearchOptions): void;
     findByShortName(shortName: string): Promise<OptionalEmojiDescription>;
+    fetchByEmojiId(emojiId: EmojiId, optimistic: boolean): Promise<OptionalEmojiDescription> | OptionalEmojiDescription;
     findByEmojiId(emojiId: EmojiId): Promise<OptionalEmojiDescription> | OptionalEmojiDescription;
     findById(id: string): Promise<OptionalEmojiDescription>;
     findInCategory(categoryId: CategoryId): Promise<EmojiDescription[]>;

package/dist/types-ts4.0/user-picker/ChevronRight.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;

package/package.json

@@ -7,7 +7,7 @@
     }
   },
   "name": "@atlaskit/util-data-test",
-  "version": "17.5.5",
+  "version": "17.5.7",
   "description": "Shared test and story data",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -75,14 +75,17 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/emoji": "^65.2.0",
+    "@atlaskit/emoji": "^66.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/profilecard": "^17.2.0",
     "@atlaskit/task-decision": "^17.5.0",
+    "@atlaskit/theme": "^12.2.1",
+    "@atlaskit/tokens": "^0.10.22",
     "@atlaskit/user-picker": "^9.4.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
+    "@emotion/core": "^10.0.9",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "uuid": "^3.1.0"