@redneckz/wildless-cms-uni-blocks 0.2.89 → 0.2.93

package/src/components/TariffsTable/TariffsTable.tsx

@@ -0,0 +1,74 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+import type { UniBlockProps } from '../../types';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Title } from '../../ui-kit/Title/Title';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { TariffsTableRow } from './TariffsTableRow';
+
+export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
+
+export const TariffsTable = JSX<TariffsTableProps>(
+  ({ className, context, title, rowHeaders, columns }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      header,
+      data: colData.map((col) => col?.[i] || [{}]),
+    }));
+
+    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
+      useComparisonTableScroll({
+        colData,
+        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+        activeCardIndex,
+        setActiveCardIndex,
+      });
+
+    return (
+      <section
+        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <div role="table">
+          {rowData?.length ? (
+            <div className="relative">
+              {rowData.map((row, i, { length }) => (
+                <TariffsTableRow
+                  key={String(i)}
+                  row={row}
+                  isLastRow={i + 1 === length}
+                  activeCardIndex={activeCardIndex}
+                />
+              ))}
+              {isScrollAvailable ? (
+                <div>
+                  <div className="absolute top-7 right-7 z-10">
+                    <ArrowButton
+                      onClick={nextClick}
+                      disabled={!showNextButton}
+                      ariaLabel="Пролистать вправо"
+                    />
+                    <ArrowButton
+                      className="mt-4 rotate-180"
+                      onClick={prevClick}
+                      disabled={!showPrevButton}
+                      ariaLabel="Пролистать влево"
+                    />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+          {isScrollAvailable ? (
+            <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DIVIDER_CLASSES } from './constants';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { TariffsTableCellData } from './TariffsTableContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export interface TariffsTableCellProps {
+  cell: TariffsTableCellData[];
+  isLastRow: boolean;
+}
+
+export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow }) => {
+  const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
+    isLastRow ? 'border-t-0 rounded-b-md' : ''
+  }`;
+
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div className={cellClasses}>{cell.map((item, i) => renderCellInner(item, i))}</div>
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div key={String(i)} className="first:pt-5 last:pb-5">
+    {i > 0 && (
+      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
+    )}
+    {label && <div className="text-xl font-medium m-0">{label}</div>}
+    {description && <div className="text-sm text-secondary-text">{description}</div>}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div role="list">
+          {list.items.map((text, idx) => (
+            <BlockItem
+              key={String(idx)}
+              text={text}
+              version={list.version ?? 'secondary'}
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={image} />}
+    {buttons?.length
+      ? buttons.map(({ icon, ...buttonProps }, idx) => (
+          <Button
+            className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
+            key={String(idx)}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" />}
+            {...buttonProps}
+          />
+        ))
+      : null}
+  </div>
+);

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -0,0 +1,61 @@
+import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { BlockItemVersion } from '../../ui-kit/BlockItem/BlockItemProps';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Ряд
+ */
+export type TariffsTableRowData = {
+  header: TariffsTableRowHeader;
+  data: TariffsTableCellData[][];
+};
+
+/**
+ * @title Колонка
+ */
+export interface TariffsTableColumn {
+  /** @title Данные */
+  data?: TariffsTableCellData[][];
+}
+
+/**
+ * @title Список
+ */
+export interface TariffsTableList {
+  version?: BlockItemVersion;
+  /** @title Маркеры */
+  isDotted?: boolean;
+  /** @title Элементы списка */
+  items?: string[];
+}
+
+/**
+ * @title Ячейка
+ */
+export interface TariffsTableCellData extends CellData {
+  list?: TariffsTableList;
+  image?: Picture;
+  /** @title Кнопки */
+  buttons?: BaseTileIconButton[];
+}
+
+/**
+ * @title Параметр
+ */
+export interface TariffsTableRowHeader extends RowHeader {
+  icon?: IconName;
+}
+
+/**
+ * @title Таблица тарифов
+ */
+export interface TariffsTableContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Колонки */
+  columns?: TariffsTableColumn[];
+  /** @title Параметры */
+  rowHeaders?: TariffsTableRowHeader[];
+}

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { TariffsTableCell } from './TariffsTableCell';
+import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
+import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
+import type { TariffsTableRowData } from './TariffsTableContent';
+
+export interface TariffsTableRowProps {
+  className?: string;
+  row: TariffsTableRowData;
+  activeCardIndex: number;
+  isLastRow: boolean;
+}
+
+export const TariffsTableRow = JSX<TariffsTableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isLastRow }) => {
+    return (
+      <TableRowContainer>
+        <div
+          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          <div className="flex items-center text-primary-text">
+            {header?.icon && (
+              <Icon className="pr-[14px]" name={header.icon} width="24px" height="24px" />
+            )}
+            {header?.title}
+          </div>
+        </div>
+        {data?.length ? (
+          <TableCarouselContainer
+            activeCardIndex={activeCardIndex}
+            columnWidth={COLUMN_WIDTH}
+            version="tariff"
+          >
+            {data.map((cell, i) => (
+              <TariffsTableCell key={String(i)} cell={cell} isLastRow={isLastRow} />
+            ))}
+          </TableCarouselContainer>
+        ) : null}
+      </TableRowContainer>
+    );
+  },
+);

package/src/components/TariffsTable/constants.ts

@@ -0,0 +1,4 @@
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px

package/src/components/TextBlock/TextBlock.example.json

@@ -1,6 +1,13 @@
 {
-  "title": "Заголовок",
+  "title": "Текстовый блок",
   "description": "Описание",
   "blockVersion": "primary",
-  "iconVersion": "small"
+  "iconVersion": "small",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 48,
+      "height": 48
+    }
+  }
 }

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -1,6 +1,7 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { TextBlock } from './TextBlock';
-import type { Picture } from '../../model/Picture';
+import { TextBlockContent } from './TextBlockContent';
 
 const image: Picture = {
   src: 'bank-card.png',
@@ -11,50 +12,31 @@ const image: Picture = {
   },
 };
 
+export const TEXT_BLOCK: TextBlockContent = {
+  title: 'Все карты Россельхозбанка работают',
+  description:
+    "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
+};
+
 export default (
   <div className="font-sans overflow-hidden">
     <div>
       <p>Private clients</p>
       <div className="flex flex-col gap-6" data-theme="pc">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="primary"
           iconVersion="big"
           image={image}
         />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="none"
-        />
-        <TextBlock
-          context={context}
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />
@@ -63,24 +45,11 @@ export default (
     <div>
       <p>Business clients</p>
       <div className="flex flex-col gap-6" data-theme="bc">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />
@@ -89,24 +58,11 @@ export default (
     <div>
       <p>Ecosystem own</p>
       <div className="flex flex-col gap-6" data-theme="eo">
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
+        <TextBlock context={context} {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
         <TextBlock
           context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="primary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
-          blockVersion="secondary"
-          iconVersion="small"
-        />
-        <TextBlock
-          context={context}
-          title="Все карты Россельхозбанка работают"
-          description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка"
+          {...TEXT_BLOCK}
           blockVersion="secondary-light"
           iconVersion="small"
         />

package/src/components/TextBlock/TextBlock.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Picture } from '../../model/Picture';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
@@ -54,7 +54,7 @@ export const TextBlock = JSX<TextBlockProps>(
 
 function renderIcon(className: string) {
   return (
-    <div className={`pt-1.5 pr-4`}>
+    <div className={`pt-1.5 pl-1 pr-4`}>
       <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
     </div>
   );

package/src/components/TextBlock/TextBlockContent.ts

@@ -18,9 +18,8 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 export interface TextBlockContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Описание */
   description?: string;
-  blockVersion?: TextBlockVersion;
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
+  blockVersion?: TextBlockVersion;
 }

package/src/components/Tile/Tile.example.json

@@ -6,7 +6,9 @@
     "format": "webp",
     "size": {
       "width": 300
-    }
+    },
+    "alt": "Описание картинки",
+    "title": "Подсказка"
   },
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
@@ -14,5 +16,6 @@
       "text": "Подробнее",
       "version": "primary"
     }
-  ]
+  ],
+  "version": "primary"
 }

package/src/components/Tile/Tile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BaseTile } from '../BaseTile/BaseTile';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { TileContent } from '../Tile/TileContent';
 import type { UniBlockProps } from '../../types';
 import { getColSpan } from '../../utils/getColSpan';
+import { BaseTile } from '../BaseTile/BaseTile';
+import type { TileContent } from '../Tile/TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {}
 
@@ -17,16 +17,16 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 min-h-[320px] box-border ${className || ''} ${
+      className={`font-sans p-9 box-border ${className || ''} ${
         tileStyleMap[version]
-      } ${getContainerPaddingRight(className)} `}
+      } ${getContainerPaddingRight(className)} ${getContainerMinHeight(className)} `}
     >
       <BaseTile {...props}>{children}</BaseTile>
     </section>
   );
 });
 
-function getContainerPaddingRight(className: string = '') {
+function getContainerPaddingRight(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 6) {
     return 'pr-9';
@@ -36,3 +36,14 @@ function getContainerPaddingRight(className: string = '') {
     return 'pr-[9.4rem]';
   }
 }
+
+function getContainerMinHeight(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 6) {
+    return 'min-h-[300px]';
+  } else if (colSpan <= 8) {
+    return 'min-h-[320px]';
+  } else {
+    return 'min-h-[360px]';
+  }
+}

package/src/content-page-repository/ContentPageRepository.ts

@@ -8,6 +8,7 @@ import { transformContentPage } from './transformContentPage';
 const INDEX_PAGE_SLUG = 'index';
 const find = util.promisify(glob);
 
+// eslint-disable-next-line max-lines-per-function
 export function ContentPageRepository({
   contentDir = 'content',
   publicDir = 'public',

package/src/hooks/useComparisonTableScroll.ts

@@ -0,0 +1,21 @@
+export const useComparisonTableScroll = <ColData>({
+  colData,
+  colsLengthForScroll,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  colData: ColData[];
+  colsLengthForScroll: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (_: number) => void;
+}) => {
+  const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isScrollAvailable = colData?.length && colData.length > colsLengthForScroll;
+  const showNextButton =
+    isScrollAvailable && colData?.length - activeCardIndex > colsLengthForScroll;
+  const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+
+  return { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton };
+};

package/src/hooks/useLink.ts

@@ -2,7 +2,7 @@ import { HandlerDecorator, Router } from '../components/ContentPage/ContentPageC
 import type { LinkProps } from '../model/LinkProps';
 import { adjustHref, isURL } from '../utils/url';
 
-const defaultHandlerDecorator: HandlerDecorator = (handler, targetContent) => handler;
+const defaultHandlerDecorator: HandlerDecorator = (handler) => handler;
 
 export function useLink(
   {

package/src/model/TableVersion.ts

@@ -0,0 +1 @@
+export type TableVersion = 'comparison' | 'tariff';

package/src/ui-kit/BlockItem/BlockItem.fixture.tsx

@@ -2,4 +2,11 @@ import '../../setup-fixture';
 
 import { BlockItem } from './BlockItem';
 
-export default <BlockItem text="Совершайте любые личные покупки" />;
+export default {
+  primary: <BlockItem text="Совершайте любые личные покупки" />,
+  'primary without dot': <BlockItem text="Совершайте любые личные покупки" isDotted={false} />,
+  secondary: <BlockItem text="Совершайте любые личные покупки" version="secondary" />,
+  'secondary without dot': (
+    <BlockItem text="Совершайте любые личные покупки" isDotted={false} version="secondary" />
+  ),
+};

package/src/ui-kit/BlockItem/BlockItem.tsx

@@ -1,33 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-type BlockItemVersion = 'primary' | 'secondary';
-export interface BlockItemContent {
-  text?: string;
-}
-
-export interface BlockItemProps extends BlockItemContent {
-  className?: string;
-  version?: BlockItemVersion;
-}
+import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const listStyleMap: Record<BlockItemVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
+  primary: 'bg-primary-main w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2 rounded-full',
+  secondary: 'bg-secondary-text w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
 };
 
 const textStyleMap: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: 'text-white',
+  secondary: 'text-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className, text, children, version = 'primary' }) => {
+  ({ className, isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`inline-block flex ${className || ''}`} role="listitem">
-        <div
-          className={`inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}`}
-        ></div>
-        <span className={`text-base font-normal font-sans mx-3 ${textStyleMap[version]}`}>
+        {isDotted && <div className={`inline-block mr-3 ${listStyleMap[version]}`} />}
+        <span className={`text-base font-normal font-sans mr-3 ${textStyleMap[version]}`}>
           {text || children}
         </span>
       </div>

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -0,0 +1,22 @@
+/**
+ * @title Версия списка
+ */
+export type BlockItemVersion = 'primary' | 'secondary';
+
+/**
+ * @title Содержимое элемента блока
+ */
+export interface BlockItemContent {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Параметры элемента блока
+ */
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+  /** @title Маркер */
+  isDotted?: boolean;
+}