@redneckz/wildless-cms-uni-blocks 0.3.84 → 0.3.86

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import type { FooterLink } from './FooterLink';
+import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
 export interface HorizontalNavigationProps extends FooterLink, UniBlockProps {
   title?: string;
@@ -22,6 +22,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
+                className="font-normal text-sm"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}
@@ -31,22 +32,3 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
     );
   },
 );
-
-interface HorizontalNavigationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
-  ({ className = '', index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-sm text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

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

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface HorizontalNavigationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: () => void;
+}
+
+export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

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

@@ -54,6 +54,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
+  const imageClassName = isPrimary ? 'group-hover:text-white' : '';
 
   return (
     <a
@@ -66,13 +67,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
       rel="noopener noreferrer"
     >
       {icon ? (
-        <Img
-          image={icon}
-          imageClassName={isPrimary ? 'group-hover:text-white' : ''}
-          width="24"
-          height="24"
-          asSVG
-        />
+        <Img image={icon} imageClassName={imageClassName} width="24" height="24" asSVG />
       ) : null}
     </a>
   );

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { LinkProps } from '../../model/LinkProps';
 import type { FooterLink } from './FooterLink';
+import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
@@ -20,6 +20,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
             <TextInformationLink
               key={String(i)}
               index={i}
+              className="font-normal"
               {...useLink({ router, handlerDecorator }, _)}
             />
           ))}
@@ -28,24 +29,3 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
     </div>
   );
 });
-
-interface TextInformationLinkProps extends LinkProps {
-  className: string;
-  index: number;
-  onClick: (ev: MouseEvent) => any;
-}
-
-const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
-  ({ className, index, text, href, target, onClick }) => (
-    <a
-      className={`font-sans font-normal text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${
-        className || ''
-      }`}
-      href={href}
-      target={target}
-      onClick={onClick}
-    >
-      {text || `Документ ${index}`}
-    </a>
-  ),
-);

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

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+
+interface TextInformationLinkProps extends LinkProps {
+  className: string;
+  index: number;
+  onClick: () => void;
+}
+
+export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
+  ({ className = '', index, text, href, target, onClick }) => (
+    <a
+      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`}
+      href={href}
+      target={target}
+      onClick={onClick}
+    >
+      {text || `Документ ${index}`}
+    </a>
+  ),
+);

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

@@ -17,17 +17,15 @@ const blockStyle: Record<BlockVersion, string> = {
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
+    const headingClassName = description ? 'mb-2' : 'mb-5';
+
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
       >
         <div className="flex flex-col items-center mb-5">
           {title ? (
-            <Heading
-              headingType="h3"
-              className={`text-center ${description ? 'mb-2' : 'mb-5'}`}
-              title={title}
-            />
+            <Heading headingType="h3" className={`text-center ${headingClassName}`} title={title} />
           ) : null}
           {description ? (
             <div className="font-normal text-m-md max-w-[600px] text-center mb-5">

package/mobile/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { TitleProp } from '../../model/HeadlineType';
 
 interface Month {
   /** @title Название месяца */
@@ -30,7 +30,7 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent extends HeadingContent {
+export interface GracePeriodContent extends TitleProp {
   /** @title Описание */
   description?: string;
   /** @title Календарь */

package/mobile/src/components/GroupBlock/GroupBlock.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { filterBlocksByTag } from './filterBlocksByTag';
 import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
 import { GroupBlocksItem } from './GroupBlocksItem';
@@ -29,7 +29,7 @@ export const GroupBlock = JSX<GroupBlockProps>(
     });
 
     return (
-      <BlockWrapper context={context} className={`box-border gap-1 ${className}`} {...rest}>
+      <BlockWrapper context={context} className={`box-border ${className}`} {...rest}>
         {tabsNewMap?.length ? (
           <GroupBlockTabs
             currentTag={currentTag}
@@ -39,7 +39,9 @@ export const GroupBlock = JSX<GroupBlockProps>(
           />
         ) : null}
         {groupBlocks.length ? (
-          <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          <div className="mt-1">
+            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          </div>
         ) : null}
       </BlockWrapper>
     );

package/mobile/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -1,56 +1,55 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TabsItemProps } from './GroupBlock';
 
-export type TabClickHandler = (tag) => void;
-
 export interface GroupBlockTabsProps {
-  onTabClick: TabClickHandler;
-  currentTag?: string;
   className?: string;
+  currentTag?: string;
   tabs?: TabsItemProps[];
   isShowCounter?: boolean;
+  onTabClick: (tag?: string) => void;
 }
 
 export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
-  const { tabs, currentTag, onTabClick, className = '', isShowCounter } = props;
+  const { className = '', tabs, currentTag, isShowCounter = false, onTabClick } = props;
 
   return (
-    <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
-      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+    <div className={`box-border flex gap-x-1 h-14 ${className}`} role="tablist">
+      {tabs?.map(renderTab({ currentTag, isShowCounter, onTabClick }))}
     </div>
   );
 });
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
 
 const renderTab =
-  (onTabClick: TabClickHandler, isShowCounter?: boolean, currentTag?: string) =>
+  ({ currentTag, isShowCounter, onTabClick }: GroupBlockTabsProps) =>
   (tab: TabsItemProps, i: number) => {
     const isActive = currentTag === tab.tag;
+
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
-    const counterBlockStyle = `${badgeStyle} 
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
+
+    const tabText = `text-m ${
+      isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
+    }`;
+    const counterBlockStyle = `${badgeStyle}
+      ${
+        isActive
+          ? 'bg-white/30 text-white'
+          : 'bg-main-divider text-secondary-text group-hover:text-primary-main'
+      }`;
 
     return (
       <div
         key={String(i)}
-        className={`flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        className={`flex-1 flex items-center justify-center cursor-pointer ${tabBg}`}
         role="tab"
         onClick={() => onTabClick(tab.tag)}
-        aria-selected={String(isActive)}
-        tag={tab?.tag}
+        aria-selected={isActive}
       >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
-          {isShowCounter ? (
-            <div
-              className={`flex items-center justify-center ml-8 text-s-bold ${counterBlockStyle}`}
-            >
-              <span>{tab.count}</span>
-            </div>
-          ) : null}
-        </div>
+        {tab?.title ? <div className={tabText}>{tab.title}</div> : null}
+        {isShowCounter ? (
+          <div className={`flex items-center justify-center ${counterBlockStyle}`}>{tab.count}</div>
+        ) : null}
       </div>
     );
   };

package/mobile/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { JSXBlock } from '../../components/ContentPage/ContentPage';
-import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { UniBlockProps } from '../../types';
 import { style2className } from '../../utils/style2className';
+import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GroupBlockDef } from './BlocksTypeProps';
 import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
 import { GroupBlockContent } from './GroupBlockContent';
@@ -11,7 +11,7 @@ export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
 
 export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
   return (
-    <div className="grid grid-cols-12 gap-2 box-border">
+    <div className="grid grid-cols-12 gap-1 box-border">
       {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
     </div>
   );

package/mobile/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -13,12 +13,15 @@ type EmbeddableBlocksProps = {
 export const renderBlock =
   ({ context, className }: EmbeddableBlocksProps) =>
   (block: GroupBlockDef, i: number) => {
-    const type = block?.blockType;
-    if (!type || !(type in EmbeddableGroupBlocks)) {
+    if (!block) {
       return null;
     }
 
-    const { style, ...rest } = block;
+    const { style, blockType: type, ...rest } = block;
+
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
 
     const classNameBlock = style2className(style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];

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

@@ -20,13 +20,13 @@ interface DropdownMenuProps extends UniBlockProps {
   menuItems: LinkProps[];
   bgColor?: BgColorVersion;
   context: ContentPageContext;
+  activeSubItem?: LinkProps;
 }
 
 export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
-  const { menuVisible, toggleMenu, menuItems, bgColor, context } = props;
+  const { menuVisible, toggleMenu, menuItems, bgColor, context, activeSubItem } = props;
 
   const { useRouter, handlerDecorator } = context;
-
   const router = useRouter();
 
   return (
@@ -46,26 +46,39 @@ export const DropdownMenu = JSX<DropdownMenuProps>((props) => {
         className={`flex flex-col rounded-md bg-white p-6 pb-2 ${menuVisible ? '' : 'hidden'}`}
         aria-hidden={!menuVisible}
       >
-        {renderDotsSubMenuItems(menuItems, router, handlerDecorator)}
+        {renderDotsSubMenuItems({ menuItems, router, handlerDecorator, activeSubItem })}
       </div>
     </div>
   );
 });
 
-const renderDotsSubMenuItems = (
-  menuItems: LinkProps[],
-  router: Router,
-  handlerDecorator: HandlerDecorator | undefined,
-) =>
-  menuItems?.map((_) => (
+type DotsSubMenuItemsProps = {
+  menuItems: LinkProps[];
+  router: Router;
+  handlerDecorator: HandlerDecorator | undefined;
+  activeSubItem?: LinkProps;
+};
+
+const renderDotsSubMenuItems = ({
+  menuItems,
+  router,
+  handlerDecorator,
+  activeSubItem,
+}: DotsSubMenuItemsProps) => {
+  const isActive = (item) => item === activeSubItem;
+
+  return menuItems?.map((_) => (
     <a
       key={_.href}
       {...useLink({ router, handlerDecorator }, _)}
-      className="text-base font-light pb-4 hover:text-primary-main"
+      className={`text-base font-light pb-4 hover:text-primary-main ${
+        isActive(_) ? 'text-primary-main' : ''
+      }`}
     >
       {_.text}
     </a>
   ));
+};
 
 const renderDot = (bgColor: BgColorVersion, i: number) => (
   <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />

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

@@ -40,7 +40,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
 
   return (
     <nav className="relative mt-5">
-      <div className="overflow-hidden whitespace-nowrap mr-52">
+      <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag
             Tag="span"
@@ -60,6 +60,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
       {dropDownMenuItems.length ? (
         <DropdownMenu
           context={context}
+          activeSubItem={activeSubItem}
           menuVisible={menuVisible}
           toggleMenu={toggleMenu}
           menuItems={dropDownMenuItems}

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

@@ -3,6 +3,7 @@
   "description": "Описание",
   "align": "center",
   "bgColorHeadline": "transparent",
+  "headlineVersion": "M",
   "image": {
     "format": "webp",
     "size": {

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

@@ -30,7 +30,7 @@ export const Headline = JSX<HeadlineProps>(
         ) : null}
         {description ? (
           <p
-            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `}
+            className={`font-normal text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `}
           >
             {description}
           </p>

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

@@ -1,16 +1,13 @@
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
-import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent, HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../../model/AlignType';
+import type { HeadlineProps } from '../../model/HeadlineType';
 
 /**
  * @title Заголовок
  */
-export type HeadlineContent = HeadingContent &
-  DescriptionContent &
+export type HeadlineContent = HeadlineProps &
   ImageContent & {
     align?: AlignType;
     bgColorHeadline?: BlockVersionWithTransparent;
-    headingType?: HeadingType;
   };

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

@@ -1,5 +1,7 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadingTagType, HeadingType } from '../../ui-kit/Heading/HeadingProps';
 
 export const ALIGN_TEXT: Record<AlignType, string> = {
   left: 'text-left',
@@ -13,6 +15,13 @@ type StyleType = {
   description: string;
 };
 
+type VersionStyleType = {
+  descriptionFont: string;
+  gap: string;
+  headingType: HeadingType;
+  as: HeadingTagType;
+};
+
 export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, StyleType> = {
   transparent: {
     background: 'bg-transparent',
@@ -30,3 +39,36 @@ export const HEADLINE_BLOCK_STYLE_MAPS: Record<BlockVersionWithTransparent, Styl
     description: 'text-white/80',
   },
 };
+
+export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
+  XXL: {
+    descriptionFont: 'text-h4-alt',
+    gap: 'gap-[18px]',
+    headingType: 'h0', // 56
+    as: 'h1',
+  },
+  XL: {
+    descriptionFont: 'text-xl-light',
+    gap: 'gap-4',
+    headingType: 'h1', // 50
+    as: 'h1',
+  },
+  L: {
+    descriptionFont: 'text-xl-light',
+    gap: 'gap-4',
+    headingType: 'h2', // 40
+    as: 'h2',
+  },
+  M: {
+    descriptionFont: 'text-xl-light',
+    gap: 'gap-3',
+    headingType: 'h3', // 32
+    as: 'h3',
+  },
+  S: {
+    descriptionFont: 'text-xl-light',
+    gap: 'gap-2',
+    headingType: 'h4',
+    as: 'h4',
+  },
+};

package/mobile/src/components/Insurance/Insurance.tsx

@@ -1,22 +1,29 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
+import { Headline } from '../Headline/Headline';
 
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
 export const Insurance = JSX<InsuranceProps>(
-  ({ className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
+  ({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
     return (
       <BlockWrapper
         className={`px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`}
+        context={context}
         {...rest}
       >
-        {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
-        {description ? <div className="text-center text-md mt-3">{description}</div> : null}
+        <Headline
+          context={context}
+          className="!p-0"
+          title={title}
+          description={description}
+          headlineVersion="M"
+          align="center"
+        />
         <div>
           <div className="mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]">
             {image?.src ? <Img image={image} /> : null}
@@ -44,11 +51,9 @@ function renderBenefit(benefit: InsuranceBenefit, i: number) {
         />
       ) : null}
       <div>
-        {benefit?.label ? <div className="text-title-2xs font-normal">{benefit.label}</div> : null}
+        {benefit?.label ? <div className="text-h6">{benefit.label}</div> : null}
         {benefit?.description ? (
-          <div className="mt-0.5 font-light text-secondary-text font-light">
-            {benefit.description}
-          </div>
+          <div className="mt-0.5 text-secondary-text text-m">{benefit.description}</div>
         ) : null}
       </div>
     </div>
@@ -71,8 +76,8 @@ function renderValueBlock(title, sum, isAnotherBlock) {
 
   return (
     <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
-      <span className="text-secondary-text text-base">{title}</span>
-      <span className="text-primary-main text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="text-secondary-text text-l-light">{title}</span>
+      <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
     </div>
   );
 }

package/mobile/src/components/Insurance/InsuranceContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Преимущество
@@ -14,11 +15,7 @@ export interface InsuranceBenefit {
 /**
  * @title Страховка
  */
-export type InsuranceContent = {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
+export type InsuranceContent = HeadlineCommonProps & {
   image?: Picture;
   /** @title Ежемесячный лимит */
   monthLimit?: number;