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

package/mobile/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+import { formatCurrency } from './formatCurrency';
+
+const TABLE_HEAD_STYLE = 'text-left font-normal text-sm text-secondary-text';
+
+const CURRENCY_ICONS_MAP = {
+  USD: 'DollarIcon',
+  EUR: 'EuroIcon',
+};
+
+interface CurrencyTableProps {
+  className?: string;
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+}
+
+export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurrencyItems }) => {
+  return (
+    <table className={`h-fit w-fit ${className}`}>
+      <thead>
+        <tr>
+          <th className={TABLE_HEAD_STYLE}>Валюта</th>
+          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
+          <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        </tr>
+      </thead>
+      <tbody>{exchangeCurrencyItems.map((item) => renderCurrencyRow(item))}</tbody>
+    </table>
+  );
+});
+
+const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
+  const code = exchangeCurrencyItem?.currency?.currency;
+  return (
+    <tr key={code}>
+      <td className="pt-4">
+        <div className="flex items-center">
+          {code ? <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" /> : null}
+          <span className="ml-2">{code}</span>
+        </div>
+      </td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.buyExchangeRate)}</td>
+      <td className="pt-4 pl-11">{formatCurrency(exchangeCurrencyItem.saleExchangeRate)}</td>
+    </tr>
+  );
+};

package/mobile/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+interface CurrentLocationProps {
+  className?: string;
+  address?: string;
+  distance?: string;
+}
+
+export const CurrentLocation = JSX<CurrentLocationProps>(
+  ({ className = '', address, distance }) => (
+    <div className={`flex text-sm ${className}`}>
+      <Icon className="min-w-fit" name="GpsIcon" width="24" height="24" asSVG />
+      <div className="ml-1.5">
+        {address ? <p className="m-0">{address}</p> : null}
+        {distance ? (
+          <p className="text-secondary-text m-0">Курс указан для ближайшего офиса - {distance}</p>
+        ) : null}
+      </div>
+    </div>
+  ),
+);

package/mobile/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Button } from '../../ui-kit/Button/Button';
+import { Input } from '../../ui-kit/Input/Input';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+import type { ExchangeCurrencyItem } from './ExchangeRateTileContent';
+
+export interface ExchangeCurrencyCalculatorProps {
+  exchangeCurrencyItems: ExchangeCurrencyItem[];
+  codes: string[];
+  className?: string;
+}
+
+export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
+  ({ codes, className = '' }) => {
+    return (
+      <div className={`grid gap-3.5 ${className}`}>
+        {renderInput('Хочу продать', codes)}
+        {renderInput('Получу', codes)}
+        <Button className="box-border mt-3.5 py-3 h-12 w-44" version="primary" href="#">
+          Купить валюту
+        </Button>
+      </div>
+    );
+  },
+);
+
+function renderInput(placeholder: string, codes: string[]) {
+  return (
+    <div className="flex items-center">
+      <Input
+        className="h-10 border pl-2.5 rounded-md text-m-sm w-full appearance-none"
+        type="number"
+        placeholder={`${placeholder}`}
+      />
+      {codes.length ? (
+        <Select className="h-9 -translate-x-16">
+          {codes.map((code, i) => (
+            <SelectOption key={String(i)} value={code}>
+              {code}
+            </SelectOption>
+          ))}
+        </Select>
+      ) : null}
+    </div>
+  );
+}

package/mobile/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,104 +1,73 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useExchangeRates } from '../../hooks/useExchangeRates';
 import type { UniBlockProps } from '../../types';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { Icon } from '../../ui-kit/Icon/Icon';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
+import { CurrencyTable } from './CurrencyTable';
+import { CurrentLocation } from './CurrentLocation';
+import { ExchangeCurrencyCalculator } from './ExchangeCurrencyCalculator';
 import type { ExchangeRateTileContent } from './ExchangeRateTileContent';
 
-export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
-
-const CBR_EXCHANGE_RATE_URL = 'https://www.cbr-xml-daily.ru/daily_json.js';
-
 const CURRENCY_CODES = ['USD', 'EUR'];
-const CURRENCY_ICONS_MAP = {
-  USD: 'DollarIcon',
-  EUR: 'EuroIcon',
-};
-
-const buttons: ButtonProps[] = [
+const EXCHANGE_CODES = ['RUB', 'USD', 'EUR'];
+const DEFAULT_CURRENCY_ITEMS = [
   {
-    text: 'Все показатели',
-    href: 'https://cbr.ru/currency_base/daily/',
-    version: 'secondary',
+    buyExchangeRate: 90.6,
+    saleExchangeRate: 92.8,
+    currency: { id: 2, code: '978', currency: 'EUR', name: 'Евро' },
+  },
+  {
+    buyExchangeRate: 73.75,
+    saleExchangeRate: 75.95,
+    currency: { id: 1, code: '840', currency: 'USD', name: 'Американский доллар' },
   },
 ];
 
+const DEFAULT_LOCATION = {
+  address: 'Москва, ул.Ленина д.28',
+  distance: '6км',
+};
+
+export interface ExchangeRateTileProps extends ExchangeRateTileContent, UniBlockProps {}
+
 export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
   ({ className = '', context, title = 'Курсы обмена валют' }) => {
-    const { data } = context.useAsyncData(CBR_EXCHANGE_RATE_URL, fetchExchangeRate);
+    const data = useExchangeRates(context.useAsyncData);
+    const exchangeCurrencyItems =
+      data?.exchangeRate?.currencies?.filter((item) => {
+        return CURRENCY_CODES.indexOf(item?.currency?.currency || '') !== -1;
+      }) || DEFAULT_CURRENCY_ITEMS;
+
     return (
-      <section
-        className={`bg-white text-primary-text font-sans p-9 box-border ${className}  ${getTileRightPadding(
-          className,
-        )} ${getTileMinHeight(className)} `}
-      >
+      <section className={`bg-white text-primary-text font-sans p-9 box-border ${className}`}>
         <BaseTile
           context={context}
           title={
-            title && (
-              <Heading
-                headingType={getTileHeadingType(className)}
-                title={title}
-                className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
-              />
-            )
-          }
-          buttons={
-            buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-            ) : null
+            <Heading
+              headingType={getTileHeadingType(className)}
+              title={title}
+              className="whitespace-pre-wrap mb-3"
+            />
           }
         >
-          <table>
-            <thead>
-              <tr>
-                <CurrencyTH>Валюта</CurrencyTH>
-                <CurrencyTH className="pl-11">Курс</CurrencyTH>
-              </tr>
-            </thead>
-            <tbody>{CURRENCY_CODES.map(renderCurrencyRow(data))}</tbody>
-          </table>
+          <div className="flex">
+            <div className="mr-20 pt-3">
+              {exchangeCurrencyItems ? (
+                <CurrencyTable className="mb-7" exchangeCurrencyItems={exchangeCurrencyItems} />
+              ) : null}
+              <CurrentLocation {...DEFAULT_LOCATION} />
+            </div>
+            {exchangeCurrencyItems?.length ? (
+              <ExchangeCurrencyCalculator
+                className="grow"
+                exchangeCurrencyItems={exchangeCurrencyItems}
+                codes={EXCHANGE_CODES}
+              />
+            ) : null}
+          </div>
         </BaseTile>
       </section>
     );
   },
 );
-
-const CurrencyTH = JSX<{ className?: string }>(({ className = '', children }) => (
-  <th className={`text-left font-normal text-sm text-secondary-text ${className}`}>{children}</th>
-));
-
-const CurrencyTD = JSX<{ className?: string }>(({ className = '', children }) => (
-  <td className={`text-left font-normal text-base text-primary-text ${className}`}>{children}</td>
-));
-
-async function fetchExchangeRate(): Promise<{
-  Valute?: Record<string, { CharCode: string; Name?: string; Value: number; Previous?: number }>;
-}> {
-  const response = await fetch(CBR_EXCHANGE_RATE_URL);
-  return await response.json();
-}
-
-const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
-
-const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');
-
-const renderCurrencyRow = (data) => (code: string) => {
-  const value = (data?.Valute || {})[code]?.Value;
-  return (
-    <tr key={code}>
-      <CurrencyTD className="pt-4">
-        <div className="flex items-center">
-          <Icon name={CURRENCY_ICONS_MAP[code]} width="24" height="24" />
-          <span className="ml-2">{code}</span>
-        </div>
-      </CurrencyTD>
-      <CurrencyTD className="pt-4 pl-11">{formatCurrency(value)}</CurrencyTD>
-    </tr>
-  );
-};

package/mobile/src/components/ExchangeRateTile/ExchangeRateTileContent.ts

@@ -4,3 +4,14 @@ import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
  * @title Курсы валют
  */
 export type ExchangeRateTileContent = HeadingContent;
+
+export interface ExchangeCurrencyItem {
+  buyExchangeRate?: number;
+  saleExchangeRate?: number;
+  currency?: {
+    id?: number;
+    code?: string;
+    currency?: string;
+    name?: string;
+  };
+}

package/mobile/src/components/ExchangeRateTile/formatCurrency.ts

@@ -0,0 +1,3 @@
+const currencyNumberFormat = new Intl.NumberFormat('ru', { style: 'currency', currency: 'RUB' });
+
+export const formatCurrency = (value?: number) => (value ? currencyNumberFormat.format(value) : '');

package/mobile/src/components/Footer/Footer.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/mobile/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/mobile/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/mobile/src/components/Gallery/Gallery.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/mobile/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/mobile/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/mobile/src/components/Header/Header.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/mobile/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/mobile/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/mobile/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/mobile/src/components/Headline/Headline.example.json

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