@cloud-ru/uikit-product-site-hero 1.6.2 → 1.7.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.7.0 (2026-05-14)
+
+
+### Features
+
+* **SITE-11035:** add desc im HeroCentral ([398d4a4](https://github.com/cloud-ru-tech/uikit-product/commit/398d4a4def388e09ab649eddfe594a0e309e2dba))
+
+
+
+
+
 ## 1.6.2 (2026-04-30)
 
 ### Only dependencies have been changed

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

@@ -10,6 +10,8 @@ type HeroBlockProps = WithSupportProps<{
     title: string;
     /** Подзаголовок */
     subtitle: string;
+    /** Описание */
+    description?: string;
     /** ClassName для фоновой картинки */
     classNameImage?: string;
     /** Настройки кнопкок */
@@ -30,5 +32,5 @@ type HeroBlockProps = WithSupportProps<{
         mobile: string;
     };
 }> & WithLayoutType;
-export declare function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, backgroundImage, }: HeroBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, description, backgroundImage, }: HeroBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/HeroCentral/HeroCentral.js

@@ -17,9 +17,9 @@ const DEFAULT_BG_IMAGES = {
     tablet: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_tablet.webp',
     mobile: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_mobile.webp',
 };
-function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, backgroundImage = DEFAULT_BG_IMAGES, }) {
-    const { title: titleTypography, subtitle: subtitleTypography } = utils_1.TYPOGRAPHY_BY_LAYOUT[layoutType];
+function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, description, backgroundImage = DEFAULT_BG_IMAGES, }) {
+    const { title: titleTypography, subtitle: subtitleTypography, description: descriptionTypography, } = utils_1.TYPOGRAPHY_BY_LAYOUT[layoutType];
     return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.imageWrapper, classNameImage), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)("img", { loading: 'lazy', src: backgroundImage[layoutType], width: 1408, height: 436, alt: 'background' }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.wrapperContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, className: styles_module_scss_1.default.breadcrumbs }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, {
                                 [styles_module_scss_1.default.withoutAnchors]: !anchors,
-                            }), "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titles, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)(typography_1.Typography, Object.assign({ family: 'sans' }, titleTypography, { className: styles_module_scss_1.default.title, tag: 'h1', children: [(0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: title } }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroTooltip, { tooltipText: tooltipText, tooltipPlacement: tooltipPlacement, layoutType: layoutType })] })), (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, subtitleTypography, { className: styles_module_scss_1.default.subtitle, tag: 'h2', children: subtitle }))] }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroCentralButtons, { buttons: buttons, layoutType: layoutType })] }), (0, jsx_runtime_1.jsx)(helperComponents_1.AnchorMenu, { anchorsList: anchors, layoutType: layoutType })] })] }) }));
+                            }), "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titles, "data-layout-type": layoutType, children: [description && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, descriptionTypography, { className: styles_module_scss_1.default.description, tag: 'h2', children: description }))), (0, jsx_runtime_1.jsxs)(typography_1.Typography, Object.assign({ family: 'sans' }, titleTypography, { className: styles_module_scss_1.default.title, tag: 'h1', children: [(0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: title } }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroTooltip, { tooltipText: tooltipText, tooltipPlacement: tooltipPlacement, layoutType: layoutType })] })), (0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, subtitleTypography, { className: styles_module_scss_1.default.subtitle, tag: 'h2', children: subtitle }))] }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroCentralButtons, { buttons: buttons, layoutType: layoutType })] }), (0, jsx_runtime_1.jsx)(helperComponents_1.AnchorMenu, { anchorsList: anchors, layoutType: layoutType })] })] }) }));
 }

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

@@ -28,6 +28,11 @@
   color:var(--sys-graphite-text-disabled, #a3a3a3);
 }
 
+.description{
+  color:var(--sys-graphite-on-accent, #ffffff);
+  max-width:700px;
+}
+
 .imageWrapper{
   margin:0 auto;
   width:100%;

package/dist/cjs/components/HeroCentral/utils.d.ts

@@ -8,6 +8,10 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "title";
             readonly size: "m";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "l";
+        };
     };
     readonly tablet: {
         readonly title: {
@@ -18,6 +22,10 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "title";
             readonly size: "m";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "l";
+        };
     };
     readonly desktop: {
         readonly title: {
@@ -28,6 +36,10 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "headline";
             readonly size: "s";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "l";
+        };
     };
     readonly desktopSmall: {
         readonly title: {
@@ -38,5 +50,9 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "headline";
             readonly size: "s";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "m";
+        };
     };
 };

package/dist/cjs/components/HeroCentral/utils.js

@@ -5,17 +5,21 @@ exports.TYPOGRAPHY_BY_LAYOUT = {
     mobile: {
         title: { purpose: 'headline', size: 'm' },
         subtitle: { purpose: 'title', size: 'm' },
+        description: { purpose: 'body', size: 'l' },
     },
     tablet: {
         title: { purpose: 'headline', size: 'l' },
         subtitle: { purpose: 'title', size: 'm' },
+        description: { purpose: 'body', size: 'l' },
     },
     desktop: {
         title: { purpose: 'display', size: 'm' },
         subtitle: { purpose: 'headline', size: 's' },
+        description: { purpose: 'body', size: 'l' },
     },
     desktopSmall: {
         title: { purpose: 'display', size: 'm' },
         subtitle: { purpose: 'headline', size: 's' },
+        description: { purpose: 'body', size: 'm' },
     },
 };

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

@@ -10,6 +10,8 @@ type HeroBlockProps = WithSupportProps<{
     title: string;
     /** Подзаголовок */
     subtitle: string;
+    /** Описание */
+    description?: string;
     /** ClassName для фоновой картинки */
     classNameImage?: string;
     /** Настройки кнопкок */
@@ -30,5 +32,5 @@ type HeroBlockProps = WithSupportProps<{
         mobile: string;
     };
 }> & WithLayoutType;
-export declare function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, backgroundImage, }: HeroBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, description, backgroundImage, }: HeroBlockProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/HeroCentral/HeroCentral.js

@@ -11,9 +11,9 @@ const DEFAULT_BG_IMAGES = {
     tablet: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_tablet.webp',
     mobile: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_mobile.webp',
 };
-export function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, backgroundImage = DEFAULT_BG_IMAGES, }) {
-    const { title: titleTypography, subtitle: subtitleTypography } = TYPOGRAPHY_BY_LAYOUT[layoutType];
+export function HeroCentral({ title, subtitle, buttons, anchors, breadcrumbs, layoutType, className, classNameImage, tooltipText, tooltipPlacement, description, backgroundImage = DEFAULT_BG_IMAGES, }) {
+    const { title: titleTypography, subtitle: subtitleTypography, description: descriptionTypography, } = TYPOGRAPHY_BY_LAYOUT[layoutType];
     return (_jsx("section", { className: cn(styles.root, className), children: _jsxs("div", { className: styles.sectionWrapper, children: [_jsx("div", { className: cn(styles.imageWrapper, classNameImage), "data-layout-type": layoutType, children: _jsx("img", { loading: 'lazy', src: backgroundImage[layoutType], width: 1408, height: 436, alt: 'background' }) }), _jsxs("div", { className: styles.wrapperContent, "data-layout-type": layoutType, children: [_jsx(Breadcrumbs, { size: 'xs', items: breadcrumbs, className: styles.breadcrumbs }), _jsxs("div", { className: cn(styles.content, {
                                 [styles.withoutAnchors]: !anchors,
-                            }), "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.titles, "data-layout-type": layoutType, children: [_jsxs(Typography, Object.assign({ family: 'sans' }, titleTypography, { className: styles.title, tag: 'h1', children: [_jsx("span", { dangerouslySetInnerHTML: { __html: title } }), _jsx(HeroTooltip, { tooltipText: tooltipText, tooltipPlacement: tooltipPlacement, layoutType: layoutType })] })), _jsx(Typography, Object.assign({ family: 'sans' }, subtitleTypography, { className: styles.subtitle, tag: 'h2', children: subtitle }))] }), _jsx(HeroCentralButtons, { buttons: buttons, layoutType: layoutType })] }), _jsx(AnchorMenu, { anchorsList: anchors, layoutType: layoutType })] })] }) }));
+                            }), "data-layout-type": layoutType, children: [_jsxs("div", { className: styles.titles, "data-layout-type": layoutType, children: [description && (_jsx(Typography, Object.assign({ family: 'sans' }, descriptionTypography, { className: styles.description, tag: 'h2', children: description }))), _jsxs(Typography, Object.assign({ family: 'sans' }, titleTypography, { className: styles.title, tag: 'h1', children: [_jsx("span", { dangerouslySetInnerHTML: { __html: title } }), _jsx(HeroTooltip, { tooltipText: tooltipText, tooltipPlacement: tooltipPlacement, layoutType: layoutType })] })), _jsx(Typography, Object.assign({ family: 'sans' }, subtitleTypography, { className: styles.subtitle, tag: 'h2', children: subtitle }))] }), _jsx(HeroCentralButtons, { buttons: buttons, layoutType: layoutType })] }), _jsx(AnchorMenu, { anchorsList: anchors, layoutType: layoutType })] })] }) }));
 }

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

@@ -28,6 +28,11 @@
   color:var(--sys-graphite-text-disabled, #a3a3a3);
 }
 
+.description{
+  color:var(--sys-graphite-on-accent, #ffffff);
+  max-width:700px;
+}
+
 .imageWrapper{
   margin:0 auto;
   width:100%;

package/dist/esm/components/HeroCentral/utils.d.ts

@@ -8,6 +8,10 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "title";
             readonly size: "m";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "l";
+        };
     };
     readonly tablet: {
         readonly title: {
@@ -18,6 +22,10 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "title";
             readonly size: "m";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "l";
+        };
     };
     readonly desktop: {
         readonly title: {
@@ -28,6 +36,10 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "headline";
             readonly size: "s";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "l";
+        };
     };
     readonly desktopSmall: {
         readonly title: {
@@ -38,5 +50,9 @@ export declare const TYPOGRAPHY_BY_LAYOUT: {
             readonly purpose: "headline";
             readonly size: "s";
         };
+        readonly description: {
+            readonly purpose: "body";
+            readonly size: "m";
+        };
     };
 };

package/dist/esm/components/HeroCentral/utils.js

@@ -2,17 +2,21 @@ export const TYPOGRAPHY_BY_LAYOUT = {
     mobile: {
         title: { purpose: 'headline', size: 'm' },
         subtitle: { purpose: 'title', size: 'm' },
+        description: { purpose: 'body', size: 'l' },
     },
     tablet: {
         title: { purpose: 'headline', size: 'l' },
         subtitle: { purpose: 'title', size: 'm' },
+        description: { purpose: 'body', size: 'l' },
     },
     desktop: {
         title: { purpose: 'display', size: 'm' },
         subtitle: { purpose: 'headline', size: 's' },
+        description: { purpose: 'body', size: 'l' },
     },
     desktopSmall: {
         title: { purpose: 'display', size: 'm' },
         subtitle: { purpose: 'headline', size: 's' },
+        description: { purpose: 'body', size: 'm' },
     },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-hero",
   "title": "Site Hero",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "46f40e7ec89f4173d660983a5f0368937d45bf9d"
+  "gitHead": "8c56d7a54d896a8cafea4a1e20311c325db19887"
 }

package/src/components/HeroCentral/HeroCentral.tsx

@@ -17,6 +17,8 @@ type HeroBlockProps = WithSupportProps<{
   title: string;
   /** Подзаголовок */
   subtitle: string;
+  /** Описание */
+  description?: string;
   /** ClassName для фоновой картинки */
   classNameImage?: string;
   /** Настройки кнопкок */
@@ -57,9 +59,14 @@ export function HeroCentral({
   classNameImage,
   tooltipText,
   tooltipPlacement,
+  description,
   backgroundImage = DEFAULT_BG_IMAGES,
 }: HeroBlockProps) {
-  const { title: titleTypography, subtitle: subtitleTypography } = TYPOGRAPHY_BY_LAYOUT[layoutType];
+  const {
+    title: titleTypography,
+    subtitle: subtitleTypography,
+    description: descriptionTypography,
+  } = TYPOGRAPHY_BY_LAYOUT[layoutType];
 
   return (
     <section className={cn(styles.root, className)}>
@@ -77,6 +84,11 @@ export function HeroCentral({
             data-layout-type={layoutType}
           >
             <div className={styles.titles} data-layout-type={layoutType}>
+              {description && (
+                <Typography family='sans' {...descriptionTypography} className={styles.description} tag='h2'>
+                  {description}
+                </Typography>
+              )}
               <Typography family='sans' {...titleTypography} className={styles.title} tag='h1'>
                 <span dangerouslySetInnerHTML={{ __html: title }} />
                 <HeroTooltip tooltipText={tooltipText} tooltipPlacement={tooltipPlacement} layoutType={layoutType} />

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

@@ -32,6 +32,11 @@
   color: ste.$sys-graphite-text-disabled;
 }
 
+.description {
+  color: ste.$sys-graphite-on-accent;
+  max-width: 700px;
+}
+
 .imageWrapper {
   margin: 0 auto;
   width: 100%;

package/src/components/HeroCentral/utils.tsx

@@ -2,17 +2,21 @@ export const TYPOGRAPHY_BY_LAYOUT = {
   mobile: {
     title: { purpose: 'headline', size: 'm' },
     subtitle: { purpose: 'title', size: 'm' },
+    description: { purpose: 'body', size: 'l' },
   },
   tablet: {
     title: { purpose: 'headline', size: 'l' },
     subtitle: { purpose: 'title', size: 'm' },
+    description: { purpose: 'body', size: 'l' },
   },
   desktop: {
     title: { purpose: 'display', size: 'm' },
     subtitle: { purpose: 'headline', size: 's' },
+    description: { purpose: 'body', size: 'l' },
   },
   desktopSmall: {
     title: { purpose: 'display', size: 'm' },
     subtitle: { purpose: 'headline', size: 's' },
+    description: { purpose: 'body', size: 'm' },
   },
 } as const;