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

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 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)
 
 

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/styles.module.css

@@ -3,24 +3,19 @@
   justify-content:center;
   width:100%;
   min-width:0;
-  background:var(--sys-neutral-background, #eeeff3);
 }
 
 .contentWrapper{
   width:100%;
-  max-width:1440px;
-  padding:0;
+  max-width:1216px;
+  padding:0 var(--dimension-4m, 32px);
   min-width:0;
-  box-sizing:border-box;
-}
-.contentWrapper[data-layout-type=desktop], .contentWrapper[data-layout-type=desktopSmall]{
-  padding:0 var(--dimension-2m, 16px);
 }
 .contentWrapper[data-layout-type=tablet]{
   max-width:unset;
-  padding:0 var(--dimension-2m, 16px);
+  padding:0 var(--dimension-4m, 32px);
 }
 .contentWrapper[data-layout-type=mobile]{
   max-width:unset;
-  padding:0;
+  padding:0 var(--dimension-2m, 16px);
 }

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/styles.module.css

@@ -3,24 +3,19 @@
   justify-content:center;
   width:100%;
   min-width:0;
-  background:var(--sys-neutral-background, #eeeff3);
 }
 
 .contentWrapper{
   width:100%;
-  max-width:1440px;
-  padding:0;
+  max-width:1216px;
+  padding:0 var(--dimension-4m, 32px);
   min-width:0;
-  box-sizing:border-box;
-}
-.contentWrapper[data-layout-type=desktop], .contentWrapper[data-layout-type=desktopSmall]{
-  padding:0 var(--dimension-2m, 16px);
 }
 .contentWrapper[data-layout-type=tablet]{
   max-width:unset;
-  padding:0 var(--dimension-2m, 16px);
+  padding:0 var(--dimension-4m, 32px);
 }
 .contentWrapper[data-layout-type=mobile]{
   max-width:unset;
-  padding:0;
+  padding:0 var(--dimension-2m, 16px);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-site-layout",
   "title": "Site Layout",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "97f32de112901b4523a7bf7a87bc64aaf21f6c67"
+  "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;
+  }
+}

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

@@ -5,28 +5,21 @@
   justify-content: center;
   width: 100%;
   min-width: 0;
-  background: var.$sys-neutral-background;
 }
 
 .contentWrapper {
   width: 100%;
-  max-width: 1440px;
-  padding: 0;
+  max-width: 1216px;
+  padding: 0 var.$dimension-4m;
   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;
+    padding: 0 var.$dimension-4m;
   }
 
   &[data-layout-type='mobile'] {
     max-width: unset;
-    padding: 0;
+    padding: 0 var.$dimension-2m;
   }
 }