@atlaskit/avatar 21.4.6 → 21.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 (17) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/Avatar.js +5 -2
  3. package/dist/cjs/Presence.js +5 -1
  4. package/dist/cjs/Status.js +5 -1
  5. package/dist/es2019/Avatar.js +5 -2
  6. package/dist/es2019/Presence.js +5 -1
  7. package/dist/es2019/Status.js +5 -1
  8. package/dist/esm/Avatar.js +5 -2
  9. package/dist/esm/Presence.js +5 -1
  10. package/dist/esm/Status.js +5 -1
  11. package/dist/types/Avatar.d.ts +3 -1
  12. package/dist/types/Presence.d.ts +5 -1
  13. package/dist/types/Status.d.ts +5 -1
  14. package/dist/types-ts4.5/Avatar.d.ts +3 -1
  15. package/dist/types-ts4.5/Presence.d.ts +5 -1
  16. package/dist/types-ts4.5/Status.d.ts +5 -1
  17. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/avatar
2
2
 
3
+ ## 21.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#69996](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69996) [`1b320a82df61`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b320a82df61) - Add Team fallback avatar
8
+ - [#73763](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73763) [`20bb01a34fcd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/20bb01a34fcd) - test id selector added to Avatar label
9
+
3
10
  ## 21.4.6
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/Avatar.js CHANGED
@@ -23,7 +23,7 @@ var _templateObject;
23
23
  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; }
24
24
  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; }
25
25
  var packageName = "@atlaskit/avatar";
26
- var packageVersion = "21.4.6";
26
+ var packageVersion = "21.5.0";
27
27
 
28
28
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
29
29
 
@@ -42,11 +42,13 @@ var getStyles = function getStyles(css, _ref) {
42
42
  };
43
43
 
44
44
  /**
45
+ * __Avatar__
46
+ *
45
47
  * An avatar is a visual representation of a user or entity.
46
48
  *
47
49
  * - [Examples](https://atlassian.design/components/avatar/examples)
48
50
  * - [Code](https://atlassian.design/components/avatar/code)
49
- * - [Usage](https://atlassian.design/components/avatar/usage).
51
+ * - [Usage](https://atlassian.design/components/avatar/usage)
50
52
  */
51
53
  var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
52
54
  var analyticsContext = _ref2.analyticsContext,
@@ -190,6 +192,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
190
192
  status: typeof status === 'string' ? status : undefined,
191
193
  testId: testId
192
194
  }, customStatusNode), containerShouldBeImage ? (0, _react2.jsx)("span", {
195
+ "data-testid": testId && "".concat(testId, "--label"),
193
196
  id: "".concat(uuid, "-label"),
194
197
  hidden: true
195
198
  }, defaultLabel) : undefined);
package/dist/cjs/Presence.js CHANGED
@@ -54,11 +54,13 @@ function getPresence(presence) {
54
54
  }
55
55
 
56
56
  /**
57
+ * __Avatar presence__
58
+ *
57
59
  * A presence shows an avatar’s availability.
58
60
  *
59
61
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
60
62
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
61
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
63
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
62
64
  */
63
65
  var AvatarPresence = function AvatarPresence(_ref) {
64
66
  var borderColor = _ref.borderColor,
@@ -76,6 +78,8 @@ var AvatarPresence = function AvatarPresence(_ref) {
76
78
  };
77
79
  var _default = exports.default = AvatarPresence;
78
80
  /**
81
+ * __Presence wrapper__
82
+ *
79
83
  * A presence wrapper is used internally to position presence ontop of the avatar.
80
84
  */
81
85
  var PresenceWrapper = exports.PresenceWrapper = function PresenceWrapper(_ref2) {
package/dist/cjs/Status.js CHANGED
@@ -53,10 +53,12 @@ function getStatus(status) {
53
53
  }
54
54
 
55
55
  /**
56
+ * __Avatar status__
57
+ *
56
58
  * An avatar status shows contextual information, such as if someone approves or declines something.
57
59
  *
58
60
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
59
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
61
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
60
62
  */
61
63
  var AvatarStatus = function AvatarStatus(_ref) {
62
64
  var borderColor = _ref.borderColor,
@@ -74,6 +76,8 @@ var AvatarStatus = function AvatarStatus(_ref) {
74
76
  };
75
77
  var _default = exports.default = AvatarStatus;
76
78
  /**
79
+ * __Status wrapper__
80
+ *
77
81
  * A status wrapper is used internally to position status on top of the avatar.
78
82
  */
79
83
  var StatusWrapper = exports.StatusWrapper = function StatusWrapper(_ref2) {
package/dist/es2019/Avatar.js CHANGED
@@ -11,7 +11,7 @@ import { PresenceWrapper } from './Presence';
11
11
  import { StatusWrapper } from './Status';
12
12
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
13
13
  const packageName = "@atlaskit/avatar";
14
- const packageVersion = "21.4.6";
14
+ const packageVersion = "21.5.0";
15
15
 
16
16
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
17
17
 
@@ -117,11 +117,13 @@ css`
117
117
  `;
118
118
 
119
119
  /**
120
+ * __Avatar__
121
+ *
120
122
  * An avatar is a visual representation of a user or entity.
121
123
  *
122
124
  * - [Examples](https://atlassian.design/components/avatar/examples)
123
125
  * - [Code](https://atlassian.design/components/avatar/code)
124
- * - [Usage](https://atlassian.design/components/avatar/usage).
126
+ * - [Usage](https://atlassian.design/components/avatar/usage)
125
127
  */
126
128
  const Avatar = /*#__PURE__*/forwardRef(({
127
129
  analyticsContext,
@@ -269,6 +271,7 @@ const Avatar = /*#__PURE__*/forwardRef(({
269
271
  status: typeof status === 'string' ? status : undefined,
270
272
  testId: testId
271
273
  }, customStatusNode), containerShouldBeImage ? jsx("span", {
274
+ "data-testid": testId && `${testId}--label`,
272
275
  id: `${uuid}-label`,
273
276
  hidden: true
274
277
  }, defaultLabel) : undefined);
package/dist/es2019/Presence.js CHANGED
@@ -43,11 +43,13 @@ function getPresence(presence) {
43
43
  }
44
44
 
45
45
  /**
46
+ * __Avatar presence__
47
+ *
46
48
  * A presence shows an avatar’s availability.
47
49
  *
48
50
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
49
51
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
50
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
52
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
51
53
  */
52
54
  const AvatarPresence = ({
53
55
  borderColor,
@@ -64,6 +66,8 @@ const AvatarPresence = ({
64
66
  }, getPresence(presence)) : children);
65
67
  export default AvatarPresence;
66
68
  /**
69
+ * __Presence wrapper__
70
+ *
67
71
  * A presence wrapper is used internally to position presence ontop of the avatar.
68
72
  */
69
73
  export const PresenceWrapper = ({
package/dist/es2019/Status.js CHANGED
@@ -42,10 +42,12 @@ function getStatus(status) {
42
42
  }
43
43
 
44
44
  /**
45
+ * __Avatar status__
46
+ *
45
47
  * An avatar status shows contextual information, such as if someone approves or declines something.
46
48
  *
47
49
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
48
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
50
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
49
51
  */
50
52
  const AvatarStatus = ({
51
53
  borderColor,
@@ -62,6 +64,8 @@ const AvatarStatus = ({
62
64
  }, getStatus(status)) : children);
63
65
  export default AvatarStatus;
64
66
  /**
67
+ * __Status wrapper__
68
+ *
65
69
  * A status wrapper is used internally to position status on top of the avatar.
66
70
  */
67
71
  export const StatusWrapper = ({
package/dist/esm/Avatar.js CHANGED
@@ -16,7 +16,7 @@ import { PresenceWrapper } from './Presence';
16
16
  import { StatusWrapper } from './Status';
17
17
  import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
18
18
  var packageName = "@atlaskit/avatar";
19
- var packageVersion = "21.4.6";
19
+ var packageVersion = "21.5.0";
20
20
 
21
21
  // eslint-disable-next-line @repo/internal/react/consistent-types-definitions
22
22
 
@@ -35,11 +35,13 @@ var getStyles = function getStyles(css, _ref) {
35
35
  };
36
36
 
37
37
  /**
38
+ * __Avatar__
39
+ *
38
40
  * An avatar is a visual representation of a user or entity.
39
41
  *
40
42
  * - [Examples](https://atlassian.design/components/avatar/examples)
41
43
  * - [Code](https://atlassian.design/components/avatar/code)
42
- * - [Usage](https://atlassian.design/components/avatar/usage).
44
+ * - [Usage](https://atlassian.design/components/avatar/usage)
43
45
  */
44
46
  var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
45
47
  var analyticsContext = _ref2.analyticsContext,
@@ -183,6 +185,7 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
183
185
  status: typeof status === 'string' ? status : undefined,
184
186
  testId: testId
185
187
  }, customStatusNode), containerShouldBeImage ? jsx("span", {
188
+ "data-testid": testId && "".concat(testId, "--label"),
186
189
  id: "".concat(uuid, "-label"),
187
190
  hidden: true
188
191
  }, defaultLabel) : undefined);
package/dist/esm/Presence.js CHANGED
@@ -43,11 +43,13 @@ function getPresence(presence) {
43
43
  }
44
44
 
45
45
  /**
46
+ * __Avatar presence__
47
+ *
46
48
  * A presence shows an avatar’s availability.
47
49
  *
48
50
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
49
51
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
50
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
52
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
51
53
  */
52
54
  var AvatarPresence = function AvatarPresence(_ref) {
53
55
  var borderColor = _ref.borderColor,
@@ -65,6 +67,8 @@ var AvatarPresence = function AvatarPresence(_ref) {
65
67
  };
66
68
  export default AvatarPresence;
67
69
  /**
70
+ * __Presence wrapper__
71
+ *
68
72
  * A presence wrapper is used internally to position presence ontop of the avatar.
69
73
  */
70
74
  export var PresenceWrapper = function PresenceWrapper(_ref2) {
package/dist/esm/Status.js CHANGED
@@ -42,10 +42,12 @@ function getStatus(status) {
42
42
  }
43
43
 
44
44
  /**
45
+ * __Avatar status__
46
+ *
45
47
  * An avatar status shows contextual information, such as if someone approves or declines something.
46
48
  *
47
49
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
48
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
50
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
49
51
  */
50
52
  var AvatarStatus = function AvatarStatus(_ref) {
51
53
  var borderColor = _ref.borderColor,
@@ -63,6 +65,8 @@ var AvatarStatus = function AvatarStatus(_ref) {
63
65
  };
64
66
  export default AvatarStatus;
65
67
  /**
68
+ * __Status wrapper__
69
+ *
66
70
  * A status wrapper is used internally to position status on top of the avatar.
67
71
  */
68
72
  export var StatusWrapper = function StatusWrapper(_ref2) {
package/dist/types/Avatar.d.ts CHANGED
@@ -98,11 +98,13 @@ export interface AvatarPropTypes {
98
98
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
99
99
  }
100
100
  /**
101
+ * __Avatar__
102
+ *
101
103
  * An avatar is a visual representation of a user or entity.
102
104
  *
103
105
  * - [Examples](https://atlassian.design/components/avatar/examples)
104
106
  * - [Code](https://atlassian.design/components/avatar/code)
105
- * - [Usage](https://atlassian.design/components/avatar/usage).
107
+ * - [Usage](https://atlassian.design/components/avatar/usage)
106
108
  */
107
109
  declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
108
110
  export default Avatar;
package/dist/types/Presence.d.ts CHANGED
@@ -17,11 +17,13 @@ export interface PresenceProps {
17
17
  presence?: Presence;
18
18
  }
19
19
  /**
20
+ * __Avatar presence__
21
+ *
20
22
  * A presence shows an avatar’s availability.
21
23
  *
22
24
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
23
25
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
24
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
26
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
25
27
  */
26
28
  declare const AvatarPresence: FC<PresenceProps>;
27
29
  export default AvatarPresence;
@@ -31,6 +33,8 @@ export interface PresenceWrapperProps extends PresenceProps {
31
33
  testId?: string;
32
34
  }
33
35
  /**
36
+ * __Presence wrapper__
37
+ *
34
38
  * A presence wrapper is used internally to position presence ontop of the avatar.
35
39
  */
36
40
  export declare const PresenceWrapper: FC<PresenceWrapperProps>;
package/dist/types/Status.d.ts CHANGED
@@ -17,10 +17,12 @@ export interface StatusProps {
17
17
  status?: Status;
18
18
  }
19
19
  /**
20
+ * __Avatar status__
21
+ *
20
22
  * An avatar status shows contextual information, such as if someone approves or declines something.
21
23
  *
22
24
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
23
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
25
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
24
26
  */
25
27
  declare const AvatarStatus: FC<StatusProps>;
26
28
  export default AvatarStatus;
@@ -30,6 +32,8 @@ interface StatusWrapperProps extends StatusProps {
30
32
  testId?: string;
31
33
  }
32
34
  /**
35
+ * __Status wrapper__
36
+ *
33
37
  * A status wrapper is used internally to position status on top of the avatar.
34
38
  */
35
39
  export declare const StatusWrapper: FC<StatusWrapperProps>;
package/dist/types-ts4.5/Avatar.d.ts CHANGED
@@ -98,11 +98,13 @@ export interface AvatarPropTypes {
98
98
  as?: keyof JSX.IntrinsicElements | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>;
99
99
  }
100
100
  /**
101
+ * __Avatar__
102
+ *
101
103
  * An avatar is a visual representation of a user or entity.
102
104
  *
103
105
  * - [Examples](https://atlassian.design/components/avatar/examples)
104
106
  * - [Code](https://atlassian.design/components/avatar/code)
105
- * - [Usage](https://atlassian.design/components/avatar/usage).
107
+ * - [Usage](https://atlassian.design/components/avatar/usage)
106
108
  */
107
109
  declare const Avatar: import("react").ForwardRefExoticComponent<AvatarPropTypes & import("react").RefAttributes<HTMLElement>>;
108
110
  export default Avatar;
package/dist/types-ts4.5/Presence.d.ts CHANGED
@@ -17,11 +17,13 @@ export interface PresenceProps {
17
17
  presence?: Presence;
18
18
  }
19
19
  /**
20
+ * __Avatar presence__
21
+ *
20
22
  * A presence shows an avatar’s availability.
21
23
  *
22
24
  * - [Examples](https://atlassian.design/components/avatar/avatar-presence/examples)
23
25
  * - [Code](https://atlassian.design/components/avatar/avatar-presence/code)
24
- * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage).
26
+ * - [Usage](https://atlassian.design/components/avatar/avatar-presence/usage)
25
27
  */
26
28
  declare const AvatarPresence: FC<PresenceProps>;
27
29
  export default AvatarPresence;
@@ -31,6 +33,8 @@ export interface PresenceWrapperProps extends PresenceProps {
31
33
  testId?: string;
32
34
  }
33
35
  /**
36
+ * __Presence wrapper__
37
+ *
34
38
  * A presence wrapper is used internally to position presence ontop of the avatar.
35
39
  */
36
40
  export declare const PresenceWrapper: FC<PresenceWrapperProps>;
package/dist/types-ts4.5/Status.d.ts CHANGED
@@ -17,10 +17,12 @@ export interface StatusProps {
17
17
  status?: Status;
18
18
  }
19
19
  /**
20
+ * __Avatar status__
21
+ *
20
22
  * An avatar status shows contextual information, such as if someone approves or declines something.
21
23
  *
22
24
  * - [Examples](https://atlassian.design/components/avatar/avatar-status/examples)
23
- * - [Code](https://atlassian.design/components/avatar/avatar-status/code).
25
+ * - [Code](https://atlassian.design/components/avatar/avatar-status/code)
24
26
  */
25
27
  declare const AvatarStatus: FC<StatusProps>;
26
28
  export default AvatarStatus;
@@ -30,6 +32,8 @@ interface StatusWrapperProps extends StatusProps {
30
32
  testId?: string;
31
33
  }
32
34
  /**
35
+ * __Status wrapper__
36
+ *
33
37
  * A status wrapper is used internally to position status on top of the avatar.
34
38
  */
35
39
  export declare const StatusWrapper: FC<StatusWrapperProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/avatar",
3
- "version": "21.4.6",
3
+ "version": "21.5.0",
4
4
  "description": "An avatar is a visual representation of a user or entity.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,10 +43,10 @@
43
43
  ".": "./src/index.ts"
44
44
  },
45
45
  "dependencies": {
46
- "@atlaskit/analytics-next": "^9.1.0",
46
+ "@atlaskit/analytics-next": "^9.2.0",
47
47
  "@atlaskit/icon": "^22.0.0",
48
48
  "@atlaskit/theme": "^12.6.0",
49
- "@atlaskit/tokens": "^1.35.0",
49
+ "@atlaskit/tokens": "^1.38.0",
50
50
  "@babel/runtime": "^7.0.0",
51
51
  "@emotion/react": "^11.7.1",
52
52
  "@emotion/serialize": "^1.1.0",