@atlaskit/util-data-test 17.5.5 → 17.5.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/util-data-test
 
+## 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/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.6"
 }

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.6"
 }

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.6"
 }

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/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.6",
   "description": "Shared test and story data",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -80,9 +80,12 @@
     "@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"