@cloud-ru/uikit-product-site-hero 0.6.3 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.1.0 (2025-12-15)
+
+
+### Bug Fixes
+
+* **SITE-10072:** redesign HeroSlider ([30b951b](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/30b951b16af801e5215907a9644b9b4e82eac3ce))
+
+
+### Features
+
+* **SITE-10394:** add border radius ([5e950bc](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/5e950bce806fab0a3213eef811a7ebcb411f1860))
+
+
+
+
+
 ## 0.6.3 (2025-12-12)
 
 ### Only dependencies have been changed

package/README.md

@@ -58,12 +58,11 @@ Hero blocks for Site
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
+| tabs* | `TabHeroSliderBase[]` | - | Заголовки для tabs |
 | items* | `HeroSlideProps[]` | - | Слайды карусели |
 | id | `string` | - |  |
 | className | `string` | - | CSS-класс |
-| pagination | `boolean` | true | Использовать пагинацию для переключения страниц |
 | state | `{ page: number; onChange(page: number): void; }` | - | Управление состоянием извне |
-| autoSwipe | `number` | - | Автоматическое переключение слайдов в секундах |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/HeroEvent/HeroEvent.js

@@ -30,5 +30,5 @@ function HeroEvent(_a) {
     const formatTitle = format ? constants_2.FORMAT_LABELS[format] : undefined;
     const audienceTitle = audience ? constants_2.AUDIENCE_LABELS[audience] : undefined;
     const showTagRow = Boolean(category || formatTitle || audienceTitle);
-    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("section", Object.assign({ className: styles_module_scss_1.default.wrapper, "data-layout-type": layoutType }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.heroEvent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-event__breadcrumbs' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, "data-layout-type": layoutType, children: [showTagRow && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tagRow, children: [category && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, Object.assign({}, category, { color: 'decor', size: 'xs' })), formatTitle && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'violet', text: formatTitle, color: 'decor', size: 'xs' }), audienceTitle && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'violet', text: audienceTitle, color: 'decor', size: 'xs' })] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)("h1", { className: styles_module_scss_1.default.title, "data-layout-type": layoutType, children: title }), (0, jsx_runtime_1.jsxs)("p", { className: styles_module_scss_1.default.coords, "data-color": backgroundColor, children: [(0, jsx_runtime_1.jsxs)("time", { className: styles_module_scss_1.default.time, children: [startsAt, place.title && ', '] }), place.title && (0, jsx_runtime_1.jsx)(helperComponents_1.Place, Object.assign({}, place, { title: place.title }))] })] })] }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroEventButton, Object.assign({}, button, { layoutType: layoutType }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, alt: 'hero_img', src: image, "data-layout-type": layoutType }) })] })] }) })) }));
+    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("section", Object.assign({ className: styles_module_scss_1.default.wrapper, "data-layout-type": layoutType }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.heroEvent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-event__breadcrumbs' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titleWrapper, "data-layout-type": layoutType, children: [showTagRow && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.tagRow, children: [category && (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, Object.assign({}, category, { color: 'decor', size: 'xs', className: styles_module_scss_1.default.promoTag })), formatTitle && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'violet', text: formatTitle, color: 'decor', size: 'xs', className: styles_module_scss_1.default.promoTag })), audienceTitle && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { appearance: 'violet', text: audienceTitle, color: 'decor', size: 'xs', className: styles_module_scss_1.default.promoTag }))] })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)("h1", { className: styles_module_scss_1.default.title, "data-layout-type": layoutType, children: title }), (0, jsx_runtime_1.jsxs)("p", { className: styles_module_scss_1.default.coords, "data-color": backgroundColor, children: [(0, jsx_runtime_1.jsxs)("time", { className: styles_module_scss_1.default.time, children: [startsAt, place.title && ', '] }), place.title && (0, jsx_runtime_1.jsx)(helperComponents_1.Place, Object.assign({}, place, { title: place.title }))] })] })] }), (0, jsx_runtime_1.jsx)(helperComponents_1.HeroEventButton, Object.assign({}, button, { layoutType: layoutType, className: styles_module_scss_1.default.button }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, alt: 'hero_img', src: image, "data-layout-type": layoutType }) })] })] }) })) }));
 }

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

@@ -19,15 +19,8 @@
   display:flex;
   gap:var(--dimension-050m, 4px);
 }
-
-.heroEvent{
-  display:flex;
-  flex-direction:column;
-  gap:var(--dimension-4m, 32px);
-  overflow:hidden;
-}
-.heroEvent[data-layout-type=tablet], .heroEvent[data-layout-type=mobile]{
-  gap:var(--dimension-3m, 24px);
+.tagRow .promoTag{
+  border-radius:2px;
 }
 
 .content{
@@ -116,6 +109,8 @@
   position:relative;
   width:488px;
   flex-shrink:0;
+  border-radius:4px;
+  overflow:hidden;
 }
 .imageWrapper[data-layout-type=tablet], .imageWrapper[data-layout-type=mobile]{
   display:flex;
@@ -132,4 +127,17 @@
 }
 .image[data-layout-type=tablet], .image[data-layout-type=mobile]{
   max-width:504px;
+}
+
+.heroEvent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+  overflow:hidden;
+}
+.heroEvent[data-layout-type=tablet], .heroEvent[data-layout-type=mobile]{
+  gap:var(--dimension-3m, 24px);
+}
+.heroEvent .content .button{
+  border-radius:2px;
 }

package/dist/cjs/components/HeroMain/HeroMain.js

@@ -39,6 +39,6 @@ function HeroMain(_a) {
     const isAdaptive = ['mobile', 'tablet'].includes(layoutType);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.sectionWrapper, {
                     [styles_module_scss_1.default.withNavbarBorderRadius]: navbar && navbar.items.length > 0,
-                }), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: styles_module_scss_1.default.contentWrapper }, (0, uikit_product_utils_1.extractSupportProps)(rest), { "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, { text: text, tip: tip, appearance: appearance }, text))) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ tag: 'h1', family: 'sans' }, (0, utils_1.getTitleTypographyProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { tag: 'div', className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && ((0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyL, { tag: 'p', className: styles_module_scss_1.default.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.PlatformLink, { platform: platform, appearance: (0, utils_1.getAppearanceByBackground)(backgroundColor), handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttons, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive })), buttons.length > 1 &&
-                                                (backgroundColor !== constants_1.HERO_COLORS.GraphiteAccentDefault ? ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive }))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', fullWidth: isAdaptive }))))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-layout-type": layoutType, children: [image && (0, jsx_runtime_1.jsx)("img", { alt: 'hero_img', src: image }), !image && video && (0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { className: styles_module_scss_1.default.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(styles_module_scss_1.default.sectionWrapper, styles_module_scss_1.default.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)(uikit_product_site_navbar_1.SiteNavbar, Object.assign({}, navbar, { appereance: (0, utils_1.getNavbarAppearanceByBackground)(backgroundColor), "data-test-id": 'hero-main__navbar' })) }))] }));
+                }), "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: styles_module_scss_1.default.contentWrapper }, (0, uikit_product_utils_1.extractSupportProps)(rest), { "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.left, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.leftContent, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(breadcrumbs_1.Breadcrumbs, { size: 'xs', items: breadcrumbs, "data-test-id": 'hero-main__breadcrumbs' }), tags.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.tagRow, "data-layout-type": layoutType, children: tags.map(({ text, tip, appearance }) => ((0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.TagSpecial, { text: text, tip: tip, appearance: appearance, className: styles_module_scss_1.default.promoTag }, text))) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ tag: 'h1', family: 'sans' }, (0, utils_1.getTitleTypographyProps)(layoutType), { className: styles_module_scss_1.default.title, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { tag: 'div', className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }), platforms && platforms.length > 0 && handlePlatformClick && ((0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyL, { tag: 'p', className: styles_module_scss_1.default.platforms, children: [t('Main.platforms'), ":", ' ', platforms.map((platform, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(components_1.PlatformLink, { platform: platform, appearance: (0, utils_1.getAppearanceByBackground)(backgroundColor), handlePlatformClick: handlePlatformClick }), platforms.length - 1 !== index && ', '] }, platform.id || platform.title)))] }))] })] }), buttons && buttons.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttons, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, buttons[0], { "data-layout-type": layoutType, size: 'l', appearance: 'primary', fullWidth: isAdaptive, className: styles_module_scss_1.default.button })), buttons.length > 1 &&
+                                                (backgroundColor !== constants_1.HERO_COLORS.GraphiteAccentDefault ? ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromoOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', appearance: 'secondary', fullWidth: isAdaptive, className: styles_module_scss_1.default.button }))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({}, buttons[1], { "data-layout-type": layoutType, size: 'l', fullWidth: isAdaptive, className: styles_module_scss_1.default.button }))))] }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.media, "data-layout-type": layoutType, children: [image && (0, jsx_runtime_1.jsx)("img", { alt: 'hero_img', src: image }), !image && video && (0, jsx_runtime_1.jsx)(uikit_product_site_media_1.SiteVideo, { className: styles_module_scss_1.default.video, video: video, layoutType: layoutType })] }) })] }) })) }), navbar && navbar.items.length > 0 && ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: (0, classnames_1.default)(styles_module_scss_1.default.sectionWrapper, styles_module_scss_1.default.navbarWrapper), "data-sticky": true, "data-section-background": backgroundColor, children: (0, jsx_runtime_1.jsx)(uikit_product_site_navbar_1.SiteNavbar, Object.assign({}, navbar, { appereance: (0, utils_1.getNavbarAppearanceByBackground)(backgroundColor), "data-test-id": 'hero-main__navbar' })) }))] }));
 }

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

@@ -43,16 +43,6 @@
   border-radius:0 0 var(--dimension-050m, 4px) var(--dimension-050m, 4px);
 }
 
-.contentWrapper{
-  padding:var(--dimension-5m, 40px) 0;
-}
-.contentWrapper[data-layout-type=tablet]{
-  padding:var(--dimension-4m, 32px) 0;
-}
-.contentWrapper[data-layout-type=mobile]{
-  padding:var(--dimension-3m, 24px) 0;
-}
-
 .content{
   display:flex;
   align-items:stretch;
@@ -92,6 +82,9 @@
   flex-wrap:wrap;
   gap:var(--dimension-025m, 2px);
 }
+.tagRow .promoTag{
+  border-radius:2px;
+}
 
 .textWrapper{
   display:flex;
@@ -139,6 +132,19 @@
   flex-direction:column;
 }
 
+.contentWrapper{
+  padding:var(--dimension-5m, 40px) 0;
+}
+.contentWrapper[data-layout-type=tablet]{
+  padding:var(--dimension-4m, 32px) 0;
+}
+.contentWrapper[data-layout-type=mobile]{
+  padding:var(--dimension-3m, 24px) 0;
+}
+.contentWrapper .buttons .button{
+  border-radius:2px;
+}
+
 .navbarWrapper{
   z-index:5;
 }

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

@@ -1,13 +1,14 @@
 import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 import { CarouselProps } from '@snack-uikit/carousel';
 import { HeroSlideProps } from './components';
+import { TabHeroSliderBase } from './components/TabHeroSlider';
 export type HeroSliderProps = WithSupportProps<WithLayoutType<{
     id?: string;
     /** Слайды карусели */
     items: HeroSlideProps[];
+    /** Заголовки для tabs */
+    tabs: TabHeroSliderBase[];
     /** CSS-класс */
     className?: string;
-    /** Использовать пагинацию для переключения страниц @default true */
-    pagination?: boolean;
-} & Pick<CarouselProps, 'state' | 'autoSwipe'>>>;
-export declare function HeroSlider({ id, layoutType, items, autoSwipe, pagination, className, ...rest }: HeroSliderProps): import("react/jsx-runtime").JSX.Element;
+} & Pick<CarouselProps, 'state'>>>;
+export declare function HeroSlider({ id, tabs: tabsProp, layoutType, items: itemsProp, className, ...rest }: HeroSliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/HeroSlider/HeroSlider.js

@@ -20,17 +20,35 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const carousel_1 = require("@snack-uikit/carousel");
-const pagination_1 = require("@snack-uikit/pagination");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const AUTO_SWIPE = 5;
+const AUTO_SWIPE_DISABLED = 0;
 function HeroSlider(_a) {
-    var { id, layoutType, items, autoSwipe, pagination = true, className } = _a, rest = __rest(_a, ["id", "layoutType", "items", "autoSwipe", "pagination", "className"]);
+    var { id, tabs: tabsProp, layoutType, items: itemsProp, className } = _a, rest = __rest(_a, ["id", "tabs", "layoutType", "items", "className"]);
+    // Максимум 5 слайдов
+    const items = itemsProp.toSpliced(5);
+    const tabs = tabsProp.toSpliced(5);
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
-    const currentSlideAppearance = items[currentPage].appearance;
-    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), id: id, children: [(0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({ className: styles_module_scss_1.default.heroCarousel, arrows: false, pagination: false, infiniteScroll: true, autoSwipe: autoSwipe, state: {
+    const [autoSwipe, setAutoSwipe] = (0, react_1.useState)(AUTO_SWIPE);
+    const currentAppearance = items[currentPage].appearance;
+    const currentColor = items[currentPage].color;
+    const currentTab = tabs[currentPage];
+    const handleTabClick = (tab) => {
+        const currentIndex = tabs.findIndex(t => t.title === tab.title);
+        setCurrentPage(currentIndex);
+        setAutoSwipe(AUTO_SWIPE_DISABLED);
+    };
+    const handleLeftClick = () => {
+        setCurrentPage(page => (items.length + page - 1) % items.length);
+        setAutoSwipe(AUTO_SWIPE_DISABLED);
+    };
+    const handleRightClick = () => {
+        setCurrentPage(page => (page + 1) % items.length);
+        setAutoSwipe(AUTO_SWIPE_DISABLED);
+    };
+    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), id: id, "data-appearance": currentAppearance, "data-color": currentColor, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(carousel_1.Carousel, Object.assign({ className: styles_module_scss_1.default.heroCarousel, arrows: false, pagination: false, infiniteScroll: true, autoSwipe: autoSwipe, state: {
                     page: currentPage,
                     onChange: setCurrentPage,
-                }, gap: '0' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: items.map((item, i) => ((0, jsx_runtime_1.jsx)(components_1.HeroSlide, Object.assign({}, item, { layoutType: layoutType }), `${item.title}${i}`))) })), pagination && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.paginationWrapper, "data-appearance": currentSlideAppearance, children: (0, jsx_runtime_1.jsx)(pagination_1.PaginationSlider, { "data-test-id": 'hero-slider__pagination', page: currentPage + 1, onChange: (page) => {
-                        setCurrentPage(page - 1);
-                    }, total: items.length }) }))] }));
+                }, gap: '0' }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: items.map((item, i) => ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.carouselItemWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(components_1.HeroSlide, Object.assign({}, item, { className: styles_module_scss_1.default.heroSlide, layoutType: layoutType })) }, `${item.title}${i}`))) })), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.tabsWrapper), "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(components_1.TabsRowHeroSlider, { className: styles_module_scss_1.default.tabs, appearance: currentAppearance, active: currentTab, items: tabs, onTabClick: handleTabClick }) }), (0, jsx_runtime_1.jsx)(components_1.Control, { className: styles_module_scss_1.default.control, variant: 'prev', onClick: handleLeftClick }), (0, jsx_runtime_1.jsx)(components_1.Control, { className: styles_module_scss_1.default.control, variant: 'next', onClick: handleRightClick })] }));
 }

package/dist/cjs/components/HeroSlider/components/Control/Control.d.ts

@@ -0,0 +1,7 @@
+export declare const Control: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    onClick?(): void;
+    variant: "prev" | "next";
+    className?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/HeroSlider/components/Control/Control.js

@@ -0,0 +1,27 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Control = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uikit_product_icons_1 = require("@cloud-ru/uikit-product-icons");
+const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+exports.Control = (0, react_1.forwardRef)((_a, ref) => {
+    var { onClick, variant, className } = _a, rest = __rest(_a, ["onClick", "variant", "className"]);
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(styles_module_scss_1.default.control, className), onClick: onClick, type: 'button', "data-variant": variant }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)(uikit_product_icons_1.ChevronLeftSVG, { size: 24, className: styles_module_scss_1.default.icon }) })));
+});

package/dist/cjs/components/HeroSlider/components/Control/index.d.ts

@@ -0,0 +1 @@
+export * from './Control';

package/dist/cjs/components/HeroSlider/components/{HeroSlideVideoBg → Control}/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./HeroSlideVideoBg"), exports);
+__exportStar(require("./Control"), exports);

package/dist/cjs/components/HeroSlider/components/Control/styles.module.css

@@ -0,0 +1,45 @@
+.control{
+  width:var(--size-carousel-control-container, 40px);
+  height:var(--size-carousel-control-container, 40px);
+  border-radius:var(--radius-carousel-control-container, 24px);
+  border-width:var(--border-width-025m, 2px);
+  cursor:pointer;
+  position:absolute;
+  top:50%;
+  left:28px;
+  transform:translateY(-50%);
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-color:transparent;
+  border-style:solid;
+  outline-color:transparent;
+  box-shadow:var(--box-shadow-elevation-level3, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 8px 16px 0px rgba(0, 0, 0, 0.0784313725));
+}
+.control:hover, .control:focus-visible{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.control:hover{
+  box-shadow:var(--box-shadow-elevation-level4, 0px 0px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px 16px 16px 0px rgba(0, 0, 0, 0.0784313725));
+}
+.control:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  border-color:var(--sys-available-complementary, #15151b);
+  outline-color:var(--sys-available-on-complementary, #ffffff);
+  box-shadow:none;
+}
+.control[data-variant=next]{
+  right:28px;
+  left:auto;
+}
+.control[data-variant=next]:focus-visible{
+  outline-offset:var(--dimension-025m, 2px);
+}
+.control[data-variant=next] .icon{
+  transform:rotate(180deg);
+}

package/dist/cjs/components/HeroSlider/components/HeroSlide/HeroSlide.js

@@ -7,13 +7,15 @@ exports.HeroSlide = HeroSlide;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const uikit_product_button_predefined_1 = require("@cloud-ru/uikit-product-button-predefined");
-const uikit_product_site_layout_1 = require("@cloud-ru/uikit-product-site-layout");
 const uikit_product_site_rich_text_1 = require("@cloud-ru/uikit-product-site-rich-text");
 const uikit_product_site_tag_1 = require("@cloud-ru/uikit-product-site-tag");
+const button_1 = require("@snack-uikit/button");
 const typography_1 = require("@snack-uikit/typography");
 const HeroSlideMedia_1 = require("../HeroSlideMedia");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const util_1 = require("./util");
 function HeroSlide({ layoutType, id, title, description, media, button, color, appearance, erid, className, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { id: id, "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), children: (0, jsx_runtime_1.jsxs)(uikit_product_site_layout_1.Layout.SectionWrapper, { layoutType: layoutType, className: styles_module_scss_1.default.sectionWrapper, 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.slideContentWrapper, "data-layout-type": layoutType, "data-image-format": (0, util_1.getSliderContentWrapperImageType)(media), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-layout-type": layoutType, "data-image-format": (0, util_1.getSliderContentWrapperImageType)(media), children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.text, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, util_1.getTitleProps)(layoutType), { tag: 'div', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { tag: 'div', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.buttonWrapper, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromo, Object.assign({ target: '_self' }, button, { size: 'l', appearance: 'tertiary', className: styles_module_scss_1.default.button })) })] }), (0, jsx_runtime_1.jsx)(HeroSlideMedia_1.HeroSlideMedia, Object.assign({}, media, { layoutType: layoutType }))] })] }) }));
+    const hasButtonErid = Boolean(erid && erid.place === 'under-button');
+    const buttonNode = appearance === 'brand' ? ((0, jsx_runtime_1.jsx)(uikit_product_button_predefined_1.ButtonPromo, Object.assign({}, button, { size: 'l', className: styles_module_scss_1.default.button }))) : ((0, jsx_runtime_1.jsx)(button_1.ButtonFilled, Object.assign({}, button, { size: 'l', appearance: 'primary', className: styles_module_scss_1.default.button })));
+    return ((0, jsx_runtime_1.jsxs)("div", { id: id, "data-layout-type": layoutType, "data-appearance": appearance, "data-color": color, className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), children: [erid && erid.place === 'tooltip' && (0, jsx_runtime_1.jsx)(uikit_product_site_tag_1.Erid, { className: styles_module_scss_1.default.erid, tip: erid.tip, appearance: 'neutral' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.slideContentWrapper, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.text, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, (0, util_1.getTitleProps)(layoutType), { tag: 'div', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) })), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, { className: styles_module_scss_1.default.description, tag: 'div', children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.buttonWrapper, "data-layout-type": layoutType, "data-has-button-erid": hasButtonErid, children: [buttonNode, erid && hasButtonErid && ((0, jsx_runtime_1.jsx)(typography_1.Typography.LightLabelS, { className: styles_module_scss_1.default.buttonErid, tag: 'div', children: erid.tip }))] })] }), (0, jsx_runtime_1.jsx)(HeroSlideMedia_1.HeroSlideMedia, Object.assign({}, media, { layoutType: layoutType }))] })] }));
 }

package/dist/cjs/components/HeroSlider/components/HeroSlide/constants.d.ts

@@ -4,8 +4,6 @@ export declare const Appearance: {
     readonly Graphite: "graphite";
 };
 export declare const Color: {
-    readonly Neutral: "neutral";
-    readonly White: "white";
     readonly Violet: "violet";
     readonly Blue: "blue";
 };

package/dist/cjs/components/HeroSlider/components/HeroSlide/constants.js

@@ -7,8 +7,6 @@ exports.Appearance = {
     Graphite: 'graphite',
 };
 exports.Color = {
-    Neutral: 'neutral',
-    White: 'white',
     Violet: 'violet',
     Blue: 'blue',
 };

package/dist/cjs/components/HeroSlider/components/HeroSlide/styles.module.css

@@ -1,49 +1,38 @@
 .wrapper{
-  position:relative;
-  display:flex;
-  align-items:center;
-  background-color:var(--sys-neutral-background, #eeeff3);
-  height:368px;
-}
-.wrapper[data-color=neutral][data-appearance=decor]{
-  background-color:var(--sys-neutral-background, #eeeff3);
-}
-.wrapper[data-color=white][data-appearance=decor]{
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.wrapper[data-color=violet][data-appearance=decor]{
-  background-color:var(--sys-violet-decor-default, #e5dcf7);
-}
-.wrapper[data-color=blue][data-appearance=decor]{
-  background-color:var(--sys-blue-decor-default, #d0ddf3);
-}
-.wrapper[data-appearance=graphite]{
-  background-color:var(--sys-graphite-accent-default, #222222);
+  padding:16px 32px;
 }
 .wrapper[data-appearance=graphite] .text{
-  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+  color:var(--sys-graphite-on-accent, #ffffff);
 }
-.wrapper[data-appearance=brand]{
-  background-color:var(--sys-primary-accent-default, #26d07c);
+.wrapper[data-appearance=graphite] .buttonErid{
+  color:var(--sys-graphite-text-disabled, #a3a3a3);
 }
 .wrapper[data-appearance=brand] .text{
   color:var(--sys-graphite-text-main, #222222);
 }
+.wrapper[data-appearance=brand] .buttonErid{
+  color:var(--sys-primary-text-support, #125137);
+}
 .wrapper[data-appearance=decor] .text{
   color:var(--sys-graphite-text-main, #222222);
 }
-
-.sectionWrapper{
-  height:100%;
+.wrapper[data-appearance=decor] .buttonErid{
+  color:var(--sys-neutral-text-support, #656774);
 }
-.sectionWrapper > div[data-layout-type=tablet]{
-  padding-right:0;
+.wrapper[data-layout-type=tablet]{
+  padding:24px 24px 20px 24px;
+}
+.wrapper[data-layout-type=mobile]{
+  padding:16px 16px 24px 16px;
 }
 
 .erid{
   position:absolute;
-  right:var(--dimension-025m, 2px);
-  top:var(--dimension-025m, 2px);
+  right:0;
+  top:0;
+}
+.erid span{
+  border-radius:0 2px 0 0;
 }
 
 .slideContentWrapper{
@@ -51,60 +40,62 @@
   flex-direction:row;
   height:100%;
   justify-content:space-between;
+  gap:64px;
 }
-.slideContentWrapper[data-layout-type=mobile]{
-  justify-content:center;
-}
-.slideContentWrapper[data-image-format=rectangle][data-layout-type=desktop]{
-  gap:var(--dimension-4m, 32px);
-}
-.slideContentWrapper[data-image-format=rectangle][data-layout-type=desktopSmall]{
-  gap:var(--dimension-3m, 24px);
+.slideContentWrapper[data-layout-type=tablet]{
+  flex-direction:column-reverse;
+  gap:24px;
 }
-.slideContentWrapper[data-image-format=square]{
-  gap:var(--dimension-2m, 16px);
+.slideContentWrapper[data-layout-type=mobile]{
+  flex-direction:column-reverse;
+  gap:16px;
 }
 
 .content{
   display:flex;
   flex-direction:column;
   justify-content:space-between;
-  padding:var(--dimension-7m, 56px) 0;
-}
-.content[data-layout-type=tablet]{
-  max-width:unset;
-  padding:var(--dimension-4m, 32px) 0 var(--dimension-7m, 56px);
 }
-.content[data-layout-type=mobile]{
-  max-width:unset;
-  padding:var(--dimension-3m, 24px) 0 var(--dimension-7m, 56px);
-  width:100%;
-}
-.content[data-image-format=rectangle][data-layout-type=desktopSmall]{
-  max-width:650px;
-  flex-shrink:0;
-}
-.content[data-image-format=rectangle][data-layout-type=tablet]{
-  max-width:388px;
-}
-.content[data-image-format=square]{
-  max-width:800px;
-  flex-shrink:0;
-}
-.content[data-image-format=square][data-layout-type=tablet], .content[data-image-format=square][data-layout-type=mobile]{
-  max-width:unset;
-  flex:initial;
+
+.description{
+  max-width:500px;
+  margin-bottom:20px;
 }
 
 .text{
   display:flex;
   flex-direction:column;
   gap:var(--dimension-2m, 16px);
+  margin-top:32px;
+}
+.text[data-layout-type=tablet], .text[data-layout-type=mobile]{
+  margin-top:0;
+  gap:12px;
+  margin-bottom:32px;
 }
-.text[data-layout-type=mobile] br{
+.text[data-layout-type=tablet] br, .text[data-layout-type=mobile] br{
   display:none;
 }
+.text[data-layout-type=tablet] .description, .text[data-layout-type=mobile] .description{
+  max-width:unset;
+}
 
-.buttonWrapper[data-layout-type=mobile] .button{
+.buttonWrapper .buttonErid{
+  margin-top:18px;
+}
+.buttonWrapper[data-layout-type=tablet] .button, .buttonWrapper[data-layout-type=mobile] .button{
   width:100%;
+}
+.buttonWrapper[data-layout-type=mobile] .buttonErid{
+  margin-top:16px;
+}
+.buttonWrapper[data-has-button-erid=false]{
+  margin-bottom:32px;
+}
+.buttonWrapper[data-has-button-erid=false][data-layout-type=tablet], .buttonWrapper[data-has-button-erid=false][data-layout-type=mobile]{
+  margin-bottom:0px;
+}
+
+.content .buttonWrapper .button{
+  border-radius:2px;
 }

package/dist/cjs/components/HeroSlider/components/HeroSlide/types.d.ts

@@ -1,10 +1,10 @@
-import { ButtonPromoProps } from '@cloud-ru/uikit-product-button-predefined';
+import { HTMLAttributeAnchorTarget, MouseEventHandler } from 'react';
 import { EridProps } from '@cloud-ru/uikit-product-site-tag';
 import { ValueOf } from '@snack-uikit/utils';
 import { HeroSlideMediaProps } from '../HeroSlideMedia';
 import { Appearance, Color } from './constants';
 type ColorType = ValueOf<typeof Color>;
-type AppearanceType = ValueOf<typeof Appearance>;
+export type AppearanceType = ValueOf<typeof Appearance>;
 export type HeroSlideBaseProps = {
     /** id компонента */
     id?: string;
@@ -14,10 +14,21 @@ export type HeroSlideBaseProps = {
     description?: string;
     /** Медиа-контент */
     media: HeroSlideMediaProps;
-    /** Кнопка ButtonPromo */
-    button: Omit<ButtonPromoProps, 'size' | 'appearance' | 'className'>;
+    /** Кнопка CTA */
+    button: {
+        /** Текст кнопки */
+        label: string;
+        /** Ссылка */
+        href: string;
+        /** Как открывать ссылку */
+        target?: HTMLAttributeAnchorTarget;
+        /** Обработчик клика по кнопке */
+        onClick?: MouseEventHandler<HTMLElement>;
+    };
     /** Плашка рекламы с tooltip */
-    erid?: Pick<EridProps, 'tip' | 'appearance'>;
+    erid?: Pick<EridProps, 'tip'> & {
+        place: 'tooltip' | 'under-button';
+    };
     /** CSS-класс */
     className?: string;
 };

package/dist/cjs/components/HeroSlider/components/HeroSlide/util.d.ts

@@ -1,6 +1,3 @@
 import { LayoutType } from '@cloud-ru/uikit-product-utils';
 import { TypographyProps } from '@snack-uikit/typography';
-import { HeroSlideImageProps } from '../HeroSlideImage';
-import { HeroSlideBaseProps } from './types';
 export declare const getTitleProps: (layoutType: LayoutType) => Pick<TypographyProps, "purpose" | "size">;
-export declare const getSliderContentWrapperImageType: (media: HeroSlideBaseProps["media"]) => HeroSlideImageProps["format"] | undefined;

package/dist/cjs/components/HeroSlider/components/HeroSlide/util.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSliderContentWrapperImageType = exports.getTitleProps = void 0;
+exports.getTitleProps = void 0;
 const getTitleProps = (layoutType) => {
     switch (layoutType) {
         case 'mobile':
+            return {
+                purpose: 'headline',
+                size: 's',
+            };
         case 'tablet':
             return {
                 purpose: 'headline',
@@ -17,14 +21,3 @@ const getTitleProps = (layoutType) => {
     }
 };
 exports.getTitleProps = getTitleProps;
-const getSliderContentWrapperImageType = (media) => {
-    switch (media.type) {
-        case 'image':
-            return media.format;
-        case 'imageBg':
-        case 'videoBg':
-        default:
-            return undefined;
-    }
-};
-exports.getSliderContentWrapperImageType = getSliderContentWrapperImageType;

package/dist/cjs/components/HeroSlider/components/HeroSlideImage/HeroSlideImage.d.ts

@@ -3,9 +3,8 @@ export type HeroSlideImageProps = {
     /** Ссылки на картинку */
     source: {
         desktop: string;
-        tablet?: string;
+        tablet: string;
+        mobile: string;
     };
-    /** Форма картинки */
-    format: 'rectangle' | 'square' | 'custom';
 };
-export declare function HeroSlideImage({ source, format, layoutType }: WithLayoutType<HeroSlideImageProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeroSlideImage({ source, layoutType }: WithLayoutType<HeroSlideImageProps>): import("react/jsx-runtime").JSX.Element;