@cloud-ru/uikit-product-site-section 0.27.1 → 0.28.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.28.0 (2026-01-12)
+
+
+### Features
+
+* **SITE-10270:** add graphite background for section basic ([be969ea](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/be969ea8936e9b8745a75ca72ecc27b7a0af3b4e))
+
+
+
+
+
+## 0.27.2 (2025-12-24)
+
+### Only dependencies have been changed
+* [@cloud-ru/uikit-product-site-cards@0.14.0](https://gitverse.ru/cloud-ru-tech/uikit-product/-/blob/master/packages/site-cards/CHANGELOG.md)
+
+
+
+
+
 ## 0.27.1 (2025-12-24)
 
 ### Only dependencies have been changed

package/README.md

@@ -17,7 +17,7 @@
 | expandedDefault | `string \| string[]` | - |  |
 | onExpandedChange | `((value?: string) => void) \| ((value?: string[]) => void)` | - |  |
 | id | `string` | - | id секции |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | outline | `boolean` | - | Внешний бордер для блоков |
 | className | `string` | - | CSS-класс |
 ## SectionBasic
@@ -36,7 +36,7 @@
 | tabBarItems | `TabBarItem[]` | - | Массив табов |
 | filterItems | `FieldSelectProps[]` | - | Массив фильтров |
 | pagination | `PaginationProps` | - | Настройки пагинации |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background1-level | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background1-level | Цвет фона |
 | className | `string` | - | CSS-класс |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
 ## SectionBenefits
@@ -50,7 +50,7 @@
 | id | `string` | - | id секции |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Название подзаголовка секции |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона секции |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона секции |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 | description | `string` | - | Описание секции |
@@ -69,7 +69,7 @@
 | titleTag | enum Tag: `"span"`, `"h1"`, `"h2"`, `"h3"`, `"h4"`, `"h5"`, `"h6"`, `"div"`, `"label"`, `"p"` | h3 | Тэг заголовка |
 | description | `string \| string[]` | - | Описание под баннером |
 | className | `string` | - | CSS класс |
-| backgroundSectionColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Фон подложки |
+| backgroundSectionColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Фон подложки |
 | appearance | "decor" \| "brand" \| "graphite" | brand |  |
 | color | enum ColorType: `"neutral"`, `"white"`, `"violet"`, `"blue"` | - |  |
 | backgroundType | "color" \| "image" | color |  |
@@ -89,8 +89,9 @@
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS - класснейм |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
+| appearance | "neutral" \| "invert" | - |  |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
 ## SectionCaseCarousel
@@ -107,8 +108,9 @@
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS - класснейм |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
+| appearance | "neutral" \| "invert" | - |  |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
 ## SectionCatalog
@@ -120,7 +122,7 @@
 | title* | `string` | - | Заголовок |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS-класс |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | selectedCategory | `string` | - | Выбранная категория продуктов |
 | onCategorySelect | `(category: string) => void` | - | Колбек смены выбранной категории продуктов |
 | footer | `FooterItem[]` | - | Список элементов для футера в каталоге |
@@ -138,8 +140,9 @@
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS - класснейм |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
+| appearance | "neutral" \| "invert" | - |  |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
 ## SectionContent
@@ -152,7 +155,7 @@
 | title | `string` | - | Заголовок |
 | description | `string` | - | Описание |
 | button | `Omit<ButtonFilledProps, "size" \| "fullWidth">` | - | Кнопка действия |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background1-level | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background1-level | Цвет фона |
 | contentPosition | "left" \| "right" | left | Местоположение контента в секции |
 | video | `ReactNode \| VideoPlayerProps` | - |  |
 | onPlay | `() => void` | - |  |
@@ -169,7 +172,7 @@
 | title | `string` | - | Заголовок |
 | description | `string` | - | Описание |
 | items | `Item[]` | - | Список элементов |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | contentPosition | "left" \| "right" | left | Местоположение контента в секции |
 | video | `ReactNode \| VideoPlayerProps` | - |  |
 | onPlay | `() => void` | - |  |
@@ -188,7 +191,7 @@
 | activeTab | `string` | - | Выбранная вкладок |
 | onActiveTabChange | `() => void` | - | колбэк на смену вкладки |
 | button | `Omit<ButtonFilledProps, "size" \| "fullWidth">` | - | Кнопка действия |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 ## SectionExpertsCarousel
 ### Props
@@ -204,8 +207,9 @@
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS - класснейм |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
+| appearance | "neutral" \| "invert" | - |  |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
 ## SectionLeading
@@ -218,7 +222,7 @@
 | description | `string` | - | Описание секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | m | Размер шрифтов заголовка и подзаголовка |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | id | `string` | - | id секции |
 | footerDescription | `string` | - | Описание секции |
@@ -238,8 +242,9 @@
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS - класснейм |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | moreButton | `{ label?: string; href?: string; onClick: MouseEventHandler<HTMLElement>; 'data-test-id'?: string; }` | - | Кнопка внизу секции |
+| appearance | "neutral" \| "invert" | - |  |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | infiniteScroll | `boolean` | false | Цикличная прокрутка |
 ## SectionMedia
@@ -251,7 +256,7 @@
 | description | `string` | - | Описание секции |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 | id | `string` | - | id секции |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | video | `ReactNode \| VideoPlayerProps` | - |  |
 | onPlay | `() => void` | - |  |
 | onError | `ReactEventHandler<HTMLVideoElement>` | - |  |
@@ -293,7 +298,7 @@
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
 | id | `string` | - | id секции |
 | className | `string` | - | CSS-класс |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Цвет фона |
 | gap | "s" \| "m" \| "l" \| "xs" | s | Размер отступов сетки |
 ## SectionTable
 ### Props
@@ -306,7 +311,7 @@
 | title | `string` | - | Заголовок |
 | subtitle | `string` | - | Подзаголовок |
 | description | `string` | - | Описание |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | - | Фон подложки |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | - | Фон подложки |
 | withHeader | `boolean` | - |  |
 ## SectionCarousel
 ### Props
@@ -324,8 +329,9 @@
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |
 | subtitleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег подзаголовка |
 | titleAlign | "left" \| "center" | - | Выравнивание текста |
+| appearance | "neutral" \| "invert" | - |  |
 | id | `string` | - | id секции |
-| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"` | neutral-background1-level | Цвет фона |
+| backgroundColor | enum SectionColor: `"neutral-background1-level"`, `"neutral-background"`, `"graphite-accent-default"` | neutral-background1-level | Цвет фона |
 | className | `string` | - | CSS - класснейм |
 | autoSwipe | `number` | 9 | Автоматическое переключение слайдов в секундах |
 | gap | `string` | var(--dimension-2m) | Расстояние между айтемами |

package/dist/cjs/components/SectionBasic/SectionBasic.js

@@ -28,6 +28,7 @@ const tabs_1 = require("@snack-uikit/tabs");
 const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_1 = require("./utils");
 const getInitialTab = (tabBarItems) => {
     if (!tabBarItems || tabBarItems.length < 1) {
         return undefined;
@@ -41,5 +42,5 @@ function SectionBasic(_a) {
     const [currentTab, setCurrentTab] = (0, react_1.useState)(getInitialTab(tabBarItems));
     const { t } = (0, uikit_product_locale_1.useLocale)('SiteSection');
     const showFooter = Boolean(pagination || moreButton);
-    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.wrapper), "data-section-background": backgroundColor }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionBasic, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, titleAlign: titleAlign, subtitle: subtitle, subtitleTag: subtitleTag }), (tabBarItems === null || tabBarItems === void 0 ? void 0 : tabBarItems.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sectionTabs, children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: currentTab, onChange: setCurrentTab, children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { children: tabBarItems.map(tabProps => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, Object.assign({}, tabProps), tabProps.value))) }) }) })), (filterItems === null || filterItems === void 0 ? void 0 : filterItems.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sectionFilters, "data-layout-type": layoutType, children: filterItems.map(filterProps => ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldSelect, Object.assign({}, filterProps, { className: (0, classnames_1.default)(filterProps.className, styles_module_scss_1.default.filter), layoutType: layoutType, size: 'l' }), filterProps.id))) })), children, showFooter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, "data-layout-type": layoutType, children: [pagination && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, Object.assign({}, pagination)), moreButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { className: styles_module_scss_1.default.showMoreButton, label: (_b = moreButton.label) !== null && _b !== void 0 ? _b : t('Basic.showMore'), onClick: moreButton.onClick, href: moreButton.href, "data-test-id": (_c = moreButton['data-test-id']) !== null && _c !== void 0 ? _c : 'section__more-btn', appearance: 'neutral', size: 'l', type: 'button', "data-layout-type": layoutType }))] }))] }) })));
+    return ((0, jsx_runtime_1.jsx)(uikit_product_site_layout_1.Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: (0, classnames_1.default)(className, styles_module_scss_1.default.wrapper), "data-section-background": backgroundColor }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionBasic, "data-layout-type": layoutType, children: [(0, jsx_runtime_1.jsx)(helperComponents_1.SectionTitle, { layoutType: layoutType, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, titleAlign: titleAlign, subtitle: subtitle, subtitleTag: subtitleTag, appearance: (0, utils_1.getAppearanceByBackground)(backgroundColor) }), (tabBarItems === null || tabBarItems === void 0 ? void 0 : tabBarItems.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sectionTabs, children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: currentTab, onChange: setCurrentTab, children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs.TabBar, { children: tabBarItems.map(tabProps => ((0, jsx_runtime_1.jsx)(tabs_1.Tabs.Tab, Object.assign({}, tabProps), tabProps.value))) }) }) })), (filterItems === null || filterItems === void 0 ? void 0 : filterItems.length) && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.sectionFilters, "data-layout-type": layoutType, children: filterItems.map(filterProps => ((0, jsx_runtime_1.jsx)(uikit_product_mobile_fields_1.AdaptiveFieldSelect, Object.assign({}, filterProps, { className: (0, classnames_1.default)(filterProps.className, styles_module_scss_1.default.filter), layoutType: layoutType, size: 'l' }), filterProps.id))) })), children, showFooter && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.footer, "data-layout-type": layoutType, children: [pagination && (0, jsx_runtime_1.jsx)(pagination_1.Pagination, Object.assign({}, pagination)), moreButton && ((0, jsx_runtime_1.jsx)(button_1.ButtonOutline, { className: styles_module_scss_1.default.showMoreButton, label: (_b = moreButton.label) !== null && _b !== void 0 ? _b : t('Basic.showMore'), onClick: moreButton.onClick, href: moreButton.href, "data-test-id": (_c = moreButton['data-test-id']) !== null && _c !== void 0 ? _c : 'section__more-btn', appearance: 'neutral', size: 'l', type: 'button', "data-layout-type": layoutType }))] }))] }) })));
 }

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

@@ -13,13 +13,6 @@
   padding:var(--dimension-4m, 32px) 0;
 }
 
-.wrapper[data-section-background=neutral-background1-level]{
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.wrapper[data-section-background=neutral-background]{
-  background-color:var(--sys-neutral-background, #eeeff3);
-}
-
 .sectionTitle{
   display:flex;
   flex-direction:column;
@@ -31,7 +24,7 @@
 }
 
 .description{
-  color:var(--sys-neutral-text-support, #6d707f);
+  color:var(--sys-neutral-text-support, #656774);
 }
 
 .sectionTabs{
@@ -68,4 +61,23 @@
 
 .showMoreButton[data-layout-type=mobile]{
   width:100%;
+}
+
+.wrapper{
+  border-radius:var(--dimension-050m, 4px);
+}
+.wrapper[data-section-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.wrapper[data-section-background=neutral-background]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.wrapper[data-section-background=graphite-accent-default]{
+  background-color:var(--sys-graphite-accent-default, #222222);
+}
+.wrapper[data-section-background=graphite-accent-default] .title,
+.wrapper[data-section-background=graphite-accent-default] .sectionTitle,
+.wrapper[data-section-background=graphite-accent-default] .description,
+.wrapper[data-section-background=graphite-accent-default] .sectionTabs{
+  color:var(--sys-graphite-on-accent, #ffffff);
 }

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

@@ -0,0 +1,2 @@
+import { SectionColor } from '../../types';
+export declare const getAppearanceByBackground: (backgroundColor: SectionColor) => "neutral" | "invert";

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAppearanceByBackground = void 0;
+const constants_1 = require("../../constants");
+const getAppearanceByBackground = (backgroundColor) => backgroundColor === constants_1.SECTION_COLORS.GraphiteAccentDefault ? 'invert' : 'neutral';
+exports.getAppearanceByBackground = getAppearanceByBackground;

package/dist/cjs/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SECTION_COLORS: {
     readonly NeutralBackground1Level: "neutral-background1-level";
     readonly NeutralBackground: "neutral-background";
+    readonly GraphiteAccentDefault: "graphite-accent-default";
 };

package/dist/cjs/constants.js

@@ -4,4 +4,5 @@ exports.SECTION_COLORS = void 0;
 exports.SECTION_COLORS = {
     NeutralBackground1Level: 'neutral-background1-level',
     NeutralBackground: 'neutral-background',
+    GraphiteAccentDefault: 'graphite-accent-default',
 };

package/dist/cjs/helperComponents/SectionTitle/SectionTitle.d.ts

@@ -18,5 +18,6 @@ export type SectionTitleProps = WithLayoutType<{
     subtitleTag?: SectionTag;
     /** Выравнивание текста */
     titleAlign?: 'left' | 'center';
+    appearance?: 'neutral' | 'invert';
 }>;
-export declare function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize, titleTag, subtitleTag, layoutType, titleAlign, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize, titleTag, subtitleTag, layoutType, titleAlign, appearance, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/SectionTitle/SectionTitle.js

@@ -11,7 +11,7 @@ const link_1 = require("@snack-uikit/link");
 const typography_1 = require("@snack-uikit/typography");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
-function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize = 'm', titleTag = 'h2', subtitleTag = 'h3', layoutType, titleAlign = 'left', }) {
+function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize = 'm', titleTag = 'h2', subtitleTag = 'h3', layoutType, titleAlign = 'left', appearance, }) {
     const titleProps = (0, react_1.useMemo)(() => (0, utils_1.getTitleTypographyProps)({ titleSectionSize, layoutType }), [layoutType, titleSectionSize]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (title || description) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionTitle, "data-align": titleAlign, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titlesWrapper, "data-align": titleAlign, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, titleProps, { tag: titleTag, className: styles_module_scss_1.default.title, children: titleLink ? (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, titleLink, titleProps, { text: title })) : (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }))), subtitle && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { family: 'sans', purpose: 'label', size: 'l', tag: subtitleTag, className: styles_module_scss_1.default.subtitle, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: subtitle }) }))] }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (title || description) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.sectionTitle, "data-align": titleAlign, "data-text-color": appearance, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.titlesWrapper, "data-align": titleAlign, children: [title && ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ family: 'sans' }, titleProps, { tag: titleTag, className: styles_module_scss_1.default.title, children: titleLink ? (0, jsx_runtime_1.jsx)(link_1.Link, Object.assign({}, titleLink, titleProps, { text: title })) : (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: title }) }))), subtitle && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansLabelL, { tag: subtitleTag, className: styles_module_scss_1.default.subtitle, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: subtitle }) }))] }), description && ((0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyL, { className: styles_module_scss_1.default.description, children: (0, jsx_runtime_1.jsx)(uikit_product_site_rich_text_1.RichText, { richText: description }) }))] })) }));
 }

package/dist/cjs/helperComponents/SectionTitle/styles.module.css

@@ -9,10 +9,6 @@
   text-align:center;
 }
 
-.sectionTitle{
-  flex-direction:column;
-}
-
 .titlesWrapper{
   flex-direction:column-reverse;
 }
@@ -27,5 +23,16 @@
 }
 
 .description{
-  color:var(--sys-neutral-text-support, #6d707f);
+  color:var(--sys-neutral-text-support, #656774);
+}
+
+.sectionTitle{
+  flex-direction:column;
+}
+.sectionTitle[data-text-color=invert] .title,
+.sectionTitle[data-text-color=invert] .description{
+  color:var(--sys-graphite-on-accent, #ffffff);
+}
+.sectionTitle[data-text-color=invert] .subtitle{
+  color:var(--sys-graphite-text-disabled, #a3a3a3);
 }

package/dist/esm/components/SectionBasic/SectionBasic.js

@@ -22,6 +22,7 @@ import { Tabs } from '@snack-uikit/tabs';
 import { SECTION_COLORS } from '../../constants';
 import { SectionTitle } from '../../helperComponents';
 import styles from './styles.module.css';
+import { getAppearanceByBackground } from './utils';
 const getInitialTab = (tabBarItems) => {
     if (!tabBarItems || tabBarItems.length < 1) {
         return undefined;
@@ -35,5 +36,5 @@ export function SectionBasic(_a) {
     const [currentTab, setCurrentTab] = useState(getInitialTab(tabBarItems));
     const { t } = useLocale('SiteSection');
     const showFooter = Boolean(pagination || moreButton);
-    return (_jsx(Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: cn(className, styles.wrapper), "data-section-background": backgroundColor }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.sectionBasic, "data-layout-type": layoutType, children: [_jsx(SectionTitle, { layoutType: layoutType, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, titleAlign: titleAlign, subtitle: subtitle, subtitleTag: subtitleTag }), (tabBarItems === null || tabBarItems === void 0 ? void 0 : tabBarItems.length) && (_jsx("div", { className: styles.sectionTabs, children: _jsx(Tabs, { value: currentTab, onChange: setCurrentTab, children: _jsx(Tabs.TabBar, { children: tabBarItems.map(tabProps => (_jsx(Tabs.Tab, Object.assign({}, tabProps), tabProps.value))) }) }) })), (filterItems === null || filterItems === void 0 ? void 0 : filterItems.length) && (_jsx("div", { className: styles.sectionFilters, "data-layout-type": layoutType, children: filterItems.map(filterProps => (_jsx(AdaptiveFieldSelect, Object.assign({}, filterProps, { className: cn(filterProps.className, styles.filter), layoutType: layoutType, size: 'l' }), filterProps.id))) })), children, showFooter && (_jsxs("div", { className: styles.footer, "data-layout-type": layoutType, children: [pagination && _jsx(Pagination, Object.assign({}, pagination)), moreButton && (_jsx(ButtonOutline, { className: styles.showMoreButton, label: (_b = moreButton.label) !== null && _b !== void 0 ? _b : t('Basic.showMore'), onClick: moreButton.onClick, href: moreButton.href, "data-test-id": (_c = moreButton['data-test-id']) !== null && _c !== void 0 ? _c : 'section__more-btn', appearance: 'neutral', size: 'l', type: 'button', "data-layout-type": layoutType }))] }))] }) })));
+    return (_jsx(Layout.SectionWrapper, Object.assign({ id: id, layoutType: layoutType, className: cn(className, styles.wrapper), "data-section-background": backgroundColor }, extractSupportProps(rest), { children: _jsxs("div", { className: styles.sectionBasic, "data-layout-type": layoutType, children: [_jsx(SectionTitle, { layoutType: layoutType, title: title, description: description, titleSectionSize: titleSectionSize, titleTag: titleTag, titleAlign: titleAlign, subtitle: subtitle, subtitleTag: subtitleTag, appearance: getAppearanceByBackground(backgroundColor) }), (tabBarItems === null || tabBarItems === void 0 ? void 0 : tabBarItems.length) && (_jsx("div", { className: styles.sectionTabs, children: _jsx(Tabs, { value: currentTab, onChange: setCurrentTab, children: _jsx(Tabs.TabBar, { children: tabBarItems.map(tabProps => (_jsx(Tabs.Tab, Object.assign({}, tabProps), tabProps.value))) }) }) })), (filterItems === null || filterItems === void 0 ? void 0 : filterItems.length) && (_jsx("div", { className: styles.sectionFilters, "data-layout-type": layoutType, children: filterItems.map(filterProps => (_jsx(AdaptiveFieldSelect, Object.assign({}, filterProps, { className: cn(filterProps.className, styles.filter), layoutType: layoutType, size: 'l' }), filterProps.id))) })), children, showFooter && (_jsxs("div", { className: styles.footer, "data-layout-type": layoutType, children: [pagination && _jsx(Pagination, Object.assign({}, pagination)), moreButton && (_jsx(ButtonOutline, { className: styles.showMoreButton, label: (_b = moreButton.label) !== null && _b !== void 0 ? _b : t('Basic.showMore'), onClick: moreButton.onClick, href: moreButton.href, "data-test-id": (_c = moreButton['data-test-id']) !== null && _c !== void 0 ? _c : 'section__more-btn', appearance: 'neutral', size: 'l', type: 'button', "data-layout-type": layoutType }))] }))] }) })));
 }

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

@@ -13,13 +13,6 @@
   padding:var(--dimension-4m, 32px) 0;
 }
 
-.wrapper[data-section-background=neutral-background1-level]{
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-}
-.wrapper[data-section-background=neutral-background]{
-  background-color:var(--sys-neutral-background, #eeeff3);
-}
-
 .sectionTitle{
   display:flex;
   flex-direction:column;
@@ -31,7 +24,7 @@
 }
 
 .description{
-  color:var(--sys-neutral-text-support, #6d707f);
+  color:var(--sys-neutral-text-support, #656774);
 }
 
 .sectionTabs{
@@ -68,4 +61,23 @@
 
 .showMoreButton[data-layout-type=mobile]{
   width:100%;
+}
+
+.wrapper{
+  border-radius:var(--dimension-050m, 4px);
+}
+.wrapper[data-section-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.wrapper[data-section-background=neutral-background]{
+  background-color:var(--sys-neutral-background, #eeeff3);
+}
+.wrapper[data-section-background=graphite-accent-default]{
+  background-color:var(--sys-graphite-accent-default, #222222);
+}
+.wrapper[data-section-background=graphite-accent-default] .title,
+.wrapper[data-section-background=graphite-accent-default] .sectionTitle,
+.wrapper[data-section-background=graphite-accent-default] .description,
+.wrapper[data-section-background=graphite-accent-default] .sectionTabs{
+  color:var(--sys-graphite-on-accent, #ffffff);
 }

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

@@ -0,0 +1,2 @@
+import { SectionColor } from '../../types';
+export declare const getAppearanceByBackground: (backgroundColor: SectionColor) => "neutral" | "invert";

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

@@ -0,0 +1,2 @@
+import { SECTION_COLORS } from '../../constants';
+export const getAppearanceByBackground = (backgroundColor) => backgroundColor === SECTION_COLORS.GraphiteAccentDefault ? 'invert' : 'neutral';

package/dist/esm/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SECTION_COLORS: {
     readonly NeutralBackground1Level: "neutral-background1-level";
     readonly NeutralBackground: "neutral-background";
+    readonly GraphiteAccentDefault: "graphite-accent-default";
 };

package/dist/esm/constants.js

@@ -1,4 +1,5 @@
 export const SECTION_COLORS = {
     NeutralBackground1Level: 'neutral-background1-level',
     NeutralBackground: 'neutral-background',
+    GraphiteAccentDefault: 'graphite-accent-default',
 };

package/dist/esm/helperComponents/SectionTitle/SectionTitle.d.ts

@@ -18,5 +18,6 @@ export type SectionTitleProps = WithLayoutType<{
     subtitleTag?: SectionTag;
     /** Выравнивание текста */
     titleAlign?: 'left' | 'center';
+    appearance?: 'neutral' | 'invert';
 }>;
-export declare function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize, titleTag, subtitleTag, layoutType, titleAlign, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize, titleTag, subtitleTag, layoutType, titleAlign, appearance, }: SectionTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/SectionTitle/SectionTitle.js

@@ -5,7 +5,7 @@ import { Link } from '@snack-uikit/link';
 import { Typography } from '@snack-uikit/typography';
 import styles from './styles.module.css';
 import { getTitleTypographyProps } from './utils';
-export function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize = 'm', titleTag = 'h2', subtitleTag = 'h3', layoutType, titleAlign = 'left', }) {
+export function SectionTitle({ title, subtitle, titleLink, description, titleSectionSize = 'm', titleTag = 'h2', subtitleTag = 'h3', layoutType, titleAlign = 'left', appearance, }) {
     const titleProps = useMemo(() => getTitleTypographyProps({ titleSectionSize, layoutType }), [layoutType, titleSectionSize]);
-    return (_jsx(_Fragment, { children: (title || description) && (_jsxs("div", { className: styles.sectionTitle, "data-align": titleAlign, children: [_jsxs("div", { className: styles.titlesWrapper, "data-align": titleAlign, children: [title && (_jsx(Typography, Object.assign({ family: 'sans' }, titleProps, { tag: titleTag, className: styles.title, children: titleLink ? _jsx(Link, Object.assign({}, titleLink, titleProps, { text: title })) : _jsx(RichText, { richText: title }) }))), subtitle && (_jsx(Typography, { family: 'sans', purpose: 'label', size: 'l', tag: subtitleTag, className: styles.subtitle, children: _jsx(RichText, { richText: subtitle }) }))] }), description && (_jsx(Typography.SansBodyL, { className: styles.description, children: _jsx(RichText, { richText: description }) }))] })) }));
+    return (_jsx(_Fragment, { children: (title || description) && (_jsxs("div", { className: styles.sectionTitle, "data-align": titleAlign, "data-text-color": appearance, children: [_jsxs("div", { className: styles.titlesWrapper, "data-align": titleAlign, children: [title && (_jsx(Typography, Object.assign({ family: 'sans' }, titleProps, { tag: titleTag, className: styles.title, children: titleLink ? _jsx(Link, Object.assign({}, titleLink, titleProps, { text: title })) : _jsx(RichText, { richText: title }) }))), subtitle && (_jsx(Typography.SansLabelL, { tag: subtitleTag, className: styles.subtitle, children: _jsx(RichText, { richText: subtitle }) }))] }), description && (_jsx(Typography.SansBodyL, { className: styles.description, children: _jsx(RichText, { richText: description }) }))] })) }));
 }

package/dist/esm/helperComponents/SectionTitle/styles.module.css

@@ -9,10 +9,6 @@
   text-align:center;
 }
 
-.sectionTitle{
-  flex-direction:column;
-}
-
 .titlesWrapper{
   flex-direction:column-reverse;
 }
@@ -27,5 +23,16 @@
 }
 
 .description{
-  color:var(--sys-neutral-text-support, #6d707f);
+  color:var(--sys-neutral-text-support, #656774);
+}
+
+.sectionTitle{
+  flex-direction:column;
+}
+.sectionTitle[data-text-color=invert] .title,
+.sectionTitle[data-text-color=invert] .description{
+  color:var(--sys-graphite-on-accent, #ffffff);
+}
+.sectionTitle[data-text-color=invert] .subtitle{
+  color:var(--sys-graphite-text-disabled, #a3a3a3);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "0.27.1",
+  "version": "0.28.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@cloud-ru/uikit-product-icons": "16.1.1",
     "@cloud-ru/uikit-product-mobile-fields": "0.12.4",
-    "@cloud-ru/uikit-product-site-cards": "0.13.0",
+    "@cloud-ru/uikit-product-site-cards": "0.14.0",
     "@cloud-ru/uikit-product-site-case-card": "0.5.1",
     "@cloud-ru/uikit-product-site-grid": "0.1.10",
     "@cloud-ru/uikit-product-site-layout": "0.5.2",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "629fe2bd96a28ea24b60a04c913fbbe453d104b7"
+  "gitHead": "261f5170723ff343e64bb472677c4b0cce7dbefc"
 }

package/src/components/SectionBasic/SectionBasic.tsx

@@ -13,6 +13,7 @@ import { SECTION_COLORS } from '../../constants';
 import { SectionTitle, SectionTitleProps } from '../../helperComponents';
 import { SectionColor } from '../../types';
 import styles from './styles.module.scss';
+import { getAppearanceByBackground } from './utils';
 
 type TabBarItem = WithSupportProps<{
   value: string;
@@ -103,6 +104,7 @@ export function SectionBasic({
           titleAlign={titleAlign}
           subtitle={subtitle}
           subtitleTag={subtitleTag}
+          appearance={getAppearanceByBackground(backgroundColor)}
         />
 
         {tabBarItems?.length && (

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

@@ -1,4 +1,4 @@
-@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
 
 .sectionBasic {
   display: flex;
@@ -18,16 +18,6 @@
   }
 }
 
-.wrapper {
-  &[data-section-background='neutral-background1-level'] {
-    background-color: var.$sys-neutral-background1-level;
-  }
-
-  &[data-section-background='neutral-background'] {
-    background-color: var.$sys-neutral-background;
-  }
-}
-
 .sectionTitle {
   display: flex;
   flex-direction: column;
@@ -84,3 +74,26 @@
     width: 100%;
   }
 }
+
+.wrapper {
+  &[data-section-background='neutral-background1-level'] {
+    background-color: var.$sys-neutral-background1-level;
+  }
+
+  &[data-section-background='neutral-background'] {
+    background-color: var.$sys-neutral-background;
+  }
+
+  &[data-section-background='graphite-accent-default'] {
+    background-color: var.$sys-graphite-accent-default;
+
+    .title,
+    .sectionTitle,
+    .description,
+    .sectionTabs {
+      color: var.$sys-graphite-on-accent;
+    }
+  }
+
+  border-radius: var.$dimension-050m;
+}

package/src/components/SectionBasic/utils.ts

@@ -0,0 +1,5 @@
+import { SECTION_COLORS } from '../../constants';
+import { SectionColor } from '../../types';
+
+export const getAppearanceByBackground = (backgroundColor: SectionColor): 'neutral' | 'invert' =>
+  backgroundColor === SECTION_COLORS.GraphiteAccentDefault ? 'invert' : 'neutral';

package/src/constants.ts

@@ -1,4 +1,5 @@
 export const SECTION_COLORS = {
   NeutralBackground1Level: 'neutral-background1-level',
   NeutralBackground: 'neutral-background',
+  GraphiteAccentDefault: 'graphite-accent-default',
 } as const;

package/src/helperComponents/SectionTitle/SectionTitle.tsx

@@ -26,6 +26,7 @@ export type SectionTitleProps = WithLayoutType<{
   subtitleTag?: SectionTag;
   /** Выравнивание текста */
   titleAlign?: 'left' | 'center';
+  appearance?: 'neutral' | 'invert';
 }>;
 
 export function SectionTitle({
@@ -38,6 +39,7 @@ export function SectionTitle({
   subtitleTag = 'h3',
   layoutType,
   titleAlign = 'left',
+  appearance,
 }: SectionTitleProps) {
   const titleProps = useMemo(
     () => getTitleTypographyProps({ titleSectionSize, layoutType }),
@@ -47,7 +49,7 @@ export function SectionTitle({
   return (
     <>
       {(title || description) && (
-        <div className={styles.sectionTitle} data-align={titleAlign}>
+        <div className={styles.sectionTitle} data-align={titleAlign} data-text-color={appearance}>
           <div className={styles.titlesWrapper} data-align={titleAlign}>
             {title && (
               <Typography family='sans' {...titleProps} tag={titleTag} className={styles.title}>
@@ -55,9 +57,9 @@ export function SectionTitle({
               </Typography>
             )}
             {subtitle && (
-              <Typography family='sans' purpose='label' size='l' tag={subtitleTag} className={styles.subtitle}>
+              <Typography.SansLabelL tag={subtitleTag} className={styles.subtitle}>
                 <RichText richText={subtitle} />
-              </Typography>
+              </Typography.SansLabelL>
             )}
           </div>
           {description && (

package/src/helperComponents/SectionTitle/styles.module.scss

@@ -1,4 +1,4 @@
-@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as var;
 
 .sectionTitle,
 .titlesWrapper {
@@ -11,10 +11,6 @@
   }
 }
 
-.sectionTitle {
-  flex-direction: column;
-}
-
 .titlesWrapper {
   flex-direction: column-reverse;
 }
@@ -31,3 +27,18 @@
 .description {
   color: var.$sys-neutral-text-support;
 }
+
+.sectionTitle {
+  flex-direction: column;
+
+  &[data-text-color='invert'] {
+    .title,
+    .description {
+      color: var.$sys-graphite-on-accent;
+    }
+
+    .subtitle {
+      color: var.$sys-graphite-text-disabled;
+    }
+  }
+}