@dt-dds/react-avatar 1.0.0-beta.62 → 1.0.0-beta.64

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 (7) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/README.md +53 -0
  3. package/dist/index.d.mts +1 -1
  4. package/dist/index.d.ts +1 -1
  5. package/dist/index.js +24 -26
  6. package/dist/index.mjs +24 -26
  7. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @dt-ui/react-avatar
2
2
 
3
+ ## 1.0.0-beta.64
4
+
5
+ ### Patch Changes
6
+
7
+ - fix(config): update ESLint, TS, and Storybook config
8
+ - fix(icon-button): add missing @dt-dds/react-icon devDependency
9
+ - Updated dependencies
10
+ - Updated dependencies
11
+ - @dt-dds/react-core@1.0.0-beta.52
12
+ - @dt-dds/react-icon@1.0.0-beta.55
13
+ - @dt-dds/react-tooltip@1.0.0-beta.61
14
+ - @dt-dds/themes@1.0.0-beta.10
15
+
16
+ ## 1.0.0-beta.63
17
+
18
+ ### Minor Changes
19
+
20
+ - feat: avatar interactivity via icon-button
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies
25
+ - @dt-dds/react-icon@1.0.0-beta.54
26
+ - @dt-dds/react-tooltip@1.0.0-beta.60
27
+
3
28
  ## 1.0.0-beta.62
4
29
 
5
30
  ### Minor Changes
package/README.md CHANGED
@@ -104,6 +104,59 @@ This component can contain upto two simple characters by passing a string in pro
104
104
  | `customInitials` | `string` | - | Custom initials to display (max 2 characters). Replaces `title` if present. |
105
105
  | `hasTooltip` | `Boolean` | false | Shows tooltip when hovering on the Avatar |
106
106
 
107
+ ### Default Avatar States Styling in IconButton
108
+
109
+ When Avatar is composed with IconButton, the interactive states are handled by IconButton's styles. The following table shows the default appearance:
110
+
111
+ | Avatar Type | Hover State | Disabled State |
112
+ | ----------- | ----------- | -------------- |
113
+ | Letter | `primary.dark` | `primary.light` |
114
+ | Thumbnail | `primary.dark` | `primary.light`|
115
+ | Collapsed | `primary.light` | `content.contrast` |
116
+ | Photo | No change | 38% opacity |
117
+
118
+ **Customization:** Use `cssOverrides` prop to override the default hover states or apply custom theme colors.
119
+
120
+ ### Avatar Data Attributes
121
+
122
+ When using Avatar inside IconButton, target the following data attributes with cssOverrides:
123
+
124
+ | Attribute | Avatar Type |
125
+ | --------- | ----------- |
126
+ | `[data-avatar-type='letter']` | letter |
127
+ | `[data-avatar-type='thumbnail']` | thumbnail |
128
+ | `[data-avatar-type='collapsed']` | collapsed |
129
+ | `[data-avatar-type='photo']` | photo |
130
+
131
+ The IconButton provides a cssOverrides prop that allows you to apply custom CSS styles to the IconButton and its children.
132
+ This enables full styling flexibility when used with Avatar.
133
+
134
+ #### Example : Avatar with Custom Styling
135
+
136
+ Target Avatar types using [data-avatar-type] attribute selectors to customize their interactive states:
137
+
138
+ ```jsx
139
+ import { IconButton } from '@dt-dds/react-icon-button';
140
+ import { Avatar } from '@dt-dds/react-avatar';
141
+ import { css } from '@emotion/react';
142
+
143
+ export const CustomAvatarButton = () => {
144
+ const avatarHoverStyles = css`
145
+ &:hover:not(:disabled) {
146
+ [data-avatar-type='letter'] {
147
+ background-color: #a020f0;
148
+ }
149
+ }
150
+ `;
151
+
152
+ return (
153
+ <IconButton ariaLabel='User' cssOverrides={avatarHoverStyles}>
154
+ <Avatar title='John Doe' type='letter' customInitials='JD' />
155
+ </IconButton>
156
+ );
157
+ };
158
+ ```
159
+
107
160
  ## Stack
108
161
 
109
162
  - [TypeScript](https://www.typescriptlang.org/) for static type checking
package/dist/index.d.mts CHANGED
@@ -32,4 +32,4 @@ declare module '@emotion/react' {
32
32
  }
33
33
  }
34
34
 
35
- export { Avatar, AvatarType };
35
+ export { Avatar, type AvatarProps, type AvatarSize, type AvatarStyledProps, AvatarType };
package/dist/index.d.ts CHANGED
@@ -32,4 +32,4 @@ declare module '@emotion/react' {
32
32
  }
33
33
  }
34
34
 
35
- export { Avatar, AvatarType };
35
+ export { Avatar, type AvatarProps, type AvatarSize, type AvatarStyledProps, AvatarType };
package/dist/index.js CHANGED
@@ -36,9 +36,9 @@ __export(index_exports, {
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/Avatar.tsx
39
+ var import_react = require("react");
39
40
  var import_react_icon = require("@dt-dds/react-icon");
40
41
  var import_react_tooltip = require("@dt-dds/react-tooltip");
41
- var import_react = require("react");
42
42
 
43
43
  // src/Avatar.styled.ts
44
44
  var import_styled = __toESM(require("@emotion/styled"));
@@ -55,15 +55,13 @@ var AvatarType = {
55
55
  var AvatarStyled = import_styled.default.div`
56
56
  ${({ theme, type, size }) => {
57
57
  let styles = `
58
- & > * {
59
- width: 100%;
60
- height: 100%;
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
- text-transform: uppercase;
65
- border-radius: ${theme.radius.radius_500};
66
- }
58
+ width: 100%;
59
+ height: 100%;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ text-transform: uppercase;
64
+ border-radius: ${theme.radius.radius_500};
67
65
  `;
68
66
  const sizeStyles = {
69
67
  small: `
@@ -87,31 +85,29 @@ var AvatarStyled = import_styled.default.div`
87
85
  case AvatarType.Letter:
88
86
  styles += `
89
87
  color: ${theme.palette.content.contrast};
90
-
91
- & > * {
92
- background-color: ${theme.palette.primary.default};
93
- }
88
+ background-color: ${theme.palette.primary.default};
94
89
  `;
95
90
  break;
96
91
  case AvatarType.Collapsed:
97
92
  styles += `
98
93
  color: ${theme.palette.content.medium};
99
-
100
- & > * {
101
- background-color: ${theme.palette.content.contrast};
102
- }
94
+ background-color: ${theme.palette.content.contrast};
103
95
  `;
104
96
  break;
105
97
  case AvatarType.Thumbnail:
106
98
  styles += `
107
99
  color: ${theme.palette.content.contrast};
108
-
109
- & > * {
110
- background-color: ${theme.palette.primary.default};
111
- }
100
+ background-color: ${theme.palette.primary.default};
112
101
  `;
113
102
  break;
114
103
  case AvatarType.Photo:
104
+ styles += `
105
+ & > * {
106
+ width: 100%;
107
+ height: 100%;
108
+ border-radius: ${theme.radius.radius_500};
109
+ }
110
+ `;
115
111
  break;
116
112
  }
117
113
  return styles;
@@ -142,7 +138,7 @@ var Avatar = ({
142
138
  setHasImageError(true);
143
139
  };
144
140
  const shouldRenderPhotoFallback = type === AvatarType.Photo && (hasImageError || !imageSrc);
145
- const thumbnailIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "person", color: "primary", size }) });
141
+ const thumbnailIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "person", color: "primary", size });
146
142
  const renderImage = () => {
147
143
  if (shouldRenderPhotoFallback) {
148
144
  return thumbnailIcon;
@@ -152,17 +148,19 @@ var Avatar = ({
152
148
  const contentMap = {
153
149
  [AvatarType.Photo]: renderImage(),
154
150
  [AvatarType.Thumbnail]: thumbnailIcon,
155
- [AvatarType.Collapsed]: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: collapsedCount.substring(0, 3) }),
156
- [AvatarType.Letter]: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
151
+ [AvatarType.Collapsed]: collapsedCount.substring(0, 3),
152
+ [AvatarType.Letter]: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title)
157
153
  };
158
154
  const renderAvatarContent = () => {
155
+ const avatarType = shouldRenderPhotoFallback ? AvatarType.Thumbnail : type;
159
156
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
160
157
  AvatarStyled,
161
158
  {
159
+ "data-avatar-type": avatarType,
162
160
  "data-testid": dataTestId != null ? dataTestId : "avatar",
163
161
  size,
164
162
  style,
165
- type: shouldRenderPhotoFallback ? AvatarType.Thumbnail : type,
163
+ type: avatarType,
166
164
  children: contentMap[type]
167
165
  }
168
166
  );
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  // src/Avatar.tsx
2
+ import { useState } from "react";
2
3
  import { Icon } from "@dt-dds/react-icon";
3
4
  import { Tooltip } from "@dt-dds/react-tooltip";
4
- import { useState } from "react";
5
5
 
6
6
  // src/Avatar.styled.ts
7
7
  import styled from "@emotion/styled";
@@ -18,15 +18,13 @@ var AvatarType = {
18
18
  var AvatarStyled = styled.div`
19
19
  ${({ theme, type, size }) => {
20
20
  let styles = `
21
- & > * {
22
- width: 100%;
23
- height: 100%;
24
- display: flex;
25
- align-items: center;
26
- justify-content: center;
27
- text-transform: uppercase;
28
- border-radius: ${theme.radius.radius_500};
29
- }
21
+ width: 100%;
22
+ height: 100%;
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ text-transform: uppercase;
27
+ border-radius: ${theme.radius.radius_500};
30
28
  `;
31
29
  const sizeStyles = {
32
30
  small: `
@@ -50,31 +48,29 @@ var AvatarStyled = styled.div`
50
48
  case AvatarType.Letter:
51
49
  styles += `
52
50
  color: ${theme.palette.content.contrast};
53
-
54
- & > * {
55
- background-color: ${theme.palette.primary.default};
56
- }
51
+ background-color: ${theme.palette.primary.default};
57
52
  `;
58
53
  break;
59
54
  case AvatarType.Collapsed:
60
55
  styles += `
61
56
  color: ${theme.palette.content.medium};
62
-
63
- & > * {
64
- background-color: ${theme.palette.content.contrast};
65
- }
57
+ background-color: ${theme.palette.content.contrast};
66
58
  `;
67
59
  break;
68
60
  case AvatarType.Thumbnail:
69
61
  styles += `
70
62
  color: ${theme.palette.content.contrast};
71
-
72
- & > * {
73
- background-color: ${theme.palette.primary.default};
74
- }
63
+ background-color: ${theme.palette.primary.default};
75
64
  `;
76
65
  break;
77
66
  case AvatarType.Photo:
67
+ styles += `
68
+ & > * {
69
+ width: 100%;
70
+ height: 100%;
71
+ border-radius: ${theme.radius.radius_500};
72
+ }
73
+ `;
78
74
  break;
79
75
  }
80
76
  return styles;
@@ -105,7 +101,7 @@ var Avatar = ({
105
101
  setHasImageError(true);
106
102
  };
107
103
  const shouldRenderPhotoFallback = type === AvatarType.Photo && (hasImageError || !imageSrc);
108
- const thumbnailIcon = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Icon, { code: "person", color: "primary", size }) });
104
+ const thumbnailIcon = /* @__PURE__ */ jsx(Icon, { code: "person", color: "primary", size });
109
105
  const renderImage = () => {
110
106
  if (shouldRenderPhotoFallback) {
111
107
  return thumbnailIcon;
@@ -115,17 +111,19 @@ var Avatar = ({
115
111
  const contentMap = {
116
112
  [AvatarType.Photo]: renderImage(),
117
113
  [AvatarType.Thumbnail]: thumbnailIcon,
118
- [AvatarType.Collapsed]: /* @__PURE__ */ jsx("div", { children: collapsedCount.substring(0, 3) }),
119
- [AvatarType.Letter]: /* @__PURE__ */ jsx("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
114
+ [AvatarType.Collapsed]: collapsedCount.substring(0, 3),
115
+ [AvatarType.Letter]: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title)
120
116
  };
121
117
  const renderAvatarContent = () => {
118
+ const avatarType = shouldRenderPhotoFallback ? AvatarType.Thumbnail : type;
122
119
  return /* @__PURE__ */ jsx(
123
120
  AvatarStyled,
124
121
  {
122
+ "data-avatar-type": avatarType,
125
123
  "data-testid": dataTestId != null ? dataTestId : "avatar",
126
124
  size,
127
125
  style,
128
- type: shouldRenderPhotoFallback ? AvatarType.Thumbnail : type,
126
+ type: avatarType,
129
127
  children: contentMap[type]
130
128
  }
131
129
  );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dt-dds/react-avatar",
3
- "version": "1.0.0-beta.62",
3
+ "version": "1.0.0-beta.64",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": "./dist/index.js"
@@ -20,10 +20,10 @@
20
20
  "test:update:snapshot": "jest -u"
21
21
  },
22
22
  "dependencies": {
23
- "@dt-dds/react-core": "1.0.0-beta.51",
24
- "@dt-dds/react-tooltip": "1.0.0-beta.59",
25
- "@dt-dds/react-icon": "1.0.0-beta.53",
26
- "@dt-dds/themes": "1.0.0-beta.9"
23
+ "@dt-dds/react-core": "1.0.0-beta.52",
24
+ "@dt-dds/react-tooltip": "1.0.0-beta.61",
25
+ "@dt-dds/react-icon": "1.0.0-beta.55",
26
+ "@dt-dds/themes": "1.0.0-beta.10"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@babel/core": "^7.22.9",