@redneckz/wildless-cms-uni-blocks 0.7.1 → 0.7.2

package/mobile/src/components/HorizontalLayout/gapStyles.ts

@@ -0,0 +1,11 @@
+import type { GapVersion } from './HorizontalLayoutContent';
+
+export const gapStyles: Record<GapVersion, string> = {
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
+  S: 'gap-2',
+  XS: 'gap-1',
+  '': '',
+};

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -22,7 +22,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
 
     return (
       <BlockWrapper
-        className={`box-border py-12 overflow-hidden relative font-sans w-100 bg-white ${className}`}
+        className={`box-border py-12 overflow-hidden relative w-100 ${className}`}
         {...rest}
       >
         {title ? <Heading className="text-center mb-8" title={title} headingType="h3" /> : null}

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -44,7 +44,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
   }
 
   return (
-    <BlockWrapper className={`font-sans bg-white px-9 py-12 ${className}`} {...rest}>
+    <BlockWrapper className={`px-9 py-12 ${className}`} {...rest}>
       <div className="container text-m-light">
         {colums?.length ? (
           <div>

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -1,5 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
@@ -16,22 +18,23 @@ export const LinkDocs = JSX<LinkDocsProps>(
     documents,
     orientation = 'vertical',
     hasBorder = true,
+    align,
     ...rest
   }) => (
-    <section
-      className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
-    >
+    <BlockWrapper className={style('py-6 px-4 overflow-x-hidden', className)} {...rest}>
       <Headline
         className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
         title={title}
         description={description}
-        {...rest}
+        align={align}
+        headlineVersion="M"
+        as="h2"
       />
       {orientation === 'vertical' ? (
         <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
       ) : (
         <LinkDocsHorizontalList hasBorder={hasBorder} documents={documents} icon={icon} />
       )}
-    </section>
+    </BlockWrapper>
   ),
 );

package/mobile/src/components/LinkDocs/LinkDocsList.tsx

@@ -21,7 +21,7 @@ export const LinkDocsList = JSX<LinkDocsListProps>(
             role="listitem"
           >
             <LinkDocsListItem
-              className="group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              className="group/item flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
               doc={doc}
               icon={icon}
             />

package/mobile/src/components/LinkList/LinkList.tsx

@@ -7,7 +7,7 @@ import type { LinkListContent } from './LinkListContent';
 export interface LinkListProps extends LinkListContent, UniBlockProps {}
 
 export const LinkList = JSX<LinkListProps>(({ className = '', documents, ...rest }) => (
-  <BlockWrapper className={`font-sans bg-white mt-2.5 ${className}`} {...rest}>
+  <BlockWrapper className={`mt-2.5 ${className}`} {...rest}>
     <ul className="flex flex-col text-s text-secondary-text p-0">
       {documents?.length ? renderLinkListItem(documents) : null}
     </ul>

package/mobile/src/components/MiniGallery/MiniGallery.tsx

@@ -6,5 +6,5 @@ import type { MiniGalleryContent } from './MiniGalleryContent';
 export interface MiniGalleryProps extends MiniGalleryContent, UniBlockProps {}
 
 export const MiniGallery = JSX<MiniGalleryProps>((props) => (
-  <GalleryInner {...props} version="mini" />
+  <GalleryInner {...props} galleryVersion="mini" />
 ));

package/mobile/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -13,7 +13,7 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={`font-sans bg-white p-8 flex flex-col ${className}`} {...rest}>
+    <BlockWrapper className={`p-8 flex flex-col ${className}`} {...rest}>
       {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
       {servicesList?.length ? (
         <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>

package/mobile/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -6,14 +6,12 @@ import type { ParagraphBlockContent } from './ParagraphBlockContent';
 
 interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
 
-export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
-  const { className, text, size, color, align, font, ...rest } = props;
-
-  return (
-    <BlockWrapper className={className} {...rest}>
-      <Paragraph size={size} color={color} align={align} font={font}>
-        {text}
+export const ParagraphBlock = JSX<ParagraphBlockProps>(
+  ({ text, size, align, font, children, ...rest }) => (
+    <BlockWrapper {...rest}>
+      <Paragraph size={size} align={align} font={font}>
+        {text || children}
       </Paragraph>
     </BlockWrapper>
-  );
-});
+  ),
+);

package/mobile/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -1,9 +1,12 @@
-import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+import type { FontWeight, TextAlign, TextSize } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Параграф
  */
-export interface ParagraphBlockContent extends ParagraphProps {
+export interface ParagraphBlockContent {
+  size?: TextSize;
+  align?: TextAlign;
+  font?: FontWeight;
   /** @title Текст */
   text?: string;
 }

package/mobile/src/components/PictureText/PictureText.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
@@ -19,24 +18,14 @@ export const PictureText = JSX<PictureTextProps>(
     description,
     image,
     benefits,
-    version = 'primary',
     sum,
     monthLimit,
     directionRight = false,
+    version = 'primary',
     ...rest
   }) => (
-    <BlockWrapper
-      className={`relative font-sans py-12 px-24 ${VersionStyleMap[version]} ${className}`}
-      {...rest}
-    >
-      <Headline
-        className="!p-0"
-        title={title}
-        description={description}
-        headlineVersion="M"
-        bgColorHeadline={version}
-        {...rest}
-      />
+    <BlockWrapper className={`relative py-12 px-24 ${className}`} version={version} {...rest}>
+      <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
       <div className={'flex justify-center gap-[122px] mt-[30px]'}>
         {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
         <div className="w-[558px] m-auto">

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -15,9 +16,12 @@ export const Placeholder = JSX<PlaceholderProps>(
   ({ className, title, description = 'Блок в разработке...', ...rest }) => {
     return (
       <BlockWrapper
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
+        className={style(
+          'p-9 box-border',
           className,
-        )} ${getTileMinHeight(className)} `}
+          getTileRightPadding(className),
+          getTileMinHeight(className),
+        )}
         {...rest}
       >
         <Headline
@@ -25,7 +29,6 @@ export const Placeholder = JSX<PlaceholderProps>(
           title={title}
           description={description}
           headlineVersion={getTileHeadingType(className)}
-          {...rest}
         />
         <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
       </BlockWrapper>

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
-  const { className = '', version = 'primary' } = props;
+  const { className = '', ...rest } = props;
 
   return (
-    <section className={`font-sans bg-white px-4 py-6 ${VersionStyleMap[version]} ${className}`}>
+    <BlockWrapper className={`px-4 py-6 ${className}`} {...rest}>
       <ProductBlockInner {...props} />
-    </section>
+    </BlockWrapper>
   );
 });

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
+import { Text } from '../../ui-kit/Text/Text';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { Headline } from '../Headline/Headline';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
@@ -24,37 +25,32 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
     isDotted = true,
     label,
+    title,
+    description,
     ...rest
-  }) => {
-    return (
-      <div className={`w-full ${className}`}>
-        <div>
-          {label ? renderLabel(label, version) : null}
-          <Headline
-            className="!p-0 max-w-[600px]"
-            bgColorHeadline={version}
-            headlineVersion={headlineVersion}
-            {...rest}
-          />
-          <BaseTile
-            buttons={
-              buttons?.length ? (
-                <ButtonSection buttons={buttons} className="flex flex-col mt-5 gap-2.5" />
-              ) : null
-            }
-          >
-            {benefits?.filter((_) => _.label)?.length ? (
-              <div className="mt-3">{benefits.map(renderBenefit(version, benefitsVersion))}</div>
-            ) : null}
-            {items?.length ? (
-              <List className="mt-3 text-m" items={items} version={version} isDotted={isDotted} />
-            ) : null}
-          </BaseTile>
-        </div>
-        {renderImage(image)}
+  }) => (
+    <BlockWrapper className={`w-full ${className}`} version={version} {...rest}>
+      <div>
+        {label ? renderLabel(label) : null}
+        <Headline
+          className="!p-0 max-w-[600px]"
+          title={title}
+          description={description}
+          headlineVersion={headlineVersion}
+          align="text-left"
+        />
+        <BaseTile buttons={renderButtonsSection(buttons, { className: 'mt-5', isVertical: true })}>
+          {benefits?.filter((_) => _.label)?.length ? (
+            <div className="mt-3">{benefits.map(renderBenefit(version, benefitsVersion))}</div>
+          ) : null}
+          {items?.length ? (
+            <List className="mt-3 text-m" items={items} isDotted={isDotted} />
+          ) : null}
+        </BaseTile>
       </div>
-    );
-  },
+      {renderImage(image)}
+    </BlockWrapper>
+  ),
 );
 
 function renderImage(image?: Picture) {
@@ -63,15 +59,8 @@ function renderImage(image?: Picture) {
   ) : null;
 }
 
-const labelStyleMap: Record<BlockVersion, string> = {
-  primary: 'text-primary-main border-secondary-hover',
-  secondary: 'text-white/80',
-};
-
-const renderLabel = (label: string, version: BlockVersion) => (
-  <div
-    className={`px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
-  >
-    {label}
+const renderLabel = (label: string) => (
+  <div className="w-fit px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid border-secondary-hover">
+    <Text color="text-primary-main group-data-secondary:text-white/80">{label}</Text>
   </div>
 );

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -1,9 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
-import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
@@ -17,19 +14,8 @@ interface NavButtonProps {
   i: number;
   isActive: boolean;
   onClick: () => void;
-  version: BlockVersion;
 }
 
-type StyleType = {
-  title: string;
-  text: string;
-};
-
-const productBlockStyleMap: Record<BlockVersion, StyleType> = {
-  primary: { title: 'text-secondary-text', text: 'text-secondary-text' },
-  secondary: { title: 'text-white', text: 'text-white/80' },
-};
-
 export const ProductGallery = JSX<ProductGalleryProps>(
   ({ className = '', slides = [], version = 'primary', ...rest }) => {
     const galleryNav = slides.map((s) => s.nav);
@@ -39,8 +25,8 @@ export const ProductGallery = JSX<ProductGalleryProps>(
 
     return (
       <BlockWrapper
-        className={`box-border pt-12 overflow-hidden relative font-sans w-100 mb-6 ${className}
-        ${VersionStyleMap[version]}`}
+        className={`box-border pt-12 overflow-hidden relative w-100 mb-6 ${className}`}
+        version={version}
         {...rest}
       >
         <div
@@ -58,7 +44,6 @@ export const ProductGallery = JSX<ProductGalleryProps>(
               i,
               isActive: Boolean(i === activeSlideIndex),
               onClick: () => handleActiveSlideIndex(i),
-              version,
             }),
           )}
         </div>
@@ -68,9 +53,6 @@ export const ProductGallery = JSX<ProductGalleryProps>(
 );
 
 function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i: number) {
-  const { version } = block;
-  const additionalClass = version ? productBlockStyleMap[version].title : '';
-
   return (
     <section
       key={String(i)}
@@ -79,7 +61,7 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-12 z-10 ${additionalClass}`}
+          className="pl-12 z-10 text-secondary-text group-data-secondary:text-white"
           textBlockClassName="mb-[154px]"
           headlineVersion="XXL"
           {...block}
@@ -89,17 +71,16 @@ function renderProductBlock(block: ProductBlockInnerContent & UniBlockProps, i:
   );
 }
 
-function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProps) {
+function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
     ? 'bg-white shadow-dark-blue min-w-[350px] border-none p-6'
-    : `min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur
-      ${VersionStyleMap[version]}`;
+    : 'min-w-[290px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10 px-6 py-5 backdrop-blur';
   const btnTitleClassName = isActive
     ? 'text-primary-text !text-h6 p-2'
-    : `text-l pb-1 ${productBlockStyleMap[version].title}`;
+    : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
   const btnDescClassName = isActive
     ? 'text-secondary-text text-l-light'
-    : `text-m-light ${productBlockStyleMap[version].text}`;
+    : 'text-m-light text-secondary-text group-data-secondary:text-white/80';
 
   return (
     <button
@@ -107,13 +88,11 @@ function renderNavButton({ slide, i, isActive, onClick, version }: NavButtonProp
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border relative overflow-hidden border border-white/50 cursor-pointer text-left mx-1 grow basis-0
-        ${btnClassName} ${BorderVersionStyleMap[version]}
-      `}
+      className={`relative box-border overflow-hidden cursor-pointer text-left mx-1 grow basis-0 border border-gray group-data-secondary:border-white/50 ${btnClassName}`}
     >
       <div className="border-0 px-6">
         <div className={`last:pb-0 ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-secondary-text  ${btnDescClassName}`}>{slide?.description}</div>
+        <div className={`text-secondary-text ${btnDescClassName}`}>{slide?.description}</div>
       </div>
     </button>
   );

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -3,6 +3,7 @@ import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockConte
 
 /** @title Кнопка под слайдом */
 export interface ProductGalleryNav {
+  /** @title Заголовок */
   title: string;
   /** @title Описание */
   description: string;

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -1,10 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { style } from '../../utils/style';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { Benefit, ProductTileContent } from './ProductTileContent';
@@ -25,37 +24,35 @@ export const ProductTile = JSX<ProductTileProps>(
     buttons,
     image,
     isImageOnRightSide = true,
-    version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 box-border relative min-h-[364px]
-          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`}
+      className={style(
+        'overflow-hidden p-9 box-border relative min-h-[364px]',
+        getTileRightPadding(className),
+        className,
+      )}
       {...rest}
     >
-      <div className={`flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`}>
+      <div className={style('flex flex-col', isImageOnRightSide ? '' : 'items-end')}>
         <Headline
-          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
-          as="h2"
+          className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
           title={title}
           description={description}
           headlineVersion={headlineVersion}
-          bgColorHeadline={version}
+          as="h2"
           align="text-left"
-          {...rest}
         />
-        {renderBenefits(benefits, version, image)}
+        {renderBenefits(benefits, image)}
         {renderAdditionalDescription(additionalDescription, image)}
-        {buttons?.length ? (
-          <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
-        ) : null}
+        {renderButtonsSection(buttons, { className: 'mt-5 z-10 text-l' })}
       </div>
       {renderImage(image, isImageOnRightSide)}
     </BlockWrapper>
   ),
 );
 
-function renderBenefits(benefits: Benefit[], version: BlockVersion, image?: Picture) {
+function renderBenefits(benefits: Benefit[], image?: Picture) {
   if (!benefits.length) {
     return null;
   }
@@ -68,7 +65,7 @@ function renderBenefits(benefits: Benefit[], version: BlockVersion, image?: Pict
       className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
         ${benefitsWidth}`}
     >
-      {benefits.length ? benefits.map(renderBenefit(version)) : null}
+      {benefits.length ? benefits.map(renderBenefit) : null}
     </div>
   );
 }

package/mobile/src/components/ProductTile/renderAdditionalDescription.tsx

@@ -1,18 +1,7 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 
-const DESCRIPTION_STYLE_MAP: Record<BlockVersion, TextColor> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
-export function renderAdditionalDescription(
-  additionalDescription?: string,
-  image?: Picture,
-  version: BlockVersion = 'primary',
-) {
+export function renderAdditionalDescription(additionalDescription?: string, image?: Picture) {
   if (!additionalDescription) {
     return null;
   }
@@ -22,7 +11,7 @@ export function renderAdditionalDescription(
 
   return (
     <div className={`mt-2.5 z-10 ${descriptionWidth}`}>
-      <Paragraph size="text-m" font="font-light" color={DESCRIPTION_STYLE_MAP[version]}>
+      <Paragraph size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
         {additionalDescription}
       </Paragraph>
     </div>

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -1,17 +1,9 @@
-import type { BlockVersion } from '../../model/BlockVersion';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
-import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import type { Benefit } from './ProductTileContent';
 
-const LABEL_STYLE_MAP: Record<BlockVersion, TextColor> = {
-  primary: 'text-secondary-text',
-  secondary: 'text-white',
-};
-
 export const renderBenefit =
-  (version: BlockVersion = 'primary') =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
   (benefit: Benefit, i: number) => {
@@ -27,7 +19,12 @@ export const renderBenefit =
           <Text key={`label-${i}`} size="text-h6">
             {benefit.label}
           </Text>,
-          <Text key={`desc-${i}`} size="text-m-light" color={LABEL_STYLE_MAP[version]}>
+          <Text
+            key={`desc-${i}`}
+            size="text-m"
+            font="font-light"
+            color="group-data-primary:text-secondary-text"
+          >
             {benefit.description}
           </Text>,
         ];

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
+import { style } from '../../utils/style';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -18,33 +18,32 @@ export const PromoTile = JSX<PromoTileProps>(
     title = 'Акции и спецпредложения',
     date,
     description,
+    as,
     buttons = [],
-    version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
-        VersionStyleMap[version]
-      } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+      className={style(
+        'p-9 box-border',
+        className,
+        getTileRightPadding(className),
+        getTileMinHeight(className),
+      )}
       {...rest}
     >
       <BaseTile
         title={
           title ? (
             <Headline
+              className="!p-0 max-w-[600px]"
               title={title}
-              className={`!p-0 max-w-[600px]`}
               headlineVersion={getTileHeadingType(className)}
-              bgColorHeadline={version}
               align="text-left"
-              as="h2"
-              {...rest}
+              as={as || 'h2'}
             />
           ) : null
         }
-        buttons={
-          buttons?.length ? <ButtonSection buttons={buttons} className="flex gap-3" /> : null
-        }
+        buttons={renderButtonsSection(buttons)}
       >
         <div className="mt-1.5">
           {date ? <div className="text-s mb-2">{formatDate(date)}</div> : null}