@atlaskit/teams-avatar 1.0.0

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/teams-avatar

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,9 @@
+# TeamsAvatar
+
+A team avatar is a visual representation of a team.
+
+## Usage
+
+`import TeamsAvatar from '@atlaskit/teams-avatar';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/people-and-teams/teams-avatar).

package/dist/cjs/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _teamsAvatar.default;
+  }
+});
+var _teamsAvatar = _interopRequireDefault(require("./ui/teams-avatar"));

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

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_COLOR = exports.ICON_BACKGROUND = void 0;
+exports.default = TeamAvatar;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _colors = require("@atlaskit/theme/colors");
+var _teamsAvatarImage = require("./teams-avatar-image");
+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, ")");
+function TeamAvatar(_ref) {
+  var testId = _ref.testId,
+    src = _ref.src,
+    _ref$size = _ref.size,
+    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"
+  }, props, {
+    size: size,
+    src: src,
+    testId: "".concat(testId, "-team-avatar")
+  }), function (innerProps) {
+    return /*#__PURE__*/_react.default.createElement(_teamsAvatarImage.TeamAvatarImage, (0, _extends2.default)({
+      src: src,
+      size: size,
+      testId: testId
+    }, innerProps));
+  });
+}

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

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TeamAvatarImage = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _avatar = require("@atlaskit/avatar");
+var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
+var _colors = require("@atlaskit/theme/colors");
+var _excluded = ["alt", "src", "size", "testId"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(_colors.N0, ")");
+var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
+// used in a size calculation so can't be a token. Without this the avatar looks very squished
+var ICON_PADDING = 4;
+var avatarDefaultIconStyles = (0, _react2.css)({
+  display: 'flex',
+  backgroundColor: ICON_COLOR,
+  borderRadius: '50%',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var nestedAvatarStyles = Object.entries(_avatar.AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, (0, _defineProperty2.default)({}, key, (0, _react2.css)({
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    '& svg': {
+      width: "".concat(size - ICON_PADDING, "px"),
+      height: "".concat(size - ICON_PADDING, "px")
+    }
+  })));
+}, {});
+var avatarImageStyles = (0, _react2.css)({
+  display: 'flex',
+  flex: '1 1 100%',
+  width: '100%',
+  height: '100%'
+});
+
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref3) {
+  var _ref3$alt = _ref3.alt,
+    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
+    src = _ref3.src,
+    size = _ref3.size,
+    testId = _ref3.testId,
+    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If src changes, reset state
+  (0, _react.useEffect)(function () {
+    setHasImageErrored(false);
+  }, [src]);
+  if (!src || hasImageErrored) {
+    return (0, _react2.jsx)("span", {
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
+    }, (0, _react2.jsx)(_people.default, {
+      label: alt,
+      primaryColor: ICON_BACKGROUND,
+      secondaryColor: ICON_COLOR,
+      testId: testId && "".concat(testId, "--team")
+    }));
+  }
+  return (0, _react2.jsx)("span", rest, (0, _react2.jsx)("img", {
+    src: src,
+    alt: alt,
+    "data-testid": testId && "".concat(testId, "--image"),
+    css: avatarImageStyles,
+    onError: function onError() {
+      return setHasImageErrored(true);
+    }
+  }));
+};

package/dist/es2019/index.js

@@ -0,0 +1 @@
+export { default } from './ui/teams-avatar';

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import { N0, N90 } from '@atlaskit/theme/colors';
+import { TeamAvatarImage } from './teams-avatar-image';
+export const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
+export const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
+export default function TeamAvatar({
+  testId,
+  src,
+  size = 'medium',
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(Avatar, _extends({
+    appearance: "circle"
+  }, props, {
+    size: size,
+    src: src,
+    testId: `${testId}-team-avatar`
+  }), innerProps => /*#__PURE__*/React.createElement(TeamAvatarImage, _extends({
+    src: src,
+    size: size,
+    testId: testId
+  }, innerProps)));
+}

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

@@ -0,0 +1,76 @@
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { AVATAR_SIZES } from '@atlaskit/avatar';
+import TeamIcon from '@atlaskit/icon/glyph/people';
+import { N0, N90 } from '@atlaskit/theme/colors';
+const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
+const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
+// used in a size calculation so can't be a token. Without this the avatar looks very squished
+const ICON_PADDING = 4;
+const avatarDefaultIconStyles = css({
+  display: 'flex',
+  backgroundColor: ICON_COLOR,
+  borderRadius: '50%',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
+  return {
+    ...styles,
+    [key]: css({
+      width: `${size}px`,
+      height: `${size}px`,
+      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+      '& svg': {
+        width: `${size - ICON_PADDING}px`,
+        height: `${size - ICON_PADDING}px`
+      }
+    })
+  };
+}, {});
+const avatarImageStyles = css({
+  display: 'flex',
+  flex: '1 1 100%',
+  width: '100%',
+  height: '100%'
+});
+
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export const TeamAvatarImage = ({
+  alt = '',
+  src,
+  size,
+  testId,
+  ...rest
+}) => {
+  const [hasImageErrored, setHasImageErrored] = useState(false);
+
+  // If src changes, reset state
+  useEffect(() => {
+    setHasImageErrored(false);
+  }, [src]);
+  if (!src || hasImageErrored) {
+    return jsx("span", {
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
+    }, jsx(TeamIcon, {
+      label: alt,
+      primaryColor: ICON_BACKGROUND,
+      secondaryColor: ICON_COLOR,
+      testId: testId && `${testId}--team`
+    }));
+  }
+  return jsx("span", rest, jsx("img", {
+    src: src,
+    alt: alt,
+    "data-testid": testId && `${testId}--image`,
+    css: avatarImageStyles,
+    onError: () => setHasImageErrored(true)
+  }));
+};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export { default } from './ui/teams-avatar';

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

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["testId", "src", "size"];
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import { N0, N90 } from '@atlaskit/theme/colors';
+import { TeamAvatarImage } from './teams-avatar-image';
+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) {
+  var testId = _ref.testId,
+    src = _ref.src,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Avatar, _extends({
+    appearance: "circle"
+  }, props, {
+    size: size,
+    src: src,
+    testId: "".concat(testId, "-team-avatar")
+  }), function (innerProps) {
+    return /*#__PURE__*/React.createElement(TeamAvatarImage, _extends({
+      src: src,
+      size: size,
+      testId: testId
+    }, innerProps));
+  });
+}

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

@@ -0,0 +1,87 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["alt", "src", "size", "testId"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { AVATAR_SIZES } from '@atlaskit/avatar';
+import TeamIcon from '@atlaskit/icon/glyph/people';
+import { N0, N90 } from '@atlaskit/theme/colors';
+var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
+var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
+// used in a size calculation so can't be a token. Without this the avatar looks very squished
+var ICON_PADDING = 4;
+var avatarDefaultIconStyles = css({
+  display: 'flex',
+  backgroundColor: ICON_COLOR,
+  borderRadius: '50%',
+  width: '100%',
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
+  var _ref2 = _slicedToArray(_ref, 2),
+    key = _ref2[0],
+    size = _ref2[1];
+  return _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key, css({
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    '& svg': {
+      width: "".concat(size - ICON_PADDING, "px"),
+      height: "".concat(size - ICON_PADDING, "px")
+    }
+  })));
+}, {});
+var avatarImageStyles = css({
+  display: 'flex',
+  flex: '1 1 100%',
+  width: '100%',
+  height: '100%'
+});
+
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export var TeamAvatarImage = function TeamAvatarImage(_ref3) {
+  var _ref3$alt = _ref3.alt,
+    alt = _ref3$alt === void 0 ? '' : _ref3$alt,
+    src = _ref3.src,
+    size = _ref3.size,
+    testId = _ref3.testId,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasImageErrored = _useState2[0],
+    setHasImageErrored = _useState2[1];
+
+  // If src changes, reset state
+  useEffect(function () {
+    setHasImageErrored(false);
+  }, [src]);
+  if (!src || hasImageErrored) {
+    return jsx("span", {
+      css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
+    }, jsx(TeamIcon, {
+      label: alt,
+      primaryColor: ICON_BACKGROUND,
+      secondaryColor: ICON_COLOR,
+      testId: testId && "".concat(testId, "--team")
+    }));
+  }
+  return jsx("span", rest, jsx("img", {
+    src: src,
+    alt: alt,
+    "data-testid": testId && "".concat(testId, "--image"),
+    css: avatarImageStyles,
+    onError: function onError() {
+      return setHasImageErrored(true);
+    }
+  }));
+};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export { default, type TeamAvatarProps } from './ui/teams-avatar';

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

@@ -0,0 +1,6 @@
+/// <reference types="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;

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

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react';
+import { CustomAvatarProps, SizeType } from '@atlaskit/avatar';
+type AvatarImageProps = {
+    size: SizeType;
+    alt?: string;
+    src?: string;
+    testId?: string;
+} & CustomAvatarProps;
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export declare const TeamAvatarImage: ({ alt, src, size, testId, ...rest }: AvatarImageProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1 @@
+export { default, type TeamAvatarProps } from './ui/teams-avatar';

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

@@ -0,0 +1,6 @@
+/// <reference types="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;

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

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react';
+import { CustomAvatarProps, SizeType } from '@atlaskit/avatar';
+type AvatarImageProps = {
+    size: SizeType;
+    alt?: string;
+    src?: string;
+    testId?: string;
+} & CustomAvatarProps;
+/**
+ * __Avatar image__
+ *
+ * An avatar image is an internal component used to control the rendering phases of an image.
+ */
+export declare const TeamAvatarImage: ({ alt, src, size, testId, ...rest }: AvatarImageProps) => jsx.JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@atlaskit/teams-avatar",
+  "version": "1.0.0",
+  "description": "A team avatar is a visual representation of a team.",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "People and Teams Collective",
+    "inPublicMirror": false,
+    "releaseModel": "continuous",
+    "website": {
+      "name": "TeamsAvatar",
+      "category": "Components"
+    }
+  },
+  "repository": "https://stash.atlassian.com/projects/ATLASSIAN/repos/atlassian-frontend-monorepo",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/avatar": "^21.5.0",
+    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.35.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "devDependencies": {
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "code-structure": [
+        "tangerine-next"
+      ],
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "compiled"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}