@redneckz/wildless-cms-uni-blocks 0.3.11 → 0.3.14

package/src/components/Footer/Footer.mobile.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { AccordionProps } from '../Accordion/Accordion';
 import { Accordion } from '../Accordion/Accordion';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';
@@ -13,6 +12,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { getAccordionItems } from '../../utils/getAccordionItems';
+import { useSitemap } from "../../services/sitemap/useSitemap";
 
 export interface FooterProps extends FooterContent, UniBlockProps {}
 
@@ -23,20 +23,20 @@ export const Footer = JSX<FooterProps>(
     relatedEnterprises,
     contacts,
     socialMedia,
-    topItems,
     context,
     horizontalNavigationTitle,
-    subMenu,
   }) => {
-    const propsTextBlock: AccordionProps = {
-      context,
-      accordionItems: getAccordionItems(topItems),
-    };
+    const sitemap = useSitemap(context.useAsyncData);
+    const dispositions = sitemap?.dispositions
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion className="!p-0 mb-4" {...propsTextBlock} />
-        <div>{subMenu?.map(renderSubMenuItem)}</div>
+        <Accordion
+          context={context}
+          className="!p-0 mb-4"
+          accordionItems={getAccordionItems(sitemap.topItems)}
+        />
+        <div>{dispositions?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}
           title="Мобильное приложение"

package/src/components/Footer/FooterContent.ts

@@ -1,6 +1,6 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 
 /**
  * @title Тип контакта

package/src/components/Gallery/Gallery.example.json

@@ -13,6 +13,7 @@
       "title": "Заголовок 1",
       "description": "Описание 1",
       "href": "/credit-cards",
+      "version": "primary",
       "items": [
         {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
         {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
@@ -30,6 +31,7 @@
       "title": "Заголовок 2",
       "description": "Описание 2",
       "href": "/credit-cards",
+      "version": "primary",
       "items": [
         {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
         {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
@@ -47,6 +49,7 @@
       "title": "Заголовок 3",
       "description": "Описание 3",
       "href": "/credit-cards",
+      "version": "primary",
       "items": [
         {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
         {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
@@ -64,6 +67,7 @@
       "title": "Заголовок 4",
       "description": "Описание 4",
       "href": "/credit-cards",
+      "version": "primary",
       "items": [
         {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
         {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},

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

@@ -1,8 +1,8 @@
-import { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
 import { Gallery } from './Gallery';
+import { GalleryCard } from './GalleryContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -34,7 +34,7 @@ const defaultItems = [
   { title: 'До 15% ', text: 'Кэшбэк от покупок' },
 ];
 
-const cards = [
+const cards: GalleryCard[] = [
   {
     image,
     title: 'Вклады в любой валюте',
@@ -60,7 +60,6 @@ const cards = [
     title: 'Вклады в любой валюте',
   },
   {
-    image,
     title: 'Вклады в любой валюте',
     description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
     button: buttonPrimary,
@@ -70,7 +69,13 @@ const cards = [
     title: 'Вклады в любой валюте',
     description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
     button: buttonPrimary,
-    version: 'secondary' as BlockVersion,
+    version: 'secondary',
+  },
+  {
+    image,
+    title: 'Вклады в любой валюте',
+    items: defaultItems,
+    version: 'secondary',
   },
 ];
 

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

@@ -21,9 +21,17 @@ export const Gallery = JSX<GalleryProps>(
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
       >
         <div className="flex flex-col items-center mb-5">
-          <Heading headingType="h2" className="text-center" title={title} />
+          {title ? (
+            <Heading
+              headingType="h3"
+              className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
+              title={title}
+            />
+          ) : null}
           {description ? (
-            <div className="font-normal text-m-md max-w-[600px] mt-2">{description}</div>
+            <div className="font-normal text-m-md max-w-[600px] text-center mb-5">
+              {description}
+            </div>
           ) : null}
         </div>
         {renderCardsLayout(isScroll, cards, context)}
@@ -43,19 +51,19 @@ function renderCardsLayout(isScroll: boolean, cards: GalleryCard[], context) {
 function renderCard(card: GalleryCard, key: number) {
   return (
     <div
-      className={`box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      className={`h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
       ${blockStyle[card.version ?? 'primary']}`}
       key={key}
     >
       <div>
         {card.image?.src ? (
           <div className="flex justify-center">
-            <Img className="mb-6" image={card.image} />
+            <Img className="mb-3.5" image={card.image} />
           </div>
         ) : null}
-        {card.title ? <h4 className={`font-medium text-m-title-xs m-0`}>{card.title}</h4> : null}
+        {card.title ? <h3 className={`font-medium text-m-title-xs m-0`}>{card.title}</h3> : null}
         {card.description ? renderDescription(card) : null}
-        {card.items?.length ? renderItems(card.items) : null}
+        {card.items?.length ? renderItems(card.items, card.version) : null}
       </div>
       {card?.button?.text ? renderButton(card.button) : null}
     </div>
@@ -75,7 +83,7 @@ function renderButton(button) {
 function renderDescription(card: GalleryCard) {
   return (
     <div
-      className={`text-secondary-text mt-2 ${
+      className={`text-secondary-text mt-1 text-m-sm ${
         card.version === 'secondary' ? 'text-white opacity-80' : ''
       }`}
     >
@@ -84,13 +92,15 @@ function renderDescription(card: GalleryCard) {
   );
 }
 
-function renderItems(items: GalleryItem[]) {
+function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
   return (
     <section className="mt-3">
       {items.map((item, i) => (
         <div key={String(i)}>
           <span className="text-m-md font-medium">{item.title}</span>
-          <span className="text-m-sm text-secondary-text pl-2">{item.text}</span>
+          <span className={`text-m-sm pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
+            {item.text}
+          </span>
         </div>
       ))}
     </section>

package/src/components/Gallery/GalleryContent.ts

@@ -2,8 +2,13 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Элемент списка
+ */
 export interface GalleryItem {
+  /** @title Заголовок (моб.) */
   title?: string; //TODO: for mobile
+  /** @title Текст */
   text?: string;
 }
 
@@ -36,5 +41,6 @@ export interface GalleryContent {
    * @minItems 4
    */
   cards?: GalleryCard[];
+  /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */
   isScroll?: boolean; //TODO: for mobile
 }

package/src/components/Gallery/GalleryInner.tsx

@@ -41,6 +41,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             className="absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]"
             onClick={handlePrevClick}
             ariaLabel="Пролистать влево"
+            data-block-control="scroll-left"
           />
         )}
         {showNextButton && (
@@ -48,6 +49,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             className="absolute top-1/2 right-8 z-10 mt-[25px]"
             onClick={handleNextClick}
             ariaLabel="Пролистать вправо"
+            data-block-control="scroll-right"
           />
         )}
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" />

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

@@ -1,209 +1,7 @@
 import { context } from '../../setup-fixture';
 import { Header } from './Header.mobile';
 
-const DEFAULT_ORIGIN = 'https://rshb.ru/';
-
 export default {
-  default: (
-    <Header
-      context={context}
-      defaultLocation="Москва"
-      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: 'О банке',
-          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: 'Залоговое имущество',
-            },
-          ],
-        },
-      ]}
-      burgerSubMenu={[
-        {
-          text: 'Офисы',
-          href: '#',
-          icon: 'BankIcon',
-        },
-        {
-          text: 'Банкоматы',
-          href: '#',
-          icon: 'AtmIcon',
-        },
-      ]}
-    />
-  ),
+  default: <Header context={context} defaultLocation="Москва" />,
   transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
 };

package/src/components/Header/Header.mobile.tsx

@@ -16,18 +16,17 @@ import { HeaderTop } from './HeaderTop';
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, burgerSubMenu }) => {
+  ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems }) => {
     const router = context.useRouter();
     const sitemap = useSitemap(context.useAsyncData);
+    const dispositions = sitemap?.dispositions
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
-
     const [burgerMenuShow, setBurgerMenuShow] = context.useState(false);
-
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (
@@ -53,13 +52,13 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={burgerSubMenu}
+            burgerSubMenu={dispositions}
             defaultLocation={defaultLocation}
           >
             <Accordion
               context={context}
-              accordionItems={getAccordionItems(topItems)}
-              className="p-0 pt-0 pb-0 mb-4"
+              accordionItems={getAccordionItems(sitemap.topItems)}
+              className="!p-0 mb-4"
             />
           </HeaderBurger>
         ) : null}

package/src/components/Header/HeaderBurger.tsx

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
-import type { SubMenuItem } from './HeaderContent';
+import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
   context: ContentPageContext;
   onClick: () => void;
-  burgerSubMenu?: SubMenuItem[];
+  burgerSubMenu?: DispositionItem[];
   defaultLocation?: string;
   children?: any;
 }
@@ -15,13 +15,18 @@ export interface HeaderBurgerProps {
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
-
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
-        <button className="absolute top-4 right-4 border-none bg-transparent cursor-pointer" onClick={onClick}>
+        <button
+          className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
+          onClick={onClick}
+        >
           <Icon name="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4 bg-transparent cursor-pointer">
+        <button
+          onClick={getCity}
+          className="flex items-center text-sm text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
+        >
           <Icon
             name="GeolocationIcon"
             width="20"
@@ -39,7 +44,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
   },
 );
 
-const renderBurgerSubMenuItem = (menu: SubMenuItem, i: number) => {
+const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">

package/src/components/Header/HeaderContent.ts

@@ -1,7 +1,7 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 
 /**
  * @title Пункт подменю
@@ -9,8 +9,18 @@ import type { IconName } from '../../ui-kit/Icon/IconProps';
 export interface SubMenuItem extends LinkProps {
   icon?: IconName;
 }
+
+/**
+ * @title Ссылка дополнительного меню
+ * @required ["text", "href"]
+ */
+export interface DispositionItem extends LinkProps {
+  /** @hidden */
+  icon?: IconName;
+}
+
 /**
- * @title Шапка
+ * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent extends SitemapProps {
@@ -25,6 +35,4 @@ export interface HeaderContent extends SitemapProps {
    * @default white
    */
   bgColor?: BgColorVersion;
-  /** @title Подменю */
-  burgerSubMenu?: SubMenuItem[]; // TODO: для мобильной версии
 }

package/src/components/Header/HeaderTop.tsx

@@ -11,7 +11,11 @@ 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 border-0 bg-transparent cursor-pointer" onClick={onClick} aria-label="Открыть меню">
+      <button
+        className="pl-0 pr-4 border-0 bg-transparent cursor-pointer"
+        onClick={onClick}
+        aria-label="Открыть меню"
+      >
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"

package/src/components/Headline/Headline.example.json

@@ -2,5 +2,5 @@
   "title": "Заголовок",
   "description": "Описание",
   "align": "center",
-  "bgColor": "transparent"
+  "bgColorHeadline": "transparent"
 }