@atlaskit/teams-public 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/common/assets/ConfluenceIcon.svg +22 -0
  3. package/dist/cjs/common/assets/JiraIcon.svg +22 -0
  4. package/dist/cjs/common/utils/get-container-properties.compiled.css +2 -0
  5. package/dist/cjs/common/utils/get-container-properties.js +28 -17
  6. package/dist/cjs/ui/team-containers/add-container-card/index.compiled.css +1 -0
  7. package/dist/cjs/ui/team-containers/add-container-card/index.js +10 -6
  8. package/dist/cjs/ui/team-containers/linked-container-card/index.compiled.css +1 -1
  9. package/dist/cjs/ui/team-containers/linked-container-card/index.js +31 -12
  10. package/dist/es2019/common/assets/ConfluenceIcon.svg +22 -0
  11. package/dist/es2019/common/assets/JiraIcon.svg +22 -0
  12. package/dist/es2019/common/utils/get-container-properties.compiled.css +2 -0
  13. package/dist/es2019/common/utils/get-container-properties.js +28 -17
  14. package/dist/es2019/ui/team-containers/add-container-card/index.compiled.css +1 -0
  15. package/dist/es2019/ui/team-containers/add-container-card/index.js +12 -6
  16. package/dist/es2019/ui/team-containers/linked-container-card/index.compiled.css +1 -1
  17. package/dist/es2019/ui/team-containers/linked-container-card/index.js +32 -12
  18. package/dist/esm/common/assets/ConfluenceIcon.svg +22 -0
  19. package/dist/esm/common/assets/JiraIcon.svg +22 -0
  20. package/dist/esm/common/utils/get-container-properties.compiled.css +2 -0
  21. package/dist/esm/common/utils/get-container-properties.js +28 -17
  22. package/dist/esm/ui/team-containers/add-container-card/index.compiled.css +1 -0
  23. package/dist/esm/ui/team-containers/add-container-card/index.js +10 -6
  24. package/dist/esm/ui/team-containers/linked-container-card/index.compiled.css +1 -1
  25. package/dist/esm/ui/team-containers/linked-container-card/index.js +31 -12
  26. package/package.json +9 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/teams-public
2
2
 
3
+ ## 0.11.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#126660](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126660)
8
+ [`cd95e98ae0372`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd95e98ae0372) -
9
+ [ux] Add tooltip for disconnect button
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 0.10.1
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 0.10.0
4
22
 
5
23
  ### Minor Changes
package/dist/cjs/common/assets/ConfluenceIcon.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill="#1868DB"
4
+ d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"
5
+ />
6
+ <g clipPath="url(#a)">
7
+ <g clipPath="url(#b)">
8
+ <path
9
+ fill="#fff"
10
+ d="M15.19 12.14c-3.498-1.692-4.52-1.945-5.994-1.945-1.729 0-3.202.72-4.519 2.741l-.216.33c-.177.273-.216.37-.216.487s.059.213.275.35l2.22 1.38a.57.57 0 0 0 .315.116c.118 0 .196-.058.314-.233l.354-.544c.55-.836 1.041-1.108 1.67-1.108.55 0 1.198.155 2.004.544l2.319 1.089c.236.116.491.058.609-.214l1.1-2.41c.118-.273.04-.448-.236-.584M4.99 7.881c3.498 1.691 4.52 1.944 5.994 1.944 1.729 0 3.202-.72 4.519-2.741l.216-.33c.177-.273.216-.37.216-.486 0-.117-.059-.214-.275-.35l-2.22-1.38a.57.57 0 0 0-.315-.117c-.118 0-.196.058-.314.233l-.354.544c-.55.836-1.041 1.108-1.67 1.108-.55 0-1.199-.155-2.004-.544L6.465 4.675c-.236-.117-.491-.059-.609.213l-1.1 2.41c-.118.273-.04.448.235.584"
11
+ />
12
+ </g>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="a">
16
+ <path fill="#fff" d="M1.5 1.5h17v17h-17z" />
17
+ </clipPath>
18
+ <clipPath id="b">
19
+ <path fill="#fff" d="M4.245 4.422h11.69V15.6H4.246z" />
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/dist/cjs/common/assets/JiraIcon.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill="#1868DB"
4
+ d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"
5
+ />
6
+ <g clipPath="url(#a)">
7
+ <g clipPath="url(#b)">
8
+ <path
9
+ fill="#fff"
10
+ d="M7.517 12.891h-1.11c-1.673 0-2.874-1.025-2.874-2.525H9.5c.309 0 .509.22.509.53V16.9c-1.492 0-2.492-1.208-2.492-2.892zm2.947-2.983h-1.11C7.681 9.908 6.48 8.9 6.48 7.4h5.966c.31 0 .528.202.528.513v6.003c-1.492 0-2.51-1.208-2.51-2.892zm2.965-2.965h-1.11c-1.673 0-2.874-1.025-2.874-2.526h5.966c.31 0 .51.22.51.512v6.004c-1.492 0-2.492-1.208-2.492-2.892z"
11
+ />
12
+ </g>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="a">
16
+ <path fill="#fff" d="M2 2h16v16H2z" />
17
+ </clipPath>
18
+ <clipPath id="b">
19
+ <path fill="#fff" d="M3.533 4.417H15.92V16.9H3.533z" />
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/dist/cjs/common/utils/get-container-properties.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._1bsb1crf{width:9pt}
2
+ ._4t3i1crf{height:9pt}
package/dist/cjs/common/utils/get-container-properties.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* get-container-properties.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,38 +6,46 @@ Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.messages = exports.getContainerProperties = void 0;
9
+ require("./get-container-properties.compiled.css");
10
+ var _runtime = require("@compiled/react/runtime");
8
11
  var _react = _interopRequireDefault(require("react"));
9
12
  var _reactIntlNext = require("react-intl-next");
10
- var _logo = require("@atlaskit/logo");
13
+ var _image = _interopRequireDefault(require("@atlaskit/image"));
14
+ var _compiled = require("@atlaskit/primitives/compiled");
15
+ var _ConfluenceIcon = _interopRequireDefault(require("../assets/ConfluenceIcon.svg"));
16
+ var _JiraIcon = _interopRequireDefault(require("../assets/JiraIcon.svg"));
17
+ var styles = {
18
+ iconWrapper: "_1bsb1crf _4t3i1crf"
19
+ };
11
20
  var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
12
21
  addConfluenceContainerTitle: {
13
22
  id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title.non-final',
14
- defaultMessage: 'Add Confluence space',
23
+ defaultMessage: 'Add space',
15
24
  description: 'Title of the card to add a Confluence space to a team'
16
25
  },
17
26
  confluenceContainerDescription: {
18
27
  id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-description.non-final',
19
- defaultMessage: 'Confluence space',
28
+ defaultMessage: 'Confluence',
20
29
  description: 'Description of the card to add a Confluence space to a team'
21
30
  },
22
31
  addJiraProjectTitle: {
23
32
  id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-title.non-final',
24
- defaultMessage: 'Add Jira project',
33
+ defaultMessage: 'Add project',
25
34
  description: 'Title of the card to add a Jira project to a team'
26
35
  },
27
36
  jiraProjectDescription: {
28
37
  id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-description.non-final',
29
- defaultMessage: 'Jira project',
38
+ defaultMessage: 'Jira',
30
39
  description: 'Description of the card to add a Jira project to a team'
31
40
  },
32
41
  addLoomSpaceTitle: {
33
42
  id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-title.non-final',
34
- defaultMessage: 'Add Loom space',
43
+ defaultMessage: 'Add space',
35
44
  description: 'Title of the card to add a Loom space to a team'
36
45
  },
37
46
  loomSpaceDescription: {
38
47
  id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description.non-final',
39
- defaultMessage: 'Loom space',
48
+ defaultMessage: 'Loom',
40
49
  description: 'Description of the card to add a Loom space to a team'
41
50
  },
42
51
  projectContainerText: {
@@ -55,22 +64,24 @@ var getContainerProperties = exports.getContainerProperties = function getContai
55
64
  case 'ConfluenceSpace':
56
65
  return {
57
66
  description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.confluenceContainerDescription),
58
- icon: /*#__PURE__*/_react.default.createElement(_logo.ConfluenceIcon, {
59
- appearance: "brand",
60
- label: "",
61
- size: "xsmall"
62
- }),
67
+ icon: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
68
+ xcss: styles.iconWrapper
69
+ }, /*#__PURE__*/_react.default.createElement(_image.default, {
70
+ src: _ConfluenceIcon.default,
71
+ alt: "confluence-project"
72
+ })),
63
73
  title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addConfluenceContainerTitle),
64
74
  containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.spaceContainerText)
65
75
  };
66
76
  case 'JiraProject':
67
77
  return {
68
78
  description: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.jiraProjectDescription),
69
- icon: /*#__PURE__*/_react.default.createElement(_logo.JiraIcon, {
70
- appearance: "brand",
71
- label: "",
72
- size: "xsmall"
73
- }),
79
+ icon: /*#__PURE__*/_react.default.createElement(_compiled.Box, {
80
+ xcss: styles.iconWrapper
81
+ }, /*#__PURE__*/_react.default.createElement(_image.default, {
82
+ src: _JiraIcon.default,
83
+ alt: "jira-project"
84
+ })),
74
85
  title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.addJiraProjectTitle),
75
86
  containerTypeText: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messages.projectContainerText)
76
87
  };
package/dist/cjs/ui/team-containers/add-container-card/index.compiled.css CHANGED
@@ -10,4 +10,5 @@
10
10
  ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
11
11
  ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
12
12
  ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
13
+ ._d0altlke:hover{cursor:pointer}
13
14
  ._ksodnqa1:hover{outline-style:solid}
package/dist/cjs/ui/team-containers/add-container-card/index.js CHANGED
@@ -19,11 +19,12 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
19
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
20
  var styles = {
21
21
  card: "_4cvr1h6o _1bsb1osq",
22
- container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
22
+ container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _d0altlke",
23
23
  iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
24
24
  };
25
25
  var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
26
- var children = _ref.children;
26
+ var children = _ref.children,
27
+ onClick = _ref.onClick;
27
28
  var _useState = (0, _react.useState)(false),
28
29
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
29
30
  hovered = _useState2[0],
@@ -38,7 +39,8 @@ var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
38
39
  backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.sunken',
39
40
  xcss: styles.container,
40
41
  onMouseEnter: handleMouseEnter,
41
- onMouseLeave: handleMouseLeave
42
+ onMouseLeave: handleMouseLeave,
43
+ onClick: onClick
42
44
  }, children);
43
45
  };
44
46
  var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref2) {
@@ -48,7 +50,9 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
48
50
  description = _getContainerProperti.description,
49
51
  icon = _getContainerProperti.icon,
50
52
  title = _getContainerProperti.title;
51
- return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, null, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
53
+ return /*#__PURE__*/_react.default.createElement(AddContainerCardWrapper, {
54
+ onClick: onAddAContainerClick
55
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
52
56
  space: "space.100",
53
57
  xcss: styles.card
54
58
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
@@ -57,10 +61,10 @@ var AddContainerCard = exports.AddContainerCard = function AddContainerCard(_ref
57
61
  label: "Add a container",
58
62
  appearance: "subtle",
59
63
  icon: _add.default,
60
- spacing: "compact",
61
64
  testId: "add-icon",
62
65
  onClick: function onClick(e) {
63
- return onAddAContainerClick(e);
66
+ onAddAContainerClick(e);
67
+ e.stopPropagation();
64
68
  }
65
69
  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
66
70
  maxLines: 1,
package/dist/cjs/ui/team-containers/linked-container-card/index.compiled.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
2
+ ._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
3
3
  ._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
4
4
  ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
5
5
  ._18u01wug{margin-left:auto}
package/dist/cjs/ui/team-containers/linked-container-card/index.js CHANGED
@@ -11,18 +11,20 @@ require("./index.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
13
  var _react = _interopRequireWildcard(require("react"));
14
+ var _reactIntlNext = require("react-intl-next");
14
15
  var _analyticsNext = require("@atlaskit/analytics-next");
16
+ var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
15
17
  var _new = require("@atlaskit/button/new");
16
18
  var _cross = _interopRequireDefault(require("@atlaskit/icon/utility/cross"));
17
- var _image = _interopRequireDefault(require("@atlaskit/image"));
18
19
  var _link = _interopRequireDefault(require("@atlaskit/link"));
19
20
  var _compiled = require("@atlaskit/primitives/compiled");
21
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
20
22
  var _analytics = require("../../../common/utils/analytics");
21
23
  var _getContainerProperties = require("../../../common/utils/get-container-properties");
22
24
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
23
25
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
24
26
  var styles = {
25
- container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
27
+ container: "_2rkoop52 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
26
28
  card: "_4cvr1h6o _1bsb1osq",
27
29
  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
28
30
  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug"
@@ -65,11 +67,14 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
65
67
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
66
68
  var _getContainerProperti = (0, _getContainerProperties.getContainerProperties)(containerType),
67
69
  description = _getContainerProperti.description,
68
- icon = _getContainerProperti.icon;
70
+ icon = _getContainerProperti.icon,
71
+ containerTypeText = _getContainerProperti.containerTypeText;
69
72
  var _useState3 = (0, _react.useState)(false),
70
73
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
71
74
  showCloseIcon = _useState4[0],
72
75
  setShowCloseIcon = _useState4[1];
76
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
77
+ formatMessage = _useIntl.formatMessage;
73
78
  return /*#__PURE__*/_react.default.createElement(LinkedCardWrapper, {
74
79
  href: link || '#',
75
80
  handleMouseEnter: function handleMouseEnter() {
@@ -81,23 +86,30 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
81
86
  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
82
87
  space: "space.100",
83
88
  xcss: styles.card
84
- }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
85
- xcss: styles.iconWrapper
86
- }, /*#__PURE__*/_react.default.createElement(_image.default, {
89
+ }, /*#__PURE__*/_react.default.createElement(_avatar.default, {
90
+ appearance: "square",
91
+ size: "medium",
87
92
  src: containerIcon,
88
- alt: "",
89
93
  testId: "linked-container-icon"
90
- })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
94
+ }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
91
95
  maxLines: 1,
92
96
  weight: "medium",
93
97
  color: "color.text"
94
98
  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
95
99
  gap: "space.050"
96
- }, icon, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
100
+ }, icon, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
101
+ space: "space.050"
102
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
97
103
  size: "small",
98
104
  color: "color.text.subtle"
99
- }, description))), showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
105
+ }, description), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
106
+ size: "small",
107
+ color: "color.text.subtle"
108
+ }, containerTypeText)))), showCloseIcon && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
100
109
  xcss: styles.crossIconWrapper
110
+ }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
111
+ content: formatMessage(messages.disconnectTooltip),
112
+ position: "top"
101
113
  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
102
114
  label: "disconnect the container ".concat(title),
103
115
  appearance: "subtle",
@@ -112,5 +124,12 @@ var LinkedContainerCard = exports.LinkedContainerCard = function LinkedContainer
112
124
  actionSubjectId: 'containerUnlinkButton'
113
125
  });
114
126
  }
115
- }))));
116
- };
127
+ })))));
128
+ };
129
+ var messages = (0, _reactIntlNext.defineMessages)({
130
+ disconnectTooltip: {
131
+ id: 'ptc-directory.team-containers.disconnect-button.tooltip',
132
+ defaultMessage: 'Disconnect',
133
+ description: 'Tooltip for the disconnect button'
134
+ }
135
+ });
package/dist/es2019/common/assets/ConfluenceIcon.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill="#1868DB"
4
+ d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"
5
+ />
6
+ <g clipPath="url(#a)">
7
+ <g clipPath="url(#b)">
8
+ <path
9
+ fill="#fff"
10
+ d="M15.19 12.14c-3.498-1.692-4.52-1.945-5.994-1.945-1.729 0-3.202.72-4.519 2.741l-.216.33c-.177.273-.216.37-.216.487s.059.213.275.35l2.22 1.38a.57.57 0 0 0 .315.116c.118 0 .196-.058.314-.233l.354-.544c.55-.836 1.041-1.108 1.67-1.108.55 0 1.198.155 2.004.544l2.319 1.089c.236.116.491.058.609-.214l1.1-2.41c.118-.273.04-.448-.236-.584M4.99 7.881c3.498 1.691 4.52 1.944 5.994 1.944 1.729 0 3.202-.72 4.519-2.741l.216-.33c.177-.273.216-.37.216-.486 0-.117-.059-.214-.275-.35l-2.22-1.38a.57.57 0 0 0-.315-.117c-.118 0-.196.058-.314.233l-.354.544c-.55.836-1.041 1.108-1.67 1.108-.55 0-1.199-.155-2.004-.544L6.465 4.675c-.236-.117-.491-.059-.609.213l-1.1 2.41c-.118.273-.04.448.235.584"
11
+ />
12
+ </g>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="a">
16
+ <path fill="#fff" d="M1.5 1.5h17v17h-17z" />
17
+ </clipPath>
18
+ <clipPath id="b">
19
+ <path fill="#fff" d="M4.245 4.422h11.69V15.6H4.246z" />
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/dist/es2019/common/assets/JiraIcon.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill="#1868DB"
4
+ d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"
5
+ />
6
+ <g clipPath="url(#a)">
7
+ <g clipPath="url(#b)">
8
+ <path
9
+ fill="#fff"
10
+ d="M7.517 12.891h-1.11c-1.673 0-2.874-1.025-2.874-2.525H9.5c.309 0 .509.22.509.53V16.9c-1.492 0-2.492-1.208-2.492-2.892zm2.947-2.983h-1.11C7.681 9.908 6.48 8.9 6.48 7.4h5.966c.31 0 .528.202.528.513v6.003c-1.492 0-2.51-1.208-2.51-2.892zm2.965-2.965h-1.11c-1.673 0-2.874-1.025-2.874-2.526h5.966c.31 0 .51.22.51.512v6.004c-1.492 0-2.492-1.208-2.492-2.892z"
11
+ />
12
+ </g>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="a">
16
+ <path fill="#fff" d="M2 2h16v16H2z" />
17
+ </clipPath>
18
+ <clipPath id="b">
19
+ <path fill="#fff" d="M3.533 4.417H15.92V16.9H3.533z" />
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/dist/es2019/common/utils/get-container-properties.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._1bsb1crf{width:9pt}
2
+ ._4t3i1crf{height:9pt}
package/dist/es2019/common/utils/get-container-properties.js CHANGED
@@ -1,35 +1,44 @@
1
+ /* get-container-properties.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./get-container-properties.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
2
5
  import { defineMessages, FormattedMessage } from 'react-intl-next';
3
- import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
6
+ import Image from '@atlaskit/image';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
+ import ConfluenceIcon from '../assets/ConfluenceIcon.svg';
9
+ import JiraIcon from '../assets/JiraIcon.svg';
10
+ const styles = {
11
+ iconWrapper: "_1bsb1crf _4t3i1crf"
12
+ };
4
13
  export const messages = defineMessages({
5
14
  addConfluenceContainerTitle: {
6
15
  id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title.non-final',
7
- defaultMessage: 'Add Confluence space',
16
+ defaultMessage: 'Add space',
8
17
  description: 'Title of the card to add a Confluence space to a team'
9
18
  },
10
19
  confluenceContainerDescription: {
11
20
  id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-description.non-final',
12
- defaultMessage: 'Confluence space',
21
+ defaultMessage: 'Confluence',
13
22
  description: 'Description of the card to add a Confluence space to a team'
14
23
  },
15
24
  addJiraProjectTitle: {
16
25
  id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-title.non-final',
17
- defaultMessage: 'Add Jira project',
26
+ defaultMessage: 'Add project',
18
27
  description: 'Title of the card to add a Jira project to a team'
19
28
  },
20
29
  jiraProjectDescription: {
21
30
  id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-description.non-final',
22
- defaultMessage: 'Jira project',
31
+ defaultMessage: 'Jira',
23
32
  description: 'Description of the card to add a Jira project to a team'
24
33
  },
25
34
  addLoomSpaceTitle: {
26
35
  id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-title.non-final',
27
- defaultMessage: 'Add Loom space',
36
+ defaultMessage: 'Add space',
28
37
  description: 'Title of the card to add a Loom space to a team'
29
38
  },
30
39
  loomSpaceDescription: {
31
40
  id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description.non-final',
32
- defaultMessage: 'Loom space',
41
+ defaultMessage: 'Loom',
33
42
  description: 'Description of the card to add a Loom space to a team'
34
43
  },
35
44
  projectContainerText: {
@@ -48,22 +57,24 @@ export const getContainerProperties = containerType => {
48
57
  case 'ConfluenceSpace':
49
58
  return {
50
59
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
51
- icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
52
- appearance: "brand",
53
- label: "",
54
- size: "xsmall"
55
- }),
60
+ icon: /*#__PURE__*/React.createElement(Box, {
61
+ xcss: styles.iconWrapper
62
+ }, /*#__PURE__*/React.createElement(Image, {
63
+ src: ConfluenceIcon,
64
+ alt: "confluence-project"
65
+ })),
56
66
  title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addConfluenceContainerTitle),
57
67
  containerTypeText: /*#__PURE__*/React.createElement(FormattedMessage, messages.spaceContainerText)
58
68
  };
59
69
  case 'JiraProject':
60
70
  return {
61
71
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
62
- icon: /*#__PURE__*/React.createElement(JiraIcon, {
63
- appearance: "brand",
64
- label: "",
65
- size: "xsmall"
66
- }),
72
+ icon: /*#__PURE__*/React.createElement(Box, {
73
+ xcss: styles.iconWrapper
74
+ }, /*#__PURE__*/React.createElement(Image, {
75
+ src: JiraIcon,
76
+ alt: "jira-project"
77
+ })),
67
78
  title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addJiraProjectTitle),
68
79
  containerTypeText: /*#__PURE__*/React.createElement(FormattedMessage, messages.projectContainerText)
69
80
  };
package/dist/es2019/ui/team-containers/add-container-card/index.compiled.css CHANGED
@@ -10,4 +10,5 @@
10
10
  ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
11
11
  ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
12
12
  ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
13
+ ._d0altlke:hover{cursor:pointer}
13
14
  ._ksodnqa1:hover{outline-style:solid}
package/dist/es2019/ui/team-containers/add-container-card/index.js CHANGED
@@ -8,11 +8,12 @@ import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
8
8
  import { getContainerProperties } from '../../../common/utils/get-container-properties';
9
9
  const styles = {
10
10
  card: "_4cvr1h6o _1bsb1osq",
11
- container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
11
+ container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _d0altlke",
12
12
  iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
13
13
  };
14
14
  const AddContainerCardWrapper = ({
15
- children
15
+ children,
16
+ onClick
16
17
  }) => {
17
18
  const [hovered, setHovered] = useState(false);
18
19
  const handleMouseEnter = () => setHovered(true);
@@ -21,7 +22,8 @@ const AddContainerCardWrapper = ({
21
22
  backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.sunken',
22
23
  xcss: styles.container,
23
24
  onMouseEnter: handleMouseEnter,
24
- onMouseLeave: handleMouseLeave
25
+ onMouseLeave: handleMouseLeave,
26
+ onClick: onClick
25
27
  }, children);
26
28
  };
27
29
  export const AddContainerCard = ({
@@ -33,7 +35,9 @@ export const AddContainerCard = ({
33
35
  icon,
34
36
  title
35
37
  } = getContainerProperties(containerType);
36
- return /*#__PURE__*/React.createElement(AddContainerCardWrapper, null, /*#__PURE__*/React.createElement(Inline, {
38
+ return /*#__PURE__*/React.createElement(AddContainerCardWrapper, {
39
+ onClick: onAddAContainerClick
40
+ }, /*#__PURE__*/React.createElement(Inline, {
37
41
  space: "space.100",
38
42
  xcss: styles.card
39
43
  }, /*#__PURE__*/React.createElement(Box, {
@@ -42,9 +46,11 @@ export const AddContainerCard = ({
42
46
  label: "Add a container",
43
47
  appearance: "subtle",
44
48
  icon: AddIcon,
45
- spacing: "compact",
46
49
  testId: "add-icon",
47
- onClick: e => onAddAContainerClick(e)
50
+ onClick: e => {
51
+ onAddAContainerClick(e);
52
+ e.stopPropagation();
53
+ }
48
54
  })), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
49
55
  maxLines: 1,
50
56
  weight: "medium",
package/dist/es2019/ui/team-containers/linked-container-card/index.compiled.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
2
+ ._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
3
3
  ._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
4
4
  ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
5
5
  ._18u01wug{margin-left:auto}
package/dist/es2019/ui/team-containers/linked-container-card/index.js CHANGED
@@ -2,16 +2,18 @@
2
2
  import "./index.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useState } from 'react';
5
+ import { defineMessages, useIntl } from 'react-intl-next';
5
6
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
7
+ import Avatar from '@atlaskit/avatar';
6
8
  import { IconButton } from '@atlaskit/button/new';
7
9
  import CrossIcon from '@atlaskit/icon/utility/cross';
8
- import Image from '@atlaskit/image';
9
10
  import Link from '@atlaskit/link';
10
11
  import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
12
+ import Tooltip from '@atlaskit/tooltip';
11
13
  import { AnalyticsAction, fireUIEvent } from '../../../common/utils/analytics';
12
14
  import { getContainerProperties } from '../../../common/utils/get-container-properties';
13
15
  const styles = {
14
- container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
16
+ container: "_2rkoop52 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
15
17
  card: "_4cvr1h6o _1bsb1osq",
16
18
  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
17
19
  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug"
@@ -54,9 +56,13 @@ export const LinkedContainerCard = ({
54
56
  } = useAnalyticsEvents();
55
57
  const {
56
58
  description,
57
- icon
59
+ icon,
60
+ containerTypeText
58
61
  } = getContainerProperties(containerType);
59
62
  const [showCloseIcon, setShowCloseIcon] = useState(false);
63
+ const {
64
+ formatMessage
65
+ } = useIntl();
60
66
  return /*#__PURE__*/React.createElement(LinkedCardWrapper, {
61
67
  href: link || '#',
62
68
  handleMouseEnter: () => setShowCloseIcon(true),
@@ -64,23 +70,30 @@ export const LinkedContainerCard = ({
64
70
  }, /*#__PURE__*/React.createElement(Inline, {
65
71
  space: "space.100",
66
72
  xcss: styles.card
67
- }, /*#__PURE__*/React.createElement(Box, {
68
- xcss: styles.iconWrapper
69
- }, /*#__PURE__*/React.createElement(Image, {
73
+ }, /*#__PURE__*/React.createElement(Avatar, {
74
+ appearance: "square",
75
+ size: "medium",
70
76
  src: containerIcon,
71
- alt: "",
72
77
  testId: "linked-container-icon"
73
- })), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
78
+ }), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
74
79
  maxLines: 1,
75
80
  weight: "medium",
76
81
  color: "color.text"
77
82
  }, title), /*#__PURE__*/React.createElement(Flex, {
78
83
  gap: "space.050"
79
- }, icon, /*#__PURE__*/React.createElement(Text, {
84
+ }, icon, /*#__PURE__*/React.createElement(Inline, {
85
+ space: "space.050"
86
+ }, /*#__PURE__*/React.createElement(Text, {
87
+ size: "small",
88
+ color: "color.text.subtle"
89
+ }, description), /*#__PURE__*/React.createElement(Text, {
80
90
  size: "small",
81
91
  color: "color.text.subtle"
82
- }, description))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
92
+ }, containerTypeText)))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
83
93
  xcss: styles.crossIconWrapper
94
+ }, /*#__PURE__*/React.createElement(Tooltip, {
95
+ content: formatMessage(messages.disconnectTooltip),
96
+ position: "top"
84
97
  }, /*#__PURE__*/React.createElement(IconButton, {
85
98
  label: `disconnect the container ${title}`,
86
99
  appearance: "subtle",
@@ -95,5 +108,12 @@ export const LinkedContainerCard = ({
95
108
  actionSubjectId: 'containerUnlinkButton'
96
109
  });
97
110
  }
98
- }))));
99
- };
111
+ })))));
112
+ };
113
+ const messages = defineMessages({
114
+ disconnectTooltip: {
115
+ id: 'ptc-directory.team-containers.disconnect-button.tooltip',
116
+ defaultMessage: 'Disconnect',
117
+ description: 'Tooltip for the disconnect button'
118
+ }
119
+ });
package/dist/esm/common/assets/ConfluenceIcon.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill="#1868DB"
4
+ d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"
5
+ />
6
+ <g clipPath="url(#a)">
7
+ <g clipPath="url(#b)">
8
+ <path
9
+ fill="#fff"
10
+ d="M15.19 12.14c-3.498-1.692-4.52-1.945-5.994-1.945-1.729 0-3.202.72-4.519 2.741l-.216.33c-.177.273-.216.37-.216.487s.059.213.275.35l2.22 1.38a.57.57 0 0 0 .315.116c.118 0 .196-.058.314-.233l.354-.544c.55-.836 1.041-1.108 1.67-1.108.55 0 1.198.155 2.004.544l2.319 1.089c.236.116.491.058.609-.214l1.1-2.41c.118-.273.04-.448-.236-.584M4.99 7.881c3.498 1.691 4.52 1.944 5.994 1.944 1.729 0 3.202-.72 4.519-2.741l.216-.33c.177-.273.216-.37.216-.486 0-.117-.059-.214-.275-.35l-2.22-1.38a.57.57 0 0 0-.315-.117c-.118 0-.196.058-.314.233l-.354.544c-.55.836-1.041 1.108-1.67 1.108-.55 0-1.199-.155-2.004-.544L6.465 4.675c-.236-.117-.491-.059-.609.213l-1.1 2.41c-.118.273-.04.448.235.584"
11
+ />
12
+ </g>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="a">
16
+ <path fill="#fff" d="M1.5 1.5h17v17h-17z" />
17
+ </clipPath>
18
+ <clipPath id="b">
19
+ <path fill="#fff" d="M4.245 4.422h11.69V15.6H4.246z" />
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/dist/esm/common/assets/JiraIcon.svg ADDED
@@ -0,0 +1,22 @@
1
+ <svg height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path
3
+ fill="#1868DB"
4
+ d="M0 4a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4z"
5
+ />
6
+ <g clipPath="url(#a)">
7
+ <g clipPath="url(#b)">
8
+ <path
9
+ fill="#fff"
10
+ d="M7.517 12.891h-1.11c-1.673 0-2.874-1.025-2.874-2.525H9.5c.309 0 .509.22.509.53V16.9c-1.492 0-2.492-1.208-2.492-2.892zm2.947-2.983h-1.11C7.681 9.908 6.48 8.9 6.48 7.4h5.966c.31 0 .528.202.528.513v6.003c-1.492 0-2.51-1.208-2.51-2.892zm2.965-2.965h-1.11c-1.673 0-2.874-1.025-2.874-2.526h5.966c.31 0 .51.22.51.512v6.004c-1.492 0-2.492-1.208-2.492-2.892z"
11
+ />
12
+ </g>
13
+ </g>
14
+ <defs>
15
+ <clipPath id="a">
16
+ <path fill="#fff" d="M2 2h16v16H2z" />
17
+ </clipPath>
18
+ <clipPath id="b">
19
+ <path fill="#fff" d="M3.533 4.417H15.92V16.9H3.533z" />
20
+ </clipPath>
21
+ </defs>
22
+ </svg>
package/dist/esm/common/utils/get-container-properties.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._1bsb1crf{width:9pt}
2
+ ._4t3i1crf{height:9pt}
package/dist/esm/common/utils/get-container-properties.js CHANGED
@@ -1,35 +1,44 @@
1
+ /* get-container-properties.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./get-container-properties.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React from 'react';
2
5
  import { defineMessages, FormattedMessage } from 'react-intl-next';
3
- import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
6
+ import Image from '@atlaskit/image';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
+ import ConfluenceIcon from '../assets/ConfluenceIcon.svg';
9
+ import JiraIcon from '../assets/JiraIcon.svg';
10
+ var styles = {
11
+ iconWrapper: "_1bsb1crf _4t3i1crf"
12
+ };
4
13
  export var messages = defineMessages({
5
14
  addConfluenceContainerTitle: {
6
15
  id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-title.non-final',
7
- defaultMessage: 'Add Confluence space',
16
+ defaultMessage: 'Add space',
8
17
  description: 'Title of the card to add a Confluence space to a team'
9
18
  },
10
19
  confluenceContainerDescription: {
11
20
  id: 'ptc-directory.team-profile-page.team-containers.add-confluence-space-description.non-final',
12
- defaultMessage: 'Confluence space',
21
+ defaultMessage: 'Confluence',
13
22
  description: 'Description of the card to add a Confluence space to a team'
14
23
  },
15
24
  addJiraProjectTitle: {
16
25
  id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-title.non-final',
17
- defaultMessage: 'Add Jira project',
26
+ defaultMessage: 'Add project',
18
27
  description: 'Title of the card to add a Jira project to a team'
19
28
  },
20
29
  jiraProjectDescription: {
21
30
  id: 'ptc-directory.team-profile-page.team-containers.add-jira-project-description.non-final',
22
- defaultMessage: 'Jira project',
31
+ defaultMessage: 'Jira',
23
32
  description: 'Description of the card to add a Jira project to a team'
24
33
  },
25
34
  addLoomSpaceTitle: {
26
35
  id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-title.non-final',
27
- defaultMessage: 'Add Loom space',
36
+ defaultMessage: 'Add space',
28
37
  description: 'Title of the card to add a Loom space to a team'
29
38
  },
30
39
  loomSpaceDescription: {
31
40
  id: 'ptc-directory.team-profile-page.team-containers.add-loom-space-description.non-final',
32
- defaultMessage: 'Loom space',
41
+ defaultMessage: 'Loom',
33
42
  description: 'Description of the card to add a Loom space to a team'
34
43
  },
35
44
  projectContainerText: {
@@ -48,22 +57,24 @@ export var getContainerProperties = function getContainerProperties(containerTyp
48
57
  case 'ConfluenceSpace':
49
58
  return {
50
59
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
51
- icon: /*#__PURE__*/React.createElement(ConfluenceIcon, {
52
- appearance: "brand",
53
- label: "",
54
- size: "xsmall"
55
- }),
60
+ icon: /*#__PURE__*/React.createElement(Box, {
61
+ xcss: styles.iconWrapper
62
+ }, /*#__PURE__*/React.createElement(Image, {
63
+ src: ConfluenceIcon,
64
+ alt: "confluence-project"
65
+ })),
56
66
  title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addConfluenceContainerTitle),
57
67
  containerTypeText: /*#__PURE__*/React.createElement(FormattedMessage, messages.spaceContainerText)
58
68
  };
59
69
  case 'JiraProject':
60
70
  return {
61
71
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
62
- icon: /*#__PURE__*/React.createElement(JiraIcon, {
63
- appearance: "brand",
64
- label: "",
65
- size: "xsmall"
66
- }),
72
+ icon: /*#__PURE__*/React.createElement(Box, {
73
+ xcss: styles.iconWrapper
74
+ }, /*#__PURE__*/React.createElement(Image, {
75
+ src: JiraIcon,
76
+ alt: "jira-project"
77
+ })),
67
78
  title: /*#__PURE__*/React.createElement(FormattedMessage, messages.addJiraProjectTitle),
68
79
  containerTypeText: /*#__PURE__*/React.createElement(FormattedMessage, messages.projectContainerText)
69
80
  };
package/dist/esm/ui/team-containers/add-container-card/index.compiled.css CHANGED
@@ -10,4 +10,5 @@
10
10
  ._syaz131l{color:var(--ds-text-subtlest,#626f86)}
11
11
  ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
12
12
  ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
13
+ ._d0altlke:hover{cursor:pointer}
13
14
  ._ksodnqa1:hover{outline-style:solid}
package/dist/esm/ui/team-containers/add-container-card/index.js CHANGED
@@ -9,11 +9,12 @@ import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
9
9
  import { getContainerProperties } from '../../../common/utils/get-container-properties';
10
10
  var styles = {
11
11
  card: "_4cvr1h6o _1bsb1osq",
12
- container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp",
12
+ container: "_2rkoiti9 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _d0altlke",
13
13
  iconWrapper: "_2rkoiti9 _12y3e4h9 _12jimuej _1qu2gq9o _syaz131l _4cvxmuej _ksodnqa1"
14
14
  };
15
15
  var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
16
- var children = _ref.children;
16
+ var children = _ref.children,
17
+ onClick = _ref.onClick;
17
18
  var _useState = useState(false),
18
19
  _useState2 = _slicedToArray(_useState, 2),
19
20
  hovered = _useState2[0],
@@ -28,7 +29,8 @@ var AddContainerCardWrapper = function AddContainerCardWrapper(_ref) {
28
29
  backgroundColor: hovered ? 'elevation.surface.hovered' : 'elevation.surface.sunken',
29
30
  xcss: styles.container,
30
31
  onMouseEnter: handleMouseEnter,
31
- onMouseLeave: handleMouseLeave
32
+ onMouseLeave: handleMouseLeave,
33
+ onClick: onClick
32
34
  }, children);
33
35
  };
34
36
  export var AddContainerCard = function AddContainerCard(_ref2) {
@@ -38,7 +40,9 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
38
40
  description = _getContainerProperti.description,
39
41
  icon = _getContainerProperti.icon,
40
42
  title = _getContainerProperti.title;
41
- return /*#__PURE__*/React.createElement(AddContainerCardWrapper, null, /*#__PURE__*/React.createElement(Inline, {
43
+ return /*#__PURE__*/React.createElement(AddContainerCardWrapper, {
44
+ onClick: onAddAContainerClick
45
+ }, /*#__PURE__*/React.createElement(Inline, {
42
46
  space: "space.100",
43
47
  xcss: styles.card
44
48
  }, /*#__PURE__*/React.createElement(Box, {
@@ -47,10 +51,10 @@ export var AddContainerCard = function AddContainerCard(_ref2) {
47
51
  label: "Add a container",
48
52
  appearance: "subtle",
49
53
  icon: AddIcon,
50
- spacing: "compact",
51
54
  testId: "add-icon",
52
55
  onClick: function onClick(e) {
53
- return onAddAContainerClick(e);
56
+ onAddAContainerClick(e);
57
+ e.stopPropagation();
54
58
  }
55
59
  })), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
56
60
  maxLines: 1,
package/dist/esm/ui/team-containers/linked-container-card/index.compiled.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
2
+ ._2rkoop52{border-radius:var(--ds-border-radius-100,8px)}
3
3
  ._1h6dz9xs{border-color:var(--ds-border-accent-gray,#758195)}._12jimuej{outline-color:var(--ds-border,#091e4224)}
4
4
  ._12y3e4h9{outline-width:var(--ds-border-width,1px)}
5
5
  ._18u01wug{margin-left:auto}
package/dist/esm/ui/team-containers/linked-container-card/index.js CHANGED
@@ -3,16 +3,18 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  import "./index.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React, { useState } from 'react';
6
+ import { defineMessages, useIntl } from 'react-intl-next';
6
7
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
8
+ import Avatar from '@atlaskit/avatar';
7
9
  import { IconButton } from '@atlaskit/button/new';
8
10
  import CrossIcon from '@atlaskit/icon/utility/cross';
9
- import Image from '@atlaskit/image';
10
11
  import Link from '@atlaskit/link';
11
12
  import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
13
+ import Tooltip from '@atlaskit/tooltip';
12
14
  import { AnalyticsAction, fireUIEvent } from '../../../common/utils/analytics';
13
15
  import { getContainerProperties } from '../../../common/utils/get-container-properties';
14
16
  var styles = {
15
- container: "_2rkoiti9 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
17
+ container: "_2rkoop52 _1h6dz9xs _12y3e4h9 _12jimuej _1qu2nqa1 _ca0qutpp _u5f3utpp _n3tdutpp _19bvutpp _syaz1fxt",
16
18
  card: "_4cvr1h6o _1bsb1osq",
17
19
  iconWrapper: "_1bsbzwfg _4t3izwfg _1ul9zwfg _1tkezwfg",
18
20
  crossIconWrapper: "_1e0c1txw _4cvr1h6o _1bahesu3 _18u01wug"
@@ -55,11 +57,14 @@ export var LinkedContainerCard = function LinkedContainerCard(_ref2) {
55
57
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
56
58
  var _getContainerProperti = getContainerProperties(containerType),
57
59
  description = _getContainerProperti.description,
58
- icon = _getContainerProperti.icon;
60
+ icon = _getContainerProperti.icon,
61
+ containerTypeText = _getContainerProperti.containerTypeText;
59
62
  var _useState3 = useState(false),
60
63
  _useState4 = _slicedToArray(_useState3, 2),
61
64
  showCloseIcon = _useState4[0],
62
65
  setShowCloseIcon = _useState4[1];
66
+ var _useIntl = useIntl(),
67
+ formatMessage = _useIntl.formatMessage;
63
68
  return /*#__PURE__*/React.createElement(LinkedCardWrapper, {
64
69
  href: link || '#',
65
70
  handleMouseEnter: function handleMouseEnter() {
@@ -71,23 +76,30 @@ export var LinkedContainerCard = function LinkedContainerCard(_ref2) {
71
76
  }, /*#__PURE__*/React.createElement(Inline, {
72
77
  space: "space.100",
73
78
  xcss: styles.card
74
- }, /*#__PURE__*/React.createElement(Box, {
75
- xcss: styles.iconWrapper
76
- }, /*#__PURE__*/React.createElement(Image, {
79
+ }, /*#__PURE__*/React.createElement(Avatar, {
80
+ appearance: "square",
81
+ size: "medium",
77
82
  src: containerIcon,
78
- alt: "",
79
83
  testId: "linked-container-icon"
80
- })), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
84
+ }), /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Text, {
81
85
  maxLines: 1,
82
86
  weight: "medium",
83
87
  color: "color.text"
84
88
  }, title), /*#__PURE__*/React.createElement(Flex, {
85
89
  gap: "space.050"
86
- }, icon, /*#__PURE__*/React.createElement(Text, {
90
+ }, icon, /*#__PURE__*/React.createElement(Inline, {
91
+ space: "space.050"
92
+ }, /*#__PURE__*/React.createElement(Text, {
87
93
  size: "small",
88
94
  color: "color.text.subtle"
89
- }, description))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
95
+ }, description), /*#__PURE__*/React.createElement(Text, {
96
+ size: "small",
97
+ color: "color.text.subtle"
98
+ }, containerTypeText)))), showCloseIcon && /*#__PURE__*/React.createElement(Box, {
90
99
  xcss: styles.crossIconWrapper
100
+ }, /*#__PURE__*/React.createElement(Tooltip, {
101
+ content: formatMessage(messages.disconnectTooltip),
102
+ position: "top"
91
103
  }, /*#__PURE__*/React.createElement(IconButton, {
92
104
  label: "disconnect the container ".concat(title),
93
105
  appearance: "subtle",
@@ -102,5 +114,12 @@ export var LinkedContainerCard = function LinkedContainerCard(_ref2) {
102
114
  actionSubjectId: 'containerUnlinkButton'
103
115
  });
104
116
  }
105
- }))));
106
- };
117
+ })))));
118
+ };
119
+ var messages = defineMessages({
120
+ disconnectTooltip: {
121
+ id: 'ptc-directory.team-containers.disconnect-button.tooltip',
122
+ defaultMessage: 'Disconnect',
123
+ description: 'Tooltip for the disconnect button'
124
+ }
125
+ });
package/package.json CHANGED
@@ -30,17 +30,19 @@
30
30
  },
31
31
  "dependencies": {
32
32
  "@atlaskit/analytics-next": "^11.0.0",
33
+ "@atlaskit/avatar": "^25.0.0",
33
34
  "@atlaskit/button": "^21.1.0",
34
35
  "@atlaskit/css": "^0.10.0",
35
36
  "@atlaskit/heading": "^5.1.0",
36
- "@atlaskit/icon": "^24.1.0",
37
+ "@atlaskit/icon": "^25.0.0",
37
38
  "@atlaskit/image": "^2.0.0",
38
39
  "@atlaskit/link": "^3.0.0",
39
40
  "@atlaskit/logo": "^16.0.0",
40
- "@atlaskit/modal-dialog": "^13.0.0",
41
+ "@atlaskit/modal-dialog": "^13.1.0",
41
42
  "@atlaskit/primitives": "^14.1.0",
42
43
  "@atlaskit/theme": "^18.0.0",
43
- "@atlaskit/tokens": "^4.4.0",
44
+ "@atlaskit/tokens": "^4.5.0",
45
+ "@atlaskit/tooltip": "^20.0.0",
44
46
  "@babel/runtime": "^7.0.0",
45
47
  "@compiled/react": "^0.18.2",
46
48
  "graphql": "^15.8.0",
@@ -103,11 +105,14 @@
103
105
  }
104
106
  },
105
107
  "name": "@atlaskit/teams-public",
106
- "version": "0.10.0",
108
+ "version": "0.11.0",
107
109
  "description": "Public components related to teams",
108
110
  "author": "Atlassian Pty Ltd",
109
111
  "license": "Apache-2.0",
110
112
  "publishConfig": {
111
113
  "registry": "https://registry.npmjs.org/"
114
+ },
115
+ "scripts": {
116
+ "ak-postbuild": "ls -d dist/* | xargs -n 1 copyfiles -u 1 -V src/**/*.svg"
112
117
  }
113
118
  }