@atlaskit/teams-public 1.0.0 → 1.1.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 (21) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/common/ui/container-icon/index.js +41 -3
  3. package/dist/cjs/common/ui/loom-avatar/main.compiled.css +5 -1
  4. package/dist/cjs/common/ui/loom-avatar/main.js +26 -0
  5. package/dist/cjs/common/utils/get-container-properties.js +59 -22
  6. package/dist/cjs/ui/team-containers/linked-container-card/index.js +1 -1
  7. package/dist/es2019/common/ui/container-icon/index.js +35 -3
  8. package/dist/es2019/common/ui/loom-avatar/main.compiled.css +5 -1
  9. package/dist/es2019/common/ui/loom-avatar/main.js +25 -0
  10. package/dist/es2019/common/utils/get-container-properties.js +44 -6
  11. package/dist/es2019/ui/team-containers/linked-container-card/index.js +1 -1
  12. package/dist/esm/common/ui/container-icon/index.js +39 -3
  13. package/dist/esm/common/ui/loom-avatar/main.compiled.css +5 -1
  14. package/dist/esm/common/ui/loom-avatar/main.js +25 -0
  15. package/dist/esm/common/utils/get-container-properties.js +59 -22
  16. package/dist/esm/ui/team-containers/linked-container-card/index.js +1 -1
  17. package/dist/types/common/ui/loom-avatar/main.d.ts +1 -1
  18. package/dist/types/common/utils/get-container-properties.d.ts +1 -1
  19. package/dist/types-ts4.5/common/ui/loom-avatar/main.d.ts +1 -1
  20. package/dist/types-ts4.5/common/utils/get-container-properties.d.ts +1 -1
  21. package/package.json +6 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/teams-public
2
2
 
3
+ ## 1.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`5ad73d0a4dc97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ad73d0a4dc97) -
8
+ Aligned UI to conform with Team'26 US design drop
9
+
10
+ ### Patch Changes
11
+
12
+ - [`2fee5f9932185`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2fee5f9932185) -
13
+ Migrate examples to use the playground package
14
+
3
15
  ## 1.0.0
4
16
 
5
17
  ### Major Changes
package/dist/cjs/common/ui/container-icon/index.js CHANGED
@@ -2,19 +2,24 @@
2
2
  "use strict";
3
3
 
4
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.ContainerIcon = void 0;
9
10
  require("./index.compiled.css");
10
11
  var _runtime = require("@compiled/react/runtime");
11
- var _react = _interopRequireDefault(require("react"));
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+ var _react = _interopRequireWildcard(require("react"));
12
14
  var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
13
15
  var _new = require("@atlaskit/button/new");
14
16
  var _css = require("@atlaskit/css");
15
17
  var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
19
  var _compiled = require("@atlaskit/primitives/compiled");
20
+ var _tile = _interopRequireDefault(require("@atlaskit/tile"));
17
21
  var _loomAvatar = require("../loom-avatar");
22
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
23
  var styles = {
19
24
  linkIconWrapperSmall: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
20
25
  };
@@ -25,16 +30,33 @@ var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
25
30
  _ref$size = _ref.size,
26
31
  size = _ref$size === void 0 ? 'medium' : _ref$size;
27
32
  var isMedium = size === 'medium';
33
+ var _React$useState = _react.default.useState(false),
34
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
35
+ remoteIconFailed = _React$useState2[0],
36
+ setRemoteIconFailed = _React$useState2[1];
37
+ (0, _react.useEffect)(function () {
38
+ setRemoteIconFailed(false);
39
+ }, [containerIcon]);
28
40
  if (containerType === 'LoomSpace') {
29
41
  return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
30
42
  spaceName: title,
31
- size: isMedium ? 'large' : size,
43
+ size: size,
32
44
  testId: "linked-container-".concat(containerType, "-icon")
33
45
  });
34
46
  }
35
47
 
36
48
  // This is a fallback icon for WebLink if the containerIcon is not present
37
- if (containerType === 'WebLink' && !containerIcon) {
49
+ if (containerType === 'WebLink' && !containerIcon || remoteIconFailed) {
50
+ if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
51
+ return /*#__PURE__*/_react.default.createElement(_tile.default, {
52
+ label: "",
53
+ size: size,
54
+ testId: "linked-container-WebLink-new-icon",
55
+ hasBorder: true
56
+ }, /*#__PURE__*/_react.default.createElement(_link.default, {
57
+ label: ""
58
+ }));
59
+ }
38
60
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
39
61
  xcss: (0, _css.cx)(!isMedium && styles.linkIconWrapperSmall)
40
62
  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
@@ -54,6 +76,22 @@ var ContainerIcon = exports.ContainerIcon = function ContainerIcon(_ref) {
54
76
  }
55
77
  }));
56
78
  }
79
+ if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
80
+ return /*#__PURE__*/_react.default.createElement(_tile.default, {
81
+ label: "",
82
+ size: size,
83
+ testId: "linked-container-WebLink-new-icon",
84
+ isInset: false,
85
+ backgroundColor: "transparent"
86
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
87
+ as: "img",
88
+ src: containerIcon,
89
+ alt: title,
90
+ onError: function onError() {
91
+ setRemoteIconFailed(true);
92
+ }
93
+ }));
94
+ }
57
95
  return /*#__PURE__*/_react.default.createElement(_avatar.default, {
58
96
  appearance: "square",
59
97
  borderColor: "transparent",
package/dist/cjs/common/ui/loom-avatar/main.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
  ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
4
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
4
5
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
5
6
  ._18zrv77o{padding-inline:var(--ds-space-025,2px)}
6
7
  ._1dqonqa1{border-style:solid}
@@ -8,11 +9,14 @@
8
9
  ._18u0v77o{margin-left:var(--ds-space-025,2px)}
9
10
  ._19pkv77o{margin-top:var(--ds-space-025,2px)}
10
11
  ._1bah1h6o{justify-content:center}
12
+ ._1bsb1osq{width:100%}
11
13
  ._1bsbzwfg{width:2pc}
12
14
  ._1e0c1txw{display:flex}
13
15
  ._1ul9qslr{min-width:22px}
14
16
  ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
15
17
  ._4cvr1h6o{align-items:center}
18
+ ._4t3i1osq{height:100%}
16
19
  ._4t3iqslr{height:22px}
17
20
  ._4t3izwfg{height:2pc}
18
- ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
21
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
22
+ ._vchhusvi{box-sizing:border-box}
package/dist/cjs/common/ui/loom-avatar/main.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /* main.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  "use strict";
3
3
 
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5
  var _typeof = require("@babel/runtime/helpers/typeof");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
@@ -9,8 +10,19 @@ exports.LoomSpaceAvatar = LoomSpaceAvatar;
9
10
  require("./main.compiled.css");
10
11
  var React = _interopRequireWildcard(require("react"));
11
12
  var _runtime = require("@compiled/react/runtime");
13
+ var _css = require("@atlaskit/css");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
+ var _compiled = require("@atlaskit/primitives/compiled");
16
+ var _tile = _interopRequireDefault(require("@atlaskit/tile"));
12
17
  var _utils = require("./utils");
13
18
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
19
+ var typographyByAvatarSize = {
20
+ small: "_11c81qyo",
21
+ medium: "_11c81af2"
22
+ };
23
+ var styles = {
24
+ loomAvatar: "_2rkol0p1 _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _4cvr1h6o _1bah1h6o _vchhusvi _1bsb1osq _4t3i1osq"
25
+ };
14
26
  var boxStyle = null;
15
27
  var smallBoxStyle = null;
16
28
  var largeBoxStyle = null;
@@ -24,6 +36,20 @@ function LoomSpaceAvatar(_ref) {
24
36
  var avatarText = (0, _utils.getAvatarText)(spaceName);
25
37
  var containerColor = (0, _utils.pickContainerColor)(spaceName);
26
38
  var textColor = (0, _utils.pickTextColor)(spaceName);
39
+ if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
40
+ return /*#__PURE__*/React.createElement(_tile.default, {
41
+ size: size,
42
+ label: "",
43
+ isInset: false,
44
+ testId: testId
45
+ }, /*#__PURE__*/React.createElement(_compiled.Box, {
46
+ xcss: (0, _css.cx)(styles.loomAvatar, typographyByAvatarSize[size]),
47
+ style: {
48
+ backgroundColor: containerColor,
49
+ color: textColor
50
+ }
51
+ }, avatarText));
52
+ }
27
53
  return /*#__PURE__*/React.createElement("div", {
28
54
  style: {
29
55
  backgroundColor: containerColor,
package/dist/cjs/common/utils/get-container-properties.js CHANGED
@@ -15,7 +15,9 @@ var _css = require("@atlaskit/css");
15
15
  var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
16
16
  var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
17
17
  var _image = _interopRequireDefault(require("@atlaskit/image"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _compiled = require("@atlaskit/primitives/compiled");
20
+ var _tile = _interopRequireDefault(require("@atlaskit/tile"));
19
21
  var _ConfluenceIcon = _interopRequireDefault(require("../assets/ConfluenceIcon.svg"));
20
22
  var _JiraIcon = _interopRequireDefault(require("../assets/JiraIcon.svg"));
21
23
  var _JiraProjectDiscovery = _interopRequireDefault(require("../assets/JiraProjectDiscovery.svg"));
@@ -29,7 +31,8 @@ var styles = {
29
31
  smallAvatarWrapper: "_1bsb7vkz _4t3i7vkz",
30
32
  smallAvatarMargin: "_195gidpf _1mouidpf",
31
33
  linkIconWrapper: "_2rkofajl _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1",
32
- linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm"
34
+ linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm",
35
+ profileCardWebLinkIconWrapper: "_1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o"
33
36
  };
34
37
  var messages = exports.messages = (0, _reactIntl.defineMessages)({
35
38
  addConfluenceContainerTitle: {
@@ -83,6 +86,15 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
83
86
  description: 'Description displayed for link containers in team profile'
84
87
  }
85
88
  });
89
+ var ContainerIconWrapper = function ContainerIconWrapper(_ref) {
90
+ var children = _ref.children,
91
+ iconSize = _ref.iconSize;
92
+ return /*#__PURE__*/_react.default.createElement(_tile.default, {
93
+ label: "",
94
+ size: iconSize,
95
+ isInset: false
96
+ }, children);
97
+ };
86
98
  var getJiraIcon = function getJiraIcon(containerSubTypes) {
87
99
  switch (containerSubTypes) {
88
100
  case 'PRODUCT_DISCOVERY':
@@ -93,16 +105,22 @@ var getJiraIcon = function getJiraIcon(containerSubTypes) {
93
105
  return _JiraIcon.default;
94
106
  }
95
107
  };
96
- var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
97
- var containerTypeProperties = _ref.containerTypeProperties,
98
- _ref$iconSize = _ref.iconSize,
99
- iconSize = _ref$iconSize === void 0 ? 'medium' : _ref$iconSize;
100
- var _ref2 = containerTypeProperties || {},
101
- subType = _ref2.subType,
102
- name = _ref2.name;
108
+ var getJiraContainerProperties = function getJiraContainerProperties(_ref2) {
109
+ var containerTypeProperties = _ref2.containerTypeProperties,
110
+ _ref2$iconSize = _ref2.iconSize,
111
+ iconSize = _ref2$iconSize === void 0 ? 'medium' : _ref2$iconSize;
112
+ var _ref3 = containerTypeProperties || {},
113
+ subType = _ref3.subType,
114
+ name = _ref3.name;
103
115
  var baseProperties = {
104
116
  description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.jiraProjectDescription),
105
- icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
117
+ icon: (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/_react.default.createElement(ContainerIconWrapper, {
118
+ iconSize: iconSize
119
+ }, /*#__PURE__*/_react.default.createElement(_image.default, {
120
+ src: getJiraIcon(subType),
121
+ alt: "",
122
+ testId: "jira-project-container-icon"
123
+ })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
106
124
  xcss: (0, _css.cx)(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
107
125
  }, /*#__PURE__*/_react.default.createElement(_image.default, {
108
126
  src: getJiraIcon(subType),
@@ -123,9 +141,9 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
123
141
  return baseProperties;
124
142
  }
125
143
  };
126
- var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3) {
127
- var isEmptyContainer = _ref3.isEmptyContainer,
128
- isDisplayedOnProfileCard = _ref3.isDisplayedOnProfileCard;
144
+ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref4) {
145
+ var isEmptyContainer = _ref4.isEmptyContainer,
146
+ isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
129
147
  return {
130
148
  description: isEmptyContainer ? /*#__PURE__*/_react.default.createElement(_compiled.Text, {
131
149
  size: "medium",
@@ -137,7 +155,13 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
137
155
  }, /*#__PURE__*/_react.default.createElement(_link.default, {
138
156
  label: "",
139
157
  size: "medium"
140
- })) : isDisplayedOnProfileCard ? /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
158
+ })) : isDisplayedOnProfileCard ? (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
159
+ xcss: styles.profileCardWebLinkIconWrapper
160
+ }, /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
161
+ label: "",
162
+ size: "small",
163
+ testId: "team-link-card-external-link-icon"
164
+ })) : /*#__PURE__*/_react.default.createElement(_linkExternal.default, {
141
165
  label: "",
142
166
  size: "small",
143
167
  testId: "team-link-card-external-link-icon"
@@ -152,18 +176,25 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
152
176
  containerTypeText: null
153
177
  };
154
178
  };
155
- var getContainerProperties = exports.getContainerProperties = function getContainerProperties(_ref4) {
156
- var containerType = _ref4.containerType,
157
- _ref4$iconSize = _ref4.iconSize,
158
- iconSize = _ref4$iconSize === void 0 ? 'medium' : _ref4$iconSize,
159
- containerTypeProperties = _ref4.containerTypeProperties,
160
- isEmptyContainer = _ref4.isEmptyContainer,
161
- isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
179
+ var getContainerProperties = exports.getContainerProperties = function getContainerProperties(_ref5) {
180
+ var containerType = _ref5.containerType,
181
+ _ref5$iconSize = _ref5.iconSize,
182
+ iconSize = _ref5$iconSize === void 0 ? (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? 'small' : 'medium' : _ref5$iconSize,
183
+ containerTypeProperties = _ref5.containerTypeProperties,
184
+ isEmptyContainer = _ref5.isEmptyContainer,
185
+ isDisplayedOnProfileCard = _ref5.isDisplayedOnProfileCard;
186
+ var isT26DesignDropCoreExperiencesEnabled = (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences');
162
187
  switch (containerType) {
163
188
  case 'ConfluenceSpace':
164
189
  return {
165
190
  description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.confluenceContainerDescription),
166
- icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
191
+ icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/_react.default.createElement(ContainerIconWrapper, {
192
+ iconSize: iconSize
193
+ }, /*#__PURE__*/_react.default.createElement(_image.default, {
194
+ src: _ConfluenceIcon.default,
195
+ alt: "",
196
+ testId: "confluence-space-container-icon"
197
+ })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
167
198
  xcss: (0, _css.cx)(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
168
199
  }, /*#__PURE__*/_react.default.createElement(_image.default, {
169
200
  src: _ConfluenceIcon.default,
@@ -176,7 +207,13 @@ var getContainerProperties = exports.getContainerProperties = function getContai
176
207
  case 'LoomSpace':
177
208
  return {
178
209
  description: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, messages.loomSpaceDescription),
179
- icon: /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
210
+ icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/_react.default.createElement(ContainerIconWrapper, {
211
+ iconSize: iconSize
212
+ }, /*#__PURE__*/_react.default.createElement(_image.default, {
213
+ src: _LoomIcon.default,
214
+ alt: "",
215
+ testId: "loom-space-container-icon"
216
+ })) : /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
180
217
  xcss: (0, _css.cx)(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
181
218
  }, /*#__PURE__*/_react.default.createElement(_image.default, {
182
219
  src: _LoomIcon.default,
package/dist/cjs/ui/team-containers/linked-container-card/index.js CHANGED
@@ -82,7 +82,7 @@ var getContainerIcon = function getContainerIcon(containerType, title, container
82
82
  if (containerType === 'LoomSpace') {
83
83
  return /*#__PURE__*/_react.default.createElement(_loomAvatar.LoomSpaceAvatar, {
84
84
  spaceName: title,
85
- size: 'large',
85
+ size: 'medium',
86
86
  testId: "linked-container-icon"
87
87
  });
88
88
  }
package/dist/es2019/common/ui/container-icon/index.js CHANGED
@@ -1,12 +1,14 @@
1
1
  /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
2
2
  import "./index.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
- import React from 'react';
4
+ import React, { useEffect } from 'react';
5
5
  import Avatar from '@atlaskit/avatar';
6
6
  import { IconButton } from '@atlaskit/button/new';
7
7
  import { cx } from '@atlaskit/css';
8
8
  import LinkIcon from '@atlaskit/icon/core/link';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { Box } from '@atlaskit/primitives/compiled';
11
+ import Tile from '@atlaskit/tile';
10
12
  import { LoomSpaceAvatar } from '../loom-avatar';
11
13
  const styles = {
12
14
  linkIconWrapperSmall: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
@@ -18,16 +20,30 @@ export const ContainerIcon = ({
18
20
  size = 'medium'
19
21
  }) => {
20
22
  const isMedium = size === 'medium';
23
+ const [remoteIconFailed, setRemoteIconFailed] = React.useState(false);
24
+ useEffect(() => {
25
+ setRemoteIconFailed(false);
26
+ }, [containerIcon]);
21
27
  if (containerType === 'LoomSpace') {
22
28
  return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
23
29
  spaceName: title,
24
- size: isMedium ? 'large' : size,
30
+ size: size,
25
31
  testId: `linked-container-${containerType}-icon`
26
32
  });
27
33
  }
28
34
 
29
35
  // This is a fallback icon for WebLink if the containerIcon is not present
30
- if (containerType === 'WebLink' && !containerIcon) {
36
+ if (containerType === 'WebLink' && !containerIcon || remoteIconFailed) {
37
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
38
+ return /*#__PURE__*/React.createElement(Tile, {
39
+ label: "",
40
+ size: size,
41
+ testId: "linked-container-WebLink-new-icon",
42
+ hasBorder: true
43
+ }, /*#__PURE__*/React.createElement(LinkIcon, {
44
+ label: ""
45
+ }));
46
+ }
31
47
  return /*#__PURE__*/React.createElement(Box, {
32
48
  xcss: cx(!isMedium && styles.linkIconWrapperSmall)
33
49
  }, /*#__PURE__*/React.createElement(IconButton, {
@@ -45,6 +61,22 @@ export const ContainerIcon = ({
45
61
  })
46
62
  }));
47
63
  }
64
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
65
+ return /*#__PURE__*/React.createElement(Tile, {
66
+ label: "",
67
+ size: size,
68
+ testId: "linked-container-WebLink-new-icon",
69
+ isInset: false,
70
+ backgroundColor: "transparent"
71
+ }, /*#__PURE__*/React.createElement(Box, {
72
+ as: "img",
73
+ src: containerIcon,
74
+ alt: title,
75
+ onError: () => {
76
+ setRemoteIconFailed(true);
77
+ }
78
+ }));
79
+ }
48
80
  return /*#__PURE__*/React.createElement(Avatar, {
49
81
  appearance: "square",
50
82
  borderColor: "transparent",
package/dist/es2019/common/ui/loom-avatar/main.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
  ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
4
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
4
5
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
5
6
  ._18zrv77o{padding-inline:var(--ds-space-025,2px)}
6
7
  ._1dqonqa1{border-style:solid}
@@ -8,11 +9,14 @@
8
9
  ._18u0v77o{margin-left:var(--ds-space-025,2px)}
9
10
  ._19pkv77o{margin-top:var(--ds-space-025,2px)}
10
11
  ._1bah1h6o{justify-content:center}
12
+ ._1bsb1osq{width:100%}
11
13
  ._1bsbzwfg{width:2pc}
12
14
  ._1e0c1txw{display:flex}
13
15
  ._1ul9qslr{min-width:22px}
14
16
  ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
15
17
  ._4cvr1h6o{align-items:center}
18
+ ._4t3i1osq{height:100%}
16
19
  ._4t3iqslr{height:22px}
17
20
  ._4t3izwfg{height:2pc}
18
- ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
21
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
22
+ ._vchhusvi{box-sizing:border-box}
package/dist/es2019/common/ui/loom-avatar/main.js CHANGED
@@ -2,7 +2,18 @@
2
2
  import "./main.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
+ import { cx } from '@atlaskit/css';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
+ import Tile from '@atlaskit/tile';
5
9
  import { getAvatarText, pickContainerColor, pickTextColor } from './utils';
10
+ const typographyByAvatarSize = {
11
+ small: "_11c81qyo",
12
+ medium: "_11c81af2"
13
+ };
14
+ const styles = {
15
+ loomAvatar: "_2rkol0p1 _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _4cvr1h6o _1bah1h6o _vchhusvi _1bsb1osq _4t3i1osq"
16
+ };
6
17
  const boxStyle = null;
7
18
  const smallBoxStyle = null;
8
19
  const largeBoxStyle = null;
@@ -14,6 +25,20 @@ export function LoomSpaceAvatar({
14
25
  const avatarText = getAvatarText(spaceName);
15
26
  const containerColor = pickContainerColor(spaceName);
16
27
  const textColor = pickTextColor(spaceName);
28
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
29
+ return /*#__PURE__*/React.createElement(Tile, {
30
+ size: size,
31
+ label: "",
32
+ isInset: false,
33
+ testId: testId
34
+ }, /*#__PURE__*/React.createElement(Box, {
35
+ xcss: cx(styles.loomAvatar, typographyByAvatarSize[size]),
36
+ style: {
37
+ backgroundColor: containerColor,
38
+ color: textColor
39
+ }
40
+ }, avatarText));
41
+ }
17
42
  return /*#__PURE__*/React.createElement("div", {
18
43
  style: {
19
44
  backgroundColor: containerColor,
package/dist/es2019/common/utils/get-container-properties.js CHANGED
@@ -7,7 +7,9 @@ import { cx } from '@atlaskit/css';
7
7
  import LinkIcon from '@atlaskit/icon/core/link';
8
8
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
9
9
  import Image from '@atlaskit/image';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
12
+ import Tile from '@atlaskit/tile';
11
13
  import ConfluenceIcon from '../assets/ConfluenceIcon.svg';
12
14
  import JiraIcon from '../assets/JiraIcon.svg';
13
15
  import JiraProjectDiscovery from '../assets/JiraProjectDiscovery.svg';
@@ -19,7 +21,8 @@ const styles = {
19
21
  smallAvatarWrapper: "_1bsb7vkz _4t3i7vkz",
20
22
  smallAvatarMargin: "_195gidpf _1mouidpf",
21
23
  linkIconWrapper: "_2rkofajl _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1",
22
- linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm"
24
+ linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm",
25
+ profileCardWebLinkIconWrapper: "_1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o"
23
26
  };
24
27
  export const messages = defineMessages({
25
28
  addConfluenceContainerTitle: {
@@ -73,6 +76,16 @@ export const messages = defineMessages({
73
76
  description: 'Description displayed for link containers in team profile'
74
77
  }
75
78
  });
79
+ const ContainerIconWrapper = ({
80
+ children,
81
+ iconSize
82
+ }) => {
83
+ return /*#__PURE__*/React.createElement(Tile, {
84
+ label: "",
85
+ size: iconSize,
86
+ isInset: false
87
+ }, children);
88
+ };
76
89
  const getJiraIcon = containerSubTypes => {
77
90
  switch (containerSubTypes) {
78
91
  case 'PRODUCT_DISCOVERY':
@@ -93,7 +106,13 @@ const getJiraContainerProperties = ({
93
106
  } = containerTypeProperties || {};
94
107
  const baseProperties = {
95
108
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
96
- icon: /*#__PURE__*/React.createElement(Flex, {
109
+ icon: fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
110
+ iconSize: iconSize
111
+ }, /*#__PURE__*/React.createElement(Image, {
112
+ src: getJiraIcon(subType),
113
+ alt: "",
114
+ testId: "jira-project-container-icon"
115
+ })) : /*#__PURE__*/React.createElement(Flex, {
97
116
  xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
98
117
  }, /*#__PURE__*/React.createElement(Image, {
99
118
  src: getJiraIcon(subType),
@@ -130,7 +149,13 @@ const getWebLinkContainerProperties = ({
130
149
  }, /*#__PURE__*/React.createElement(LinkIcon, {
131
150
  label: "",
132
151
  size: "medium"
133
- })) : isDisplayedOnProfileCard ? /*#__PURE__*/React.createElement(LinkExternalIcon, {
152
+ })) : isDisplayedOnProfileCard ? fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(Box, {
153
+ xcss: styles.profileCardWebLinkIconWrapper
154
+ }, /*#__PURE__*/React.createElement(LinkExternalIcon, {
155
+ label: "",
156
+ size: "small",
157
+ testId: "team-link-card-external-link-icon"
158
+ })) : /*#__PURE__*/React.createElement(LinkExternalIcon, {
134
159
  label: "",
135
160
  size: "small",
136
161
  testId: "team-link-card-external-link-icon"
@@ -147,16 +172,23 @@ const getWebLinkContainerProperties = ({
147
172
  };
148
173
  export const getContainerProperties = ({
149
174
  containerType,
150
- iconSize = 'medium',
175
+ iconSize = fg('enable_teams_t26_design_drop_core_experiences') ? 'small' : 'medium',
151
176
  containerTypeProperties,
152
177
  isEmptyContainer,
153
178
  isDisplayedOnProfileCard
154
179
  }) => {
180
+ const isT26DesignDropCoreExperiencesEnabled = fg('enable_teams_t26_design_drop_core_experiences');
155
181
  switch (containerType) {
156
182
  case 'ConfluenceSpace':
157
183
  return {
158
184
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
159
- icon: /*#__PURE__*/React.createElement(Flex, {
185
+ icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
186
+ iconSize: iconSize
187
+ }, /*#__PURE__*/React.createElement(Image, {
188
+ src: ConfluenceIcon,
189
+ alt: "",
190
+ testId: "confluence-space-container-icon"
191
+ })) : /*#__PURE__*/React.createElement(Flex, {
160
192
  xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
161
193
  }, /*#__PURE__*/React.createElement(Image, {
162
194
  src: ConfluenceIcon,
@@ -169,7 +201,13 @@ export const getContainerProperties = ({
169
201
  case 'LoomSpace':
170
202
  return {
171
203
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.loomSpaceDescription),
172
- icon: /*#__PURE__*/React.createElement(Flex, {
204
+ icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
205
+ iconSize: iconSize
206
+ }, /*#__PURE__*/React.createElement(Image, {
207
+ src: LoomIcon,
208
+ alt: "",
209
+ testId: "loom-space-container-icon"
210
+ })) : /*#__PURE__*/React.createElement(Flex, {
173
211
  xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
174
212
  }, /*#__PURE__*/React.createElement(Image, {
175
213
  src: LoomIcon,
package/dist/es2019/ui/team-containers/linked-container-card/index.js CHANGED
@@ -71,7 +71,7 @@ const getContainerIcon = (containerType, title, containerIcon) => {
71
71
  if (containerType === 'LoomSpace') {
72
72
  return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
73
73
  spaceName: title,
74
- size: 'large',
74
+ size: 'medium',
75
75
  testId: "linked-container-icon"
76
76
  });
77
77
  }
package/dist/esm/common/ui/container-icon/index.js CHANGED
@@ -1,12 +1,15 @@
1
1
  /* index.tsx generated by @compiled/babel-plugin v0.39.1 */
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import "./index.compiled.css";
3
4
  import { ax, ix } from "@compiled/react/runtime";
4
- import React from 'react';
5
+ import React, { useEffect } from 'react';
5
6
  import Avatar from '@atlaskit/avatar';
6
7
  import { IconButton } from '@atlaskit/button/new';
7
8
  import { cx } from '@atlaskit/css';
8
9
  import LinkIcon from '@atlaskit/icon/core/link';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
9
11
  import { Box } from '@atlaskit/primitives/compiled';
12
+ import Tile from '@atlaskit/tile';
10
13
  import { LoomSpaceAvatar } from '../loom-avatar';
11
14
  var styles = {
12
15
  linkIconWrapperSmall: "_19pkv77o _2hwxv77o _otyrv77o _18u0v77o"
@@ -18,16 +21,33 @@ export var ContainerIcon = function ContainerIcon(_ref) {
18
21
  _ref$size = _ref.size,
19
22
  size = _ref$size === void 0 ? 'medium' : _ref$size;
20
23
  var isMedium = size === 'medium';
24
+ var _React$useState = React.useState(false),
25
+ _React$useState2 = _slicedToArray(_React$useState, 2),
26
+ remoteIconFailed = _React$useState2[0],
27
+ setRemoteIconFailed = _React$useState2[1];
28
+ useEffect(function () {
29
+ setRemoteIconFailed(false);
30
+ }, [containerIcon]);
21
31
  if (containerType === 'LoomSpace') {
22
32
  return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
23
33
  spaceName: title,
24
- size: isMedium ? 'large' : size,
34
+ size: size,
25
35
  testId: "linked-container-".concat(containerType, "-icon")
26
36
  });
27
37
  }
28
38
 
29
39
  // This is a fallback icon for WebLink if the containerIcon is not present
30
- if (containerType === 'WebLink' && !containerIcon) {
40
+ if (containerType === 'WebLink' && !containerIcon || remoteIconFailed) {
41
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
42
+ return /*#__PURE__*/React.createElement(Tile, {
43
+ label: "",
44
+ size: size,
45
+ testId: "linked-container-WebLink-new-icon",
46
+ hasBorder: true
47
+ }, /*#__PURE__*/React.createElement(LinkIcon, {
48
+ label: ""
49
+ }));
50
+ }
31
51
  return /*#__PURE__*/React.createElement(Box, {
32
52
  xcss: cx(!isMedium && styles.linkIconWrapperSmall)
33
53
  }, /*#__PURE__*/React.createElement(IconButton, {
@@ -47,6 +67,22 @@ export var ContainerIcon = function ContainerIcon(_ref) {
47
67
  }
48
68
  }));
49
69
  }
70
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
71
+ return /*#__PURE__*/React.createElement(Tile, {
72
+ label: "",
73
+ size: size,
74
+ testId: "linked-container-WebLink-new-icon",
75
+ isInset: false,
76
+ backgroundColor: "transparent"
77
+ }, /*#__PURE__*/React.createElement(Box, {
78
+ as: "img",
79
+ src: containerIcon,
80
+ alt: title,
81
+ onError: function onError() {
82
+ setRemoteIconFailed(true);
83
+ }
84
+ }));
85
+ }
50
86
  return /*#__PURE__*/React.createElement(Avatar, {
51
87
  appearance: "square",
52
88
  borderColor: "transparent",
package/dist/esm/common/ui/loom-avatar/main.compiled.css CHANGED
@@ -1,6 +1,7 @@
1
1
  ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._11c81qyo{font:var(--ds-font-heading-xsmall,normal 653 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
4
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
4
5
  ._189ee4h9{border-width:var(--ds-border-width,1px)}
5
6
  ._18zrv77o{padding-inline:var(--ds-space-025,2px)}
6
7
  ._1dqonqa1{border-style:solid}
@@ -8,11 +9,14 @@
8
9
  ._18u0v77o{margin-left:var(--ds-space-025,2px)}
9
10
  ._19pkv77o{margin-top:var(--ds-space-025,2px)}
10
11
  ._1bah1h6o{justify-content:center}
12
+ ._1bsb1osq{width:100%}
11
13
  ._1bsbzwfg{width:2pc}
12
14
  ._1e0c1txw{display:flex}
13
15
  ._1ul9qslr{min-width:22px}
14
16
  ._2hwxv77o{margin-right:var(--ds-space-025,2px)}
15
17
  ._4cvr1h6o{align-items:center}
18
+ ._4t3i1osq{height:100%}
16
19
  ._4t3iqslr{height:22px}
17
20
  ._4t3izwfg{height:2pc}
18
- ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
21
+ ._otyrv77o{margin-bottom:var(--ds-space-025,2px)}
22
+ ._vchhusvi{box-sizing:border-box}
package/dist/esm/common/ui/loom-avatar/main.js CHANGED
@@ -2,7 +2,18 @@
2
2
  import "./main.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
+ import { cx } from '@atlaskit/css';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
+ import Tile from '@atlaskit/tile';
5
9
  import { getAvatarText, pickContainerColor, pickTextColor } from './utils';
10
+ var typographyByAvatarSize = {
11
+ small: "_11c81qyo",
12
+ medium: "_11c81af2"
13
+ };
14
+ var styles = {
15
+ loomAvatar: "_2rkol0p1 _189ee4h9 _1dqonqa1 _1h6d1l7x _1e0c1txw _4cvr1h6o _1bah1h6o _vchhusvi _1bsb1osq _4t3i1osq"
16
+ };
6
17
  var boxStyle = null;
7
18
  var smallBoxStyle = null;
8
19
  var largeBoxStyle = null;
@@ -16,6 +27,20 @@ export function LoomSpaceAvatar(_ref) {
16
27
  var avatarText = getAvatarText(spaceName);
17
28
  var containerColor = pickContainerColor(spaceName);
18
29
  var textColor = pickTextColor(spaceName);
30
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
31
+ return /*#__PURE__*/React.createElement(Tile, {
32
+ size: size,
33
+ label: "",
34
+ isInset: false,
35
+ testId: testId
36
+ }, /*#__PURE__*/React.createElement(Box, {
37
+ xcss: cx(styles.loomAvatar, typographyByAvatarSize[size]),
38
+ style: {
39
+ backgroundColor: containerColor,
40
+ color: textColor
41
+ }
42
+ }, avatarText));
43
+ }
19
44
  return /*#__PURE__*/React.createElement("div", {
20
45
  style: {
21
46
  backgroundColor: containerColor,
package/dist/esm/common/utils/get-container-properties.js CHANGED
@@ -10,7 +10,9 @@ import { cx } from '@atlaskit/css';
10
10
  import LinkIcon from '@atlaskit/icon/core/link';
11
11
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
12
12
  import Image from '@atlaskit/image';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { Box, Flex, Text } from '@atlaskit/primitives/compiled';
15
+ import Tile from '@atlaskit/tile';
14
16
  import ConfluenceIcon from '../assets/ConfluenceIcon.svg';
15
17
  import JiraIcon from '../assets/JiraIcon.svg';
16
18
  import JiraProjectDiscovery from '../assets/JiraProjectDiscovery.svg';
@@ -22,7 +24,8 @@ var styles = {
22
24
  smallAvatarWrapper: "_1bsb7vkz _4t3i7vkz",
23
25
  smallAvatarMargin: "_195gidpf _1mouidpf",
24
26
  linkIconWrapper: "_2rkofajl _1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o _12ji1l7x _1qu2nqa1",
25
- linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm"
27
+ linkAvatarWrapper: "_2rko1eiz _1bsb1tcg _4t3i1tcg _1e0c1txw _4cvr1h6o _1bah1h6o _bfhki8nm",
28
+ profileCardWebLinkIconWrapper: "_1bsb7vkz _4t3i7vkz _1e0c1txw _4cvr1h6o _1bah1h6o"
26
29
  };
27
30
  export var messages = defineMessages({
28
31
  addConfluenceContainerTitle: {
@@ -76,6 +79,15 @@ export var messages = defineMessages({
76
79
  description: 'Description displayed for link containers in team profile'
77
80
  }
78
81
  });
82
+ var ContainerIconWrapper = function ContainerIconWrapper(_ref) {
83
+ var children = _ref.children,
84
+ iconSize = _ref.iconSize;
85
+ return /*#__PURE__*/React.createElement(Tile, {
86
+ label: "",
87
+ size: iconSize,
88
+ isInset: false
89
+ }, children);
90
+ };
79
91
  var getJiraIcon = function getJiraIcon(containerSubTypes) {
80
92
  switch (containerSubTypes) {
81
93
  case 'PRODUCT_DISCOVERY':
@@ -86,16 +98,22 @@ var getJiraIcon = function getJiraIcon(containerSubTypes) {
86
98
  return JiraIcon;
87
99
  }
88
100
  };
89
- var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
90
- var containerTypeProperties = _ref.containerTypeProperties,
91
- _ref$iconSize = _ref.iconSize,
92
- iconSize = _ref$iconSize === void 0 ? 'medium' : _ref$iconSize;
93
- var _ref2 = containerTypeProperties || {},
94
- subType = _ref2.subType,
95
- name = _ref2.name;
101
+ var getJiraContainerProperties = function getJiraContainerProperties(_ref2) {
102
+ var containerTypeProperties = _ref2.containerTypeProperties,
103
+ _ref2$iconSize = _ref2.iconSize,
104
+ iconSize = _ref2$iconSize === void 0 ? 'medium' : _ref2$iconSize;
105
+ var _ref3 = containerTypeProperties || {},
106
+ subType = _ref3.subType,
107
+ name = _ref3.name;
96
108
  var baseProperties = {
97
109
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.jiraProjectDescription),
98
- icon: /*#__PURE__*/React.createElement(Flex, {
110
+ icon: fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
111
+ iconSize: iconSize
112
+ }, /*#__PURE__*/React.createElement(Image, {
113
+ src: getJiraIcon(subType),
114
+ alt: "",
115
+ testId: "jira-project-container-icon"
116
+ })) : /*#__PURE__*/React.createElement(Flex, {
99
117
  xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
100
118
  }, /*#__PURE__*/React.createElement(Image, {
101
119
  src: getJiraIcon(subType),
@@ -116,9 +134,9 @@ var getJiraContainerProperties = function getJiraContainerProperties(_ref) {
116
134
  return baseProperties;
117
135
  }
118
136
  };
119
- var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3) {
120
- var isEmptyContainer = _ref3.isEmptyContainer,
121
- isDisplayedOnProfileCard = _ref3.isDisplayedOnProfileCard;
137
+ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref4) {
138
+ var isEmptyContainer = _ref4.isEmptyContainer,
139
+ isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
122
140
  return {
123
141
  description: isEmptyContainer ? /*#__PURE__*/React.createElement(Text, {
124
142
  size: "medium",
@@ -130,7 +148,13 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
130
148
  }, /*#__PURE__*/React.createElement(LinkIcon, {
131
149
  label: "",
132
150
  size: "medium"
133
- })) : isDisplayedOnProfileCard ? /*#__PURE__*/React.createElement(LinkExternalIcon, {
151
+ })) : isDisplayedOnProfileCard ? fg('enable_teams_t26_design_drop_core_experiences') ? /*#__PURE__*/React.createElement(Box, {
152
+ xcss: styles.profileCardWebLinkIconWrapper
153
+ }, /*#__PURE__*/React.createElement(LinkExternalIcon, {
154
+ label: "",
155
+ size: "small",
156
+ testId: "team-link-card-external-link-icon"
157
+ })) : /*#__PURE__*/React.createElement(LinkExternalIcon, {
134
158
  label: "",
135
159
  size: "small",
136
160
  testId: "team-link-card-external-link-icon"
@@ -145,18 +169,25 @@ var getWebLinkContainerProperties = function getWebLinkContainerProperties(_ref3
145
169
  containerTypeText: null
146
170
  };
147
171
  };
148
- export var getContainerProperties = function getContainerProperties(_ref4) {
149
- var containerType = _ref4.containerType,
150
- _ref4$iconSize = _ref4.iconSize,
151
- iconSize = _ref4$iconSize === void 0 ? 'medium' : _ref4$iconSize,
152
- containerTypeProperties = _ref4.containerTypeProperties,
153
- isEmptyContainer = _ref4.isEmptyContainer,
154
- isDisplayedOnProfileCard = _ref4.isDisplayedOnProfileCard;
172
+ export var getContainerProperties = function getContainerProperties(_ref5) {
173
+ var containerType = _ref5.containerType,
174
+ _ref5$iconSize = _ref5.iconSize,
175
+ iconSize = _ref5$iconSize === void 0 ? fg('enable_teams_t26_design_drop_core_experiences') ? 'small' : 'medium' : _ref5$iconSize,
176
+ containerTypeProperties = _ref5.containerTypeProperties,
177
+ isEmptyContainer = _ref5.isEmptyContainer,
178
+ isDisplayedOnProfileCard = _ref5.isDisplayedOnProfileCard;
179
+ var isT26DesignDropCoreExperiencesEnabled = fg('enable_teams_t26_design_drop_core_experiences');
155
180
  switch (containerType) {
156
181
  case 'ConfluenceSpace':
157
182
  return {
158
183
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.confluenceContainerDescription),
159
- icon: /*#__PURE__*/React.createElement(Flex, {
184
+ icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
185
+ iconSize: iconSize
186
+ }, /*#__PURE__*/React.createElement(Image, {
187
+ src: ConfluenceIcon,
188
+ alt: "",
189
+ testId: "confluence-space-container-icon"
190
+ })) : /*#__PURE__*/React.createElement(Flex, {
160
191
  xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
161
192
  }, /*#__PURE__*/React.createElement(Image, {
162
193
  src: ConfluenceIcon,
@@ -169,7 +200,13 @@ export var getContainerProperties = function getContainerProperties(_ref4) {
169
200
  case 'LoomSpace':
170
201
  return {
171
202
  description: /*#__PURE__*/React.createElement(FormattedMessage, messages.loomSpaceDescription),
172
- icon: /*#__PURE__*/React.createElement(Flex, {
203
+ icon: isT26DesignDropCoreExperiencesEnabled ? /*#__PURE__*/React.createElement(ContainerIconWrapper, {
204
+ iconSize: iconSize
205
+ }, /*#__PURE__*/React.createElement(Image, {
206
+ src: LoomIcon,
207
+ alt: "",
208
+ testId: "loom-space-container-icon"
209
+ })) : /*#__PURE__*/React.createElement(Flex, {
173
210
  xcss: cx(iconSize === 'small' ? styles.smallAvatarWrapper : styles.avatarWrapper, iconSize === 'small' ? styles.smallAvatarMargin : styles.avatarMargin)
174
211
  }, /*#__PURE__*/React.createElement(Image, {
175
212
  src: LoomIcon,
package/dist/esm/ui/team-containers/linked-container-card/index.js CHANGED
@@ -73,7 +73,7 @@ var getContainerIcon = function getContainerIcon(containerType, title, container
73
73
  if (containerType === 'LoomSpace') {
74
74
  return /*#__PURE__*/React.createElement(LoomSpaceAvatar, {
75
75
  spaceName: title,
76
- size: 'large',
76
+ size: 'medium',
77
77
  testId: "linked-container-icon"
78
78
  });
79
79
  }
package/dist/types/common/ui/loom-avatar/main.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
  export declare function LoomSpaceAvatar({ spaceName, size, testId, }: {
6
6
  spaceName: string;
7
- size?: 'small' | 'large';
7
+ size?: 'small' | 'medium';
8
8
  isDisabled?: boolean;
9
9
  testId?: string;
10
10
  }): JSX.Element;
package/dist/types/common/utils/get-container-properties.d.ts CHANGED
@@ -7,7 +7,7 @@ interface ContainerProperties {
7
7
  containerTypeText: ReactNode;
8
8
  isEmptyContainer?: boolean;
9
9
  }
10
- type IconSize = 'small' | 'medium';
10
+ type IconSize = 'xxsmall' | 'xsmall' | 'small' | 'medium';
11
11
  export declare const messages: {
12
12
  addConfluenceContainerTitle: {
13
13
  id: string;
package/dist/types-ts4.5/common/ui/loom-avatar/main.d.ts CHANGED
@@ -4,7 +4,7 @@
4
4
  */
5
5
  export declare function LoomSpaceAvatar({ spaceName, size, testId, }: {
6
6
  spaceName: string;
7
- size?: 'small' | 'large';
7
+ size?: 'small' | 'medium';
8
8
  isDisabled?: boolean;
9
9
  testId?: string;
10
10
  }): JSX.Element;
package/dist/types-ts4.5/common/utils/get-container-properties.d.ts CHANGED
@@ -7,7 +7,7 @@ interface ContainerProperties {
7
7
  containerTypeText: ReactNode;
8
8
  isEmptyContainer?: boolean;
9
9
  }
10
- type IconSize = 'small' | 'medium';
10
+ type IconSize = 'xxsmall' | 'xsmall' | 'small' | 'medium';
11
11
  export declare const messages: {
12
12
  addConfluenceContainerTitle: {
13
13
  id: string;
package/package.json CHANGED
@@ -44,6 +44,7 @@
44
44
  "@atlaskit/teams-app-internal-navigation": "^1.8.0",
45
45
  "@atlaskit/teams-app-internal-product-permissions": "^1.3.0",
46
46
  "@atlaskit/teams-client": "^4.32.0",
47
+ "@atlaskit/tile": "^1.0.0",
47
48
  "@atlaskit/tokens": "^13.0.0",
48
49
  "@atlaskit/tooltip": "^21.1.0",
49
50
  "@babel/runtime": "^7.0.0",
@@ -67,6 +68,7 @@
67
68
  "@atlassian/a11y-jest-testing": "^0.11.0",
68
69
  "@atlassian/feature-flags-test-utils": "^1.0.0",
69
70
  "@atlassian/ptc-test-utils": "^0.12.0",
71
+ "@atlassian/teams-app-internal-playground": "^2.1.0",
70
72
  "@atlassian/testing-library": "^0.5.0",
71
73
  "@testing-library/react": "^16.3.0",
72
74
  "@testing-library/user-event": "^14.4.3",
@@ -108,7 +110,7 @@
108
110
  }
109
111
  },
110
112
  "name": "@atlaskit/teams-public",
111
- "version": "1.0.0",
113
+ "version": "1.1.0",
112
114
  "description": "Public components related to teams",
113
115
  "author": "Atlassian Pty Ltd",
114
116
  "license": "Apache-2.0",
@@ -143,6 +145,9 @@
143
145
  },
144
146
  "ptc-links-migrate-atlaskit-anchor-to-teams-anchor": {
145
147
  "type": "boolean"
148
+ },
149
+ "enable_teams_t26_design_drop_core_experiences": {
150
+ "type": "boolean"
146
151
  }
147
152
  }
148
153
  }