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

package/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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 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/mobile/src/components/ProductBlock/renderBenefit.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/mobile/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>(
@@ -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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/StepsBlock/StepsBlock.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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/components/TextBlock/TextBlock.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/mobile/src/components/TextBlock/TextBlockContent.ts

@@ -23,5 +23,8 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
-  items?: string[]; // TODO: mobile content
+  /** @title Маркеры списка (моб.) */ // TODO: mobile prop
+  isDotted?: boolean;
+  /** @title Список (моб.) */ // TODO: mobile prop
+  items?: string[];
 }