@redneckz/wildless-cms-uni-blocks 0.3.12 → 0.3.15

package/mobile/src/components/CreditCalculator/CreditCalculator.tsx

@@ -1,92 +1,30 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
-import type { UniBlockProps } from '../../types';
-import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
-import { clamp } from '../../utils/clamp';
-import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Tabs } from '../../ui-kit/Tabs/Tabs';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import type { CreditCalculatorContent } from './CreditCalculatorContent';
-import { getCalculatorParams } from './getCalculatorParams';
-import { getCreditRate } from './getCreditRate';
-import { getCreditTermYears } from './getCreditTermYears';
-import { getDefaultMonths } from './getDefaultMonths';
-import { getDefaultSum } from './getDefaultSum';
-import { getMonthlyPayment } from './getMonthlyPayment';
-import { renderButton } from './renderButton';
-import { renderMonthsInput } from './renderMonthsInput';
-import { renderProposal } from './renderProposal';
-import { renderTermsButton } from './renderTermsButton';
-import { renderWantedSumInput } from './renderWantedSumInput';
+import { CreditCalculatorForm } from './CreditCalculatorForm';
+import { DEFAULT_TABS } from './defaultTabs';
 
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
-const DEFAULT_PAYMENT_TYPE = 'annuity';
-
-const borderStyle = 'border-solid border-[3px] border-primary-main rounded-md';
-
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ context, className = '', directoryName }) => {
-    const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
-    const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
-    const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
-    const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
-
-    const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
-    const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
-
-    const defaultSum = getDefaultSum(calculatorParams);
-    const defaultMonths = getDefaultMonths(calculatorParams);
-
-    const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
-    const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
-
-    const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
-
-    const monthlyPayment = getMonthlyPayment({
-      calculatorParams,
-      paymentType: DEFAULT_PAYMENT_TYPE,
-      rate,
-      sum: moneyValue || defaultSum,
-      months: monthsValue || defaultMonths,
-    });
-
-    const creditTermYears = getCreditTermYears(minMonths, maxMonths);
-
-    function handleButtonClick(value: number) {
-      setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
-    }
+  ({ className = '', context, tabs = DEFAULT_TABS }) => {
+    const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans text-primary-text p-10 bg-white ${className}`}>
-        <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${borderStyle}`}>
-          <div className="flex justify-between">
-            <div className="mr-[42px]">
-              {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
-              {renderMonthsInput({
-                minMonths,
-                maxMonths,
-                monthsValue,
-                defaultMonths,
-                setMonthsValue,
-              })}
-              <div className="flex mb-7">
-                {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
-              </div>
-              <Checkbox
-                text="Получаю пенсию на карту Россельхозбанка"
-                checked={isAnnuityChecked}
-                onChange={setIsAnnuityChecked}
-              />
-              <Checkbox
-                className="mt-3 mb-7"
-                text="Комплексная страховая защита"
-                checked={isInsuranceChecked}
-                onChange={setIsInsuranceChecked}
-              />
-            </div>
-            {renderProposal(monthlyPayment, rate)}
-          </div>
-          {renderTermsButton()}
-        </div>
+      <section className={`font-sans text-primary-text py-10 bg-white ${className}`}>
+        <Heading
+          className="w-full text-center mb-8"
+          headingType={getTileHeadingType(className)}
+          title="Калькулятор"
+        />
+        <Tabs tabs={tabs} currentTabIndex={currentTabIndex} onTabClick={setCurrentTabIndex} />
+        <CreditCalculatorForm
+          context={context}
+          directoryName={tabs[currentTabIndex]?.directoryName}
+        />
       </section>
     );
   },

package/mobile/src/components/CreditCalculator/CreditCalculatorContent.ts

@@ -1,3 +1,5 @@
+import type { Tab } from '../../ui-kit/Tabs/TabsProps';
+
 export interface CalculatorParams {
   isAnnuity?: boolean;
   minSum?: number;
@@ -13,9 +15,17 @@ export interface CreditCalculatorData {
 }
 
 /**
- * @title Кредитный калькулятор
+ * @title Вкладка
  */
-export interface CreditCalculatorContent {
+export interface CreditCalculatorTab extends Tab {
   /** @title Справочник */
   directoryName?: string;
 }
+
+/**
+ * @title Кредитный калькулятор
+ */
+export interface CreditCalculatorContent {
+  /** @title Вкладки */
+  tabs?: CreditCalculatorTab[];
+}

package/mobile/src/components/CreditCalculator/CreditCalculatorForm.tsx

@@ -0,0 +1,92 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCreditCalculatorData } from '../../hooks/useCreditCalculatorData';
+import type { UniBlockProps } from '../../types';
+import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { clamp } from '../../utils/clamp';
+import { DEFAULT_MAX_MONTHS, DEFAULT_MIN_MONTHS, MONTHS_IN_YEAR } from './constants';
+import { getCalculatorParams } from './getCalculatorParams';
+import { getCreditRate } from './getCreditRate';
+import { getCreditTermYears } from './getCreditTermYears';
+import { getDefaultMonths } from './getDefaultMonths';
+import { getDefaultSum } from './getDefaultSum';
+import { getMonthlyPayment } from './getMonthlyPayment';
+import { renderButton } from './renderButton';
+import { renderMonthsInput } from './renderMonthsInput';
+import { renderProposal } from './renderProposal';
+import { renderTermsButton } from './renderTermsButton';
+import { renderWantedSumInput } from './renderWantedSumInput';
+
+const DEFAULT_PAYMENT_TYPE = 'annuity';
+
+const BORDER_STYLE = 'border-solid border-[3px] border-primary-main rounded-md';
+
+export interface CreditCalculatorFormProps extends UniBlockProps {
+  directoryName?: string;
+}
+
+export const CreditCalculatorForm = JSX<CreditCalculatorFormProps>(({ context, directoryName }) => {
+  const [moneyValue, setMoneyValue] = context.useState<number | undefined>(undefined);
+  const [monthsValue, setMonthsValue] = context.useState<number | undefined>(undefined);
+  const [isAnnuityChecked, setIsAnnuityChecked] = context.useState(true);
+  const [isInsuranceChecked, setIsInsuranceChecked] = context.useState(true);
+
+  const tableRows = useCreditCalculatorData(context.useAsyncData, directoryName).rows;
+  const calculatorParams = getCalculatorParams({ tableRows, isAnnuity: isAnnuityChecked });
+
+  const defaultSum = getDefaultSum(calculatorParams);
+  const defaultMonths = getDefaultMonths(calculatorParams);
+
+  const minMonths = calculatorParams?.minMonths || DEFAULT_MIN_MONTHS;
+  const maxMonths = calculatorParams?.maxMonths || DEFAULT_MAX_MONTHS;
+
+  const rate = getCreditRate({ calculatorParams, isInsurance: isInsuranceChecked });
+
+  const monthlyPayment = getMonthlyPayment({
+    calculatorParams,
+    paymentType: DEFAULT_PAYMENT_TYPE,
+    rate,
+    sum: moneyValue || defaultSum,
+    months: monthsValue || defaultMonths,
+  });
+
+  const creditTermYears = getCreditTermYears(minMonths, maxMonths);
+
+  function handleButtonClick(value: number) {
+    setMonthsValue(clamp(value * MONTHS_IN_YEAR, minMonths, maxMonths));
+  }
+
+  return (
+    <section className="mt-7">
+      <div className={`box-border p-[49px] pr-[56px] mx-auto w-max ${BORDER_STYLE}`}>
+        <div className="flex justify-between">
+          <div className="mr-[42px]">
+            {renderWantedSumInput({ calculatorParams, moneyValue, defaultSum, setMoneyValue })}
+            {renderMonthsInput({
+              minMonths,
+              maxMonths,
+              monthsValue,
+              defaultMonths,
+              setMonthsValue,
+            })}
+            <div className="flex mb-7">
+              {creditTermYears.map((number, i) => renderButton(number, i, handleButtonClick))}
+            </div>
+            <Checkbox
+              text="Получаю пенсию на карту Россельхозбанка"
+              checked={isAnnuityChecked}
+              onChange={setIsAnnuityChecked}
+            />
+            <Checkbox
+              className="mt-3 mb-7"
+              text="Комплексная страховая защита"
+              checked={isInsuranceChecked}
+              onChange={setIsInsuranceChecked}
+            />
+          </div>
+          {renderProposal(monthlyPayment, rate)}
+        </div>
+        {renderTermsButton()}
+      </div>
+    </section>
+  );
+});

package/mobile/src/components/CreditCalculator/defaultTabs.ts

@@ -0,0 +1,22 @@
+import type { CreditCalculatorTab } from './CreditCalculatorContent';
+
+export const DEFAULT_TABS: CreditCalculatorTab[] = [
+  {
+    title: 'Кредит',
+    description: 'Ставка от 6% до 7 лет',
+    directoryName: 'credit-calculator-data',
+    icon: 'CardIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 4% до 7 лет',
+    directoryName: 'credit-calculator-data1',
+    icon: 'ChartSquareIcon',
+  },
+  {
+    title: 'Кредит',
+    description: 'Ставка от 3% до 6 лет',
+    directoryName: 'credit-calculator-data2',
+    icon: 'DiscountShapeIcon',
+  },
+];

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';
@@ -9,6 +8,7 @@ import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
+import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
@@ -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"
 }

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

@@ -3,17 +3,33 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', className = '', title, description, image }) => {
+  ({
+    bgColorHeadline = 'transparent',
+    className = '',
+    title,
+    description,
+    image,
+    align = 'left',
+  }) => {
     return (
-      <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && <Heading headingType="h2" className="text-primary-text" title={title} />}
+      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+        {title && (
+          <Heading
+            headingType="h2"
+            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            title={title}
+          />
+        )}
         {description && (
-          <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
+          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+            {description}
+          </p>
         )}
         {image?.src && (
           <div className="mt-5 mx-auto flex justify-center">

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,4 +1,4 @@
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -11,6 +11,5 @@ export type HeadlineContent = HeadingContent &
   DescriptionContent &
   ImageContent & {
     align?: AlignType;
-    // TODO: image for mobile
-    bgColor?: BgColorVersion;
+    bgColorHeadline?: BlockVersionWithTransparent;
   };