@redneckz/wildless-cms-uni-blocks 0.6.28 → 0.6.30

package/mobile/lib/ui-kit/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}

package/mobile/src/components/Carousel/Carousel.example.json

@@ -0,0 +1,6 @@
+{
+  "cardWidth": 1200,
+  "isBlur": false,
+  "cardFullViewCount": 1,
+  "isCycle": false
+}

package/mobile/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCarouselControl } from '../../hooks/useCarousel';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { CarouselContainer } from './CarouselContainer';
+import type { CarouselContent } from './CarouselContent';
+
+export interface CarouselProps extends CarouselContent, UniBlockProps {}
+
+export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
+  ({
+    cardFullViewCount = 1,
+    children,
+    cardWidth = 1007,
+    className = '',
+    isBlur = true,
+    isCyclic = false,
+    block,
+    ...rest
+  }) => {
+    const blurClasses = isBlur ? 'absolute top-0 bottom-0 w-[84px]' : '';
+    const { blocks: childBlocks } = block || {};
+
+    const childBlocksLength = childBlocks !== undefined ? childBlocks.length : 0;
+
+    const isScrollAvailable = childBlocksLength > cardFullViewCount;
+
+    const [activeIndex, controls] = useCarouselControl({
+      itemsCount: childBlocksLength,
+      visibleItemCount: cardFullViewCount,
+      isCyclic,
+    });
+
+    const { inc, dec, canDec, canInc } = controls;
+
+    return (
+      <BlockWrapper
+        className={`box-border h-full relative font-sans flex flex-col justify-center overflow-hidden ${className}`}
+        {...rest}
+      >
+        <CarouselContainer
+          activeItem={activeIndex}
+          cardFullViewCount={cardFullViewCount}
+          cardWidth={cardWidth}
+        >
+          {children}
+        </CarouselContainer>
+        {isScrollAvailable ? (
+          <div>
+            {renderArrows({
+              handler: [dec, inc],
+              isShown: [canDec, canInc],
+              btnClass: ['left-8', 'right-8'],
+              className: 'top-1/2 z-10',
+            })}
+          </div>
+        ) : null}
+        {isScrollAvailable ? (
+          <div>
+            <div className={`${blurClasses} left-0 bg-opacity-from-white`} />
+            <div className={`${blurClasses} right-0 bg-opacity-to-white`} />
+          </div>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+Carousel.childrenTypes = ['CarouselCard', 'CarouselTariffsCard'];

package/mobile/src/components/Carousel/CarouselContainer.tsx

@@ -0,0 +1,26 @@
+import { JSX } from '@redneckz/uni-jsx';
+
+export interface CarouselContainerProps {
+  activeItem: number;
+  cardFullViewCount: number;
+  cardWidth: number;
+}
+
+export const CarouselContainer = JSX<CarouselContainerProps>(
+  ({ children, activeItem, cardFullViewCount, cardWidth }) => {
+    const cardFullViewStyles =
+      cardFullViewCount === 1
+        ? `translateX(-${activeItem}00%)`
+        : `translateX(-${activeItem * cardWidth}px)`;
+
+    return (
+      <div
+        className="w-auto flex flex-1 duration-1000"
+        style={{ transform: `${cardFullViewStyles}` }}
+        role="list"
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -0,0 +1,10 @@
+/**
+ * @title Карусель
+ */
+export interface CarouselContent {
+  /** @title Блоки */
+  cardFullViewCount?: number;
+  cardWidth?: number;
+  isBlur?: boolean;
+  isCyclic?: boolean;
+}

package/mobile/src/components/Carousel/CarouselNavButtons.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import type { VNode } from '../../model/VNode';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+
+interface CarouselNavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (index: number) => void;
+  cardFullViewCount: number;
+  cards?: VNode[];
+  isCycle?: boolean;
+}
+
+export const CarouselNavButtons = JSX<CarouselNavButtonsProps>(
+  ({ cardsCount, activeCardIndex, setActiveCardIndex, cardFullViewCount, isCycle }) => {
+    const isGalleryScrollAvailable = cardsCount > cardFullViewCount;
+
+    const showNextButton =
+      (isCycle && isGalleryScrollAvailable) ||
+      (isGalleryScrollAvailable && cardsCount - activeCardIndex > cardFullViewCount);
+
+    const showPrevButton =
+      (isCycle && isGalleryScrollAvailable) || (isGalleryScrollAvailable && activeCardIndex > 0);
+
+    const handleNextClick = useCallback(() => {
+      if (isCycle) {
+        const nextIndex = activeCardIndex + 1;
+        setActiveCardIndex(cardsCount === nextIndex ? 0 : nextIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex + 1);
+      }
+    }, []);
+
+    const handlePrevClick = useCallback(() => {
+      if (isCycle && cardsCount > 0) {
+        const prevIndex = activeCardIndex - 1;
+        setActiveCardIndex(prevIndex < 0 ? cardsCount - 1 : prevIndex);
+      } else {
+        setActiveCardIndex(activeCardIndex - 1);
+      }
+    }, []);
+
+    return renderArrows({
+      handler: [handlePrevClick, handleNextClick],
+      isShown: [showPrevButton, showNextButton],
+      btnClass: ['left-8', 'right-8'],
+      className: 'top-1/2 z-10',
+    });
+  },
+);

package/mobile/src/components/CarouselCard/CarouselCard.example.json

@@ -0,0 +1,11 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "button": {
+    "href": "",
+    "text": "Подробнее",
+    "target": "_self",
+    "version": "primary"
+  },
+  "version": "normal"
+}

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -0,0 +1,49 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Headline } from '../Headline/Headline';
+import type { CarouselCardContent } from './CarouselCardContent';
+
+export interface CarouselCardProps extends CarouselCardContent, UniBlockProps {
+  version?: CarouselCardVersion;
+}
+
+const BLOCK_CLASSES = 'absolute border border-solid border-main-stroke w-[100%] h-[100%]';
+
+const CARD_STYLE_MAP: Record<CarouselCardVersion, string> = {
+  normal: 'min-w-[100%] justify-center items-center my-7 col-span-12',
+  mini: 'justify-center items-center mx-4 my-9 col-span-4',
+};
+
+const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
+  normal: 'w-[1007px]',
+  mini: 'w-[350px]',
+};
+
+export const CarouselCard = JSX<CarouselCardProps>(
+  ({ button, className = '', description, title, version = 'normal' }) => {
+    return (
+      <section className={`flex ${CARD_STYLE_MAP[version]}`}>
+        <div className={`relative ${CARD_WIDTH_MAP[version]}`}>
+          <div
+            className={`relative bg-white py-6 px-10 z-10
+              border border-solid border-green-light ${className}`}
+          >
+            <Headline
+              className="!p-0"
+              title={title}
+              description={description}
+              headlineVersion="M"
+              align="center"
+            />
+            {button ? renderButton({ button, buttonClassName: 'mt-6 w-[158px]' }) : null}
+          </div>
+          <div className={`top-9 right-12 bg-green-dark ${BLOCK_CLASSES}`} />
+          <div className={`top-6 right-8 bg-green ${BLOCK_CLASSES}`} />
+          <div className={`top-3 right-4 bg-green-light ${BLOCK_CLASSES}`} />
+        </div>
+      </section>
+    );
+  },
+);

package/mobile/src/components/CarouselCard/CarouselCard.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CarouselCard/CarouselCardContent.ts

@@ -0,0 +1,18 @@
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Карточка какусели
+ */
+export interface CarouselCardContent extends HeadlineCommonProps {
+  /**
+   * @title Кнопка
+   * @default {
+   *  "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+   *  "iconRight" : { "format": "webp", "size": { "width": 24, "height": 24 } }
+   * }
+   */
+  button?: ButtonWithIconProps;
+  version?: CarouselCardVersion;
+}

package/mobile/src/components/CarouselCard/constants.ts

@@ -0,0 +1,11 @@
+import type { CarouselCardVersion } from '../../model/CarouselCardVersion';
+
+export const cardStyleMap: Record<CarouselCardVersion, string> = {
+  normal: 'min-w-[100%] justify-center items-center m-7 col-span-12',
+  mini: 'min-w-auto justify-center items-center m-9 col-span-4',
+};
+
+export const cardWidthMap: Record<CarouselCardVersion, string> = {
+  normal: 'w-[1007px]',
+  mini: 'w-[350px]',
+};

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.example.json

@@ -0,0 +1,24 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "",
+    "text": "Кнопка",
+    "target": "_self",
+    "version": "primary"
+  },
+  "isHighlighting": false,
+  "rows": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -0,0 +1,93 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { VNode } from '../../model/VNode';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
+import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img/Img';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
+
+export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
+    const hitStyle = getHitStyle(Boolean(isHighlighting));
+    const rowsNode = rows.map(renderCardInfo);
+    const VISIBLE_ROWS_COUNT = 1;
+    const [visibleRows, hiddenRows] = [
+      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
+      rowsNode.slice(VISIBLE_ROWS_COUNT),
+    ];
+
+    return (
+      <BlockWrapper
+        className={`font-sans bg-white p-[50px] p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        {...rest}
+      >
+        {isHighlighting ? renderHitIcon() : null}
+        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
+        {title ? (
+          <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
+        ) : null}
+        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {rows?.length ? (
+          <Foldable
+            renderFoldableSection={({ isUnfolded }) => (
+              <div>
+                {visibleRows}
+                <FoldableSection isUnfolded={isUnfolded}>{hiddenRows}</FoldableSection>
+              </div>
+            )}
+            renderFoldButton={rows.length > 1 ? renderFoldButton : null}
+          />
+        ) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const getHitStyle = (isHighlighting: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+
+const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
+  <button
+    className="w-full cursor-pointer text-primary-main pt-5 flex justify-between items-center"
+    onClick={onToggle}
+  >
+    <div>{isUnfolded ? 'Скрыть' : 'Подробнее о тарифе'}</div>
+    <Icon
+      className="text-primary-text"
+      name={isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon'}
+      width="16"
+      height="16"
+      asSVG
+    />
+  </button>
+);
+
+const renderCardInfo = (cell: HeadlineCommonProps): VNode => (
+  <div className="py-5 border-b border-main-divider flex flex-col gap-1">
+    {cell?.title ? (
+      <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
+    ) : null}
+    {cell?.description ? <div className="text-primary-text text-h6">{cell.description}</div> : null}
+  </div>
+);
+
+const renderHitIcon = (): VNode => {
+  const POSITION_STYLE = 'absolute -top-7 -right-4';
+
+  return (
+    <div
+      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
+    >
+      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+      <div className="text-center">Хит</div>
+    </div>
+  );
+};

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCard.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/CarouselTariffsCard/CarouselTariffsCardContent.ts

@@ -0,0 +1,16 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Карточка тарифной карусели
+ */
+export type CarouselTariffsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Выделить карточку */
+  isHighlighting?: boolean;
+  /** @title Кнопка */
+  button?: ButtonProps;
+  /** @title Ячейка */
+  rows?: HeadlineCommonProps[];
+};

package/mobile/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
+import { useCarouselControl } from '../../hooks/useCarousel';
 import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
 import type { Column, RowHeader } from './ComparisonTableContent';
 import { ComparisonTableRows } from './ComparisonTableRows';
@@ -24,26 +24,26 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
       }))
       .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
 
-    const tableArrowScrollProps = useTableArrowScrollControl({
-      columnsLength: colData.length,
-      colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+    const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
+
+    const [activeIndex, controls] = useCarouselControl({
+      itemsCount: colData.length,
+      visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });
-    const { activeCardIndex, isScrollAvailable } = tableArrowScrollProps;
 
     return (
       <div>
         <div role="table">
           {colHeaders?.length ? (
-            <ComparisonTableColumnHeaders
-              colHeaders={colHeaders}
-              activeCardIndex={activeCardIndex}
-            />
+            <ComparisonTableColumnHeaders colHeaders={colHeaders} activeCardIndex={activeIndex} />
           ) : null}
           {rowData?.length ? (
             <ComparisonTableRows
               rowData={rowData}
               isColoredFirstColumn={isColoredFirstColumn}
-              {...tableArrowScrollProps}
+              activeCardIndex={activeIndex}
+              controls={controls}
+              isScrollAvailable={isScrollAvailable}
             />
           ) : null}
         </div>

package/mobile/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
-import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
-import type { TableArrowScrollControlProps } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
 import type { CellData } from './ComparisonTableContent';
 import { TableRow } from './TableRow';
+import type { Controls } from '../../hooks/useCarousel';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
-type ComparisonTableRowsProps = TableArrowScrollControlProps & {
+type ComparisonTableRowsProps = {
   rowData: { header: TitleProps; data: CellData[][] }[];
   activeCardIndex: number;
   isColoredFirstColumn: boolean;
+  controls: Controls;
+  isScrollAvailable: boolean;
 };
 
 export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
-  ({ rowData, isColoredFirstColumn, ...tableArrowScrollProps }) => {
+  ({ rowData, isColoredFirstColumn, activeCardIndex, controls, isScrollAvailable }) => {
+    const { inc, dec, canDec, canInc } = controls;
+
     return (
       <div className="relative">
         {rowData.map((row, i, { length }) => (
@@ -21,11 +25,21 @@ export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
             row={row}
             isFirstRow={i === 0}
             isLastRow={i + 1 === length}
-            activeCardIndex={tableArrowScrollProps.activeCardIndex}
+            activeCardIndex={activeCardIndex}
             isColoredFirstColumn={isColoredFirstColumn}
           />
         ))}
-        <TableArrowScrollControl {...tableArrowScrollProps} />
+        {isScrollAvailable ? (
+          <div>
+            {renderArrows({
+              handler: [inc, dec],
+              isShown: [canDec, canInc],
+              btnClass: ['top-[108px]', 'top-11'],
+              className: 'right-7',
+              isDisabled: true,
+            })}
+          </div>
+        ) : null}
       </div>
     );
   },

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

@@ -18,59 +18,57 @@ import { HeaderTop } from './HeaderTop';
 
 export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
-export const Header = JSX<HeaderProps>(
-  ({ className = '', defaultLocation, bgColor = 'bg-white', ...rest }) => {
-    const router = useRouter();
+export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white', ...rest }) => {
+  const router = useRouter();
 
-    const { page } = rest;
-    const fallback: Fallback | undefined = page?.fallback;
-    const { topItems, dispositions } = useSWRResource<SitemapDataProps>(
-      projectSettings.SITEMAP || 'sitemap',
-      fallback,
-    );
+  const { page } = rest;
+  const fallback: Fallback | undefined = page?.fallback;
+  const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
+    projectSettings.SITEMAP || 'sitemap',
+    fallback,
+  );
 
-    const activeTopItem = topItems?.find(isTopItemActive(router));
-    const subItems = activeTopItem?.items;
-    const activeSubItem = findActiveSubItem(router)(subItems);
+  const activeTopItem = topItems?.find(isTopItemActive(router));
+  const subItems = activeTopItem?.items;
+  const activeSubItem = findActiveSubItem(router)(subItems);
 
-    const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+  const [burgerMenuShow, setBurgerMenuShow] = useState(false);
 
-    const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
-    return (
-      <header className={`${bgColor} ${className}`}>
-        <div className="container px-4 py-0 box-border">
-          <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
-          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
-            <div className="flex no-scrollbar horizontal-list h-full items-center">
-              {subItems?.map((_, i) => (
-                <HeaderItem
-                  key={String(i)}
-                  className="mr-8 whitespace-nowrap text-s"
-                  active={_ === activeSubItem}
-                  bgColor={bgColor}
-                  {..._}
-                />
-              ))}
-            </div>
-          </nav>
-        </div>
-        {burgerMenuShow ? (
-          <HeaderBurger
-            onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
-            defaultLocation={defaultLocation}
-          >
-            <AccordionItemsList>
-              {topItems?.map((item, i) => (
-                <AccordionItem key={String(i)} label={item.text} {...rest}>
-                  <LinkList documents={item.items} {...rest} />
-                </AccordionItem>
-              ))}
-            </AccordionItemsList>
-          </HeaderBurger>
-        ) : null}
-      </header>
-    );
-  },
-);
+  return (
+    <header className={`${bgColor} ${className}`}>
+      <div className="container px-4 py-0 box-border">
+        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+        <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
+          <div className="flex no-scrollbar horizontal-list h-full items-center">
+            {subItems?.map((_, i) => (
+              <HeaderItem
+                key={String(i)}
+                className="mr-8 whitespace-nowrap text-s"
+                active={_ === activeSubItem}
+                bgColor={bgColor}
+                {..._}
+              />
+            ))}
+          </div>
+        </nav>
+      </div>
+      {burgerMenuShow ? (
+        <HeaderBurger
+          onClick={toggleBurgerMenu}
+          burgerSubMenu={dispositions}
+          defaultLocation={defaultLocation}
+        >
+          <AccordionItemsList>
+            {topItems?.map((item, i) => (
+              <AccordionItem key={String(i)} label={item.text} {...rest}>
+                <LinkList documents={item.items} {...rest} />
+              </AccordionItem>
+            ))}
+          </AccordionItemsList>
+        </HeaderBurger>
+      ) : null}
+    </header>
+  );
+});

package/mobile/src/components/Header/HeaderContent.ts

@@ -31,12 +31,6 @@ export interface Logo {
  * @required ["defaultLocation", "topItems"]
  */
 export interface HeaderContent {
-  logo?: Logo;
-  /**
-   * @title Город по-умолчанию
-   * @default Москва
-   */
-  defaultLocation?: string;
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

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

@@ -29,7 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, defaultLocation = '', bgColor = 'bg-white' }) => {
+  ({ className, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
     const [city, getCity] = useGeolocation(defaultLocation);
 
     return (