@redneckz/wildless-cms-uni-blocks 0.5.5 → 0.5.6

package/src/components/PictureText/PictureTextContent.ts

@@ -1,13 +1,27 @@
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-export type TitleWithImageContent = HeadlineCommonProps & ImageContent;
+import type { Picture } from '../../model/Picture';
+import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent extends BenefitsProps, TitleWithImageContent {
+export interface PictureTextContent extends BenefitsProps, HeadlineCommonProps {
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 400
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 240,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
+  image?: Picture;
   /**
    * @title Картинка справа/текст слева
    * @default false
@@ -17,4 +31,5 @@ export interface PictureTextContent extends BenefitsProps, TitleWithImageContent
   monthLimit?: number;
   /** @title Страховая сумма */
   sum?: number;
+  version?: BlockVersion;
 }

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

@@ -82,6 +82,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
+        backwardButton={backwardButton}
         headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
@@ -90,27 +91,6 @@ export default {
         buttons={buttons}
         image={image}
       />
-      <ProductBlock
-        className="col-span-12"
-        context={context}
-        title="Потребительский кредит наличными"
-        headlineVersion="L"
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={benefits}
-        benefitsVersion="white"
-        image={image}
-      />
-      <ProductBlock
-        className="col-span-12"
-        context={context}
-        title="Потребительский кредит наличными"
-        headlineVersion="L"
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={benefits}
-        benefitsVersion="white"
-        image={image}
-        version="secondary"
-      />
     </div>
   ),
   'primary with color benefits': (

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,24 +1,27 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent, BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { Picture } from '../../model/Picture';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type ProductBlockInnerContent = HeadlineProps &
   ListContent &
   ButtonContent & {
     /**
-     *  @title Иконка
-     *  @default
-     * {
+     * @default {
+     *   "format": "webp",
      *   "size": {
-     *     "width": 608,
-     *     "height": 299
+     *       "width": 600
      *   },
-     *   "format": "webp"
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 360,
+     *       "format": "webp",
+     *       "alignment": "northeast"
+     *   }]
      * }
      */
     image?: Picture;

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

@@ -141,6 +141,18 @@ export default {
       />
     </div>
   ),
+  'long-title-benefits-without-image': (
+    <div className="container grid grid-cols-12">
+      <ProductTile
+        context={context}
+        className="col-span-6"
+        title="Кредит пенсионный"
+        description={'Для людей в возрасте до 75 лет'}
+        benefits={multilineBenefits}
+        buttons={buttons2}
+      />
+    </div>
+  ),
   'credit-card': (
     <div className="container grid grid-cols-12">
       <ProductTile

package/src/components/ProductTile/ProductTile.tsx

@@ -5,7 +5,7 @@ import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import type { Picture } from '../../model/Picture';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import { VersionStyleMap } from '../../model/BlockVersion';
@@ -29,9 +29,8 @@ export const ProductTile = JSX<ProductTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${
-          VersionStyleMap[version]
-        } ${getTileRightPadding(className)} ${getTileMinHeight(className)}`}
+        className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
+          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
         {...rest}
       >
         <Headline
@@ -44,8 +43,10 @@ export const ProductTile = JSX<ProductTileProps>(
           bgColorHeadline={version}
           align="left"
         />
-        {renderBenefits(benefits, version)}
-        {additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null}
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription
+          ? renderAdditionalDescription(additionalDescription, image, version)
+          : null}
         {buttons?.length ? (
           <ButtonSection
             context={context}
@@ -59,13 +60,14 @@ export const ProductTile = JSX<ProductTileProps>(
   },
 );
 
-// picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-const BENEFITS_WIDTH = 'max-w-[calc(100%-186px)]';
+function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?: Picture) {
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
-function renderBenefits(benefits: TextBenefit[], version: BlockVersion) {
   return (
     <div
-      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline ${BENEFITS_WIDTH}`}
+      className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline 
+        ${BENEFITS_WIDTH}`}
     >
       {benefits.length ? benefits.map(renderBenefit(version)) : null}
     </div>
@@ -92,14 +94,21 @@ function renderBenefit(version: BlockVersion = 'primary') {
   };
 }
 
-function renderAdditionalDescription(additionalDescription: string, version = 'primary') {
+function renderAdditionalDescription(
+  additionalDescription: string,
+  image?: Picture,
+  version: BlockVersion = 'primary',
+) {
   const descStyleMap: Record<BlockVersion, string> = {
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
 
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+
   return (
-    <div className={`text-m-light mt-2.5 z-10 ${descStyleMap[version]}`}>
+    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`}>
       {additionalDescription}
     </div>
   );

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,21 +1,30 @@
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineProps } from '../../model/HeadlineType';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
-export interface TextBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type TextBenefit = DescriptionProps & LabelProps & {};
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = HeadlineProps &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 320
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 192,
+     *       "format": "webp",
+     *       "alignment": "southeast"
+     *   }]
+     * }
+     */
+    image?: Picture;
     version?: BlockVersion;
     /**
      * @title Преимущества

package/src/components/Recommendation/RecommendationContent.ts

@@ -1,15 +1,33 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { Picture } from '../../model/Picture';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
-export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
+/**
+ * @title Карточка
+ */
+export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
    * @minItems 3
    */
   socialMedia?: LinkCommonProps[];
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
 }
 
 /**

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -1,9 +1,11 @@
+import type { Footnote } from '../../model/Footnote';
+import type { TitleProps } from '../../model/HeadlineType';
+
 /**
  * @title Аренда сейфовых ячеек
  */
-export interface SafeDepositRentalContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Сноска */
-  footnote?: string;
-}
+export type SafeDepositRentalContent = Footnote &
+  TitleProps & {
+    /** @title Сноска */
+    footnote?: string;
+  };

package/src/components/SafeDepositRental/YandexMap.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { renderClusterer } from './renderClusterer';
 
@@ -9,21 +9,22 @@ interface YandexMapProps {
   points: number[][];
 }
 
-let Map = null;
-
 export const YandexMap = JSX<YandexMapProps>(({ points }) => {
+  const map = useRef(null);
+
   useEffect(() => {
     ymaps.ready(() => {
-      Map = new ymaps.Map('map', {
+      map.current = new ymaps.Map('map', {
         center: points[0],
         zoom: 10,
       });
-      renderClusterer(Map, points);
+
+      renderClusterer(map.current, points);
     });
   }, []);
 
-  if (Map && points) {
-    renderClusterer(Map, points);
+  if (map.current && points) {
+    renderClusterer(map.current, points);
   }
 
   return (

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,40 +1,23 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 
 /**
  * @title Шаг
  */
-export interface Step {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-  /**
-   *  @title Иконка
-   *  @default
-   * {
-   *   "size": {
-   *     "width": 48,
-   *     "height": 48
-   *   },
-   *   "format": "webp"
-   * }
-   */
-  icon?: Picture;
-  /** @title Кнопка */
-  button?: ButtonWithIconProps;
-}
+export type Step = DescriptionProps &
+  LabelProps &
+  IconProps & {
+    /** @title Кнопка */
+    button?: ButtonWithIconProps;
+  };
 
 /**
  * @title Блок шаги
  */
-export interface StepsBlockContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string; // TODO: mobile content
+export type StepsBlockContent = HeadlineCommonProps & {
   /**
    * @title Линии
    * @default true
@@ -54,4 +37,4 @@ export interface StepsBlockContent {
    */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion;
-}
+};

package/src/components/Tabs/TabsContent.ts

@@ -1,26 +1,29 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 /**
  * @title Группа
  */
-export interface GroupTab {
+export type GroupTab = TitleProps & {
+  /** @default group */
   type: 'group';
   /** @title Тег */
   ref?: string;
-  /** @title Название */
-  title?: string;
-}
+};
 
 /**
  * @title Ссылка
  */
 export type LinkTab = LinkProps & {
+  /** @default link */
   type: 'link';
 };
 
 /**
  * @title Таб
- * @default {"type": "group"}
+ * @default {
+ *    "type": "group"
+ * }
  */
 export type Tab = GroupTab | LinkTab;
 

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

@@ -7,10 +7,6 @@ import type { ListProps } from '../../ui-kit/List/ListProps';
 import type { LabelDescriptionCell } from './TariffsTableContent';
 import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
-export interface LabelProps {
-  label?: string;
-}
-
 export type EmbeddableCellDataType =
   | ButtonContent
   | LabelDescriptionCell

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,10 +1,9 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
-import type { DescriptionProps } from '../../model/HeadlineType';
+import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { HeadingProps } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TariffsTableInnerContent } from '../../ui-kit/InnerTable/InnerTableProps';
 import type { ListProps } from '../../ui-kit/List/ListProps';
 
@@ -18,71 +17,57 @@ export interface TariffsTableCellIndexProps {
 }
 
 /**
- * @title Параметр
+ * @hidden
  */
-export type TariffsTableRowHeader = HeadingProps & {
-  /**
-   * @default { "format": "webp", "size": { "width": 24, "height": 24 } }
-   */
-  icon?: Picture;
+export type Data = {
+  header: TariffsTableRowHeader;
+  data: CellDef[][];
 };
 
 /**
- * @title Ряд
+ * @title Параметр
  */
-export type Data = {
-  header: TariffsTableRowHeader;
-  data: CellDef[][];
+export type TariffsTableRowHeader = HeadingProps & {
+  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
+  icon?: Picture;
 };
 
 /**
  * @title Изображение
- * @default { "image": { "format": "webp", "size": { "width": 24, "height": 24 } } }
  */
-export type ImageCellDef = ImageContent & {
-  /**
-   * @default Img
-   */
+export type ImageCellDef = {
+  /** @default Img */
   tableCellType: 'Img';
+  /** @default { "format": "webp", "size": { "width": 24, "height": 24 } } */
+  image?: Picture;
 };
 
 /**
  * @title Кнопки
  */
 export type ButtonsCellDef = ButtonContent & {
-  /**
-   * @default Buttons
-   */
+  /** @default Buttons */
   tableCellType: 'Buttons';
 };
 
 /**
  * @title Заголовок и описание
  */
-export interface LabelDescriptionCell {
-  /** @title Заголовок */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-}
+export type LabelDescriptionCell = LabelProps & DescriptionProps & {};
 
 /**
  * @title Заголовок и описание
  */
 export type LabelDescriptionCellDef = LabelDescriptionCell & {
-  /**
-   * @default LabelDescription
-   */
+  /** @default LabelDescription */
   tableCellType: 'LabelDescription';
 };
 
 /**
  * @title Список
  */
-export type ListBlockDef = ListProps & {
-  /**
-   * @default List
-   */
+export type ListBlockDef = Omit<ListProps, 'listItemSize' | 'version'> & {
+  /** @default List */
   tableCellType: 'List';
 };
 
@@ -90,9 +75,7 @@ export type ListBlockDef = ListProps & {
  * @title Таблица
  */
 export type InnerTableBlockDef = TariffsTableInnerContent & {
-  /**
-   * @default Table
-   */
+  /** @default Table */
   tableCellType: 'Table';
 };
 

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
 import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
@@ -33,7 +34,9 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
                 asSVG
               />
             ) : null}
-            {header?.title}
+            {header?.title ? (
+              <Heading headingType={header?.headingType || 'h6'} as="h6" title={header?.title} />
+            ) : null}
           </div>
         </div>
         {data?.length ? (

package/src/components/TextBlock/TextBlockContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Цвет блока
@@ -15,11 +16,7 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 /**
  * @title Текстовый блок
  */
-export interface TextBlockContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type TextBlockContent = HeadlineCommonProps & {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
@@ -27,4 +24,4 @@ export interface TextBlockContent {
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];
-}
+};

package/src/components/Tile/TileContent.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 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 { ListItemSize } from '../../ui-kit/List/ListProps';
 
@@ -12,8 +12,22 @@ import type { ListItemSize } from '../../ui-kit/List/ListProps';
 export type TileContent = HeadingCommonProps &
   DescriptionProps &
   ListContent &
-  ButtonContent &
-  ImageContent & {
+  ButtonContent & {
+    /**
+     * @default {
+     *   "format": "webp",
+     *   "size": {
+     *       "width": 320
+     *   },
+     *   "sources": [{
+     *       "media": 1279,
+     *	     "width": 192,
+     *       "format": "webp",
+     *       "alignment": "southeast"
+     *   }]
+     * }
+     */
+    image?: Picture;
     /**
      *  @title Буллиты
      *  @default true