@redneckz/wildless-cms-uni-blocks 0.2.91 → 0.2.94

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/Header/Header.tsx

@@ -1,11 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { useSitemap } from '../../hooks/useSitemap';
 import { mergeTopItems } from '../../mergeTopItems';
 import type { UniBlockProps } from '../../types';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
-import { useLink } from '../../hooks/useLink';
-import { useSitemap } from '../../hooks/useSitemap';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderSecondaryMenu } from './HeaderSecondaryMenu';
 import { isSubItemActive } from './isSubItemActive';
@@ -43,17 +43,19 @@ export const Header = JSX<HeaderProps>(({ className, defaultLocation, context, t
 
   return (
     <header className={`pt-5 pb-8 px-20 bg-white ${className || ''}`}>
-      <div className="flex items-center">
-        <Logo className="mr-8" />
-        {topMenu}
-        <HeaderSecondaryMenu
-          context={context}
-          className="ml-auto"
-          defaultLocation={defaultLocation}
-        />
+      <div className="container">
+        <div className="flex items-center">
+          <Logo className="mr-8" />
+          {topMenu}
+          <HeaderSecondaryMenu
+            context={context}
+            className="ml-auto"
+            defaultLocation={defaultLocation}
+          />
+        </div>
+        <div className="mt-5 h-[1px] bg-main-divider" />
+        <nav className="mt-5">{subMenu}</nav>
       </div>
-      <div className="mt-5 h-[1px] bg-main-divider" />
-      <nav className="mt-5">{subMenu}</nav>
     </header>
   );
 });

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.example.json

@@ -0,0 +1,26 @@
+{
+  "title": "Дополнительные документы",
+  "icon": "DocIcon",
+  "documents": [
+    {
+      "text": "Документ №1",
+      "href": "/documents/document1.doc",
+      "fileSize": "123КБ"
+    },
+    {
+      "text": "Документ №2",
+      "href": "/documents/document2.rtf",
+      "target": "_blank"
+    },
+    {
+      "text": "Документ №3",
+      "href": "/abc3/map.jpeg",
+      "fileSize": "2МБ"
+    },
+    {
+      "text": "Документ №4",
+      "href": "/abc/map.rar"
+    }
+  ],
+  "columnsMode": "double"
+}

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,
+export const LINK_DOCS_ONE_COLUMN: LinkDocsContent = {
+  ...LINK_DOCS,
   columnsMode: 'single',
 };
 
-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} />,
+  'two columns (default)': <LinkDocs context={context} {...LINK_DOCS} />,
+  'one column': <LinkDocs context={context} {...LINK_DOCS_ONE_COLUMN} />,
+  'another icon': <LinkDocs context={context} {...LINK_DOCS_ANOTHER_ICON} />,
+  'no icon and title': <LinkDocs context={context} {...LINK_DOCS_NO_ICON} />,
 };

package/src/components/LinkDocs/LinkDocs.tsx

@@ -13,7 +13,7 @@ const titleAlignStyleMap: Record<AlignType, string> = {
 
 const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
   double: 'mb-8',
-  single: '',
+  single: 'mb-[26px]',
 };
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
@@ -31,7 +31,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
       <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>
+                  {icon && <Icon className="mr-2.5" name={icon} width="24px" height="24px" />}
+                  <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.fixture.tsx

@@ -6,6 +6,7 @@ import type { Picture } from '../../model/Picture';
 const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
+  alt: 'Потребительский кредит наличными',
   size: {
     width: 280,
     height: 280,

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/ProductBlock.tsx

@@ -14,7 +14,9 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   const { handlerDecorator } = context;
   return (
     <section
-      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] ${className || ''}`}
+      className={`font-sans bg-white pt-10 pl-[50px] pb-[50px] pr-[7.5rem] box-border min-h-[420px] ${
+        className || ''
+      }`}
     >
       {breadcrumbs?.length ? (
         <div className="text-xs mb-6">

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}
@@ -46,7 +43,7 @@ function renderBenefit(benefit: Benefit, i: number) {
           height="24"
         />
       )}
-      <div className="flex gap-1 flex-col h-full">
+      <div className="flex gap-1 flex-col h-full max-w-[149px]">
         <h4 className="font-medium text-primary-text text-xl m-0">{benefit.label}</h4>
         {benefit.description && (
           <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>

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>