@cloud-ru/uikit-product-info-row 0.8.30 → 0.9.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.9.0 (2025-12-12)
+
+
+### Features
+
+* **PDS-2967:** add two columns view for InfoGroup ([ca818a4](https://gitverse.ru/cloud-ru-tech/uikit-product/commits/ca818a48ad21a28bb204342407fbcc498f505cb8))
+
+
+
+
+
 ## 0.8.30 (2025-12-08)
 
 ### Only dependencies have been changed

package/dist/cjs/components/InfoGroup/InfoGroup.d.ts

@@ -1,2 +1,2 @@
 import { DataType, InfoGroupProps } from './types';
-export declare function InfoGroup<T extends DataType>({ data, items, className, loading }: InfoGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function InfoGroup<T extends DataType>({ data, items, className, loading, columns, width, }: InfoGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/InfoGroup/InfoGroup.js

@@ -10,17 +10,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoGroup = InfoGroup;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const InfoRow_1 = require("../InfoRow");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
-function InfoGroup({ data, items, className, loading }) {
+function InfoGroup({ data, items, className, loading, columns = 'single', width = 'fixed', }) {
     const getContent = (0, utils_1.useGetContent)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: items.map((_a, index) => {
-            var _b;
-            var { label, accessorKey, render } = _a, rest = __rest(_a, ["label", "accessorKey", "render"]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-columns": columns, "data-width": width, children: items.map((_a, index) => {
+            var { label, accessorKey, render, labelClassName, className, rowClassName } = _a, rest = __rest(_a, ["label", "accessorKey", "render", "labelClassName", "className", "rowClassName"]);
             const content = getContent({ data, render, accessorKey });
-            return ((0, jsx_runtime_1.jsx)(InfoRow_1.InfoRow, Object.assign({ label: label, content: content, topDivider: index === 0, bottomDivider: true, loading: loading }, rest), (_b = accessorKey) !== null && _b !== void 0 ? _b : label));
+            const rowWidth = columns === 'double' || width === 'full' ? 'full' : 'fixed';
+            const showTopDivider = columns === 'double' ? index < 2 : index === 0;
+            return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.infoRowWrapper, "data-width": width, children: (0, jsx_runtime_1.jsx)(InfoRow_1.InfoRow, Object.assign({ label: label, content: content, topDivider: showTopDivider, bottomDivider: true, loading: loading, width: rowWidth, labelClassName: (0, classnames_1.default)({
+                        [styles_module_scss_1.default.infoRowLabelDoubleFixed]: width === 'fixed' && columns === 'double',
+                        [styles_module_scss_1.default.infoRowLabelDoubleFull]: width === 'full' && columns === 'double',
+                    }, labelClassName), className: (0, classnames_1.default)({
+                        [styles_module_scss_1.default.contentDouble]: columns === 'double',
+                    }, className), rowClassName: (0, classnames_1.default)({
+                        [styles_module_scss_1.default.contentDouble]: columns === 'double',
+                    }, rowClassName) }, rest)) }, accessorKey || label));
         }) }));
 }

package/dist/cjs/components/InfoGroup/styles.module.css

@@ -0,0 +1,38 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+.wrapper[data-columns=double]{
+  display:grid;
+  grid-template-columns:repeat(2, 1fr);
+  -moz-column-gap:48px;
+       column-gap:48px;
+  max-width:900px;
+}
+.wrapper[data-width=full]{
+  max-width:100%;
+}
+
+.infoRowWrapper[data-width=fixed]{
+  width:426px;
+}
+.infoRowWrapper[data-width=full]{
+  max-width:100%;
+}
+
+.infoRowLabelDoubleFixed.infoRowLabelDoubleFixed{
+  width:100px;
+  flex-shrink:0;
+}
+
+.infoRowLabelDoubleFull.infoRowLabelDoubleFull{
+  width:100px;
+  flex-grow:0.3;
+  flex-shrink:0;
+}
+
+.contentDouble{
+  height:100%;
+  box-sizing:border-box;
+}

package/dist/cjs/components/InfoGroup/types.d.ts

@@ -15,5 +15,7 @@ export type InfoGroupProps<T extends DataType> = {
     items: InfoGroupItem<T>[];
     className?: string;
     loading?: boolean;
+    columns?: 'single' | 'double';
+    width?: 'fixed' | 'full';
 };
 export {};

package/dist/cjs/components/InfoRow/InfoRow.d.ts

@@ -12,6 +12,8 @@ export type InfoRowPropsBase = {
     topDivider?: boolean;
     bottomDivider?: boolean;
     className?: string;
+    labelClassName?: string;
+    rowClassName?: string;
     content?: ReactNode;
     rowActions?: {
         first: RowActionButton;
@@ -19,8 +21,9 @@ export type InfoRowPropsBase = {
     };
     loading?: boolean;
     width?: 'fixed' | 'full';
+    labelWidth?: 'fixed' | 'auto';
 };
 export type InfoRowProps = WithSupportProps<InfoRowPropsBase>;
 export declare function withTip(children: ReactNode, tip?: TooltipProps | string): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare function InfoRow({ label, topDivider, bottomDivider, className, labelTooltip, content, rowActions, labelTruncate, loading, width, ...rest }: InfoRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoRow({ label, topDivider, bottomDivider, className, labelTooltip, content, rowActions, labelTruncate, loading, width, labelClassName, rowClassName, labelWidth, ...rest }: InfoRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/InfoRow/InfoRow.js

@@ -32,8 +32,8 @@ function withTip(children, tip) {
     return typeof tip === 'string' ? (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { tip: tip, children: children }) : (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({}, tip, { children: children }));
 }
 function InfoRow(_a) {
-    var { label, topDivider = true, bottomDivider = true, className, labelTooltip, content, rowActions, labelTruncate = 1, loading = false, width = 'fixed' } = _a, rest = __rest(_a, ["label", "topDivider", "bottomDivider", "className", "labelTooltip", "content", "rowActions", "labelTruncate", "loading", "width"]);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-width": width, children: [topDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, { weight: 'regular' }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.infoRow, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.labelLayout, children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: label, maxLines: labelTruncate }), labelTooltip &&
+    var { label, topDivider = true, bottomDivider = true, className, labelTooltip, content, rowActions, labelTruncate = 1, loading = false, width = 'fixed', labelClassName, rowClassName, labelWidth } = _a, rest = __rest(_a, ["label", "topDivider", "bottomDivider", "className", "labelTooltip", "content", "rowActions", "labelTruncate", "loading", "width", "labelClassName", "rowClassName", "labelWidth"]);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, uikit_product_utils_1.extractSupportProps)(rest), { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-width": width, children: [topDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, { weight: 'light' }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.infoRow, rowClassName), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.labelLayout, labelClassName), "data-label-width": labelWidth, children: [(0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.label, text: label, maxLines: labelTruncate }), labelTooltip &&
                                 (typeof labelTooltip === 'string' ? ((0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, { tip: labelTooltip, size: 'xs', placement: 'top', trigger: 'hover', tabIndex: -1 })) : ((0, jsx_runtime_1.jsx)(tooltip_1.QuestionTooltip, Object.assign({}, labelTooltip, { size: 'xs' }))))] }), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentLayout, children: [(0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: loading, children: (0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { skeleton: (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, { width: '100%', lines: 1 }), children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.content, children: content }) }) }), rowActions && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.rowActions, children: [withTip((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({}, rowActions.first, { disabled: loading || rowActions.first.disabled, appearance: 'neutral', size: 's' })), rowActions.first.tip), rowActions.second &&
-                                        withTip((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({}, rowActions.second, { disabled: loading || rowActions.second.disabled, appearance: 'neutral', size: 's' })), rowActions.second.tip)] }))] })] }), bottomDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, { weight: 'regular' })] })));
+                                        withTip((0, jsx_runtime_1.jsx)(button_1.ButtonTonal, Object.assign({}, rowActions.second, { disabled: loading || rowActions.second.disabled, appearance: 'neutral', size: 's' })), rowActions.second.tip)] }))] })] }), bottomDivider && (0, jsx_runtime_1.jsx)(divider_1.Divider, { weight: 'light' })] })));
 }

package/dist/cjs/components/InfoRow/styles.module.css

@@ -1,5 +1,6 @@
 .wrapper{
   width:calc(200px + var(--dimension-3m, 24px) + 496px);
+  min-height:40px;
 }
 .wrapper[data-width=full]{
   width:100%;
@@ -11,6 +12,7 @@
   -moz-column-gap:var(--dimension-3m, 24px);
        column-gap:var(--dimension-3m, 24px);
   width:100%;
+  min-height:32px;
   align-items:center;
 }
 
@@ -31,6 +33,13 @@
   justify-content:flex-start;
   height:100%;
 }
+.labelLayout[data-label-width=auto]{
+  width:auto;
+}
+
+.label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
 
 .contentLayout{
   position:relative;

package/dist/esm/components/InfoGroup/InfoGroup.d.ts

@@ -1,2 +1,2 @@
 import { DataType, InfoGroupProps } from './types';
-export declare function InfoGroup<T extends DataType>({ data, items, className, loading }: InfoGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function InfoGroup<T extends DataType>({ data, items, className, loading, columns, width, }: InfoGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/InfoGroup/InfoGroup.js

@@ -10,14 +10,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
 import { InfoRow } from '../InfoRow';
+import styles from './styles.module.css';
 import { useGetContent } from './utils';
-export function InfoGroup({ data, items, className, loading }) {
+export function InfoGroup({ data, items, className, loading, columns = 'single', width = 'fixed', }) {
     const getContent = useGetContent();
-    return (_jsx("div", { className: className, children: items.map((_a, index) => {
-            var _b;
-            var { label, accessorKey, render } = _a, rest = __rest(_a, ["label", "accessorKey", "render"]);
+    return (_jsx("div", { className: cn(styles.wrapper, className), "data-columns": columns, "data-width": width, children: items.map((_a, index) => {
+            var { label, accessorKey, render, labelClassName, className, rowClassName } = _a, rest = __rest(_a, ["label", "accessorKey", "render", "labelClassName", "className", "rowClassName"]);
             const content = getContent({ data, render, accessorKey });
-            return (_jsx(InfoRow, Object.assign({ label: label, content: content, topDivider: index === 0, bottomDivider: true, loading: loading }, rest), (_b = accessorKey) !== null && _b !== void 0 ? _b : label));
+            const rowWidth = columns === 'double' || width === 'full' ? 'full' : 'fixed';
+            const showTopDivider = columns === 'double' ? index < 2 : index === 0;
+            return (_jsx("div", { className: styles.infoRowWrapper, "data-width": width, children: _jsx(InfoRow, Object.assign({ label: label, content: content, topDivider: showTopDivider, bottomDivider: true, loading: loading, width: rowWidth, labelClassName: cn({
+                        [styles.infoRowLabelDoubleFixed]: width === 'fixed' && columns === 'double',
+                        [styles.infoRowLabelDoubleFull]: width === 'full' && columns === 'double',
+                    }, labelClassName), className: cn({
+                        [styles.contentDouble]: columns === 'double',
+                    }, className), rowClassName: cn({
+                        [styles.contentDouble]: columns === 'double',
+                    }, rowClassName) }, rest)) }, accessorKey || label));
         }) }));
 }

package/dist/esm/components/InfoGroup/styles.module.css

@@ -0,0 +1,38 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  width:100%;
+}
+.wrapper[data-columns=double]{
+  display:grid;
+  grid-template-columns:repeat(2, 1fr);
+  -moz-column-gap:48px;
+       column-gap:48px;
+  max-width:900px;
+}
+.wrapper[data-width=full]{
+  max-width:100%;
+}
+
+.infoRowWrapper[data-width=fixed]{
+  width:426px;
+}
+.infoRowWrapper[data-width=full]{
+  max-width:100%;
+}
+
+.infoRowLabelDoubleFixed.infoRowLabelDoubleFixed{
+  width:100px;
+  flex-shrink:0;
+}
+
+.infoRowLabelDoubleFull.infoRowLabelDoubleFull{
+  width:100px;
+  flex-grow:0.3;
+  flex-shrink:0;
+}
+
+.contentDouble{
+  height:100%;
+  box-sizing:border-box;
+}

package/dist/esm/components/InfoGroup/types.d.ts

@@ -15,5 +15,7 @@ export type InfoGroupProps<T extends DataType> = {
     items: InfoGroupItem<T>[];
     className?: string;
     loading?: boolean;
+    columns?: 'single' | 'double';
+    width?: 'fixed' | 'full';
 };
 export {};

package/dist/esm/components/InfoRow/InfoRow.d.ts

@@ -12,6 +12,8 @@ export type InfoRowPropsBase = {
     topDivider?: boolean;
     bottomDivider?: boolean;
     className?: string;
+    labelClassName?: string;
+    rowClassName?: string;
     content?: ReactNode;
     rowActions?: {
         first: RowActionButton;
@@ -19,8 +21,9 @@ export type InfoRowPropsBase = {
     };
     loading?: boolean;
     width?: 'fixed' | 'full';
+    labelWidth?: 'fixed' | 'auto';
 };
 export type InfoRowProps = WithSupportProps<InfoRowPropsBase>;
 export declare function withTip(children: ReactNode, tip?: TooltipProps | string): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare function InfoRow({ label, topDivider, bottomDivider, className, labelTooltip, content, rowActions, labelTruncate, loading, width, ...rest }: InfoRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoRow({ label, topDivider, bottomDivider, className, labelTooltip, content, rowActions, labelTruncate, loading, width, labelClassName, rowClassName, labelWidth, ...rest }: InfoRowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/InfoRow/InfoRow.js

@@ -25,8 +25,8 @@ export function withTip(children, tip) {
     return typeof tip === 'string' ? _jsx(Tooltip, { tip: tip, children: children }) : _jsx(Tooltip, Object.assign({}, tip, { children: children }));
 }
 export function InfoRow(_a) {
-    var { label, topDivider = true, bottomDivider = true, className, labelTooltip, content, rowActions, labelTruncate = 1, loading = false, width = 'fixed' } = _a, rest = __rest(_a, ["label", "topDivider", "bottomDivider", "className", "labelTooltip", "content", "rowActions", "labelTruncate", "loading", "width"]);
-    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { className: cn(styles.wrapper, className), "data-width": width, children: [topDivider && _jsx(Divider, { weight: 'regular' }), _jsxs("div", { className: styles.infoRow, children: [_jsxs("div", { className: styles.labelLayout, children: [_jsx(TruncateString, { text: label, maxLines: labelTruncate }), labelTooltip &&
+    var { label, topDivider = true, bottomDivider = true, className, labelTooltip, content, rowActions, labelTruncate = 1, loading = false, width = 'fixed', labelClassName, rowClassName, labelWidth } = _a, rest = __rest(_a, ["label", "topDivider", "bottomDivider", "className", "labelTooltip", "content", "rowActions", "labelTruncate", "loading", "width", "labelClassName", "rowClassName", "labelWidth"]);
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { className: cn(styles.wrapper, className), "data-width": width, children: [topDivider && _jsx(Divider, { weight: 'light' }), _jsxs("div", { className: cn(styles.infoRow, rowClassName), children: [_jsxs("div", { className: cn(styles.labelLayout, labelClassName), "data-label-width": labelWidth, children: [_jsx(TruncateString, { className: styles.label, text: label, maxLines: labelTruncate }), labelTooltip &&
                                 (typeof labelTooltip === 'string' ? (_jsx(QuestionTooltip, { tip: labelTooltip, size: 'xs', placement: 'top', trigger: 'hover', tabIndex: -1 })) : (_jsx(QuestionTooltip, Object.assign({}, labelTooltip, { size: 'xs' }))))] }), _jsxs("div", { className: styles.contentLayout, children: [_jsx(SkeletonContextProvider, { loading: loading, children: _jsx(WithSkeleton, { skeleton: _jsx(SkeletonText, { width: '100%', lines: 1 }), children: _jsx("div", { className: styles.content, children: content }) }) }), rowActions && (_jsxs("div", { className: styles.rowActions, children: [withTip(_jsx(ButtonTonal, Object.assign({}, rowActions.first, { disabled: loading || rowActions.first.disabled, appearance: 'neutral', size: 's' })), rowActions.first.tip), rowActions.second &&
-                                        withTip(_jsx(ButtonTonal, Object.assign({}, rowActions.second, { disabled: loading || rowActions.second.disabled, appearance: 'neutral', size: 's' })), rowActions.second.tip)] }))] })] }), bottomDivider && _jsx(Divider, { weight: 'regular' })] })));
+                                        withTip(_jsx(ButtonTonal, Object.assign({}, rowActions.second, { disabled: loading || rowActions.second.disabled, appearance: 'neutral', size: 's' })), rowActions.second.tip)] }))] })] }), bottomDivider && _jsx(Divider, { weight: 'light' })] })));
 }

package/dist/esm/components/InfoRow/styles.module.css

@@ -1,5 +1,6 @@
 .wrapper{
   width:calc(200px + var(--dimension-3m, 24px) + 496px);
+  min-height:40px;
 }
 .wrapper[data-width=full]{
   width:100%;
@@ -11,6 +12,7 @@
   -moz-column-gap:var(--dimension-3m, 24px);
        column-gap:var(--dimension-3m, 24px);
   width:100%;
+  min-height:32px;
   align-items:center;
 }
 
@@ -31,6 +33,13 @@
   justify-content:flex-start;
   height:100%;
 }
+.labelLayout[data-label-width=auto]{
+  width:auto;
+}
+
+.label{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
 
 .contentLayout{
   position:relative;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-info-row",
   "title": "Info Row",
-  "version": "0.8.30",
+  "version": "0.9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -47,5 +47,5 @@
   "peerDependencies": {
     "@cloud-ru/uikit-product-locale": "*"
   },
-  "gitHead": "ab61e93fe6f723c522e95a7c5540b3080de6b2de"
+  "gitHead": "5972121394b5b8516ee73aafb1a594100ac7c7c9"
 }

package/src/components/InfoGroup/InfoGroup.tsx

@@ -1,25 +1,58 @@
+import cn from 'classnames';
+
 import { InfoRow } from '../InfoRow';
+import styles from './styles.module.scss';
 import { DataType, InfoGroupProps } from './types';
 import { useGetContent } from './utils';
 
-export function InfoGroup<T extends DataType>({ data, items, className, loading }: InfoGroupProps<T>) {
+export function InfoGroup<T extends DataType>({
+  data,
+  items,
+  className,
+  loading,
+  columns = 'single',
+  width = 'fixed',
+}: InfoGroupProps<T>) {
   const getContent = useGetContent();
 
   return (
-    <div className={className}>
-      {items.map(({ label, accessorKey, render, ...rest }, index) => {
+    <div className={cn(styles.wrapper, className)} data-columns={columns} data-width={width}>
+      {items.map(({ label, accessorKey, render, labelClassName, className, rowClassName, ...rest }, index) => {
         const content = getContent<T>({ data, render, accessorKey });
+        const rowWidth = columns === 'double' || width === 'full' ? 'full' : 'fixed';
+        const showTopDivider = columns === 'double' ? index < 2 : index === 0;
 
         return (
-          <InfoRow
-            key={(accessorKey as string | undefined) ?? label}
-            label={label}
-            content={content}
-            topDivider={index === 0}
-            bottomDivider
-            loading={loading}
-            {...rest}
-          />
+          <div className={styles.infoRowWrapper} data-width={width} key={(accessorKey as string) || label}>
+            <InfoRow
+              label={label}
+              content={content}
+              topDivider={showTopDivider}
+              bottomDivider
+              loading={loading}
+              width={rowWidth}
+              labelClassName={cn(
+                {
+                  [styles.infoRowLabelDoubleFixed]: width === 'fixed' && columns === 'double',
+                  [styles.infoRowLabelDoubleFull]: width === 'full' && columns === 'double',
+                },
+                labelClassName,
+              )}
+              className={cn(
+                {
+                  [styles.contentDouble]: columns === 'double',
+                },
+                className,
+              )}
+              rowClassName={cn(
+                {
+                  [styles.contentDouble]: columns === 'double',
+                },
+                rowClassName,
+              )}
+              {...rest}
+            />
+          </div>
         );
       })}
     </div>

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

@@ -0,0 +1,49 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+$width: 900px;
+$gap: 48px;
+$info-row-width: 426px;
+$label-double-min-width: 100px;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &[data-columns='double'] {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: $gap;
+    max-width: $width;
+  }
+
+  &[data-width='full'] {
+    max-width: 100%;
+  }
+}
+
+.infoRowWrapper {
+  &[data-width='fixed'] {
+    width: $info-row-width;
+  }
+
+  &[data-width='full'] {
+    max-width: 100%;
+  }
+}
+
+.infoRowLabelDoubleFixed.infoRowLabelDoubleFixed {
+  width: $label-double-min-width;
+  flex-shrink: 0;
+}
+
+.infoRowLabelDoubleFull.infoRowLabelDoubleFull {
+  width: $label-double-min-width;
+  flex-grow: 0.3;
+  flex-shrink: 0;
+}
+
+.contentDouble {
+  height: 100%;
+  box-sizing: border-box;
+}

package/src/components/InfoGroup/types.ts

@@ -21,4 +21,6 @@ export type InfoGroupProps<T extends DataType> = {
   items: InfoGroupItem<T>[];
   className?: string;
   loading?: boolean;
+  columns?: 'single' | 'double';
+  width?: 'fixed' | 'full';
 };

package/src/components/InfoRow/InfoRow.tsx

@@ -23,6 +23,8 @@ export type InfoRowPropsBase = {
   topDivider?: boolean;
   bottomDivider?: boolean;
   className?: string;
+  labelClassName?: string;
+  rowClassName?: string;
   content?: ReactNode;
   rowActions?: {
     first: RowActionButton;
@@ -30,6 +32,7 @@ export type InfoRowPropsBase = {
   };
   loading?: boolean;
   width?: 'fixed' | 'full';
+  labelWidth?: 'fixed' | 'auto';
 };
 
 export type InfoRowProps = WithSupportProps<InfoRowPropsBase>;
@@ -53,15 +56,18 @@ export function InfoRow({
   labelTruncate = 1,
   loading = false,
   width = 'fixed',
+  labelClassName,
+  rowClassName,
+  labelWidth,
   ...rest
 }: InfoRowProps) {
   return (
     <div {...extractSupportProps(rest)} className={cn(styles.wrapper, className)} data-width={width}>
-      {topDivider && <Divider weight='regular' />}
+      {topDivider && <Divider weight='light' />}
 
-      <div className={styles.infoRow}>
-        <div className={styles.labelLayout}>
-          <TruncateString text={label} maxLines={labelTruncate} />
+      <div className={cn(styles.infoRow, rowClassName)}>
+        <div className={cn(styles.labelLayout, labelClassName)} data-label-width={labelWidth}>
+          <TruncateString className={styles.label} text={label} maxLines={labelTruncate} />
 
           {labelTooltip &&
             (typeof labelTooltip === 'string' ? (
@@ -103,7 +109,7 @@ export function InfoRow({
         </div>
       </div>
 
-      {bottomDivider && <Divider weight='regular' />}
+      {bottomDivider && <Divider weight='light' />}
     </div>
   );
 }

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

@@ -3,9 +3,12 @@
 $labelWidth: 200px;
 $contentWidth: 496px;
 $gap: styles-theme-variables.$dimension-3m;
+$minHeight: 40px;
+$minRowHeight: 32px;
 
 .wrapper {
   width: calc($labelWidth + $gap + $contentWidth);
+  min-height: $minHeight;
 
   &[data-width=full] {
     width: 100%;
@@ -17,6 +20,7 @@ $gap: styles-theme-variables.$dimension-3m;
   display: flex;
   column-gap: $gap;
   width: 100%;
+  min-height: $minRowHeight;
   align-items: center;
 }
 
@@ -30,6 +34,14 @@ $gap: styles-theme-variables.$dimension-3m;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
+
+  &[data-label-width='auto'] {
+    width: auto;
+  }
+}
+
+.label {
+  color: styles-theme-variables.$sys-neutral-text-support;
 }
 
 .contentLayout {