@cloud-ru/uikit-product-site-section 0.23.3 → 0.23.4

package/dist/esm/components/SectionBenefits/types.d.ts

@@ -0,0 +1,69 @@
+import { CardBasicProps, CardInfoProps, CardProductProps } from '@sbercloud/uikit-product-site-cards';
+import { SectionBasicProps } from '../SectionBasic';
+type CardBasicArray = Omit<CardBasicProps, 'layoutType'>[];
+type CardInfoArray = Omit<CardInfoProps, 'layoutType'>[];
+type CardNumericArray = Omit<CardInfoProps, 'layoutType' | 'icon'>[];
+type CardProductArray = Omit<CardProductProps, 'layoutType'>[];
+type ContentBasicTab = {
+    tabValue: string;
+    cards: CardBasicArray;
+};
+type ContentInfoTab = {
+    tabValue: string;
+    cards: CardInfoArray;
+};
+type ContentNumericTab = {
+    tabValue: string;
+    cards: CardNumericArray;
+};
+type ContentProductTab = {
+    tabValue: string;
+    cards: CardProductArray;
+};
+type ContentBasicWithoutTabs = {
+    type: 'basic';
+    content: CardBasicArray;
+    tabBarItems?: never;
+};
+type ContentBasicWithTabs = {
+    type: 'basic';
+    content: ContentBasicTab[];
+    tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+type ContentNumericWithoutTabs = {
+    type: 'numeric';
+    content: CardNumericArray;
+    tabBarItems?: never;
+};
+type ContentNumericWithTabs = {
+    type: 'numeric';
+    content: ContentNumericTab[];
+    tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+type ContentInfoWithoutTabs = {
+    type: 'info';
+    outline?: boolean;
+    content: CardInfoArray;
+    tabBarItems?: never;
+};
+type ContentInfoWithTabs = {
+    type: 'info';
+    outline?: boolean;
+    content: ContentInfoTab[];
+    tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+type ContentProductWithoutTabs = {
+    type: 'product';
+    content: CardProductArray;
+    tabBarItems?: never;
+};
+type ContentProdctWithTabs = {
+    type: 'product';
+    content: ContentProductTab[];
+    tabBarItems: NonNullable<SectionBasicProps['tabBarItems']>;
+};
+export type ContentBasic = ContentBasicWithTabs | ContentBasicWithoutTabs;
+export type ContentInfo = ContentInfoWithTabs | ContentInfoWithoutTabs;
+export type ContentProduct = ContentProdctWithTabs | ContentProductWithoutTabs;
+export type ContentNumeric = ContentNumericWithTabs | ContentNumericWithoutTabs;
+export {};

package/dist/esm/components/SectionBenefits/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+import { BenefitItemProps } from '../../helperComponents';
+import { BackgroundType } from './types';
+type ItemProps = Omit<BenefitItemProps, 'layoutType'>;
+export type SectionBenefitsBannerProps = WithSupportProps<WithLayoutType<{
+    /** Заголовок */
+    title?: string;
+    /** Тэг заголовка */
+    titleTag?: TypographyProps['tag'];
+    /** Выгоды */
+    items: ItemProps[];
+    /** Описание под баннером */
+    description?: string[] | string;
+    /** CSS класс */
+    className?: string;
+} & BackgroundType>>;
+export declare function SectionBenefitsBanner({ title, titleTag, items, layoutType, backgroundType, appearance, color, backgroundImage, description, className, ...rest }: SectionBenefitsBannerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { RichText } from '@sbercloud/uikit-product-site-rich-text';
+import { Typography } from '@snack-uikit/typography';
+import { BenefitItem } from '../../helperComponents';
+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, description, className } = _a, rest = __rest(_a, ["title", "titleTag", "items", "layoutType", "backgroundType", "appearance", "color", "backgroundImage", "description", "className"]);
+    return (_jsx(SectionBasic, Object.assign({ layoutType: layoutType, className: className }, 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/dist/esm/components/SectionBenefitsBanner/index.d.ts

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

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

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

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

@@ -0,0 +1,91 @@
+.bannerWrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+}
+
+.banner{
+  position:relative;
+  overflow:hidden;
+  color:var(--sys-graphite-text-main, #222222);
+  padding:var(--dimension-5m, 40px);
+}
+.banner[data-layout-type=tablet]{
+  padding:var(--dimension-4m, 32px);
+}
+.banner[data-layout-type=mobile]{
+  padding:var(--dimension-3m, 24px);
+}
+.banner[data-color=neutral][data-appearance=decor]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.banner[data-color=white][data-appearance=decor]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.banner[data-color=violet][data-appearance=decor]{
+  background-color:var(--sys-violet-background, #f7f3ff);
+}
+.banner[data-color=blue][data-appearance=decor]{
+  background-color:var(--sys-blue-background, #eef4fd);
+}
+.banner[data-appearance=graphite]{
+  background-color:var(--sys-graphite-accent-default, #222222);
+  color:var(--sys-invert-neutral-text-main, #e6e8ef);
+}
+.banner[data-appearance=brand]{
+  background-color:var(--sys-primary-accent-default, #26d07c);
+}
+
+.contentWrapper{
+  position:relative;
+  z-index:1;
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-4m, 32px);
+}
+
+.banner.white{
+  color:var(--sys-graphite-on-accent, #ffffff);
+  background:transparent;
+}
+
+.benefitItems{
+  display:grid;
+  grid-template-columns:repeat(4, 1fr);
+  gap:var(--dimension-2m, 16px);
+}
+.benefitItems[data-layout-type=tablet]{
+  grid-template-columns:repeat(2, 1fr);
+  gap:var(--dimension-4m, 32px) var(--dimension-6m, 48px);
+}
+.benefitItems[data-layout-type=mobile]{
+  grid-template-columns:100%;
+  gap:var(--dimension-3m, 24px);
+}
+.benefitItems[data-items-amount="3"]{
+  grid-template-columns:repeat(3, 1fr);
+}
+.benefitItems[data-items-amount="3"][data-layout-type=tablet]{
+  grid-template-columns:repeat(3, 1fr);
+}
+.benefitItems[data-items-amount="3"][data-layout-type=mobile]{
+  grid-template-columns:100%;
+}
+
+.description{
+  color:var(--sys-neutral-text-support, #656774);
+}
+
+.illustration{
+  position:absolute;
+  pointer-events:none;
+  z-index:0;
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+  -o-object-position:center 0;
+     object-position:center 0;
+  top:0;
+  left:0;
+}

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

@@ -0,0 +1,34 @@
+import { ValueOf } from '@snack-uikit/utils';
+export declare const Appearance: {
+    readonly Decor: "decor";
+    readonly Brand: "brand";
+    readonly Graphite: "graphite";
+};
+export declare const Color: {
+    readonly Neutral: "neutral";
+    readonly White: "white";
+    readonly Violet: "violet";
+    readonly Blue: "blue";
+};
+type ColorType = ValueOf<typeof Color>;
+export type AppearanceType = ValueOf<typeof Appearance>;
+export type WithColor = {
+    appearance: Exclude<AppearanceType, 'brand' | 'graphite'>;
+    color?: ColorType;
+};
+export type WithoutColor = {
+    appearance: Exclude<AppearanceType, 'decor'>;
+    color?: never;
+};
+export type ColorsProps = (WithColor | WithoutColor) & {
+    backgroundType: 'color';
+    backgroundImage?: never;
+};
+type WithBgImage = {
+    backgroundType: 'image';
+    backgroundImage: string;
+    appearance?: never;
+    color?: never;
+};
+export type BackgroundType = ColorsProps | WithBgImage;
+export {};

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

@@ -0,0 +1,11 @@
+export const Appearance = {
+    Decor: 'decor',
+    Brand: 'brand',
+    Graphite: 'graphite',
+};
+export const Color = {
+    Neutral: 'neutral',
+    White: 'white',
+    Violet: 'violet',
+    Blue: 'blue',
+};

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

@@ -0,0 +1,3 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { TypographyProps } from '@snack-uikit/typography';
+export declare function getTitleTypographyProps(layoutType: LayoutType): Pick<TypographyProps, 'purpose' | 'size'>;

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

@@ -0,0 +1,11 @@
+export function getTitleTypographyProps(layoutType) {
+    switch (layoutType) {
+        case 'mobile':
+        case 'tablet':
+            return { purpose: 'headline', size: 's' };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return { purpose: 'headline', size: 'l' };
+    }
+}

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

@@ -0,0 +1,5 @@
+import { CardMediaProps } from '@sbercloud/uikit-product-site-cards';
+import { LimitedSectionCarouselProps } from '../../helperComponents';
+export type BlogCarouselItem = Omit<CardMediaProps, 'size' | 'layoutType'>;
+export type SectionBlogCarouselProps = Omit<LimitedSectionCarouselProps<BlogCarouselItem>, 'gap' | 'titleLink'>;
+export declare function SectionBlogCarousel({ items, ...props }: SectionBlogCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionBlogCarousel/SectionBlogCarousel.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CardMedia } from '@sbercloud/uikit-product-site-cards';
+import { SectionCarousel } from '../../helperComponents';
+import { getCarouselProps } from './utils';
+export function SectionBlogCarousel(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props.layoutType]);
+    return (_jsx(SectionCarousel, Object.assign({}, props, carouselProps, { children: items.map(item => (_jsx(CardMedia, Object.assign({}, item, { size: 'm', layoutType: props.layoutType }), item.title))) })));
+}

package/dist/esm/components/SectionBlogCarousel/index.d.ts

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

package/dist/esm/components/SectionBlogCarousel/index.js

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

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

@@ -0,0 +1,3 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { SectionCarouselProps } from '../../helperComponents';
+export declare const getCarouselProps: (layoutType: LayoutType) => Pick<SectionCarouselProps, "itemMinWidth" | "maxItemsPerPage">;

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

@@ -0,0 +1,21 @@
+export const getCarouselProps = (layoutType) => {
+    switch (layoutType) {
+        case 'mobile':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 1,
+            };
+        case 'tablet':
+            return {
+                itemMinWidth: 340,
+                maxItemsPerPage: 2,
+            };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return {
+                itemMinWidth: 340,
+                maxItemsPerPage: 3,
+            };
+    }
+};

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

@@ -0,0 +1,5 @@
+import { CaseCardProps } from '@sbercloud/uikit-product-site-case-card';
+import { LimitedSectionCarouselProps } from '../../helperComponents';
+export type CaseItem = Omit<CaseCardProps, 'layoutType'>;
+export type SectionCaseCarouselProps = Omit<LimitedSectionCarouselProps<CaseItem>, 'description' | 'gap' | 'titleLink'>;
+export declare function SectionCaseCarousel({ items, layoutType, ...props }: SectionCaseCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionCaseCarousel/SectionCaseCarousel.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CaseCard } from '@sbercloud/uikit-product-site-case-card';
+import { SectionCarousel } from '../../helperComponents';
+import { getCarouselProps } from './utils';
+export function SectionCaseCarousel(_a) {
+    var { items, layoutType } = _a, props = __rest(_a, ["items", "layoutType"]);
+    const carouselProps = useMemo(() => getCarouselProps(layoutType), [layoutType]);
+    return (_jsx(SectionCarousel, Object.assign({}, props, carouselProps, { layoutType: layoutType, children: items.map(item => (_jsx(CaseCard, Object.assign({}, item, { layoutType: layoutType }), item.description))) })));
+}

package/dist/esm/components/SectionCaseCarousel/index.d.ts

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

package/dist/esm/components/SectionCaseCarousel/index.js

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

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

@@ -0,0 +1,3 @@
+.card{
+  height:100%;
+}

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

@@ -0,0 +1,3 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { SectionCarouselProps } from '../../helperComponents';
+export declare const getCarouselProps: (layoutType: LayoutType) => Pick<SectionCarouselProps, "itemMinWidth" | "maxItemsPerPage">;

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

@@ -0,0 +1,17 @@
+export const getCarouselProps = (layoutType) => {
+    switch (layoutType) {
+        case 'tablet':
+        case 'mobile':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 1,
+            };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return {
+                itemMinWidth: 320,
+                maxItemsPerPage: 2,
+            };
+    }
+};

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

@@ -0,0 +1,29 @@
+import { CardProductProps } from '@sbercloud/uikit-product-site-cards';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { SectionCatalogFooterProps } from '../../helperComponents';
+import { SectionColor } from '../../types';
+type ProductCategory = {
+    id: string;
+    label: string;
+    items: Omit<CardProductProps, 'layoutType'>[];
+};
+export type SectionCatalogProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title: string;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Список продуктов по категориям */
+    categories: ProductCategory[];
+    /** Выбранная категория продуктов */
+    selectedCategory?: string;
+    /** Колбек смены выбранной категории продуктов */
+    onCategorySelect?(category: string): void;
+    /** Список элементов для футера в каталоге */
+    footer?: SectionCatalogFooterProps['items'];
+}>>;
+export declare function SectionCatalog({ id, layoutType, className, title, backgroundColor, selectedCategory: selectedCategoryProp, onCategorySelect, categories, footer, ...rest }: SectionCatalogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/SectionCatalog/SectionCatalog.js

@@ -0,0 +1,29 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useUncontrolledProp } from 'uncontrollable';
+import { CardProduct } from '@sbercloud/uikit-product-site-cards';
+import { Grid } from '@sbercloud/uikit-product-site-grid';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Tabs } from '@snack-uikit/tabs';
+import { SectionCatalogFooter } from '../../helperComponents';
+import { SectionBasic } from '../SectionBasic';
+import { GRID_CONFIG } from './constants';
+import styles from './styles.module.css';
+export function SectionCatalog(_a) {
+    var { id, layoutType, className, title, backgroundColor, selectedCategory: selectedCategoryProp, onCategorySelect, categories, footer } = _a, rest = __rest(_a, ["id", "layoutType", "className", "title", "backgroundColor", "selectedCategory", "onCategorySelect", "categories", "footer"]);
+    const [selectedCategory, setSelectedCategory] = useUncontrolledProp(selectedCategoryProp, categories[0].id, onCategorySelect);
+    const isDesktop = ['desktop', 'desktopSmall'].includes(layoutType);
+    const isOutlineCard = backgroundColor === 'neutral-background1-level';
+    return (_jsx(SectionBasic, Object.assign({ id: id, title: title, backgroundColor: backgroundColor, layoutType: layoutType, className: cn(className, styles.sectionCatalog) }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.body, children: [_jsxs(Tabs, { value: selectedCategory, onChange: setSelectedCategory, children: [_jsxs("div", { className: cn(styles.categoryList, { [styles.desktopCategoryList]: isDesktop }), children: [_jsx(Tabs.TabBar, { type: 'primary', orientation: isDesktop ? 'vertical' : 'horizontal', markerPosition: isDesktop ? 'before' : 'after', className: cn({ [styles.desktopTabs]: isDesktop }), children: categories.map(({ id, label }) => (_jsx(Tabs.Tab, { value: id, label: label }, id))) }), footer && isDesktop && _jsx(SectionCatalogFooter, { items: footer, layoutType: layoutType })] }), categories.map(({ id, items }) => (_jsx(Tabs.TabContent, { value: id, className: styles.tabContent, children: _jsx(Grid, { columnsConfig: GRID_CONFIG, gap: 's', layoutType: layoutType, children: items.map(item => (_jsx(CardProduct, Object.assign({ layoutType: layoutType, outline: isOutlineCard }, item), item.title))) }) }, id)))] }), footer && !isDesktop && _jsx(SectionCatalogFooter, { items: footer, layoutType: layoutType })] }) })));
+}

package/dist/esm/components/SectionCatalog/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const GRID_CONFIG: {
+    desktop: {
+        amount: number;
+        minWidth: number;
+    };
+    tablet: {
+        amount: number;
+        minWidth: number;
+    };
+    mobile: {
+        amount: number;
+        minWidth: number;
+    };
+};

package/dist/esm/components/SectionCatalog/constants.js

@@ -0,0 +1,5 @@
+export const GRID_CONFIG = {
+    desktop: { amount: 3, minWidth: 280 },
+    tablet: { amount: 2, minWidth: 280 },
+    mobile: { amount: 2, minWidth: 280 },
+};

package/dist/esm/components/SectionCatalog/index.d.ts

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

package/dist/esm/components/SectionCatalog/index.js

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

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

@@ -0,0 +1,43 @@
+.sectionCatalog{
+  width:100%;
+  position:relative;
+}
+
+.body{
+  display:flex;
+  gap:32px;
+  width:100%;
+}
+[data-layout-type=tablet] .body{
+  flex-direction:column;
+  gap:32px;
+}
+[data-layout-type=mobile] .body{
+  flex-direction:column;
+  gap:24px;
+}
+
+.categoryList{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+}
+
+.tabContent{
+  width:100%;
+}
+
+.desktopTabs button{
+  text-wrap:auto;
+  text-align:left;
+  box-sizing:border-box;
+  padding-top:12px;
+  padding-bottom:12px;
+}
+
+.desktopCategoryList,
+.desktopTabs,
+.desktopTabs button{
+  max-width:280px;
+  flex-shrink:0;
+}

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

@@ -0,0 +1,3 @@
+import { CardClientProps, LimitedSectionCarouselProps } from '../../helperComponents';
+export type SectionClientsCarouselProps = Omit<LimitedSectionCarouselProps<CardClientProps>, 'description' | 'gap' | 'titleLink'>;
+export declare function SectionClientsCarousel({ items, ...props }: SectionClientsCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SectionClientsCarousel/SectionClientsCarousel.js

@@ -0,0 +1,21 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { CardClient, SectionCarousel } from '../../helperComponents';
+import { getCarouselProps } from './utils';
+export function SectionClientsCarousel(_a) {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const carouselProps = useMemo(() => getCarouselProps(props.layoutType), [props.layoutType]);
+    return (_jsx(SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: themeVars.dimension['1m'], children: items.map(item => (_jsx(CardClient, Object.assign({}, item), item.alt))) })));
+}

package/dist/esm/components/SectionClientsCarousel/index.d.ts

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

package/dist/esm/components/SectionClientsCarousel/index.js

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

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

@@ -0,0 +1,3 @@
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { SectionCarouselProps } from '../../helperComponents';
+export declare const getCarouselProps: (layoutType: LayoutType) => Pick<SectionCarouselProps, "itemMinWidth" | "maxItemsPerPage">;

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

@@ -0,0 +1,21 @@
+export const getCarouselProps = (layoutType) => {
+    switch (layoutType) {
+        case 'mobile':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 1,
+            };
+        case 'tablet':
+            return {
+                itemMinWidth: 270,
+                maxItemsPerPage: 2,
+            };
+        case 'desktop':
+        case 'desktopSmall':
+        default:
+            return {
+                itemMinWidth: 300,
+                maxItemsPerPage: 4,
+            };
+    }
+};

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

@@ -0,0 +1,21 @@
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { ButtonFilledProps } from '@snack-uikit/button';
+import { SectionTitleProps } from '../../helperComponents';
+import { MediaContentProps, SectionColor } from '../../types';
+export type SectionContentProps = WithSupportProps<WithLayoutType<{
+    /** id секции */
+    id?: string;
+    /** CSS-класс */
+    className?: string;
+    /** Заголовок */
+    title?: string;
+    /** Описание */
+    description?: string;
+    /** Кнопка действия */
+    button?: Omit<ButtonFilledProps, 'fullWidth' | 'size'>;
+    /** Цвет фона */
+    backgroundColor?: SectionColor;
+    /** Местоположение контента в секции */
+    contentPosition: 'left' | 'right';
+} & MediaContentProps & Pick<SectionTitleProps, 'titleTag'>>>;
+export declare function SectionContent({ id, title, description, button, className, layoutType, backgroundColor, contentPosition, image, video, onPlay, titleTag, 'data-test-id': dataTestId, ...rest }: SectionContentProps): import("react/jsx-runtime").JSX.Element;