@redneckz/wildless-cms-uni-blocks 0.2.89 → 0.2.93

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,8 +1,8 @@
-import { LinkDocs } from './LinkDocs';
 import { context } from '../../setup-fixture';
+import { LinkDocs } from './LinkDocs';
 import type { LinkDocsContent } from './LinkDocsContent';
 
-export const LinkDocsFixtureSetOne: LinkDocsContent = {
+export const LINK_DOCS: LinkDocsContent = {
   title: 'Дополнительные документы',
   icon: 'DocIcon',
   documents: [
@@ -14,7 +14,7 @@ export const LinkDocsFixtureSetOne: LinkDocsContent = {
     { text: 'документ 6', href: '/abc6/abc.pdf' },
     { text: 'Text text text', href: '/abc7/yolo.png' },
     {
-      text: 'Some more generic text, and even more, more text',
+      text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
       href: '/abc8/archive.zip',
       fileSize: '2.3МБ',
     },
@@ -27,25 +27,25 @@ export const LinkDocsFixtureSetOne: LinkDocsContent = {
   ],
 };
 
-export const LinkDocsFixtureSetTwo: LinkDocsContent = {
-  ...LinkDocsFixtureSetOne,
-  columnsMode: 'single',
+export const LINK_DOCS_TWO_COLUMNS: LinkDocsContent = {
+  ...LINK_DOCS,
+  columnsMode: 'double',
 };
 
-export const LinkDocsFixtureSetThree: LinkDocsContent = {
-  ...LinkDocsFixtureSetOne,
+export const LINK_DOCS_ANOTHER_ICON: LinkDocsContent = {
+  ...LINK_DOCS,
   icon: 'GlassIcon',
   title: '',
 };
 
-export const LinkDocsFixtureSetFour: LinkDocsContent = {
-  ...LinkDocsFixtureSetOne,
+export const LINK_DOCS_NO_ICON: LinkDocsContent = {
+  ...LINK_DOCS,
   icon: undefined,
 };
 
 export default {
-  'default, 2 columns': <LinkDocs context={context} {...LinkDocsFixtureSetOne} />,
-  'one column': <LinkDocs context={context} {...LinkDocsFixtureSetTwo} />,
-  'another icon, no extensions': <LinkDocs context={context} {...LinkDocsFixtureSetThree} />,
-  'no icon': <LinkDocs context={context} {...LinkDocsFixtureSetFour} />,
+  'one column': <LinkDocs context={context} {...LINK_DOCS} />,
+  'two column': <LinkDocs context={context} {...LINK_DOCS_TWO_COLUMNS} />,
+  'another icon': <LinkDocs context={context} {...LINK_DOCS_ANOTHER_ICON} />,
+  'no icon': <LinkDocs context={context} {...LINK_DOCS_NO_ICON} />,
 };

package/src/components/LinkDocs/LinkDocs.tsx

@@ -24,14 +24,14 @@ const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
+  ({ className, title, align, documents, icon, columnsMode = 'single' }) => {
     const containerClasses = linkColumnsModeStyleMap[columnsMode];
 
     return (
       <section className={`font-sans p-[50px] bg-white ${className}`}>
         {title && (
           <Title
-            className={`font-medium m-0 ${titleMarginsStyleMap[columnsMode]} ${
+            className={`font-medium mt-0 ${titleMarginsStyleMap[columnsMode]} ${
               titleAlignStyleMap[align ?? 'center']
             }`}
           >
@@ -40,16 +40,17 @@ export const LinkDocs = JSX<LinkDocsProps>(
         )}
         <div className={`flex ${containerClasses}`} role="list">
           {documents?.length
-            ? documents.map(({ text, fileSize, ...linkProps }) => (
+            ? documents.map(({ text, fileSize, ...linkProps }, i) => (
                 <a
-                  className={`group flex items-center text-sm
-              text-sm font-sans align-middle items-center text-primary-text no-underline group hover:text-primary-main
-              ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
+                  key={String(i)}
+                  className={`group flex text-sm align-middle h-fit
+                   text-primary-text no-underline hover:text-primary-main
+                   ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
                   role="listitem"
                   {...linkProps}
                 >
                   {icon && <Icon className="mr-3.5" name={icon} width="24px" height="24px" />}
-                  <span>
+                  <span className="self-center">
                     {text}
                     <span className="text-secondary-text group-hover:text-primary-main">
                       {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -3,4 +3,4 @@ import type { GalleryContent } from '../Gallery/GalleryContent';
 /**
  * @title Мини-галерея
  */
-export interface MiniGalleryContent extends GalleryContent {}
+export type MiniGalleryContent = GalleryContent;

package/src/components/MobileBlocks.ts

@@ -24,7 +24,4 @@ export const MobileBlocks = {
   ProductTile,
   TextBlock,
   Tile,
-  // TODO StepsBlock,
-  // TODO BenefitsBlock,
-  // TODO ProductGallery
 };

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,7 +1,8 @@
 import { context } from '../../setup-fixture';
 
-import { PictureText } from './PictureText';
 import type { Picture } from '../../model/Picture';
+import { PictureText } from './PictureText';
+import type { PictureTextContent } from './PictureTextContent';
 
 const image: Picture = {
   src: 'legal-support-business.png',
@@ -13,24 +14,23 @@ const image: Picture = {
   alt: 'Варианты потребительского кредита',
 };
 
+export const PICTURE_TEXT: PictureTextContent = {
+  title: 'Варианты потребительского кредита',
+  benefits: [
+    {
+      label: 'Кредит по одному документу',
+      description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+      icon: 'DocumentText',
+    },
+    {
+      label: 'Кредит на общих условиях',
+      description: 'До 5 млн ₽ на общих условиях получения кредита',
+      icon: 'DiscountShape',
+    },
+  ],
+  image,
+};
+
 export default {
-  default: (
-    <PictureText
-      context={context}
-      title={'Варианты потребительского кредита'}
-      benefits={[
-        {
-          label: 'Кредит по одному документу',
-          description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
-          icon: 'DocumentText',
-        },
-        {
-          label: 'Кредит на общих условиях',
-          description: 'До 5 млн ₽ на общих условиях получения кредита',
-          icon: 'DiscountShape',
-        },
-      ]}
-      image={image}
-    />
-  ),
+  default: <PictureText context={context} {...PICTURE_TEXT} />,
 };

package/src/components/PictureText/PictureText.tsx

@@ -35,7 +35,9 @@ function renderBenefit(benefit: Benefit, i: number) {
         />
       )}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
-        <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        {benefit.label && (
+          <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        )}
         {benefit.description && (
           <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
         )}

package/src/components/PictureText/PictureTextContent.ts

@@ -4,10 +4,7 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent
-  extends Pick<BaseTileCommonProps, 'title' | 'description' | 'image'> {
-  /**
-   * @title Список преимуществ
-   */
+export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
+  /** @title Список преимуществ */
   benefits?: Benefit[];
 }

package/src/components/Placeholder/Placeholder.tsx

@@ -17,12 +17,12 @@ export const Placeholder = JSX<PlaceholderProps>(({ className, context, title })
   );
 });
 
-const renderShimmer = (size: number = 3) =>
+const renderShimmer = (size = 3) =>
   goldenSequence(100, size)
     .map((_) => Math.floor(_))
     .map(renderShimmerItem);
 
-const renderShimmerItem = (width: number = 100, index: number) => (
+const renderShimmerItem = (width = 100, index: number) => (
   <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
 );
 

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

@@ -6,6 +6,7 @@ import { ProductBlockInner } from './ProductBlockInner';
 export interface ProductBlockProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ({ titleSize, image, benefits, ...props } /* Get rid of image and benefits */) => {
     const { className } = props;
     return (

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
@@ -14,16 +13,14 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     return (
       <div className={`flex grow justify-between items-stretch ${className || ''}`}>
         <div className={'flex flex-col'}>
-          {title && (
-            /* TODO Why <Title> is duplicated here?  */
-            <Title
-              size={titleSize || 'XL'}
-              className="font-medium m-0 mb-4 whitespace-pre-wrap max-w-[600px] text-primary-text"
-            >
-              {title}
-            </Title>
-          )}
-          <BaseTile context={context} description={description} items={items} buttons={buttons}>
+          <BaseTile
+            context={context}
+            title={title}
+            titleSize={titleSize || 'XL'}
+            description={description}
+            items={items}
+            buttons={buttons}
+          >
             {benefits?.length ? (
               <div className="flex gap-6 mt-6 mb-3.5">{benefits.map(renderBenefit)}</div>
             ) : null}

package/src/components/ProductGallery/ProductGallery.example.json

@@ -10,7 +10,7 @@
         "image": {
           "format": "webp",
           "size": {
-            "width": 300
+            "width": 280
           }
         },
         "description": "Описание",

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -7,17 +7,18 @@ const moneyImage: Picture = {
   src: 'money-1.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
+  alt: 'Варианты потребительского кредита',
 };
 
 const worker: Picture = {
   src: 'worker.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
 };
 
@@ -25,8 +26,8 @@ const creditCard: Picture = {
   src: 'credit-card-1.png',
   format: 'webp',
   size: {
-    width: 300,
-    height: 300,
+    width: 280,
+    height: 280,
   },
 };
 
@@ -41,8 +42,6 @@ export default (
         },
         productBlock: {
           title: 'Ставка от 12,5% годовых на срок до 5 лет!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
           items: [
             'Потребительский кредит по специальной процентной ставке',
             'Получите деньги без залога и поручительства',
@@ -66,8 +65,6 @@ export default (
         },
         productBlock: {
           title: 'Ставка от 12,5% годовых на срок до 3 лет!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
           items: [
             'Потребительский кредит по специальной процентной ставке',
             'Получите деньги без залога и поручительства',
@@ -91,8 +88,6 @@ export default (
         },
         productBlock: {
           title: 'Дополнительные бонусные баллы за покупки!»',
-          description:
-            'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
           items: [
             'Потребительский кредит по специальной процентной ставке',
             'Получите деньги без залога и поручительства',
@@ -116,7 +111,6 @@ export default (
         },
         productBlock: {
           title: 'Карты Unionpay»',
-          description: 'Кэшбэк до 20% у партнеров',
           items: [
             'Потребительский кредит по специальной процентной ставке',
             'Получите деньги без залога и поручительства',

package/src/components/ProductGallery/ProductGallery.tsx

@@ -22,7 +22,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
           {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
         </div>
 
-        <div className={`border-t border-solid border-main-divider flex`}>
+        <div className="flex">
           {galleryNav.map((slide, i) =>
             renderNavButton({
               slide,
@@ -61,17 +61,19 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
-      className={`group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 py-4 grow basis-0`}
+      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-5 grow basis-0`}
     >
       <div className="border-0 border-r border-solid border-main-divider px-6">
-        <div className={`text-sm font-medium group-hover:text-primary-text ${btnTitleClassName}`}>
+        <div
+          className={`text-sm font-medium pb-1 group-hover:text-primary-text ${btnTitleClassName}`}
+        >
           {slide?.title}
         </div>
-        <div className="text-xs text-secondary-text">{slide.desc}</div>
+        <div className="text-xs text-secondary-text pb-[2px]">{slide.desc}</div>
       </div>
       <div
         className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
-        style={{ animationDuration: `${duration}s` }}
+        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
       ></div>
     </button>
   );

package/src/components/PromoTile/PromoTile.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { PromoTileContent } from './PromoTileContent';
-import { Tile } from '../Tile/Tile';
 import type { UniBlockProps } from '../../types';
+import { Tile } from '../Tile/Tile';
+import type { PromoTileContent } from './PromoTileContent';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
@@ -23,7 +23,7 @@ export const PromoTile = JSX<PromoTileProps>(
         buttons={buttons}
         version={version}
       >
-        <div>
+        <div className="mt-1.5">
           {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
           <div className="text-base">{description}</div>
         </div>

package/src/components/TariffsTable/TariffsTable.example.json

@@ -0,0 +1,87 @@
+{
+  "title": "Заголовок",
+  "rowHeaders": [
+    {
+      "title": "Параметр 1",
+      "icon": "MoneyIcon"
+    },
+    {
+      "title": "Параметр 2",
+      "icon": "DollarIcon"
+    },
+    {
+      "title": "Параметр 3"
+    },
+    {
+      "title": "Параметр 4"
+    }
+  ],
+  "columns": [
+    {
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3-1",
+            "description": "Описание для ячейки 3-1"
+          },
+          {
+            "label": "Ячейка 3-2",
+            "buttons": [
+              {
+                "icon": "AppleIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/_blank",
+                "target": "_blank"
+              },
+              {
+                "icon": "PlayMarketIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/secondary"
+              }
+            ]
+          }
+        ],
+        [
+          {
+            "image": {
+              "src": "payment-systems.png",
+              "format": "webp",
+              "size": {
+                "width": 288,
+                "height": 56
+              },
+              "alt": "Описание картинки",
+              "title": "Подсказка"
+            }
+          },
+          {
+            "list": {
+              "items": [
+                "item 1",
+                "item 2",
+                "item 3"
+              ]
+            }
+          }
+        ]
+      ]
+    }
+  ]
+}

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -0,0 +1,195 @@
+import { context } from '../../setup-fixture';
+import { TariffsTable } from './TariffsTable';
+import type { Picture } from '../../model/Picture';
+import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
+
+const image: Picture = {
+  src: 'payment-systems.png',
+  format: 'webp',
+  size: {
+    width: 288,
+    height: 56,
+  },
+  alt: 'Платёжные системы',
+  title: 'Платёжные системы',
+};
+
+const rowHeaders: TariffsTableRowHeader[] = [
+  { title: 'Начисление процентов на остаток по счету', icon: 'OkIcon' },
+  { title: 'Снятие наличных', icon: 'GlassIcon' },
+  { title: 'Оформление онлайн', icon: 'ShieldTickIcon' },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Стоимость обслуживания' },
+  { title: 'Стоимость SMS-сервиса' },
+  { title: 'Дополнительная информация' },
+];
+
+const columns: TariffsTableColumn[] = [
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'Платёжные системы картинкой' }, { image: image }],
+      [
+        { label: 'Кнопки-иконки' },
+        {
+          buttons: [
+            {
+              icon: 'AppleIcon',
+              rounded: true,
+              version: 'secondary',
+              href: '/_blank',
+              target: '_blank',
+            },
+            {
+              icon: 'PlayMarketIcon',
+              rounded: true,
+              version: 'secondary',
+              href: '/secondary',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          list: {
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+      [
+        {
+          image: {
+            src: 'money-1.png',
+            format: 'webp',
+            size: {
+              width: 140,
+              height: 140,
+            },
+            alt: 'Деньги',
+          },
+        },
+      ],
+    ],
+  },
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: '1%',
+          description: 'В сторонних банкоматах, минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [
+        { label: 'До 20%' },
+        {
+          list: {
+            isDotted: false,
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [
+        { label: '69 рублей в месяц' },
+        {
+          list: {
+            version: 'primary',
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+      [
+        {
+          description:
+            'Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic',
+        },
+      ],
+    ],
+  },
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+
+export default {
+  default: (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+      />
+    </div>
+  ),
+  '1 column': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 1)}
+      />
+    </div>
+  ),
+  '2 columns': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 2)}
+      />
+    </div>
+  ),
+  '3 columns': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 3)}
+      />
+    </div>
+  ),
+};