@xfers/design-system 4.1.1-dev.e9da41c35f → 4.1.2-dev.41e58afabb

package/dist/components/Alert/Alert.js

@@ -1,27 +1,37 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var alert_1 = require("antd/es/alert");
 require("antd/es/alert/style/css");
-var styled_1 = require("@emotion/styled");
-var ThemeContext_1 = require("src/theme/ThemeContext");
 var icons_1 = require("src/icons");
+var Typography_1 = require("src/constants/Typography/Typography");
+var colors_1 = require("src/constants/colors");
+var styles_1 = require("./styles");
 var CustomAlert = function (_a) {
-    var type = _a.type, message = _a.message, closable = _a.closable, icon = _a.icon, showIcon = _a.showIcon, onClose = _a.onClose;
-    var brand = (0, ThemeContext_1.useTheme)().brand;
-    var StyledAlert = (0, styled_1.default)(alert_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n    "], ["\n\n    "])));
+    var type = _a.type, message = _a.message, closable = _a.closable, icon = _a.icon, showIcon = _a.showIcon, onClose = _a.onClose, title = _a.title;
+    var _b = (0, react_1.useState)(true), isVisible = _b[0], setIsVisible = _b[1];
     var getIcon = function () {
-        var iconElement = icon ?
-            react_1.default.cloneElement(icon, { width: 24, height: 24 }) :
-            react_1.default.createElement(icons_1.Bell, { width: 24, height: 24 });
-        return iconElement;
+        var iconElement = icon ? (react_1.default.cloneElement(icon, {
+            width: 20,
+            height: 20
+        })) : (react_1.default.createElement(icons_1.Bell, { width: 20, height: 20 }));
+        return react_1.default.createElement(styles_1.AlertIconContainer, null, iconElement);
+    };
+    var Message = function () {
+        var textColor = type === 'info' ? colors_1.WHITE.DEFAULT : colors_1.BLACK.DEFAULT;
+        return (react_1.default.createElement(styles_1.StyledAlertMessageContainer, null,
+            title && (react_1.default.createElement(Typography_1.Typography.Label, { color: textColor, size: "md" }, title)),
+            react_1.default.createElement(Typography_1.Typography.Body, { color: textColor, size: "md" }, message)));
+    };
+    var CloseIcon = function () { return react_1.default.createElement(icons_1.Cross, { width: 14, height: 14 }); };
+    var handleClose = function () {
+        setIsVisible(false);
+        if (onClose) {
+            onClose();
+        }
     };
-    return (react_1.default.createElement(StyledAlert, { type: type, message: message, closable: closable, icon: getIcon(), showIcon: showIcon, onClose: onClose }));
+    if (!isVisible)
+        return null;
+    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) }));
 };
 exports.default = CustomAlert;
-var templateObject_1;
 //# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,uCAAiC;AACjC,mCAAgC;AAChC,0CAAoC;AACpC,uDAAiD;AAEjD,mCAAgC;AAEhC,IAAM,WAAW,GAAG,UAAC,EAAsE;QAApE,IAAI,UAAA,EAAE,OAAO,aAAA,EAAE,QAAQ,cAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,OAAO,aAAA;IAC3D,IAAA,KAAK,GAAK,IAAA,uBAAQ,GAAE,MAAf,CAAe;IAC5B,IAAM,WAAW,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,6EAAA,UAEhC,IAAA,CAAA;IACD,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,WAAW,CAAA;IACtB,CAAC,CAAA;IAED,OAAO,CACH,8BAAC,WAAW,IACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,OAAO,EAAE,EACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,GAClB,CACL,CAAA;AACL,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":";;AAAA,+BAAuC;AACvC,mCAAgC;AAChC,mCAAuC;AACvC,kEAAgE;AAChE,+CAAmD;AAEnD,mCAIiB;AAEjB,IAAM,WAAW,GAAG,UAAC,EAQF;QAPjB,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,KAAK,WAAA;IAEC,IAAA,KAA4B,IAAA,gBAAQ,EAAC,IAAI,CAAC,EAAzC,SAAS,QAAA,EAAE,YAAY,QAAkB,CAAA;IAEhD,IAAM,OAAO,GAAG;QACd,IAAM,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC,CACzB,eAAK,CAAC,YAAY,CAAC,IAA0B,EAAE;YAC7C,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;SACX,CAAC,CACH,CAAC,CAAC,CAAC,CACF,8BAAC,YAAI,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CAChC,CAAA;QACD,OAAO,8BAAC,2BAAkB,QAAE,WAAW,CAAsB,CAAA;IAC/D,CAAC,CAAA;IAED,IAAM,OAAO,GAAG;QACd,IAAM,SAAS,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAC,CAAC,CAAC,cAAK,CAAC,OAAO,CAAA;QAEjE,OAAO,CACL,8BAAC,oCAA2B;YACzB,KAAK,IAAI,CACR,8BAAC,uBAAU,CAAC,KAAK,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,IAC1C,KAAK,CACW,CACpB;YACD,8BAAC,uBAAU,CAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,IACzC,OAAO,CACQ,CACU,CAC/B,CAAA;IACH,CAAC,CAAA;IAED,IAAM,SAAS,GAAG,cAAM,OAAA,8BAAC,aAAK,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,EAAhC,CAAgC,CAAA;IAExD,IAAM,WAAW,GAAG;QAClB,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,IAAI,OAAO,EAAE;YACX,OAAO,EAAE,CAAA;SACV;IACH,CAAC,CAAA;IAED,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAA;IAE3B,OAAO,CACL,8BAAC,oBAAW,IACV,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,WAAW,EACpB,SAAS,EAAE,8BAAC,SAAS,OAAG,GACxB,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,WAAW,CAAA"}

package/dist/components/Alert/styles.js

@@ -1,3 +1,34 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertIconContainer = exports.StyledAlertMessageContainer = exports.StyledAlert = void 0;
+var styled_1 = require("@emotion/styled");
+var alert_1 = require("antd/es/alert");
+var colors_1 = require("src/constants/colors");
+var ColorStyles_1 = require("src/shared/ColorStyles");
+var baseAlertStyles = "\n  width: 328px !important;\n  min-height: 52px !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";
+var getThemeStyles = function (borderColor, iconColor, backgroundColor) { return "\n  border: 1px solid ".concat(borderColor, " !important;\n  background-color: ").concat(backgroundColor, " !important;\n  \n  .ant-alert-icon {\n    color: ").concat(iconColor, " !important;\n  }\n  \n  .ant-alert-close-icon {\n    color: ").concat(iconColor, " !important;\n  }\n"); };
+var SuccessStyle = getThemeStyles(ColorStyles_1.GREEN_COLORS.G400, ColorStyles_1.GREEN_COLORS.G400, ColorStyles_1.GREEN_COLORS.G100);
+var WarningStyle = getThemeStyles(ColorStyles_1.YELLOW_COLORS.Y400, ColorStyles_1.YELLOW_COLORS.Y400, ColorStyles_1.YELLOW_COLORS.Y100);
+var ErrorStyle = getThemeStyles(ColorStyles_1.RED_COLORS.R400, ColorStyles_1.RED_COLORS.R400, ColorStyles_1.RED_COLORS.R100);
+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");
+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) {
+    var type = _a.type;
+    return type === 'success' && SuccessStyle;
+}, function (_a) {
+    var type = _a.type;
+    return type === 'warning' && WarningStyle;
+}, function (_a) {
+    var type = _a.type;
+    return type === 'error' && ErrorStyle;
+}, function (_a) {
+    var type = _a.type;
+    return type === 'info' && InfoStyle;
+});
+exports.StyledAlertMessageContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  span,\n  p,\n  div {\n    font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  span,\n  p,\n  div {\n    font-family: 'Hanken Grotesk', 'Inter', sans-serif !important;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: 'Red Hat Display', 'Inter', sans-serif !important;\n  }\n"])));
+exports.AlertIconContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 24px;\n  height: 24px;\n"], ["\n  width: 24px;\n  height: 24px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=styles.js.map

package/dist/components/Alert/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":""}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";;;;;;;AAAA,0CAAoC;AACpC,uCAAiC;AACjC,+CAAmD;AACnD,sDAAgF;AAEhF,IAAM,eAAe,GAAG,wOAUvB,CAAA;AAED,IAAM,cAAc,GAAG,UACrB,WAAmB,EACnB,SAAiB,EACjB,eAAuB,IACpB,OAAA,gCACiB,WAAW,+CACX,eAAe,+DAGxB,SAAS,0EAIT,SAAS,wBAErB,EAXI,CAWJ,CAAA;AAED,IAAM,YAAY,GAAG,cAAc,CACjC,0BAAY,CAAC,IAAI,EACjB,0BAAY,CAAC,IAAI,EACjB,0BAAY,CAAC,IAAI,CAClB,CAAA;AACD,IAAM,YAAY,GAAG,cAAc,CACjC,2BAAa,CAAC,IAAI,EAClB,2BAAa,CAAC,IAAI,EAClB,2BAAa,CAAC,IAAI,CACnB,CAAA;AACD,IAAM,UAAU,GAAG,cAAc,CAC/B,wBAAU,CAAC,IAAI,EACf,wBAAU,CAAC,IAAI,EACf,wBAAU,CAAC,IAAI,CAChB,CAAA;AACD,IAAM,SAAS,GAAG,4DAEI,cAAK,CAAC,QAAQ,+DAGvB,cAAK,CAAC,OAAO,0EAIb,cAAK,CAAC,OAAO,wBAEzB,CAAA;AAEY,QAAA,WAAW,GAAG,IAAA,gBAAM,EAAC,eAAK,CAAC,qJAEtC,yBAEI,EAAe,cAEf,EAAgD,QAChD,EAAgD,QAChD,EAA4C,QAC5C,EAA0C,SAE/C,KAPK,eAAe,EAEf,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,EAE/C;AAEY,QAAA,2BAA2B,GAAG,gBAAM,CAAC,GAAG,8UAAA,2QAkBpD,KAAA;AAEY,QAAA,kBAAkB,GAAG,gBAAM,CAAC,GAAG,wGAAA,qCAG3C,KAAA"}

package/dist/types/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import 'antd/es/alert/style/css';
 import { CustomAlertProps } from './types';
-declare const CustomAlert: ({ type, message, closable, icon, showIcon, onClose }: CustomAlertProps) => JSX.Element;
+declare const CustomAlert: ({ type, message, closable, icon, showIcon, onClose, title }: CustomAlertProps) => JSX.Element | null;
 export default CustomAlert;

package/dist/types/components/Alert/styles.d.ts

@@ -1 +1,8 @@
-export {};
+/// <reference types="react" />
+export declare const StyledAlert: import("@emotion/styled-base").StyledComponent<import("antd/es/alert").AlertProps & {
+    children?: import("react").ReactNode;
+}, {
+    type: 'success' | 'warning' | 'error' | 'info';
+}, object>;
+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>;
+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>;

package/dist/types/components/Alert/types.d.ts

@@ -1,2 +1,7 @@
+import React from 'react';
 import { AlertProps } from 'antd/es/alert';
-export type CustomAlertProps = Pick<AlertProps, 'type' | 'message' | 'closable' | 'icon' | 'showIcon' | 'onClose'>;
+export type CustomAlertProps = Pick<AlertProps, 'type' | 'closable' | 'icon' | 'showIcon'> & {
+    title?: React.ReactNode;
+    onClose?: () => void;
+    message?: React.ReactNode;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xfers/design-system",
-  "version": "4.1.1-dev.e9da41c35f",
+  "version": "4.1.2-dev.41e58afabb",
   "description": "",
   "keywords": [
     "xfers",