@redneckz/wildless-cms-uni-blocks 0.3.85 → 0.3.87

package/src/components/PromoTile/PromoTile.example.json

@@ -2,6 +2,7 @@
   "title": "Акции и спецпредложения",
   "date": "2022-04-16",
   "description": "Пенсионный кредит по специальной процентной ставке",
+  "headlineVersion": "M",
   "buttons": [
     {
       "text": "Все акции",

package/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,16 @@ 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}
+                  align="left"
+                />
+              </div>
             ) : null
           }
           buttons={
@@ -55,7 +60,7 @@ export const PromoTile = JSX<PromoTileProps>(
         >
           <div className="mt-1.5">
             {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
-            <div className="text-base">{description}</div>
+            <div className="text-l">{description}</div>
           </div>
         </BaseTile>
       </BlockWrapper>

package/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/src/components/Recommendation/Recommendation.fixture.tsx

@@ -3,24 +3,44 @@ import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import { Recommendation, RecommendationProps } from './Recommendation';
 
-const creditCard: Picture = {
-  src: 'credit-card-1.png',
+const cowCard: Picture = {
+  src: 'cow-card.png',
   format: 'webp',
   size: {
-    width: 180,
-    height: 180,
+    width: 290,
+    height: 290,
   },
-  title: 'credit-card-1',
+  title: 'cow-card',
 };
 
-const chair: Picture = {
-  src: 'chair.png',
+const productBasket: Picture = {
+  src: 'product-basket.png',
   format: 'webp',
   size: {
-    width: 180,
-    height: 180,
+    width: 290,
+    height: 290,
   },
-  title: 'chair',
+  title: 'product-basket',
+};
+
+const five: Picture = {
+  src: '5.svg',
+  format: 'webp',
+  size: {
+    width: 268,
+    height: 218,
+  },
+  title: 'five',
+};
+
+const card: Picture = {
+  src: '120.png',
+  format: 'webp',
+  size: {
+    width: 268,
+    height: 218,
+  },
+  title: '120',
 };
 
 const socialMedia: LinkProps[] = [
@@ -35,31 +55,58 @@ export const defaultProps: RecommendationProps = {
   recommendations: [
     {
       title: 'РоссельхозБанк',
-      items: ['Свежие новости', 'Акции и предложения', 'Ставки и катировки'],
-      image: chair,
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: cowCard,
       socialMedia,
     },
     {
       title: 'Своё Родное',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: productBasket,
       socialMedia,
     },
     {
       title: 'Своё Фермерство',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: cowCard,
       socialMedia,
     },
     {
       title: 'Кредитные карты',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: productBasket,
     },
     {
       title: 'Кредитные карты',
       description: 'Льготный период 120 дней',
-      image: creditCard,
+      image: cowCard,
+    },
+  ],
+};
+
+export const shortProps: RecommendationProps = {
+  context,
+  title: 'Также интересуются',
+  recommendations: [
+    {
+      title: 'Кредиты',
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: five,
+    },
+    {
+      title: 'Кредитная карта с длинным заголовком',
+      description: 'Льготный период 120 дней',
+      image: card,
+    },
+    {
+      title: 'Кредиты',
+      items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
+      image: five,
+    },
+    {
+      title: 'Кредитная карта с длинным заголовком',
+      description: 'Льготный период 120 дней',
+      image: card,
     },
   ],
 };
@@ -85,4 +132,9 @@ export default {
       <Recommendation className="col-span-12" {...defaultProps} version="secondary" />
     </div>
   ),
+  'secondary private short': (
+    <div className="container grid grid-cols-12" data-theme="pc">
+      <Recommendation className="col-span-12" {...shortProps} version="secondary" />
+    </div>
+  ),
 };

package/src/components/Recommendation/Recommendation.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { RecommendationCard } from './RecommendationCard';
@@ -26,23 +26,25 @@ export const Recommendation = JSX<RecommendationProps>(
         className={`relative font-sans p-9 overflow-hidden text-center ${blockClassName} ${className}`}
         {...rest}
       >
-        {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
-        <div
-          className="flex duration-1000 gap-3.5"
-          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
-          role="list"
-        >
-          {recommendations?.length
-            ? recommendations.map(
-                renderRecommendationCard({ context, version, className: cardClassName }),
-              )
-            : null}
+        {title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
+        <div>
+          <div
+            className="flex duration-1000 gap-3.5"
+            style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+            role="list"
+          >
+            {recommendations?.length
+              ? recommendations.map(
+                  renderRecommendationCard({ context, version, className: cardClassName }),
+                )
+              : null}
+          </div>
+          {renderNavButtons({
+            cardsCount: recommendations.length,
+            activeCardIndex,
+            setActiveCardIndex,
+          })}
         </div>
-        {renderNavButtons({
-          cardsCount: recommendations.length,
-          activeCardIndex,
-          setActiveCardIndex,
-        })}
         <div
           className={`${BLUR_BLOCK_CLASSES} left-0 ${
             version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
@@ -93,7 +95,7 @@ const renderNavButtons = ({
         handler: [handlePrevClick, handleNextClick],
         isShown: [showPrevButton, showNextButton],
         btnClass: ['left-8', 'right-8'],
-        className: 'top-1/2 mt-6',
+        className: 'top-1/2 mt-3',
       })}
     </div>
   );

package/src/components/Recommendation/RecommendationCard.tsx

@@ -15,35 +15,40 @@ export interface RecommendationCardProps extends RecommendationCardTypes, UniBlo
 
 export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
+    const tileTitle = title ? (
+      <Heading headingType="h5" as="h3" className="font-normal mb-3.5 z-10" title={title} />
+    ) : null;
+    const tileImage = image?.src ? (
+      <Img className="absolute bottom-0 right-0 m-0" image={image} />
+    ) : null;
+
     return (
       <section
-        className={`border border-solid box-border p-[30px] min-w-[524px] ${className}`}
+        className={`relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`}
         role="listitem"
       >
         <BaseTile
           context={context}
           className="flex justify-between"
-          title={
-            title ? (
-              <Heading headingType="h4" as="h3" className="font-normal mb-3.5" title={title} />
-            ) : null
-          }
-          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+          title={tileTitle}
+          image={tileImage}
         >
-          {description ? <Description className="text-left" description={description} /> : null}
+          {description ? <Description className="mb-2" description={description} /> : null}
           {items?.length ? (
             <List
-              className="text-md text-left font-light flex flex-col flex-1 gap-2"
+              className="text-md font-light flex flex-col flex-1 gap-2 max-w-[236px]"
               items={items}
               version={version}
             />
           ) : null}
-          <SocialMedia
-            className="pt-[42px] pb-0"
-            media={socialMedia}
-            version={version}
-            context={context}
-          />
+          {socialMedia ? (
+            <SocialMedia
+              className="pt-[42px] pb-0"
+              media={socialMedia}
+              version={version}
+              context={context}
+            />
+          ) : null}
         </BaseTile>
       </section>
     );

package/src/components/Recommendation/RecommendationContent.ts

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

package/src/components/StepsBlock/StepsBlock.mobile.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}
@@ -84,9 +84,7 @@ const renderStepTitle =
               <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.description}
-              </div>
+              <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>
             ) : null}
           </div>
         </div>

package/src/components/StepsBlock/StepsBlock.tsx

@@ -41,7 +41,12 @@ export const StepsBlock = JSX<StepsBlockProps>(
         {...rest}
       >
         {title ? (
-          <Heading headingType="h2" className="max-w-[47rem] text-center mb-9" title={title} />
+          <Heading
+            headingType="h3"
+            as="h2"
+            className="max-w-[47rem] text-center mb-9"
+            title={title}
+          />
         ) : null}
         {steps?.length ? (
           <div className="box-border">
@@ -50,7 +55,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 steps.map(renderStepIcon(styleMap)),
               )}
             </div>
-            <div className={`flex justify-between ${stepGap}`}>
+            <div className={`flex justify-between whitespace-pre-line ${stepGap}`}>
               {steps.map(renderStepTitle(styleMap, Boolean(button?.text)))}
             </div>
           </div>
@@ -67,14 +72,14 @@ const renderStepIcon =
   (styleMap: StyleType) =>
   ({ icon }: Step, i: number) => {
     return (
-      <div key={String(i)} className="flex flex-col items-center text-center relative">
+      <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 ${styleMap.iconBackground}`}
+          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}`}
         >
           {checkIsIconRenderable(icon) ? (
             <Img image={icon} width="48" height="48" asSVG />
           ) : (
-            <span className={`font-normal text-title-sm ${styleMap.title}`}>{i + 1}</span>
+            <span className={`text-h4 ${styleMap.iconText}`}>{i + 1}</span>
           )}
         </div>
       </div>
@@ -85,23 +90,19 @@ const renderStepTitle = (styleMap: StyleType, isMainButton: boolean) => (step: S
   return (
     <div
       key={String(i)}
-      className="flex flex-col items-center justify-between text-center relative w-[276px] whitespace-pre-line overflow-hidden"
+      className="flex flex-col items-center justify-between text-center w-[276px] overflow-hidden"
     >
       <div>
-        {step.label ? <div className="font-normal text-xl-light m-0 mt-4">{step.label}</div> : null}
+        {step.label ? <div className="text-xl m-0 mt-4">{step.label}</div> : null}
         {step.description ? (
-          <div
-            className={`font-light text-base ${styleMap.description} ${
-              step.label ? 'mt-2' : 'mt-4'
-            }`}
-          >
+          <div className={`text-l ${styleMap.description} ${step.label ? 'mt-2' : 'mt-4'}`}>
             {step.description}
           </div>
         ) : null}
       </div>
       {step?.button?.text && !isMainButton ? (
         <Button
-          className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
+          className="mt-8 py-4 w-full max-w-[240px]"
           version="primary"
           href={step?.button?.href}
         >

package/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/src/components/TariffsTable/TariffsTable.tsx

@@ -56,7 +56,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
             title={title}
           />
         ) : null}
-        {description ? <div className="mb-9 text-center text-m-base">{description}</div> : null}
+        {description ? <div className="mb-9 text-center text-l">{description}</div> : null}
         {rowData?.length ? (
           <Foldable
             blocks={foldableBlocks}

package/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/src/components/TextBlock/TextBlock.fixture.mobile.tsx

@@ -21,6 +21,7 @@ const items = [
 export const TEXT_BLOCK: TextBlockContent = {
   title: 'Все карты Россельхозбанка работают',
   description:
+    /* eslint-disable max-len */
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };
 

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

@@ -15,6 +15,7 @@ const image: Picture = {
 export const TEXT_BLOCK: TextBlockContent = {
   title: 'Все карты Россельхозбанка работают',
   description:
+    /* eslint-disable max-len */
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };
 

package/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;
@@ -37,8 +37,6 @@ export const Tile = JSX<TileProps>((props) => {
     ...rest
   } = props;
 
-  const headingTextClassName = version === 'primary' ? 'text-primary-text' : '';
-
   return (
     <BlockWrapper
       context={context}
@@ -55,7 +53,8 @@ export const Tile = JSX<TileProps>((props) => {
               headingType={headingType}
               as="h3"
               title={title}
-              className={`whitespace-pre-wrap max-w-[600px] mb-3 ${headingTextClassName}`}
+              className={`whitespace-pre-wrap max-w-[600px] text-h4
+              ${version === 'primary' ? 'text-primary-text' : ''}`}
             />
           ) : null
         }
@@ -68,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)}
@@ -90,7 +86,7 @@ function renderList(items, version, isDotted: boolean) {
     <List
       items={items}
       isDotted={isDotted}
-      itemClassName="text-title-2xs font-light mt-2"
+      itemClassName="text-h6 font-light mt-2"
       version={listVersion}
     />
   ) : null;

package/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 & {