UNPKG

@sberdevices/plasma-temple

Version:

SberDevices CanvasApp Templates.

71 lines (57 loc) 5.3 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.StoreCell = exports.NavCol = void 0; var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react")); var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components")); var _plasmaUi = /*#__PURE__*/require("@sberdevices/plasma-ui"); var _NavCol = /*#__PURE__*/require("./NavCol"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } var Icon = "<svg viewBox=\"0 0 118 116\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"97.5\" cy=\"58.5\" r=\"97.5\" fill=\"url(#paint0_linear)\" fill-opacity=\".12\"/><ellipse cx=\"105\" cy=\"58.5\" rx=\"81\" ry=\"81.5\" fill=\"url(#paint1_linear)\" fill-opacity=\".12\"/><g opacity=\".56\" filter=\"url(#filter0_d)\"><rect x=\"81\" y=\"45.857\" width=\"19\" height=\"19\" rx=\"5\" transform=\"rotate(-180 81 45.857)\" fill=\"url(#paint2_linear)\"/><rect x=\"81\" y=\"89.286\" width=\"19\" height=\"36.643\" rx=\"5\" transform=\"rotate(-180 81 89.286)\" fill=\"url(#paint3_linear)\"/></g><defs><linearGradient id=\"Icon-paint0_linear\" x1=\"97.5\" y1=\"-39\" x2=\"97.5\" y2=\"156\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\"/><stop offset=\".801\" stop-color=\"#fff\" stop-opacity=\"0\"/></linearGradient><linearGradient id=\"Icon-paint1_linear\" x1=\"105\" y1=\"-23\" x2=\"105\" y2=\"170.451\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\"/><stop offset=\".707\" stop-color=\"#fff\" stop-opacity=\"0\"/></linearGradient><linearGradient id=\"Icon-paint2_linear\" x1=\"81\" y1=\"41.107\" x2=\"97.743\" y2=\"70.35\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\"0\"/></linearGradient><linearGradient id=\"Icon-paint3_linear\" x1=\"64.573\" y1=\"74.531\" x2=\"94.54\" y2=\"130.067\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#fff\"/><stop offset=\"1\" stop-color=\"#fff\" stop-opacity=\".19\"/></linearGradient><filter id=\"Icon-filter0_d\" x=\"38\" y=\".857\" width=\"79\" height=\"122.428\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"6\" dy=\"4\"/><feGaussianBlur stdDeviation=\"15\"/><feColorMatrix values=\"0 0 0 0 0.1715 0 0 0 0 0 0 0 0 0 0.175 0 0 0 0.4 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"effect1_dropShadow\"/><feBlend in=\"SourceGraphic\" in2=\"effect1_dropShadow\" result=\"shape\"/></filter></defs></svg>"; var StyledCard = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.Card).attrs({ 'data-cy': 'main-card' }).withConfig({ componentId: "plasma-temple__sc-1xck4dx-0" })(["height:232px;& + &{margin-top:auto;}"]); var StyledCardContent = /*#__PURE__*/(0, _styledComponents["default"])(_plasmaUi.CardContent).withConfig({ componentId: "plasma-temple__sc-1xck4dx-1" })(["position:absolute;top:0;left:0;padding:1.5rem 1rem;height:100%;width:100%;display:flex;justify-content:center;background:transparent;"]); var InfoIcon = /*#__PURE__*/_styledComponents["default"].img.withConfig({ componentId: "plasma-temple__sc-1xck4dx-2" })(["display:block;position:absolute;height:100%;width:236px;top:0;right:0;"]); var CatalogCell = function CatalogCell(_ref) { var onClick = _ref.onClick, image = _ref.image; return /*#__PURE__*/_react["default"].createElement(StyledCard, { onClick: onClick }, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardBody, null, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardMedia, { "data-cy": "main-card-image-mock", src: image, base: "div", ratio: "1 / 1" }), /*#__PURE__*/_react["default"].createElement(StyledCardContent, null, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardBody1, null, "\u041A\u0430\u0442\u0430\u043B\u043E\u0433")))); }; var StoreCell = function StoreCell(_ref2) { var onClick = _ref2.onClick; return /*#__PURE__*/_react["default"].createElement(StyledCard, { "data-cy": "main-card", onClick: onClick }, /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardBody, null, /*#__PURE__*/_react["default"].createElement(StyledCardContent, null, /*#__PURE__*/_react["default"].createElement(_plasmaUi.Cell, { content: /*#__PURE__*/_react["default"].createElement(_plasmaUi.CardBody1, null, "\u041E \u043C\u0430\u0433\u0430\u0437\u0438\u043D\u0435") }), /*#__PURE__*/_react["default"].createElement(InfoIcon, { src: Icon })))); }; exports.StoreCell = StoreCell; var NavCol = function NavCol(props) { return /*#__PURE__*/_react["default"].createElement(_NavCol.NavCol, _extends({}, props, { platformComponents: { CatalogCard: CatalogCell, StoreCard: StoreCell } })); }; exports.NavCol = NavCol; //# sourceMappingURL=NavCol@sberportal.js.map