@toptal/picasso 13.1.0 → 13.3.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.
- package/Avatar/Avatar.d.ts +19 -10
- package/Avatar/Avatar.js +43 -18
- package/Avatar/Avatar.js.map +1 -1
- package/Avatar/AvatarGroup/AvatarGroup.d.ts +29 -0
- package/Avatar/AvatarGroup/AvatarGroup.js +41 -0
- package/Avatar/AvatarGroup/AvatarGroup.js.map +1 -0
- package/Avatar/AvatarGroup/styles.d.ts +2 -0
- package/Avatar/AvatarGroup/styles.js +8 -0
- package/Avatar/AvatarGroup/styles.js.map +1 -0
- package/Avatar/AvatarWrapper/AvatarWrapper.d.ts +10 -0
- package/Avatar/AvatarWrapper/AvatarWrapper.js +14 -0
- package/Avatar/AvatarWrapper/AvatarWrapper.js.map +1 -0
- package/Avatar/AvatarWrapper/styles.d.ts +4 -0
- package/Avatar/AvatarWrapper/styles.js +53 -0
- package/Avatar/AvatarWrapper/styles.js.map +1 -0
- package/Avatar/IconAvatar/IconAvatar.d.ts +7 -0
- package/Avatar/IconAvatar/IconAvatar.js +14 -0
- package/Avatar/IconAvatar/IconAvatar.js.map +1 -0
- package/Avatar/IconAvatar/styles.d.ts +2 -0
- package/Avatar/IconAvatar/styles.js +15 -0
- package/Avatar/IconAvatar/styles.js.map +1 -0
- package/Avatar/ImageAvatar/ImageAvatar.d.ts +10 -0
- package/Avatar/ImageAvatar/ImageAvatar.js +26 -0
- package/Avatar/ImageAvatar/ImageAvatar.js.map +1 -0
- package/Avatar/ImageAvatar/styles.d.ts +2 -0
- package/Avatar/ImageAvatar/styles.js +23 -0
- package/Avatar/ImageAvatar/styles.js.map +1 -0
- package/Avatar/TextAvatar/TextAvatar.d.ts +15 -0
- package/Avatar/TextAvatar/TextAvatar.js +22 -0
- package/Avatar/TextAvatar/TextAvatar.js.map +1 -0
- package/Avatar/TextAvatar/styles.d.ts +2 -0
- package/Avatar/TextAvatar/styles.js +22 -0
- package/Avatar/TextAvatar/styles.js.map +1 -0
- package/Avatar/utils/getClipPathCornerMask.d.ts +3 -0
- package/Avatar/utils/getClipPathCornerMask.js +10 -0
- package/Avatar/utils/getClipPathCornerMask.js.map +1 -0
- package/Avatar/utils/getDimensions.d.ts +12 -0
- package/Avatar/utils/getDimensions.js +17 -0
- package/Avatar/utils/getDimensions.js.map +1 -0
- package/Notification/Notification.js +4 -7
- package/Notification/Notification.js.map +1 -1
- package/Notification/styles.d.ts +1 -1
- package/Notification/styles.js +31 -13
- package/Notification/styles.js.map +1 -1
- package/Tag/Tag.d.ts +3 -2
- package/Tag/Tag.js.map +1 -1
- package/TagCheckable/TagCheckable.d.ts +1 -1
- package/TagCheckable/TagCheckable.js.map +1 -1
- package/package.json +2 -2
- package/Avatar/IconAvatar.d.ts +0 -9
- package/Avatar/IconAvatar.js +0 -11
- package/Avatar/IconAvatar.js.map +0 -1
- package/Avatar/ImageAvatar.d.ts +0 -9
- package/Avatar/ImageAvatar.js +0 -40
- package/Avatar/ImageAvatar.js.map +0 -1
- package/Avatar/ImagePlaceholder.d.ts +0 -9
- package/Avatar/ImagePlaceholder.js +0 -7
- package/Avatar/ImagePlaceholder.js.map +0 -1
- package/Avatar/InitialsAvatar.d.ts +0 -10
- package/Avatar/InitialsAvatar.js +0 -16
- package/Avatar/InitialsAvatar.js.map +0 -1
- package/Avatar/styles.d.ts +0 -3
- package/Avatar/styles.js +0 -77
- package/Avatar/styles.js.map +0 -1
package/Avatar/Avatar.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FunctionComponent, HTMLAttributes } from 'react';
|
|
1
|
+
import React, { FunctionComponent, HTMLAttributes } from 'react';
|
|
2
2
|
import { StandardProps, SizeType } from '@toptal/picasso-shared';
|
|
3
3
|
export declare type VariantType = 'square' | 'portrait' | 'landscape';
|
|
4
4
|
export declare type AvatarSizeType = SizeType<'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
|
|
@@ -7,18 +7,27 @@ export interface Props extends StandardProps, HTMLAttributes<HTMLDivElement> {
|
|
|
7
7
|
alt?: string;
|
|
8
8
|
/** User full name to display initials on the avatar */
|
|
9
9
|
name?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Size
|
|
12
|
-
* @default xsmall
|
|
13
|
-
*/
|
|
10
|
+
/** Size */
|
|
14
11
|
size?: AvatarSizeType;
|
|
15
12
|
/** Photo url */
|
|
16
13
|
src?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Variant of the avatar shape
|
|
19
|
-
* @default square
|
|
20
|
-
*/
|
|
14
|
+
/** Variant of the avatar shape */
|
|
21
15
|
variant?: VariantType;
|
|
16
|
+
testIds?: {
|
|
17
|
+
wrapper?: string;
|
|
18
|
+
icon?: string;
|
|
19
|
+
image?: string;
|
|
20
|
+
text?: string;
|
|
21
|
+
};
|
|
22
22
|
}
|
|
23
23
|
export declare const Avatar: FunctionComponent<Props>;
|
|
24
|
-
|
|
24
|
+
declare const _default: React.FunctionComponent<Props> & {
|
|
25
|
+
Group: {
|
|
26
|
+
({ className, style, testIds, items, limit, size }: import("./AvatarGroup/AvatarGroup").Props): JSX.Element | null;
|
|
27
|
+
defaultProps: {
|
|
28
|
+
limit: number;
|
|
29
|
+
size: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export default _default;
|
package/Avatar/Avatar.js
CHANGED
|
@@ -9,32 +9,57 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
|
|
20
|
-
export const Avatar =
|
|
21
|
-
|
|
22
|
-
const
|
|
23
|
-
const renderAvatar = () => {
|
|
12
|
+
import React, { useCallback } from 'react';
|
|
13
|
+
import { AVATAR_INITIALS_LIMIT } from '../utils/constants';
|
|
14
|
+
import getNameInitials from '../utils/get-name-initials';
|
|
15
|
+
import ImageAvatar from './ImageAvatar/ImageAvatar';
|
|
16
|
+
import TextAvatar from './TextAvatar/TextAvatar';
|
|
17
|
+
import IconAvatar from './IconAvatar/IconAvatar';
|
|
18
|
+
import AvatarGroup from './AvatarGroup/AvatarGroup';
|
|
19
|
+
import AvatarWrapper from './AvatarWrapper/AvatarWrapper';
|
|
20
|
+
export const Avatar = (_a) => {
|
|
21
|
+
var { alt, src, className, name, size, style, variant, testIds } = _a, rest = __rest(_a, ["alt", "src", "className", "name", "size", "style", "variant", "testIds"]);
|
|
22
|
+
const renderAvatar = useCallback(() => {
|
|
24
23
|
if (src) {
|
|
25
|
-
return (React.createElement(ImageAvatar, { alt: alt,
|
|
24
|
+
return (React.createElement(ImageAvatar, { alt: alt, className: className, name: name,
|
|
25
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
26
|
+
size: size, src: src, style: style, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.image }));
|
|
26
27
|
}
|
|
27
28
|
if (name) {
|
|
28
|
-
|
|
29
|
+
const initials = getNameInitials(name);
|
|
30
|
+
const isLongText = initials.length >= AVATAR_INITIALS_LIMIT;
|
|
31
|
+
return (React.createElement(TextAvatar, { className: className, fontSize: isLongText ? 'small' : 'large',
|
|
32
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
33
|
+
size: size, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.text }, initials));
|
|
29
34
|
}
|
|
30
|
-
return (React.createElement(IconAvatar, {
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
return (React.createElement(IconAvatar, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.icon, className: className,
|
|
36
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
37
|
+
size: size }));
|
|
38
|
+
}, [
|
|
39
|
+
size,
|
|
40
|
+
alt,
|
|
41
|
+
className,
|
|
42
|
+
src,
|
|
43
|
+
testIds === null || testIds === void 0 ? void 0 : testIds.icon,
|
|
44
|
+
testIds === null || testIds === void 0 ? void 0 : testIds.image,
|
|
45
|
+
testIds === null || testIds === void 0 ? void 0 : testIds.text,
|
|
46
|
+
name,
|
|
47
|
+
style
|
|
48
|
+
]);
|
|
49
|
+
return (React.createElement(AvatarWrapper
|
|
50
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
51
|
+
, Object.assign({
|
|
52
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
53
|
+
variant: variant,
|
|
54
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
55
|
+
size: size, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.wrapper }, rest), renderAvatar()));
|
|
33
56
|
};
|
|
34
57
|
Avatar.defaultProps = {
|
|
35
58
|
size: 'xsmall',
|
|
36
59
|
variant: 'square'
|
|
37
60
|
};
|
|
38
61
|
Avatar.displayName = 'Avatar';
|
|
39
|
-
export default Avatar
|
|
62
|
+
export default Object.assign(Avatar, {
|
|
63
|
+
Group: AvatarGroup
|
|
64
|
+
});
|
|
40
65
|
//# sourceMappingURL=Avatar.js.map
|
package/Avatar/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/Avatar/Avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAqC,WAAW,EAAE,MAAM,OAAO,CAAA;AAG7E,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,WAAW,MAAM,2BAA2B,CAAA;AACnD,OAAO,aAAa,MAAM,+BAA+B,CAAA;AA0BzD,MAAM,CAAC,MAAM,MAAM,GAA6B,CAAC,EAUhD,EAAE,EAAE;QAV4C,EAC/C,GAAG,EACH,GAAG,EACH,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,OAAO,EACP,OAAO,OAER,EADI,IAAI,cATwC,0EAUhD,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,CAAC,MAAM,CAAC,MAAM,EAAE;IACnC,KAAK,EAAE,WAAW;CACnB,CAAC,CAAA"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { BaseProps } from '@toptal/picasso-shared';
|
|
2
|
+
import { AvatarSizeType } from '../Avatar';
|
|
3
|
+
declare type ItemType = {
|
|
4
|
+
alt?: string;
|
|
5
|
+
'data-testid'?: string;
|
|
6
|
+
name?: string;
|
|
7
|
+
src?: string;
|
|
8
|
+
};
|
|
9
|
+
export interface Props extends Omit<BaseProps, 'data-testid'> {
|
|
10
|
+
/** Array of people to render */
|
|
11
|
+
items: ItemType[];
|
|
12
|
+
/** Limit how many avatars can be rendered */
|
|
13
|
+
limit?: number;
|
|
14
|
+
/** Size */
|
|
15
|
+
size?: AvatarSizeType;
|
|
16
|
+
/** data-testid to all parts of component */
|
|
17
|
+
testIds?: {
|
|
18
|
+
container?: string;
|
|
19
|
+
overLimit?: string;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
declare const AvatarGroup: {
|
|
23
|
+
({ className, style, testIds, items, limit, size }: Props): JSX.Element | null;
|
|
24
|
+
defaultProps: {
|
|
25
|
+
limit: number;
|
|
26
|
+
size: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
export default AvatarGroup;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
4
|
+
import { Container } from '../..';
|
|
5
|
+
import Avatar from '../Avatar';
|
|
6
|
+
import AvatarWrapper from '../AvatarWrapper/AvatarWrapper';
|
|
7
|
+
import TextAvatar from '../TextAvatar/TextAvatar';
|
|
8
|
+
import styles from './styles';
|
|
9
|
+
const useStyles = makeStyles(styles, {
|
|
10
|
+
name: 'PicassoAvatarGroup'
|
|
11
|
+
});
|
|
12
|
+
const AvatarGroup = ({ className, style, testIds, items, limit, size }) => {
|
|
13
|
+
const classes = useStyles();
|
|
14
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
15
|
+
const isOverLimit = items.length > limit;
|
|
16
|
+
// we need to add +1 for the last item that is going to be transformed to numbered Avatar
|
|
17
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
18
|
+
const itemsOverLimit = items.length - limit + 1;
|
|
19
|
+
const avatarsToRender = useMemo(() =>
|
|
20
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
21
|
+
isOverLimit ? items.slice(0, limit - 1) : items, [isOverLimit, items, limit]);
|
|
22
|
+
if (items.length === 0) {
|
|
23
|
+
return null;
|
|
24
|
+
}
|
|
25
|
+
return (React.createElement(Container, { className: cx(classes.root, className), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.container, flex: true, gap: 'xsmall', style: style },
|
|
26
|
+
avatarsToRender.map(({ alt, name, src, 'data-testid': avatarTestId }, index) => (React.createElement(Avatar, { alt: alt, key: `${name}-${alt}-${String(index)}`, name: name,
|
|
27
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
28
|
+
size: size, src: src, "data-testid": avatarTestId }))),
|
|
29
|
+
isOverLimit ? (
|
|
30
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
31
|
+
React.createElement(AvatarWrapper, { size: size, variant: 'square' },
|
|
32
|
+
React.createElement(TextAvatar, { "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.overLimit, size: size },
|
|
33
|
+
"+",
|
|
34
|
+
itemsOverLimit))) : null));
|
|
35
|
+
};
|
|
36
|
+
AvatarGroup.defaultProps = {
|
|
37
|
+
limit: 5,
|
|
38
|
+
size: 'xsmall'
|
|
39
|
+
};
|
|
40
|
+
export default AvatarGroup;
|
|
41
|
+
//# sourceMappingURL=AvatarGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/Avatar/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,MAA0B,MAAM,WAAW,CAAA;AAClD,OAAO,aAAa,MAAM,gCAAgC,CAAA;AAC1D,OAAO,UAAU,MAAM,0BAA0B,CAAA;AACjD,OAAO,MAAM,MAAM,UAAU,CAAA;AAuB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACE,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,uEAAuE;IACvE,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,GAAG,KAAM,CAAA;IACzC,yFAAyF;IACzF,uEAAuE;IACvE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,GAAG,KAAM,GAAG,CAAC,CAAA;IAChD,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE;IACH,uEAAuE;IACvE,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAClD,CAAC,WAAW,EAAE,KAAK,EAAE,KAAK,CAAC,CAC5B,CAAA;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,iBACzB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAC/B,IAAI,QACJ,GAAG,EAAC,QAAQ,EACZ,KAAK,EAAE,KAAK;QAEX,eAAe,CAAC,GAAG,CAClB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,aAAa,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1D,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,IAAI,GAAG,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,EACtC,IAAI,EAAE,IAAI;YACV,uEAAuE;YACvE,IAAI,EAAE,IAAK,EACX,GAAG,EAAE,GAAG,iBACK,YAAY,GACzB,CACH,CACF;QACA,WAAW,CAAC,CAAC,CAAC;QACb,uEAAuE;QACvE,oBAAC,aAAa,IAAC,IAAI,EAAE,IAAK,EAAE,OAAO,EAAC,QAAQ;YAE1C,oBAAC,UAAU,mBAAc,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,EAAE,IAAI,EAAE,IAAK;;gBACpD,cAAc,CACL,CACC,CACjB,CAAC,CAAC,CAAC,IAAI,CACE,CACb,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,KAAK,EAAE,CAAC;IACR,IAAI,EAAE,QAAQ;CACf,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Avatar/AvatarGroup/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FunctionComponent, ReactNode } from 'react';
|
|
2
|
+
import { BaseProps } from '@toptal/picasso-shared';
|
|
3
|
+
import { AvatarSizeType, VariantType } from '../Avatar';
|
|
4
|
+
export interface Props extends BaseProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
size: AvatarSizeType;
|
|
7
|
+
variant: VariantType;
|
|
8
|
+
}
|
|
9
|
+
declare const AvatarWrapper: FunctionComponent<Props>;
|
|
10
|
+
export default AvatarWrapper;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
3
|
+
import cx from 'classnames';
|
|
4
|
+
import styles from './styles';
|
|
5
|
+
const useStyles = makeStyles(styles, {
|
|
6
|
+
name: 'PicassoAvatarWrapper'
|
|
7
|
+
});
|
|
8
|
+
const AvatarWrapper = props => {
|
|
9
|
+
const { children, className, style, 'data-testid': dataTestId } = props;
|
|
10
|
+
const classes = useStyles(props);
|
|
11
|
+
return (React.createElement("div", { style: style, "data-testid": dataTestId, className: cx(className, classes.root, classes.size, classes.corner) }, children));
|
|
12
|
+
};
|
|
13
|
+
export default AvatarWrapper;
|
|
14
|
+
//# sourceMappingURL=AvatarWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarWrapper.js","sourceRoot":"","sources":["../../../src/Avatar/AvatarWrapper/AvatarWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE;IACjD,IAAI,EAAE,sBAAsB;CAC7B,CAAC,CAAA;AAEF,MAAM,aAAa,GAA6B,KAAK,CAAC,EAAE;IACtD,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,CAAA;IACvE,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,CACL,6BACE,KAAK,EAAE,KAAK,iBACC,UAAU,EACvB,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,IAEnE,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
+
const SETTINGS = {
|
|
3
|
+
xxsmall: {
|
|
4
|
+
dimensions: 2,
|
|
5
|
+
cornerSize: '0.5em'
|
|
6
|
+
},
|
|
7
|
+
xsmall: {
|
|
8
|
+
dimensions: 2.5,
|
|
9
|
+
cornerSize: '0.5em'
|
|
10
|
+
},
|
|
11
|
+
small: {
|
|
12
|
+
dimensions: 5,
|
|
13
|
+
cornerSize: '1em'
|
|
14
|
+
},
|
|
15
|
+
medium: {
|
|
16
|
+
dimensions: 7.5,
|
|
17
|
+
cornerSize: '1.5em'
|
|
18
|
+
},
|
|
19
|
+
large: {
|
|
20
|
+
dimensions: 10,
|
|
21
|
+
cornerSize: '1.5em'
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
export default ({ palette }) => createStyles({
|
|
25
|
+
root: {
|
|
26
|
+
position: 'relative',
|
|
27
|
+
backgroundColor: palette.grey.main,
|
|
28
|
+
fontSize: '1rem',
|
|
29
|
+
flexShrink: 0,
|
|
30
|
+
flexGrow: 0
|
|
31
|
+
},
|
|
32
|
+
size: ({ size, variant }) => {
|
|
33
|
+
const { dimensions } = SETTINGS[size];
|
|
34
|
+
const ratio = size === 'large' ? 3 / 4 : 2 / 3;
|
|
35
|
+
const widthRatio = variant === 'portrait' ? ratio : 1;
|
|
36
|
+
const heightRatio = variant === 'landscape' ? ratio : 1;
|
|
37
|
+
return {
|
|
38
|
+
width: `${dimensions * widthRatio}em`,
|
|
39
|
+
height: `${dimensions * heightRatio}em`
|
|
40
|
+
};
|
|
41
|
+
},
|
|
42
|
+
corner: ({ size }) => {
|
|
43
|
+
const { cornerSize } = SETTINGS[size];
|
|
44
|
+
const clipPath = `polygon(0 0, 100% 0, 100% 100%, ${cornerSize} 100%, 0 calc(100% - ${cornerSize}))`;
|
|
45
|
+
return {
|
|
46
|
+
clipPath,
|
|
47
|
+
// we can remove this prefix as soon as this issue will
|
|
48
|
+
// be resolved - https://github.com/cssinjs/css-vendor/issues/74
|
|
49
|
+
'-webkit-clip-path': clipPath
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Avatar/AvatarWrapper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAI9D,MAAM,QAAQ,GAAG;IACf,OAAO,EAAE;QACP,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,OAAO;KACpB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,OAAO;KACpB;IACD,KAAK,EAAE;QACL,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,KAAK;KAClB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,OAAO;KACpB;IACD,KAAK,EAAE;QACL,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,OAAO;KACpB;CACO,CAAA;AAEV,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QAClC,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACZ;IACD,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAS,EAAE,EAAE;QACjC,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;QACrC,MAAM,KAAK,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;QAC9C,MAAM,UAAU,GAAG,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;QACrD,MAAM,WAAW,GAAG,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;QAEvD,OAAO;YACL,KAAK,EAAE,GAAG,UAAU,GAAG,UAAU,IAAI;YACrC,MAAM,EAAE,GAAG,UAAU,GAAG,WAAW,IAAI;SACxC,CAAA;IACH,CAAC;IAED,MAAM,EAAE,CAAC,EAAE,IAAI,EAAS,EAAE,EAAE;QAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;QACrC,MAAM,QAAQ,GAAG,mCAAmC,UAAU,wBAAwB,UAAU,IAAI,CAAA;QAEpG,OAAO;YACL,QAAQ;YACR,uDAAuD;YACvD,gEAAgE;YAChE,mBAAmB,EAAE,QAAQ;SAC9B,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BaseProps } from '@toptal/picasso-shared';
|
|
2
|
+
import type { AvatarSizeType } from '../Avatar';
|
|
3
|
+
interface Props extends BaseProps {
|
|
4
|
+
size: AvatarSizeType;
|
|
5
|
+
}
|
|
6
|
+
declare const IconAvatar: ({ size, "data-testid": dataTestId, className, style }: Props) => JSX.Element;
|
|
7
|
+
export default IconAvatar;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
4
|
+
import { Profile16 } from '../..';
|
|
5
|
+
import styles from './styles';
|
|
6
|
+
const useStyles = makeStyles(styles, {
|
|
7
|
+
name: 'PicassoIconAvatar'
|
|
8
|
+
});
|
|
9
|
+
const IconAvatar = ({ size, 'data-testid': dataTestId, className, style }) => {
|
|
10
|
+
const classes = useStyles();
|
|
11
|
+
return (React.createElement(Profile16, { className: cx(className, classes.root, classes[`${size}Icon`]), color: 'white', "data-testid": dataTestId, style: style }));
|
|
12
|
+
};
|
|
13
|
+
export default IconAvatar;
|
|
14
|
+
//# sourceMappingURL=IconAvatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"IconAvatar.js","sourceRoot":"","sources":["../../../src/Avatar/IconAvatar/IconAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAI5D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,UAAU,CAAA;AAM7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,IAAI,EACJ,aAAa,EAAE,UAAU,EACzB,SAAS,EACT,KAAK,EACC,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,EAC9D,KAAK,EAAC,OAAO,iBACA,UAAU,EACvB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
+
export default () => createStyles({
|
|
3
|
+
root: {
|
|
4
|
+
position: 'absolute',
|
|
5
|
+
top: '50%',
|
|
6
|
+
left: '50%',
|
|
7
|
+
transform: 'translate(-50%, -50%)'
|
|
8
|
+
},
|
|
9
|
+
xxsmallIcon: { fontSize: '1em' },
|
|
10
|
+
xsmallIcon: { fontSize: '1em' },
|
|
11
|
+
smallIcon: { fontSize: '1.5em' },
|
|
12
|
+
mediumIcon: { fontSize: '1.875em' },
|
|
13
|
+
largeIcon: { fontSize: '3em' }
|
|
14
|
+
});
|
|
15
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Avatar/IconAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;IACD,WAAW,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC/B,SAAS,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE;IAChC,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE;IACnC,SAAS,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;CAC/B,CAAC,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BaseProps } from '@toptal/picasso-shared';
|
|
2
|
+
import type { AvatarSizeType } from '../Avatar';
|
|
3
|
+
export interface Props extends BaseProps {
|
|
4
|
+
size: AvatarSizeType;
|
|
5
|
+
src: string;
|
|
6
|
+
alt?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const ImageAvatar: (props: Props) => JSX.Element;
|
|
10
|
+
export default ImageAvatar;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
4
|
+
import Image from '../../Image';
|
|
5
|
+
import Logo from '../../Logo';
|
|
6
|
+
import styles from './styles';
|
|
7
|
+
const useStyles = makeStyles(styles, {
|
|
8
|
+
name: 'PicassoImageAvatar'
|
|
9
|
+
});
|
|
10
|
+
const AvatarLogo = ({ size, classes }) => {
|
|
11
|
+
const isTooSmall = ['small', 'xsmall', 'xxsmall'].includes(size);
|
|
12
|
+
if (isTooSmall) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
return (React.createElement("div", { className: classes.logoContainer, role: 'img', "aria-label": 'photo placeholder' },
|
|
16
|
+
React.createElement(Logo, { emblem: true, variant: 'white', className: classes.logo })));
|
|
17
|
+
};
|
|
18
|
+
const ImageAvatar = (props) => {
|
|
19
|
+
const { alt, className, name, size, src, style, 'data-testid': dataTestId } = props;
|
|
20
|
+
const classes = useStyles(props);
|
|
21
|
+
return (React.createElement(React.Fragment, null,
|
|
22
|
+
React.createElement(Image, { alt: alt || name || '', className: cx(classes.image, className), src: src, style: style, "data-testid": dataTestId }),
|
|
23
|
+
React.createElement(AvatarLogo, { classes: classes, size: size })));
|
|
24
|
+
};
|
|
25
|
+
export default ImageAvatar;
|
|
26
|
+
//# sourceMappingURL=ImageAvatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageAvatar.js","sourceRoot":"","sources":["../../../src/Avatar/ImageAvatar/ImageAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,MAAM,aAAa,CAAA;AAC/B,OAAO,IAAI,MAAM,YAAY,CAAA;AAE7B,OAAO,MAAM,MAAM,UAAU,CAAA;AAa7B,MAAM,SAAS,GAAG,UAAU,CAAe,MAAM,EAAE;IACjD,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAa,EAAE,EAAE;IAClD,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEhE,IAAI,UAAU,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BACE,SAAS,EAAE,OAAO,CAAC,aAAa,EAChC,IAAI,EAAC,KAAK,gBACC,mBAAmB;QAE9B,oBAAC,IAAI,IAAC,MAAM,QAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CACpD,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,KAAY,EAAE,EAAE;IACnC,MAAM,EACJ,GAAG,EACH,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,KAAK,EACL,aAAa,EAAE,UAAU,EAC1B,GAAG,KAAK,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,CAAA;IAEhC,OAAO,CACL;QACE,oBAAC,KAAK,IACJ,GAAG,EAAE,GAAG,IAAI,IAAI,IAAI,EAAE,EACtB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,SAAS,CAAC,EACvC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,iBACC,UAAU,GACvB;QACF,oBAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,GAAI,CAC3C,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { rem } from '@toptal/picasso-shared';
|
|
2
|
+
import { createStyles } from '@material-ui/core/styles';
|
|
3
|
+
export default () => createStyles({
|
|
4
|
+
image: {
|
|
5
|
+
objectFit: 'cover',
|
|
6
|
+
width: '100%',
|
|
7
|
+
height: '100%',
|
|
8
|
+
position: 'absolute',
|
|
9
|
+
left: 0,
|
|
10
|
+
top: 0
|
|
11
|
+
},
|
|
12
|
+
logoContainer: {
|
|
13
|
+
display: 'flex',
|
|
14
|
+
position: 'absolute',
|
|
15
|
+
bottom: '1rem',
|
|
16
|
+
left: '1rem'
|
|
17
|
+
},
|
|
18
|
+
logo: {
|
|
19
|
+
width: rem('17px'),
|
|
20
|
+
height: rem('24px')
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Avatar/ImageAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,KAAK,EAAE;QACL,SAAS,EAAE,OAAO;QAClB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;KACP;IACD,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,MAAM;KACb;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;QAClB,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;KACpB;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { BaseProps, SizeType } from '@toptal/picasso-shared';
|
|
3
|
+
import type { AvatarSizeType } from '../Avatar';
|
|
4
|
+
interface Props extends BaseProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
fontSize?: SizeType<'small' | 'large'>;
|
|
7
|
+
size: AvatarSizeType;
|
|
8
|
+
}
|
|
9
|
+
declare const TextAvatar: {
|
|
10
|
+
({ children, className, style, "data-testid": dataTestID, fontSize, size }: Props): JSX.Element;
|
|
11
|
+
defaultProps: {
|
|
12
|
+
size: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export default TextAvatar;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import cx from 'classnames';
|
|
3
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
4
|
+
import { Typography } from '../..';
|
|
5
|
+
import styles from './styles';
|
|
6
|
+
const useStyles = makeStyles(styles, {
|
|
7
|
+
name: 'PicassoTextAvatar'
|
|
8
|
+
});
|
|
9
|
+
const TextAvatar = ({ children, className, style, 'data-testid': dataTestID, fontSize, size }) => {
|
|
10
|
+
const classes = useStyles();
|
|
11
|
+
return (React.createElement("div", {
|
|
12
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
13
|
+
className: cx(classes.root, className, classes[size]), style: style },
|
|
14
|
+
React.createElement(Typography, { "data-testid": dataTestID,
|
|
15
|
+
/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
|
|
16
|
+
className: classes[`${fontSize}Font`], invert: true }, children)));
|
|
17
|
+
};
|
|
18
|
+
TextAvatar.defaultProps = {
|
|
19
|
+
size: 'large'
|
|
20
|
+
};
|
|
21
|
+
export default TextAvatar;
|
|
22
|
+
//# sourceMappingURL=TextAvatar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextAvatar.js","sourceRoot":"","sources":["../../../src/Avatar/TextAvatar/TextAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAG5D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAS7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,mBAAmB;CAC1B,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,IAAI,EACE,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL;QACE,uEAAuE;QACvE,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,IAAK,CAAC,CAAC,EACtD,KAAK,EAAE,KAAK;QAEZ,oBAAC,UAAU,mBACI,UAAU;YACvB,uEAAuE;YACvE,SAAS,EAAE,OAAO,CAAC,GAAG,QAAS,MAAM,CAAC,EACtC,MAAM,UAEL,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,UAAU,CAAC,YAAY,GAAG;IACxB,IAAI,EAAE,OAAO;CACd,CAAA;AAED,eAAe,UAAU,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
+
export default () => createStyles({
|
|
3
|
+
root: {
|
|
4
|
+
textTransform: 'uppercase',
|
|
5
|
+
position: 'absolute',
|
|
6
|
+
top: '50%',
|
|
7
|
+
left: '50%',
|
|
8
|
+
transform: 'translate(-50%, -50%)'
|
|
9
|
+
},
|
|
10
|
+
xxsmall: { fontSize: '1em' },
|
|
11
|
+
xsmall: { fontSize: '1em' },
|
|
12
|
+
small: { fontSize: '2em' },
|
|
13
|
+
medium: { fontSize: '3em' },
|
|
14
|
+
large: { fontSize: '5em' },
|
|
15
|
+
smallFont: {
|
|
16
|
+
fontSize: '0.666666667em'
|
|
17
|
+
},
|
|
18
|
+
largeFont: {
|
|
19
|
+
fontSize: '1em'
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Avatar/TextAvatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;IAED,OAAO,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC5B,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC3B,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC1B,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAC3B,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;IAE1B,SAAS,EAAE;QACT,QAAQ,EAAE,eAAe;KAC1B;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
const CORNER_SIZE = {
|
|
2
|
+
xxsmall: '0.5rem',
|
|
3
|
+
xsmall: '0.5rem',
|
|
4
|
+
small: '1rem',
|
|
5
|
+
medium: '1.5rem',
|
|
6
|
+
large: '1.5rem'
|
|
7
|
+
};
|
|
8
|
+
const getClipPathCornerMask = (size) => `polygon(0 0, 100% 0, 100% 100%, ${CORNER_SIZE[size]} 100%, 0 calc(100% - ${CORNER_SIZE[size]}))`;
|
|
9
|
+
export default getClipPathCornerMask;
|
|
10
|
+
//# sourceMappingURL=getClipPathCornerMask.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getClipPathCornerMask.js","sourceRoot":"","sources":["../../../src/Avatar/utils/getClipPathCornerMask.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;CACP,CAAA;AAEV,MAAM,qBAAqB,GAAG,CAAC,IAAoB,EAAE,EAAE,CACrD,mCAAmC,WAAW,CAAC,IAAI,CAAC,wBAAwB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAA;AAEnG,eAAe,qBAAqB,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { VariantType } from '../Avatar';
|
|
2
|
+
declare const getDimensions: (variant: VariantType) => {
|
|
3
|
+
readonly width: "2.5em";
|
|
4
|
+
readonly height: "2.5em";
|
|
5
|
+
} | {
|
|
6
|
+
readonly width: "1.6667em";
|
|
7
|
+
readonly height: "2.5em";
|
|
8
|
+
} | {
|
|
9
|
+
readonly width: "2.5em";
|
|
10
|
+
readonly height: "1.6667em";
|
|
11
|
+
};
|
|
12
|
+
export default getDimensions;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const DIMENSIONS_BY_VARIANT = {
|
|
2
|
+
square: {
|
|
3
|
+
width: '2.5em',
|
|
4
|
+
height: '2.5em'
|
|
5
|
+
},
|
|
6
|
+
portrait: {
|
|
7
|
+
width: '1.6667em',
|
|
8
|
+
height: '2.5em'
|
|
9
|
+
},
|
|
10
|
+
landscape: {
|
|
11
|
+
width: '2.5em',
|
|
12
|
+
height: '1.6667em'
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
const getDimensions = (variant) => DIMENSIONS_BY_VARIANT[variant];
|
|
16
|
+
export default getDimensions;
|
|
17
|
+
//# sourceMappingURL=getDimensions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getDimensions.js","sourceRoot":"","sources":["../../../src/Avatar/utils/getDimensions.ts"],"names":[],"mappings":"AAEA,MAAM,qBAAqB,GAAG;IAC5B,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,UAAU;QACjB,MAAM,EAAE,OAAO;KAChB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,UAAU;KACnB;CACO,CAAA;AAEV,MAAM,aAAa,GAAG,CAAC,OAAoB,EAAE,EAAE,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAA;AAE9E,eAAe,aAAa,CAAA"}
|
|
@@ -41,14 +41,11 @@ const renderNotificationIcon = ({ icon, variant, classes }) => {
|
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
43
|
const renderNotificationContent = (props) => {
|
|
44
|
-
const { classes, children, onClose } = props;
|
|
44
|
+
const { classes, children, onClose, variant } = props;
|
|
45
|
+
const capitalizedVariant = capitalize(variant);
|
|
45
46
|
return (React.createElement(Container, { flex: true, className: classes === null || classes === void 0 ? void 0 : classes.contentWrapper },
|
|
46
|
-
React.createElement(Container, { flex: true, alignItems: 'center', className: classes === null || classes === void 0 ? void 0 : classes.iconWrapper }, renderNotificationIcon(props)),
|
|
47
|
-
React.createElement(Typography, { size: 'medium', className: cx(classes === null || classes === void 0 ? void 0 : classes.content,
|
|
48
|
-
? {
|
|
49
|
-
[classes.contentCloseButton]: onClose
|
|
50
|
-
}
|
|
51
|
-
: undefined), as: 'div' }, children),
|
|
47
|
+
React.createElement(Container, { flex: true, alignItems: 'center', className: cx(classes === null || classes === void 0 ? void 0 : classes.iconWrapper, classes === null || classes === void 0 ? void 0 : classes[`iconWrapper${capitalizedVariant}`]) }, renderNotificationIcon(props)),
|
|
48
|
+
React.createElement(Typography, { size: 'medium', className: cx(classes === null || classes === void 0 ? void 0 : classes.content, classes === null || classes === void 0 ? void 0 : classes[`content${capitalizedVariant}`]), as: 'div' }, children),
|
|
52
49
|
onClose && renderNotificationCloseButton(props)));
|
|
53
50
|
};
|
|
54
51
|
const useStyles = makeStyles(styles, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/Notification/Notification.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EAIV,YAAY,EAEb,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,eAAe,MAAM,mCAAmC,CAAA;AAC/D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,UAAU,MAAM,oCAAoC,CAAA;AAG3D,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,MAAM,EACP,MAAM,SAAS,CAAA;AAChB,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,mBAAmB,MAAM,wBAAwB,CAAA;AAsBxD,MAAM,6BAA6B,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAgB,EAAE,EAAE,CAAC,CAC5E,oBAAC,MAAM,CAAC,QAAQ,IACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,KAAK,EACzB,IAAI,EAAE,oBAAC,YAAY,IAAC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,SAAS,GAAI,GACrD,CACH,CAAA;AAED,MAAM,sBAAsB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAgB,EAAE,EAAE;IAC1E,MAAM,SAAS,GAAG;QAChB,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;KACzB,CAAA;IAED,6GAA6G;IAC7G,sEAAsE;IACtE,QAAQ,OAAO,EAAE;QACf,KAAK,KAAK;YACR,OAAO,oBAAC,kBAAkB,oBAAK,SAAS,IAAE,KAAK,EAAC,KAAK,IAAG,CAAA;QAE1D,KAAK,QAAQ;YACX,OAAO,oBAAC,kBAAkB,oBAAK,SAAS,IAAE,KAAK,EAAC,QAAQ,IAAG,CAAA;QAE7D,KAAK,OAAO;YACV,OAAO,oBAAC,YAAY,oBAAK,SAAS,IAAE,KAAK,EAAC,OAAO,IAAG,CAAA;QAEtD,OAAO,CAAC,CAAC;YACP,MAAM,SAAS,mCAAQ,SAAS,KAAE,KAAK,EAAE,MAAe,GAAE,CAAA;YAE1D,OAAO,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,oBAAC,MAAM,oBAAK,SAAS,EAAI,CAAA;SACxE;KACF;AACH,CAAC,CAAA;AAED,MAAM,yBAAyB,GAAG,CAAC,KAAmB,EAAE,EAAE;IACxD,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"Notification.js","sourceRoot":"","sources":["../../src/Notification/Notification.tsx"],"names":[],"mappings":"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"}
|
package/Notification/styles.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette: { red, green, yellow, common, text }, shadows, sizes: { borderRadius }
|
|
2
|
+
declare const _default: ({ palette: { red, green, yellow, common, text }, shadows, sizes: { borderRadius } }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "close" | "notification" | "notificationShadow" | "roundedBorders" | "notificationRed" | "notificationGreen" | "notificationWhite" | "notificationYellow" | "contentYellow" | "iconWrapper" | "iconWrapperYellow" | "closeIcon">;
|
|
3
3
|
export default _default;
|
package/Notification/styles.js
CHANGED
|
@@ -1,27 +1,31 @@
|
|
|
1
1
|
import { createStyles } from '@material-ui/core/styles';
|
|
2
2
|
import { PicassoProvider } from '@toptal/picasso-provider';
|
|
3
|
+
import { rem } from '@toptal/picasso-shared';
|
|
3
4
|
PicassoProvider.override(({ layout }) => ({
|
|
4
5
|
MuiSnackbarContent: {
|
|
5
6
|
message: {
|
|
6
7
|
display: 'flex',
|
|
7
8
|
maxWidth: layout.contentWidth,
|
|
8
|
-
padding:
|
|
9
|
+
padding: 0,
|
|
9
10
|
width: '100%',
|
|
10
11
|
minWidth: 0,
|
|
11
|
-
margin: '0 auto'
|
|
12
|
+
margin: '0 auto',
|
|
13
|
+
'& > div': {
|
|
14
|
+
width: '100%'
|
|
15
|
+
}
|
|
12
16
|
}
|
|
13
17
|
}
|
|
14
18
|
}));
|
|
15
|
-
export default ({ palette: { red, green, yellow, common, text }, shadows, sizes: { borderRadius }
|
|
19
|
+
export default ({ palette: { red, green, yellow, common, text }, shadows, sizes: { borderRadius } }) => createStyles({
|
|
16
20
|
notification: {
|
|
17
21
|
alignItems: 'start',
|
|
18
22
|
borderRadius: 0,
|
|
19
23
|
flexWrap: 'nowrap',
|
|
20
24
|
maxWidth: 'initial',
|
|
21
|
-
padding: `1.5em calc(1.5em - ${layout.contentPaddingHorizontal})`,
|
|
22
25
|
position: 'relative',
|
|
23
26
|
width: '100%',
|
|
24
|
-
boxShadow: 'none'
|
|
27
|
+
boxShadow: 'none',
|
|
28
|
+
padding: '1.5em 2.5em 1.5625em 1.5em'
|
|
25
29
|
},
|
|
26
30
|
notificationShadow: {
|
|
27
31
|
boxShadow: shadows[3]
|
|
@@ -36,34 +40,48 @@ export default ({ palette: { red, green, yellow, common, text }, shadows, sizes:
|
|
|
36
40
|
background: green.lighter
|
|
37
41
|
},
|
|
38
42
|
notificationWhite: {
|
|
39
|
-
background: common.white
|
|
43
|
+
background: common.white,
|
|
44
|
+
padding: '1.5625em 1.5em 1.5em'
|
|
40
45
|
},
|
|
41
46
|
notificationYellow: {
|
|
42
|
-
background: yellow.lighter
|
|
47
|
+
background: yellow.lighter,
|
|
48
|
+
padding: `1.5em ${rem('130px')}`
|
|
43
49
|
},
|
|
44
50
|
// Content
|
|
45
51
|
content: {
|
|
46
52
|
color: common.black,
|
|
47
53
|
overflowWrap: 'break-word',
|
|
48
|
-
minWidth: 0
|
|
54
|
+
minWidth: 0,
|
|
55
|
+
lineHeight: rem('22px'),
|
|
56
|
+
fontSize: rem('14px'),
|
|
57
|
+
marginTop: '1px'
|
|
49
58
|
},
|
|
50
|
-
|
|
51
|
-
|
|
59
|
+
contentYellow: {
|
|
60
|
+
lineHeight: rem('20px'),
|
|
61
|
+
fontSize: rem('13px'),
|
|
62
|
+
marginTop: 0
|
|
52
63
|
},
|
|
53
64
|
// Content Icon
|
|
54
65
|
iconWrapper: {
|
|
55
66
|
flexBasis: '1.5em',
|
|
56
67
|
marginRight: '1em',
|
|
57
68
|
minWidth: '1.5em',
|
|
58
|
-
height: '1.
|
|
69
|
+
height: '1.5em'
|
|
70
|
+
},
|
|
71
|
+
iconWrapperYellow: {
|
|
72
|
+
flexBasis: 'unset',
|
|
73
|
+
minWidth: '1em',
|
|
74
|
+
height: '1em',
|
|
75
|
+
marginTop: '2px'
|
|
59
76
|
},
|
|
60
77
|
close: {
|
|
61
78
|
position: 'absolute',
|
|
62
|
-
right: '
|
|
63
|
-
top: '
|
|
79
|
+
right: '0.5em',
|
|
80
|
+
top: '0.75em',
|
|
64
81
|
background: 'transparent',
|
|
65
82
|
border: 0,
|
|
66
83
|
padding: 0,
|
|
84
|
+
height: '1em',
|
|
67
85
|
'&:hover': {
|
|
68
86
|
background: 'transparent'
|
|
69
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Notification/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Notification/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAS,EAAE,EAAE,CAAC,CAAC;IAC/C,kBAAkB,EAAE;QAClB,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,QAAQ,EAAE,MAAM,CAAC,YAAY;YAC7B,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,CAAC;YACX,MAAM,EAAE,QAAQ;YAEhB,SAAS,EAAE;gBACT,KAAK,EAAE,MAAM;aACd;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EACd,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,EAC7C,OAAO,EACP,KAAK,EAAE,EAAE,YAAY,EAAE,EACjB,EAAE,EAAE,CACV,YAAY,CAAC;IACX,YAAY,EAAE;QACZ,UAAU,EAAE,OAAO;QACnB,YAAY,EAAE,CAAC;QACf,QAAQ,EAAE,QAAQ;QAClB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;QACjB,OAAO,EAAE,4BAA4B;KACtC;IACD,kBAAkB,EAAE;QAClB,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;KACtB;IACD,cAAc,EAAE;QACd,YAAY,EAAE,YAAY,CAAC,KAAK;KACjC;IACD,eAAe,EAAE;QACf,UAAU,EAAE,GAAG,CAAC,OAAO;KACxB;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,KAAK,CAAC,OAAO;KAC1B;IACD,iBAAiB,EAAE;QACjB,UAAU,EAAE,MAAM,CAAC,KAAK;QACxB,OAAO,EAAE,sBAAsB;KAChC;IACD,kBAAkB,EAAE;QAClB,UAAU,EAAE,MAAM,CAAC,OAAO;QAC1B,OAAO,EAAE,SAAS,GAAG,CAAC,OAAO,CAAC,EAAE;KACjC;IAED,UAAU;IACV,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC,KAAK;QACnB,YAAY,EAAE,YAAY;QAC1B,QAAQ,EAAE,CAAC;QACX,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;QACvB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,SAAS,EAAE,KAAK;KACjB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;QACvB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,SAAS,EAAE,CAAC;KACb;IAED,eAAe;IACf,WAAW,EAAE;QACX,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,OAAO;QACjB,MAAM,EAAE,OAAO;KAChB;IACD,iBAAiB,EAAE;QACjB,SAAS,EAAE,OAAO;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,KAAK;KACjB;IAED,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,QAAQ;QACb,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,KAAK;QAEb,SAAS,EAAE;YACT,UAAU,EAAE,aAAa;SAC1B;KACF;IACD,SAAS,EAAE;QACT,IAAI,EAAE,IAAI,CAAC,OAAO;KACnB;CACF,CAAC,CAAA"}
|
package/Tag/Tag.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { ReactNode, ReactElement, HTMLAttributes, ElementType } from 'react';
|
|
1
|
+
import React, { ReactNode, ReactElement, HTMLAttributes, ElementType, AnchorHTMLAttributes } from 'react';
|
|
2
2
|
import { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
|
|
3
|
-
export
|
|
3
|
+
export declare type DivOrAnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & HTMLAttributes<HTMLDivElement>;
|
|
4
|
+
export interface Props extends BaseProps, TextLabelProps, DivOrAnchorProps {
|
|
4
5
|
/** The component used for the root node. Either a string to use a DOM element or a component. */
|
|
5
6
|
as?: ElementType;
|
|
6
7
|
/** Text content of the `Tag` component */
|
package/Tag/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,
|
|
1
|
+
{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactElement, MouseEventHandler } from 'react';
|
|
2
2
|
import { BaseProps, TextLabelProps } from '@toptal/picasso-shared';
|
|
3
|
-
declare type ClickType = MouseEventHandler<
|
|
3
|
+
declare type ClickType = MouseEventHandler<HTMLElement>;
|
|
4
4
|
export interface Props extends BaseProps, TextLabelProps {
|
|
5
5
|
hovered?: boolean;
|
|
6
6
|
/** Represents visual state of component */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagCheckable.js","sourceRoot":"","sources":["../../src/TagCheckable/TagCheckable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAG9D,OAAO,GAAG,MAAM,QAAQ,CAAA;AAmBxB,MAAM,YAAY,GAAG,CAAC,EAQd,EAAE,EAAE;QARU,EACpB,OAAO,EACP,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,QAAQ,OAEF,EADH,IAAI,cAPa,iEAQrB,CADQ;IAEP,MAAM,WAAW,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"TagCheckable.js","sourceRoot":"","sources":["../../src/TagCheckable/TagCheckable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAG9D,OAAO,GAAG,MAAM,QAAQ,CAAA;AAmBxB,MAAM,YAAY,GAAG,CAAC,EAQd,EAAE,EAAE;QARU,EACpB,OAAO,EACP,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,QAAQ,OAEF,EADH,IAAI,cAPa,iEAQrB,CADQ;IAEP,MAAM,WAAW,GAAG,CAAC,CAA4C,EAAE,EAAE;QACnE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,OAAO,CAAC,CAAA;QACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,CAAC,CAAC,CAAA;IACd,CAAC,CAAA;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9C,OAAO,CACL,oBAAC,GAAG,kBACF,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,IACZ,IAAI,GAEP,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.3.0",
|
|
4
4
|
"description": "Toptal UI components library",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"**/styles.ts",
|
|
70
70
|
"**/styles.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "10ca2bceb49d2044f561f563605785d12cbcee45"
|
|
73
73
|
}
|
package/Avatar/IconAvatar.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { JssProps } from '@toptal/picasso-shared';
|
|
2
|
-
import type { AvatarSizeType, VariantType } from './Avatar';
|
|
3
|
-
declare type WithIconProps = {
|
|
4
|
-
size: AvatarSizeType;
|
|
5
|
-
variant: VariantType;
|
|
6
|
-
className?: string;
|
|
7
|
-
} & JssProps;
|
|
8
|
-
declare const WithIcon: ({ classes, size, variant, className }: WithIconProps) => JSX.Element;
|
|
9
|
-
export default WithIcon;
|
package/Avatar/IconAvatar.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import cx from 'classnames';
|
|
3
|
-
import ImagePlaceholder from './ImagePlaceholder';
|
|
4
|
-
import { Profile16 } from '..';
|
|
5
|
-
const WithIcon = ({ classes, size, variant, className }) => {
|
|
6
|
-
return (React.createElement(React.Fragment, null,
|
|
7
|
-
React.createElement(ImagePlaceholder, { variant: variant, size: size, className: className, classes: classes }),
|
|
8
|
-
React.createElement(Profile16, { className: cx(classes.centeredContent, classes[`${size}Icon`]), color: 'white' })));
|
|
9
|
-
};
|
|
10
|
-
export default WithIcon;
|
|
11
|
-
//# sourceMappingURL=IconAvatar.js.map
|
package/Avatar/IconAvatar.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"IconAvatar.js","sourceRoot":"","sources":["../../src/Avatar/IconAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAA;AAO9B,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAiB,EAAE,EAAE;IACxE,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,GAChB;QACF,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,OAAO,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,EAC9D,KAAK,EAAC,OAAO,GACb,CACD,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA"}
|
package/Avatar/ImageAvatar.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { JssProps } from '@toptal/picasso-shared';
|
|
2
|
-
import type { AvatarSizeType, VariantType, Props as AvatarProps } from './Avatar';
|
|
3
|
-
declare type WithImageProps = {
|
|
4
|
-
variant: VariantType;
|
|
5
|
-
size: AvatarSizeType;
|
|
6
|
-
src: string;
|
|
7
|
-
} & Pick<AvatarProps, 'alt' | 'name' | 'style' | 'className'> & JssProps;
|
|
8
|
-
declare const WithImage: ({ alt, classes, className, name, size, src, style, variant }: WithImageProps) => JSX.Element | null;
|
|
9
|
-
export default WithImage;
|
package/Avatar/ImageAvatar.js
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import cx from 'classnames';
|
|
14
|
-
import Image from '../Image';
|
|
15
|
-
import Logo from '../Logo';
|
|
16
|
-
const isBrowserSupportsObjectFit = 'objectFit' in document.documentElement.style;
|
|
17
|
-
const renderLogo = ({ size, classes }) => {
|
|
18
|
-
const isTooSmall = ['small', 'xsmall', 'xxsmall'].includes(size);
|
|
19
|
-
if (isTooSmall) {
|
|
20
|
-
return null;
|
|
21
|
-
}
|
|
22
|
-
return (React.createElement("div", { className: classes.logoContainer },
|
|
23
|
-
React.createElement(Logo, { emblem: true, variant: 'white', className: classes.logo })));
|
|
24
|
-
};
|
|
25
|
-
// You will be surprised, but it's a IE11 fix for `object-fit: cover` for images
|
|
26
|
-
const IE11Image = (_a) => {
|
|
27
|
-
var { style, src } = _a, rest = __rest(_a, ["style", "src"]);
|
|
28
|
-
return (React.createElement("div", Object.assign({ style: Object.assign({ backgroundImage: `url(${src})`, backgroundSize: 'cover', backgroundPosition: 'center center' }, style) }, rest)));
|
|
29
|
-
};
|
|
30
|
-
const WithImage = ({ alt, classes, className, name, size, src, style, variant }) => {
|
|
31
|
-
const ImageComponent = isBrowserSupportsObjectFit ? Image : IE11Image;
|
|
32
|
-
if (!src) {
|
|
33
|
-
return null;
|
|
34
|
-
}
|
|
35
|
-
return (React.createElement(React.Fragment, null,
|
|
36
|
-
React.createElement(ImageComponent, { alt: alt || String(name), className: cx(classes.image, classes[variant], classes[size], classes.clippedCorner, className), src: src, style: style }),
|
|
37
|
-
renderLogo({ classes, size })));
|
|
38
|
-
};
|
|
39
|
-
export default WithImage;
|
|
40
|
-
//# sourceMappingURL=ImageAvatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImageAvatar.js","sourceRoot":"","sources":["../../src/Avatar/ImageAvatar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAG3B,OAAO,KAAK,MAAM,UAAU,CAAA;AAC5B,OAAO,IAAI,MAAM,SAAS,CAAA;AAQ1B,MAAM,0BAA0B,GAAG,WAAW,IAAI,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAA;AAKhF,MAAM,UAAU,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAa,EAAE,EAAE;IAClD,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAEhE,IAAI,UAAU,EAAE;QACd,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,OAAO,CAAC,aAAa;QACnC,oBAAC,IAAI,IAAC,MAAM,QAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CACpD,CACP,CAAA;AACH,CAAC,CAAA;AAED,gFAAgF;AAChF,MAAM,SAAS,GAAG,CAAC,EAAsD,EAAE,EAAE;QAA1D,EAAE,KAAK,EAAE,GAAG,OAA0C,EAArC,IAAI,cAArB,gBAAuB,CAAF;IAAsC,OAAA,CAC5E,2CACE,KAAK,kBACH,eAAe,EAAE,OAAO,GAAG,GAAG,EAC9B,cAAc,EAAE,OAAO,EACvB,kBAAkB,EAAE,eAAe,IAChC,KAAK,KAEN,IAAI,EACR,CACH,CAAA;CAAA,CAAA;AAQD,MAAM,SAAS,GAAG,CAAC,EACjB,GAAG,EACH,OAAO,EACP,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,KAAK,EACL,OAAO,EACQ,EAAE,EAAE;IACnB,MAAM,cAAc,GAAG,0BAA0B,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;IAErE,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL;QACE,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,EACxB,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,KAAK,EACb,OAAO,CAAC,OAAO,CAAC,EAChB,OAAO,CAAC,IAAI,CAAC,EACb,OAAO,CAAC,aAAa,EACrB,SAAS,CACV,EACD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,GACZ;QACD,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC7B,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { JssProps } from '@toptal/picasso-shared';
|
|
2
|
-
import type { VariantType, AvatarSizeType } from './Avatar';
|
|
3
|
-
declare type ImagePlaceholderProps = {
|
|
4
|
-
className?: string;
|
|
5
|
-
variant: VariantType;
|
|
6
|
-
size: AvatarSizeType;
|
|
7
|
-
} & JssProps;
|
|
8
|
-
declare const ImagePlaceholder: ({ size, variant, className, classes }: ImagePlaceholderProps) => JSX.Element;
|
|
9
|
-
export default ImagePlaceholder;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import cx from 'classnames';
|
|
3
|
-
const ImagePlaceholder = ({ size, variant, className, classes }) => {
|
|
4
|
-
return (React.createElement("div", { className: cx(classes.textContainer, classes[variant], classes[size], classes.clippedCorner, className) }));
|
|
5
|
-
};
|
|
6
|
-
export default ImagePlaceholder;
|
|
7
|
-
//# sourceMappingURL=ImagePlaceholder.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePlaceholder.js","sourceRoot":"","sources":["../../src/Avatar/ImagePlaceholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAU3B,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,OAAO,EACP,SAAS,EACT,OAAO,EACe,EAAE,EAAE;IAC1B,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,aAAa,EACrB,OAAO,CAAC,OAAO,CAAC,EAChB,OAAO,CAAC,IAAI,CAAC,EACb,OAAO,CAAC,aAAa,EACrB,SAAS,CACV,GACD,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,gBAAgB,CAAA"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { JssProps } from '@toptal/picasso-shared';
|
|
2
|
-
import type { VariantType, AvatarSizeType } from './Avatar';
|
|
3
|
-
declare type WithInitialsProps = {
|
|
4
|
-
name: string;
|
|
5
|
-
variant: VariantType;
|
|
6
|
-
size: AvatarSizeType;
|
|
7
|
-
className?: string;
|
|
8
|
-
} & JssProps;
|
|
9
|
-
declare const WithInitials: ({ classes, name, variant, size, className }: WithInitialsProps) => JSX.Element;
|
|
10
|
-
export default WithInitials;
|
package/Avatar/InitialsAvatar.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import cx from 'classnames';
|
|
3
|
-
import { Typography } from '..';
|
|
4
|
-
import ImagePlaceholder from './ImagePlaceholder';
|
|
5
|
-
import getNameInitials from '../utils/get-name-initials';
|
|
6
|
-
import { AVATAR_INITIALS_LIMIT } from '../utils/constants';
|
|
7
|
-
const WithInitials = ({ classes, name, variant, size, className }) => {
|
|
8
|
-
const initials = getNameInitials(name);
|
|
9
|
-
return (React.createElement(React.Fragment, null,
|
|
10
|
-
React.createElement(ImagePlaceholder, { variant: variant, size: size, className: className, classes: classes }),
|
|
11
|
-
React.createElement(Typography, { className: cx(classes.text, classes.centeredContent, {
|
|
12
|
-
[classes.textCapLimit]: initials.length >= AVATAR_INITIALS_LIMIT
|
|
13
|
-
}), invert: true }, initials)));
|
|
14
|
-
};
|
|
15
|
-
export default WithInitials;
|
|
16
|
-
//# sourceMappingURL=InitialsAvatar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"InitialsAvatar.js","sourceRoot":"","sources":["../../src/Avatar/InitialsAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAA;AAC/B,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,eAAe,MAAM,4BAA4B,CAAA;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAS1D,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACS,EAAE,EAAE;IACtB,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,gBAAgB,IACf,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,GAChB;QACF,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,eAAe,EAAE;gBACnD,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,MAAM,IAAI,qBAAqB;aACjE,CAAC,EACF,MAAM,UAEL,QAAQ,CACE,CACZ,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
|
package/Avatar/styles.d.ts
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "medium" | "text" | "large" | "small" | "square" | "root" | "image" | "xxsmall" | "xsmall" | "portrait" | "landscape" | "clippedCorner" | "textContainer" | "centeredContent" | "textCapLimit" | "logoContainer" | "logo" | "xxsmalLIcon" | "xsmallIcon" | "smallIcon" | "mediumIcon" | "largeIcon">;
|
|
3
|
-
export default _default;
|
package/Avatar/styles.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { createStyles } from '@material-ui/core/styles';
|
|
2
|
-
import { rem } from '@toptal/picasso-shared';
|
|
3
|
-
const getClipPathCornerMask = (cornerWidth) => `polygon(0 0, 100% 0, 100% 100%, ${cornerWidth} 100%, 0 calc(100% - ${cornerWidth}))`;
|
|
4
|
-
const CLIPPED_CORNER_SIZE_EM = 0.5;
|
|
5
|
-
const LOGO_SIZE_EM = 0.5;
|
|
6
|
-
export default ({ palette }) => createStyles({
|
|
7
|
-
root: {
|
|
8
|
-
position: 'relative'
|
|
9
|
-
},
|
|
10
|
-
image: {
|
|
11
|
-
objectFit: 'cover'
|
|
12
|
-
},
|
|
13
|
-
square: {
|
|
14
|
-
width: '2.5em',
|
|
15
|
-
height: '2.5em'
|
|
16
|
-
},
|
|
17
|
-
portrait: {
|
|
18
|
-
width: '1.666em',
|
|
19
|
-
height: '2.5em'
|
|
20
|
-
},
|
|
21
|
-
landscape: {
|
|
22
|
-
width: '2.5em',
|
|
23
|
-
height: '1.666em'
|
|
24
|
-
},
|
|
25
|
-
xxsmall: {
|
|
26
|
-
fontSize: '0.8rem'
|
|
27
|
-
},
|
|
28
|
-
xsmall: {
|
|
29
|
-
fontSize: '1rem'
|
|
30
|
-
},
|
|
31
|
-
small: {
|
|
32
|
-
fontSize: '2rem'
|
|
33
|
-
},
|
|
34
|
-
medium: {
|
|
35
|
-
fontSize: '3rem'
|
|
36
|
-
},
|
|
37
|
-
large: {
|
|
38
|
-
fontSize: '4.5rem'
|
|
39
|
-
},
|
|
40
|
-
clippedCorner: {
|
|
41
|
-
clipPath: getClipPathCornerMask(`${CLIPPED_CORNER_SIZE_EM}em`),
|
|
42
|
-
// we can remove this prefix as soon as this issue will
|
|
43
|
-
// be resolved - https://github.com/cssinjs/css-vendor/issues/74
|
|
44
|
-
'-webkit-clip-path': getClipPathCornerMask(`${CLIPPED_CORNER_SIZE_EM}em`)
|
|
45
|
-
},
|
|
46
|
-
textContainer: {
|
|
47
|
-
backgroundColor: palette.grey.main
|
|
48
|
-
},
|
|
49
|
-
text: {
|
|
50
|
-
fontSize: '1em',
|
|
51
|
-
textTransform: 'uppercase'
|
|
52
|
-
},
|
|
53
|
-
centeredContent: {
|
|
54
|
-
position: 'absolute',
|
|
55
|
-
top: '50%',
|
|
56
|
-
left: '50%',
|
|
57
|
-
transform: 'translate(-50%, -50%)'
|
|
58
|
-
},
|
|
59
|
-
textCapLimit: {
|
|
60
|
-
fontSize: '0.85em'
|
|
61
|
-
},
|
|
62
|
-
logoContainer: {
|
|
63
|
-
display: 'flex',
|
|
64
|
-
position: 'absolute',
|
|
65
|
-
bottom: `${CLIPPED_CORNER_SIZE_EM * 0.8}em`,
|
|
66
|
-
left: `${CLIPPED_CORNER_SIZE_EM * 0.8}em`
|
|
67
|
-
},
|
|
68
|
-
logo: {
|
|
69
|
-
fontSize: `${LOGO_SIZE_EM}em`
|
|
70
|
-
},
|
|
71
|
-
xxsmalLIcon: { fontSize: '1rem' },
|
|
72
|
-
xsmallIcon: { fontSize: '1rem' },
|
|
73
|
-
smallIcon: { fontSize: rem('24px') },
|
|
74
|
-
mediumIcon: { fontSize: rem('30px') },
|
|
75
|
-
largeIcon: { fontSize: rem('48px') }
|
|
76
|
-
});
|
|
77
|
-
//# sourceMappingURL=styles.js.map
|
package/Avatar/styles.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,MAAM,qBAAqB,GAAG,CAAC,WAAmB,EAAE,EAAE,CACpD,mCAAmC,WAAW,wBAAwB,WAAW,IAAI,CAAA;AAEvF,MAAM,sBAAsB,GAAG,GAAG,CAAA;AAClC,MAAM,YAAY,GAAG,GAAG,CAAA;AAExB,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,QAAQ,EAAE,UAAU;KACrB;IACD,KAAK,EAAE;QACL,SAAS,EAAE,OAAO;KACnB;IACD,MAAM,EAAE;QACN,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,OAAO;KAChB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,SAAS;KAClB;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,QAAQ;KACnB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM;KACjB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;KACjB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,MAAM;KACjB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ;KACnB;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,qBAAqB,CAAC,GAAG,sBAAsB,IAAI,CAAC;QAC9D,uDAAuD;QACvD,gEAAgE;QAChE,mBAAmB,EAAE,qBAAqB,CAAC,GAAG,sBAAsB,IAAI,CAAC;KAC1E;IACD,aAAa,EAAE;QACb,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACnC;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,WAAW;KAC3B;IACD,eAAe,EAAE;QACf,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,KAAK;QACV,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,uBAAuB;KACnC;IACD,YAAY,EAAE;QACZ,QAAQ,EAAE,QAAQ;KACnB;IACD,aAAa,EAAE;QACb,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG,sBAAsB,GAAG,GAAG,IAAI;QAC3C,IAAI,EAAE,GAAG,sBAAsB,GAAG,GAAG,IAAI;KAC1C;IACD,IAAI,EAAE;QACJ,QAAQ,EAAE,GAAG,YAAY,IAAI;KAC9B;IACD,WAAW,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;IACjC,UAAU,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;IAChC,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE;IACpC,UAAU,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE;IACrC,SAAS,EAAE,EAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE;CACrC,CAAC,CAAA"}
|