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

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -25,7 +25,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
         <div className="flex flex-col items-center mb-8">
           {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
           {description ? (
-            <div className="font-light text-md max-w-[600px] mt-2.5">{description}</div>
+            <div className="text-xl-light max-w-[600px] mt-2.5">{description}</div>
           ) : null}
         </div>
         <div

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -13,7 +13,7 @@ export const GracePeriod = JSX<GracePeriodProps>(
     return (
       <BlockWrapper className={`font-sans bg-white p-[50px] ${className}`} {...rest}>
         <Heading headingType="h3" className="text-center" title={title} />
-        <div className="font-light text-base-md text-center mt-3">{description}</div>
+        <div className="text-l-light-md text-center mt-3">{description}</div>
         {calendar ? renderCalendar(calendar) : null}
       </BlockWrapper>
     );
@@ -38,7 +38,7 @@ const renderCalendar = (calendar) => {
 
   return (
     <div className="w-full flex flex-col justify-center mt-[54px]">
-      <div className="flex w-full mb-3 font-light text-m-title-md text-center">
+      <div className="flex w-full mb-3 font-light text-h6 text-center">
         {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
       </div>
       <div className="flex w-full">

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -71,7 +71,7 @@ const renderDotsSubMenuItems = ({
     <a
       key={_.href}
       {...useLink({ router, handlerDecorator }, _)}
-      className={`text-base font-light pb-4 hover:text-primary-main ${
+      className={`text-l-light pb-4 hover:text-primary-main ${
         isActive(_) ? 'text-primary-main' : ''
       }`}
     >

package/mobile/src/components/Header/HeaderBurger.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
@@ -9,7 +10,7 @@ export interface HeaderBurgerProps {
   onClick: () => void;
   burgerSubMenu?: DispositionItem[];
   defaultLocation?: string;
-  children?: any;
+  children?: VNode;
 }
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(

package/mobile/src/components/Header/HeaderSubMenu.tsx

@@ -43,7 +43,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
       <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag
-            Tag="span"
+            tag="span"
             observerCallback={observerCallback(i)}
             observerOptions={{ threshold: 1 }}
             key={String(i)}

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -2,6 +2,7 @@ import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../../model/AlignType';
 import type { HeadlineProps } from '../../model/HeadlineType';
+import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 
 /**
  * @title Заголовок
@@ -10,4 +11,6 @@ export type HeadlineContent = HeadlineProps &
   ImageContent & {
     align?: AlignType;
     bgColorHeadline?: BlockVersionWithTransparent;
+    /** @hidden */
+    as?: HeadingTagType;
   };

package/mobile/src/components/Insurance/Insurance.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
 import { Headline } from '../Headline/Headline';
+import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
 
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
@@ -25,7 +25,7 @@ export const Insurance = JSX<InsuranceProps>(
           align="center"
         />
         <div>
-          <div className="mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]">
+          <div className="mx-auto flex justify-center gap-[122px] mt-[30px]">
             {image?.src ? <Img image={image} /> : null}
             <div className="w-[558px] m-auto">
               {benefits ? (
@@ -60,7 +60,7 @@ function renderBenefit(benefit: InsuranceBenefit, i: number) {
   );
 }
 
-function renderInsuranceSumMonth(sum, monthLimit) {
+function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
       {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
@@ -71,7 +71,7 @@ function renderInsuranceSumMonth(sum, monthLimit) {
   ) : null;
 }
 
-function renderValueBlock(title, sum, isAnotherBlock) {
+function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
   const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
 
   return (

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

@@ -132,7 +132,7 @@ function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProp
   );
 }
 
-function renderValueBlock(title, sum) {
+function renderValueBlock(title: string, sum: number) {
   return (
     <div className="flex flex-col text-left whitespace-pre">
       <span className="text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
@@ -141,7 +141,7 @@ function renderValueBlock(title, sum) {
   );
 }
 
-function renderDoneIcon(isActive) {
+function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
       className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`}

package/mobile/src/components/LikeControl/LikeControl.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 { LikeButton } from '../../ui-kit/Button/LikeButton';
 
 export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest }) => {
@@ -8,7 +8,7 @@ export const LikeControl = JSX<UniBlockProps>(({ className, context, ...rest })
 
   return (
     <BlockWrapper
-      Tag="div"
+      tag="div"
       context={context}
       className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
         className || ''

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -2,7 +2,7 @@ import type { LinkProps } from '../../model/LinkProps';
 import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineProps } from '../../model/HeadlineType';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Отображение списка
@@ -24,7 +24,7 @@ export interface LinkDocsItem extends LinkProps {
 /**
  * @title Список документов
  */
-export type LinkDocsContent = HeadlineProps & {
+export type LinkDocsContent = HeadlineCommonProps & {
   /**
    *  @title Иконка
    *  @default {

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -18,8 +18,8 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3 font-sans">
-              <div className="text-m-button font-medium mb-[3px]">{title}</div>
-              <div className="text-m-button text-secondary-text">{description}</div>
+              <div className="text-s font-medium mb-[3px]">{title}</div>
+              <div className="text-s text-secondary-text">{description}</div>
             </a>
           </div>
         ) : null}

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

@@ -1,7 +1,7 @@
 {
   "title": "Продукт",
   "description": "Описание",
-  "headingType": "h2",
+  "headlineVersion": "XL",
   "backwardButton": {
     "text": "Кнопка возврата",
     "icon": { "icon": "ArrowLeftIcon" }

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

@@ -36,6 +36,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             className="!p-0 max-w-[600px]"
             title={title}
             description={description}
+            bgColorHeadline={version}
             headlineVersion={headlineVersion}
           />
           <BaseTile
@@ -81,7 +82,7 @@ const labelStyleMap: Record<BlockVersion, string> = {
 
 const renderLabel = (label: string, version: BlockVersion) => (
   <div
-    className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
+    className={`px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
   >
     {label}
   </div>

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

@@ -45,6 +45,8 @@ export const ProductTile = JSX<ProductTileProps>(
             title={title}
             description={description}
             headlineVersion={headlineVersion}
+            bgColorHeadline={version}
+            align="left"
           />
           {renderBenefits(benefits || [], version)}
           {additionalDescription

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

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

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

@@ -47,6 +47,7 @@ export const PromoTile = JSX<PromoTileProps>(
                   className={`!p-0 max-w-[600px]`}
                   headlineVersion={getTileHeadingType(className)}
                   bgColorHeadline={version}
+                  align="left"
                 />
               </div>
             ) : null
@@ -59,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/mobile/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/mobile/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/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -1,9 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-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';
+import type { HeadlineCommonProps, TitleProp } from '../../model/HeadlineType';
 
 export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
   /**
@@ -16,7 +15,7 @@ export interface RecommendationCardTypes extends HeadlineCommonProps, ListConten
 /**
  * @title Рекомендации
  */
-export interface RecommendationContent extends HeadingCommonProps {
+export interface RecommendationContent extends TitleProp {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;