@cloud-ru/uikit-product-site-banner 2.0.32 → 2.0.33-preview-e3701f2e.0

package/dist/cjs/components/BannerSecondary/BannerSecondary.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerSecondary = BannerSecondary;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const BannerCommon_1 = require("../../helperComponents/BannerCommon");
-const IMAGE_SIZE = [303, 208];
+const IMAGE_PADDING = 8;
+const IMAGE_SIZE = [303 - IMAGE_PADDING * 2, 208 - IMAGE_PADDING * 2];
 const getGapValue = (layouType) => (layouType === 'tablet' ? 32 : 24);
 function BannerSecondary(props) {
-    return ((0, jsx_runtime_1.jsx)(BannerCommon_1.BannerCommon, Object.assign({ topSlot: null, sizes: { image: IMAGE_SIZE, mainGap: getGapValue(props.layoutType) } }, props)));
+    return ((0, jsx_runtime_1.jsx)(BannerCommon_1.BannerCommon, Object.assign({ topSlot: null, sizes: { image: IMAGE_SIZE, mainGap: getGapValue(props.layoutType), imagePadding: IMAGE_PADDING } }, props)));
 }

package/dist/cjs/helperComponents/BannerCommon/BannerCommon.d.ts

@@ -26,6 +26,8 @@ export type BannerCommonProps = WithSupportProps<WithLayoutType<{
         image: [number, number];
         /** Отступ между текстом и кнопками */
         mainGap: number;
+        /** Отступ вокруг картинки */
+        imagePadding?: number;
     };
 } & ColorWrapperProps>>;
-export declare function BannerCommon({ id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, }, ...rest }: BannerCommonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerCommon({ id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, imagePadding, }, ...rest }: BannerCommonProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/BannerCommon/BannerCommon.js

@@ -25,10 +25,11 @@ const ColorWrapper_1 = require("../ColorWrapper");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const util_1 = require("./util");
 function BannerCommon(_a) {
-    var { id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, } } = _a, rest = __rest(_a, ["id", "title", "description", "img", "erid", "buttons", "layoutType", "className", "topSlot", "sizes"]);
+    var { id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, imagePadding = 0, } } = _a, rest = __rest(_a, ["id", "title", "description", "img", "erid", "buttons", "layoutType", "className", "topSlot", "sizes"]);
     return ((0, jsx_runtime_1.jsxs)(ColorWrapper_1.ColorWrapper, Object.assign({ id: id, className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-layout-type": layoutType, style: {
             '--site-banner-main-gap': `${mainGap}px`,
             '--site-banner-image-max-width': `${maxImageWith}px`,
             '--site-banner-image-max-height': `${maxImageHeight}px`,
+            '--site-banner-image-padding': `${imagePadding}px`,
         } }, rest, { children: [erid && (0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.Erid, { className: styles_module_scss_1.default.erid, tip: erid.tip, appearance: erid.appearance }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [topSlot, (0, jsx_runtime_1.jsxs)("div", { "data-color-wrapper-role": 'text', className: styles_module_scss_1.default.text, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ className: styles_module_scss_1.default.title, family: 'sans' }, (0, util_1.getBlockTitleProps)(layoutType), { children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) })] }), buttons && buttons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttons, children: [(0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromo, Object.assign({ className: styles_module_scss_1.default.button, target: '_self' }, buttons[0], { size: 'l', appearance: ColorWrapper_1.ColorWrapper.getButtonAppearance(rest.appearance) })), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 1 && ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, Object.assign({ className: styles_module_scss_1.default.button, target: '_self' }, buttons[1], { size: 'l', appearance: ColorWrapper_1.ColorWrapper.getButtonAppearance(rest.appearance) })))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imgWrapper, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.img, src: img, alt: title }) })] })));
 }

package/dist/cjs/helperComponents/BannerCommon/styles.module.css

@@ -20,13 +20,14 @@
   max-width:var(--site-banner-image-max-width);
   max-height:var(--site-banner-image-max-height);
   flex-shrink:0;
-  border-radius:4px;
 }
 .imgWrapper{
+  box-sizing:border-box;
   width:100%;
   display:flex;
   justify-content:center;
   align-items:center;
+  padding:var(--site-banner-image-padding);
 }
 
 .erid{
@@ -48,7 +49,7 @@
 .root{
   position:relative;
   display:grid;
-  grid-template-columns:1fr var(--site-banner-image-max-width);
+  grid-template-columns:1fr calc(var(--site-banner-image-max-width) + var(--site-banner-image-padding) * 2);
 }
 .root[data-layout-type=tablet]{
   display:flex;

package/dist/esm/components/BannerSecondary/BannerSecondary.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BannerCommon } from '../../helperComponents/BannerCommon';
-const IMAGE_SIZE = [303, 208];
+const IMAGE_PADDING = 8;
+const IMAGE_SIZE = [303 - IMAGE_PADDING * 2, 208 - IMAGE_PADDING * 2];
 const getGapValue = (layouType) => (layouType === 'tablet' ? 32 : 24);
 export function BannerSecondary(props) {
-    return (_jsx(BannerCommon, Object.assign({ topSlot: null, sizes: { image: IMAGE_SIZE, mainGap: getGapValue(props.layoutType) } }, props)));
+    return (_jsx(BannerCommon, Object.assign({ topSlot: null, sizes: { image: IMAGE_SIZE, mainGap: getGapValue(props.layoutType), imagePadding: IMAGE_PADDING } }, props)));
 }

package/dist/esm/helperComponents/BannerCommon/BannerCommon.d.ts

@@ -26,6 +26,8 @@ export type BannerCommonProps = WithSupportProps<WithLayoutType<{
         image: [number, number];
         /** Отступ между текстом и кнопками */
         mainGap: number;
+        /** Отступ вокруг картинки */
+        imagePadding?: number;
     };
 } & ColorWrapperProps>>;
-export declare function BannerCommon({ id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, }, ...rest }: BannerCommonProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerCommon({ id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, imagePadding, }, ...rest }: BannerCommonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/BannerCommon/BannerCommon.js

@@ -19,10 +19,11 @@ import { ColorWrapper } from '../ColorWrapper';
 import styles from './styles.module.css';
 import { getBlockTitleProps } from './util';
 export function BannerCommon(_a) {
-    var { id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, } } = _a, rest = __rest(_a, ["id", "title", "description", "img", "erid", "buttons", "layoutType", "className", "topSlot", "sizes"]);
+    var { id, title, description, img, erid, buttons, layoutType, className, topSlot, sizes: { image: [maxImageWith, maxImageHeight], mainGap, imagePadding = 0, } } = _a, rest = __rest(_a, ["id", "title", "description", "img", "erid", "buttons", "layoutType", "className", "topSlot", "sizes"]);
     return (_jsxs(ColorWrapper, Object.assign({ id: id, className: cn(styles.root, className), "data-layout-type": layoutType, style: {
             '--site-banner-main-gap': `${mainGap}px`,
             '--site-banner-image-max-width': `${maxImageWith}px`,
             '--site-banner-image-max-height': `${maxImageHeight}px`,
+            '--site-banner-image-padding': `${imagePadding}px`,
         } }, rest, { children: [erid && _jsx(Erid, { className: styles.erid, tip: erid.tip, appearance: erid.appearance }), _jsxs("div", { className: styles.content, children: [topSlot, _jsxs("div", { "data-color-wrapper-role": 'text', className: styles.text, children: [_jsx(Typography, Object.assign({ className: styles.title, family: 'sans' }, getBlockTitleProps(layoutType), { children: _jsx(RichText, { richText: title }) })), _jsx(Typography.SansBodyL, { className: styles.description, children: _jsx(RichText, { richText: description }) })] }), buttons && buttons.length > 0 && (_jsxs("div", { className: styles.buttons, children: [_jsx(ButtonPromo, Object.assign({ className: styles.button, target: '_self' }, buttons[0], { size: 'l', appearance: ColorWrapper.getButtonAppearance(rest.appearance) })), (buttons === null || buttons === void 0 ? void 0 : buttons.length) > 1 && (_jsx(ButtonPromoOutline, Object.assign({ className: styles.button, target: '_self' }, buttons[1], { size: 'l', appearance: ColorWrapper.getButtonAppearance(rest.appearance) })))] }))] }), _jsx("div", { className: styles.imgWrapper, children: _jsx("img", { className: styles.img, src: img, alt: title }) })] })));
 }

package/dist/esm/helperComponents/BannerCommon/styles.module.css

@@ -20,13 +20,14 @@
   max-width:var(--site-banner-image-max-width);
   max-height:var(--site-banner-image-max-height);
   flex-shrink:0;
-  border-radius:4px;
 }
 .imgWrapper{
+  box-sizing:border-box;
   width:100%;
   display:flex;
   justify-content:center;
   align-items:center;
+  padding:var(--site-banner-image-padding);
 }
 
 .erid{
@@ -48,7 +49,7 @@
 .root{
   position:relative;
   display:grid;
-  grid-template-columns:1fr var(--site-banner-image-max-width);
+  grid-template-columns:1fr calc(var(--site-banner-image-max-width) + var(--site-banner-image-padding) * 2);
 }
 .root[data-layout-type=tablet]{
   display:flex;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-banner",
   "title": "Site Banner",
-  "version": "2.0.32",
+  "version": "2.0.33-preview-e3701f2e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -45,5 +45,5 @@
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "be0899466862c8165b118bc16b07e9d2b9ed2513"
+  "gitHead": "24bdba53a72e53c518fac4b56da1c80646c922a2"
 }

package/src/components/BannerSecondary/BannerSecondary.tsx

@@ -5,12 +5,17 @@ import { BetterOmit } from '../../types';
 
 export type BannerSecondaryProps = BetterOmit<BannerCommonProps, 'topSlot' | 'sizes'>;
 
-const IMAGE_SIZE = [303, 208] as [number, number];
+const IMAGE_PADDING = 8;
+const IMAGE_SIZE = [303 - IMAGE_PADDING * 2, 208 - IMAGE_PADDING * 2] as [number, number];
 
 const getGapValue = (layouType: LayoutType) => (layouType === 'tablet' ? 32 : 24);
 
 export function BannerSecondary(props: BannerSecondaryProps) {
   return (
-    <BannerCommon topSlot={null} sizes={{ image: IMAGE_SIZE, mainGap: getGapValue(props.layoutType) }} {...props} />
+    <BannerCommon
+      topSlot={null}
+      sizes={{ image: IMAGE_SIZE, mainGap: getGapValue(props.layoutType), imagePadding: IMAGE_PADDING }}
+      {...props}
+    />
   );
 }

package/src/helperComponents/BannerCommon/BannerCommon.tsx

@@ -41,6 +41,8 @@ export type BannerCommonProps = WithSupportProps<
         image: [number, number];
         /** Отступ между текстом и кнопками */
         mainGap: number;
+        /** Отступ вокруг картинки */
+        imagePadding?: number;
       };
     } & ColorWrapperProps
   >
@@ -59,6 +61,7 @@ export function BannerCommon({
   sizes: {
     image: [maxImageWith, maxImageHeight],
     mainGap,
+    imagePadding = 0,
   },
   ...rest
 }: BannerCommonProps) {
@@ -71,6 +74,7 @@ export function BannerCommon({
         '--site-banner-main-gap': `${mainGap}px`,
         '--site-banner-image-max-width': `${maxImageWith}px`,
         '--site-banner-image-max-height': `${maxImageHeight}px`,
+        '--site-banner-image-padding': `${imagePadding}px`,
       }}
       {...rest}
     >

package/src/helperComponents/BannerCommon/styles.module.scss

@@ -22,13 +22,14 @@
 
   flex-shrink: 0;
 
-  border-radius: 4px;
-
   &Wrapper {
+    box-sizing: border-box;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+
+    padding: var(--site-banner-image-padding);
   }
 }
 
@@ -57,7 +58,7 @@
 
   display: grid;
 
-  grid-template-columns: 1fr var(--site-banner-image-max-width);
+  grid-template-columns: 1fr calc(var(--site-banner-image-max-width) + var(--site-banner-image-padding) * 2);
 
   &[data-layout-type='tablet'] {
     display: flex;