@cloud-ru/uikit-product-site-section 1.5.5-preview-0099cd8a.0 → 1.6.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.6.0 (2026-06-15)
+
+
+### Features
+
+* **SITE-11474:** add show more button for section leading ([405df9c](https://github.com/cloud-ru-tech/uikit-product/commit/405df9ca5bb7c47c9c35b01325a7a0d01f9e67cb))
+
+
+
+
+
 ## 1.5.4 (2026-06-10)
 
 ### Only dependencies have been changed

package/README.md

@@ -221,6 +221,7 @@
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | items* | `CardLeadingItem[]` | - | Массив айтемов |
 | title | `string` | - | Название секции |
+| subtitle | `string` | - | Подзаголовок секции |
 | description | `string` | - | Описание секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | m | Размер шрифтов заголовка и подзаголовка |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |

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

@@ -2,7 +2,7 @@ import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils'
 import { CarouselProps } from '@snack-uikit/carousel';
 import { CardLeadingItem } from '../../helperComponents';
 import { SectionBasicProps } from '../SectionBasic';
-export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBasicProps, 'title' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'> & Pick<CarouselProps, 'autoSwipe'> & {
+export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBasicProps, 'title' | 'subtitle' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'> & Pick<CarouselProps, 'autoSwipe'> & {
     /** id секции */
     id?: string;
     /** Массив айтемов */
@@ -12,4 +12,4 @@ export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBa
     /** CSS - класснейм */
     className?: string;
 }>>;
-export declare function SectionLeading({ id, title, description, titleSectionSize, titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe, ...rest }: SectionLeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionLeading({ id, title, subtitle, description, titleSectionSize, titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe, ...rest }: SectionLeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/SectionLeading/SectionLeading.js

@@ -27,7 +27,7 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 const MOBILE_LAYOUTS = ['tablet', 'mobile'];
 function SectionLeading(_a) {
-    var { id, title, description, titleSectionSize = 'm', titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "moreButton", "className", "layoutType", "autoSwipe"]);
+    var { id, title, subtitle, description, titleSectionSize = 'm', titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "subtitle", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "moreButton", "className", "layoutType", "autoSwipe"]);
     const [currentPage, setCurrentPage] = (0, react_1.useState)(0);
     const [itemsPerPageAmount, setItemsPerPageAmount] = (0, react_1.useState)(0);
     const wrapperRef = (0, react_1.useRef)(null);
@@ -53,5 +53,5 @@ function SectionLeading(_a) {
         }
         return items.length > itemsPerPageAmount;
     }, [items.length, itemsPerPageAmount, layoutType]);
-    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, moreButton: moreButton }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: styles_module_scss_1.default.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && ((0, jsx_runtime_1.jsx)(carousel_1.Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, gap: '2px', children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerDescription, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.footerDescriptionText, children: footerDescription }) }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(SectionBasic_1.SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, subtitle: subtitle, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, moreButton: moreButton }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: styles_module_scss_1.default.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && ((0, jsx_runtime_1.jsx)(carousel_1.Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, gap: '2px', children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.footerDescription, "data-layout-type": layoutType, children: (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.footerDescriptionText, children: footerDescription }) }))] }) })));
 }

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

@@ -2,7 +2,7 @@ import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils'
 import { CarouselProps } from '@snack-uikit/carousel';
 import { CardLeadingItem } from '../../helperComponents';
 import { SectionBasicProps } from '../SectionBasic';
-export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBasicProps, 'title' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'> & Pick<CarouselProps, 'autoSwipe'> & {
+export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBasicProps, 'title' | 'subtitle' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'> & Pick<CarouselProps, 'autoSwipe'> & {
     /** id секции */
     id?: string;
     /** Массив айтемов */
@@ -12,4 +12,4 @@ export type SectionLeadingProps = WithSupportProps<WithLayoutType<Pick<SectionBa
     /** CSS - класснейм */
     className?: string;
 }>>;
-export declare function SectionLeading({ id, title, description, titleSectionSize, titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe, ...rest }: SectionLeadingProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionLeading({ id, title, subtitle, description, titleSectionSize, titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe, ...rest }: SectionLeadingProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionLeading/SectionLeading.js

@@ -21,7 +21,7 @@ import styles from './styles.module.css';
 import { calculateAmountOfItemsPerPage } from './utils';
 const MOBILE_LAYOUTS = ['tablet', 'mobile'];
 export function SectionLeading(_a) {
-    var { id, title, description, titleSectionSize = 'm', titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "moreButton", "className", "layoutType", "autoSwipe"]);
+    var { id, title, subtitle, description, titleSectionSize = 'm', titleTag, items, footerDescription, backgroundColor, moreButton, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "subtitle", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "moreButton", "className", "layoutType", "autoSwipe"]);
     const [currentPage, setCurrentPage] = useState(0);
     const [itemsPerPageAmount, setItemsPerPageAmount] = useState(0);
     const wrapperRef = useRef(null);
@@ -47,5 +47,5 @@ export function SectionLeading(_a) {
         }
         return items.length > itemsPerPageAmount;
     }, [items.length, itemsPerPageAmount, layoutType]);
-    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, moreButton: moreButton }, extractSupportProps(rest), { children: _jsxs("div", { ref: wrapperRef, className: styles.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && (_jsx(Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, gap: '2px', children: items.map(item => (_jsx(CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && (_jsx("div", { className: styles.footerDescription, "data-layout-type": layoutType, children: _jsx(Typography.SansBodyL, { className: styles.footerDescriptionText, children: footerDescription }) }))] }) })));
+    return (_jsx(SectionBasic, Object.assign({ id: id, layoutType: layoutType, className: className, backgroundColor: backgroundColor, title: title, subtitle: subtitle, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, moreButton: moreButton }, extractSupportProps(rest), { children: _jsxs("div", { ref: wrapperRef, className: styles.leadingSection, "data-layout-type": layoutType, children: [itemsPerPageAmount > 0 && (_jsx(Carousel, { state: { page: currentPage, onChange: setCurrentPage }, arrows: showArrows, controlsVisibility: 'always', showItems: itemsPerPageAmount, pagination: items.length > itemsPerPageAmount, swipe: items.length > itemsPerPageAmount, autoSwipe: autoSwipe, infiniteScroll: true, gap: '2px', children: items.map(item => (_jsx(CardLeading, Object.assign({}, item, { layoutType: layoutType, "data-test-id": item['data-test-id'] }), item.label))) })), footerDescription && (_jsx("div", { className: styles.footerDescription, "data-layout-type": layoutType, children: _jsx(Typography.SansBodyL, { className: styles.footerDescriptionText, children: footerDescription }) }))] }) })));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "1.5.5-preview-0099cd8a.0",
+  "version": "1.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "10786e92abb77f1b3033e3d79f5df81afc5551e1"
+  "gitHead": "ee17cdbcb95c43481520b9e727a37d3eff1e585d"
 }

package/src/components/SectionLeading/SectionLeading.tsx

@@ -14,7 +14,7 @@ export type SectionLeadingProps = WithSupportProps<
   WithLayoutType<
     Pick<
       SectionBasicProps,
-      'title' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'
+      'title' | 'subtitle' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'
     > &
       Pick<CarouselProps, 'autoSwipe'> & {
         /** id секции */
@@ -34,6 +34,7 @@ const MOBILE_LAYOUTS = ['tablet', 'mobile'];
 export function SectionLeading({
   id,
   title,
+  subtitle,
   description,
   titleSectionSize = 'm',
   titleTag,
@@ -86,6 +87,7 @@ export function SectionLeading({
       className={className}
       backgroundColor={backgroundColor}
       title={title}
+      subtitle={subtitle}
       description={description}
       titleSectionSize={titleSectionSize}
       titleTag={titleTag}