@cloud-ru/uikit-product-site-layout 0.2.7 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.4.0 (2025-12-04)
+
+
+### Features
+
+* **SITE-10318:** edit layout styles ([d4db088](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/d4db088946220586887d3ea7fd2bfe6cf7fc6bd0))
+
+
+
+
+
+# 0.3.0 (2025-12-03)
+
+
+### Features
+
+* **SITE-10318:** edit layout content wrapper style ([174419a](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/174419a9bfa32f8c16aa6765f809dc8c4946ea8e))
+
+
+
+
+
 ## 0.2.7 (2025-11-24)
 
 ### Only dependencies have been changed

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
-export type MainProps = WithSupportProps<{
+import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+export type MainProps = WithSupportProps<WithLayoutType<{
     children: ReactNode;
     className?: string;
-}>;
-export declare function Main({ children, className, ...rest }: MainProps): import("react/jsx-runtime").JSX.Element;
+}>>;
+export declare function Main({ children, className, layoutType, ...rest }: MainProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Main/Main.js

@@ -20,6 +20,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const uikit_product_utils_1 = require("@cloud-ru/uikit-product-utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Main(_a) {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return ((0, jsx_runtime_1.jsx)("main", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.main, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: children })));
+    var { children, className, layoutType } = _a, rest = __rest(_a, ["children", "className", "layoutType"]);
+    return ((0, jsx_runtime_1.jsx)("main", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.main, className) }, (0, uikit_product_utils_1.extractSupportProps)(rest), { children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.mainContent, "data-layout-type": layoutType, children: children }) })));
 }

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

@@ -2,4 +2,24 @@
   display:flex;
   flex:1;
   flex-direction:inherit;
+  background:var(--sys-neutral-background, #eeeff3);
+}
+
+.mainContent{
+  margin:0 auto;
+  width:100%;
+  max-width:1440px;
+  min-width:0;
+  box-sizing:border-box;
+}
+.mainContent[data-layout-type=desktop], .mainContent[data-layout-type=desktopSmall]{
+  padding:0 var(--dimension-2m, 16px);
+}
+.mainContent[data-layout-type=tablet]{
+  max-width:unset;
+  padding:0 var(--dimension-2m, 16px);
+}
+.mainContent[data-layout-type=mobile]{
+  max-width:unset;
+  padding:0;
 }

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

@@ -12,5 +12,5 @@ export declare const SectionWrapper: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     className?: string;
 } & {
-    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
 } & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
-export type MainProps = WithSupportProps<{
+import { WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+export type MainProps = WithSupportProps<WithLayoutType<{
     children: ReactNode;
     className?: string;
-}>;
-export declare function Main({ children, className, ...rest }: MainProps): import("react/jsx-runtime").JSX.Element;
+}>>;
+export declare function Main({ children, className, layoutType, ...rest }: MainProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Main/Main.js

@@ -14,6 +14,6 @@ import cn from 'classnames';
 import { extractSupportProps } from '@cloud-ru/uikit-product-utils';
 import styles from './styles.module.css';
 export function Main(_a) {
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (_jsx("main", Object.assign({ className: cn(styles.main, className) }, extractSupportProps(rest), { children: children })));
+    var { children, className, layoutType } = _a, rest = __rest(_a, ["children", "className", "layoutType"]);
+    return (_jsx("main", Object.assign({ className: cn(styles.main, className) }, extractSupportProps(rest), { children: _jsx("div", { className: styles.mainContent, "data-layout-type": layoutType, children: children }) })));
 }

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

@@ -2,4 +2,24 @@
   display:flex;
   flex:1;
   flex-direction:inherit;
+  background:var(--sys-neutral-background, #eeeff3);
+}
+
+.mainContent{
+  margin:0 auto;
+  width:100%;
+  max-width:1440px;
+  min-width:0;
+  box-sizing:border-box;
+}
+.mainContent[data-layout-type=desktop], .mainContent[data-layout-type=desktopSmall]{
+  padding:0 var(--dimension-2m, 16px);
+}
+.mainContent[data-layout-type=tablet]{
+  max-width:unset;
+  padding:0 var(--dimension-2m, 16px);
+}
+.mainContent[data-layout-type=mobile]{
+  max-width:unset;
+  padding:0;
 }

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

@@ -12,5 +12,5 @@ export declare const SectionWrapper: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
     className?: string;
 } & {
-    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
+    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-layout",
   "title": "Site Layout",
-  "version": "0.2.7",
+  "version": "0.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "8968606769e5da46db696dfa70d7ad999564388d"
+  "gitHead": "14f18bff39619ba8f885fff42922458e7e0ee62c"
 }

package/src/helperComponents/Main/Main.tsx

@@ -1,19 +1,23 @@
 import cn from 'classnames';
 import { ReactNode } from 'react';
 
-import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
 
 import styles from './styles.module.scss';
 
-export type MainProps = WithSupportProps<{
-  children: ReactNode;
-  className?: string;
-}>;
+export type MainProps = WithSupportProps<
+  WithLayoutType<{
+    children: ReactNode;
+    className?: string;
+  }>
+>;
 
-export function Main({ children, className, ...rest }: MainProps) {
+export function Main({ children, className, layoutType, ...rest }: MainProps) {
   return (
     <main className={cn(styles.main, className)} {...extractSupportProps(rest)}>
-      {children}
+      <div className={styles.mainContent} data-layout-type={layoutType}>
+        {children}
+      </div>
     </main>
   );
 }

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

@@ -1,6 +1,31 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
 .main {
   display: flex;
   flex: 1;
   flex-direction: inherit;
+  background: var.$sys-neutral-background;
 }
 
+.mainContent {
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1440px;
+  min-width: 0;
+  box-sizing: border-box;
+
+  &[data-layout-type='desktop'],
+  &[data-layout-type='desktopSmall'] {
+    padding: 0 var.$dimension-2m;
+  }
+
+  &[data-layout-type='tablet'] {
+    max-width: unset;
+    padding: 0 var.$dimension-2m;
+  }
+
+  &[data-layout-type='mobile'] {
+    max-width: unset;
+    padding: 0;
+  }
+}