@dt-dds/react-avatar 1.0.0-beta.58 → 1.0.0-beta.60

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @dt-ui/react-avatar
 
+## 1.0.0-beta.60
+
+### Minor Changes
+
+- feat: persist avatar active state
+
+## 1.0.0-beta.59
+
+### Patch Changes
+
+- fix: update responsive font styles
+- Updated dependencies
+  - @dt-dds/themes@1.0.0-beta.9
+  - @dt-dds/react-core@1.0.0-beta.50
+  - @dt-dds/react-tooltip@1.0.0-beta.58
+
 ## 1.0.0-beta.58
 
 ### Minor Changes

package/README.md

@@ -33,6 +33,7 @@ This component can contain upto two simple characters by passing a string in pro
 | `size`       | `enum<AvatarSize>` | medium  | Sets the Avatar size given the available options                   |
 | `imageSrc`   | `string`           | -       | Optional profile image path (will only work with "Profile" type)   |
 | `dataTestId` | `string`           | avatar  | Avatar test identifier                                             |
+| `isActive`   | `Boolean`          | false   | Persist the Avatar active state                                    |
 
 ## Stack
 

package/dist/index.d.mts

@@ -19,6 +19,7 @@ type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];
 interface AvatarStyledProps {
     type: AvatarType;
     size: AvatarSize;
+    isActive?: boolean;
 }
 
 interface AvatarProps extends AvatarStyledProps {
@@ -27,8 +28,9 @@ interface AvatarProps extends AvatarStyledProps {
     dataTestId?: string;
     customInitials?: string;
     hasTooltip?: boolean;
+    isActive?: boolean;
 }
-declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, hasTooltip, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, hasTooltip, isActive, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {

package/dist/index.d.ts

@@ -19,6 +19,7 @@ type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];
 interface AvatarStyledProps {
     type: AvatarType;
     size: AvatarSize;
+    isActive?: boolean;
 }
 
 interface AvatarProps extends AvatarStyledProps {
@@ -27,8 +28,9 @@ interface AvatarProps extends AvatarStyledProps {
     dataTestId?: string;
     customInitials?: string;
     hasTooltip?: boolean;
+    isActive?: boolean;
 }
-declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, hasTooltip, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ title, type, size, imageSrc, dataTestId, customInitials, hasTooltip, isActive, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 declare module '@emotion/react' {
     interface Theme extends CustomTheme {

package/dist/index.js

@@ -272,7 +272,7 @@ var AvatarSize = {
 
 // src/Avatar.styled.ts
 var AvatarStyled = import_styled.default.div`
-  ${({ theme, type, size }) => {
+  ${({ theme, type, size, isActive }) => {
   let styles = `
       & > * {
         width: 100%;
@@ -322,7 +322,7 @@ var AvatarStyled = import_styled.default.div`
           color: ${theme.palette.content.contrast};
           
           & > * {
-            background-color: ${theme.palette.primary.default};
+            background-color: ${isActive ? theme.palette.primary.dark : theme.palette.primary.default};
 
             &:hover {
               background-color: ${theme.palette.primary.dark};
@@ -383,7 +383,8 @@ var Avatar = ({
   imageSrc = "",
   dataTestId,
   customInitials,
-  hasTooltip = true
+  hasTooltip = true,
+  isActive = false
 }) => {
   const [showThumbnail, setShowThumbnail] = (0, import_react3.useState)(false);
   const handleImageError = () => {
@@ -402,6 +403,7 @@ var Avatar = ({
         "data-testid": dataTestId != null ? dataTestId : "avatar",
         size,
         type,
+        isActive,
         children: type === AvatarType.Profile ? renderProfileImage() : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
       }
     );

package/dist/index.mjs

@@ -237,7 +237,7 @@ var AvatarSize = {
 
 // src/Avatar.styled.ts
 var AvatarStyled = styled.div`
-  ${({ theme, type, size }) => {
+  ${({ theme, type, size, isActive }) => {
   let styles = `
       & > * {
         width: 100%;
@@ -287,7 +287,7 @@ var AvatarStyled = styled.div`
           color: ${theme.palette.content.contrast};
           
           & > * {
-            background-color: ${theme.palette.primary.default};
+            background-color: ${isActive ? theme.palette.primary.dark : theme.palette.primary.default};
 
             &:hover {
               background-color: ${theme.palette.primary.dark};
@@ -348,7 +348,8 @@ var Avatar = ({
   imageSrc = "",
   dataTestId,
   customInitials,
-  hasTooltip = true
+  hasTooltip = true,
+  isActive = false
 }) => {
   const [showThumbnail, setShowThumbnail] = useState(false);
   const handleImageError = () => {
@@ -367,6 +368,7 @@ var Avatar = ({
         "data-testid": dataTestId != null ? dataTestId : "avatar",
         size,
         type,
+        isActive,
         children: type === AvatarType.Profile ? renderProfileImage() : /* @__PURE__ */ jsx58("div", { children: customInitials ? customInitials.substring(0, 2) : acronymGenerator(title) })
       }
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-avatar",
-  "version": "1.0.0-beta.58",
+  "version": "1.0.0-beta.60",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,9 +20,9 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-core": "1.0.0-beta.49",
-    "@dt-dds/react-tooltip": "1.0.0-beta.57",
-    "@dt-dds/themes": "1.0.0-beta.8"
+    "@dt-dds/react-core": "1.0.0-beta.50",
+    "@dt-dds/react-tooltip": "1.0.0-beta.58",
+    "@dt-dds/themes": "1.0.0-beta.9"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",