@xfers/design-system 4.1.1-dev.cc0c14eeb9 → 4.1.1-dev.ccc8b981e6
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/dist/components/Alert/Alert.js +10 -16
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/Alert/styles.js +8 -11
- package/dist/components/Alert/styles.js.map +1 -1
- package/dist/types/components/Alert/Alert.d.ts +2 -2
- package/dist/types/components/Alert/styles.d.ts +0 -1
- package/dist/types/components/Alert/types.d.ts +1 -2
- package/package.json +1 -1
|
@@ -1,34 +1,28 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var react_1 = require("react");
|
|
4
|
-
require("antd/es/alert/style/css");
|
|
5
4
|
var icons_1 = require("src/icons");
|
|
6
5
|
var styles_1 = require("./styles");
|
|
7
6
|
var Typography_1 = require("src/constants/Typography/Typography");
|
|
8
7
|
var colors_1 = require("src/constants/colors");
|
|
8
|
+
require("antd/es/alert/style/css");
|
|
9
9
|
var CustomAlert = function (_a) {
|
|
10
10
|
var type = _a.type, message = _a.message, closable = _a.closable, icon = _a.icon, showIcon = _a.showIcon, onClose = _a.onClose, title = _a.title;
|
|
11
|
-
var _b = (0, react_1.useState)(true), isVisible = _b[0], setIsVisible = _b[1];
|
|
12
11
|
var getIcon = function () {
|
|
13
|
-
var iconElement = icon
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
return (react_1.default.createElement(
|
|
12
|
+
var iconElement = icon ?
|
|
13
|
+
react_1.default.cloneElement(icon, { width: 20, height: 20 }) :
|
|
14
|
+
react_1.default.createElement(icons_1.Bell, { width: 20, height: 20 });
|
|
15
|
+
return (react_1.default.createElement("div", { style: { width: 24, height: 24 } }, iconElement));
|
|
17
16
|
};
|
|
18
17
|
var Message = function () {
|
|
19
|
-
var textColor = type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT;
|
|
20
18
|
return (react_1.default.createElement(styles_1.StyledAlertMessageContainer, null,
|
|
21
|
-
title && (react_1.default.createElement(Typography_1.Typography.Label, { color:
|
|
22
|
-
react_1.default.createElement(Typography_1.Typography.Body, { color:
|
|
19
|
+
title && (react_1.default.createElement(Typography_1.Typography.Label, { color: type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT, size: "md" }, title)),
|
|
20
|
+
react_1.default.createElement(Typography_1.Typography.Body, { color: type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT, size: "md" }, message)));
|
|
23
21
|
};
|
|
24
|
-
var CloseIcon = function () {
|
|
25
|
-
|
|
26
|
-
setIsVisible(false);
|
|
27
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
22
|
+
var CloseIcon = function () {
|
|
23
|
+
return (react_1.default.createElement(icons_1.Cross, { width: 14, height: 14 }));
|
|
28
24
|
};
|
|
29
|
-
|
|
30
|
-
return null;
|
|
31
|
-
return (react_1.default.createElement(styles_1.StyledAlert, { type: type || 'warning', message: react_1.default.createElement(Message, null), closable: closable, icon: getIcon(), showIcon: showIcon, onClose: handleClose, closeIcon: react_1.default.createElement(CloseIcon, null) }));
|
|
25
|
+
return (react_1.default.createElement(styles_1.StyledAlert, { type: type || 'warning', message: react_1.default.createElement(Message, null), closable: closable, icon: getIcon(), showIcon: showIcon, onClose: onClose, closeIcon: react_1.default.createElement(CloseIcon, null) }));
|
|
32
26
|
};
|
|
33
27
|
exports.default = CustomAlert;
|
|
34
28
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;AAAA,+
|
|
1
|
+
{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;AAAA,+BAAyB;AAEzB,mCAAuC;AACvC,mCAAmE;AACnE,kEAAgE;AAChE,+CAAmD;AACnD,mCAAgC;AAEhC,IAAM,WAAW,GAAG,UAAC,EAA6E;QAA3E,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA;IAC1E,IAAM,OAAO,GAAG;QACZ,IAAM,WAAW,GAAG,IAAI,CAAC,CAAC;YACtB,eAAK,CAAC,YAAY,CAAC,IAA0B,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;YAC3E,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAAA;QAEnC,OAAO,CACH,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAChC,WAAW,CACV,CACT,CAAA;IACL,CAAC,CAAA;IAED,IAAM,OAAO,GAAG;QACZ,OAAO,CACH,8BAAC,oCAA2B;YAEpB,KAAK,IAAI,CACL,8BAAC,uBAAU,CAAC,KAAK,IAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,EAAE,IAAI,EAAC,IAAI,IAAE,KAAK,CAAoB,CACjH;YAEL,8BAAC,uBAAU,CAAC,IAAI,IAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,EAAE,IAAI,EAAC,IAAI,IAAE,OAAO,CAAmB,CACpF,CACjC,CAAA;IACL,CAAC,CAAA;IAED,IAAM,SAAS,GAAG;QACd,OAAO,CACH,8BAAC,aAAK,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACnC,CAAA;IACL,CAAC,CAAA;IAED,OAAO,CACH,8BAAC,oBAAW,IACR,IAAI,EAAE,IAAI,IAAI,SAAS,EACvB,OAAO,EAAE,8BAAC,OAAO,OAAG,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,8BAAC,SAAS,OAAG,GAC1B,CACL,CAAA;AACL,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}
|
|
@@ -4,18 +4,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
-
exports.
|
|
7
|
+
exports.StyledAlertMessageContainer = exports.StyledAlert = void 0;
|
|
8
8
|
var styled_1 = require("@emotion/styled");
|
|
9
9
|
var alert_1 = require("antd/es/alert");
|
|
10
10
|
var colors_1 = require("src/constants/colors");
|
|
11
11
|
var ColorStyles_1 = require("src/shared/ColorStyles");
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
var InfoStyle = "\n border: none !important;\n background-color: ".concat(colors_1.GREEN.CONTRAST, " !important;\n \n .ant-alert-icon {\n color: ").concat(colors_1.WHITE.DEFAULT, " !important;\n }\n \n .ant-alert-close-icon {\n color: ").concat(colors_1.WHITE.DEFAULT, " !important;\n }\n");
|
|
18
|
-
exports.StyledAlert = (0, styled_1.default)(alert_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.ant-alert {\n ", "\n \n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &.ant-alert {\n ", "\n \n ", "\n ", "\n ", "\n ", "\n }\n"])), baseAlertStyles, function (_a) {
|
|
12
|
+
var SuccessStyle = "\n border: 1px solid ".concat(ColorStyles_1.GREEN_COLORS.G400, "!important;\n .ant-alert-icon {\n color: ").concat(ColorStyles_1.GREEN_COLORS.G400, "!important;\n }\n .ant-alert-close-icon {\n color: ").concat(ColorStyles_1.GREEN_COLORS.G400, "!important;\n }\n background-color: ").concat(ColorStyles_1.GREEN_COLORS.G100, "!important;\n");
|
|
13
|
+
var WarningStyle = "\n border: 1px solid ".concat(ColorStyles_1.YELLOW_COLORS.Y400, "!important;\n .ant-alert-icon {\n color: ").concat(ColorStyles_1.YELLOW_COLORS.Y400, "!important;\n }\n .ant-alert-close-icon {\n color: ").concat(ColorStyles_1.YELLOW_COLORS.Y400, "!important;\n }\n background-color: ").concat(ColorStyles_1.YELLOW_COLORS.Y100, "!important;\n");
|
|
14
|
+
var ErrorStyle = "\n border: 1px solid ".concat(ColorStyles_1.RED_COLORS.R400, "!important;\n .ant-alert-icon {\n color: ").concat(ColorStyles_1.RED_COLORS.R400, "!important;\n }\n .ant-alert-close-icon {\n color: ").concat(ColorStyles_1.RED_COLORS.R400, "!important;\n }\n background-color: ").concat(ColorStyles_1.RED_COLORS.R100, "!important;\n");
|
|
15
|
+
var InfoStyle = "\n border: none!important;\n .ant-alert-icon {\n color: ".concat(colors_1.WHITE.DEFAULT, "!important;\n }\n .ant-alert-close-icon {\n color: ").concat(colors_1.WHITE.DEFAULT, "!important;\n }\n background-color: ").concat(colors_1.GREEN.CONTRAST, "!important;\n");
|
|
16
|
+
exports.StyledAlert = (0, styled_1.default)(alert_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.ant-alert {\n width: 328px!important;\n border-radius: 8px!important;\n padding: 8px 12px!important;\n \n .ant-alert-icon {\n align-self: flex-start !important;\n margin-top: 0 !important;\n }\n \n ", "\n ", "\n ", "\n ", "\n }\n"], ["\n &.ant-alert {\n width: 328px!important;\n border-radius: 8px!important;\n padding: 8px 12px!important;\n \n .ant-alert-icon {\n align-self: flex-start !important;\n margin-top: 0 !important;\n }\n \n ", "\n ", "\n ", "\n ", "\n }\n"])), function (_a) {
|
|
19
17
|
var type = _a.type;
|
|
20
18
|
return type === 'success' && SuccessStyle;
|
|
21
19
|
}, function (_a) {
|
|
@@ -28,7 +26,6 @@ exports.StyledAlert = (0, styled_1.default)(alert_1.default)(templateObject_1 ||
|
|
|
28
26
|
var type = _a.type;
|
|
29
27
|
return type === 'info' && InfoStyle;
|
|
30
28
|
});
|
|
31
|
-
exports.StyledAlertMessageContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n
|
|
32
|
-
|
|
33
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
29
|
+
exports.StyledAlertMessageContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n\n span, p, div {\n font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n }\n"], ["\n display: flex;\n flex-direction: column;\n\n span, p, div {\n font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n }\n"])));
|
|
30
|
+
var templateObject_1, templateObject_2;
|
|
34
31
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAAoC;AACpC,uCAAiC;AACjC,+CAAmD;AACnD,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAAoC;AACpC,uCAAiC;AACjC,+CAAmD;AACnD,sDAA6F;AAE7F,IAAM,YAAY,GAAG,kCACG,0BAAY,CAAC,IAAI,gEAExB,0BAAY,CAAC,IAAI,6EAGjB,0BAAY,CAAC,IAAI,uDAEV,0BAAY,CAAC,IAAI,kBACxC,CAAA;AAED,IAAM,YAAY,GAAG,kCACG,2BAAa,CAAC,IAAI,gEAEzB,2BAAa,CAAC,IAAI,6EAGlB,2BAAa,CAAC,IAAI,uDAEX,2BAAa,CAAC,IAAI,kBACzC,CAAA;AAED,IAAM,UAAU,GAAG,kCACK,wBAAU,CAAC,IAAI,gEAEtB,wBAAU,CAAC,IAAI,6EAGf,wBAAU,CAAC,IAAI,uDAER,wBAAU,CAAC,IAAI,kBACtC,CAAA;AAED,IAAM,SAAS,GAAG,+EAGD,cAAK,CAAC,OAAO,6EAGb,cAAK,CAAC,OAAO,uDAEN,cAAK,CAAC,QAAQ,kBACrC,CAAA;AAEY,QAAA,WAAW,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,wZAAoD,8RAWlF,EAAgD,YAChD,EAAgD,YAChD,EAA4C,YAC5C,EAA0C,WAEnD,KALS,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,SAAS,IAAI,YAAY;AAAlC,CAAkC,EAChD,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,SAAS,IAAI,YAAY;AAAlC,CAAkC,EAChD,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,OAAO,IAAI,UAAU;AAA9B,CAA8B,EAC5C,UAAC,EAAQ;QAAN,IAAI,UAAA;IAAO,OAAA,IAAI,KAAK,MAAM,IAAI,SAAS;AAA5B,CAA4B,EAEnD;AAEY,QAAA,2BAA2B,GAAG,gBAAM,CAAC,GAAG,6UAAA,0QAWpD,KAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import 'antd/es/alert/style/css';
|
|
3
2
|
import { CustomAlertProps } from './types';
|
|
4
|
-
|
|
3
|
+
import 'antd/es/alert/style/css';
|
|
4
|
+
declare const CustomAlert: ({ type, message, closable, icon, showIcon, onClose, title }: CustomAlertProps) => JSX.Element;
|
|
5
5
|
export default CustomAlert;
|
|
@@ -5,4 +5,3 @@ export declare const StyledAlert: import("@emotion/styled-base").StyledComponent
|
|
|
5
5
|
type: 'success' | 'warning' | 'error' | 'info';
|
|
6
6
|
}, object>;
|
|
7
7
|
export declare const StyledAlertMessageContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
8
|
-
export declare const AlertIconContainer: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { AlertProps } from 'antd/es/alert';
|
|
2
|
-
export type CustomAlertProps = Pick<AlertProps, 'type' | 'message' | 'closable' | 'icon' | 'showIcon'> & {
|
|
2
|
+
export type CustomAlertProps = Pick<AlertProps, 'type' | 'message' | 'closable' | 'icon' | 'showIcon' | 'onClose'> & {
|
|
3
3
|
title?: string;
|
|
4
|
-
onClose?: () => void;
|
|
5
4
|
};
|