@soul-refiner/design-system 0.2.96 → 0.2.98

package/dist/components/card/person/person.js

@@ -7,8 +7,8 @@ export const PersonCard = ({ actions, dotsActions, href, image, subtitle, sx, ti
     return (React.createElement(Wrapper, { "$image": image, as: href ? 'a' : 'div', href: href },
         React.createElement(Person, { "$sx": sx },
             dotsActions && !!dotsActions.length && (React.createElement(Dropdown, { containerSx: "", hasArrow: true, maintainState: false, onClick: (e) => e.preventDefault(), options: dotsActions, sx: "position: absolute; top: 8px; right: 8px; z-index: 24; display: none;", trigger: React.createElement(Button, { className: "icon", icon: React.createElement(EllipsisHorizontal, null), onClick: (event) => event.stopPropagation(), showChevron: false, size: "small", type: "outlined" }) })),
-            React.createElement(Shadow, null,
-                React.createElement("img", { src: image, alt: "" })),
+            React.createElement("img", { src: image, alt: "" }),
+            React.createElement(Shadow, null),
             React.createElement(Figcaption, null,
                 React.createElement(H, { as: "span", "$bold": true, "$color": "white", "$fontSize": 24, "$lineHeight": 36 }, title),
                 React.createElement(P, { as: "span", "$color": "white", "$fontSize": 14, "$lineHeight": 20 }, subtitle),
@@ -22,6 +22,9 @@ const Wrapper = styled.div `
   cursor: pointer;
 
   img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
     width: 100%;
     height: 100%;
     border-radius: 16px;

package/dist/components/iconography/avatar/avatar.d.ts

@@ -14,13 +14,14 @@ export interface AvatarProps extends NativeProps {
     sx?: string;
     textPosition?: 'left' | 'right';
     title?: React.ReactNode;
+    tooltipContent?: React.ReactElement;
 }
 /**
  *
  * Avatar
  */
 declare const Avatar: {
-    ({ as, href, image, size, status, subtitle, sx, textPosition, title, ...rest }: AvatarProps): React.JSX.Element;
+    ({ as, href, image, size, status, subtitle, sx, textPosition, title, tooltipContent, ...rest }: AvatarProps): React.JSX.Element;
     displayName: string;
     Group: {
         ({ children, numDisplayed, total }: AvatarGroupProps): React.JSX.Element;

package/dist/components/iconography/avatar/avatar.js

@@ -57,10 +57,16 @@ const iconOffsetY = {
  *
  * Avatar
  */
-const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, ...rest }) => {
+const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, textPosition = 'left', title, tooltipContent, ...rest }) => {
     const [displayDefault, setDisplayDefault] = React.useState(false);
     const Icon = iconReference?.[status ?? 'none'];
-    return (React.createElement(Box, { "$align": "center", "$gap": 18, ...rest, sx: sx },
+    return (React.createElement(Box, { "$align": "center", "$gap": 18, sx: `
+        position: relative; 
+        &:hover > div:nth-of-type(2) {
+          display: flex;
+        }
+        ${sx}
+      `, ...rest },
         React.createElement(Container, { as: as, "$size": size, href: href },
             !displayDefault && (React.createElement("img", { src: image ?? '', onError: () => setDisplayDefault(true) })),
             displayDefault && React.createElement(Default, null),
@@ -68,7 +74,8 @@ const Avatar = ({ as = 'button', href, image, size = 64, status, subtitle, sx, t
                 React.createElement(Icon, null))),
         (title || subtitle) && (React.createElement(TextContainer, { "$textPosition": textPosition },
             title && (React.createElement(H, { as: "h3", "$bold": true, "$color": "grey-2", "$textClampLines": 1, sx: "font-size: 26px;" }, title)),
-            subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle))))));
+            subtitle && (React.createElement(P, { "$color": "grey-4", "$textClampLines": 1 }, subtitle)))),
+        tooltipContent && React.createElement(TooltipContainer, null, tooltipContent)));
 };
 Avatar.displayName = 'Avatar';
 const Container = styled.div `
@@ -107,6 +114,15 @@ const TextContainer = styled.div `
   gap: 4px;
   order: ${({ $textPosition }) => ($textPosition === 'left' ? -1 : 1)};
 `;
+const TooltipContainer = styled.div `
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: -50%;
+  background-color: var(--color-white);
+  border-radius: 24px;
+  box-shadow: var(--elevation-2);
+`;
 const Group = ({ children, numDisplayed, total }) => {
     let size = 0;
     // filter out ReactNodes and ReactElements that are not Avatars

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.2.96",
+  "version": "0.2.98",
   "main": "dist/index.js",
   "license": "MIT",
   "publishConfig": {