@toptal/picasso 26.10.2 → 26.11.0

package/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { StandardProps, SizeType } from '@toptal/picasso-shared';
 export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
     /** Alt text */
@@ -11,15 +11,18 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
     src?: string;
     /** Variant of the avatar shape */
     variant?: 'square' | 'portrait' | 'landscape';
+    /** Callback to show edit-on-click and receive event */
+    onEdit?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     testIds?: {
         wrapper?: string;
         icon?: string;
         image?: string;
         text?: string;
+        editContainer?: string;
     };
 }
 export declare const Avatar: {
-    ({ alt, src, className, name, size, style, variant, testIds, ...rest }: Props): JSX.Element;
+    (props: Props): JSX.Element;
     defaultProps: {
         size: string;
         variant: string;

package/Avatar/Avatar.js

@@ -10,14 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useCallback } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import { AVATAR_INITIALS_LIMIT } from '../utils/constants';
 import getNameInitials from '../utils/get-name-initials';
 import ImageAvatar from './ImageAvatar/ImageAvatar';
 import TextAvatar from './TextAvatar/TextAvatar';
 import IconAvatar from './IconAvatar/IconAvatar';
 import AvatarWrapper from './AvatarWrapper/AvatarWrapper';
-export const Avatar = (_a) => {
-    var { alt, src, className, name, size, style, variant, testIds } = _a, rest = __rest(_a, ["alt", "src", "className", "name", "size", "style", "variant", "testIds"]);
+import styles from './styles';
+import { Pencil16, Pencil24 } from '../Icon';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoAvatarWrapper',
+});
+export const Avatar = (props) => {
+    const { alt, src, className, name, size, style, variant, testIds, onEdit } = props, rest = __rest(props, ["alt", "src", "className", "name", "size", "style", "variant", "testIds", "onEdit"]);
     const renderAvatar = useCallback(() => {
         if (src) {
             return (React.createElement(ImageAvatar, { alt: alt, className: className, name: name, 
@@ -45,13 +51,18 @@ export const Avatar = (_a) => {
         name,
         style,
     ]);
+    const classes = useStyles(props);
+    const isEditable = Boolean(onEdit);
+    const pencilIcon = size === 'xxsmall' || size === 'xsmall' ? React.createElement(Pencil16, null) : React.createElement(Pencil24, null);
     return (React.createElement(AvatarWrapper
     /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
     , Object.assign({ 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
         variant: variant, 
         /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        size: size, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.wrapper }, rest), renderAvatar()));
+        size: size, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.wrapper }, rest),
+        isEditable && (React.createElement("div", { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.editContainer, className: classes.editContainer, onClick: onEdit }, pencilIcon)),
+        renderAvatar()));
 };
 Avatar.defaultProps = {
     size: 'xsmall',

package/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAkB,WAAW,EAAE,MAAM,OAAO,CAAA;AAG1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,UAAU,MAAM,yBAAyB,CAAA;AAChD,OAAO,UAAU,MAAM,yBAAyB,CAAA;AAChD,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAqBzD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAUf,EAAE,EAAE;QAVW,EACrB,GAAG,EACH,GAAG,EACH,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,OAED,EADH,IAAI,cATc,0EAUtB,CADQ;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,IAAI,GAAG,EAAE;YACP,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI;gBACV,uEAAuE;gBACvE,IAAI,EAAE,IAAK,EACX,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,iBACC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,GAC3B,CACH,CAAA;SACF;QAED,IAAI,IAAI,EAAE;YACR,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;YACtC,MAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,IAAI,qBAAqB,CAAA;YAE3D,OAAO,CACL,oBAAC,UAAU,IACT,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;gBACxC,uEAAuE;gBACvE,IAAI,EAAE,IAAK,iBACE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IAEzB,QAAQ,CACE,CACd,CAAA;SACF;QAED,OAAO,CACL,oBAAC,UAAU,mBACI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,EAC1B,SAAS,EAAE,SAAS;YACpB,uEAAuE;YACvE,IAAI,EAAE,IAAK,GACX,CACH,CAAA;IACH,CAAC,EAAE;QACD,IAAI;QACJ,GAAG;QACH,SAAS;QACT,GAAG;QACH,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QACb,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK;QACd,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;QACb,IAAI;QACJ,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,aAAa;IACZ,uEAAuE;;QAAvE,uEAAuE;QACvE,OAAO,EAAE,OAAQ;QACjB,uEAAuE;QACvE,IAAI,EAAE,IAAK,iBACE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,IACzB,IAAI,GAEP,YAAY,EAAE,CACD,CACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,YAAY,GAAG;IACpB,IAAI,EAAE,QAAQ;IACd,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":"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"}

package/Avatar/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "editContainer">;
+export default _default;

package/Avatar/styles.js

@@ -0,0 +1,21 @@
+import { alpha } from '@toptal/picasso-shared';
+import { createStyles } from '@material-ui/core/styles';
+export default ({ palette }) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const hoverColor = alpha(palette.grey.darker, 0.7);
+    return createStyles({
+        editContainer: {
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: hoverColor,
+            zIndex: 1,
+            color: palette.common.white,
+            cursor: 'pointer',
+        },
+    });
+};
+//# sourceMappingURL=styles.js.map

package/Avatar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAE9D,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,oEAAoE;IACpE,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,MAAO,EAAE,GAAG,CAAC,CAAA;IAEnD,OAAO,YAAY,CAAC;QAClB,aAAa,EAAE;YACb,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,UAAU;YAC3B,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,MAAM,EAAE,SAAS;SAClB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/AvatarCompound/index.d.ts

@@ -1,5 +1,5 @@
 export declare const AvatarCompound: {
-    ({ alt, src, className, name, size, style, variant, testIds, ...rest }: import("../Avatar/Avatar").Props): JSX.Element;
+    (props: import("../Avatar/Avatar").Props): JSX.Element;
     defaultProps: {
         size: string;
         variant: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "26.10.2",
+  "version": "26.11.0",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",