@xfers/design-system 2.4.5 → 2.5.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/cjs/index.js +2 -2
- package/cjs/index.js.map +1 -1
- package/dist/components/Modal/index.js +8 -7
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/shared/modalContext.js +3 -4
- package/dist/shared/modalContext.js.map +1 -1
- package/dist/types/components/Modal/index.d.ts +3 -2
- package/es/index.js +2 -2
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -12,17 +12,17 @@ var Cross_1 = require("src/icons/Cross");
|
|
|
12
12
|
var themeContext_1 = require("src/shared/themeContext");
|
|
13
13
|
var spacing_1 = require("src/constants/spacing");
|
|
14
14
|
var ModalContent = function (_a) {
|
|
15
|
-
var onClose = _a.onClose, icon = _a.icon, title = _a.title, children = _a.children, footer = _a.footer, disabledCloseIcon = _a.disabledCloseIcon;
|
|
15
|
+
var onClose = _a.onClose, icon = _a.icon, title = _a.title, children = _a.children, footer = _a.footer, disabledCloseIcon = _a.disabledCloseIcon, className = _a.className;
|
|
16
16
|
var neutral = themeContext_1.useTheme().neutral;
|
|
17
|
-
return (react_1.default.createElement(
|
|
18
|
-
react_1.default.createElement(ModalHeader, { hasIcon: Boolean(icon) },
|
|
17
|
+
return (react_1.default.createElement(ModalContentWrapper, { className: className },
|
|
18
|
+
(icon || title || !disabledCloseIcon) && (react_1.default.createElement(ModalHeader, { hasIcon: Boolean(icon) },
|
|
19
19
|
react_1.default.createElement(TitleContainer, null,
|
|
20
20
|
react_1.default.createElement(Title, null,
|
|
21
21
|
icon,
|
|
22
|
-
react_1.default.createElement(Typography_1.H2, null, title)),
|
|
22
|
+
react_1.default.createElement(Typography_1.H2, null, title || '')),
|
|
23
23
|
!disabledCloseIcon && (react_1.default.createElement(Close, { onClick: function () { return onClose(); } },
|
|
24
24
|
react_1.default.createElement(Cross_1.default, { color: neutral.text, width: 18 })))),
|
|
25
|
-
react_1.default.createElement(Divider_1.default, null)),
|
|
25
|
+
react_1.default.createElement(Divider_1.default, null))),
|
|
26
26
|
react_1.default.createElement(ModalBody, null, children),
|
|
27
27
|
react_1.default.createElement(ModalFooter, null, footer)));
|
|
28
28
|
};
|
|
@@ -34,9 +34,10 @@ var ModalHeader = styled_1.default.div(templateObject_1 || (templateObject_1 = _
|
|
|
34
34
|
: "\n height: 73px;\n ";
|
|
35
35
|
}, spacing_1.EXTRA_LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING);
|
|
36
36
|
var ModalBody = styled_1.default(Typography_1.P1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-bottom: 1px solid #e8e8e8;\n padding-top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n"], ["\n border-bottom: 1px solid #e8e8e8;\n padding-top: ", ";\n padding-left: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n"])), spacing_1.LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING, spacing_1.EXTRA_LARGE_SPACING);
|
|
37
|
-
var ModalFooter = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\
|
|
37
|
+
var ModalFooter = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: #f6f7f9;\n display: flex;\n justify-content: flex-end;\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n"], ["\n background: #f6f7f9;\n display: flex;\n justify-content: flex-end;\n padding-right: ", ";\n padding-top: ", ";\n padding-bottom: ", ";\n"])), spacing_1.EXTRA_LARGE_SPACING, spacing_1.SMALL_SPACING, spacing_1.SMALL_SPACING);
|
|
38
38
|
var TitleContainer = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
|
|
39
39
|
var Title = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n user-select: none;\n & :not(:last-child) {\n margin-right: 10px;\n }\n"], ["\n display: flex;\n align-items: center;\n user-select: none;\n & :not(:last-child) {\n margin-right: 10px;\n }\n"])));
|
|
40
40
|
var Close = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n cursor: pointer;\n padding-left: 5px;\n padding-right: 5px;\n margin-right: -5px;\n"], ["\n cursor: pointer;\n padding-left: 5px;\n padding-right: 5px;\n margin-right: -5px;\n"])));
|
|
41
|
-
var
|
|
41
|
+
var ModalContentWrapper = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: calc(100vw - 32px);\n max-width: 400px;\n background: white;\n box-shadow: 0px 4px 10px rgba(170, 170, 170, 0.25);\n border-radius: 5px;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n margin-bottom: 1.7vh;\n position: absolute;\n top: 6.8vh;\n left: 50%;\n transform: translateX(-50%);\n"], ["\n width: calc(100vw - 32px);\n max-width: 400px;\n background: white;\n box-shadow: 0px 4px 10px rgba(170, 170, 170, 0.25);\n border-radius: 5px;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n margin-bottom: 1.7vh;\n position: absolute;\n top: 6.8vh;\n left: 50%;\n transform: translateX(-50%);\n"])));
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
42
43
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,wDAAkD;AAClD,kDAA4C;AAC5C,yCAAuC;AACvC,wDAAkD;AAClD,iDAAyF;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,wDAAkD;AAClD,kDAA4C;AAC5C,yCAAuC;AACvC,wDAAkD;AAClD,iDAAyF;AAYzF,IAAM,YAAY,GAAG,UAAC,EAQF;QAPlB,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,iBAAiB,uBAAA,EACjB,SAAS,eAAA;IAED,IAAA,OAAO,GAAK,uBAAQ,EAAE,QAAf,CAAe;IAE9B,OAAO,CACL,8BAAC,mBAAmB,IAAC,SAAS,EAAE,SAAS;QACtC,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CACxC,8BAAC,WAAW,IAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC;YACjC,8BAAC,cAAc;gBACb,8BAAC,KAAK;oBACH,IAAI;oBACL,8BAAC,eAAE,QAAE,KAAK,IAAI,EAAE,CAAM,CAChB;gBACP,CAAC,iBAAiB,IAAI,CACrB,8BAAC,KAAK,IAAC,OAAO,EAAE,cAAM,OAAA,OAAO,EAAE,EAAT,CAAS;oBAC7B,8BAAC,eAAS,IAAC,KAAK,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,GAAI,CACvC,CACT,CACc;YACjB,8BAAC,iBAAO,OAAG,CACC,CACf;QACD,8BAAC,SAAS,QAAE,QAAQ,CAAa;QACjC,8BAAC,WAAW,QAAE,MAAM,CAAe,CACf,CACvB,CAAA;AACH,CAAC,CAAA;AACD,kBAAe,YAAY,CAAA;AAE3B,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,8HAAsB,MAChD;IAOC,oBACa,EAAmB,sBAClB,EAAmB,KACrC,KAVG,UAAA,KAAK;IACL,OAAA,KAAK,CAAC,OAAO;QACX,CAAC,CAAC,6BAEH;QACC,CAAC,CAAC,6BAEH;AAND,CAMC,EACa,6BAAmB,EAClB,6BAAmB,CACrC,CAAA;AAED,IAAM,SAAS,GAAG,gBAAM,CAAC,eAAE,CAAC,0MAAA,wDAEX,EAAa,qBACZ,EAAmB,sBAClB,EAAmB,uBAClB,EAAmB,KACtC,KAJgB,uBAAa,EACZ,6BAAmB,EAClB,6BAAmB,EAClB,6BAAmB,CACtC,CAAA;AAED,IAAM,WAAW,GAAG,gBAAM,CAAC,GAAG,sNAAA,6FAIX,EAAmB,oBACrB,EAAa,uBACV,EAAa,KAChC,KAHkB,6BAAmB,EACrB,uBAAa,EACV,uBAAa,CAChC,CAAA;AAED,IAAM,cAAc,GAAG,gBAAM,CAAC,GAAG,qKAAA,kGAKhC,IAAA,CAAA;AAED,IAAM,KAAK,GAAG,gBAAM,CAAC,GAAG,8LAAA,2HAOvB,IAAA,CAAA;AAED,IAAM,KAAK,GAAG,gBAAM,CAAC,GAAG,+JAAA,4FAKvB,IAAA,CAAA;AAED,IAAM,mBAAmB,GAAG,gBAAM,CAAC,GAAG,wYAAA,qUAarC,IAAA,CAAA"}
|
|
@@ -11,7 +11,7 @@ var styled_1 = require("@emotion/styled");
|
|
|
11
11
|
var core_1 = require("@emotion/core");
|
|
12
12
|
var ModalContext = react_1.default.createContext({
|
|
13
13
|
setModal: function () { return null; },
|
|
14
|
-
resetModal: function () { return null; }
|
|
14
|
+
resetModal: function () { return null; }
|
|
15
15
|
});
|
|
16
16
|
var bodyElement = document.body;
|
|
17
17
|
var ModalContainer = function (_a) {
|
|
@@ -28,7 +28,7 @@ var ModalContainer = function (_a) {
|
|
|
28
28
|
var preventBackgroundScrolling = (react_1.default.createElement(core_1.Global, { styles: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n body {\n overflow: hidden;\n }\n "], ["\n body {\n overflow: hidden;\n }\n "]))) }));
|
|
29
29
|
return react_dom_1.default.createPortal(react_1.default.createElement(ModalMask, { open: !!modal },
|
|
30
30
|
!!modal && preventBackgroundScrolling,
|
|
31
|
-
|
|
31
|
+
modal), mainElement);
|
|
32
32
|
};
|
|
33
33
|
var ModalProvider = function (_a) {
|
|
34
34
|
var children = _a.children;
|
|
@@ -55,6 +55,5 @@ var ModalMask = styled_1.default.div(templateObject_4 || (templateObject_4 = __m
|
|
|
55
55
|
"\n"])), function (props) {
|
|
56
56
|
return props.open && core_1.css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n animation: ", " 0.3s ease;\n "], ["\n display: block;\n animation: ", " 0.3s ease;\n "])), showAnimation);
|
|
57
57
|
});
|
|
58
|
-
var
|
|
59
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
58
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
60
59
|
//# sourceMappingURL=modalContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modalContext.js","sourceRoot":"","sources":["../../src/shared/modalContext.tsx"],"names":[],"mappings":";;;;;;;AAAA,+BAA+D;AAC/D,uCAAgC;AAChC,0CAAoC;AACpC,sCAAsD;AAEtD,IAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAIrC;IACD,QAAQ,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IACpB,UAAU,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;CACvB,CAAC,CAAA;AAEF,IAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"modalContext.js","sourceRoot":"","sources":["../../src/shared/modalContext.tsx"],"names":[],"mappings":";;;;;;;AAAA,+BAA+D;AAC/D,uCAAgC;AAChC,0CAAoC;AACpC,sCAAsD;AAEtD,IAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAIrC;IACD,QAAQ,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;IACpB,UAAU,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI;CACvB,CAAC,CAAA;AAEF,IAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAA;AAKjC,IAAM,cAAc,GAAG,UAAC,EAA8B;QAA5B,KAAK,WAAA;IAC7B,sDAAsD;IAC/C,IAAA,WAAW,GAAI,gBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,GAA3C,CAA2C;IAC7D,WAAW,CAAC,YAAY,CAAC,IAAI,EAAE,YAAY,CAAC,CAAA;IAE5C,iBAAS,CAAC;QACR,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QACpC,OAAO;YACL,WAAW,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;QACtC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,IAAM,0BAA0B,GAAG,CACjC,8BAAC,aAAM,IACL,MAAM,EAAE,UAAG,qIAAA,kEAIV,OACD,CACH,CAAA;IACD,OAAO,mBAAQ,CAAC,YAAY,CAC1B,8BAAC,SAAS,IAAC,IAAI,EAAE,CAAC,CAAC,KAAK;QACrB,CAAC,CAAC,KAAK,IAAI,0BAA0B;QACrC,KAAK,CACI,EACZ,WAAW,CACZ,CAAA;AACH,CAAC,CAAA;AAGD,IAAM,aAAa,GAAG,UAAC,EAAgC;QAA9B,QAAQ,cAAA;IAC/B,sDAAsD;IAChD,IAAA,KAAoB,gBAAQ,EAAkC,EAA7D,KAAK,QAAA,EAAE,QAAQ,QAA8C,CAAA;IACpE,IAAM,UAAU,GAAG,mBAAW,CAAC;QAC7B,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,UAAU,YAAA,EAAE,QAAQ,UAAA,EAAE;QACnD,QAAQ;QACT,8BAAC,cAAc,IAAC,KAAK,EAAE,KAAK,GAAI,CACV,CACzB,CAAA;AACH,CAAC,CAAA;AAWQ,sCAAa;AATtB,IAAM,QAAQ,GAAG;IACf,IAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;IAE9C,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,6CAA6C,CAAC,CAAA;KAC/D;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAEuB,4BAAQ;AAEhC,IAAM,aAAa,GAAG,gBAAS,qIAAA,kEAO9B,IAAA,CAAA;AACD,IAAM,SAAS,GAAG,gBAAM,CAAC,GAAG,qRAAmB,4MAU3C;IAKC,IACJ,KANG,UAAA,KAAK;IACL,OAAA,KAAK,CAAC,IAAI,IACV,UAAG,oIAAA,4CAEY,EAAa,mBAC3B,KADc,aAAa,CAC3B;AAJD,CAIC,CACJ,CAAA"}
|
|
@@ -2,10 +2,11 @@ import React from 'react';
|
|
|
2
2
|
declare type ModalContentProps = {
|
|
3
3
|
onClose: () => void;
|
|
4
4
|
icon: React.ReactNode | false;
|
|
5
|
-
title
|
|
5
|
+
title?: React.ReactNode;
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
footer: React.ReactNode;
|
|
8
8
|
disabledCloseIcon?: boolean;
|
|
9
|
+
className?: string;
|
|
9
10
|
};
|
|
10
|
-
declare const ModalContent: ({ onClose, icon, title, children, footer, disabledCloseIcon, }: ModalContentProps) => JSX.Element;
|
|
11
|
+
declare const ModalContent: ({ onClose, icon, title, children, footer, disabledCloseIcon, className }: ModalContentProps) => JSX.Element;
|
|
11
12
|
export default ModalContent;
|