@atlaskit/teams-avatar 1.2.2 → 1.3.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 (10) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.js +48 -0
  3. package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js +18 -0
  4. package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.js +41 -0
  5. package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js +18 -0
  6. package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.js +41 -0
  7. package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js +18 -0
  8. package/dist/types/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts +2 -0
  9. package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts +2 -0
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/teams-avatar
2
2
 
3
+ ## 1.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#116733](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116733)
8
+ [`8382a04b535cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8382a04b535cd) -
9
+ Updated fallback avatar
10
+
11
+ ## 1.2.3
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 1.2.2
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/ui/teams-avatar/teams-avatar-image/fallback/index.js ADDED
@@ -0,0 +1,48 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.FallbackAvatar = FallbackAvatar;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var _react = _interopRequireDefault(require("react"));
10
+ function FallbackAvatar(props) {
11
+ return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
12
+ width: "32",
13
+ height: "32",
14
+ viewBox: "0 0 32 32",
15
+ fill: "none",
16
+ xmlns: "http://www.w3.org/2000/svg"
17
+ }, props), /*#__PURE__*/_react.default.createElement("g", {
18
+ clipPath: "url(#clip0_2032_552)"
19
+ }, /*#__PURE__*/_react.default.createElement("rect", {
20
+ width: "32",
21
+ height: "32",
22
+ rx: "4",
23
+ fill: "#DCDFE4"
24
+ }), /*#__PURE__*/_react.default.createElement("path", {
25
+ fillRule: "evenodd",
26
+ clipRule: "evenodd",
27
+ 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",
28
+ fill: "#44546F"
29
+ }), /*#__PURE__*/_react.default.createElement("path", {
30
+ fillRule: "evenodd",
31
+ clipRule: "evenodd",
32
+ 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",
33
+ fill: "#44546F"
34
+ }), /*#__PURE__*/_react.default.createElement("path", {
35
+ 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",
36
+ fill: "#44546F"
37
+ }), /*#__PURE__*/_react.default.createElement("path", {
38
+ 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",
39
+ fill: "#44546F"
40
+ })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
41
+ id: "clip0_2032_552"
42
+ }, /*#__PURE__*/_react.default.createElement("rect", {
43
+ width: "32",
44
+ height: "32",
45
+ rx: "4",
46
+ fill: "white"
47
+ }))));
48
+ }
package/dist/cjs/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -12,7 +12,9 @@ var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
13
  var _avatar = require("@atlaskit/avatar");
14
14
  var _people = _interopRequireDefault(require("@atlaskit/icon/glyph/people"));
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _colors = require("@atlaskit/theme/colors");
17
+ var _fallback = require("./fallback");
16
18
  var _excluded = ["alt", "src", "size", "testId"];
17
19
  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; }
18
20
  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; } /**
@@ -32,6 +34,14 @@ var avatarDefaultIconStyles = (0, _react2.css)({
32
34
  justifyContent: 'center',
33
35
  alignItems: 'center'
34
36
  });
37
+ var SIZES = {
38
+ xsmall: 16,
39
+ small: 24,
40
+ medium: 32,
41
+ large: 40,
42
+ xlarge: 96,
43
+ xxlarge: 128
44
+ };
35
45
  var nestedAvatarStyles = Object.entries(_avatar.AVATAR_SIZES).reduce(function (styles, _ref) {
36
46
  var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
37
47
  key = _ref2[0],
@@ -79,6 +89,14 @@ var TeamAvatarImage = exports.TeamAvatarImage = function TeamAvatarImage(_ref3)
79
89
  setHasImageErrored(false);
80
90
  }, [src]);
81
91
  if (!src || hasImageErrored) {
92
+ if ((0, _platformFeatureFlags.fg)('enable-team-avatar-switch')) {
93
+ return (0, _react2.jsx)(_fallback.FallbackAvatar, {
94
+ "aria-label": alt,
95
+ width: SIZES[size],
96
+ height: SIZES[size],
97
+ "data-testid": testId
98
+ });
99
+ }
82
100
  return (0, _react2.jsx)("span", {
83
101
  css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
84
102
  }, (0, _react2.jsx)(_people.default, {
package/dist/es2019/ui/teams-avatar/teams-avatar-image/fallback/index.js ADDED
@@ -0,0 +1,41 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ export function FallbackAvatar(props) {
4
+ return /*#__PURE__*/React.createElement("svg", _extends({
5
+ width: "32",
6
+ height: "32",
7
+ viewBox: "0 0 32 32",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg"
10
+ }, props), /*#__PURE__*/React.createElement("g", {
11
+ clipPath: "url(#clip0_2032_552)"
12
+ }, /*#__PURE__*/React.createElement("rect", {
13
+ width: "32",
14
+ height: "32",
15
+ rx: "4",
16
+ fill: "#DCDFE4"
17
+ }), /*#__PURE__*/React.createElement("path", {
18
+ fillRule: "evenodd",
19
+ clipRule: "evenodd",
20
+ 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",
21
+ fill: "#44546F"
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ fillRule: "evenodd",
24
+ clipRule: "evenodd",
25
+ 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",
26
+ fill: "#44546F"
27
+ }), /*#__PURE__*/React.createElement("path", {
28
+ 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",
29
+ fill: "#44546F"
30
+ }), /*#__PURE__*/React.createElement("path", {
31
+ 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",
32
+ fill: "#44546F"
33
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
34
+ id: "clip0_2032_552"
35
+ }, /*#__PURE__*/React.createElement("rect", {
36
+ width: "32",
37
+ height: "32",
38
+ rx: "4",
39
+ fill: "white"
40
+ }))));
41
+ }
package/dist/es2019/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -8,7 +8,9 @@ import { useEffect, useState } from 'react';
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import { AVATAR_SIZES } from '@atlaskit/avatar';
10
10
  import TeamIcon from '@atlaskit/icon/glyph/people';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { N0, N90 } from '@atlaskit/theme/colors';
13
+ import { FallbackAvatar } from './fallback';
12
14
  const ICON_BACKGROUND = `var(--ds-icon-inverse, ${N0})`;
13
15
  const ICON_COLOR = `var(--ds-icon-subtle, ${N90})`;
14
16
  // used in a size calculation so can't be a token. Without this the avatar looks very squished
@@ -22,6 +24,14 @@ const avatarDefaultIconStyles = css({
22
24
  justifyContent: 'center',
23
25
  alignItems: 'center'
24
26
  });
27
+ const SIZES = {
28
+ xsmall: 16,
29
+ small: 24,
30
+ medium: 32,
31
+ large: 40,
32
+ xlarge: 96,
33
+ xxlarge: 128
34
+ };
25
35
  const nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce((styles, [key, size]) => {
26
36
  return {
27
37
  ...styles,
@@ -66,6 +76,14 @@ export const TeamAvatarImage = ({
66
76
  setHasImageErrored(false);
67
77
  }, [src]);
68
78
  if (!src || hasImageErrored) {
79
+ if (fg('enable-team-avatar-switch')) {
80
+ return jsx(FallbackAvatar, {
81
+ "aria-label": alt,
82
+ width: SIZES[size],
83
+ height: SIZES[size],
84
+ "data-testid": testId
85
+ });
86
+ }
69
87
  return jsx("span", {
70
88
  css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
71
89
  }, jsx(TeamIcon, {
package/dist/esm/ui/teams-avatar/teams-avatar-image/fallback/index.js ADDED
@@ -0,0 +1,41 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ export function FallbackAvatar(props) {
4
+ return /*#__PURE__*/React.createElement("svg", _extends({
5
+ width: "32",
6
+ height: "32",
7
+ viewBox: "0 0 32 32",
8
+ fill: "none",
9
+ xmlns: "http://www.w3.org/2000/svg"
10
+ }, props), /*#__PURE__*/React.createElement("g", {
11
+ clipPath: "url(#clip0_2032_552)"
12
+ }, /*#__PURE__*/React.createElement("rect", {
13
+ width: "32",
14
+ height: "32",
15
+ rx: "4",
16
+ fill: "#DCDFE4"
17
+ }), /*#__PURE__*/React.createElement("path", {
18
+ fillRule: "evenodd",
19
+ clipRule: "evenodd",
20
+ 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",
21
+ fill: "#44546F"
22
+ }), /*#__PURE__*/React.createElement("path", {
23
+ fillRule: "evenodd",
24
+ clipRule: "evenodd",
25
+ 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",
26
+ fill: "#44546F"
27
+ }), /*#__PURE__*/React.createElement("path", {
28
+ 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",
29
+ fill: "#44546F"
30
+ }), /*#__PURE__*/React.createElement("path", {
31
+ 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",
32
+ fill: "#44546F"
33
+ })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
34
+ id: "clip0_2032_552"
35
+ }, /*#__PURE__*/React.createElement("rect", {
36
+ width: "32",
37
+ height: "32",
38
+ rx: "4",
39
+ fill: "white"
40
+ }))));
41
+ }
package/dist/esm/ui/teams-avatar/teams-avatar-image/index.js CHANGED
@@ -14,7 +14,9 @@ import { useEffect, useState } from 'react';
14
14
  import { css, jsx } from '@emotion/react';
15
15
  import { AVATAR_SIZES } from '@atlaskit/avatar';
16
16
  import TeamIcon from '@atlaskit/icon/glyph/people';
17
+ import { fg } from '@atlaskit/platform-feature-flags';
17
18
  import { N0, N90 } from '@atlaskit/theme/colors';
19
+ import { FallbackAvatar } from './fallback';
18
20
  var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat(N0, ")");
19
21
  var ICON_COLOR = "var(--ds-icon-subtle, ".concat(N90, ")");
20
22
  // used in a size calculation so can't be a token. Without this the avatar looks very squished
@@ -28,6 +30,14 @@ var avatarDefaultIconStyles = css({
28
30
  justifyContent: 'center',
29
31
  alignItems: 'center'
30
32
  });
33
+ var SIZES = {
34
+ xsmall: 16,
35
+ small: 24,
36
+ medium: 32,
37
+ large: 40,
38
+ xlarge: 96,
39
+ xxlarge: 128
40
+ };
31
41
  var nestedAvatarStyles = Object.entries(AVATAR_SIZES).reduce(function (styles, _ref) {
32
42
  var _ref2 = _slicedToArray(_ref, 2),
33
43
  key = _ref2[0],
@@ -75,6 +85,14 @@ export var TeamAvatarImage = function TeamAvatarImage(_ref3) {
75
85
  setHasImageErrored(false);
76
86
  }, [src]);
77
87
  if (!src || hasImageErrored) {
88
+ if (fg('enable-team-avatar-switch')) {
89
+ return jsx(FallbackAvatar, {
90
+ "aria-label": alt,
91
+ width: SIZES[size],
92
+ height: SIZES[size],
93
+ "data-testid": testId
94
+ });
95
+ }
78
96
  return jsx("span", {
79
97
  css: [avatarDefaultIconStyles, nestedAvatarStyles[size]]
80
98
  }, jsx(TeamIcon, {
package/dist/types/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
package/dist/types-ts4.5/ui/teams-avatar/teams-avatar-image/fallback/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import React from 'react';
2
+ export declare function FallbackAvatar(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/teams-avatar",
3
- "version": "1.2.2",
3
+ "version": "1.3.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",
@@ -36,9 +36,9 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@atlaskit/avatar": "^21.18.0",
39
- "@atlaskit/icon": "^23.7.0",
40
- "@atlaskit/platform-feature-flags": "^1.0.0",
41
- "@atlaskit/theme": "^15.0.0",
39
+ "@atlaskit/icon": "^23.11.0",
40
+ "@atlaskit/platform-feature-flags": "^1.1.0",
41
+ "@atlaskit/theme": "^16.0.0",
42
42
  "@atlaskit/tokens": "^3.3.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"