@redneckz/wildless-cms-uni-blocks 0.3.34 → 0.3.37

package/mobile/src/components/ContentPage/ContentPage.tsx

@@ -1,5 +1,7 @@
 import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
+import { changeHashOnScroll } from '../../utils/changeHashOnScroll';
+import { isSSR } from '../../utils/isSSR';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
@@ -36,22 +38,34 @@ export interface RenderBlockFunc {
   context: ContentPageContext;
 }
 
+const isClient = !isSSR();
+
 const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }) =>
   render({ blockClassName, block });
 
 export const ContentPage = JSX<ContentPageProps>(
   ({
-    className,
+    className = '',
     context,
     blocksRegistry,
     data: { style: pageStyle, blocks, slots = {}, likeControl, colorPalette = 'pc' },
     blockDecorator = defaultBlockDecorator,
   }) => {
     const { header } = slots;
+    const router = context.useRouter();
+
+    // listener is for NavigatorTabs
+    isClient &&
+      globalThis.addEventListener('load', () => {
+        const sectionsWithAnchors = globalThis.document.querySelectorAll('section[id]');
+        globalThis.document.addEventListener('scroll', () =>
+          changeHashOnScroll(router, sectionsWithAnchors),
+        );
+      });
 
     return (
       <section
-        className={`relative ${style2className(pageStyle)} ${className || ''}`}
+        className={`relative ${style2className(pageStyle)} ${className}`}
         data-theme={colorPalette}
       >
         {header?.blocks?.length ? (
@@ -73,6 +87,7 @@ export const ContentPage = JSX<ContentPageProps>(
         {likeControl && (
           <div className="flex items-end absolute bottom-0 right-0 h-full pointer-events-none">
             <LikeControl
+              key="LikeControl"
               className="rounded-tl-lg sticky bottom-0 pointer-events-auto"
               context={context}
             />
@@ -100,6 +115,7 @@ function renderBlock(
         const { version, content, anchor } = props.block;
         return (
           <BlockComponent
+            key={`${type}-${i}`}
             className={props.blockClassName}
             version={version}
             context={context}

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

@@ -1,4 +1,14 @@
+import { tableFunc } from '../../utils/tableFunc';
+
+const func = tableFunc<number, string>([
+  [(_) => _ === 1, 'год'],
+  [(_) => _ <= 4, 'года'],
+  [() => true, 'лет'],
+]);
+
 export function renderButton(number: number, i: number, handleClick: (number: number) => void) {
+  const string = func(number);
+
   return (
     <button
       key={String(i)}
@@ -6,7 +16,7 @@ export function renderButton(number: number, i: number, handleClick: (number: nu
       onClick={() => handleClick(number)}
     >
       <span className="font-semibold text-sm">
-        {number} {number === 1 ? 'год' : number > 4 ? 'лет' : 'года'}
+        {number} {string}
       </span>
     </button>
   );

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

@@ -9,17 +9,17 @@ export interface ContactsProps extends UniBlockProps {
   hasButton?: boolean;
 }
 
-export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, context }) => {
+export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
 
   return (
-    <div className={`flex flex-col ${className || ''}`}>
+    <div className={className}>
       {items?.length ? items.map(renderContact) : null}
       {hasButton ? (
         <Button
           version="primary"
-          className="mt-0.5 mb-5"
+          className="mb-6 w-full"
           {...useLink(
             { router, handlerDecorator },
             {
@@ -38,9 +38,9 @@ const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;
 
   return (
-    <div className="mb-3.5" key={String(index)}>
+    <div className="mb-4" key={String(index)}>
       <div>{renderText(type, text)}</div>
-      <div className="font-sans text-sm text-secondary-text">{description}</div>
+      <div className="mt-1 font-sans font-light text-sm text-secondary-text">{description}</div>
     </div>
   );
 };
@@ -50,7 +50,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
     case 'tel':
       return (
         <a
-          className="font-sans font-medium text-xl text-primary-text no-underline"
+          className="font-sans text-xl text-primary-text no-underline"
           href={`tel:${formatTel(text)}`}
         >
           {text}
@@ -58,10 +58,7 @@ const renderText = (type: ContactInfo['type'], text = '') => {
       );
     case 'email':
       return (
-        <a
-          className="font-sans font-medium text-xl text-primary-text no-underline"
-          href={`mailto:${text}`}
-        >
+        <a className="font-sans text-xl text-primary-text no-underline" href={`mailto:${text}`}>
           {text}
         </a>
       );

package/mobile/src/components/Footer/FooterContent.ts

@@ -48,6 +48,8 @@ export interface FooterContent extends SitemapProps {
   contacts?: ContactInfo[];
   /** @title Социальные сети */
   socialMedia?: SocialMedia[];
+  /** @title Мобильные приложения */
+  mobileApps?: SocialMedia[];
   /** @title Заголовок для меню */
   horizontalNavigationTitle?: string; // TODO: для мобильной версии
   /** @title Подменю */

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

@@ -30,6 +30,20 @@ const ICONS_MAP: Array<{
     width: '12px',
     height: '20px',
   },
+  {
+    origins: ['apps.apple.com'],
+    icon: { icon: 'AppleIcon' },
+    label: 'App Store',
+    width: '20px',
+    height: '22px',
+  },
+  {
+    origins: ['play.google.com'],
+    icon: { icon: 'PlayMarketIcon' },
+    label: 'Google Play',
+    width: '21px',
+    height: '21px',
+  },
 ];
 
 interface MediaButtonProps {
@@ -44,7 +58,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[40px] h-[40px] box-border hover:text-primary-main"
+      className="flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main"
       href={href}
       aria-label={label}
       target="_blank"

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

@@ -10,7 +10,7 @@ export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
 }
 
-export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
+export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) => {
   const sitemap = useSitemap(context.useAsyncData);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
   const linkParams = {
@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className, items, context }) => {
   };
 
   return (
-    <div className={`flex items-start justify-start gap-11 xl:gap-5 ${className || ''}`}>
+    <div className={`flex items-start justify-between gap-11 xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );
@@ -29,9 +29,9 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   const { text, href, items, target } = c;
 
   return (
-    <div key={String(index)} className="flex flex-col gap-[14px]">
+    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
       <a
-        className="block font-sans font-medium text-base text-primary-text no-underline"
+        className="block font-sans leading-5 text-base text-primary-text no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans font-normal text-base text-secondary-text hover:text-primary-main no-underline"
+    className="block font-sans font-light text-base text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

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

@@ -7,9 +7,9 @@ import type { GalleryCard, GalleryItem } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
-    const titleStyleClasses = getTitleStyle(version, description, items);
+    const titleStyleClasses = getTitleStyle(version);
     return (
-      <div className="h-full flex flex-col justify-between">
+      <div className="h-full flex flex-col justify-between text-center">
         <div>
           {image?.src ? (
             <div className="flex justify-center">
@@ -18,7 +18,7 @@ export const GalleryCardInner = JSX<GalleryCard>(
           ) : null}
           {title ? renderCardTitle(title, titleStyleClasses) : null}
           {description ? (
-            <div className={`font-normal text-sm ${title ? 'mt-2' : ''}`}>{description}</div>
+            <div className={`font-light text-m-md-new ${title ? 'mt-2' : ''}`}>{description}</div>
           ) : null}
           {items?.length ? renderItems(items, version) : null}
         </div>
@@ -39,7 +39,7 @@ function renderButton(button) {
 }
 
 function renderCardTitle(title: string, className: string) {
-  return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
+  return <div className={`text-xl m-0 ${className}`}>{title}</div>;
 }
 
 function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
@@ -55,9 +55,8 @@ function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
   );
 }
 
-function getTitleStyle(version, description, items) {
-  return `font-medium text-xl m-0
+function getTitleStyle(version) {
+  return `text-xl m-0
         ${version !== 'secondary' ? 'text-primary-text' : ''}
-        ${!description && !items?.length ? 'text-center' : ''}
       `;
 }

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

@@ -25,7 +25,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
         <div className="flex flex-col items-center mb-8">
           {title ? <Heading headingType="h2" className="text-center" title={title} /> : null}
           {description ? (
-            <div className="font-normal text-base max-w-[600px] mt-2.5">{description}</div>
+            <div className="font-light text-md max-w-[600px] mt-2.5">{description}</div>
           ) : null}
         </div>
         <div
@@ -45,7 +45,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
 function renderCard({ card, version }: GalleryCardData, i: number) {
   return (
     <section
-      className={`box-border border-solid border rounded-md border-main-divider p-7 mx-2 flex flex-col justify-between
+      className={`box-border border-solid border border-main-stroke p-6 mx-2 flex flex-col justify-between
         items-stretch ${cardStyleMap[version]} ${
         cardVersionMap[card.version ?? 'primary']
       } w-full col-span-4`}

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

@@ -27,7 +27,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
 
     return (
       <section
-        className={`relative font-sans text-primary-text bg-white p-[50px] overflow-hidden ${className}`}
+        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`}
         id={anchor}
       >
         <GalleryContainer

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

@@ -17,11 +17,11 @@ const COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-primary-text hover:text-primary-main',
   transparent: 'text-white',
 };
-const DOP_LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
+const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-secondary-light hover:text-secondary-hover',
   transparent: 'text-white',
 };
-const DOP_LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
+const LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
   'bg-white': 'GridIcon',
   transparent: 'GridIconWhite',
 };
@@ -54,14 +54,11 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
         >
           <Img image="LoupeIcon" className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
-        <HeaderSecondaryMenuButton className={`mr-5 ${COLORS_MAP[bgColor]}`} ariaLabel="Профиль">
-          <Img image="ProfileIcon" className="h-full" asSVG color="none" />
-        </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${DOP_LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Img image={DOP_LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
+          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG color="none" />
         </HeaderSecondaryMenuButton>
       </div>
     );

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

@@ -0,0 +1,103 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LinkProps } from '../../model/LinkProps';
+import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
+import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { headerSubMenuObserver } from './HeaderSubMenuObserver';
+
+export interface HeaderSubMenuProps {
+  context: ContentPageContext;
+  subItems?: LinkProps[];
+  bgColor?: BgColorVersion;
+}
+
+export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgColor }) => {
+  const [subMenuIsShow, setHiddenMenuIsShow] = context.useState(false);
+  const router = context.useRouter();
+  const { handlerDecorator } = context;
+
+  setTimeout(() => {
+    const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
+    headerSubMenu.forEach((_) => {
+      headerSubMenuObserver?.observe(_);
+    });
+  }, 200);
+
+  const activeSubItem = findActiveSubItem(router)(subItems);
+  const toggleSubMenu = () => setHiddenMenuIsShow(!subMenuIsShow);
+
+  const subMenu = subItems?.map((_) => (
+    <HeaderItem
+      key={_.href}
+      className="mr-8"
+      active={_ === activeSubItem}
+      {...useLink({ router, handlerDecorator }, _)}
+      dataItemName="header-submenu"
+      bgColor={bgColor}
+    />
+  ));
+
+  return (
+    <nav className="relative mt-5">
+      <div className="overflow-hidden whitespace-nowrap mr-52">{subMenu}</div>
+      {renderDotsSubMenu({
+        subMenuIsShow,
+        toggleSubMenu,
+        subItems,
+        router,
+        handlerDecorator,
+      })}
+    </nav>
+  );
+});
+
+// TODO: add types
+const renderDotsSubMenu = ({
+  subMenuIsShow,
+  toggleSubMenu,
+  subItems,
+  router,
+  handlerDecorator,
+}) => (
+  <div
+    className={`absolute w-52 -top-4 right-0 pt-4 z-40 ${
+      subMenuIsShow ? 'bg-white rounded-md shadow-blue-gray/24' : ''
+    }`}
+    data-header-submenu-visible="toggled"
+  >
+    <button
+      className="flex justify-between items-center cursor-pointer h-6 ml-6"
+      onClick={toggleSubMenu}
+      aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
+    >
+      {Array(3)
+        .fill(0)
+        .map((_, i) => renderDot(i))}
+    </button>
+    <div
+      className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
+      aria-hidden={!subMenuIsShow}
+    >
+      {renderDotsSubMenuItems(subItems, router, handlerDecorator)}
+    </div>
+  </div>
+);
+
+// TODO: add types
+const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
+  subItems?.map((_) => (
+    <a
+      key={_.href}
+      {...useLink({ router, handlerDecorator }, _)}
+      data-item-name="dots-header-submenu"
+      className="text-base font-light pb-4 hover:text-primary-main"
+    >
+      {_.text}
+    </a>
+  ));
+
+const renderDot = (i: number) => (
+  <div key={String(i)} className="w-[3px] h-[3px] rounded bg-black mr-1" />
+);

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

@@ -0,0 +1,46 @@
+import { isSSR } from '../../utils/isSSR';
+
+const isClient = !isSSR();
+
+export const headerSubMenuObserver = isClient
+  ? new IntersectionObserver(
+      (entries) => {
+        const headerSubMenuButtonElement = window.document.querySelector(
+          '[data-header-submenu-visible=toggled]',
+        );
+        const headerSubMenuItems = Array.from(
+          window.document.querySelectorAll('[data-item-name=header-submenu]'),
+        );
+        const dotsHeaderSubMenuItems = Array.from(
+          window.document.querySelectorAll('[data-item-name=dots-header-submenu]'),
+        );
+        const visibilityList = {};
+        entries.forEach((j) => {
+          visibilityList[String(j.target.toString())] = j.isIntersecting;
+        });
+        const isHeaderSubMenuButtonShow = toggleVisibilityInItems(
+          visibilityList,
+          dotsHeaderSubMenuItems,
+          'hidden',
+        );
+        toggleVisibilityInItems(visibilityList, headerSubMenuItems, 'invisible');
+        if (headerSubMenuButtonElement) {
+          isHeaderSubMenuButtonShow
+            ? headerSubMenuButtonElement.classList.remove('hidden')
+            : headerSubMenuButtonElement.classList.add('hidden');
+        }
+      },
+      { root: window.document, threshold: 1.0 },
+    )
+  : undefined;
+
+// TODO: add types
+const toggleVisibilityInItems = (visibilityList, items, className) => {
+  const isReversed = className !== 'hidden';
+  return items.some((item) => {
+    const key = item.toString();
+    const option = isReversed ? !visibilityList[key] : visibilityList[key];
+    key in visibilityList ? item.classList.toggle(className, option) : null;
+    return isReversed ? item.classList.contains('hidden') : !item.classList.contains('hidden');
+  });
+};

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkDocsListItem } from './LinkDocsListItem';
-import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
 import type { Picture } from '../../model/Picture';
+import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+import { LinkDocsListItem } from './LinkDocsListItem';
 
 export interface LinkDocsListProps {
   className?: string;
@@ -21,7 +21,7 @@ export const LinkDocsList = JSX<LinkDocsListProps>(
             role="listitem"
           >
             <LinkDocsListItem
-              className="group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              className="group flex align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
               doc={doc}
               icon={icon}
             />

package/mobile/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -8,22 +8,24 @@ export interface NavigatorTabItemProps extends NavigatorTab {
 }
 
 const TEXT_CLASSES = 'font-sans font-normal text-sm';
-const LINK_CLASSES = 'flex-1 flex items-center justify-center';
+const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', label, active, children, onClick, anchor }) => (
-    <a className={getLinkClasses(className, active)} href={`#${anchor}`} onClick={onClick}>
+  ({ className = '', label, active, children, onClick, href, target = '_self' }) => (
+    <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
       <span className={getTextClasses(active)}>{label || children}</span>
     </a>
   ),
 );
 
 const getLinkClasses = (className: string, active?: boolean) => {
-  const classes = active ? 'bg-primary-main' : 'bg-white';
+  const classes = active ? 'bg-primary-main' : 'group bg-white';
+
   return `${classes} ${LINK_CLASSES} ${className}`;
 };
 
 const getTextClasses = (active?: boolean) => {
-  const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+  const classes = active ? 'text-white' : 'text-secondary-text group-hover:text-primary-main ';
+
   return `${classes} ${TEXT_CLASSES}`;
 };

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

@@ -1,7 +1,7 @@
 {
   "navigatorTabs": [
-    { "label": "Tab1", "anchor": "tab1" },
-    { "label": "Tab2", "anchor": "tab2" },
-    { "label": "Tab3", "anchor": "tab3" }
+    { "label": "Tab1", "href": "#tab1" },
+    { "label": "Tab2", "href": "#tab2" },
+    { "label": "Link", "href": "https://rshb.ru", "target": "_blank" }
   ]
 }

package/mobile/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,36 +1,44 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { getHash } from '../../utils/url';
+import { getHash, isURL } from '../../utils/url';
 import type { Router } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
 import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
 
-export interface TabsBlockProps extends NavigatorTabsContent, UniBlockProps {}
+export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
   ({ className = '', navigatorTabs, context, anchor = null }) => {
     const router = context.useRouter();
-    const hash = getHash(router.href);
+    const href = globalThis.location.href;
+
     return (
       <section
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
         id={anchor}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(hash, router)) : null}
+        {navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null}
       </section>
     );
   },
 );
 
-const renderTab = (hash?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
-  const anchorHash = `#${tab.anchor}`;
-  const active = hash ? anchorHash === hash : i === 0;
+const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+  const hash = getHash(href);
+  const active = hash ? tab.href === hash : i === 0;
+
   return (
     <NavigatorTabItem
-      key={tab.anchor}
+      key={tab.href}
       active={active}
-      onClick={() => router?.replace(anchorHash)}
+      onClick={() => handleRoute(router, tab.href)}
       {...tab}
     />
   );
 };
+
+const handleRoute = (router?: Router, href?: string) => {
+  if (isURL(href)) return; // if href if full URL - move to HTML href action, do not touch router
+
+  router?.replace(href || '');
+};

package/mobile/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -5,7 +5,9 @@ export interface NavigatorTab {
   /** @title Название */
   label?: string;
   /** @title Якорь */
-  anchor?: string;
+  href?: string;
+  /** @title Таргет (target) */
+  target?: string;
 }
 
 /**

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonContent, ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -32,6 +32,8 @@ export type ProductBlockInnerContent = HeadingContent &
      * @hidden
      */
     textBlockClassName?: string;
+    /** @title Текст кнопки возврата */
+    backwardButton?: ButtonProps;
   };
 
 /**

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -0,0 +1,35 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+const backwardBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-primary-main',
+  secondary: 'bg-white',
+};
+
+const backwardIconStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-white',
+  secondary: 'text-primary-text',
+};
+
+export function renderBackwardButton(text: string, version: BlockVersion, className: string) {
+  return (
+    <div className={`flex items-center ${className}`}>
+      <Button
+        rounded
+        className={`w-12 h-12 min-h-12 max-h-12 flex items-center justify-center mr-3 ${backwardBgStyleMap[version]}`}
+        ariaLabel={text}
+      >
+        <Img
+          className={`w-4 h-4 min-w-4 min-h-4 rounded-full box-border ${backwardIconStyleMap[version]}`}
+          image={{ icon: 'ArrowLeftIcon' }}
+          color="none"
+          width="24"
+          height="24"
+          asSVG
+        />
+      </Button>
+      {text ? <span className="text-m-md">{text}</span> : null}
+    </div>
+  );
+}