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

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}

package/src/components/Header/HeaderTop.tsx

@@ -11,7 +11,7 @@ export interface HeaderTopProps {
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
     <div className="flex items-center">
-      <button className="pr-4" onClick={onClick}>
+      <button className="pr-4" onClick={onClick} aria-label="Открыть меню">
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"

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

@@ -1,9 +1,7 @@
 import { context } from '../../setup-fixture';
 
 import { Headline } from './Headline';
-import { Headline as MobileHeadline } from './Headline';
 import { HeadlineContent } from './HeadlineContent';
-import { Picture } from '../../model/Picture';
 
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
@@ -12,15 +10,6 @@ export const HEADLINE: HeadlineContent = {
   bgColor: 'transparent',
 };
 
-const image: Picture = {
-  src: 'globe-1.png',
-  format: 'webp',
-  size: {
-    width: 180,
-    height: 180,
-  },
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -49,47 +38,4 @@ export default {
       />
     </div>
   ),
-  mobile: (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        image={image}
-      />
-    </div>
-  ),
-  'mobile title-img': (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        image={image}
-      />
-    </div>
-  ),
-  'mobile desc-img': (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        image={image}
-      />
-    </div>
-  ),
-  'mobile white': (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        bgColor="bg-white"
-        image={image}
-      />
-    </div>
-  ),
 };

package/src/components/Headline/Headline.mobile.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -11,11 +11,7 @@ export const Headline = JSX<HeadlineProps>(
   ({ bgColor = 'transparent', className = '', title, description, image }) => {
     return (
       <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && (
-          <Title size="L" className="text-primary-text mt-0 font-medium">
-            {title}
-          </Title>
-        )}
+        {title && <Heading type="h2" className="text-primary-text" text={title} />}
         {description && (
           <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
         )}

package/src/components/Headline/Headline.tsx

@@ -1,7 +1,7 @@
 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 { AlignType } from '../BaseTile/BaseTileProps';
 import type { HeadlineContent } from './HeadlineContent';
 
@@ -18,11 +18,7 @@ export const Headline = JSX<HeadlineProps>(
     const textClasses = alignText[align];
     return (
       <section className={`p-[50px] ${bgColor} ${className}`}>
-        {title && (
-          <Title size="L" className={`text-primary-text mt-0 font-medium ${textClasses}`}>
-            {title}
-          </Title>
-        )}
+        {title && <Heading type="h2" className={`text-primary-text ${textClasses}`} text={title} />}
         {description && (
           <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
         )}

package/src/components/Headline/HeadlineContent.ts

@@ -1,11 +1,14 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Picture } from '../../model/Picture';
+import type { AlignType, BaseTileTitleProps } from '../BaseTile/BaseTileProps';
 
 /**
  * @title Заголовок
  */
-export interface HeadlineContent
-  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align' | 'image'> {
-  //TODO: image for mobile
+export interface HeadlineContent extends BaseTileTitleProps {
+  description?: string;
+  image?: Picture;
+  align?: AlignType;
+  // TODO: image for mobile
   bgColor?: BgColorVersion;
 }

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Дополнительные документы",
+  "subtitle": "Ответы на часто задаваемые вопросы",
   "icon": "DocIcon",
   "documents": [
     {
@@ -22,5 +23,7 @@
       "href": "/abc/map.rar"
     }
   ],
-  "columnsMode": "double"
+  "columnsMode": "double",
+  "listMode": "vertical",
+  "hasBorder": true
 }

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

@@ -0,0 +1,36 @@
+import { mobileContext } from '../../setup-fixture';
+import { linkDocsContentExample } from './linkDocsContentExample';
+import { LinkDocs } from './LinkDocs';
+
+export default {
+  'vertical (default)': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs
+        className="col-span-12"
+        context={mobileContext}
+        subtitle="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+        {...linkDocsContentExample}
+      />
+    </div>
+  ),
+  'vertical, no border': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs
+        className="col-span-12"
+        context={mobileContext}
+        hasBorder={false}
+        {...linkDocsContentExample}
+      />
+    </div>
+  ),
+  'horizontal, swipe list': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs
+        className="col-span-12"
+        context={mobileContext}
+        {...linkDocsContentExample}
+        listMode={'horizontal'}
+      />
+    </div>
+  ),
+};

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

@@ -1,67 +1,36 @@
 import { context } from '../../setup-fixture';
+import { linkDocsContentExample } from './linkDocsContentExample';
 import { LinkDocs } from './LinkDocs';
-import type { LinkDocsContent } from './LinkDocsContent';
-
-export const LINK_DOCS: LinkDocsContent = {
-  title: 'Дополнительные документы',
-  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 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МБ',
-    },
-    { text: 'И ещё немного текста', href: '/abc9/rarniw.rar', fileSize: '666МБ' },
-    {
-      text: 'Форматируем, сортируем, смотрим как отображается...',
-      href: '/abc10/',
-      fileSize: '65ГБ',
-    },
-  ],
-};
-
-export const LINK_DOCS_ONE_COLUMN: LinkDocsContent = {
-  ...LINK_DOCS,
-  columnsMode: 'single',
-};
-
-export const LINK_DOCS_ANOTHER_ICON: LinkDocsContent = {
-  ...LINK_DOCS,
-  icon: 'GlassIcon',
-  title: '',
-};
-
-export const LINK_DOCS_NO_ICON: LinkDocsContent = {
-  ...LINK_DOCS,
-  icon: undefined,
-};
 
 export default {
   'two columns (default)': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS} />
+      <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} />
     </div>
   ),
   'one column': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ONE_COLUMN} />
+      <LinkDocs
+        className="col-span-12"
+        context={context}
+        {...linkDocsContentExample}
+        columnsMode="single"
+      />
     </div>
   ),
-  'another icon': (
+  'custom icon': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ANOTHER_ICON} />
+      <LinkDocs
+        className="col-span-12"
+        context={context}
+        {...linkDocsContentExample}
+        icon="GlassIcon"
+      />
     </div>
   ),
-  'no icon and title': (
+  'no icon': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_NO_ICON} />
+      <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} icon="" />
     </div>
   ),
 };

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -0,0 +1,40 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { LinkDocsContent } from './LinkDocsContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
+
+export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
+
+export const LinkDocs = JSX<LinkDocsProps>(
+  ({
+    className = '',
+    context,
+    title,
+    subtitle,
+    icon = 'DocIcon',
+    documents,
+    listMode = 'vertical',
+    hasBorder = true,
+  }) => {
+    return (
+      <section className={`py-6 px-4 bg-white ${className}`}>
+        {title ? (
+          <Heading type="h2" className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`} text={title} />
+        ) : null}
+        {subtitle ? <h3 className="mb-5 text-center text-m-base">{subtitle}</h3> : null}
+        {listMode === 'vertical' ? (
+          <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
+        ) : (
+          <LinkDocsHorizontalList
+            context={context}
+            hasBorder={hasBorder}
+            documents={documents}
+            icon={icon}
+          />
+        )}
+      </section>
+    );
+  },
+);