@cloud-ru/uikit-product-site-banner 0.3.23 → 0.4.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.4.1 (2025-12-17)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-button-predefined@0.7.15](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/button-predefined/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-rich-text@0.2.17](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-rich-text/CHANGELOG.md)
+* [@cloud-ru/uikit-product-site-tag@0.4.1](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-tag/CHANGELOG.md)
+* [@cloud-ru/uikit-product-utils@8.1.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/utils/CHANGELOG.md)
+
+
+
+
+
+# 0.4.0 (2025-12-15)
+
+
+### Features
+
+* **SITE-10394:** add border radius ([5e950bc](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/5e950bce806fab0a3213eef811a7ebcb411f1860))
+
+
+
+
+
 ## 0.3.23 (2025-12-12)
 
 ### Only dependencies have been changed

package/dist/cjs/components/BannerPrimary/BannerPrimary.js

@@ -29,5 +29,5 @@ const IMAGE_SIZE = {
 };
 function BannerPrimary(_a) {
     var { tags, imgType, layoutType, expirationDate } = _a, props = __rest(_a, ["tags", "imgType", "layoutType", "expirationDate"]);
-    return ((0, jsx_runtime_1.jsx)(BannerCommon_1.BannerCommon, Object.assign({ sizes: { image: IMAGE_SIZE[layoutType][imgType], mainGap: layoutType === 'mobile' ? 24 : 32 }, layoutType: layoutType, topSlot: (tags || expirationDate) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tags, children: [expirationDate && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { size: 'xs', text: `Действует до ${expirationDate}`, appearance: 'neutral', color: 'decor' })), tags === null || tags === void 0 ? void 0 : tags.map((props, index) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, Object.assign({}, props), index)))] })) }, props)));
+    return ((0, jsx_runtime_1.jsx)(BannerCommon_1.BannerCommon, Object.assign({ sizes: { image: IMAGE_SIZE[layoutType][imgType], mainGap: layoutType === 'mobile' ? 24 : 32 }, layoutType: layoutType, topSlot: (tags || expirationDate) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tags, children: [expirationDate && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { size: 'xs', text: `Действует до ${expirationDate}`, appearance: 'neutral', color: 'decor', className: styles_module_scss_1.default.promoTag })), tags === null || tags === void 0 ? void 0 : tags.map((props, index) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, Object.assign({}, props), index)))] })) }, props)));
 }

package/dist/cjs/components/BannerPrimary/styles.module.css

@@ -2,4 +2,7 @@
   display:flex;
   flex-wrap:wrap;
   gap:4px;
+}
+.tags .promoTag{
+  border-radius:2px;
 }

package/dist/cjs/components/BannerTertiary/BannerTertiary.js

@@ -33,5 +33,5 @@ const MAP_LAYOUT_TO_TEXT_SIZE = {
 function BannerTertiary(_a) {
     var { layoutType, title, description, img, button, erid, className, topRightCornerSlot } = _a, rest = __rest(_a, ["layoutType", "title", "description", "img", "button", "erid", "className", "topRightCornerSlot"]);
     const isMobile = layoutType === 'mobile';
-    return ((0, jsx_runtime_1.jsxs)(ColorWrapper_1.ColorWrapper, Object.assign({}, rest, { className: (0, classnames_1.default)(className, styles_module_scss_1.default.root), "data-layout-type": layoutType, children: [(topRightCornerSlot || erid) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.topRightCorner, children: [erid && ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.Erid, { className: styles_module_scss_1.default.erid, tip: erid.tip, appearance: ColorWrapper_1.ColorWrapper.getEridAppearance(rest.appearance) })), topRightCornerSlot] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: img, alt: title }), (0, jsx_runtime_1.jsxs)("div", { "data-color-wrapper-role": 'text', className: styles_module_scss_1.default.texts, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles_module_scss_1.default.title, purpose: 'title', family: 'sans', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles_module_scss_1.default.description, purpose: 'body', family: 'sans', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) })] }), (0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromo, Object.assign({ target: '_self' }, button, { size: 'l', appearance: ColorWrapper_1.ColorWrapper.getButtonAppearance(rest.appearance), fullWidth: isMobile }))] })] })));
+    return ((0, jsx_runtime_1.jsxs)(ColorWrapper_1.ColorWrapper, Object.assign({}, rest, { className: (0, classnames_1.default)(className, styles_module_scss_1.default.root), "data-layout-type": layoutType, children: [(topRightCornerSlot || erid) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.topRightCorner, children: [erid && ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.Erid, { className: styles_module_scss_1.default.erid, tip: erid.tip, appearance: ColorWrapper_1.ColorWrapper.getEridAppearance(rest.appearance) })), topRightCornerSlot] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: img, alt: title }), (0, jsx_runtime_1.jsxs)("div", { "data-color-wrapper-role": 'text', className: styles_module_scss_1.default.texts, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles_module_scss_1.default.title, purpose: 'title', family: 'sans', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }), (0, jsx_runtime_1.jsx)(typography_1.Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles_module_scss_1.default.description, purpose: 'body', family: 'sans', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) })] }), (0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromo, Object.assign({ target: '_self' }, button, { size: 'l', appearance: ColorWrapper_1.ColorWrapper.getButtonAppearance(rest.appearance), fullWidth: isMobile, className: styles_module_scss_1.default.button }))] })] })));
 }

package/dist/cjs/components/BannerTertiary/styles.module.css

@@ -1,7 +1,3 @@
-.root{
-  position:relative;
-}
-
 .topRightCorner{
   position:absolute;
   top:0;
@@ -25,6 +21,7 @@
 .image{
   max-width:105px;
   max-height:72px;
+  border-radius:4px;
 }
 
 .texts{
@@ -33,4 +30,12 @@
   flex-direction:column;
   align-self:stretch;
   gap:4px;
+}
+
+.root{
+  position:relative;
+  border-radius:4px;
+}
+.root .content .button{
+  border-radius:2px;
 }

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

@@ -1,10 +1,3 @@
-.content{
-  display:flex;
-  flex-direction:column;
-  gap:var(--site-banner-main-gap);
-  padding:32px;
-}
-
 .title,
 .description{
   word-break:break-word;
@@ -27,6 +20,7 @@
   max-width:var(--site-banner-image-max-width);
   max-height:var(--site-banner-image-max-height);
   flex-shrink:0;
+  border-radius:4px;
 }
 .imgWrapper{
   width:100%;
@@ -41,6 +35,16 @@
   top:2px;
 }
 
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--site-banner-main-gap);
+  padding:32px;
+}
+.content .buttons .button{
+  border-radius:2px;
+}
+
 .root{
   position:relative;
   display:grid;

package/dist/esm/components/BannerPrimary/BannerPrimary.js

@@ -23,5 +23,5 @@ const IMAGE_SIZE = {
 };
 export function BannerPrimary(_a) {
     var { tags, imgType, layoutType, expirationDate } = _a, props = __rest(_a, ["tags", "imgType", "layoutType", "expirationDate"]);
-    return (_jsx(BannerCommon, Object.assign({ sizes: { image: IMAGE_SIZE[layoutType][imgType], mainGap: layoutType === 'mobile' ? 24 : 32 }, layoutType: layoutType, topSlot: (tags || expirationDate) && (_jsxs("div", { className: styles.tags, children: [expirationDate && (_jsx(PromoTag, { size: 'xs', text: `Действует до ${expirationDate}`, appearance: 'neutral', color: 'decor' })), tags === null || tags === void 0 ? void 0 : tags.map((props, index) => (_jsx(TagSpecial, Object.assign({}, props), index)))] })) }, props)));
+    return (_jsx(BannerCommon, Object.assign({ sizes: { image: IMAGE_SIZE[layoutType][imgType], mainGap: layoutType === 'mobile' ? 24 : 32 }, layoutType: layoutType, topSlot: (tags || expirationDate) && (_jsxs("div", { className: styles.tags, children: [expirationDate && (_jsx(PromoTag, { size: 'xs', text: `Действует до ${expirationDate}`, appearance: 'neutral', color: 'decor', className: styles.promoTag })), tags === null || tags === void 0 ? void 0 : tags.map((props, index) => (_jsx(TagSpecial, Object.assign({}, props), index)))] })) }, props)));
 }

package/dist/esm/components/BannerPrimary/styles.module.css

@@ -2,4 +2,7 @@
   display:flex;
   flex-wrap:wrap;
   gap:4px;
+}
+.tags .promoTag{
+  border-radius:2px;
 }

package/dist/esm/components/BannerTertiary/BannerTertiary.js

@@ -27,5 +27,5 @@ const MAP_LAYOUT_TO_TEXT_SIZE = {
 export function BannerTertiary(_a) {
     var { layoutType, title, description, img, button, erid, className, topRightCornerSlot } = _a, rest = __rest(_a, ["layoutType", "title", "description", "img", "button", "erid", "className", "topRightCornerSlot"]);
     const isMobile = layoutType === 'mobile';
-    return (_jsxs(ColorWrapper, Object.assign({}, rest, { className: cn(className, styles.root), "data-layout-type": layoutType, children: [(topRightCornerSlot || erid) && (_jsxs("div", { className: styles.topRightCorner, children: [erid && (_jsx(Erid, { className: styles.erid, tip: erid.tip, appearance: ColorWrapper.getEridAppearance(rest.appearance) })), topRightCornerSlot] })), _jsxs("div", { className: styles.content, children: [_jsx("img", { className: styles.image, src: img, alt: title }), _jsxs("div", { "data-color-wrapper-role": 'text', className: styles.texts, children: [_jsx(Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles.title, purpose: 'title', family: 'sans', children: _jsx(RichText, { richText: title }) }), _jsx(Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles.description, purpose: 'body', family: 'sans', children: _jsx(RichText, { richText: description }) })] }), _jsx(ButtonPromo, Object.assign({ target: '_self' }, button, { size: 'l', appearance: ColorWrapper.getButtonAppearance(rest.appearance), fullWidth: isMobile }))] })] })));
+    return (_jsxs(ColorWrapper, Object.assign({}, rest, { className: cn(className, styles.root), "data-layout-type": layoutType, children: [(topRightCornerSlot || erid) && (_jsxs("div", { className: styles.topRightCorner, children: [erid && (_jsx(Erid, { className: styles.erid, tip: erid.tip, appearance: ColorWrapper.getEridAppearance(rest.appearance) })), topRightCornerSlot] })), _jsxs("div", { className: styles.content, children: [_jsx("img", { className: styles.image, src: img, alt: title }), _jsxs("div", { "data-color-wrapper-role": 'text', className: styles.texts, children: [_jsx(Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles.title, purpose: 'title', family: 'sans', children: _jsx(RichText, { richText: title }) }), _jsx(Typography, { size: MAP_LAYOUT_TO_TEXT_SIZE[layoutType], className: styles.description, purpose: 'body', family: 'sans', children: _jsx(RichText, { richText: description }) })] }), _jsx(ButtonPromo, Object.assign({ target: '_self' }, button, { size: 'l', appearance: ColorWrapper.getButtonAppearance(rest.appearance), fullWidth: isMobile, className: styles.button }))] })] })));
 }

package/dist/esm/components/BannerTertiary/styles.module.css

@@ -1,7 +1,3 @@
-.root{
-  position:relative;
-}
-
 .topRightCorner{
   position:absolute;
   top:0;
@@ -25,6 +21,7 @@
 .image{
   max-width:105px;
   max-height:72px;
+  border-radius:4px;
 }
 
 .texts{
@@ -33,4 +30,12 @@
   flex-direction:column;
   align-self:stretch;
   gap:4px;
+}
+
+.root{
+  position:relative;
+  border-radius:4px;
+}
+.root .content .button{
+  border-radius:2px;
 }

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

@@ -1,10 +1,3 @@
-.content{
-  display:flex;
-  flex-direction:column;
-  gap:var(--site-banner-main-gap);
-  padding:32px;
-}
-
 .title,
 .description{
   word-break:break-word;
@@ -27,6 +20,7 @@
   max-width:var(--site-banner-image-max-width);
   max-height:var(--site-banner-image-max-height);
   flex-shrink:0;
+  border-radius:4px;
 }
 .imgWrapper{
   width:100%;
@@ -41,6 +35,16 @@
   top:2px;
 }
 
+.content{
+  display:flex;
+  flex-direction:column;
+  gap:var(--site-banner-main-gap);
+  padding:32px;
+}
+.content .buttons .button{
+  border-radius:2px;
+}
+
 .root{
   position:relative;
   display:grid;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-banner",
   "title": "Site Banner",
-  "version": "0.3.23",
+  "version": "0.4.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,14 +36,14 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-button-predefined": "0.7.14",
-    "@cloud-ru/uikit-product-site-rich-text": "0.2.16",
-    "@cloud-ru/uikit-product-site-tag": "0.3.16",
-    "@cloud-ru/uikit-product-utils": "8.0.2",
+    "@cloud-ru/uikit-product-button-predefined": "0.7.15",
+    "@cloud-ru/uikit-product-site-rich-text": "0.2.17",
+    "@cloud-ru/uikit-product-site-tag": "0.4.1",
+    "@cloud-ru/uikit-product-utils": "8.1.0",
     "@snack-uikit/promo-tag": "0.7.1",
     "@snack-uikit/typography": "0.8.4",
     "@snack-uikit/utils": "3.7.0",
     "classnames": "2.5.1"
   },
-  "gitHead": "7303f734eef30f1ac7ac3a279bcf324dcd549059"
+  "gitHead": "1a98d6d9bff32edcbb3f9b0be0a14dce3f2abe5d"
 }

package/src/components/BannerPrimary/BannerPrimary.tsx

@@ -30,7 +30,13 @@ export function BannerPrimary({ tags, imgType, layoutType, expirationDate, ...pr
         (tags || expirationDate) && (
           <div className={styles.tags}>
             {expirationDate && (
-              <PromoTag size='xs' text={`Действует до ${expirationDate}`} appearance='neutral' color='decor' />
+              <PromoTag
+                size='xs'
+                text={`Действует до ${expirationDate}`}
+                appearance='neutral'
+                color='decor'
+                className={styles.promoTag}
+              />
             )}
 
             {tags?.map((props, index) => (

package/src/components/BannerPrimary/styles.module.scss

@@ -2,4 +2,8 @@
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
+
+  .promoTag {
+    border-radius: 2px;
+  }
 }

package/src/components/BannerTertiary/BannerTertiary.tsx

@@ -84,6 +84,7 @@ export function BannerTertiary({
           size='l'
           appearance={ColorWrapper.getButtonAppearance(rest.appearance)}
           fullWidth={isMobile}
+          className={styles.button}
         />
       </div>
     </ColorWrapper>

package/src/components/BannerTertiary/styles.module.scss

@@ -1,7 +1,3 @@
-.root {
-  position: relative;
-}
-
 .topRightCorner {
   position: absolute;
   top: 0;
@@ -26,6 +22,7 @@
 .image {
   max-width: 105px;
   max-height: 72px;
+  border-radius: 4px;
 }
 
 .texts {
@@ -34,4 +31,15 @@
   flex-direction: column;
   align-self: stretch;
   gap: 4px;
-}
+}
+
+.root {
+  position: relative;
+  border-radius: 4px;
+
+  .content {
+    .button {
+      border-radius: 2px;
+    }
+  }
+}

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

@@ -1,11 +1,3 @@
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--site-banner-main-gap);
-
-  padding: 32px;
-}
-
 .title,
 .description {
   word-break: break-word;
@@ -30,6 +22,8 @@
 
   flex-shrink: 0;
 
+  border-radius: 4px;
+
   &Wrapper {
     width: 100%;
     display: flex;
@@ -44,6 +38,20 @@
   top: 2px;
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--site-banner-main-gap);
+
+  padding: 32px;
+
+  .buttons {
+    .button {
+      border-radius: 2px;
+    }
+  }
+}
+
 .root {
   position: relative;