@cloud-ru/uikit-product-site-section 1.5.4 → 1.5.5-preview-2d60b98c.0

package/README.md

@@ -221,10 +221,12 @@
 | 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"` | - | Тег заголовка |
 | backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
+| moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | id | `string` | - | id секции |
 | footerDescription | `string` | - | Описание секции |

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'> & 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, 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, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "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 }, (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'> & 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, 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, className, layoutType, autoSwipe = 9 } = _a, rest = __rest(_a, ["id", "title", "description", "titleSectionSize", "titleTag", "items", "footerDescription", "backgroundColor", "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 }, 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.4",
+  "version": "1.5.5-preview-2d60b98c.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "92d679e9b52484574ef7848f1b46241c465ce197"
+  "gitHead": "f9e6d40898c030c1458576df2c7f3c2ef9fea446"
 }

package/src/components/SectionLeading/SectionLeading.tsx

@@ -12,7 +12,10 @@ import { calculateAmountOfItemsPerPage } from './utils';
 
 export type SectionLeadingProps = WithSupportProps<
   WithLayoutType<
-    Pick<SectionBasicProps, 'title' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor'> &
+    Pick<
+      SectionBasicProps,
+      'title' | 'subtitle' | 'description' | 'titleSectionSize' | 'titleTag' | 'backgroundColor' | 'moreButton'
+    > &
       Pick<CarouselProps, 'autoSwipe'> & {
         /** id секции */
         id?: string;
@@ -31,12 +34,14 @@ const MOBILE_LAYOUTS = ['tablet', 'mobile'];
 export function SectionLeading({
   id,
   title,
+  subtitle,
   description,
   titleSectionSize = 'm',
   titleTag,
   items,
   footerDescription,
   backgroundColor,
+  moreButton,
   className,
   layoutType,
   autoSwipe = 9,
@@ -82,9 +87,11 @@ export function SectionLeading({
       className={className}
       backgroundColor={backgroundColor}
       title={title}
+      subtitle={subtitle}
       description={description}
       titleSectionSize={titleSectionSize}
       titleTag={titleTag}
+      moreButton={moreButton}
       {...extractSupportProps(rest)}
     >
       <div ref={wrapperRef} className={styles.leadingSection} data-layout-type={layoutType}>