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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-layout",
-  "version": "1.0.3",
+  "version": "1.0.5-preview-a2208aeb.0",
   "description": "Блоки-состояния продуктового экрана — заглушка пустого состояния EmptyBlock и экран ограниченного доступа NoAccess.",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
   ],
   "dependencies": {
     "classnames": "^2.5.1",
-    "@cloud-ru/ds-block": "^1.0.1",
-    "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-info-block": "^1.0.1",
-    "@cloud-ru/ds-icons": "^1.1.0",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-icon-predefined": "^1.0.1"
+    "@cloud-ru/ds-icon-predefined": "1.0.2-preview-a2208aeb.0",
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-block": "1.0.2-preview-a2208aeb.0",
+    "@cloud-ru/ds-icons": "1.2.1-preview-a2208aeb.0",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-utils": "1.1.0",
+    "@cloud-ru/ds-info-block": "1.0.2-preview-a2208aeb.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/EmptyBlock/EmptyBlock.tsx

@@ -65,14 +65,20 @@ export function EmptyBlock({
   const isMobile = isMobileLayout(layoutType);
 
   return (
-    <Block size={BLOCK_SIZE.L} className={cn(styles.emptyBlock, className)} {...extractSupportProps(rest)}>
+    <Block
+      size={BLOCK_SIZE.L}
+      className={cn(styles.emptyBlock, className)}
+      contentClassName={styles.content}
+      data-mobile={isMobile || undefined}
+      {...extractSupportProps(rest)}
+    >
       <div className={styles.inner}>
         <InfoBlock
           className={styles.infoBlock}
           title={title}
           content={content}
           icon={icon}
-          size={isMobile ? INFO_SIZE.M : INFO_SIZE.L}
+          size={INFO_SIZE.L}
           align={resolvedAlign}
           footer={footer}
         />

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

@@ -6,13 +6,13 @@
   flex-grow: 1;
   box-sizing: border-box;
   width: 100%;
+}
 
-  > :last-child {
-    display: flex;
-    flex: 1 1 auto;
-    width: 100%;
-    min-width: 0;
-  }
+.content {
+  display: flex;
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
 }
 
 .inner {
@@ -21,7 +21,14 @@
   align-items: center;
   justify-content: center;
 
+  box-sizing: border-box;
   width: 100%;
+  padding: base.$sn-primitive-dimension-40;
+
+  // В mobile-мастере Figma у `composition` нет паддинга.
+  .emptyBlock[data-mobile='true'] & {
+    padding: 0;
+  }
 }
 
 .infoBlock {

package/src/components/NoAccess/NoAccess.tsx

@@ -36,17 +36,12 @@ export function NoAccess({ serviceName, className, ...rest }: NoAccessProps) {
         </div>
       )}
 
-      <Block size={BLOCK_SIZE.L} className={styles.block}>
+      <Block size={BLOCK_SIZE.L} className={styles.block} contentClassName={styles.blockContent}>
         <InfoBlock
           size={INFO_SIZE.M}
           icon={{ icon: LockSVG }}
           title={t('noAccessTitle')}
-          content={
-            <div className={styles.description}>
-              <div className={styles.text}>{t('noAccessSubtitle')}</div>
-              <div className={styles.text}>{t('noAccessText')}</div>
-            </div>
-          }
+          content={t('noAccessDescription')}
         />
       </Block>
     </div>

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

@@ -9,14 +9,14 @@
 
   box-sizing: border-box;
   width: 100%;
-  // Предельная ширина контентной области экрана — layout-константа без DS-токена.
-  max-width: 1200px;
+  // Предельная ширина контентной области экрана (1200); отдельного токена нет.
+  max-width: calc(25 * #{base.$sn-primitive-dimension-48});
   min-height: 100%;
 }
 
 .wrapper[data-mobile='true'] {
-  // Узкая мобильная раскладка — layout-константа без DS-токена.
-  max-width: 360px;
+  // Узкая мобильная раскладка (360); отдельного токена нет.
+  max-width: calc(3 * #{base.$sn-primitive-dimension-120});
 }
 
 .block {
@@ -34,14 +34,16 @@
   color: base.$sn-theme-color-available-version-textMain;
 }
 
-.description {
-  // Предельная ширина текстового блока для читаемости — layout-константа без DS-токена.
-  max-width: 500px;
-  margin-top: base.$sn-primitive-dimension-8;
-}
+.blockContent {
+  display: flex;
+  justify-content: center;
+  padding: base.$sn-primitive-dimension-40;
 
-.text {
-  display: block;
-  text-align: center;
-  white-space: break-spaces;
+  // Описание в мастере — один текст с переносом после первого предложения (`{{newline}}`).
+  white-space: pre-line;
+
+  // В mobile-мастере Figma у `composition` нет паддинга.
+  .wrapper[data-mobile='true'] & {
+    padding: 0;
+  }
 }

package/src/locale/index.ts

@@ -3,13 +3,13 @@ import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
 const LAYOUT_MESSAGES = defineMessages({
   'en-GB': {
     noAccessTitle: 'Access restricted',
-    noAccessSubtitle: 'You do not have permission to view this content.',
-    noAccessText: 'To get access, contact your organization or project administrator.',
+    noAccessDescription:
+      'You do not have permission to view this content.{{newline}}To get access, contact your organization or project administrator.',
   },
   'ru-RU': {
     noAccessTitle: 'Доступ ограничен',
-    noAccessSubtitle: 'У вас нет прав для просмотра этого контента.',
-    noAccessText: 'Для получения доступа обратитесь к администратору организации или проекта.',
+    noAccessDescription:
+      'У вас нет прав для просмотра этого контента.{{newline}}Для получения доступа обратитесь к администратору организации или проекта.',
   },
 });