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

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,9 @@
-import { LinkDocs } from './LinkDocs';
 import { context } from '../../setup-fixture';
+import { LinkDocs } from './LinkDocs';
 import type { LinkDocsContent } from './LinkDocsContent';
+import { Accordion } from '../Accordion/Accordion';
 
-export const LinkDocsFixtureSetOne: LinkDocsContent = {
+export const LINK_DOCS: LinkDocsContent = {
   title: 'Дополнительные документы',
   icon: 'DocIcon',
   documents: [
@@ -14,7 +15,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 +28,41 @@ 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)': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS} />
+    </div>
+  ),
+  'one column': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ONE_COLUMN} />
+    </div>
+  ),
+  'another icon': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ANOTHER_ICON} />
+    </div>
+  ),
+  'no icon and title': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_NO_ICON} />
+    </div>
+  ),
 };

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/MiniGallery.fixture.tsx

@@ -1,7 +1,6 @@
+import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
-
 import { MiniGallery, MiniGalleryProps } from './MiniGallery';
-import { Picture } from '../../model/Picture';
 
 const image: Picture = {
   src: 'domovoj-kupon.png',
@@ -10,6 +9,7 @@ const image: Picture = {
     width: 120,
     height: 70,
   },
+  title: 'domovoj-kupon',
 };
 
 const defaultProps: MiniGalleryProps = {
@@ -39,16 +39,6 @@ const defaultProps: MiniGalleryProps = {
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
     },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-    },
-    {
-      title: 'Фермерские продукты',
-      description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
-    },
   ],
 };
 
@@ -73,18 +63,18 @@ const onlyTitleProps: MiniGalleryProps = {
       title: '«Моя выгода»',
       image,
     },
-    {
-      title: 'Фермерские продукты',
-      image,
-    },
-    {
-      title: 'Фермерские продукты',
-      image,
-    },
   ],
 };
 
 export default {
-  default: <MiniGallery {...defaultProps} />,
-  'only title': <MiniGallery {...onlyTitleProps} />,
+  default: (
+    <div className="container grid grid-cols-12">
+      <MiniGallery className="col-span-12" {...defaultProps} />
+    </div>
+  ),
+  'only title': (
+    <div className="container grid grid-cols-12">
+      <MiniGallery className="col-span-12" {...onlyTitleProps} />
+    </div>
+  ),
 };

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/MobileAppTile/MobileAppTile.fixture.tsx

@@ -4,7 +4,7 @@ import { MobileAppTile } from './MobileAppTile';
 
 export default {
   default: (
-    <div className="grid grid-cols-12">
+    <div className="container grid grid-cols-12">
       <MobileAppTile
         context={context}
         className="col-span-4"

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,27 @@ 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}
-    />
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" context={context} {...PICTURE_TEXT} />
+    </div>
   ),
 };

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.fixture.tsx

@@ -2,4 +2,8 @@ import { context } from '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 
-export default <Placeholder context={context} title="Неизвестный блок" />;
+export default (
+  <div className="container grid grid-cols-12">
+    <Placeholder className="col-span-12" context={context} title="Неизвестный блок" />
+  </div>
+);

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,
@@ -14,83 +15,89 @@ const image: Picture = {
 
 export default {
   default: (
-    <ProductBlock
-      context={context}
-      title={'Потребительский кредит наличными'}
-      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-      breadcrumbs={[
-        {
-          text: 'Главная',
-          href: '/',
-        },
-        {
-          text: 'Кредитные карты',
-          href: '/credit',
-        },
-        {
-          text: 'Кредитная карта Своя Union Pay',
-        },
-      ]}
-      benefits={[
-        {
-          label: 'До 5 млн ₽',
-          description: 'Кредитный лимит',
-          icon: 'EmptyWalletIcon',
-        },
-        {
-          label: 'От 16,9%',
-          description: 'Ставка по кредиту',
-          icon: 'PercentageSquareIcon',
-        },
-        {
-          label: 'До 5 лет',
-          description: 'Срок кредитования',
-          icon: 'CalendarIcon',
-        },
-      ]}
-      buttons={[
-        {
-          href: 'https://rshb.ru',
-          text: 'Оформить карту',
-          target: '_blank',
-          version: 'primary',
-        },
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        },
-      ]}
-      image={image}
-    />
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Потребительский кредит наличными'}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        breadcrumbs={[
+          {
+            text: 'Главная',
+            href: '/',
+          },
+          {
+            text: 'Кредитные карты',
+            href: '/credit',
+          },
+          {
+            text: 'Кредитная карта Своя Union Pay',
+          },
+        ]}
+        benefits={[
+          {
+            label: 'До 5 млн ₽',
+            description: 'Кредитный лимит',
+            icon: 'EmptyWalletIcon',
+          },
+          {
+            label: 'От 16,9%',
+            description: 'Ставка по кредиту',
+            icon: 'PercentageSquareIcon',
+          },
+          {
+            label: 'До 5 лет',
+            description: 'Срок кредитования',
+            icon: 'CalendarIcon',
+          },
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Оформить карту',
+            target: '_blank',
+            version: 'primary',
+          },
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image}
+      />
+    </div>
   ),
   'with items': (
-    <ProductBlock
-      context={context}
-      title={'Оплата проходит \nв 180 странах мира'}
-      breadcrumbs={[]}
-      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-      items={[
-        'Совершайте любые личные покупки',
-        'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-        'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-      ]}
-      buttons={[
-        {
-          href: 'https://rshb.ru',
-          text: 'Оформить карту',
-          target: '_blank',
-          version: 'primary',
-        },
-        {
-          href: 'https://rshb.ru',
-          text: 'Подробнее',
-          target: '_blank',
-          version: 'secondary',
-        },
-      ]}
-      image={image}
-    />
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Оплата проходит \nв 180 странах мира'}
+        breadcrumbs={[]}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        items={[
+          'Совершайте любые личные покупки',
+          'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+          'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+        ]}
+        buttons={[
+          {
+            href: 'https://rshb.ru',
+            text: 'Оформить карту',
+            target: '_blank',
+            version: 'primary',
+          },
+          {
+            href: 'https://rshb.ru',
+            text: 'Подробнее',
+            target: '_blank',
+            version: 'secondary',
+          },
+        ]}
+        image={image}
+      />
+    </div>
   ),
 };

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": "Описание",