@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.86

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

@@ -3,12 +3,11 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { ProductTileContent, TextBenefit } from './ProductTileContent';
+import { Headline } from '../Headline/Headline';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -22,7 +21,7 @@ export const ProductTile = JSX<ProductTileProps>(
     context,
     className = '',
     title,
-    headingType = 'h3',
+    headlineVersion = 'S',
     description,
     additionalDescription,
     benefits,
@@ -40,17 +39,13 @@ export const ProductTile = JSX<ProductTileProps>(
         {...rest}
       >
         <div className="z-[1]">
-          {title ? (
-            <Heading
-              headingType={headingType}
-              as="h3"
-              title={title}
-              className={`whitespace-pre-wrap text-h4`}
-            />
-          ) : null}
-          {description ? (
-            <Description className="mt-2 text-md font-light" description={description} />
-          ) : null}
+          <Headline
+            context={context}
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion={headlineVersion}
+          />
           {renderBenefits(benefits || [], version)}
           {additionalDescription
             ? renderAdditionalDescription(additionalDescription, version)
@@ -73,7 +68,7 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div className="flex mt-4">
       {benefits.length ? (
-        <div className="mr-6 gap-2.5 text-title-2xs">{benefits.map(renderBenefitLabel)}</div>
+        <div className="mr-6 gap-2.5 text-h6">{benefits.map(renderBenefitLabel)}</div>
       ) : null}
       {benefits.length ? (
         <div className="pt-1 text-m">

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -1,7 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 export interface TextBenefit {
@@ -14,9 +13,7 @@ export interface TextBenefit {
 /**
  * @title Продуктовая плитка
  */
-export type ProductTileContent = HeadingContent &
-  HeadingTypeContent &
-  DescriptionContent &
+export type ProductTileContent = HeadlineProps &
   ButtonContent &
   ImageContent & {
     version?: BlockVersion;

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

@@ -3,12 +3,12 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { PromoTileContent } from './PromoTileContent';
+import { Headline } from '../Headline/Headline';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
@@ -40,11 +40,15 @@ export const PromoTile = JSX<PromoTileProps>(
           context={context}
           title={
             title ? (
-              <Heading
-                headingType={getTileHeadingType(className)}
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px]`}
-              />
+              <div>
+                <Headline
+                  context={context}
+                  title={title}
+                  className={`!p-0 max-w-[600px]`}
+                  headlineVersion={getTileHeadingType(className)}
+                  bgColorHeadline={version}
+                />
+              </div>
             ) : null
           }
           buttons={

package/mobile/src/components/PromoTile/PromoTileContent.ts

@@ -1,13 +1,13 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { DescriptionProp } from '../../model/HeadlineType';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Акции
  */
-export type PromoTileContent = HeadingContent &
-  DescriptionContent &
+export type PromoTileContent = HeadingCommonProps &
+  DescriptionProp &
   ButtonContent & {
     /** @title Дата публикации */
     date?: string;

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -1,15 +1,11 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
-export interface RecommendationCardTypes
-  extends HeadingContent,
-    DescriptionContent,
-    ListContent,
-    ImageContent {
+export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
   /**
    * @title Соц сети
    * @minItems 3
@@ -20,7 +16,7 @@ export interface RecommendationCardTypes
 /**
  * @title Рекомендации
  */
-export interface RecommendationContent extends HeadingContent {
+export interface RecommendationContent extends HeadingCommonProps {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;

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

@@ -41,7 +41,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m-md text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
+          <p className={`text-m text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
@@ -81,16 +81,10 @@ const renderStepTitle =
             className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
           >
             {step.label ? (
-              <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
+              <div className="font-medium text-m-title-xs m-0 text-left mb-1">{step.label}</div>
             ) : null}
             {step.description ? (
-              <div
-                className={`font-normal text-sm ${styleMap.description} text-left ${
-                  step.label ? 'mt-1' : ''
-                }`}
-              >
-                {step.description}
-              </div>
+              <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>
             ) : null}
           </div>
         </div>

package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts

@@ -4,6 +4,7 @@ export type StyleType = {
   background: string;
   title: string;
   description: string;
+  iconText: string;
   iconBackground: string;
   iconConnector: string;
 };
@@ -13,13 +14,15 @@ const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
     background: 'bg-white',
     title: 'text-primary-text',
     description: 'text-secondary-text',
-    iconBackground: 'bg-secondary-light',
+    iconText: 'text-secondary-text',
+    iconBackground: 'bg-main-divider',
     iconConnector: 'bg-secondary-light',
   },
   secondary: {
     background: 'bg-primary-main',
     title: 'text-white',
     description: 'text-white/80',
+    iconText: 'text-white',
     iconBackground: 'bg-white/30',
     iconConnector: 'bg-white',
   },

package/mobile/src/components/TariffsTable/TariffsTable.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type {
   TariffsTableCellData,
   TariffsTableColumn,
   TariffsTableContent,
   TariffsTableRowHeader,
 } from './TariffsTableContent';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { TariffsTableVertical } from './TariffsTableVertical';
 import { TariffsTableHorizontal } from './TariffsTableHorizontal';
+import { TariffsTableVertical } from './TariffsTableVertical';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
@@ -16,17 +16,14 @@ export const TariffsTable = JSX<TariffsTableProps>(
   ({ className, context, title, description, columns, rowHeaders, orientation = 'vertical' }) => {
     const colData = getColData(columns);
     const tiles = getTiles(rowHeaders, colData);
+    const headingMargin = description ? 'mb-2' : 'mb-5';
 
     return (
       <section
         className={`px-4 py-6 bg-white font-sans text-primary-text overflow-x-hidden ${className}`}
       >
         {title ? (
-          <Heading
-            headingType="h2"
-            className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-            title={title}
-          />
+          <Heading headingType="h2" className={`text-center ${headingMargin}`} title={title} />
         ) : null}
         {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
         {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}

package/mobile/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,11 +1,10 @@
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { CellData } from '../ComparisonTable/ComparisonTableContent';
+import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
 
 /**
  * @title Ряд
@@ -43,24 +42,23 @@ export type TariffsTableCellData = CellData &
 /**
  * @title Параметр
  */
-export type TariffsTableRowHeader = HeadingContent & {
+export type TariffsTableRowHeader = TitleProp & {
   icon?: Picture;
 };
 
 /**
  * @title Таблица тарифов
  */
-export type TariffsTableContent = HeadingContent &
-  DescriptionContent & {
-    /** @title Колонки */
-    columns?: TariffsTableColumn[];
-    /** @title Параметры */
-    rowHeaders?: TariffsTableRowHeader[];
-    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
-    orientation?: ListOrientation;
-    /** @title Скрывать строк */
-    hiddenRowsNum?: number;
-  };
+export type TariffsTableContent = HeadlineCommonProps & {
+  /** @title Колонки */
+  columns?: TariffsTableColumn[];
+  /** @title Параметры */
+  rowHeaders?: TariffsTableRowHeader[];
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  orientation?: ListOrientation;
+  /** @title Скрывать строк */
+  hiddenRowsNum?: number;
+};
 
 /** @hidden */
 export type TariffsTableTileCellProps = {

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

@@ -40,6 +40,7 @@ export const TextBlock = JSX<TextBlockProps>(
     isDotted = true,
   }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
+    const listBlockVersion = blockVersion === 'secondary' ? 'secondary' : 'gray';
 
     return (
       <section
@@ -59,7 +60,7 @@ export const TextBlock = JSX<TextBlockProps>(
               className="mt-1 text-m-md"
               items={items}
               isDotted={isDotted}
-              version={blockVersion === 'secondary' ? 'secondary' : 'gray'}
+              version={listBlockVersion}
             />
           ) : null}
         </div>

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

@@ -1,7 +1,6 @@
 {
   "title": "Плитка",
   "headingType": "h3",
-  "titleSize": "M",
   "description": "Описание",
   "image": {
     "format": "webp",

package/mobile/src/components/Tile/Tile.tsx

@@ -1,7 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import type { TileContent } from './TileContent';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -10,7 +11,6 @@ import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
@@ -53,7 +53,7 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h3"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
+              className={`whitespace-pre-wrap max-w-[600px] text-h4
               ${version === 'primary' ? 'text-primary-text' : ''}`}
             />
           ) : null
@@ -67,13 +67,10 @@ export const Tile = JSX<TileProps>((props) => {
             />
           ) : null
         }
-        image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+        image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description
-            className="max-w-[600px] text-title-new-sm font-light"
-            description={description}
-          />
+          <Description className="max-w-[600px] text-xl-light mt-2" description={description} />
         ) : null}
         {children}
         {renderList(items, version, isDotted)}
@@ -83,12 +80,14 @@ export const Tile = JSX<TileProps>((props) => {
 });
 
 function renderList(items, version, isDotted: boolean) {
+  const listVersion = version === 'primary' ? 'tile' : 'tile-white';
+
   return items?.length ? (
     <List
       items={items}
       isDotted={isDotted}
-      itemClassName="text-title-2xs font-light mt-2"
-      version={version === 'primary' ? 'tile' : 'tile-white'}
+      itemClassName="text-h6 font-light mt-2"
+      version={listVersion}
     />
   ) : null;
 }

package/mobile/src/components/Tile/TileContent.ts

@@ -1,16 +1,15 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { DescriptionProp } from '../../model/HeadlineType';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title Плитка
  */
-export type TileContent = HeadingContent &
-  HeadingTypeContent &
-  DescriptionContent &
+export type TileContent = HeadingCommonProps &
+  DescriptionProp &
   ListContent &
   ButtonContent &
   ImageContent & {