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

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">

package/src/components/ProductTile/ProductTile.tsx

@@ -1,27 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+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 { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import { Tile } from '../Tile/Tile';
 import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
-export const ProductTile = JSX<ProductTileProps>((props) => {
-  const { benefits, version } = props;
-  return (
-    <Tile {...props}>
-      <div className="flex mt-5 mb-1">
-        {benefits?.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
-        {benefits?.length ? (
-          <div className="pt-1">
-            {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+const productTileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const ProductTile = JSX<ProductTileProps>(
+  ({
+    context,
+    className = '',
+    title,
+    description,
+    benefits,
+    buttons,
+    image,
+    version = 'primary',
+  }) => {
+    return (
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
+          productTileStyleMap[version]
+        } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title && (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            )
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+        >
+          {description && <Description className="mt-4 max-w-[600px]" description={description} />}
+          <div className="flex mt-5 mb-1">
+            {benefits?.length ? (
+              <div className="mr-8">{benefits.map(renderBenefitLabel)}</div>
+            ) : null}
+            {benefits?.length ? (
+              <div className="pt-1">
+                {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+              </div>
+            ) : null}
           </div>
-        ) : null}
-      </div>
-    </Tile>
-  );
-});
+        </BaseTile>
+      </section>
+    );
+  },
+);
 
 function renderBenefitLabel(benefit: Benefit, i: number) {
   return (

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,13 +1,21 @@
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { TileContent } from '../Tile/TileContent';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 /**
  * @title Продуктовая плитка
  */
-export interface ProductTileContent extends TileContent {
-  /**
-   * @title Преимущества
-   * @maxItems 7
-   */
-  benefits?: Omit<Benefit, 'icon'>[];
-}
+export type ProductTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent &
+  ImageContent & {
+    version?: BlockVersion;
+    /**
+     * @title Преимущества
+     * @maxItems 7
+     */
+    benefits?: TextBenefit[];
+  };

package/src/components/PromoTile/PromoTile.tsx

@@ -1,33 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { Tile } from '../Tile/Tile';
+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';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
+const promoTileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const PromoTile = JSX<PromoTileProps>(
   ({
-    className,
+    className = '',
     context,
     title = 'Акции и спецпредложения',
     date,
     description,
     buttons = [],
-    version,
+    version = 'primary',
   }) => {
     return (
-      <Tile
-        className={className}
-        context={context}
-        title={title}
-        buttons={buttons}
-        version={version}
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
+          promoTileStyleMap[version]
+        } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       >
-        <div className="mt-1.5">
-          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
-          <div className="text-base">{description}</div>
-        </div>
-      </Tile>
+        <BaseTile
+          context={context}
+          title={
+            title ? (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            ) : null
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+        >
+          <div className="mt-1.5">
+            {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
+            <div className="text-base">{description}</div>
+          </div>
+        </BaseTile>
+      </section>
     );
   },
 );

package/src/components/PromoTile/PromoTileContent.ts

@@ -1,9 +1,15 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { BlockVersion } from '../../model/BlockVersion';
+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 Акции
  */
-export interface PromoTileContent extends BaseTileCommonProps {
-  /** @title Дата публикации */
-  date?: string;
-}
+export type PromoTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent & {
+    /** @title Дата публикации */
+    date?: string;
+    version?: BlockVersion;
+  };

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

@@ -15,7 +15,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           className || ''
         }`}
       >
-        {title && <Heading type="h3" className="text-center" text={title} />}
+        {title && <Heading headingType="h3" className="text-center" title={title} />}
         {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
@@ -82,7 +82,7 @@ const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
       className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
-        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} asSVG />) || i + 1}
       </span>
     </div>
   );

package/src/components/StepsBlock/StepsBlock.tsx

@@ -14,7 +14,7 @@ export const StepsBlock = JSX<StepsBlockProps>(({ className, title, showLines =
         className || ''
       }`}
     >
-      <Heading type="h2" className="max-w-[47rem] text-center" text={title} />
+      <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
       {steps?.length ? (
         <div className={`box-border py-0.5 mb-0.5 ${title ? 'mt-9' : ''}`}>
           <div className="flex items-center px-[88px]">

package/src/components/TariffsTable/TariffsTable.tsx

@@ -33,7 +33,11 @@ export const TariffsTable = JSX<TariffsTableProps>(
           className || ''
         }`}
       >
-        <Heading type="h2" className="max-w-[47rem] text-center mb-9 mx-auto" text={title} />
+        <Heading
+          headingType="h2"
+          className="max-w-[47rem] text-center mb-9 mx-auto"
+          title={title}
+        />
         <div role="table">
           {rowData?.length ? (
             <div className="relative">

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import type { TariffsTableCellData } from './TariffsTableContent';
 
 export interface TariffsTableCellProps {
@@ -37,9 +37,10 @@ const renderCellInner = (
         <div role="list">
           {list.items.map((text, idx) => (
             <BlockItem
+              className="text-sm"
               key={String(idx)}
               text={text}
-              version={list.version ?? 'secondary'}
+              version="gray"
               isDotted={list.isDotted ?? true}
             />
           ))}

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,8 +1,7 @@
-import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import type { Picture } from '../../model/Picture';
-import type { BlockItemVersion } from '../../ui-kit/BlockItem/BlockItemProps';
-import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
 
 /**
  * @title Ряд
@@ -24,12 +23,7 @@ export interface TariffsTableColumn {
  * @title Список
  */
 export interface TariffsTableList {
-  /** @hidden */
-  version?: BlockItemVersion;
-  /**
-   * @title Маркеры
-   * @hidden
-   */
+  /** @title Маркеры */
   isDotted?: boolean;
   /** @title Элементы списка */
   items?: string[];
@@ -42,7 +36,7 @@ export interface TariffsTableCellData extends CellData {
   list?: TariffsTableList;
   image?: Picture;
   /** @title Кнопки */
-  buttons?: BaseTileIconButton[];
+  buttons?: ButtonWithIconProps[];
 }
 
 /**

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -29,6 +29,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 name={header.icon}
                 width="24px"
                 height="24px"
+                asSVG
               />
             )}
             {header?.title}

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

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { mobileContext } from '../../setup-fixture';
 import { TextBlock } from './TextBlock';
 import { TextBlockContent } from './TextBlockContent';
 
@@ -24,27 +24,37 @@ export default (
       <div>
         <p>Private clients</p>
         <div className="flex flex-col gap-[6px]" data-theme="pc">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
           <TextBlock
-            context={context}
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="small"
+          />
+          <TextBlock
+            context={mobileContext}
             {...TEXT_BLOCK}
             blockVersion="primary"
             iconVersion="big"
             image={image}
           />
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
           <TextBlock
-            context={context}
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            blockVersion="primary"
+            iconVersion="none"
+          />
+          <TextBlock
+            context={mobileContext}
             description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
             blockVersion="primary"
           />
           <TextBlock
-            context={context}
+            context={mobileContext}
             title="Все карты Россельхозбанка работают"
             blockVersion="primary"
           />
           <TextBlock
-            context={context}
+            context={mobileContext}
             title="Все карты Россельхозбанка работают"
             blockVersion="primary"
             iconVersion="small"
@@ -61,19 +71,19 @@ export default (
         <div className="flex flex-col gap-[6px]" data-theme="bc">
           <TextBlock
             className="flex flex-col"
-            context={context}
+            context={mobileContext}
             {...TEXT_BLOCK}
             blockVersion="primary"
             iconVersion="small"
           />
           <TextBlock
-            context={context}
+            context={mobileContext}
             {...TEXT_BLOCK}
             iconVersion="small"
             blockVersion="secondary"
           />
           <TextBlock
-            context={context}
+            context={mobileContext}
             {...TEXT_BLOCK}
             iconVersion="small"
             blockVersion="secondary-light"
@@ -83,15 +93,20 @@ export default (
       <div>
         <p>Ecosystem own</p>
         <div className="flex flex-col gap-[6px]" data-theme="eo">
-          <TextBlock context={context} {...TEXT_BLOCK} iconVersion="small" blockVersion="primary" />
           <TextBlock
-            context={context}
+            context={mobileContext}
+            {...TEXT_BLOCK}
+            iconVersion="small"
+            blockVersion="primary"
+          />
+          <TextBlock
+            context={mobileContext}
             {...TEXT_BLOCK}
             iconVersion="small"
             blockVersion="secondary"
           />
           <TextBlock
-            context={context}
+            context={mobileContext}
             {...TEXT_BLOCK}
             iconVersion="small"
             blockVersion="secondary-light"

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

@@ -1,10 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
-import { Img } from '../../ui-kit/Img';
-
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
@@ -31,7 +29,16 @@ const textBlockStyleMaps: Record<TextBlockVersion, Record<string, string>> = {
 };
 
 export const TextBlock = JSX<TextBlockProps>(
-  ({ title, description, blockVersion = 'primary', iconVersion, image, className = '', items }) => {
+  ({
+    title,
+    description,
+    blockVersion = 'primary',
+    iconVersion,
+    image,
+    className = '',
+    items,
+    isDotted = true,
+  }) => {
     const textBlockStyleMap = textBlockStyleMaps[blockVersion];
     return (
       <section
@@ -46,23 +53,20 @@ export const TextBlock = JSX<TextBlockProps>(
           {description ? (
             <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
-          {items?.length ? renderItems(items) : null}
+          {items?.length ? (
+            <List
+              items={items}
+              isDotted={isDotted}
+              version="gray"
+              className="mt-1 text-m-sm text-secondary-text"
+            />
+          ) : null}
         </div>
       </section>
     );
   },
 );
 
-function renderItems(items: string[] = [], version?: BlockVersion) {
-  return (
-    <section className="mt-1" role="list">
-      {items.map((_, i) => (
-        <BlockItem key={String(i)} text={_} version={version} />
-      ))}
-    </section>
-  );
-}
-
 function renderIcon(className: string) {
   return (
     <div className="mb-3">

package/src/components/TextBlock/TextBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Picture } from '../../model/Picture';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+import { Img } from '../../ui-kit/Img/Img';
 import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}