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

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -18,6 +18,7 @@ export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
 export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
   ({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
     const { text, fileSize, ...linkProps } = doc;
+
     return (
       <a className={className} role="link" {...linkProps}>
         {icon ? (
@@ -40,6 +41,7 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
   const prefix = ext || fileSize ? ',' : '';
   const extension = ext ? ` ${ext}` : '';
   const size = fileSize ? ` (${fileSize})` : '';
+
   return prefix + extension + size;
 };
 
@@ -49,5 +51,6 @@ const getExtFromHref = (href: string) => {
   }
 
   const index = href.lastIndexOf('.');
+
   return index !== -1 ? href.substring(index + 1) : '';
 };

package/src/components/LinkList/LinkList.tsx

@@ -17,6 +17,7 @@ export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor
 const renderLinkListItem = (documents) => {
   return documents.map((doc, i) => {
     const { text, ...linkProps } = doc;
+
     return (
       <li key={`list_item_${String(i)}`} className="mb-4 list-none">
         <a className="hover:text-primary-main" role="link" {...linkProps}>

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,36 +1,92 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 import { MobileAppTile } from './MobileAppTile';
 
+const image: Picture = {
+  src: 'icon-phone.png',
+  format: 'webp',
+  size: {
+    width: 529,
+    height: 345,
+  },
+};
+
+const listItems = [
+  'Оплачивайте товары и услуги',
+  'Следите за бонусным счетом онлайн',
+  'Покупайте товары и услуги',
+  'Копите бонусные баллы',
+];
+
+const button1: ButtonWithIconProps = {
+  aboveText: 'Загрузите в',
+  text: 'App Store',
+  icon: { icon: 'AppleIcon', iconVersion: 'white' },
+  href: 'apps.apple.com',
+  version: 'primary',
+};
+
+const button2: ButtonWithIconProps = {
+  aboveText: 'Доступно в',
+  text: 'Google Play',
+  icon: { icon: 'PlayMarketIcon' },
+  href: 'play.google.com',
+  version: 'secondary',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <MobileAppTile
         context={context}
-        className="col-span-4"
+        className="col-span-12"
+        version="secondary"
+        title="Обновлённое мобильное приложение «Урожай»"
+        image={image}
         qr={{
           href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
           src: 'data:image/png;base64,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',
         }}
+        items={listItems}
         buttons={[
           {
-            aboveText: 'Загрузите в',
-            text: 'App Store',
+            ...button1,
             icon: { icon: 'AppleIcon' },
-            href: 'apps.apple.com',
-            asSVG: true,
-            version: 'secondary',
-          },
-          {
-            aboveText: 'Доступно в',
-            text: 'Google Play',
-            icon: { icon: 'PlayMarketIcon' },
-            href: 'play.google.com',
-            asSVG: true,
             version: 'secondary',
           },
+          button2,
         ]}
       />
     </div>
   ),
+  secondary: (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-12"
+        title="Обновлённое мобильное приложение «Урожай»"
+        qr={{
+          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+          src: 'data:image/png;base64,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',
+        }}
+        items={listItems}
+        buttons={[button1, button2]}
+      />
+    </div>
+  ),
+  'without-image-and-list': (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-4"
+        qr={{
+          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+          src: 'data:image/png;base64,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',
+        }}
+        buttons={[button1, button2]}
+      />
+    </div>
+  ),
 };

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -7,12 +7,10 @@ import { Logo } from '../../ui-kit/Logo/Logo';
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, title = 'Мобильное приложение', description, href = '#' }) => {
+  ({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
     return (
       <div
-        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${
-          className || ''
-        }`}
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className}`}
       >
         {href ? (
           <div className="flex">

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('г.', '');
 }