@redneckz/wildless-cms-uni-blocks 0.8.21 → 0.8.23

package/src/components/RollupItem/RollupItemContent.ts

@@ -1,13 +1,13 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { LabelProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Сворачивающаяся секция
  */
-export type RollupItemContent = LabelProps & {
-  /** @title Отображать в раскрытом виде */
-  isExpanded?: boolean;
-  /** @title Кнопка сверху */
-  isFoldButtonOnTop?: boolean;
-  version?: BlockVersion;
-};
+export type RollupItemContent = UniBlockContent &
+  LabelProps & {
+    /** @title Отображать в раскрытом виде */
+    isExpanded?: boolean;
+    /** @title Кнопка сверху */
+    isFoldButtonOnTop?: boolean;
+  };

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,7 +1,8 @@
 import type { Footnote } from '../../model/Footnote';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 
 /**
  * @title Аренда сейфовых ячеек
  */
-export type SafeDepositRentalContent = Footnote & TitleProps;
+export type SafeDepositRentalContent = UniBlockContent & Footnote & TitleProps;

package/src/components/StepsBlock/StepsBlock.example.json

@@ -4,6 +4,8 @@
     "title": "Шаги",
     "description": "Описание",
     "showLines": true,
+    "size": "normal",
+    "stepVersion": "gray",
     "steps": [
       {
         "label": "Шаг №1",
@@ -20,7 +22,7 @@
           "text": "Кнопка",
           "target": "_blank",
           "version": "primary"
-        }
+        } 
       },
       {
         "label": "Шаг №2",

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -65,6 +65,7 @@ const BUTTONS: DefaultStep['button'][] = [
 const STEPS_WITH_BUTTONS_AND_ICONS: Step[] = STEPS_WITH_ICONS.map((step, i) => ({
   ...step,
   button: BUTTONS[i],
+  stepVersion: 'primary',
 }));
 
 const STEPS_WITH_LIST_PROPS: StepsBlockProps = {
@@ -75,6 +76,7 @@ const STEPS_WITH_LIST_PROPS: StepsBlockProps = {
 const STEPS_WITH_LIST_AND_DESC_PROPS: StepsBlockProps = {
   ...COMMON_PROPS,
   steps: STEPS_WITH_ICONS.map((step) => ({ ...step, items: ITEMS })),
+  stepVersion: 'secondary',
 };
 
 const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
@@ -84,6 +86,8 @@ const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
     button: { text: 'Оформить' },
   })),
   title: TITLE,
+  stepVersion: 'primary',
+  size: 'small',
 };
 
 export default {

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -10,7 +10,7 @@ import { assertUnreachable } from '../../utils/assertUnreachable';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
 import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
-import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -24,6 +24,8 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-12',
 };
 
+const styleMap = STEPS_BLOCK_STYLE;
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
@@ -34,31 +36,27 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
     ...rest
-  }) => {
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
-
-    return (
-      <BlockWrapper
-        className={`box-border px-4 py-6 flex flex-col ${className}`}
-        version={version}
-        {...rest}
-      >
-        {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
-        {description ? (
-          <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-            {description}
-          </p>
-        ) : null}
-        {steps?.length ? (
-          <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-            <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map(renderStep(size, version, showLines))}
-            </div>
+  }) => (
+    <BlockWrapper
+      className={`box-border px-4 py-6 flex flex-col ${className}`}
+      version={version}
+      {...rest}
+    >
+      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {description ? (
+        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          {description}
+        </p>
+      ) : null}
+      {steps?.length ? (
+        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
+          <div className="flex flex-col justify-between gap-x-[101px]">
+            {steps.map(renderStep(size, version, showLines))}
           </div>
-        ) : null}
-      </BlockWrapper>
-    );
-  },
+        </div>
+      ) : null}
+    </BlockWrapper>
+  ),
 );
 
 // TODO: Create universal function for this case
@@ -88,7 +86,6 @@ const renderDefaultStep =
   (step: DefaultStep, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -119,7 +116,6 @@ const renderDefaultStep =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';

package/src/components/StepsBlock/StepsBlock.tsx

@@ -1,18 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Button } from '../../ui-kit/Button/Button';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { joinList } from '../../utils/joinList';
-import { style } from '../../utils/style';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { renderStep } from './renderStep';
+import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+import { style } from '../../utils/style';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
-import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -26,13 +26,15 @@ export const StepsBlock = JSX<StepsBlockProps>(
     showLines = true,
     steps = [],
     button,
+    size = 'normal',
     version = 'primary',
+    stepVersion = 'gray',
     title,
     ...rest
   }) => {
     const shortGaps = steps.length > 3;
 
-    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
+    const styleMap = STEPS_BLOCK_STYLE;
 
     const lineOpacity = getLineOpacity(showLines);
     const paddingX = getPaddingX(steps.length);
@@ -49,14 +51,14 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {...rest}
       >
         {title ? (
-          <Heading headingType="h3" className="max-w-[752px] text-center mb-9" title={title} />
+          <Heading headingType="h4" className="max-w-[752px] text-center mb-9" title={title} />
         ) : null}
         {steps?.length ? (
           <div className="box-border">
             <div className={style('flex items-center', paddingX)}>
-              {joinList(<div className={style('h-0.5 w-full bg-secondary-light', lineOpacity)} />)(
-                steps.map(renderStepIcon(styleMap, version)),
-              )}
+              {joinList(
+                <div className={style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity)} />,
+              )(steps.map(renderStepIcon(styleMap, size, stepVersion)))}
             </div>
             <div
               className={style(
@@ -68,25 +70,30 @@ export const StepsBlock = JSX<StepsBlockProps>(
             </div>
           </div>
         ) : null}
-        {button?.text ? <Button className="mt-8 min-w-60" version="primary" {...button} /> : null}
+        {button?.text ? renderButtonsSection([button], { className: 'mt-8 min-w-60' }) : null}
       </BlockWrapper>
     );
   },
 );
 
 const renderStepIcon =
-  (styleMap: StyleType, version?: BlockVersion) =>
-  ({ icon }: Step, i: number) =>
-    (
-      <div key={String(i)} className="flex flex-col items-center text-center">
-        <div
-          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center ${styleMap.iconBackground}`}
-        >
-          {checkCanRenderIcon(icon) ? (
-            <Img image={getIconWithVersion(icon || {}, version)} width="48" height="48" asSVG />
-          ) : (
-            <span className={`text-h4 ${styleMap.iconText}`}>{i + 1}</span>
-          )}
-        </div>
-      </div>
+  (styleMap: StyleType, size: string, stepVersion: BlockVersion) =>
+  ({ icon }: Step, i: number) => {
+    const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
+
+    return (
+      <BlockWrapper
+        key={String(i)}
+        className={`${styleStepIconSize} flex justify-center items-center text-center rounded-full p-[26px] box-border z-10`}
+        version={stepVersion}
+      >
+        {checkCanRenderIcon(icon) ? (
+          <Img image={getIconWithVersion(icon || {}, stepVersion)} width="48" height="48" asSVG />
+        ) : (
+          <span className={`text-h4 group-data-transparent:${styleMap.iconText} text-primary-text`}>
+            {i + 1}
+          </span>
+        )}
+      </BlockWrapper>
     );
+  };

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
 import type { RichTextItem } from '../../model/RichTextItem';
 import type { SizeVersion } from '../../model/SizeVersion';
@@ -36,7 +37,7 @@ export type Step = DefaultStep | RichTextStep;
 /**
  * @title Блок шаги
  */
-export type StepsBlockContent = HeadlineCommonProps & {
+export type StepsBlockContent = UniBlockContent & HeadlineCommonProps & {
   /**
    * @title Линии
    * @default true
@@ -48,12 +49,12 @@ export type StepsBlockContent = HeadlineCommonProps & {
    * @maxItems 5
    */
   steps?: Step[];
+  stepVersion?: BlockVersion;
   /** @title Кнопка */
   button?: ButtonWithIconProps;
   /**
-   * @title Размер шагов (моб.)
+   * @title Размер шагов
    * @default normal
    */
   size?: SizeVersion; // TODO: mobile content
-  version?: BlockVersion;
 };

package/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -1,5 +1,3 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-
 export type StyleType = {
   description: string;
   iconText: string;
@@ -8,42 +6,10 @@ export type StyleType = {
   dot: string;
 };
 
-export const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    description: '!text-secondary-text text-l-light',
-    iconText: 'text-secondary-text',
-    iconBackground: 'bg-main-divider',
-    iconConnector: 'bg-secondary-light',
-    dot: 'bg-secondary-text',
-  },
-  secondary: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  gray: {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  transparent: {
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
-  '': {
-    // TODO Replace this Map with group-data-*
-    description: '!text-white/80 text-l-light',
-    iconText: 'text-white',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-    dot: 'bg-white/80',
-  },
+export const STEPS_BLOCK_STYLE: StyleType = {
+  description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
+  iconText: 'text-white group-data-primary:text-secondary-text',
+  iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
+  iconConnector: 'bg-white group-data-primary:bg-secondary-light',
+  dot: 'bg-white/80 group-data-primary:bg-secondary-text',
 };

package/src/components/SwipeListControlBlock/SwipeListControlBlock.tsx

@@ -8,10 +8,10 @@ import type { SwipeListControlBlockContent } from './SwipeListControlBlockConten
 interface SwipeListControlBlockProps extends SwipeListControlBlockContent, UniBlockProps {}
 
 export const SwipeListControlBlock: JSXBlock<SwipeListControlBlockProps> =
-  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, ...rest }) => {
+  JSX<SwipeListControlBlockProps>(({ listType, showDots, options, version, ...rest }) => {
     return (
-      <BlockWrapper {...rest}>
-        <SwipeListControl listType={listType} showDots={showDots}>
+      <BlockWrapper version={version} {...rest}>
+        <SwipeListControl listType={listType} showDots={showDots} version={version}>
           {renderChildren({ ...rest, options })}
         </SwipeListControl>
       </BlockWrapper>

package/src/components/Tabs/TabsContent.ts

@@ -1,4 +1,5 @@
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 
 /**
@@ -38,7 +39,7 @@ export type TabsMode = 'wideScreen' | 'scrollable';
 /**
  * @title Вкладки
  */
-export interface TabsContent {
+export type TabsContent = UniBlockContent & {
   /** @title Табы */
   tabs?: TabData[];
   /** @title Закрепить сверху */
@@ -50,4 +51,4 @@ export interface TabsContent {
    * @default "wideScreen"
    */
   tabsMode?: TabsMode;
-}
+};

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

@@ -24,12 +24,11 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="pc">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="big" image={image} />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="big" image={image} />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="none" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
       </div>
     </div>
@@ -38,9 +37,8 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="bc">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
       </div>
     </div>
@@ -49,9 +47,8 @@ export default {
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
         <div className="flex flex-col gap-6" data-theme="eo">
-          <TextBlock {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary" iconVersion="small" />
-          <TextBlock {...TEXT_BLOCK} blockVersion="secondary-light" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
+          <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
       </div>
     </div>

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -3,57 +3,21 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockStyleMaps: Record<TextBlockVersion, Record<string, string>> = {
-  primary: {
-    background: 'bg-white',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    icon: 'bg-white text-primary-main',
-    title: 'text-white',
-    description: 'text-white',
-  },
-  'secondary-light': {
-    background: 'bg-primary-main/10',
-    icon: 'bg-primary-main text-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-  },
-};
-
 export const TextBlock = JSX<TextBlockProps>(
-  ({
-    title,
-    description,
-    blockVersion = 'primary',
-    iconVersion,
-    image,
-    className = '',
-    items,
-    isDotted = true,
-  }) => {
-    const textBlockStyleMap = textBlockStyleMaps[blockVersion];
-
+  ({ title, description, iconVersion, image, className = '', items, isDotted = true }) => {
     return (
       <section
-        className={`font-sans px-4 py-[18px] flex flex-col ${textBlockStyleMap.background} ${className}`}
+        className={`font-sans px-4 py-[18px] flex flex-col bg-white group-data-secondary:bg-primary-main ${className}`}
       >
-        {iconVersion === 'small' ? renderIcon(textBlockStyleMap.icon) : null}
+        {iconVersion === 'small' ? renderIcon() : null}
         {iconVersion === 'big' ? renderImage(image) : null}
-        <div className="py-0.5">
-          {title ? (
-            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
-          ) : null}
-          {description ? (
-            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
-          ) : null}
+        <div className="py-0.5 text-secondary-text group-data-secondary:text-white">
+          {title ? <div className={`text-l font-medium mb-1`}>{title}</div> : null}
+          {description ? <div className={`text-s `}>{description}</div> : null}
           {items?.length ? (
             <List className="mt-1 text-m" items={items} isDotted={isDotted} />
           ) : null}
@@ -63,10 +27,12 @@ export const TextBlock = JSX<TextBlockProps>(
   },
 );
 
-function renderIcon(className: string) {
+function renderIcon() {
   return (
     <div className="mb-3">
-      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
+      <div className="rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main">
+        i
+      </div>
     </div>
   );
 }

package/src/components/TextBlock/TextBlock.tsx

@@ -6,43 +6,22 @@ import { Img } from '../../ui-kit/Img/Img';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
+import type { TextBlockContent } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
-const textBlockBack: Record<TextBlockVersion, string> = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-  'secondary-light': 'bg-primary-main/10',
-};
-
 export const TextBlock = JSX<TextBlockProps>(
-  ({
-    className = '',
-    title,
-    description,
-    blockVersion = 'primary',
-    iconVersion,
-    image,
-    __html,
-    ...rest
-  }) => {
-    const isSecondaryBlock = blockVersion === 'secondary';
-
+  ({ className = '', title, description, iconVersion, image, __html, ...rest }) => {
     return (
       <BlockWrapper
-        className={`px-9 py-4 flex gap-3 ${textBlockBack[blockVersion]} ${className}`}
+        className={`px-9 py-4 flex gap-3 bg-white group-data-secondary:bg-primary-main/10' ${className}`}
         {...rest}
       >
-        {iconVersion === 'small' ? (
-          <div className="mt-1">{renderIcon(isSecondaryBlock)}</div>
-        ) : null}
+        {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
         {iconVersion === 'big' ? renderImage(image) : null}
         <div>
-          {title ? renderTitle(title, isSecondaryBlock) : null}
-          {description ? (
-            <div className="mt-1">{renderDescription(description, isSecondaryBlock)}</div>
-          ) : null}
+          {title ? renderTitle(title) : null}
+          {description ? <div className="mt-1">{renderDescription(description)}</div> : null}
           {__html ? <RichText __html={__html} /> : null}
         </div>
       </BlockWrapper>
@@ -50,11 +29,9 @@ export const TextBlock = JSX<TextBlockProps>(
   },
 );
 
-const renderIcon = (isSecondaryBlock: boolean) => (
+const renderIcon = () => (
   <div
-    className={`rounded-full h-4 w-4 text-center text-xs-light ${
-      isSecondaryBlock ? 'bg-white text-primary-main' : 'bg-primary-main text-white'
-    }`}
+    className={`rounded-full h-4 w-4 text-center text-xs-light bg-primary-main text-white group-data-secondary:bg-white group-data-secondary:text-primary-main`}
   >
     i
   </div>
@@ -62,18 +39,14 @@ const renderIcon = (isSecondaryBlock: boolean) => (
 
 const renderImage = (image?: Picture) => (image?.src ? <Img image={image} /> : null);
 
-const renderTitle = (title: string, isSecondaryBlock: boolean) => (
-  <Text
-    size="text-l"
-    font="font-medium"
-    color={isSecondaryBlock ? 'text-white' : 'text-primary-text'}
-  >
+const renderTitle = (title: string) => (
+  <Text size="text-l" font="font-medium" color="text-primary-text group-data-secondary:text-white">
     {title}
   </Text>
 );
 
-const renderDescription = (description: string, isSecondaryBlock: boolean) => (
-  <Paragraph size="text-s" color={isSecondaryBlock ? 'text-white' : 'text-secondary-text'}>
+const renderDescription = (description: string) => (
+  <Paragraph size="text-s" color="text-secondary-text group-data-secondary:text-white">
     {description}
   </Paragraph>
 );

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,5 +1,5 @@
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { Picture } from '../../model/Picture';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
@@ -12,15 +12,15 @@ export type TextBlockVersion = 'primary' | 'secondary' | 'secondary-light';
  * @title Размер иконки
  * @enumNames ["Нет", "Маленькая", "Большая"]
  */
-export type TextBlockIconVersion = 'none' | 'small' | 'big';
+type TextBlockIconVersion = 'none' | 'small' | 'big';
 
 /**
  * @title Текстовый блок
  */
 export type TextBlockContent = HeadlineCommonProps &
-  RichTextProps & {
+  RichTextProps &
+  ImageContent & {
     iconVersion?: TextBlockIconVersion;
-    image?: Picture;
     blockVersion?: TextBlockVersion;
     /** @title Буллиты */ // TODO: mobile prop
     isDotted?: boolean;

package/src/components/Tile/TileContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockContent } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
@@ -10,7 +10,8 @@ import type { TagsContent } from '../../ui-kit/Tags/TagsContent';
 /**
  * @title Плитка
  */
-export type TileContent = HeadingCommonProps &
+export type TileContent = UniBlockContent &
+  HeadingCommonProps &
   RichTextProps &
   ListContent &
   ButtonContent &
@@ -36,5 +37,4 @@ export type TileContent = HeadingCommonProps &
      */
     isDotted?: boolean;
     listItemSize?: ListItemSize;
-    version?: BlockVersion;
   };