@cloud-ru/uikit-product-site-section 1.7.2 → 1.7.3-preview-60bc6ea0.0

package/README.md

@@ -327,7 +327,7 @@
 | layoutType* | enum LayoutType: `"mobile"`, `"tablet"`, `"desktop"`, `"desktopSmall"` | - |  |
 | title | `string` | - | Название секции |
 | subtitle | `string` | - | Подзаголовок секции |
-| titleLink | `PickLinkProps<(<T extends ElementType = "a">({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, as, ...rest }: LinkProps<T>) => Element), "onClick" \| "appearance" \| "href" \| "target" \| "textMode">` | - | Ссылка в названии |
+| titleLink | `PickLinkProps<(<T extends ElementType = "a">({ text, className, textMode, size, purpose, appearance, insideText, truncateVariant, truncateMaxLines, as, ...rest }: LinkProps<T>) => Element), "onClick" \| "appearance" \| "href" \| "target" \| "textMode">` | - | Ссылка в названии |
 | description | `string` | - | Описание секции |
 | titleSectionSize | enum Size: `"s"`, `"m"`, `"l"` | - | Размер шрифтов заголовка и подзаголовка |
 | titleTag | enum SectionTag: `"h2"`, `"h3"`, `"h4"` | - | Тег заголовка |

package/dist/cjs/components/SectionClientsCarousel/SectionClientsCarousel.js

@@ -15,10 +15,11 @@ exports.SectionClientsCarousel = SectionClientsCarousel;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const figma_tokens_1 = require("@snack-uikit/figma-tokens");
+const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
 const utils_1 = require("./utils");
 function SectionClientsCarousel(_a) {
     var { items } = _a, props = __rest(_a, ["items"]);
     const carouselProps = (0, react_1.useMemo)(() => (0, utils_1.getCarouselProps)(props.layoutType), [props.layoutType]);
-    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: figma_tokens_1.themeVars.dimension['025m'], children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardClient, Object.assign({}, item), item.alt))) })));
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: figma_tokens_1.themeVars.dimension['025m'], children: items.map(item => ((0, jsx_runtime_1.jsx)(helperComponents_1.CardClient, Object.assign({}, item, { backgroundColor: props.backgroundColor && constants_1.SECTION_COLORS_INVERTED[props.backgroundColor] }), item.alt))) })));
 }

package/dist/cjs/constants.d.ts

@@ -1,5 +1,7 @@
+import { SectionColor } from './types';
 export declare const SECTION_COLORS: {
     readonly NeutralBackground1Level: "neutral-background1-level";
     readonly NeutralBackground: "neutral-background";
     readonly GraphiteAccentDefault: "graphite-accent-default";
 };
+export declare const SECTION_COLORS_INVERTED: Record<SectionColor, SectionColor>;

package/dist/cjs/constants.js

@@ -1,8 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SECTION_COLORS = void 0;
+exports.SECTION_COLORS_INVERTED = exports.SECTION_COLORS = void 0;
 exports.SECTION_COLORS = {
     NeutralBackground1Level: 'neutral-background1-level',
     NeutralBackground: 'neutral-background',
     GraphiteAccentDefault: 'graphite-accent-default',
 };
+exports.SECTION_COLORS_INVERTED = {
+    [exports.SECTION_COLORS.NeutralBackground]: exports.SECTION_COLORS.NeutralBackground1Level,
+    [exports.SECTION_COLORS.NeutralBackground1Level]: exports.SECTION_COLORS.NeutralBackground,
+    [exports.SECTION_COLORS.GraphiteAccentDefault]: exports.SECTION_COLORS.NeutralBackground1Level,
+};

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

@@ -1,5 +1,7 @@
+import { SectionColor } from '../../../src/types';
 export type CardClientProps = {
     img: string;
     alt: string;
+    backgroundColor?: SectionColor;
 };
-export declare function CardClient({ img, alt }: CardClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardClient({ img, alt, backgroundColor }: CardClientProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/CardClient/CardClient.js

@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardClient = CardClient;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function CardClient({ img, alt }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardClient, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageBackground }), (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: img, alt: alt })] }));
+function CardClient({ img, alt, backgroundColor = 'neutral-background' }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardClient, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.imageBackground, "data-background": backgroundColor }), (0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.image, src: img, alt: alt })] }));
 }

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

@@ -11,6 +11,11 @@
   position:absolute;
   width:100%;
   height:100%;
+}
+.imageBackground[data-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.imageBackground[data-background=neutral-background]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 

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

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { themeVars } from '@snack-uikit/figma-tokens';
+import { SECTION_COLORS_INVERTED } from '../../constants';
 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['025m'], children: items.map(item => (_jsx(CardClient, Object.assign({}, item), item.alt))) })));
+    return (_jsx(SectionCarousel, Object.assign({ autoSwipe: 0 }, props, carouselProps, { gap: themeVars.dimension['025m'], children: items.map(item => (_jsx(CardClient, Object.assign({}, item, { backgroundColor: props.backgroundColor && SECTION_COLORS_INVERTED[props.backgroundColor] }), item.alt))) })));
 }

package/dist/esm/constants.d.ts

@@ -1,5 +1,7 @@
+import { SectionColor } from './types';
 export declare const SECTION_COLORS: {
     readonly NeutralBackground1Level: "neutral-background1-level";
     readonly NeutralBackground: "neutral-background";
     readonly GraphiteAccentDefault: "graphite-accent-default";
 };
+export declare const SECTION_COLORS_INVERTED: Record<SectionColor, SectionColor>;

package/dist/esm/constants.js

@@ -3,3 +3,8 @@ export const SECTION_COLORS = {
     NeutralBackground: 'neutral-background',
     GraphiteAccentDefault: 'graphite-accent-default',
 };
+export const SECTION_COLORS_INVERTED = {
+    [SECTION_COLORS.NeutralBackground]: SECTION_COLORS.NeutralBackground1Level,
+    [SECTION_COLORS.NeutralBackground1Level]: SECTION_COLORS.NeutralBackground,
+    [SECTION_COLORS.GraphiteAccentDefault]: SECTION_COLORS.NeutralBackground1Level,
+};

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

@@ -1,5 +1,7 @@
+import { SectionColor } from '../../../src/types';
 export type CardClientProps = {
     img: string;
     alt: string;
+    backgroundColor?: SectionColor;
 };
-export declare function CardClient({ img, alt }: CardClientProps): import("react/jsx-runtime").JSX.Element;
+export declare function CardClient({ img, alt, backgroundColor }: CardClientProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/CardClient/CardClient.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './styles.module.css';
-export function CardClient({ img, alt }) {
-    return (_jsxs("div", { className: styles.cardClient, children: [_jsx("div", { className: styles.imageBackground }), _jsx("img", { className: styles.image, src: img, alt: alt })] }));
+export function CardClient({ img, alt, backgroundColor = 'neutral-background' }) {
+    return (_jsxs("div", { className: styles.cardClient, children: [_jsx("div", { className: styles.imageBackground, "data-background": backgroundColor }), _jsx("img", { className: styles.image, src: img, alt: alt })] }));
 }

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

@@ -11,6 +11,11 @@
   position:absolute;
   width:100%;
   height:100%;
+}
+.imageBackground[data-background=neutral-background1-level]{
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+}
+.imageBackground[data-background=neutral-background]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-section",
   "title": "Site Section",
-  "version": "1.7.2",
+  "version": "1.7.3-preview-60bc6ea0.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -67,5 +67,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "4075376759ae1159670bc2dfd59aca3a9bf9de65"
+  "gitHead": "9eb320b64114557b5e4f1b83cab58ea971fddcce"
 }

package/src/components/SectionClientsCarousel/SectionClientsCarousel.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { themeVars } from '@snack-uikit/figma-tokens';
 
+import { SECTION_COLORS_INVERTED } from '../../constants';
 import { CardClient, CardClientProps, LimitedSectionCarouselProps, SectionCarousel } from '../../helperComponents';
 import { getCarouselProps } from './utils';
 
@@ -16,7 +17,11 @@ export function SectionClientsCarousel({ items, ...props }: SectionClientsCarous
   return (
     <SectionCarousel autoSwipe={0} {...props} {...carouselProps} gap={themeVars.dimension['025m']}>
       {items.map(item => (
-        <CardClient key={item.alt} {...item} />
+        <CardClient
+          key={item.alt}
+          {...item}
+          backgroundColor={props.backgroundColor && SECTION_COLORS_INVERTED[props.backgroundColor]}
+        />
       ))}
     </SectionCarousel>
   );

package/src/constants.ts

@@ -1,5 +1,13 @@
+import { SectionColor } from './types';
+
 export const SECTION_COLORS = {
   NeutralBackground1Level: 'neutral-background1-level',
   NeutralBackground: 'neutral-background',
   GraphiteAccentDefault: 'graphite-accent-default',
 } as const;
+
+export const SECTION_COLORS_INVERTED: Record<SectionColor, SectionColor> = {
+  [SECTION_COLORS.NeutralBackground]: SECTION_COLORS.NeutralBackground1Level,
+  [SECTION_COLORS.NeutralBackground1Level]: SECTION_COLORS.NeutralBackground,
+  [SECTION_COLORS.GraphiteAccentDefault]: SECTION_COLORS.NeutralBackground1Level,
+};

package/src/helperComponents/CardClient/CardClient.tsx

@@ -1,14 +1,16 @@
+import { SectionColor } from '../../../src/types';
 import styles from './styles.module.scss';
 
 export type CardClientProps = {
   img: string;
   alt: string;
+  backgroundColor?: SectionColor;
 };
 
-export function CardClient({ img, alt }: CardClientProps) {
+export function CardClient({ img, alt, backgroundColor = 'neutral-background' }: CardClientProps) {
   return (
     <div className={styles.cardClient}>
-      <div className={styles.imageBackground} />
+      <div className={styles.imageBackground} data-background={backgroundColor} />
       <img className={styles.image} src={img} alt={alt} />
     </div>
   );

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

@@ -13,7 +13,14 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background-color: var.$sys-neutral-background;
+
+  &[data-background='neutral-background1-level'] {
+    background-color: var.$sys-neutral-background1-level;
+  }
+
+  &[data-background='neutral-background'] {
+    background-color: var.$sys-neutral-background;
+  }
 }
 
 .image {

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

@@ -1,8 +1,5 @@
-@use '@cloud-ru/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
-
 .sectionCarousel {
   width: 100%;
-
   display: flex;
   flex-direction: column;
 }