@atlaskit/teams-avatar 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/teams-avatar
 
+## 1.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/ui/teams-avatar/index.js

@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _colors = require("@atlaskit/theme/colors");
 var _teamsAvatarImage = require("./teams-avatar-image");
+var _utils = require("./utils");
 var _excluded = ["testId", "src", "size"];
 var ICON_BACKGROUND = exports.ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
 var ICON_COLOR = exports.ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
@@ -22,7 +23,7 @@ function TeamAvatar(_ref) {
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({
-    appearance: "circle"
+    appearance: (0, _utils.isSquareIcon)(src) ? 'square' : 'circle'
   }, props, {
     size: size,
     src: src,

package/dist/cjs/ui/teams-avatar/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSquareIcon = isSquareIcon;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/**
+ * This is a hack to toggle between square and circle icons based on the
+ * network response as we want to FG the change in the BE.
+ * This func will be removed once the BE is rolled out.
+ * Square icon URLs:
+ * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
+ * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ */
+function isSquareIcon(src) {
+  if (!src) {
+    return false;
+  }
+  try {
+    var url = new URL(src);
+    var host = url.host;
+    var path = url.pathname;
+    if ((host.startsWith('ptc-directory-sited-static') || host.startsWith('teams-directory-frontend')) && path.includes('teams/avatars/v4') && (0, _platformFeatureFlags.fg)('enable-team-avatar-switch')) {
+      return true;
+    }
+  } catch (_unused) {
+    // The src wasn't a URL, so it's obviously not the refreshed avatar.
+  }
+  return false;
+}

package/dist/es2019/ui/teams-avatar/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import Avatar from '@atlaskit/avatar';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { TeamAvatarImage } from './teams-avatar-image';
+import { isSquareIcon } from './utils';
 export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
 export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
 export default function TeamAvatar({
@@ -12,7 +13,7 @@ export default function TeamAvatar({
   ...props
 }) {
   return /*#__PURE__*/React.createElement(Avatar, _extends({
-    appearance: "circle"
+    appearance: isSquareIcon(src) ? 'square' : 'circle'
   }, props, {
     size: size,
     src: src,

package/dist/es2019/ui/teams-avatar/utils.js

@@ -0,0 +1,25 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * This is a hack to toggle between square and circle icons based on the
+ * network response as we want to FG the change in the BE.
+ * This func will be removed once the BE is rolled out.
+ * Square icon URLs:
+ * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
+ * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ */
+export function isSquareIcon(src) {
+  if (!src) {
+    return false;
+  }
+  try {
+    const url = new URL(src);
+    const host = url.host;
+    const path = url.pathname;
+    if ((host.startsWith('ptc-directory-sited-static') || host.startsWith('teams-directory-frontend')) && path.includes('teams/avatars/v4') && fg('enable-team-avatar-switch')) {
+      return true;
+    }
+  } catch {
+    // The src wasn't a URL, so it's obviously not the refreshed avatar.
+  }
+  return false;
+}

package/dist/esm/ui/teams-avatar/index.js

@@ -5,6 +5,7 @@ import React from 'react';
 import Avatar from '@atlaskit/avatar';
 import { N0, N90 } from '@atlaskit/theme/colors';
 import { TeamAvatarImage } from './teams-avatar-image';
+import { isSquareIcon } from './utils';
 export var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
 export var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
 export default function TeamAvatar(_ref) {
@@ -14,7 +15,7 @@ export default function TeamAvatar(_ref) {
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(Avatar, _extends({
-    appearance: "circle"
+    appearance: isSquareIcon(src) ? 'square' : 'circle'
   }, props, {
     size: size,
     src: src,

package/dist/esm/ui/teams-avatar/utils.js

@@ -0,0 +1,25 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+/**
+ * This is a hack to toggle between square and circle icons based on the
+ * network response as we want to FG the change in the BE.
+ * This func will be removed once the BE is rolled out.
+ * Square icon URLs:
+ * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
+ * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ */
+export function isSquareIcon(src) {
+  if (!src) {
+    return false;
+  }
+  try {
+    var url = new URL(src);
+    var host = url.host;
+    var path = url.pathname;
+    if ((host.startsWith('ptc-directory-sited-static') || host.startsWith('teams-directory-frontend')) && path.includes('teams/avatars/v4') && fg('enable-team-avatar-switch')) {
+      return true;
+    }
+  } catch (_unused) {
+    // The src wasn't a URL, so it's obviously not the refreshed avatar.
+  }
+  return false;
+}

package/dist/types/ui/teams-avatar/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { type AvatarPropTypes } from '@atlaskit/avatar';
 export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'>;
 export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
 export declare const ICON_COLOR: "var(--ds-icon-subtle)";
-export default function TeamAvatar({ testId, src, size, ...props }: TeamAvatarProps): JSX.Element;
+export default function TeamAvatar({ testId, src, size, ...props }: TeamAvatarProps): React.JSX.Element;

package/dist/types/ui/teams-avatar/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This is a hack to toggle between square and circle icons based on the
+ * network response as we want to FG the change in the BE.
+ * This func will be removed once the BE is rolled out.
+ * Square icon URLs:
+ * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
+ * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ */
+export declare function isSquareIcon(src?: string): boolean;

package/dist/types-ts4.5/ui/teams-avatar/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { type AvatarPropTypes } from '@atlaskit/avatar';
 export type TeamAvatarProps = Omit<AvatarPropTypes, 'appearance'>;
 export declare const ICON_BACKGROUND: "var(--ds-icon-inverse)";
 export declare const ICON_COLOR: "var(--ds-icon-subtle)";
-export default function TeamAvatar({ testId, src, size, ...props }: TeamAvatarProps): JSX.Element;
+export default function TeamAvatar({ testId, src, size, ...props }: TeamAvatarProps): React.JSX.Element;

package/dist/types-ts4.5/ui/teams-avatar/utils.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This is a hack to toggle between square and circle icons based on the
+ * network response as we want to FG the change in the BE.
+ * This func will be removed once the BE is rolled out.
+ * Square icon URLs:
+ * - https://ptc-directory-sited-static.us-east-1.prod.public.atl-paas.net/teams/avatars/v4/blue_4.svg
+ * - https://teams-directory-frontend.stg-east.frontend.public.atl-paas.net/assets/teams/avatars/v4/blue_1.svg
+ */
+export declare function isSquareIcon(src?: string): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/teams-avatar",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"description": "A team avatar is a visual representation of a team.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,8 +36,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/avatar": "^21.18.0",
-		"@atlaskit/icon": "^23.5.0",
-		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/icon": "^23.7.0",
+		"@atlaskit/platform-feature-flags": "^1.0.0",
+		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -50,6 +51,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2",
@@ -92,5 +94,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"enable-team-avatar-switch": {
+			"type": "boolean"
+		}
 	}
 }