@redneckz/wildless-cms-uni-blocks 0.3.35 → 0.3.36

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

@@ -1,5 +1,6 @@
 import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
+import { changeHashOnScroll } from '../../utils/changeHashOnScroll';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
@@ -41,17 +42,26 @@ const defaultBlockDecorator: BlockDecorator = ({ blockClassName, block, render }
 
 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
+    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 +83,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 +111,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/FooterContent.ts

@@ -1,4 +1,3 @@
-import type { IconName } from '../../icons/IconName';
 import type { LinkProps } from '../../model/LinkProps';
 import type { SitemapProps } from '../../services/sitemap/SitemapProps';
 import type { Picture } from '../../model/Picture';

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/HeaderSubMenu.tsx

@@ -70,10 +70,16 @@ const renderDotsSubMenu = ({
     <button
       className="flex justify-between items-center cursor-pointer h-6 ml-6"
       onClick={toggleSubMenu}
+      aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
     >
-      {Array(3).fill(<div className="w-[3px] h-[3px] rounded bg-black mr-1" />)}
+      {Array(3)
+        .fill(0)
+        .map((_, i) => renderDot(i))}
     </button>
-    <div className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}>
+    <div
+      className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
+      aria-hidden={!subMenuIsShow}
+    >
       {renderDotsSubMenuItems(subItems, router, handlerDecorator)}
     </div>
   </div>
@@ -91,3 +97,7 @@ const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
       {_.text}
     </a>
   ));
+
+const renderDot = (i: number) => (
+  <div key={String(i)} className="w-[3px] h-[3px] rounded bg-black mr-1" />
+);

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/renderBackwardButton.tsx

@@ -18,6 +18,7 @@ export function renderBackwardButton(text: string, version: BlockVersion, classN
       <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]}`}

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

@@ -6,6 +6,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { SocialMedia } from '../Footer/SocialMedia';
 import type { UniBlockProps } from '../../types';
 import type { RecommendationCardTypes } from './RecommendationContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
 
@@ -21,7 +22,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           className="flex justify-between"
           title={
             title ? (
-              <h4 className={`font-sans text-title-xs font-normal m-0 mb-3.5`}>{title}</h4>
+              <Heading headingType="h4" as="h3" className="font-normal mb-3.5" title={title} />
             ) : null
           }
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}

package/mobile/src/components/Recommendation/RecommendationContent.ts

@@ -17,5 +17,9 @@ export interface RecommendationContent extends HeadingContent {
   /** @title Карточки */
   recommendations?: RecommendationCardTypes[];
   version?: BlockVersion;
+  /**
+   * @title Ссылка
+   * @minItems 3
+   */
   socialMedia?: LinkProps[];
 }

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,6 +1,7 @@
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Шаг
@@ -11,6 +12,7 @@ export interface Step {
   /** @title Описание */
   description?: string;
   icon?: Picture;
+  button?: ButtonProps;
 }
 
 /**
@@ -29,6 +31,7 @@ export interface StepsBlockContent {
    * @maxItems 4
    */
   steps?: Step[];
+  button?: ButtonProps;
   /** @title Размер шагов (моб.) */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion; // TODO: mobile content

package/mobile/src/components/TariffsTable/TariffsTableCell.tsx

@@ -4,6 +4,7 @@ import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];
@@ -53,6 +54,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
       <Button
         className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
         key={String(idx)}
+        ariaLabel={getButtonAriaLabel(icon)}
         rounded={rounded}
         appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}

package/mobile/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -9,6 +9,7 @@ import type {
   TariffsTableList,
   TariffsTableTileCellProps,
 } from './TariffsTableContent';
+import { getButtonAriaLabel } from './utils/getButtonAriaLabel';
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
   return (
@@ -52,6 +53,7 @@ const renderButtons = (buttons: ButtonWithIconProps[]) => (
       <Button
         className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
         key={String(idx)}
+        ariaLabel={getButtonAriaLabel(icon)}
         rounded={rounded}
         appendLeft={icon ? <Img image={icon} width="24px" height="24px" asSVG /> : null}
         {...buttonProps}

package/mobile/src/components/TariffsTable/utils/getButtonAriaLabel.ts

@@ -0,0 +1,5 @@
+import type { Picture } from '../../../model/Picture';
+import { IconTitleMap } from '../../../icons/IconName';
+
+export const getButtonAriaLabel = (icon: Picture | undefined) =>
+  icon?.alt || icon?.title || IconTitleMap[icon?.icon ? icon.icon : ''];

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

@@ -50,6 +50,7 @@ export const Tile = JSX<TileProps>((props) => {
           title && (
             <Heading
               headingType={getTileHeadingType(className)}
+              as="h3"
               title={title}
               className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}
               ${version === 'primary' ? 'text-primary-text' : ''}`}

package/mobile/src/hooks/useLink.ts

@@ -16,7 +16,7 @@ export function useLink(
   return {
     ...link,
     href,
-    ariaLabel: link.text,
+    'aria-label': link.text,
     onClick: handlerDecorator((ev: MouseEvent) => {
       const isLocalHref = href && !isURL(href);
       const isLocalTarget = !link.target || link.target === '_self';

package/mobile/src/ui-kit/Heading/Heading.tsx

@@ -3,6 +3,7 @@ import { HeadingContent, HeadingType, HeadingTypeContent } from './HeadingConten
 
 export interface HeadingProps extends HeadingContent, HeadingTypeContent {
   className?: string;
+  as?: HeadingType;
 }
 
 const HeadingClass: Record<HeadingType, string> = {
@@ -15,11 +16,13 @@ const HeadingClass: Record<HeadingType, string> = {
 };
 
 export const Heading = JSX<HeadingProps>((props) => {
-  const { className, headingType, title } = props;
+  const { className, headingType, title, as } = props;
+
   if (!headingType) {
     return;
   }
-  const Tag = headingType;
+
+  const Tag = as || headingType;
 
   return (
     <Tag className={`font-sans font-medium m-0 ${HeadingClass[headingType]} ${className || ''}`}>

package/mobile/src/utils/changeHashOnScroll.ts

@@ -0,0 +1,15 @@
+import { Router } from '../components/ContentPage/ContentPageContext';
+
+export const changeHashOnScroll = (router: Router, blocks: NodeListOf<Element> | null) => {
+  blocks?.forEach((block) => {
+    const currentHash = globalThis.location.hash;
+    const anchorHash = `#${block?.id}`;
+
+    if (currentHash === anchorHash) return;
+
+    const position = block?.getBoundingClientRect();
+    if (position && position.top > 0 && position.top < 150) {
+      router.replace(`#${block?.id}`);
+    }
+  });
+};

package/mobile/src/utils/tableFunc.ts

@@ -0,0 +1,8 @@
+export type Predicate<Input> = (input: Input) => boolean;
+
+export const tableFunc =
+  <Input, Output>(table: Array<[Predicate<Input>, Output]>) =>
+  (input: Input): Output | undefined => {
+    const [, output] = table.find(([predicate]) => predicate(input)) || [];
+    return output;
+  };

package/package.json

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

package/src/components/Blocks.ts

@@ -12,6 +12,7 @@ import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
 import { NavigatorTabs } from './NavigatorTabs/NavigatorTabs';
+import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -19,7 +20,6 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductGalleryGreen } from './ProductGalleryGreen/ProductGalleryGreen';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
-import { OtherProducts } from './OtherProducts/OtherProducts';
 import { Recommendation } from './Recommendation/Recommendation';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -29,7 +29,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       />
     )}
     {image?.src && <Img className="mb-[18px]" image={image} />}
-    {title && <Heading headingType="h4" className="text-center text-white" title={title} />}
+    {title && <Heading headingType="h4" as="h3" className="text-center text-white" title={title} />}
     {link?.text && (
       <div className="mt-auto w-full">
         <Button

package/src/components/ComparisonTable/TableCell.tsx

@@ -31,7 +31,7 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 const renderCellInner = ({ label, description }: CellData, i: number, isFillGradient: boolean) => (
   <div key={String(i)} className="first:pt-7 pt-6 last:pb-7">
     {label && (
-      <h5 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h5>
+      <h4 className={`text-xl font-medium m-0 ${isFillGradient ? 'text-white' : ''}`}>{label}</h4>
     )}
     {description && (
       <div