@redneckz/wildless-cms-uni-blocks 0.3.28 → 0.3.29

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

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { NavigatorTab } from './NavigatorTabsContent';
+
+export interface NavigatorTabItemProps extends NavigatorTab {
+  active?: boolean;
+  className?: string;
+  onClick?: (ev: MouseEvent) => void;
+}
+
+const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const LINK_CLASSES = 'flex-1 flex items-center justify-center';
+
+export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
+  ({ className = '', label, active, children, onClick, anchor }) => (
+    <a className={getLinkClasses(className, active)} href={`#${anchor}`} onClick={onClick}>
+      <span className={getTextClasses(active)}>{label || children}</span>
+    </a>
+  ),
+);
+
+const getLinkClasses = (className: string, active?: boolean) => {
+  const classes = active ? 'bg-primary-main' : 'bg-white';
+  return `${classes} ${LINK_CLASSES} ${className}`;
+};
+
+const getTextClasses = (active?: boolean) => {
+  const classes = active ? 'text-white' : 'text-secondary-text hover:text-primary-main';
+  return `${classes} ${TEXT_CLASSES}`;
+};

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

@@ -0,0 +1,7 @@
+{
+  "navigatorTabs": [
+    { "label": "Tab1", "anchor": "tab1" },
+    { "label": "Tab2", "anchor": "tab2" },
+    { "label": "Tab3", "anchor": "tab3" }
+  ]
+}

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

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { getHash } 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 const NavigatorTabs = JSX<TabsBlockProps>(
+  ({ className = '', navigatorTabs, context, anchor = null }) => {
+    const router = context.useRouter();
+    const hash = getHash(router.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}
+      </section>
+    );
+  },
+);
+
+const renderTab = (hash?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+  const anchorHash = `#${tab.anchor}`;
+  const active = hash ? anchorHash === hash : i === 0;
+  return (
+    <NavigatorTabItem
+      key={tab.anchor}
+      active={active}
+      onClick={() => router?.replace(anchorHash)}
+      {...tab}
+    />
+  );
+};

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

@@ -0,0 +1,20 @@
+/**
+ * @title Таб
+ */
+export interface NavigatorTab {
+  /** @title Название */
+  label?: string;
+  /** @title Якорь */
+  anchor?: string;
+}
+
+/**
+ * @title Блок табов
+ */
+export interface NavigatorTabsContent {
+  /**
+   * @title Список табов
+   * @minItems 3
+   */
+  navigatorTabs?: NavigatorTab[];
+}

package/mobile/src/components/PictureText/PictureText.tsx

@@ -9,19 +9,24 @@ import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
-export const PictureText = JSX<PictureTextProps>(({ className = '', title, image, benefits }) => {
-  return (
-    <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
-      <Heading headingType="h2" className="text-center" title={title} />
-      <div className={'flex justify-center mt-9'}>
-        {image?.src && <Img className="mr-6" image={image} />}
-        {benefits?.length ? (
-          <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
-        ) : null}
-      </div>
-    </section>
-  );
-});
+export const PictureText = JSX<PictureTextProps>(
+  ({ className = '', title, image, benefits, anchor = null }) => {
+    return (
+      <section
+        className={`relative font-sans text-primary-text bg-white p-14 ${className}`}
+        id={anchor}
+      >
+        <Heading headingType="h2" className="text-center" title={title} />
+        <div className={'flex justify-center mt-9'}>
+          {image?.src && <Img className="mr-6" image={image} />}
+          {benefits?.length ? (
+            <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
 
 function renderBenefit(benefit: Benefit, i: number) {
   return (

package/mobile/src/components/Placeholder/Placeholder.tsx

@@ -15,12 +15,13 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, context, title, description = 'Блок в разработке...' }) => {
+  ({ className, context, title, description = 'Блок в разработке...', anchor = null }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${getTileRightPadding(
           className,
         )} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

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

@@ -86,7 +86,9 @@ const labelStyleMap: Record<BlockVersion, string> = {
 };
 
 const renderLabel = (label: string, version: BlockVersion) => (
-  <div className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 w-fit ${labelStyleMap[version]}`}>
+  <div
+    className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid w-fit ${labelStyleMap[version]}`}
+  >
     {label}
   </div>
 );

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -8,7 +8,7 @@ import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
 export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
 
 export const ProductGalleryGreen = JSX<ProductGalleryProps>(
-  ({ className = '', context, slides = [] }) => {
+  ({ className = '', context, slides = [], anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -16,6 +16,7 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
     return (
       <section
         className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
+        id={anchor}
       >
         <div
           className="flex duration-1000 pb-14"
@@ -75,9 +76,13 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
   const isActiveBtn = i === activeSlideIndex;
   const btnClassName = isActiveBtn
     ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
-    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300';
-  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-white';
-  const btnDescClassName = isActiveBtn ? 'text-secondary-text' : 'text-white';
+    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:pt-[21px] hover:pb-7 ease-in duration-300';
+  const btnTitleClassName = isActiveBtn
+    ? 'text-[18px] text-primary-text pb-[10px]'
+    : 'text-m-base text-white pb-[3px]';
+  const btnDescClassName = isActiveBtn
+    ? 'text-[18px] text-secondary-text'
+    : 'text-m-base text-white';
 
   return (
     <button
@@ -90,8 +95,8 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
       `}
     >
       <div className="border-0 px-6">
-        <div className={`text-sm font-medium pb-[3px] ${btnTitleClassName}`}>{slide?.title}</div>
-        <div className={`text-xs text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
+        <div className={`font-medium ${btnTitleClassName}`}>{slide?.title}</div>
+        <div className={`text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
       </div>
     </button>
   );

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -29,12 +29,14 @@ export const ProductTile = JSX<ProductTileProps>(
     buttons,
     image,
     version = 'primary',
+    anchor = null,
   }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
           productTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -25,12 +25,14 @@ export const PromoTile = JSX<PromoTileProps>(
     description,
     buttons = [],
     version = 'primary',
+    anchor = null,
   }) => {
     return (
       <section
         className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
           promoTileStyleMap[version]
         } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+        id={anchor}
       >
         <BaseTile
           context={context}

package/mobile/src/components/Recommendation/Recommendation.tsx

@@ -12,7 +12,7 @@ const CARD_SHIFT = 525;
 export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
 
 export const Recommendation = JSX<RecommendationProps>(
-  ({ context, recommendations = [], className = '', title, version }) => {
+  ({ context, recommendations = [], className = '', title, version, anchor = null }) => {
     const [activeCardIndex, setActiveCardIndex] = context.useState(0);
 
     const blockClassName =
@@ -22,6 +22,7 @@ export const Recommendation = JSX<RecommendationProps>(
     return (
       <section
         className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
+        id={anchor}
       >
         {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
         <div

package/mobile/src/components/Tile/Tile.tsx

@@ -33,6 +33,7 @@ export const Tile = JSX<TileProps>((props) => {
     className = '',
     version = 'primary',
     role,
+    anchor = null,
   } = props;
 
   return (
@@ -41,6 +42,7 @@ export const Tile = JSX<TileProps>((props) => {
         tileStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       role={role}
+      id={anchor}
     >
       <BaseTile
         context={context}

package/mobile/src/services/sitemap/isTopItemActive.spec.ts

@@ -5,6 +5,7 @@ const router: Router = {
   href: 'https://foo.ru/natural/credits',
   pathname: '/natural',
   push: () => undefined,
+  replace: () => undefined,
   query: {},
 };
 

package/mobile/src/setup-fixture.ts

@@ -11,16 +11,28 @@ const TEST_ORIGIN = 'http://localhost:5001';
 
 const DaData = DaDataAPI('https://10.80.4.9');
 
-export const context: ContentPageContext = {
-  useState,
-  useRouter: () => ({
-    href: `${TEST_ORIGIN}/credits`,
+const Router = () => {
+  const [href, setHref] = useState<string>(globalThis.location.href);
+
+  return {
+    href: href,
     pathname: '/credits',
     query: {},
-    push: (url: string) => {
-      console.log(url);
+    push: (url?: string) => {
+      if (!url) return;
+      globalThis.history.pushState(null, '', url);
+      setHref(globalThis.location.href);
     },
-  }),
+    replace: (url?: string) => {
+      if (!url) return;
+      globalThis.history.replaceState(null, '', url);
+      setHref(globalThis.location.href);
+    },
+  };
+};
+export const context: ContentPageContext = {
+  useState,
+  useRouter: Router,
   useAsyncData: (key, fetcher) => {
     const [data, setData] = useState();
     useEffect(() => {
@@ -76,7 +88,10 @@ export const mobileContext: ContentPageContext = {
     href: `${TEST_ORIGIN}/mobile/credits`,
     pathname: '/mobile/credits',
     query: {},
-    push: (url: string) => {
+    push: (url?: string) => {
+      console.log(url);
+    },
+    replace: (url?: string) => {
       console.log(url);
     },
   }),

package/mobile/src/types.ts

@@ -10,6 +10,7 @@ export interface BaseBlockDef {
   content?: BlockContent;
   version?: BlockVersion;
   hidden?: boolean;
+  anchor?: string;
 }
 
 export interface BlockDef extends BaseBlockDef {
@@ -50,6 +51,7 @@ export interface ContentPageDef extends ContentPageMeta {
 export interface UniBlockProps {
   className?: string;
   context: ContentPageContext;
+  anchor?: string;
 }
 
 export interface DaDataResult {

package/mobile/src/utils/url.ts

@@ -13,3 +13,12 @@ export const getOrigin = (href?: string) => {
   const endOfOrigin = url.indexOf('/', endOfProto + protoSeparator.length);
   return endOfOrigin !== -1 ? url.substring(0, endOfOrigin) : url;
 };
+
+export const getHash = (href?: string) => {
+  if (!href || !isURL(href)) {
+    return undefined;
+  }
+
+  const hashIndex = href.indexOf('#');
+  return hashIndex !== -1 ? href.substring(hashIndex, href.length) : undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -1,5 +1,9 @@
 @import '../fonts/ubuntu/ubuntu.css';
 
+html {
+  scroll-behavior: smooth;
+}
+
 /* Private clients | Green */
 [data-theme='pc'] {
   --color-primary-main: 66, 171, 68;

package/src/components/Accordion/Accordion.tsx

@@ -13,9 +13,12 @@ const accordionStyleMap: Record<BlockVersion, string> = {
 };
 
 export const Accordion = JSX<AccordionProps>(
-  ({ title, accordionItems, context, className = '', version = 'primary' }) => {
+  ({ title, accordionItems, context, className = '', version = 'primary', anchor = null }) => {
     return (
-      <section className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}>
+      <section
+        className={`p-[50px] font-sans ${className} ${accordionStyleMap[version]}`}
+        id={anchor}
+      >
         {title ? <Heading headingType="h4" className="mb-2.5" title={title} /> : null}
         {accordionItems?.length ? (
           <ul className="list-none m-0 p-0">

package/src/components/BaseTile/BaseTile.tsx

@@ -5,9 +5,9 @@ import type { BaseTileCommonProps } from './BaseTileProps';
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
 export const BaseTile = JSX<BaseTileProps>(
-  ({ className = '', title, children, buttons, image }) => {
+  ({ className = '', title, children, buttons, image, anchor = null }) => {
     return (
-      <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+      <div className={`font-sans flex flex-col grow h-full items-start ${className}`} id={anchor}>
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -6,22 +6,25 @@ import type { Benefit, BenefitsBlockContent } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
-export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
-  return (
-    <section
-      className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
-        className || ''
-      }`}
-    >
-      {title ? (
-        <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
-      {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
-      ) : null}
-    </section>
-  );
-});
+export const BenefitsBlock = JSX<BenefitsBlockProps>(
+  ({ className, title, benefits, anchor = null }) => {
+    return (
+      <section
+        className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
+          className || ''
+        }`}
+        id={anchor}
+      >
+        {title ? (
+          <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
+        ) : null}
+        {benefits?.length ? (
+          <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
+        ) : null}
+      </section>
+    );
+  },
+);
 
 const renderStep = (benefit: Benefit, i: number) => {
   return (

package/src/components/BlockContent.ts

@@ -5,8 +5,10 @@ import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
+import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
+import type { NavigatorTabsContent } from './NavigatorTabs/NavigatorTabsContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -17,7 +19,6 @@ import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
-import type { LinkListContent } from './LinkList/LinkListContent';
 
 /**
  * @hidden
@@ -31,6 +32,7 @@ export type BlockContent =
   | HeaderContent
   | LinkDocsContent
   | MobileAppTileContent
+  | NavigatorTabsContent
   | PictureTextContent
   | PlaceholderContent
   | ProductBlockContent

package/src/components/Blocks.ts

@@ -11,6 +11,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
+import { NavigatorTabs } from './NavigatorTabs/NavigatorTabs';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -38,6 +39,7 @@ export const Blocks = {
   LinkDocs,
   MiniGallery,
   MobileAppTile,
+  NavigatorTabs,
   PictureText,
   ProductBlock,
   ProductGallery,

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { FIRST_CELL_CLASSES } from './constants';
 import { ComparisonTableBody } from './ComparisonTableBody';
-import type { UniBlockProps } from '../../types';
 import type { ComparisonTableContent } from './ComparisonTableContent';
+import { FIRST_CELL_CLASSES } from './constants';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -16,6 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
+    anchor = null,
   }) => {
     const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
@@ -25,6 +26,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
         className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
           className || ''
         }`}
+        id={anchor}
       >
         <Heading
           headingType="h2"

package/src/components/ContentPage/ContentPage.page.json

@@ -57,6 +57,34 @@
         ]
       }
     },
+    {
+      "type": "NavigatorTabs",
+      "style": ["col-span-12"],
+      "content": {
+        "navigatorTabs": [
+          {
+            "label": "Калькулятор",
+            "anchor": "calculator"
+          },
+          {
+            "label": "Преимущества",
+            "anchor": "advantages"
+          },
+          {
+            "label": "Как оформить",
+            "anchor": "howToApply"
+          },
+          {
+            "label": "Тарифы",
+            "anchor": "tariffs"
+          },
+          {
+            "label": "Документы",
+            "anchor": "documents"
+          }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -1400,6 +1428,7 @@
     {
       "type": "LinkDocs",
       "style": ["col-span-12"],
+      "anchor": "documents",
       "content": {
         "title": "Дополнительные документы",
         "subtitle": "Ответы на часто задаваемые вопросы",
@@ -1880,6 +1909,7 @@
     },
     {
       "type": "CreditCalculator",
+      "anchor": "calculator",
       "style": ["col-span-12"]
     },
     {

package/src/components/ContentPage/ContentPage.tsx

@@ -94,16 +94,16 @@ function renderBlock(
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {
-      blockClassName: style2className(block.style),
+      blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
-        const { version, content } = props.block;
+        const { version, content, anchor } = props.block;
         return (
           <BlockComponent
-            key={`${type}-${i}`}
             className={props.blockClassName}
             version={version}
             context={context}
+            anchor={anchor}
             {...content}
           />
         );

package/src/components/ContentPage/ContentPageContext.tsx

@@ -3,7 +3,8 @@ export interface Router {
   query: Record<string, string | string[] | undefined>;
   href?: string;
   basePath?: string;
-  push: (url: string) => void;
+  push: (url?: string) => void;
+  replace: (url?: string) => void;
 }
 
 export interface LikeService {

package/src/components/CreditCalculator/CreditCalculator.tsx

@@ -10,11 +10,11 @@ import { DEFAULT_TABS } from './defaultTabs';
 export interface CreditCalculatorProps extends CreditCalculatorContent, UniBlockProps {}
 
 export const CreditCalculator = JSX<CreditCalculatorProps>(
-  ({ className = '', context, tabs = DEFAULT_TABS }) => {
+  ({ className = '', context, tabs = DEFAULT_TABS, anchor = null }) => {
     const [currentTabIndex, setCurrentTabIndex] = context.useState(0);
 
     return (
-      <section className={`font-sans text-primary-text py-10 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text py-10 bg-white ${className}`} id={anchor}>
         <Heading
           className="w-full text-center mb-8"
           headingType={getTileHeadingType(className)}