update

src/ts/components/Cards/components/Card.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { IColumn } from 'ts/components/Table/interfaces/Column';
 
 import Line from './Line';
+import LineWithTemplate from './LineWithTemplate';
 import Title from './Title';
 import style from '../styles/index.module.scss';
 
@@ -19,6 +20,7 @@ function Card({
   className,
   customStyle,
 }: ICardProps) {
+  let alreadySetHeader = false;
   const parts = lines.map((line: IColumn, columnIndex: number) => {
     const value = line.properties
       ? item[line.properties]
@@ -28,13 +30,13 @@ function Card({
       ? line.formatter(value)
       : value;
 
-    if (typeof line.template === 'function') {
-      return line.template(formattedValue, item);
-    }
+    const hasTemplate = typeof line.template === 'function';
+    const content = hasTemplate // @ts-ignore
+      ? line.template(formattedValue, item)
+      : `${line.prefixes ?? ''}${formattedValue ?? ''}${line.suffixes ?? ''}`;
 
-    const content = `${line.prefixes ?? ''}${formattedValue ?? ''}${line.suffixes ?? ''}`;
-
-    if (!columnIndex) {
+    if (!alreadySetHeader && line.title) {
+      alreadySetHeader = true;
       return (
         <Title
           key={`${line.title}_${columnIndex}`}
@@ -45,6 +47,17 @@ function Card({
       );
     }
 
+    if (hasTemplate && (!line.width || (line.width && line.width > 110))) {
+      return (
+        <LineWithTemplate
+          key={`${line.title}_${columnIndex}`}
+          item={item}
+          column={line}
+          value={content}
+        />
+      );
+    }
+
     return (
       <Line
         key={`${line.title}_${columnIndex}`}

src/ts/components/Cards/components/Line.tsx

@@ -17,17 +17,21 @@ function Line({
   item,
   value,
   className,
-}: ILineProps): JSX.Element {
+}: ILineProps): JSX.Element | null {
   const { t } = useTranslation();
   const columnClassName = typeof column.className === 'function'
     ? column.className('body', item)
     : column.className;
 
+  const type = typeof value;
+  if (!column.title
+   || type === 'undefined'
+   || value === ''
+   || (type === 'number' && isNaN(value as number))
+   || (type === 'object' && !value)) return null;
+
   return (
-    <div
-      key={column.title}
-      className={`${style.card_line} ${className || ''} ${columnClassName || ''}`}
-    >
+    <div className={`${style.card_line} ${className || ''} ${columnClassName || ''}`}>
       <div className={style.card_line_title}>
         {t(column.title || '')}
       </div>

src/ts/components/Cards/helpers/getCardConfigs.ts

@@ -8,9 +8,13 @@ function getCardConfigs(
     column: IColumn,
     index: number,
   ) => {
+    if (index === 0) {
+      acc.text.push(column);
+      return acc;
+    }
+
     const nextColumn = dirtyColumns[index + 1];
-    if (column.template === ColumnTypesEnum.SHORT_NUMBER
-      && typeof nextColumn?.template === 'function') {
+    if (column.template === ColumnTypesEnum.SHORT_NUMBER && typeof nextColumn?.template === 'function') {
       acc.text.push({
         ...column,
         title: nextColumn?.title,

src/ts/components/Cards/styles/index.module.scss

@@ -1,15 +1,18 @@
 @import 'src/styles/variables';
 
 .card {
+  position: relative;
   display: inline-block;
   width: 100%;
-  padding: var(--space-s);
+  padding: var(--space-xxl) var(--space-s) var(--space-s);
   margin: 0 var(--space-xxl) var(--space-xxl) 0;
-  border-radius: var(--border-radius-m);
-  border: 1px solid var(--color-border);
+
   page-break-inside: avoid;
   box-sizing: border-box;
   vertical-align: top;
+
+  border-radius: var(--border-radius-m);
+  border: 1px solid var(--color-border);
   background-color: var(--color-white);
 
   &_wrapper {
@@ -18,21 +21,36 @@
   }
 
   &_title {
+    position: absolute;
+    top: -13px;
+    left: 20%;
+    right: 20%;
+
     font-size: var(--font-m);
     font-weight: bold;
-    display: block;
+    display: inline-block;
+    padding: var(--space-xxs) var(--space-s);
     margin: 0 0 var(--space-l);
 
     line-height: 1.3;
-    white-space: normal;
+    white-space: nowrap;
+    overflow: hidden;
     text-overflow: ellipsis;
     text-align: center;
+
+    border-radius: var(--border-radius-s);
+    border: 1px solid var(--color-border);
+    background-color: var(--color-white);
   }
 
   &_line {
-    display: block;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    padding: var(--space-xxs) var(--space-xxs) var(--space-xxxs);
+
     white-space: nowrap;
-    padding: var(--space-xxs);
     box-sizing: border-box;
     border: none;
 
@@ -40,26 +58,52 @@
     &_value {
       font-size: var(--font-s);
       position: relative;
+
       display: inline-block;
+      width: max-content;
+
       line-height: 1.3;
       white-space: normal;
       text-overflow: ellipsis;
       vertical-align: top;
       box-sizing: border-box;
       text-align: left;
-    }
 
-    &_title {
-      width: 60%;
+      color: var(--color-42);
     }
 
     &_value {
-      width: 40%;
       text-align: right;
     }
   }
+
+  &_line_with_template {
+    display: block;
+    text-align: center;
+    margin-top: var(--space-xxs);
+    border-top: 2px dotted var(--color-border);
+
+    &_title {
+      font-size: var(--font-s);
+
+      display: block;
+      padding: var(--space-xxs) var(--space-xxs) var(--space-xxs);
+
+      line-height: 1.3;
+      white-space: normal;
+      text-overflow: ellipsis;
+      vertical-align: top;
+      box-sizing: border-box;
+
+      color: var(--color-42);
+    }
+  }
 }
 
 .card_line + .card_line {
   border-top: 1px solid var(--color-border);
 }
+
+.card_line_with_template > .line_chart  {
+  margin-top: 0;
+}

src/ts/components/UiKit/components/Tags.tsx

@@ -13,6 +13,7 @@ function UiKitTags({
 }: IUiKitTagsProps) {
   const values = Array.isArray(value) ? value : [value];
   const formattedValues = values.filter((v) => v);
+  if (!formattedValues?.length) return null;
 
   const items = formattedValues
     .map((tagValue: any) => (
@@ -22,6 +23,8 @@ function UiKitTags({
       />
     ));
 
+  if (!items?.length) return null;
+
   return (
     <div className={style.ui_kit_tags}>
       {items}

src/ts/components/UiKit/styles/tags.module.scss

@@ -7,7 +7,7 @@
   &_item {
     display: inline-block;
     padding: var(--space-xxxs) var(--space-xs);
-    margin: 0 var(--space-xs) var(--space-xs) 0;
+    margin: 0 0 var(--space-xs) 0;
 
     font-size: var(--font-s);
     font-weight: 100;
@@ -25,3 +25,7 @@
     color: var(--color-black);
   }
 }
+
+.ui_kit_tags_item + .ui_kit_tags_item {
+  margin-right: var(--space-xs);
+}