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

package/src/components/ContentPage/ContentPage.page.json

@@ -92,6 +92,7 @@
                 "src": "worker.png",
                 "title": "Рабочий",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -106,7 +107,6 @@
             },
             "productBlock": {
               "title": "Дополнительные бонусные баллы за покупки!»",
-              "description": "Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.",
               "buttons": [
                 {
                   "href": "https://rshb.ru",
@@ -119,6 +119,7 @@
                 "src": "credit-card-1.png",
                 "title": "Кредитка",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -133,7 +134,6 @@
             },
             "productBlock": {
               "title": "Карты Unionpay»",
-              "description": "Кэшбэк до 20% у партнеров",
               "items": [
                 "Потребительский кредит по специальной процентной ставке",
                 "Получите деньги без залога и поручительства",
@@ -151,6 +151,7 @@
                 "src": "credit-card-1.png",
                 "title": "Кредитка",
                 "format": "webp",
+                "alt": "Кредит наличными",
                 "size": {
                   "width": 280,
                   "height": 280
@@ -1408,7 +1409,7 @@
             "href": "/abc7/yolo.png"
           },
           {
-            "text": "Some more generic text, and even more, more text",
+            "text": "Some more generic text, and even more, more text, and more generic text, and even more, more text, and even more",
             "href": "/abc8/archive.zip",
             "fileSize": "2.3МБ"
           },
@@ -1490,7 +1491,9 @@
                     "size": {
                       "width": 288,
                       "height": 56
-                    }
+                    },
+                    "alt": "Платёжные системы",
+                    "title": "Платёжные системы"
                   }
                 }
               ],
@@ -1536,7 +1539,8 @@
                     "size": {
                       "width": 140,
                       "height": 140
-                    }
+                    },
+                    "alt": "Деньги"
                   }
                 }
               ]
@@ -1680,7 +1684,9 @@
                     "size": {
                       "width": 288,
                       "height": 56
-                    }
+                    },
+                    "alt": "Платёжные системы",
+                    "title": "Платёжные системы"
                   }
                 }
               ],
@@ -1726,7 +1732,8 @@
                     "size": {
                       "width": 140,
                       "height": 140
-                    }
+                    },
+                    "alt": "Деньги"
                   }
                 }
               ]

package/src/components/ContentPage/ContentPageHead.tsx

@@ -2,7 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { ContentPageMeta } from '../../types';
 
 export interface ContentPageHeadProps {
-  HeadComponent: Function;
+  HeadComponent: <Props, Context, VNode>(props: Props, context?: Context) => VNode;
   data: ContentPageMeta;
 }
 

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -129,7 +129,7 @@ export const CreditCalculator = JSX<CreditCalculatorProps>(
               aria-label="Соглашение на обработку персональных данных"
             >
               Отправляя заявку, вы соглашаетесь на обработку персональных данных соответственно
-              требованиям ФЗ «О персональных данных»
+              требованиям ФЗ «О персональных данных»
             </div>
           </div>
         </div>

package/src/components/Footer/Contacts.tsx

@@ -70,4 +70,4 @@ const renderText = (type: ContactInfo['type'], text = '') => {
   }
 };
 
-const formatTel = (s: string) => s.replaceAll(/(\-|\s|\(|\)|\D+)/g, '');
+const formatTel = (s: string) => s.replaceAll(/\D/g, '');

package/src/components/Footer/FooterContent.ts

@@ -24,7 +24,7 @@ export interface ContactInfo {
 /**
  * @required ["href"]
  */
-export interface SocialMedia extends Omit<LinkProps, 'text'> {}
+export type SocialMedia = Omit<LinkProps, 'text'>;
 
 /**
  * @title Подвал

package/src/components/Footer/HorizontalNavigation.tsx

@@ -33,7 +33,7 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
   ({ className, index, text, href, target, onClick }) => (
     <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
+      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${
         className || ''
       }`}
       href={href}

package/src/components/Footer/SocialMedia.tsx

@@ -51,14 +51,13 @@ const MediaButton = JSX<MediaButtonProps>(({ href }) => {
   if (!icon) return null;
 
   return (
-    <Button
-      rounded
+    <a
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      aria-label={label}
-      className="border-solid border border-main-divider w-9 h-9 flex items-center justify-center hover:fill-primary-main"
-      appendLeft={<Icon name={icon} width={width} height={height} asSVG />}
-    />
+    >
+      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+    </a>
   );
 });

package/src/components/Gallery/GalleryInner.tsx

@@ -49,7 +49,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
 
     return (
       <section
-        className={`relative font-sans text-primary-text bg-white p-12 overflow-hidden ${className}`}
+        className={`relative font-sans text-primary-text bg-white p-12 py-[50px] overflow-hidden ${className}`}
       >
         <div className="flex flex-col items-center mb-8">
           {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
@@ -68,6 +68,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         >
           {cards?.map((card, i) => renderCard(card, i, version))}
         </div>
+        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent"></div>
         {showPrevButton && (
           <ArrowButton
             className="absolute top-1/2 left-8 rotate-180"

package/src/components/Headline/Headline.fixture.tsx

@@ -1,42 +1,19 @@
 import { context } from '../../setup-fixture';
 
 import { Headline } from './Headline';
+import { HeadlineContent } from './HeadlineContent';
+
+export const HEADLINE: HeadlineContent = {
+  title: 'Своя кредитная карта',
+  description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
+  align: 'center',
+  bgColor: 'transparent',
+};
 
 export default {
-  default: (
-    <Headline
-      title="Своя кредитная карта"
-      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
-      align="left"
-      bgColor="bg-white"
-      context={context}
-    />
-  ),
-  'center transparent': (
-    <Headline
-      title="Своя кредитная карта"
-      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
-      align="center"
-      bgColor="transparent"
-      context={context}
-    />
-  ),
+  default: <Headline context={context} {...HEADLINE} />,
+  'left white': <Headline context={context} {...HEADLINE} align="left" bgColor="bg-white" />,
   'right transparent': (
-    <Headline
-      title="Своя кредитная карта"
-      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
-      align="right"
-      bgColor="transparent"
-      context={context}
-    />
-  ),
-  'right white': (
-    <Headline
-      title="Своя кредитная карта"
-      description="Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах."
-      align="right"
-      bgColor="bg-white"
-      context={context}
-    />
+    <Headline context={context} {...HEADLINE} align="right" bgColor="transparent" />
   ),
 };

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/PictureTextContent.ts

@@ -5,8 +5,6 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
  * @title Картинка с текстом
  */
 export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
-  /**
-   * @title Список преимуществ
-   */
+  /** @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

@@ -66,7 +66,9 @@
               "size": {
                 "width": 288,
                 "height": 56
-              }
+              },
+              "alt": "Описание картинки",
+              "title": "Подсказка"
             }
           },
           {

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

@@ -10,6 +10,8 @@ const image: Picture = {
     width: 288,
     height: 56,
   },
+  alt: 'Платёжные системы',
+  title: 'Платёжные системы',
 };
 
 const rowHeaders: TariffsTableRowHeader[] = [
@@ -75,6 +77,7 @@ const columns: TariffsTableColumn[] = [
               width: 140,
               height: 140,
             },
+            alt: 'Деньги',
           },
         },
       ],