fix(InfoViewer): add size_s

Author: ariser

src/components/InfoViewer/InfoViewer.scss

@@ -1,18 +1,23 @@
 .info-viewer {
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+    --ydb-info-viewer-font-size: var(--yc-text-body-2-font-size);
+    --ydb-info-viewer-line-height: var(--yc-text-body-2-line-height);
+    --ydb-info-viewer-title-font-weight: 600;
+    --ydb-info-viewer-title-margin: 15px 0 10px;
+    --ydb-info-viewer-items-gap: 7px;
+
+    font-size: var(--ydb-info-viewer-font-size);
+    line-height: var(--ydb-info-viewer-line-height);
+
     &__title {
-        margin: 15px 0 10px;
+        margin: var(--ydb-info-viewer-title-margin);
 
-        font-size: var(--yc-text-body-2-font-size);
-        font-weight: 600;
-        line-height: var(--yc-text-body-2-line-height);
+        font-weight: var(--ydb-info-viewer-title-font-weight);
     }
 
     &__items {
         display: flex;
         flex-direction: column;
-        gap: 7px;
+        gap: var(--ydb-info-viewer-items-gap);
 
         max-width: 100%;
     }
@@ -51,4 +56,24 @@
 
         white-space: nowrap;
     }
+
+    &_size {
+        &_s {
+            --ydb-info-viewer-font-size: var(--yc-text-body-1-font-size);
+            --ydb-info-viewer-line-height: var(--yc-text-body-1-line-height);
+            --ydb-info-viewer-title-font-weight: 500;
+            --ydb-info-viewer-title-margin: 0 0 4px;
+            --ydb-info-viewer-items-gap: 4px;
+
+            .info-viewer {
+                &__row {
+                    height: auto;
+                }
+
+                &__label {
+                    min-width: 85px;
+                }
+            }
+        }
+    }
 }

src/components/InfoViewer/InfoViewer.tsx

@@ -12,13 +12,14 @@ interface InfoViewerProps {
     title?: string;
     info?: InfoViewerItem[];
     dots?: boolean;
+    size?: 's';
     className?: string;
 }
 
 const b = cn('info-viewer');
 
-const InfoViewer = ({title, info, dots = true, className}: InfoViewerProps) => (
-    <div className={b(null, className)}>
+const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps) => (
+    <div className={b({size}, className)}>
         {title && <div className={b('title')}>{title}</div>}
         {info && info.length > 0 ? (
             <div className={b('items')}>