@qiwi/pijma-desktop 1.152.1 → 1.154.1

package/lib/dts/core/src/alert-block/AlertBlockControl.d.ts

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+export interface AlertBlockControlProps {
+    onHide?: () => void;
+    children: FC<{
+        closeHover: boolean;
+        onCloseClick: React.MouseEventHandler;
+        onCloseMouseEnter: React.MouseEventHandler;
+        onCloseMouseLeave: React.MouseEventHandler;
+    }>;
+}
+export interface AlertBlockControlState {
+    closeHover: boolean;
+}
+export declare class AlertBlockControl extends React.Component<AlertBlockControlProps> {
+    static displayName: string;
+    state: AlertBlockControlState;
+    private onCloseClick;
+    private onCloseMouseEnter;
+    private onCloseMouseLeave;
+    render(): React.ReactElement<any, any> | null;
+}

package/lib/dts/core/src/alert-block/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertBlockControl';

package/lib/dts/core/src/index.d.ts

@@ -42,6 +42,7 @@ export * from './flag';
 export * from './logo';
 export * from './image';
 export * from './alert';
+export * from './alert-block';
 export * from './rating';
 export * from './menu';
 export * from './suggest';

package/lib/dts/desktop/src/alert-block/AlertBlock.d.ts

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+export interface AlertBlockProps {
+    type: 'success' | 'warning' | 'waiting' | 'failure' | 'info' | 'promo';
+    icon?: ReactNode;
+    children?: ReactNode;
+    onHide?: () => void;
+}
+export declare const AlertBlock: FC<AlertBlockProps>;

package/lib/dts/desktop/src/alert-block/index.d.ts

@@ -0,0 +1 @@
+export * from './AlertBlock';

package/lib/dts/desktop/src/index.d.ts

@@ -1,4 +1,5 @@
 export * from '@qiwi/pijma-core';
+export * from './alert-block';
 export * from './button';
 export * from './actions';
 export * from './text-field';

package/lib/es5/alert-block/AlertBlock.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AlertBlock", {
+    enumerable: true,
+    get: function() {
+        return AlertBlock;
+    }
+});
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaCore = require("@qiwi/pijma-core");
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _typography = require("../typography/index.js");
+var AlertBlockBackground = {
+    success: "#EDF8EF",
+    waiting: "#FFF8E6",
+    warning: "#FF8C001A",
+    failure: "#FAE6E8",
+    info: "#F5F5F5",
+    promo: "#2D3540"
+};
+var AlertBlockIcon = {
+    success: {
+        name: "success",
+        color: "#4BBD5C",
+        bg: "#fff"
+    },
+    waiting: {
+        name: "clock-solid",
+        color: "#FFB800",
+        bg: "#fff"
+    },
+    warning: {
+        name: "attention",
+        color: "#FF8C00",
+        bg: "#fff"
+    },
+    failure: {
+        name: "attention",
+        color: "#D0021B",
+        bg: "#fff"
+    },
+    info: {
+        name: "info",
+        color: "#E6E6E6",
+        bg: "#666666"
+    },
+    promo: {
+        name: "success",
+        color: "#4BBD5C",
+        bg: "#fff"
+    }
+};
+var AlertBlock = function(param) {
+    var children = param.children, icon = param.icon, type = param.type, onHide = param.onHide;
+    var iconComponent = /*#__PURE__*/ (0, _react.isValidElement)(icon) ? icon : icon === undefined ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.Pos, {
+        type: "relative",
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Pos, {
+                type: "absolute",
+                top: "4px",
+                left: "4px",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Card, {
+                    bg: AlertBlockIcon[type].bg,
+                    width: 4,
+                    height: 4,
+                    r: 8
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Pos, {
+                type: "relative",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
+                    name: AlertBlockIcon[type].name,
+                    size: 6,
+                    color: AlertBlockIcon[type].color
+                })
+            })
+        ]
+    }) : null;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.AlertBlockControl, {
+        onHide: onHide,
+        children: function(renderProps) {
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Block, {
+                bg: AlertBlockBackground[type],
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_pijmaCore.FlexPos, {
+                    display: "flex",
+                    type: "relative",
+                    py: 5,
+                    pl: 6,
+                    pr: onHide !== undefined ? 18 : 6,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                            mr: 3,
+                            children: iconComponent
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.FlexItem, {
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_typography.Paragraph, {
+                                bold: true,
+                                color: type === "promo" ? "inverse" : "default",
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Breaker, {
+                                    children: children
+                                })
+                            })
+                        }),
+                        onHide !== undefined ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Pos, {
+                            cursor: "pointer",
+                            type: "absolute",
+                            right: 6,
+                            top: 5,
+                            onClick: renderProps.onCloseClick,
+                            onMouseEnter: renderProps.onCloseMouseEnter,
+                            onMouseLeave: renderProps.onCloseMouseLeave,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
+                                size: 6,
+                                color: type === "promo" ? "#999" : "#666",
+                                name: "cross-small"
+                            })
+                        }) : null
+                    ]
+                })
+            });
+        }
+    });
+};
+AlertBlock.displayName = "AlertBlock";

package/lib/es5/alert-block/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./AlertBlock.js"), exports);

package/lib/es5/index.js

@@ -18,6 +18,7 @@ _export(exports, {
 });
 var _exportStar = require("@swc/helpers/lib/_export_star.js").default;
 _exportStar(require("@qiwi/pijma-core"), exports);
+_exportStar(require("./alert-block/index.js"), exports);
 _exportStar(require("./button/index.js"), exports);
 _exportStar(require("./actions/index.js"), exports);
 var _textField = _exportStar(require("./text-field/index.js"), exports);

package/lib/es6/alert-block/AlertBlock.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertBlockControl, Block, Breaker, Card, FlexItem, FlexPos, Icon, Pos } from '@qiwi/pijma-core';
+import React, { isValidElement } from 'react';
+import { Paragraph } from '../typography/index.js';
+const AlertBlockBackground = {
+    success: '#EDF8EF',
+    waiting: '#FFF8E6',
+    warning: '#FF8C001A',
+    failure: '#FAE6E8',
+    info: '#F5F5F5',
+    promo: '#2D3540'
+};
+const AlertBlockIcon = {
+    success: {
+        name: 'success',
+        color: '#4BBD5C',
+        bg: '#fff'
+    },
+    waiting: {
+        name: 'clock-solid',
+        color: '#FFB800',
+        bg: '#fff'
+    },
+    warning: {
+        name: 'attention',
+        color: '#FF8C00',
+        bg: '#fff'
+    },
+    failure: {
+        name: 'attention',
+        color: '#D0021B',
+        bg: '#fff'
+    },
+    info: {
+        name: 'info',
+        color: '#E6E6E6',
+        bg: '#666666'
+    },
+    promo: {
+        name: 'success',
+        color: '#4BBD5C',
+        bg: '#fff'
+    }
+};
+export const AlertBlock = ({ children , icon , type , onHide ,  })=>{
+    const iconComponent = /*#__PURE__*/ isValidElement(icon) ? icon : icon === undefined ? /*#__PURE__*/ _jsxs(Pos, {
+        type: "relative",
+        children: [
+            /*#__PURE__*/ _jsx(Pos, {
+                type: "absolute",
+                top: "4px",
+                left: "4px",
+                children: /*#__PURE__*/ _jsx(Card, {
+                    bg: AlertBlockIcon[type].bg,
+                    width: 4,
+                    height: 4,
+                    r: 8
+                })
+            }),
+            /*#__PURE__*/ _jsx(Pos, {
+                type: "relative",
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: AlertBlockIcon[type].name,
+                    size: 6,
+                    color: AlertBlockIcon[type].color
+                })
+            })
+        ]
+    }) : null;
+    return /*#__PURE__*/ _jsx(AlertBlockControl, {
+        onHide: onHide,
+        children: (renderProps)=>/*#__PURE__*/ _jsx(Block, {
+                bg: AlertBlockBackground[type],
+                children: /*#__PURE__*/ _jsxs(FlexPos, {
+                    display: "flex",
+                    type: "relative",
+                    py: 5,
+                    pl: 6,
+                    pr: onHide !== undefined ? 18 : 6,
+                    children: [
+                        /*#__PURE__*/ _jsx(FlexItem, {
+                            mr: 3,
+                            children: iconComponent
+                        }),
+                        /*#__PURE__*/ _jsx(FlexItem, {
+                            children: /*#__PURE__*/ _jsx(Paragraph, {
+                                bold: true,
+                                color: type === 'promo' ? 'inverse' : 'default',
+                                children: /*#__PURE__*/ _jsx(Breaker, {
+                                    children: children
+                                })
+                            })
+                        }),
+                        onHide !== undefined ? /*#__PURE__*/ _jsx(Pos, {
+                            cursor: "pointer",
+                            type: "absolute",
+                            right: 6,
+                            top: 5,
+                            onClick: renderProps.onCloseClick,
+                            onMouseEnter: renderProps.onCloseMouseEnter,
+                            onMouseLeave: renderProps.onCloseMouseLeave,
+                            children: /*#__PURE__*/ _jsx(Icon, {
+                                size: 6,
+                                color: type === 'promo' ? '#999' : '#666',
+                                name: "cross-small"
+                            })
+                        }) : null
+                    ]
+                })
+            })
+    });
+};
+AlertBlock.displayName = 'AlertBlock';

package/lib/es6/alert-block/index.js

@@ -0,0 +1 @@
+export * from './AlertBlock.js';

package/lib/es6/index.js

@@ -1,4 +1,5 @@
 export * from '@qiwi/pijma-core';
+export * from './alert-block/index.js';
 export * from './button/index.js';
 export * from './actions/index.js';
 export * from './text-field/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qiwi/pijma-desktop",
-  "version": "1.152.1",
+  "version": "1.154.1",
   "type": "module",
   "main": "./lib/es5/index.js",
   "module": "./lib/es6/index.js",
@@ -37,7 +37,7 @@
     "lib"
   ],
   "dependencies": {
-    "@qiwi/pijma-core": "1.154.0"
+    "@qiwi/pijma-core": "1.155.1"
   },
   "devDependencies": {
     "@qiwi/pijma-infra": "1.9.0",