@cloud-ru/ds-uikit-product-layout 1.0.3 → 1.0.5-preview-a2208aeb.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/EmptyBlock/EmptyBlock.js +1 -1
  3. package/dist/cjs/components/EmptyBlock/styles.module.css +7 -1
  4. package/dist/cjs/components/NoAccess/NoAccess.js +1 -1
  5. package/dist/cjs/components/NoAccess/styles.module.css +12 -13
  6. package/dist/cjs/locale/index.d.ts +4 -8
  7. package/dist/cjs/locale/index.js +2 -4
  8. package/dist/cjs/style.css +19 -14
  9. package/dist/esm/components/EmptyBlock/EmptyBlock.js +1 -1
  10. package/dist/esm/components/EmptyBlock/styles.module.css +7 -1
  11. package/dist/esm/components/NoAccess/NoAccess.js +1 -1
  12. package/dist/esm/components/NoAccess/styles.module.css +12 -13
  13. package/dist/esm/locale/index.d.ts +4 -8
  14. package/dist/esm/locale/index.js +2 -4
  15. package/dist/esm/style.css +19 -14
  16. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  17. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  18. package/package.json +8 -8
  19. package/src/components/EmptyBlock/EmptyBlock.tsx +8 -2
  20. package/src/components/EmptyBlock/styles.module.scss +13 -6
  21. package/src/components/NoAccess/NoAccess.tsx +2 -7
  22. package/src/components/NoAccess/styles.module.scss +15 -13
  23. package/src/locale/index.ts +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.4 (2026-09-18)
7
+
8
+ **Note:** Version bump only for package @ds/uikit-product-layout
9
+
6
10
  ## 1.0.3 (2026-08-28)
7
11
 
8
12
  **Note:** Version bump only for package @ds/uikit-product-layout
package/dist/cjs/components/EmptyBlock/EmptyBlock.js CHANGED
@@ -24,5 +24,5 @@ function EmptyBlock({ title, content, icon, footer, align, layoutPresets, classN
24
24
  const { align: resolvedAlign } = (0, adaptive_1.useLayoutDefaults)({ align: info_block_1.ALIGN.Horizontal }, (0, adaptive_1.mergePresets)(exports.EMPTY_BLOCK_LAYOUT_PRESETS, layoutPresets), { align });
25
25
  const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
26
26
  const isMobile = (0, adaptive_1.isMobileLayout)(layoutType);
27
- return ((0, jsx_runtime_1.jsx)(block_1.Block, { size: block_1.SIZE.L, className: (0, classnames_1.default)(styles_module_scss_1.default.emptyBlock, className), ...(0, utils_1.extractSupportProps)(rest), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inner, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { className: styles_module_scss_1.default.infoBlock, title: title, content: content, icon: icon, size: isMobile ? info_block_1.SIZE.M : info_block_1.SIZE.L, align: resolvedAlign, footer: footer }) }) }));
27
+ return ((0, jsx_runtime_1.jsx)(block_1.Block, { size: block_1.SIZE.L, className: (0, classnames_1.default)(styles_module_scss_1.default.emptyBlock, className), contentClassName: styles_module_scss_1.default.content, "data-mobile": isMobile || undefined, ...(0, utils_1.extractSupportProps)(rest), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.inner, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { className: styles_module_scss_1.default.infoBlock, title: title, content: content, icon: icon, size: info_block_1.SIZE.L, align: resolvedAlign, footer: footer }) }) }));
28
28
  }
package/dist/cjs/components/EmptyBlock/styles.module.css CHANGED
@@ -4,7 +4,8 @@
4
4
  box-sizing:border-box;
5
5
  width:100%;
6
6
  }
7
- .emptyBlock > :last-child{
7
+
8
+ .content{
8
9
  display:flex;
9
10
  flex:1 1 auto;
10
11
  width:100%;
@@ -16,7 +17,12 @@
16
17
  flex:1 0 0;
17
18
  align-items:center;
18
19
  justify-content:center;
20
+ box-sizing:border-box;
19
21
  width:100%;
22
+ padding:var(--sn-primitive-dimension-40, 40px);
23
+ }
24
+ .emptyBlock[data-mobile=true] .inner{
25
+ padding:0;
20
26
  }
21
27
 
22
28
  .infoBlock{
package/dist/cjs/components/NoAccess/NoAccess.js CHANGED
@@ -21,5 +21,5 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
21
21
  function NoAccess({ serviceName, className, ...rest }) {
22
22
  const { layoutType } = (0, adaptive_1.useAdaptiveLayout)();
23
23
  const { t } = locale_1.layoutLocale.useTranslations();
24
- return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-mobile": (0, adaptive_1.isMobileLayout)(layoutType) || undefined, ...(0, utils_1.extractSupportProps)(rest), children: [serviceName && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.serviceName, "data-test-id": constants_1.TEST_IDS.noAccess.serviceName, children: serviceName })), (0, jsx_runtime_1.jsx)(block_1.Block, { size: block_1.SIZE.L, className: styles_module_scss_1.default.block, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: info_block_1.SIZE.M, icon: { icon: product_1.LockSVG }, title: t('noAccessTitle'), content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.description, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.text, children: t('noAccessSubtitle') }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.text, children: t('noAccessText') })] }) }) })] }));
24
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-mobile": (0, adaptive_1.isMobileLayout)(layoutType) || undefined, ...(0, utils_1.extractSupportProps)(rest), children: [serviceName && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.serviceName, "data-test-id": constants_1.TEST_IDS.noAccess.serviceName, children: serviceName })), (0, jsx_runtime_1.jsx)(block_1.Block, { size: block_1.SIZE.L, className: styles_module_scss_1.default.block, contentClassName: styles_module_scss_1.default.blockContent, children: (0, jsx_runtime_1.jsx)(info_block_1.InfoBlock, { size: info_block_1.SIZE.M, icon: { icon: product_1.LockSVG }, title: t('noAccessTitle'), content: t('noAccessDescription') }) })] }));
25
25
  }
package/dist/cjs/components/NoAccess/styles.module.css CHANGED
@@ -5,12 +5,12 @@
5
5
  flex-grow:1;
6
6
  box-sizing:border-box;
7
7
  width:100%;
8
- max-width:1200px;
8
+ max-width:calc(25 * var(--sn-primitive-dimension-48, 48px));
9
9
  min-height:100%;
10
10
  }
11
11
 
12
12
  .wrapper[data-mobile=true]{
13
- max-width:360px;
13
+ max-width:calc(3 * var(--sn-primitive-dimension-120, 120px));
14
14
  }
15
15
 
16
16
  .block{
@@ -21,10 +21,10 @@
21
21
  }
22
22
 
23
23
  .serviceName{
24
- font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
24
+ font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, SB Sans Interface));
25
25
  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
26
- line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
27
- font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
26
+ line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
27
+ font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-platform-comfort-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px))));
28
28
  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
29
29
  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
30
30
  display:block;
@@ -32,13 +32,12 @@
32
32
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
33
33
  }
34
34
 
35
- .description{
36
- max-width:500px;
37
- margin-top:var(--sn-primitive-dimension-8, 8px);
35
+ .blockContent{
36
+ display:flex;
37
+ justify-content:center;
38
+ padding:var(--sn-primitive-dimension-40, 40px);
39
+ white-space:pre-line;
38
40
  }
39
-
40
- .text{
41
- display:block;
42
- text-align:center;
43
- white-space:break-spaces;
41
+ .wrapper[data-mobile=true] .blockContent{
42
+ padding:0;
44
43
  }
package/dist/cjs/locale/index.d.ts CHANGED
@@ -1,13 +1,11 @@
1
1
  declare const LAYOUT_MESSAGES: {
2
2
  readonly 'en-GB': {
3
3
  readonly noAccessTitle: "Access restricted";
4
- readonly noAccessSubtitle: "You do not have permission to view this content.";
5
- readonly noAccessText: "To get access, contact your organization or project administrator.";
4
+ readonly noAccessDescription: "You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.";
6
5
  };
7
6
  readonly 'ru-RU': {
8
7
  readonly noAccessTitle: "Доступ ограничен";
9
- readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
10
- readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
8
+ readonly noAccessDescription: "У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.";
11
9
  };
12
10
  };
13
11
  export type LayoutMessages = (typeof LAYOUT_MESSAGES)['en-GB'];
@@ -15,13 +13,11 @@ export type LayoutMessages = (typeof LAYOUT_MESSAGES)['en-GB'];
15
13
  export declare const layoutLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
16
14
  readonly 'en-GB': {
17
15
  readonly noAccessTitle: "Access restricted";
18
- readonly noAccessSubtitle: "You do not have permission to view this content.";
19
- readonly noAccessText: "To get access, contact your organization or project administrator.";
16
+ readonly noAccessDescription: "You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.";
20
17
  };
21
18
  readonly 'ru-RU': {
22
19
  readonly noAccessTitle: "Доступ ограничен";
23
- readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
24
- readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
20
+ readonly noAccessDescription: "У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.";
25
21
  };
26
22
  }, "@cloud-ru/ds-uikit-product-layout">;
27
23
  export {};
package/dist/cjs/locale/index.js CHANGED
@@ -5,13 +5,11 @@ const locale_1 = require("@cloud-ru/ds-locale");
5
5
  const LAYOUT_MESSAGES = (0, locale_1.defineMessages)({
6
6
  'en-GB': {
7
7
  noAccessTitle: 'Access restricted',
8
- noAccessSubtitle: 'You do not have permission to view this content.',
9
- noAccessText: 'To get access, contact your organization or project administrator.',
8
+ noAccessDescription: 'You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.',
10
9
  },
11
10
  'ru-RU': {
12
11
  noAccessTitle: 'Доступ ограничен',
13
- noAccessSubtitle: 'У вас нет прав для просмотра этого контента.',
14
- noAccessText: 'Для получения доступа обратитесь к администратору организации или проекта.',
12
+ noAccessDescription: 'У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.',
15
13
  },
16
14
  });
17
15
  /** locale пакета Layout: `layoutLocale.useTranslations()` в коде, `layoutLocale.extend(...)` в сервисе. */
package/dist/cjs/style.css CHANGED
@@ -4,7 +4,8 @@
4
4
  box-sizing:border-box;
5
5
  width:100%;
6
6
  }
7
- .emptyBlock > :last-child{
7
+
8
+ .content{
8
9
  display:flex;
9
10
  flex:1 1 auto;
10
11
  width:100%;
@@ -16,7 +17,12 @@
16
17
  flex:1 0 0;
17
18
  align-items:center;
18
19
  justify-content:center;
20
+ box-sizing:border-box;
19
21
  width:100%;
22
+ padding:var(--sn-primitive-dimension-40, 40px);
23
+ }
24
+ .emptyBlock[data-mobile=true] .inner{
25
+ padding:0;
20
26
  }
21
27
 
22
28
  .infoBlock{
@@ -29,12 +35,12 @@
29
35
  flex-grow:1;
30
36
  box-sizing:border-box;
31
37
  width:100%;
32
- max-width:1200px;
38
+ max-width:calc(25 * var(--sn-primitive-dimension-48, 48px));
33
39
  min-height:100%;
34
40
  }
35
41
 
36
42
  .wrapper[data-mobile=true]{
37
- max-width:360px;
43
+ max-width:calc(3 * var(--sn-primitive-dimension-120, 120px));
38
44
  }
39
45
 
40
46
  .block{
@@ -45,10 +51,10 @@
45
51
  }
46
52
 
47
53
  .serviceName{
48
- font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
54
+ font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, SB Sans Interface));
49
55
  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
50
- line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
51
- font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
56
+ line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
57
+ font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-platform-comfort-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px))));
52
58
  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
53
59
  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
54
60
  display:block;
@@ -56,13 +62,12 @@
56
62
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
57
63
  }
58
64
 
59
- .description{
60
- max-width:500px;
61
- margin-top:var(--sn-primitive-dimension-8, 8px);
65
+ .blockContent{
66
+ display:flex;
67
+ justify-content:center;
68
+ padding:var(--sn-primitive-dimension-40, 40px);
69
+ white-space:pre-line;
62
70
  }
63
-
64
- .text{
65
- display:block;
66
- text-align:center;
67
- white-space:break-spaces;
71
+ .wrapper[data-mobile=true] .blockContent{
72
+ padding:0;
68
73
  }
package/dist/esm/components/EmptyBlock/EmptyBlock.js CHANGED
@@ -17,5 +17,5 @@ export function EmptyBlock({ title, content, icon, footer, align, layoutPresets,
17
17
  const { align: resolvedAlign } = useLayoutDefaults({ align: ALIGN.Horizontal }, mergePresets(EMPTY_BLOCK_LAYOUT_PRESETS, layoutPresets), { align });
18
18
  const { layoutType } = useAdaptiveLayout();
19
19
  const isMobile = isMobileLayout(layoutType);
20
- return (_jsx(Block, { size: BLOCK_SIZE.L, className: cn(styles.emptyBlock, className), ...extractSupportProps(rest), children: _jsx("div", { className: styles.inner, children: _jsx(InfoBlock, { className: styles.infoBlock, title: title, content: content, icon: icon, size: isMobile ? INFO_SIZE.M : INFO_SIZE.L, align: resolvedAlign, footer: footer }) }) }));
20
+ return (_jsx(Block, { size: BLOCK_SIZE.L, className: cn(styles.emptyBlock, className), contentClassName: styles.content, "data-mobile": isMobile || undefined, ...extractSupportProps(rest), children: _jsx("div", { className: styles.inner, children: _jsx(InfoBlock, { className: styles.infoBlock, title: title, content: content, icon: icon, size: INFO_SIZE.L, align: resolvedAlign, footer: footer }) }) }));
21
21
  }
package/dist/esm/components/EmptyBlock/styles.module.css CHANGED
@@ -4,7 +4,8 @@
4
4
  box-sizing:border-box;
5
5
  width:100%;
6
6
  }
7
- .emptyBlock > :last-child{
7
+
8
+ .content{
8
9
  display:flex;
9
10
  flex:1 1 auto;
10
11
  width:100%;
@@ -16,7 +17,12 @@
16
17
  flex:1 0 0;
17
18
  align-items:center;
18
19
  justify-content:center;
20
+ box-sizing:border-box;
19
21
  width:100%;
22
+ padding:var(--sn-primitive-dimension-40, 40px);
23
+ }
24
+ .emptyBlock[data-mobile=true] .inner{
25
+ padding:0;
20
26
  }
21
27
 
22
28
  .infoBlock{
package/dist/esm/components/NoAccess/NoAccess.js CHANGED
@@ -15,5 +15,5 @@ import styles from './styles.module.css';
15
15
  export function NoAccess({ serviceName, className, ...rest }) {
16
16
  const { layoutType } = useAdaptiveLayout();
17
17
  const { t } = layoutLocale.useTranslations();
18
- return (_jsxs("div", { className: cn(styles.wrapper, className), "data-mobile": isMobileLayout(layoutType) || undefined, ...extractSupportProps(rest), children: [serviceName && (_jsx("div", { className: styles.serviceName, "data-test-id": TEST_IDS.noAccess.serviceName, children: serviceName })), _jsx(Block, { size: BLOCK_SIZE.L, className: styles.block, children: _jsx(InfoBlock, { size: INFO_SIZE.M, icon: { icon: LockSVG }, title: t('noAccessTitle'), content: _jsxs("div", { className: styles.description, children: [_jsx("div", { className: styles.text, children: t('noAccessSubtitle') }), _jsx("div", { className: styles.text, children: t('noAccessText') })] }) }) })] }));
18
+ return (_jsxs("div", { className: cn(styles.wrapper, className), "data-mobile": isMobileLayout(layoutType) || undefined, ...extractSupportProps(rest), children: [serviceName && (_jsx("div", { className: styles.serviceName, "data-test-id": TEST_IDS.noAccess.serviceName, children: serviceName })), _jsx(Block, { size: BLOCK_SIZE.L, className: styles.block, contentClassName: styles.blockContent, children: _jsx(InfoBlock, { size: INFO_SIZE.M, icon: { icon: LockSVG }, title: t('noAccessTitle'), content: t('noAccessDescription') }) })] }));
19
19
  }
package/dist/esm/components/NoAccess/styles.module.css CHANGED
@@ -5,12 +5,12 @@
5
5
  flex-grow:1;
6
6
  box-sizing:border-box;
7
7
  width:100%;
8
- max-width:1200px;
8
+ max-width:calc(25 * var(--sn-primitive-dimension-48, 48px));
9
9
  min-height:100%;
10
10
  }
11
11
 
12
12
  .wrapper[data-mobile=true]{
13
- max-width:360px;
13
+ max-width:calc(3 * var(--sn-primitive-dimension-120, 120px));
14
14
  }
15
15
 
16
16
  .block{
@@ -21,10 +21,10 @@
21
21
  }
22
22
 
23
23
  .serviceName{
24
- font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
24
+ font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, SB Sans Interface));
25
25
  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
26
- line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
27
- font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
26
+ line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
27
+ font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-platform-comfort-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px))));
28
28
  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
29
29
  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
30
30
  display:block;
@@ -32,13 +32,12 @@
32
32
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
33
33
  }
34
34
 
35
- .description{
36
- max-width:500px;
37
- margin-top:var(--sn-primitive-dimension-8, 8px);
35
+ .blockContent{
36
+ display:flex;
37
+ justify-content:center;
38
+ padding:var(--sn-primitive-dimension-40, 40px);
39
+ white-space:pre-line;
38
40
  }
39
-
40
- .text{
41
- display:block;
42
- text-align:center;
43
- white-space:break-spaces;
41
+ .wrapper[data-mobile=true] .blockContent{
42
+ padding:0;
44
43
  }
package/dist/esm/locale/index.d.ts CHANGED
@@ -1,13 +1,11 @@
1
1
  declare const LAYOUT_MESSAGES: {
2
2
  readonly 'en-GB': {
3
3
  readonly noAccessTitle: "Access restricted";
4
- readonly noAccessSubtitle: "You do not have permission to view this content.";
5
- readonly noAccessText: "To get access, contact your organization or project administrator.";
4
+ readonly noAccessDescription: "You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.";
6
5
  };
7
6
  readonly 'ru-RU': {
8
7
  readonly noAccessTitle: "Доступ ограничен";
9
- readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
10
- readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
8
+ readonly noAccessDescription: "У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.";
11
9
  };
12
10
  };
13
11
  export type LayoutMessages = (typeof LAYOUT_MESSAGES)['en-GB'];
@@ -15,13 +13,11 @@ export type LayoutMessages = (typeof LAYOUT_MESSAGES)['en-GB'];
15
13
  export declare const layoutLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
16
14
  readonly 'en-GB': {
17
15
  readonly noAccessTitle: "Access restricted";
18
- readonly noAccessSubtitle: "You do not have permission to view this content.";
19
- readonly noAccessText: "To get access, contact your organization or project administrator.";
16
+ readonly noAccessDescription: "You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.";
20
17
  };
21
18
  readonly 'ru-RU': {
22
19
  readonly noAccessTitle: "Доступ ограничен";
23
- readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
24
- readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
20
+ readonly noAccessDescription: "У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.";
25
21
  };
26
22
  }, "@cloud-ru/ds-uikit-product-layout">;
27
23
  export {};
package/dist/esm/locale/index.js CHANGED
@@ -2,13 +2,11 @@ import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
2
2
  const LAYOUT_MESSAGES = defineMessages({
3
3
  'en-GB': {
4
4
  noAccessTitle: 'Access restricted',
5
- noAccessSubtitle: 'You do not have permission to view this content.',
6
- noAccessText: 'To get access, contact your organization or project administrator.',
5
+ noAccessDescription: 'You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.',
7
6
  },
8
7
  'ru-RU': {
9
8
  noAccessTitle: 'Доступ ограничен',
10
- noAccessSubtitle: 'У вас нет прав для просмотра этого контента.',
11
- noAccessText: 'Для получения доступа обратитесь к администратору организации или проекта.',
9
+ noAccessDescription: 'У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.',
12
10
  },
13
11
  });
14
12
  /** locale пакета Layout: `layoutLocale.useTranslations()` в коде, `layoutLocale.extend(...)` в сервисе. */
package/dist/esm/style.css CHANGED
@@ -4,7 +4,8 @@
4
4
  box-sizing:border-box;
5
5
  width:100%;
6
6
  }
7
- .emptyBlock > :last-child{
7
+
8
+ .content{
8
9
  display:flex;
9
10
  flex:1 1 auto;
10
11
  width:100%;
@@ -16,7 +17,12 @@
16
17
  flex:1 0 0;
17
18
  align-items:center;
18
19
  justify-content:center;
20
+ box-sizing:border-box;
19
21
  width:100%;
22
+ padding:var(--sn-primitive-dimension-40, 40px);
23
+ }
24
+ .emptyBlock[data-mobile=true] .inner{
25
+ padding:0;
20
26
  }
21
27
 
22
28
  .infoBlock{
@@ -29,12 +35,12 @@
29
35
  flex-grow:1;
30
36
  box-sizing:border-box;
31
37
  width:100%;
32
- max-width:1200px;
38
+ max-width:calc(25 * var(--sn-primitive-dimension-48, 48px));
33
39
  min-height:100%;
34
40
  }
35
41
 
36
42
  .wrapper[data-mobile=true]{
37
- max-width:360px;
43
+ max-width:calc(3 * var(--sn-primitive-dimension-120, 120px));
38
44
  }
39
45
 
40
46
  .block{
@@ -45,10 +51,10 @@
45
51
  }
46
52
 
47
53
  .serviceName{
48
- font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
54
+ font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, SB Sans Interface));
49
55
  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
50
- line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
51
- font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
56
+ line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-platform-comfort-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-32, 32px))));
57
+ font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-platform-comfort-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px))));
52
58
  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
53
59
  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
54
60
  display:block;
@@ -56,13 +62,12 @@
56
62
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
57
63
  }
58
64
 
59
- .description{
60
- max-width:500px;
61
- margin-top:var(--sn-primitive-dimension-8, 8px);
65
+ .blockContent{
66
+ display:flex;
67
+ justify-content:center;
68
+ padding:var(--sn-primitive-dimension-40, 40px);
69
+ white-space:pre-line;
62
70
  }
63
-
64
- .text{
65
- display:block;
66
- text-align:center;
67
- white-space:break-spaces;
71
+ .wrapper[data-mobile=true] .blockContent{
72
+ padding:0;
68
73
  }