@cloud-ru/uikit-product-site-section 1.2.8 → 1.3.1-preview-56e61b3f.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.3.0 (2026-04-27)
+
+
+### Features
+
+* **SITE-11177:** add id to SectionBenefitsBanner ([6148634](https://github.com/cloud-ru-tech/uikit-product/commit/6148634bccebec4a774d6574cbfe418a0b195ac2))
+
+
+
+
+
 ## 1.2.8 (2026-04-27)
 
 ### Only dependencies have been changed

package/README.md

@@ -17,6 +17,7 @@
 | expandedDefault | `string \| string[]` | - |  |
 | onExpandedChange | `((value?: string) => void) \| ((value?: string[]) => void)` | - |  |
 | id | `string` | - | id секции |
+| description | `string` | - | Описание |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | outline | `boolean` | - | Внешний бордер для блоков |
 | className | `string` | - | CSS-класс |
@@ -65,6 +66,7 @@
 |------|------|---------------|-------------|
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `ItemProps[]` | - | Выгоды |
+| id | `string` | - | id секции |
 | title | `string` | - | Заголовок |
 | titleTag | enum Tag: `"span"`, `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`, `"h6"`, `"div"`, `"label"`, `"p"` | h3 | Тэг заголовка |
 | description | `string \| string[]` | - | Описание под баннером |

package/dist/cjs/components/SectionAccordion/SectionAccordion.d.ts

@@ -15,6 +15,8 @@ export type SectionAccordionProps = WithSupportProps<AccordionPropsCopy & WithLa
     id?: string;
     /** Название секции */
     title: string;
+    /** Описание */
+    description?: string;
     /** Массив айтемов */
     items: AccordionItem[];
     /** Цвет фона */
@@ -24,5 +26,5 @@ export type SectionAccordionProps = WithSupportProps<AccordionPropsCopy & WithLa
     /** CSS-класс */
     className?: string;
 }>>;
-export declare function SectionAccordion({ id, title, items, selectionMode, layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className, ...rest }: SectionAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionAccordion({ id, title, description, items, selectionMode, layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className, ...rest }: SectionAccordionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/SectionAccordion/SectionAccordion.js

@@ -24,6 +24,6 @@ const SectionBasic_1 = require("../SectionBasic");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 function SectionAccordion(_a) {
-    var { id, title, items, selectionMode = 'multiple', layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className } = _a, rest = __rest(_a, ["id", "title", "items", "selectionMode", "layoutType", "backgroundColor", "outline", "onExpandedChange", "expandedDefault", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, layoutType: layoutType, backgroundColor: backgroundColor }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary, { selectionMode: selectionMode, expandedDefault: expandedDefault, onExpandedChange: onExpandedChange, className: styles_module_scss_1.default.accordion, children: items.map(({ title, description, onClick }, index) => ((0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary.CollapseBlock, { id: index.toString(), header: (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, utils_1.getBlockTitleProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), className: className, removeContentFromDOM: false, outline: outline, onClick: onClick, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', tag: 'div', size: (0, utils_1.getBlockDescriptionSize)(layoutType), className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }) }, index))) }) })));
+    var { id, title, description, items, selectionMode = 'multiple', layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className } = _a, rest = __rest(_a, ["id", "title", "description", "items", "selectionMode", "layoutType", "backgroundColor", "outline", "onExpandedChange", "expandedDefault", "className"]);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, title: title, description: description, layoutType: layoutType, backgroundColor: backgroundColor }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary, { selectionMode: selectionMode, expandedDefault: expandedDefault, onExpandedChange: onExpandedChange, className: styles_module_scss_1.default.accordion, children: items.map(({ title, description, onClick }, index) => ((0, jsx_runtime_1.jsx)(accordion_1.AccordionPrimary.CollapseBlock, { id: index.toString(), header: (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, utils_1.getBlockTitleProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), className: className, removeContentFromDOM: false, outline: outline, onClick: onClick, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', tag: 'div', size: (0, utils_1.getBlockDescriptionSize)(layoutType), className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }) }, index))) }) })));
 }

package/dist/cjs/components/SectionBenefitsBanner/SectionBenefitsBanner.d.ts

@@ -5,6 +5,8 @@ import { SectionBasicProps } from '../SectionBasic';
 import { BackgroundType } from './types';
 type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
 export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
     /** Заголовок */
     title?: string;
     /** Тэг заголовка */
@@ -18,5 +20,5 @@ export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
     /** Фон подложки */
     backgroundSectionColor?: SectionBasicProps['backgroundColor'];
 } & BackgroundType>>;
-export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, backgroundSectionColor, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionBenefitsBanner({ id, title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, backgroundSectionColor, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/SectionBenefitsBanner/SectionBenefitsBanner.js

@@ -24,8 +24,8 @@ const SectionBasic_1 = require("../SectionBasic");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 function SectionBenefitsBanner(_a) {
-    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, backgroundSectionColor, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "backgroundSectionColor", "description", "className"]);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ layoutType: layoutType, className: className, backgroundColor: backgroundSectionColor !== null && backgroundSectionColor !== void 0 ? backgroundSectionColor : 'neutral-background' }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bannerWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.banner, {
+    var { id, title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, backgroundSectionColor, description, className } = _a, rest = __rest(_a, ["id", "title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "backgroundSectionColor", "description", "className"]);
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundSectionColor !== null && backgroundSectionColor !== void 0 ? backgroundSectionColor : 'neutral-background' }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.bannerWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.banner, {
                         [styles_module_scss_1.default.white]: backgroundType && backgroundType === 'image',
                     }), "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, children: [backgroundImage && ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.illustration, src: backgroundImage, alt: 'benefits-illustration', "data-layout-type": layoutType })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentWrapper, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'light', tag: titleTag }, (0, utils_1.getTitleTypographyProps)(layoutType), { children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }))), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.benefitItems, "data-items-amount": items.length, "data-layout-type": layoutType, children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.BenefitItem, Object.assign({}, item, { layoutType: layoutType }), item.description))) })] })] }), description && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.description, "data-attribute": 'no_search_index', children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', children: Array.isArray(description) ? (description.map(item => (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: item }, item))) : ((0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description })) }) }))] }) })));
 }

package/dist/esm/components/SectionAccordion/SectionAccordion.d.ts

@@ -15,6 +15,8 @@ export type SectionAccordionProps = WithSupportProps<AccordionPropsCopy & WithLa
     id?: string;
     /** Название секции */
     title: string;
+    /** Описание */
+    description?: string;
     /** Массив айтемов */
     items: AccordionItem[];
     /** Цвет фона */
@@ -24,5 +26,5 @@ export type SectionAccordionProps = WithSupportProps<AccordionPropsCopy & WithLa
     /** CSS-класс */
     className?: string;
 }>>;
-export declare function SectionAccordion({ id, title, items, selectionMode, layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className, ...rest }: SectionAccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionAccordion({ id, title, description, items, selectionMode, layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className, ...rest }: SectionAccordionProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/SectionAccordion/SectionAccordion.js

@@ -18,6 +18,6 @@ import { SectionBasic } from '../SectionBasic';
 import styles from './styles.module.css';
 import { getBlockDescriptionSize, getBlockTitleProps } from './utils';
 export function SectionAccordion(_a) {
-    var { id, title, items, selectionMode = 'multiple', layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className } = _a, rest = __rest(_a, ["id", "title", "items", "selectionMode", "layoutType", "backgroundColor", "outline", "onExpandedChange", "expandedDefault", "className"]);
-    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, layoutType: layoutType, backgroundColor: backgroundColor }, extractSupportProps(rest), { children: _jsx(AccordionPrimary, { selectionMode: selectionMode, expandedDefault: expandedDefault, onExpandedChange: onExpandedChange, className: styles.accordion, children: items.map(({ title, description, onClick }, index) => (_jsx(AccordionPrimary.CollapseBlock, { id: index.toString(), header: _jsx(Typography, Object.assign({ family: 'sans' }, getBlockTitleProps(layoutType), { className: styles.title, children: _jsx(RichText, { richText: title }) })), className: className, removeContentFromDOM: false, outline: outline, onClick: onClick, children: _jsx(Typography, { family: 'sans', purpose: 'body', tag: 'div', size: getBlockDescriptionSize(layoutType), className: styles.description, children: _jsx(RichText, { richText: description }) }) }, index))) }) })));
+    var { id, title, description, items, selectionMode = 'multiple', layoutType, backgroundColor, outline, onExpandedChange, expandedDefault, className } = _a, rest = __rest(_a, ["id", "title", "description", "items", "selectionMode", "layoutType", "backgroundColor", "outline", "onExpandedChange", "expandedDefault", "className"]);
+    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, description: description, layoutType: layoutType, backgroundColor: backgroundColor }, extractSupportProps(rest), { children: _jsx(AccordionPrimary, { selectionMode: selectionMode, expandedDefault: expandedDefault, onExpandedChange: onExpandedChange, className: styles.accordion, children: items.map(({ title, description, onClick }, index) => (_jsx(AccordionPrimary.CollapseBlock, { id: index.toString(), header: _jsx(Typography, Object.assign({ family: 'sans' }, getBlockTitleProps(layoutType), { className: styles.title, children: _jsx(RichText, { richText: title }) })), className: className, removeContentFromDOM: false, outline: outline, onClick: onClick, children: _jsx(Typography, { family: 'sans', purpose: 'body', tag: 'div', size: getBlockDescriptionSize(layoutType), className: styles.description, children: _jsx(RichText, { richText: description }) }) }, index))) }) })));
 }

package/dist/esm/components/SectionBenefitsBanner/SectionBenefitsBanner.d.ts

@@ -5,6 +5,8 @@ import { SectionBasicProps } from '../SectionBasic';
 import { BackgroundType } from './types';
 type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
 export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
     /** Заголовок */
     title?: string;
     /** Тэг заголовка */
@@ -18,5 +20,5 @@ export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
     /** Фон подложки */
     backgroundSectionColor?: SectionBasicProps['backgroundColor'];
 } & BackgroundType>>;
-export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, backgroundSectionColor, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionBenefitsBanner({ id, title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, backgroundSectionColor, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/SectionBenefitsBanner/SectionBenefitsBanner.js

@@ -18,8 +18,8 @@ import { SectionBasic } from '../SectionBasic';
 import styles from './styles.module.css';
 import { getTitleTypographyProps } from './utils';
 export function SectionBenefitsBanner(_a) {
-    var { title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, backgroundSectionColor, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "backgroundSectionColor", "description", "className"]);
-    return (_jsx(SectionBasic, Object.assign({ layoutType: layoutType, className: className, backgroundColor: backgroundSectionColor !== null && backgroundSectionColor !== void 0 ? backgroundSectionColor : 'neutral-background' }, rest, { children: _jsxs("div", { className: styles.bannerWrapper, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.banner, {
+    var { id, title, titleTag = 'h3', items, layoutType, backgroundType = 'color', appearance = 'brand', color, backgroundImage, backgroundSectionColor, description, className } = _a, rest = __rest(_a, ["id", "title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "backgroundSectionColor", "description", "className"]);
+    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundSectionColor !== null && backgroundSectionColor !== void 0 ? backgroundSectionColor : 'neutral-background' }, rest, { children: _jsxs("div", { className: styles.bannerWrapper, "data-layout-type": layoutType, children: [_jsxs("div", { className: cn(styles.banner, {
                         [styles.white]: backgroundType && backgroundType === 'image',
                     }), "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, children: [backgroundImage && (_jsx("img", { className: styles.illustration, src: backgroundImage, alt: 'benefits-illustration', "data-layout-type": layoutType })), _jsxs("div", { className: styles.contentWrapper, children: [title && (_jsx(Typography, Object.assign({ family: 'light', tag: titleTag }, getTitleTypographyProps(layoutType), { children: _jsx(RichText, { richText: title }) }))), _jsx("div", { className: styles.benefitItems, "data-items-amount": items.length, "data-layout-type": layoutType, children: items.map(item => (_jsx(BenefitItem, Object.assign({}, item, { layoutType: layoutType }), item.description))) })] })] }), description && (_jsx("div", { className: styles.description, "data-attribute": 'no_search_index', children: _jsx(Typography, { family: 'sans', purpose: 'body', size: 'm', tag: 'div', children: Array.isArray(description) ? (description.map(item => _jsx(RichText, { richText: item }, item))) : (_jsx(RichText, { richText: description })) }) }))] }) })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "1.2.8",
+  "version": "1.3.1-preview-56e61b3f.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "849cdd305b21bc8fea872e8645014d7fc4d3b2d6"
+  "gitHead": "e79095c7047a3f7199908c3185271fdbbc76e257"
 }

package/src/components/SectionAccordion/SectionAccordion.tsx

@@ -29,6 +29,8 @@ export type SectionAccordionProps = WithSupportProps<
       id?: string;
       /** Название секции */
       title: string;
+      /** Описание */
+      description?: string;
       /** Массив айтемов */
       items: AccordionItem[];
       /** Цвет фона */
@@ -43,6 +45,7 @@ export type SectionAccordionProps = WithSupportProps<
 export function SectionAccordion({
   id,
   title,
+  description,
   items,
   selectionMode = 'multiple',
   layoutType,
@@ -57,6 +60,7 @@ export function SectionAccordion({
     <SectionBasic
       id={id}
       title={title}
+      description={description}
       layoutType={layoutType}
       backgroundColor={backgroundColor}
       {...extractSupportProps(rest)}

package/src/components/SectionBenefitsBanner/SectionBenefitsBanner.tsx

@@ -15,6 +15,8 @@ type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
 export type SectionBenefitsBannerProps = WithSupportProps<
   WithLayoutType<
     {
+      /** id секции */
+      id?: string;
       /** Заголовок */
       title?: string;
       /** Тэг заголовка */
@@ -32,6 +34,7 @@ export type SectionBenefitsBannerProps = WithSupportProps<
 >;
 
 export function SectionBenefitsBanner({
+  id,
   title,
   titleTag = 'h3',
   items,
@@ -47,6 +50,7 @@ export function SectionBenefitsBanner({
 }: SectionBenefitsBannerProps) {
   return (
     <SectionBasic
+      id={id}
       layoutType={layoutType}
       className={className}
       backgroundColor={backgroundSectionColor ?? 'neutral-background'}