@toptal/picasso 13.2.0 → 13.2.1
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.
|
@@ -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":";;;;;;;;;;;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,OAAO,EAAE,GAAG,KAAK,CAAA;IAErD,MAAM,kBAAkB,GAAG,UAAU,CAAC,OAAiB,CAAC,CAAA;IAExD,OAAO,CACL,oBAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,cAAc;QAChD,oBAAC,SAAS,IACR,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAE,EAAE,CACX,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EACpB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,cAAc,kBAAkB,EAAE,CAAC,CAC9C,IAEA,sBAAsB,CAAC,KAAK,CAAC,CACpB;QACZ,oBAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,EAChB,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,UAAU,kBAAkB,EAAE,CAAC,CAC1C,EACD,EAAE,EAAC,KAAK,IAEP,QAAQ,CACE;QACZ,OAAO,IAAI,6BAA6B,CAAC,KAAK,CAAC,CACtC,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,cAAc;CACrB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAC9B,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAjD,oCAAyC,CAAQ,CAAA;IAEvD,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,eAAe,oBACV,IAAI,IACR,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,eAAe,UAAU,CAAC,OAAiB,CAAC,EAAE,CAAC,EACvD;YACE,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,QAAQ;YACtC,CAAC,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ;SACnC,EACD,OAAO,CAAC,YAAY,EACpB,SAAS,CACV,EACD,OAAO,EAAE,yBAAyB,iCAC7B,KAAK,KACR,OAAO,IACP,EACF,GAAG,EAAE,GAAG,IACR,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAED,YAAY,CAAC,YAAY,GAAG;IAC1B,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,QAAQ;CAClB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC,CAAA"}
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso",
|
|
3
|
-
"version": "13.2.
|
|
3
|
+
"version": "13.2.1",
|
|
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": "bdd7209bb257ca336cac9879328e25f122c31cef"
|
|
73
73
|
}
|