@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.75

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,7 +1,10 @@
 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 { 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 { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
@@ -9,20 +12,31 @@ import type { MobileAppTileContent } from './MobileAppTileContent';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
+const mobileAppStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
     className = '',
     context,
     title = 'Мобильное приложение',
     qr,
-    buttons = [],
+    buttons,
     anchor = null,
+    version = 'primary',
+    items,
+    image,
   }) => {
+    const textColorClass = version === 'primary' ? 'text-primary-text' : '';
+
     return (
       <section
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
-          className,
-        )} ${getTileMinHeight(className)} `}
+        className={`flex justify-between font-sans p-9 box-border relative
+        ${getTileRightPadding(className)} ${getTileMinHeight(className)}
+        ${mobileAppStyleMap[version]}
+        ${className}`}
         id={anchor}
       >
         <BaseTile
@@ -32,7 +46,8 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Heading
                 headingType="h3"
                 title={title}
-                className={`whitespace-pre-wrap max-w-[600px] mb-[30px]`}
+                className={`whitespace-pre-wrap max-w-[509px] mb-6
+                  ${textColorClass}`}
               />
             ) : null
           }
@@ -42,25 +57,42 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             ) : null
           }
         >
-          <div className="flex items-center">
+          <div className="flex flex-1 items-center">
             {qr?.src && qr?.href && (
               <a href={qr.href} target="_blank" aria-label={title}>
                 <img
                   src={qr.src}
                   alt={title}
                   title={title}
-                  width="164"
-                  height="164"
-                  className="w-[92px] h-[92px] min-w-[92px] min-h-[92px] bg-secondary-light"
+                  width="122"
+                  height="122"
+                  className="w-[122px] h-[122px] min-w-[122px] min-h-[122px] bg-secondary-light mr-[23px] rounded-md"
                 />
               </a>
             )}
-            <span className="font-light text-secondary-text ml-4">
-              Наведите камеру телефона на QR-код и скачайте приложение
-            </span>
+            {renderList(version, items)}
           </div>
         </BaseTile>
+        {image?.src ? (
+          <div className="absolute right-0 bottom-0">
+            <Img image={image} />
+          </div>
+        ) : null}
       </section>
     );
   },
 );
+
+const renderList = (version: string, items?: string[]) => {
+  return items?.length ? (
+    <List
+      items={items}
+      itemClassName="base font-light mb-2 last:mb-0"
+      version={version === 'primary' ? 'tile' : 'tile-white'}
+    />
+  ) : (
+    <span className="font-light text-secondary-text ml-4">
+      Наведите камеру телефона на QR-код и скачайте приложение
+    </span>
+  );
+};

package/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,6 +1,9 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title QR код
@@ -17,9 +20,12 @@ export interface QRCode {
  */
 export type MobileAppTileContent = HeadingContent &
   DescriptionContent &
-  ButtonContent & {
+  ButtonContent &
+  ListContent &
+  ImageContent & {
     // TODO: description для мобильной версии
     qr?: QRCode;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
+    version?: BlockVersion;
   };

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -25,56 +25,67 @@ import type {
 
 const TEXT_BLOCK_OTHER_BLOCK: TextBlockBlockListDef = {
   blockListType: 'TextBlock',
+  style: ['col-span-12'],
   ...TEXT_BLOCK,
 };
 
 const PRODUCT_BLOCK_OTHER_BLOCK: ProductBlockBlockListDef = {
   blockListType: 'ProductBlock',
+  style: ['col-span-6'],
   ...PRODUCT_BLOCK,
 };
 
 const TILES_OTHER_BLOCK: TileBlockListDef = {
   blockListType: 'Tile',
+  style: ['col-span-12'],
   ...TILE,
 };
 
 const TILES_PREMIUM_OTHER_BLOCK: TileBlockListDef = {
   blockListType: 'Tile',
+  style: ['col-span-6'],
   ...TILE_PREMIUM,
 };
 
 const PRODUCT_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
   blockListType: 'ProductTile',
+  style: ['col-span-6'],
   ...PRODUCT_TILE,
 };
 
-const PRODUCT_PENSION_TILES__OTHER_BLOCK: ProductTileBlockListDef = {
+const PRODUCT_PENSION_TILES_OTHER_BLOCK: ProductTileBlockListDef = {
   blockListType: 'ProductTile',
+  style: ['col-span-6'],
   ...PRODUCT_PENSION_TILE,
 };
 
 const HEADLINE_OTHER_BLOCK: HeadlineBlockListDef = {
   blockListType: 'Headline',
+  style: ['col-span-12'],
   ...HEADLINE,
 };
 
 const PICTURE_TEXT_OTHER_BLOCK: PictureTextBlockListDef = {
   blockListType: 'PictureText',
+  style: ['col-span-12'],
   ...PICTURE_TEXT,
 };
 
 const LINK_DOCS_OTHER_BLOCK: LinkDocsBlockListDef = {
   blockListType: 'LinkDocs',
+  style: ['col-span-12'],
   ...linkDocsContentExample,
 };
 
 const GALLERY_OTHER_BLOCK: GalleryBlockListDef = {
   blockListType: 'Gallery',
+  style: ['col-span-12'],
   ...GALLERY,
 };
 
 const MINI_GALLERY_OTHER_BLOCK: MiniGalleryBlockListDef = {
   blockListType: 'MiniGallery',
+  style: ['col-span-12'],
   ...MINI_GALLERY,
 };
 
@@ -96,8 +107,8 @@ const propsBlock: OtherProductsProps = {
       blocks: [
         PRODUCT_TILES_OTHER_BLOCK,
         PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_PENSION_TILES__OTHER_BLOCK,
-        PRODUCT_PENSION_TILES__OTHER_BLOCK,
+        PRODUCT_PENSION_TILES_OTHER_BLOCK,
+        PRODUCT_PENSION_TILES_OTHER_BLOCK,
       ],
     },
     {
@@ -127,53 +138,11 @@ const propsBlock: OtherProductsProps = {
     },
     {
       label: 'OtherProducts №8 Gallery',
-      blocks: [GALLERY_OTHER_BLOCK],
+      blocks: [GALLERY_OTHER_BLOCK, GALLERY_OTHER_BLOCK],
     },
     {
       label: 'OtherProducts №9 Mini_Gallery',
-      blocks: [MINI_GALLERY_OTHER_BLOCK],
-    },
-  ],
-};
-
-const propsTwoColumns: OtherProductsProps = {
-  context,
-  blockItems: [
-    {
-      label: 'Другие кредитные карты Россельхозбанка 1',
-      blocks: [
-        TILES_PREMIUM_OTHER_BLOCK,
-        TILES_PREMIUM_OTHER_BLOCK,
-        TILES_OTHER_BLOCK,
-        TILES_OTHER_BLOCK,
-      ],
-      columns: 2,
-    },
-    {
-      label: 'Другие кредитные карты Россельхозбанка 2',
-      blocks: [
-        PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_TILES_OTHER_BLOCK,
-        PRODUCT_PENSION_TILES__OTHER_BLOCK,
-        PRODUCT_PENSION_TILES__OTHER_BLOCK,
-      ],
-      columns: 2,
-    },
-    {
-      label: 'Другие кредитные карты Россельхозбанка 3',
-      blocks: [PRODUCT_BLOCK_OTHER_BLOCK, PRODUCT_BLOCK_OTHER_BLOCK],
-      columns: 2,
-    },
-
-    {
-      label: 'Другие кредитные карты Россельхозбанка 4',
-      blocks: [
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-        TEXT_BLOCK_OTHER_BLOCK,
-      ],
-      columns: 2,
+      blocks: [MINI_GALLERY_OTHER_BLOCK, MINI_GALLERY_OTHER_BLOCK],
     },
   ],
 };
@@ -184,10 +153,4 @@ export default {
       <OtherProducts className="col-span-12" {...propsBlock} />
     </div>
   ),
-
-  'two columns': (
-    <div className="container grid grid-cols-12">
-      <OtherProducts className="col-span-12" {...propsTwoColumns} />
-    </div>
-  ),
 };

package/src/components/OtherProducts/OtherProducts.tsx

@@ -8,9 +8,9 @@ export interface OtherProductsProps extends OtherProductsContent, UniBlockProps
 export const OtherProducts = JSX<OtherProductsProps>(
   ({ blockItems, colorPalette, context, className = '' }) => {
     return (
-      <section className={`font-sans bg-white text-primary-text ${className}`}>
+      <section className={`font-sans text-primary-text ${className}`}>
         {blockItems?.length ? (
-          <div className="list-none m-0 p-0">
+          <div className="box-border1">
             {blockItems.map((item, i) => (
               <OtherProductsItem
                 key={`BlockItem${i}`}

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,5 +1,5 @@
 import type { ColorPalette } from '../../types';
-import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 
 /**
  * @title Элемент списка
@@ -10,16 +10,13 @@ export interface BlockItemCommonProps {
    * @default Список
    */
   label?: string;
-  /**
-   * @title Отображать в раскрытом виде
-   */
+  /** @title Отображать в раскрытом виде */
   isUnfolded?: boolean;
   /**
    * @title Блоки
    * @maxItems 10
    */
   blocks?: BlockDef[];
-  columns?: ColumnsCount;
 }
 
 /**
@@ -28,9 +25,7 @@ export interface BlockItemCommonProps {
 export interface OtherProductsContent {
   /** @title Заголовок */
   title?: string;
-  /**
-   * @title Список
-   */
+  /** @title Список */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;
 }

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -10,13 +10,12 @@ export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
 }
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label, blocks, columns = 1, context, dataTheme, isUnfolded }) => {
+  ({ label, blocks, context, dataTheme, isUnfolded }) => {
     const foldableBlocks = renderBlocksList({
       context,
-      className: 'box-border p-5',
-      columns,
       blocks,
     }) as VNode[];
+
     return (
       <div className="border-0 border-b border-solid border-main-divider">
         {blocks?.length ? (
@@ -27,11 +26,8 @@ export const OtherProductsItem = JSX<BlockItemProps>(
             isUnfolded={isUnfolded}
             context={context}
             foldButtonLabel={label}
-            render={(children, isActive) => (
-              <Wrapper columns={columns} isActive={isActive}>
-                {children}
-              </Wrapper>
-            )}
+            containerClasses="grid grid-cols-12 gap-1 border-box"
+            render={(children, isActive) => <Wrapper isActive={isActive}>{children}</Wrapper>}
           />
         ) : null}
       </div>
@@ -39,14 +35,6 @@ export const OtherProductsItem = JSX<BlockItemProps>(
   },
 );
 
-const Wrapper = JSX<{ columns: number; isActive: boolean }>(({ columns, children, isActive }) => {
-  return (
-    <div
-      className={`box-border w-full ${isActive ? 'p-9' : ''} ${
-        columns > 1 ? 'flex flex-wrap' : ''
-      }`}
-    >
-      {children}
-    </div>
-  );
+const Wrapper = JSX<{ isActive: boolean }>(({ children }) => {
+  return <div className="box-border">{children}</div>;
 });

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

@@ -13,6 +13,7 @@ export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
   const { className = '', version = 'primary' } = props;
+
   return (
     <section
       className={`font-sans bg-white px-4 py-6 ${productBlockStyleMap[version]} ${className}`}

package/src/components/ProductBlock/ProductBlock.tsx

@@ -32,6 +32,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   } = props;
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <section
       className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${productBlockStyleMap[version]} ${className}`}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -28,6 +28,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     textBlockClassName = '',
   }) => {
     const textColor = version === 'secondary' ? 'text-white' : 'text-primary-text';
+
     return (
       <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={`flex flex-col ${textBlockClassName}`}>

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

@@ -13,6 +13,7 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
 
 export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps, i: number) {
   const isIconWhite = version === 'secondary';
+
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon ? (

package/src/components/ProductBlock/renderBenefit.tsx

@@ -16,6 +16,7 @@ export function renderBenefit(
   i: number,
 ) {
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon ? (

package/src/components/ProductTile/ProductTile.tsx

@@ -97,6 +97,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
+
   return (
     <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
@@ -109,5 +110,6 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
+
   return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
 }

package/src/components/PromoTile/PromoTile.tsx

@@ -68,5 +68,6 @@ function formatDate(date: string) {
     month: 'long',
     year: 'numeric',
   };
+
   return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
 }

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

@@ -5,17 +5,10 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
+import { getStyleMap } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
-type StyleType = {
-  background: string;
-  title: string;
-  description: string;
-  iconBackground: string;
-  iconConnector: string;
-};
-
 const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
   normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
   small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
@@ -26,47 +19,35 @@ const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
   small: 'min-h-[50px]',
 };
 
-const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
-  primary: {
-    background: 'bg-white',
-    title: 'text-primary-text',
-    description: 'text-secondary-text',
-    iconBackground: 'bg-secondary-light',
-    iconConnector: 'bg-secondary-light',
-  },
-  secondary: {
-    background: 'bg-primary-main',
-    title: 'text-white',
-    description: 'text-white/80',
-    iconBackground: 'bg-white/30',
-    iconConnector: 'bg-white',
-  },
-};
-
-const styleMaps = (version: BlockVersion): StyleType => STEPS_BLOCK_STYLE_MAPS[version];
-
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, description, steps, size = 'normal', version = 'primary' }) => {
-    const style = styleMaps(version);
+  ({
+    className,
+    title,
+    description,
+    showLines = true,
+    steps,
+    size = 'normal',
+    version = 'primary',
+  }) => {
+    const styleMap = getStyleMap(version);
+
     return (
       <section
         className={`box-border font-sans bg-white px-4 py-6 flex flex-col
-        ${style.background} ${style.title} ${className || ''}`}
+        ${styleMap.background} ${styleMap.title} ${className || ''}`}
       >
         {title ? (
-          <Heading headingType="h3" className={`text-center ${style.title}`} title={title} />
+          <Heading headingType="h3" className={`text-center ${styleMap.title}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m-md text-center ${style.description} ${title && 'mt-2'}`}>
+          <p className={`text-m-md text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
             {description}
           </p>
         ) : null}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
             <div className="flex flex-col justify-between gap-x-[101px]">
-              {steps.map((step, i) =>
-                renderStepTitle({ step, size, i, length: steps.length, version: version }),
-              )}
+              {steps.map(renderStepTitle(size, version, showLines))}
             </div>
           </div>
         ) : null}
@@ -75,53 +56,49 @@ export const StepsBlock = JSX<StepsBlockProps>(
   },
 );
 
-interface RenderStepTitleParams {
-  step: Step;
-  size: SizeVersion;
-  i: number;
-  length: number;
-  version: BlockVersion;
-}
+const renderStepTitle =
+  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (step: Step, i: number, steps: Step[]) => {
+    const isLastStep = steps.length - 1 === i;
+    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
+    const styleMap = getStyleMap(version);
 
-const renderStepTitle = (params: RenderStepTitleParams) => {
-  const { step, size, i, length, version } = params;
-  const isLastStep = length - 1 === i;
-  const margin = size === 'normal' ? 'ml-[34px]' : 'ml-[24px]';
-  const style = styleMaps(version);
-
-  return (
-    <div key={String(i)}>
-      <div key={String(i)} className="flex flex-row text-center relative">
-        <div className="overflow-hidden">
-          {renderIconArea(params)}
-          {isLastStep ? null : (
-            <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
-          )}
-        </div>
-        <div
-          className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
-        >
-          {step.label ? (
-            <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
-          ) : null}
-          {step.description ? (
-            <div
-              className={`font-normal text-sm ${style.description} text-left ${
-                step.label ? 'mt-1' : ''
-              }`}
-            >
-              {step.description}
-            </div>
-          ) : null}
+    return (
+      <div key={String(i)}>
+        <div className="flex flex-row text-center relative">
+          <div className="overflow-hidden">
+            {renderIconArea(size, version)}
+            {isLastStep ? null : (
+              <div
+                className={`min-h-8 h-full w-[2px] ${
+                  showLines ? styleMap.iconConnector : ''
+                } ${margin}`}
+              />
+            )}
+          </div>
+          <div
+            className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+          >
+            {step.label ? (
+              <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
+            ) : null}
+            {step.description ? (
+              <div
+                className={`font-normal text-sm ${styleMap.description} text-left ${
+                  step.label ? 'mt-1' : ''
+                }`}
+              >
+                {step.description}
+              </div>
+            ) : null}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  };
 
-const renderIconArea = (params: RenderStepTitleParams) => {
-  const { step, size, i, version } = params;
-  const style = styleMaps(version);
+const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
+  const styleMap = getStyleMap(version);
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';
@@ -129,11 +106,10 @@ const renderIconArea = (params: RenderStepTitleParams) => {
 
   return (
     <div
-      className={`${iconAreaSize} ${style.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
     >
-      <span className={`font-medium flex self-center ${style.title} ${iconTextSize}`}>
-        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} asSVG />) ||
-          i + 1}
+      <span className={`font-medium flex self-center ${styleMap.title} ${iconTextSize}`}>
+        {(step.icon?.icon && <Img image={step.icon} width={iconSize} height={iconSize} />) || i + 1}
       </span>
     </div>
   );