@redneckz/wildless-cms-uni-blocks 0.2.113 → 0.2.116

package/src/components/BaseTile/BaseTile.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTileInner } from './BaseTileInner';
 import type { AlignType, BaseTileCommonProps } from './BaseTileProps';
-import { getTitleSizeByClassName } from './getTitleSizeByClassName';
+import { getHeadingType } from './getHeadingType';
 
 const alignBlock: Record<AlignType, string> = {
   left: 'items-start',
@@ -20,7 +20,7 @@ export const BaseTile = JSX<BaseTileProps>(
     className,
     context,
     title,
-    titleSize,
+    headingType,
     description,
     children,
     buttons,
@@ -32,12 +32,11 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full ${alignBlock[align]}`}>
         {title && (
-          <Title
-            size={titleSize || getTitleSizeByClassName(className)}
+          <Heading
+            type={headingType || getHeadingType(className)}
             className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
-          >
-            {title}
-          </Title>
+            text={title}
+          />
         )}
         <BaseTileInner
           context={context}

package/src/components/BaseTile/BaseTile.tsx

@@ -1,20 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTileInner } from './BaseTileInner';
 import type { BaseTileCommonProps } from './BaseTileProps';
-import { getTitleSizeByClassName } from './getTitleSizeByClassName';
+import { getHeadingType } from './getHeadingType';
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
-const TITLE_CLASSES = 'font-medium m-0 whitespace-pre-wrap max-w-[600px]';
-
 export const BaseTile = JSX<BaseTileProps>(
   ({
     className,
     context,
     title,
-    titleSize,
+    headingType,
     description,
     children,
     buttons,
@@ -25,12 +23,15 @@ export const BaseTile = JSX<BaseTileProps>(
     return (
       <div className={`font-sans flex flex-col grow h-full items-start`}>
         {title && (
-          <Title
-            size={titleSize || getTitleSizeByClassName(className)}
-            className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
+          <Heading
+            type={headingType || getHeadingType(className)}
+            text={title}
+            className={`whitespace-pre-wrap max-w-[600px] ${
+              version === 'primary' ? 'text-primary-text' : ''
+            }`}
           >
             {title}
-          </Title>
+          </Heading>
         )}
         <BaseTileInner
           context={context}
@@ -39,6 +40,7 @@ export const BaseTile = JSX<BaseTileProps>(
           children={children}
           description={description}
           items={items}
+          version={version}
         />
       </div>
     );

package/src/components/BaseTile/BaseTileInner.tsx

@@ -13,22 +13,22 @@ export const BaseTileInner = JSX<BaseTileInnerProps>(
     const router = context.useRouter();
     const { handlerDecorator } = context;
     return (
-      <div className={`flex grow w-full justify-between}`}>
-        <div className={`flex flex-col justify-between items-start}`}>
+      <div className={`flex grow w-full justify-between`}>
+        <div className={`flex flex-col justify-between`}>
           <div>
             {description && (
               <div className={`font-normal text-base mt-4 max-w-[600px]`}>{description}</div>
             )}
             {children}
-            {items?.length && renderItems(items, version)}
+            {items?.length ? renderItems(items, version) : null}
           </div>
-          {buttons?.length && (
+          {buttons?.length ? (
             <div className="flex mt-9 gap-3">
               {buttons.map((button, index) =>
                 renderButton(useLink({ router, handlerDecorator }, button), index),
               )}
             </div>
-          )}
+          ) : null}
         </div>
         {image?.src && <Img className="mt-auto ml-7" image={image} />}
       </div>

package/src/components/BaseTile/BaseTileProps.ts

@@ -1,8 +1,8 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { HeadingType } from '../../ui-kit/Heading/HeadingProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
 
 /**
  * @title Выравнивание
@@ -21,7 +21,7 @@ export interface BaseTileIconButton extends ButtonWithIconProps {
 /**
  * @title Общий компонент плиток
  */
-export interface BaseTileCommonProps extends BaseTileTitleProps, BaseTileMainProps {}
+export type BaseTileCommonProps = BaseTileTitleProps & BaseTileMainProps;
 
 /**
  * @title Заголовк плитки
@@ -30,11 +30,11 @@ export interface BaseTileTitleProps {
   /** @title Заголовок */
   title?: string;
   /**
-   * @title Размер заголовка
-   * @default M
+   * @title Тип заголовка
    */
-  titleSize?: TitleSize;
+  headingType?: HeadingType;
 }
+
 export interface BaseTileMainProps {
   description?: string;
   image?: Picture;

package/src/components/BaseTile/{getTitleSizeByClassName.ts → getHeadingType.ts}

@@ -1,11 +1,12 @@
 import { getColSpan } from '../../utils/getColSpan';
-export function getTitleSizeByClassName(className = '') {
+
+export function getHeadingType(className = '') {
   const colSpan = getColSpan(className);
   if (colSpan <= 4) {
-    return 'S';
+    return 'h4';
   } else if (colSpan <= 8) {
-    return 'M';
+    return 'h3';
   } else {
-    return 'L';
+    return 'h2';
   }
 }

package/src/components/BaseTile/renderButton.tsx

@@ -6,7 +6,11 @@ export function renderButton({ icon, ...button }: BaseTileIconButton, i: number)
   if (!button?.text) return;
 
   return icon ? (
-    <Button key={String(i)} appendLeft={<Icon name={icon} width="24" height="24" />} {...button} />
+    <Button
+      key={String(i)}
+      appendLeft={<Icon name={icon} width="24" height="24" asSVG />}
+      {...button}
+    />
   ) : (
     <Button key={String(i)} {...button} />
   );

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
 import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
@@ -13,7 +13,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         className || ''
       }`}
     >
-      {title ? <Title className="font-medium m-0 max-w-[47rem] text-center">{title}</Title> : null}
+      {title ? <Heading type="h2" className="max-w-[47rem] text-center" text={title} /> : null}
       {benefits?.length ? (
         <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
       ) : null}

package/src/components/Blocks.mobile.ts

@@ -2,6 +2,7 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { LinkDocs } from './LinkDocs/LinkDocs';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
@@ -13,6 +14,7 @@ export const Blocks = {
   Footer,
   Header,
   Headline,
+  LinkDocs,
   Placeholder,
   ProductBlock,
   ProductGallery,

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -3,7 +3,7 @@ import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../types';
 import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ComparisonTableContent } from './ComparisonTableContent';
 import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
 import { HeaderCell } from './HeaderCell';
@@ -54,7 +54,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           className || ''
         }`}
       >
-        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        <Heading type="h2" className="max-w-[47rem] text-center mb-9 mx-auto" text={title} />
         <div role="table">
           {colHeaders?.length ? (
             <TableRowContainer>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -2,10 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import { BORDER_CLASSES, GRADIENT } from './constants';
 
 export interface HeaderCellProps {
@@ -30,11 +30,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && (
-      <Title size="S" className="font-medium m-0 text-center text-white">
-        {title}
-      </Title>
-    )}
+    {title && <Heading type="h4" className="text-center text-white" text={title} />}
     {link?.text && (
       <div className="mt-auto w-full">
         <Button

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

@@ -1395,6 +1395,7 @@
       "style": ["col-span-12"],
       "content": {
         "title": "Дополнительные документы",
+        "subtitle": "Ответы на часто задаваемые вопросы",
         "icon": "DocIcon",
         "documents": [
           {
@@ -1881,36 +1882,36 @@
         "topItems": [
           {
             "href": "https://rshb.ru/",
-            "text": "Частным клиентам",
+            "text": "О банке",
             "target": "_blank",
             "items": [
               {
                 "href": "https://rshb.ru/",
-                "text": "Кредитные карты"
+                "text": "О банке"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Дебетовые карты"
+                "text": "Новости"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Кредиты"
+                "text": "Офисы и отделения"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Ипотека"
+                "text": "Карьера в банке"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Вклады и сбережения"
+                "text": "Пресс-центр"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Инвестиции"
+                "text": "Кредитным организациям"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Страхование"
+                "text": "Закупки"
               },
               {
                 "href": "https://rshb.ru/",
@@ -1918,90 +1919,23 @@
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Биометрическая регистрация"
+                "text": "Непрофильные/Профильные нецелевые активы"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Перевод денег"
+                "text": "Инсайдерам"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Обмен денег"
+                "text": "Противодействие коррупции"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Акции"
+                "text": "Меры безопасности"
               },
               {
                 "href": "https://rshb.ru/",
-                "text": "Тарифы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Архивная информация"
-              }
-            ]
-          },
-          {
-            "href": "https://rshb.ru/",
-            "text": "Бизнес клиентам",
-            "target": "_blank",
-            "items": [
-              {
-                "href": "https://rshb.ru/",
-                "text": "РКО"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Кредиты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Депозиты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Эквайринг"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Банковские карты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "ВЭД"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Инвестиции"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Обмен валюты"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Страхование"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Партнёрские программы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Онлайн-сервисы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Акции"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Тарифы"
-              },
-              {
-                "href": "https://rshb.ru/",
-                "text": "Архивная информация"
+                "text": "Залоговое имущество"
               }
             ]
           }

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

@@ -265,6 +265,62 @@
         "bgColor": "transparent"
       }
     },
+    {
+      "type": "LinkDocs",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Дополнительные документы",
+        "subtitle": "Ответы на часто задаваемые вопросы",
+        "icon": "DocIcon",
+        "documents": [
+          {
+            "text": "target self",
+            "href": "/abc1/cooldoc.doc",
+            "target": "_self"
+          },
+          {
+            "text": "target blank",
+            "href": "/abc2/wtf.rtf",
+            "target": "_blank"
+          },
+          {
+            "text": "GlassIcon",
+            "href": "/abc3/map.jpeg"
+          },
+          {
+            "text": "no icon",
+            "href": "/abc4"
+          },
+          {
+            "text": "документ 5",
+            "href": "/abc5"
+          },
+          {
+            "text": "документ 6",
+            "href": "/abc6/abc.pdf"
+          },
+          {
+            "text": "Text text text",
+            "href": "/abc7/yolo.png"
+          },
+          {
+            "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МБ"
+          },
+          {
+            "text": "И ещё немного текста",
+            "href": "/abc9/rarniw.rar",
+            "fileSize": "666МБ"
+          },
+          {
+            "text": "Форматируем, сортируем, смотрим как отображается...",
+            "href": "/abc10/",
+            "fileSize": "65ГБ"
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/Footer/Footer.fixture.tsx

@@ -8,132 +8,6 @@ export default (
     <Footer
       className="col-span-12"
       topItems={[
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'Частным клиентам',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредитные карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Дебетовые карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Ипотека',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Вклады и сбережения',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инвестиции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Страхование',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Премиальным клиентам',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Биометрическая регистрация',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Перевод денег',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Обмен денег',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Акции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Тарифы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Архивная информация',
-            },
-          ],
-        },
-        {
-          href: DEFAULT_ORIGIN,
-          text: 'Бизнес клиентам',
-          target: '_blank',
-          items: [
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'РКО',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Кредиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Депозиты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Эквайринг',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Банковские карты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'ВЭД',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Инвестиции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Обмен валюты',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Страхование',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Партнёрские программы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Онлайн-сервисы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Акции',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Тарифы',
-            },
-            {
-              href: DEFAULT_ORIGIN,
-              text: 'Архивная информация',
-            },
-          ],
-        },
         {
           href: DEFAULT_ORIGIN,
           text: 'О банке',

package/src/components/Footer/MediaButton.tsx

@@ -25,7 +25,7 @@ interface MediaButtonProps {
 }
 
 export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
-  const { icon, width, height } =
+  const { icon, width, height, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
   if (!icon) return null;
@@ -34,6 +34,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
     <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}
+      aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >

package/src/components/Gallery/Gallery.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import type { GalleryCard } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
 
@@ -12,7 +12,7 @@ export const Gallery = JSX<GalleryProps>(({ title, description, cards = [], clas
       className={`relative font-sans text-primary-text bg-white p-4 overflow-hidden ${className}`}
     >
       <div className="flex flex-col items-center mb-8">
-        <Title className="font-medium m-0 text-centers">{title}</Title>
+        <Heading type="h2" className="text-center" text={title} />
         {description ? (
           <div className="font-normal text-base max-w-[600px] mt-3">{description}</div>
         ) : null}

package/src/components/Gallery/GalleryContainer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { GalleryVersion } from '../../model/GalleryVersion';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { Tile } from '../Tile/Tile';
 import { cardStyleMap, cardWidthMap, galleryLengthForScrollMap } from './constants';
@@ -24,7 +24,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
       <div>
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
         <div className="flex flex-col items-center mb-8">
-          {title ? <Title className="font-medium m-0 text-center">{title}</Title> : null}
+          {title ? <Heading type="h2" className="text-center" text={title} /> : null}
           {description ? (
             <div className="font-normal text-base max-w-[600px] mt-2.5">{description}</div>
           ) : null}