@redneckz/wildless-cms-uni-blocks 0.2.116 → 0.3.0

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { LinkDocsList } from './LinkDocsList';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+import { LinkDocsList } from './LinkDocsList';
 
 const titleAlignStyleMap: Record<AlignType, string> = {
   left: 'text-left',
@@ -37,11 +37,11 @@ export const LinkDocs = JSX<LinkDocsProps>(
       <section className={`font-sans p-[50px] bg-white ${className}`}>
         {title ? (
           <Heading
-            type="h2"
+            headingType="h2"
             className={`${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${
               titleAlignStyleMap[align ?? 'center']
             }`}
-            text={title}
+            title={title}
           />
         ) : null}
         {subtitle ? (

package/src/components/LinkDocs/linkDocsContentExample.ts

@@ -3,7 +3,6 @@ import type { LinkDocsContent } from './LinkDocsContent';
 export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
   subtitle: 'Ответы на часто задаваемые вопросы',
-  icon: 'DocIcon',
   documents: [
     { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -12,7 +12,7 @@ const image: Picture = {
   title: 'domovoj-kupon',
 };
 
-const defaultProps: MiniGalleryProps = {
+export const defaultProps: MiniGalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   context,

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,32 +1,59 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { MobileAppTileContent } from './MobileAppTileContent';
-import { Tile } from '../Tile/Tile';
 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 { MobileAppTileContent } from './MobileAppTileContent';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, context, title = 'Мобильное приложение', qr, buttons = [] }) => {
+  ({ className = '', context, title = 'Мобильное приложение', qr, buttons = [] }) => {
     return (
-      <Tile className={className} context={context} title={title} buttons={buttons}>
-        <div className="flex items-center">
-          {qr?.src && qr?.href && (
-            <a href={qr.href} target="_blank">
-              <img
-                src={qr.src}
-                alt={title}
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
+          className,
+        )} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title && (
+              <Heading
+                headingType={getTileHeadingType(className)}
                 title={title}
-                width="164"
-                height="164"
-                className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+                className={`whitespace-pre-wrap max-w-[600px]`}
               />
-            </a>
-          )}
-          <span className="font-normal text-sm text-secondary-text ml-4">
-            Наведите камеру телефона на QR-код и скачайте приложение
-          </span>
-        </div>
-      </Tile>
+            )
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+        >
+          <div className="flex items-center">
+            {qr?.src && qr?.href && (
+              <a href={qr.href} target="_blank">
+                <img
+                  src={qr.src}
+                  alt={title}
+                  title={title}
+                  width="164"
+                  height="164"
+                  className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+                />
+              </a>
+            )}
+            <span className="font-normal text-sm text-secondary-text ml-4">
+              Наведите камеру телефона на QR-код и скачайте приложение
+            </span>
+          </div>
+        </BaseTile>
+      </section>
     );
   },
 );

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,4 +1,6 @@
-import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 /**
  * @title QR код
@@ -13,17 +15,11 @@ export interface QRCode {
 /**
  * @title Мобильное приложение
  */
-export interface MobileAppTileContent {
-  /** @title Заголовок */
-  title?: string;
-  description?: string;
-  /**
-   * @title Кнопки
-   * @maxItems 4
-   */
-  buttons?: BaseTileIconButton[];
-  // TODO: description для мобильной версии
-  qr?: QRCode;
-  /** @title Ссылка */
-  href?: string; // TODO: для мобильной версии
-}
+export type MobileAppTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent & {
+    // TODO: description для мобильной версии
+    qr?: QRCode;
+    /** @title Ссылка */
+    href?: string; // TODO: для мобильной версии
+  };

package/src/components/PictureText/PictureText.tsx

@@ -4,15 +4,15 @@ import type { PictureTextContent } from './PictureTextContent';
 
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
-export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
+export const PictureText = JSX<PictureTextProps>(({ className = '', title, image, benefits }) => {
   return (
     <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
-      <Heading type="h2" className="text-center" text={title} />
+      <Heading headingType="h2" className="text-center" title={title} />
       <div className={'flex justify-center mt-9'}>
         {image?.src && <Img className="mr-6" image={image} />}
         {benefits?.length ? (
@@ -32,6 +32,7 @@ function renderBenefit(benefit: Benefit, i: number) {
           name={benefit.icon}
           width="48"
           height="48"
+          asSVG
         />
       )}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">

package/src/components/PictureText/PictureTextContent.ts

@@ -1,10 +1,13 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+export type TitleWithImageContent = HeadingContent & ImageContent;
+
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
+export interface PictureTextContent extends TitleWithImageContent {
   /** @title Список преимуществ */
   benefits?: Benefit[];
 }

package/src/components/Placeholder/PlaceholderContent.ts

@@ -1,6 +1,6 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+
 /**
  * @hidden
  */
-export interface PlaceholderContent {
-  title?: string;
-}
+export type PlaceholderContent = HeadingContent;

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -19,6 +19,7 @@ export default {
         className="col-span-12"
         context={context}
         title={'Потребительский кредит наличными'}
+        headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={[
           {
@@ -74,6 +75,7 @@ export default {
         context={context}
         className="col-span-12"
         title={'Потребительский кредит наличными'}
+        headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={[
@@ -131,6 +133,7 @@ export default {
         className="col-span-12"
         context={context}
         title={'Оплата проходит \nв 180 странах мира'}
+        headingType="h2"
         breadcrumbs={[]}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         items={[

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,20 +1,31 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
-export interface ProductBlockInnerCommonProps extends BaseTileCommonProps {
-  /**
-   * @title Преимущества
-   * @minItems 2
-   * @maxItems 3
-   */
-  benefits?: Benefit[];
-}
+export type ProductBlockInnerContent = HeadingContent &
+  HeadingTypeContent &
+  DescriptionContent &
+  ListContent &
+  ButtonContent &
+  ImageContent & {
+    /**
+     * @title Преимущества
+     * @minItems 2
+     * @maxItems 3
+     */
+    benefits?: Benefit[];
+    version?: BlockVersion;
+  };
 
 /**
  * @title Продуктовый блок
  */
-export interface ProductBlockContent extends ProductBlockInnerCommonProps {
+export interface ProductBlockContent extends ProductBlockInnerContent {
   /** @title Хлебные крошки */
   breadcrumbs?: LinkProps[];
 }

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

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+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 { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    headingType,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,21 +25,32 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`${className || ''}`}>
+      <div className={`${className}`}>
         <div>
           <BaseTile
             context={context}
-            title={title}
-            headingType={headingType || 'h2'}
-            description={description}
-            items={items}
-            buttons={buttons}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && <Description description={description} />}
             {benefits?.length ? (
               <div className="mt-[19px]">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && (

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+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 { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export type ProductBlockInnerProps = ProductBlockInnerCommonProps & UniBlockProps;
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    headingType,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,22 +25,34 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
+      <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={'flex flex-col'}>
           <BaseTile
             context={context}
-            title={title}
-            headingType={headingType || 'h2'}
-            description={description}
-            items={items}
-            buttons={buttons}
-            version={version}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && (
+              <Description className="mt-4 max-w-[600px]" description={description} />
+            )}
             {benefits?.length ? (
               <div className="flex gap-6 mt-6 mb-3.5">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && <Img className="mt-auto" image={image} />}

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

@@ -20,6 +20,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
       <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>

package/src/components/ProductBlock/renderBenefit.tsx

@@ -24,6 +24,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
       <div className="flex gap-1 flex-col h-full max-w-[149px]">

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -44,6 +44,7 @@ export default (
           },
           productBlock: {
             title: 'Ставка от 12,5% годовых на срок до 5 лет!',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -67,6 +68,7 @@ export default (
           },
           productBlock: {
             title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -90,6 +92,7 @@ export default (
           },
           productBlock: {
             title: 'Дополнительные бонусные баллы за покупки!',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -113,6 +116,7 @@ export default (
           },
           productBlock: {
             title: 'Карты Unionpay',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
 
@@ -38,7 +38,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerCommonProps, i: number, context) {
+function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
   return (
     <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
       <div className="p-10 flex grow">

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

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { HeadingType } from '../../ui-kit/Heading/HeadingProps';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
   headingType?: HeadingType;
-  block?: ProductBlockInnerCommonProps;
+  block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
@@ -14,7 +14,7 @@ export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
     return (
       <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
         <div className="flex grow">
-          <ProductBlockInner context={context} headingType={headingType} {...block} />
+          <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>
       </section>
     );

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { HeadingType } from '../../ui-kit/Heading/HeadingProps';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
   headingType?: HeadingType;
-  block?: ProductBlockInnerCommonProps;
+  block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
@@ -17,7 +17,7 @@ export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
           <ProductBlockInner
             className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
             context={context}
-            headingType={headingType}
+            headingType={headingType || 'h2'}
             {...block}
           />
         </div>

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,4 +1,4 @@
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -15,7 +15,7 @@ export interface ProductSlide {
   /** @title Превью содержимого слайда на навигации */
   nav?: ProductGalleryNav;
   /** @title Содержимое слайда */
-  productBlock: ProductBlockInnerCommonProps;
+  productBlock: ProductBlockInnerContent;
 }
 
 /**

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -2,6 +2,7 @@ import { context } from '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { ProductTile } from './ProductTile';
+import { ProductTileContent } from './ProductTileContent';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -21,6 +22,33 @@ const building: Picture = {
   format: 'webp',
 };
 
+export const PRODUCT_TILE: ProductTileContent = {
+  title: 'Акция! “Кредит На все, что хочется!”',
+  description: 'Потребительский кредит на любые цели, без залога и поручительства',
+  benefits: [
+    {
+      label: 'до 5 млн Р',
+      description: 'Кредитный лимит',
+    },
+    {
+      label: 'от 12,5%',
+      description: 'Процентная ставка',
+    },
+    {
+      label: 'до 5 лет',
+      description: 'Срок кредитования',
+    },
+  ],
+  buttons: [
+    {
+      text: 'Подробнее',
+      href: '/credit-cards',
+      version: 'secondary',
+    },
+  ],
+  image: cardWithMoney,
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">