@atlaskit/teams-avatar 2.4.15 → 2.5.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 (16) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/ui/teams-avatar/index.js +16 -1
  3. package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/constants.js +7 -0
  4. package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js +15 -1
  5. package/dist/cjs/ui/teams-avatar/teams-avatar-image/utils.js +3 -1
  6. package/dist/es2019/ui/teams-avatar/index.js +14 -1
  7. package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/constants.js +14 -0
  8. package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js +13 -1
  9. package/dist/es2019/ui/teams-avatar/teams-avatar-image/utils.js +4 -1
  10. package/dist/esm/ui/teams-avatar/index.js +14 -1
  11. package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/constants.js +1 -0
  12. package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js +15 -1
  13. package/dist/esm/ui/teams-avatar/teams-avatar-image/utils.js +4 -1
  14. package/dist/types/ui/teams-avatar/teams-avatar-image/fallback/constants.d.ts +1 -0
  15. package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/fallback/constants.d.ts +1 -0
  16. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/teams-avatar
2
2
 
3
+ ## 2.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`d672e00aaa0e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d672e00aaa0e2) -
8
+ Updated teams avatar to use @atlaskit/avatar
9
+
3
10
  ## 2.4.15
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/ui/teams-avatar/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
@@ -9,9 +10,11 @@ exports.default = TeamAvatar;
9
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
11
12
  var _react = _interopRequireDefault(require("react"));
12
- var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
13
+ var _avatar = _interopRequireWildcard(require("@atlaskit/avatar"));
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
15
  var _teamsAvatarImage = require("./teams-avatar-image");
14
16
  var _excluded = ["testId", "src", "size", "teamId", "compact"];
17
+ 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); }
15
18
  /*
16
19
  * The component accepts src and teamId as input params. Order of preference:
17
20
  * If src is provided, use that directly.
@@ -33,6 +36,18 @@ function TeamAvatar(_ref) {
33
36
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
34
37
  // Strip ARI in case the teamId was given in that format
35
38
  teamId = teamId.replace('ari:cloud:identity::team/', '');
39
+ if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
40
+ return /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({}, props, {
41
+ appearance: "square",
42
+ size: size,
43
+ testId: "".concat(testId, "-team-avatar")
44
+ }), /*#__PURE__*/_react.default.createElement(_avatar.AvatarContent, null, /*#__PURE__*/_react.default.createElement(_teamsAvatarImage.TeamAvatarImage, {
45
+ src: src,
46
+ size: size,
47
+ testId: testId,
48
+ teamId: teamId
49
+ })));
50
+ }
36
51
  return /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({
37
52
  appearance: "square"
38
53
  }, props, {
package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/constants.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TEAM_FALLBACK_AVATAR_DATA_URI = void 0;
7
+ var TEAM_FALLBACK_AVATAR_DATA_URI = exports.TEAM_FALLBACK_AVATAR_DATA_URI = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_2032_552)\">\n<rect width=\"32\" height=\"32\" rx=\"4\" fill=\"#DCDFE4\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6666 12.6666C11.7712 12.6666 12.6666 11.7712 12.6666 10.6666C12.6666 9.56206 11.7712 8.66663 10.6666 8.66663C9.56202 8.66663 8.66658 9.56206 8.66658 10.6666C8.66658 11.7712 9.56202 12.6666 10.6666 12.6666ZM10.6666 14.6666C12.8757 14.6666 14.6666 12.8758 14.6666 10.6666C14.6666 8.45749 12.8757 6.66663 10.6666 6.66663C8.45745 6.66663 6.66658 8.45749 6.66658 10.6666C6.66658 12.8758 8.45745 14.6666 10.6666 14.6666Z\" fill=\"#44546F\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.3333 12.6666C22.4378 12.6666 23.3333 11.7712 23.3333 10.6666C23.3333 9.56206 22.4378 8.66663 21.3333 8.66663C20.2287 8.66663 19.3333 9.56206 19.3333 10.6666C19.3333 11.7712 20.2287 12.6666 21.3333 12.6666ZM21.3333 14.6666C23.5424 14.6666 25.3333 12.8758 25.3333 10.6666C25.3333 8.45749 23.5424 6.66663 21.3333 6.66663C19.1241 6.66663 17.3333 8.45749 17.3333 10.6666C17.3333 12.8758 19.1241 14.6666 21.3333 14.6666Z\" fill=\"#44546F\"/>\n<path d=\"M21.6666 16C24.4273 16.0004 26.6666 18.2385 26.6666 21V22.6666C26.6666 24.1394 25.4727 25.3333 23.9999 25.3333H20.135C18.0324 25.3333 16.1545 24.018 15.436 22.042L14.6843 19.9747C14.2531 18.7892 13.1264 18 11.8649 18H10.3333C8.6764 18 7.33325 19.3431 7.33325 21V22.6666C7.33325 23.0348 7.63173 23.3333 7.99992 23.3333H13.3333V25.3333H7.99992C6.52716 25.3333 5.33325 24.1394 5.33325 22.6666V21C5.33325 18.2385 7.57183 16 10.3333 16H11.8649C13.9674 16 15.8453 17.3153 16.5638 19.2913L17.3156 21.3585C17.7467 22.5441 18.8734 23.3333 20.135 23.3333H23.9999C24.3681 23.3333 24.6666 23.0348 24.6666 22.6666V21C24.6666 19.3437 23.3233 18.0004 21.6666 18H20.135V16H21.6666Z\" fill=\"#44546F\"/>\n<path d=\"M20.135 16C19.5972 16 18.7183 16.1407 18.0518 16.4564L18.908 18.2639C19.064 18.19 19.288 18.1205 19.537 18.0703C19.785 18.0203 20.0045 18 20.135 18V16Z\" fill=\"#44546F\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_2032_552\">\n<rect width=\"32\" height=\"32\" rx=\"4\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>"));
package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -12,7 +12,9 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var React = _react;
13
13
  var _runtime = require("@compiled/react/runtime");
14
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _fallback = require("./fallback");
17
+ var _constants = require("./fallback/constants");
16
18
  var _utils = require("./utils");
17
19
  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
20
  var boxShadowCssVar = '--avatar-box-shadow';
@@ -86,7 +88,7 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
86
88
  (0, _react.useEffect)(function () {
87
89
  setHasImageErrored(false);
88
90
  }, [avatarSrc]);
89
- if (!avatarSrc || hasImageErrored) {
91
+ if ((!avatarSrc || hasImageErrored) && !(0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
90
92
  return /*#__PURE__*/React.createElement(_fallback.FallbackAvatar, {
91
93
  "aria-label": alt,
92
94
  width: SIZES[size],
@@ -95,6 +97,18 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref) {
95
97
  compact: compact
96
98
  });
97
99
  }
100
+ if ((0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences')) {
101
+ var resolvedSrc = hasImageErrored ? _constants.TEAM_FALLBACK_AVATAR_DATA_URI : avatarSrc;
102
+ return /*#__PURE__*/React.createElement("img", {
103
+ src: resolvedSrc,
104
+ alt: alt,
105
+ "data-testid": testId && "".concat(testId, "--image"),
106
+ onError: function onError() {
107
+ return setHasImageErrored(true);
108
+ },
109
+ className: (0, _runtime.ax)([avatarImageStyles.image])
110
+ });
111
+ }
98
112
  return /*#__PURE__*/React.createElement("span", {
99
113
  "data-testid": testId,
100
114
  "aria-label": alt,
package/dist/cjs/ui/teams-avatar/teams-avatar-image/utils.js CHANGED
@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.getTeamAvatarSrc = getTeamAvatarSrc;
7
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
+ var _constants = require("./fallback/constants");
7
9
  /**
8
10
  * If a src value is given, we'll use that directly.
9
11
  * Otherwise we'll generate a static URL from the teamId.
@@ -15,5 +17,5 @@ function getTeamAvatarSrc(src, teamId) {
15
17
  } else if (teamId) {
16
18
  return "/gateway/api/v4/teams/".concat(teamId, "/avatar");
17
19
  }
18
- return undefined;
20
+ return (0, _platformFeatureFlags.fg)('enable_teams_t26_design_drop_core_experiences') ? _constants.TEAM_FALLBACK_AVATAR_DATA_URI : undefined;
19
21
  }
package/dist/es2019/ui/teams-avatar/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import React from 'react';
3
- import Avatar from '@atlaskit/avatar';
3
+ import Avatar, { AvatarContent } from '@atlaskit/avatar';
4
+ import { fg } from '@atlaskit/platform-feature-flags';
4
5
  import { TeamAvatarImage } from './teams-avatar-image';
5
6
 
6
7
  /*
@@ -22,6 +23,18 @@ export default function TeamAvatar({
22
23
  }) {
23
24
  // Strip ARI in case the teamId was given in that format
24
25
  teamId = teamId.replace('ari:cloud:identity::team/', '');
26
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
27
+ return /*#__PURE__*/React.createElement(Avatar, _extends({}, props, {
28
+ appearance: "square",
29
+ size: size,
30
+ testId: `${testId}-team-avatar`
31
+ }), /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement(TeamAvatarImage, {
32
+ src: src,
33
+ size: size,
34
+ testId: testId,
35
+ teamId: teamId
36
+ })));
37
+ }
25
38
  return /*#__PURE__*/React.createElement(Avatar, _extends({
26
39
  appearance: "square"
27
40
  }, props, {
package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/constants.js ADDED
@@ -0,0 +1,14 @@
1
+ export const TEAM_FALLBACK_AVATAR_DATA_URI = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g clip-path="url(#clip0_2032_552)">
3
+ <rect width="32" height="32" rx="4" fill="#DCDFE4"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6666 12.6666C11.7712 12.6666 12.6666 11.7712 12.6666 10.6666C12.6666 9.56206 11.7712 8.66663 10.6666 8.66663C9.56202 8.66663 8.66658 9.56206 8.66658 10.6666C8.66658 11.7712 9.56202 12.6666 10.6666 12.6666ZM10.6666 14.6666C12.8757 14.6666 14.6666 12.8758 14.6666 10.6666C14.6666 8.45749 12.8757 6.66663 10.6666 6.66663C8.45745 6.66663 6.66658 8.45749 6.66658 10.6666C6.66658 12.8758 8.45745 14.6666 10.6666 14.6666Z" fill="#44546F"/>
5
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3333 12.6666C22.4378 12.6666 23.3333 11.7712 23.3333 10.6666C23.3333 9.56206 22.4378 8.66663 21.3333 8.66663C20.2287 8.66663 19.3333 9.56206 19.3333 10.6666C19.3333 11.7712 20.2287 12.6666 21.3333 12.6666ZM21.3333 14.6666C23.5424 14.6666 25.3333 12.8758 25.3333 10.6666C25.3333 8.45749 23.5424 6.66663 21.3333 6.66663C19.1241 6.66663 17.3333 8.45749 17.3333 10.6666C17.3333 12.8758 19.1241 14.6666 21.3333 14.6666Z" fill="#44546F"/>
6
+ <path d="M21.6666 16C24.4273 16.0004 26.6666 18.2385 26.6666 21V22.6666C26.6666 24.1394 25.4727 25.3333 23.9999 25.3333H20.135C18.0324 25.3333 16.1545 24.018 15.436 22.042L14.6843 19.9747C14.2531 18.7892 13.1264 18 11.8649 18H10.3333C8.6764 18 7.33325 19.3431 7.33325 21V22.6666C7.33325 23.0348 7.63173 23.3333 7.99992 23.3333H13.3333V25.3333H7.99992C6.52716 25.3333 5.33325 24.1394 5.33325 22.6666V21C5.33325 18.2385 7.57183 16 10.3333 16H11.8649C13.9674 16 15.8453 17.3153 16.5638 19.2913L17.3156 21.3585C17.7467 22.5441 18.8734 23.3333 20.135 23.3333H23.9999C24.3681 23.3333 24.6666 23.0348 24.6666 22.6666V21C24.6666 19.3437 23.3233 18.0004 21.6666 18H20.135V16H21.6666Z" fill="#44546F"/>
7
+ <path d="M20.135 16C19.5972 16 18.7183 16.1407 18.0518 16.4564L18.908 18.2639C19.064 18.19 19.288 18.1205 19.537 18.0703C19.785 18.0203 20.0045 18 20.135 18V16Z" fill="#44546F"/>
8
+ </g>
9
+ <defs>
10
+ <clipPath id="clip0_2032_552">
11
+ <rect width="32" height="32" rx="4" fill="white"/>
12
+ </clipPath>
13
+ </defs>
14
+ </svg>`)}`;
package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -3,7 +3,9 @@ import "./index.compiled.css";
3
3
  import * as React from 'react';
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useEffect, useState } from 'react';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { FallbackAvatar } from './fallback';
8
+ import { TEAM_FALLBACK_AVATAR_DATA_URI } from './fallback/constants';
7
9
  import { getTeamAvatarSrc } from './utils';
8
10
  const boxShadowCssVar = '--avatar-box-shadow';
9
11
  const bgColorCssVar = '--avatar-bg-color';
@@ -72,7 +74,7 @@ export const TeamAvatarImage = ({
72
74
  useEffect(() => {
73
75
  setHasImageErrored(false);
74
76
  }, [avatarSrc]);
75
- if (!avatarSrc || hasImageErrored) {
77
+ if ((!avatarSrc || hasImageErrored) && !fg('enable_teams_t26_design_drop_core_experiences')) {
76
78
  return /*#__PURE__*/React.createElement(FallbackAvatar, {
77
79
  "aria-label": alt,
78
80
  width: SIZES[size],
@@ -81,6 +83,16 @@ export const TeamAvatarImage = ({
81
83
  compact: compact
82
84
  });
83
85
  }
86
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
87
+ const resolvedSrc = hasImageErrored ? TEAM_FALLBACK_AVATAR_DATA_URI : avatarSrc;
88
+ return /*#__PURE__*/React.createElement("img", {
89
+ src: resolvedSrc,
90
+ alt: alt,
91
+ "data-testid": testId && `${testId}--image`,
92
+ onError: () => setHasImageErrored(true),
93
+ className: ax([avatarImageStyles.image])
94
+ });
95
+ }
84
96
  return /*#__PURE__*/React.createElement("span", {
85
97
  "data-testid": testId,
86
98
  "aria-label": alt,
package/dist/es2019/ui/teams-avatar/teams-avatar-image/utils.js CHANGED
@@ -1,3 +1,6 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
+ import { TEAM_FALLBACK_AVATAR_DATA_URI } from './fallback/constants';
3
+
1
4
  /**
2
5
  * If a src value is given, we'll use that directly.
3
6
  * Otherwise we'll generate a static URL from the teamId.
@@ -9,5 +12,5 @@ export function getTeamAvatarSrc(src, teamId) {
9
12
  } else if (teamId) {
10
13
  return `/gateway/api/v4/teams/${teamId}/avatar`;
11
14
  }
12
- return undefined;
15
+ return fg('enable_teams_t26_design_drop_core_experiences') ? TEAM_FALLBACK_AVATAR_DATA_URI : undefined;
13
16
  }
package/dist/esm/ui/teams-avatar/index.js CHANGED
@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
3
  var _excluded = ["testId", "src", "size", "teamId", "compact"];
4
4
  import React from 'react';
5
- import Avatar from '@atlaskit/avatar';
5
+ import Avatar, { AvatarContent } from '@atlaskit/avatar';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { TeamAvatarImage } from './teams-avatar-image';
7
8
 
8
9
  /*
@@ -26,6 +27,18 @@ export default function TeamAvatar(_ref) {
26
27
  props = _objectWithoutProperties(_ref, _excluded);
27
28
  // Strip ARI in case the teamId was given in that format
28
29
  teamId = teamId.replace('ari:cloud:identity::team/', '');
30
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
31
+ return /*#__PURE__*/React.createElement(Avatar, _extends({}, props, {
32
+ appearance: "square",
33
+ size: size,
34
+ testId: "".concat(testId, "-team-avatar")
35
+ }), /*#__PURE__*/React.createElement(AvatarContent, null, /*#__PURE__*/React.createElement(TeamAvatarImage, {
36
+ src: src,
37
+ size: size,
38
+ testId: testId,
39
+ teamId: teamId
40
+ })));
41
+ }
29
42
  return /*#__PURE__*/React.createElement(Avatar, _extends({
30
43
  appearance: "square"
31
44
  }, props, {
package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/constants.js ADDED
@@ -0,0 +1 @@
1
+ export var TEAM_FALLBACK_AVATAR_DATA_URI = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g clip-path=\"url(#clip0_2032_552)\">\n<rect width=\"32\" height=\"32\" rx=\"4\" fill=\"#DCDFE4\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M10.6666 12.6666C11.7712 12.6666 12.6666 11.7712 12.6666 10.6666C12.6666 9.56206 11.7712 8.66663 10.6666 8.66663C9.56202 8.66663 8.66658 9.56206 8.66658 10.6666C8.66658 11.7712 9.56202 12.6666 10.6666 12.6666ZM10.6666 14.6666C12.8757 14.6666 14.6666 12.8758 14.6666 10.6666C14.6666 8.45749 12.8757 6.66663 10.6666 6.66663C8.45745 6.66663 6.66658 8.45749 6.66658 10.6666C6.66658 12.8758 8.45745 14.6666 10.6666 14.6666Z\" fill=\"#44546F\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M21.3333 12.6666C22.4378 12.6666 23.3333 11.7712 23.3333 10.6666C23.3333 9.56206 22.4378 8.66663 21.3333 8.66663C20.2287 8.66663 19.3333 9.56206 19.3333 10.6666C19.3333 11.7712 20.2287 12.6666 21.3333 12.6666ZM21.3333 14.6666C23.5424 14.6666 25.3333 12.8758 25.3333 10.6666C25.3333 8.45749 23.5424 6.66663 21.3333 6.66663C19.1241 6.66663 17.3333 8.45749 17.3333 10.6666C17.3333 12.8758 19.1241 14.6666 21.3333 14.6666Z\" fill=\"#44546F\"/>\n<path d=\"M21.6666 16C24.4273 16.0004 26.6666 18.2385 26.6666 21V22.6666C26.6666 24.1394 25.4727 25.3333 23.9999 25.3333H20.135C18.0324 25.3333 16.1545 24.018 15.436 22.042L14.6843 19.9747C14.2531 18.7892 13.1264 18 11.8649 18H10.3333C8.6764 18 7.33325 19.3431 7.33325 21V22.6666C7.33325 23.0348 7.63173 23.3333 7.99992 23.3333H13.3333V25.3333H7.99992C6.52716 25.3333 5.33325 24.1394 5.33325 22.6666V21C5.33325 18.2385 7.57183 16 10.3333 16H11.8649C13.9674 16 15.8453 17.3153 16.5638 19.2913L17.3156 21.3585C17.7467 22.5441 18.8734 23.3333 20.135 23.3333H23.9999C24.3681 23.3333 24.6666 23.0348 24.6666 22.6666V21C24.6666 19.3437 23.3233 18.0004 21.6666 18H20.135V16H21.6666Z\" fill=\"#44546F\"/>\n<path d=\"M20.135 16C19.5972 16 18.7183 16.1407 18.0518 16.4564L18.908 18.2639C19.064 18.19 19.288 18.1205 19.537 18.0703C19.785 18.0203 20.0045 18 20.135 18V16Z\" fill=\"#44546F\"/>\n</g>\n<defs>\n<clipPath id=\"clip0_2032_552\">\n<rect width=\"32\" height=\"32\" rx=\"4\" fill=\"white\"/>\n</clipPath>\n</defs>\n</svg>"));
package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -4,7 +4,9 @@ import "./index.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useEffect, useState } from 'react';
7
+ import { fg } from '@atlaskit/platform-feature-flags';
7
8
  import { FallbackAvatar } from './fallback';
9
+ import { TEAM_FALLBACK_AVATAR_DATA_URI } from './fallback/constants';
8
10
  import { getTeamAvatarSrc } from './utils';
9
11
  var boxShadowCssVar = '--avatar-box-shadow';
10
12
  var bgColorCssVar = '--avatar-bg-color';
@@ -77,7 +79,7 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
77
79
  useEffect(function () {
78
80
  setHasImageErrored(false);
79
81
  }, [avatarSrc]);
80
- if (!avatarSrc || hasImageErrored) {
82
+ if ((!avatarSrc || hasImageErrored) && !fg('enable_teams_t26_design_drop_core_experiences')) {
81
83
  return /*#__PURE__*/React.createElement(FallbackAvatar, {
82
84
  "aria-label": alt,
83
85
  width: SIZES[size],
@@ -86,6 +88,18 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref) {
86
88
  compact: compact
87
89
  });
88
90
  }
91
+ if (fg('enable_teams_t26_design_drop_core_experiences')) {
92
+ var resolvedSrc = hasImageErrored ? TEAM_FALLBACK_AVATAR_DATA_URI : avatarSrc;
93
+ return /*#__PURE__*/React.createElement("img", {
94
+ src: resolvedSrc,
95
+ alt: alt,
96
+ "data-testid": testId && "".concat(testId, "--image"),
97
+ onError: function onError() {
98
+ return setHasImageErrored(true);
99
+ },
100
+ className: ax([avatarImageStyles.image])
101
+ });
102
+ }
89
103
  return /*#__PURE__*/React.createElement("span", {
90
104
  "data-testid": testId,
91
105
  "aria-label": alt,
package/dist/esm/ui/teams-avatar/teams-avatar-image/utils.js CHANGED
@@ -1,3 +1,6 @@
1
+ import { fg } from '@atlaskit/platform-feature-flags';
2
+ import { TEAM_FALLBACK_AVATAR_DATA_URI } from './fallback/constants';
3
+
1
4
  /**
2
5
  * If a src value is given, we'll use that directly.
3
6
  * Otherwise we'll generate a static URL from the teamId.
@@ -9,5 +12,5 @@ export function getTeamAvatarSrc(src, teamId) {
9
12
  } else if (teamId) {
10
13
  return "/gateway/api/v4/teams/".concat(teamId, "/avatar");
11
14
  }
12
- return undefined;
15
+ return fg('enable_teams_t26_design_drop_core_experiences') ? TEAM_FALLBACK_AVATAR_DATA_URI : undefined;
13
16
  }
package/dist/types/ui/teams-avatar/teams-avatar-image/fallback/constants.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const TEAM_FALLBACK_AVATAR_DATA_URI: string;
package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/fallback/constants.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const TEAM_FALLBACK_AVATAR_DATA_URI: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/teams-avatar",
3
- "version": "2.4.15",
3
+ "version": "2.5.0",
4
4
  "description": "A team avatar is a visual representation of a team.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -50,7 +50,7 @@
50
50
  "@af/integration-testing": "workspace:^",
51
51
  "@af/visual-regression": "workspace:^",
52
52
  "@atlaskit/ssr": "workspace:^",
53
- "@atlassian/teams-app-internal-playground": "^1.13.0",
53
+ "@atlassian/teams-app-internal-playground": "^1.14.0",
54
54
  "@testing-library/react": "^16.3.0",
55
55
  "react-dom": "^18.2.0",
56
56
  "wait-for-expect": "^1.2.0"
@@ -58,6 +58,9 @@
58
58
  "platform-feature-flags": {
59
59
  "yurree_jjj_3_ads_fixes": {
60
60
  "type": "boolean"
61
+ },
62
+ "enable_teams_t26_design_drop_core_experiences": {
63
+ "type": "boolean"
61
64
  }
62
65
  },
63
66
  "techstack": {