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

package/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/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/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/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/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/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/src/components/GracePeriod/GracePeriod.example.json

@@ -0,0 +1,90 @@
+{
+  "title": "Пример использования «Карты для покупок в рассрочку»:",
+  "description": "Описание",
+  "calendar": [
+    {
+      "blackText": "1 декабря — беспроцентный период",
+      "greenText": "начинается с первого числа каждого месяца",
+      "month": [
+        {
+          "name": "Август",
+          "image": {
+            "src": "calendar/august.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев",
+      "greenText": "(минимальный платеж, 3% от суммы задолженности)",
+      "month": [
+        {
+          "name": "Сентябрь",
+          "image": {
+            "src": "calendar/september.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        },
+        {
+          "name": "Октябрь",
+          "image": {
+            "src": "calendar/october.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "25 ноября — последний день беспроцентного 3-х месячного периода",
+      "greenText": "",
+      "month": [
+        {
+          "name": "Ноябрь",
+          "image": {
+            "src": "calendar/november.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    },
+    {
+      "blackText": "",
+      "greenText": "25 декабря — обязательный платеж в соответствии с тарифом",
+      "month": [
+        {
+          "name": "Декабрь",
+          "image": {
+            "src": "calendar/december.png",
+            "format": "webp",
+            "size": {
+              "width": 210,
+              "height": "auto"
+            },
+            "alt": "Пример использования «Карты для покупок в рассрочку»"
+          }
+        }
+      ]
+    }
+  ]
+}

package/src/components/GracePeriod/GracePeriod.fixture.tsx

@@ -0,0 +1,109 @@
+import { context } from '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { GracePeriod } from './GracePeriod';
+import type { GracePeriodContent } from './GracePeriodContent';
+
+const august: Picture = {
+  src: 'calendar/august.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const september: Picture = {
+  src: 'calendar/september.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const october: Picture = {
+  src: 'calendar/october.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const november: Picture = {
+  src: 'calendar/november.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const december: Picture = {
+  src: 'calendar/december.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+export const GRACE_PERIOD: GracePeriodContent = {
+  title: 'Пример использования «Карты для покупок в рассрочку»:',
+  description: 'Необязательное описание блока',
+  calendar: [
+    {
+      blackText: '1 декабря — беспроцентный период',
+      greenText: 'начинается с первого числа каждого месяца',
+      month: [
+        {
+          name: 'Август',
+          image: august,
+        },
+      ],
+    },
+    {
+      blackText: '25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев',
+      greenText: '(минимальный платеж, 3% от суммы задолженности)',
+      month: [
+        {
+          name: 'Сентябрь',
+          image: september,
+        },
+        {
+          name: 'Октябрь',
+          image: october,
+        },
+      ],
+    },
+    {
+      blackText: '25 ноября — последний день',
+      greenText: 'беспроцентного 3-х месячного периода',
+      month: [
+        {
+          name: 'Ноябрь',
+          image: november,
+        },
+      ],
+    },
+    {
+      blackText: '25 декабря — обязательный платеж в соответствии с тарифом',
+      greenText: '',
+      month: [
+        {
+          name: 'Декабрь',
+          image: december,
+        },
+      ],
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GracePeriod className="col-span-12" context={context} {...GRACE_PERIOD} />
+    </div>
+  ),
+};

package/src/components/GracePeriod/GracePeriod.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { GracePeriodContent } from './GracePeriodContent';
+
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
+
+export const GracePeriod = JSX<GracePeriodProps>(
+  ({ className = '', title, description, calendar, anchor = null }) => {
+    return (
+      <section className={`bg-white p-16 pt-12 ${className}`} id={anchor}>
+        <Heading headingType="h2" className="text-center" title={title} />
+        <div className="font-light text-base-md text-center mt-3">{description}</div>
+        {renderCalendar(calendar)}
+      </section>
+    );
+  },
+);
+
+const renderCalendar = (calendar) => {
+  const colCount =
+    calendar.reduce((accumulator, currentValue) => accumulator + currentValue.month.length, 0) || 1;
+  const colSize = 100 / colCount;
+
+  const mappedCalendar = calendar.map((_) => ({
+    ..._,
+    flexBasis: `${_.month.length * colSize}%`,
+  }));
+
+  return (
+    <div className="w-full flex flex-col justify-center mt-14">
+      <div className="flex w-full mb-3 font-light text-m-title-md mb-3 text-center">
+        {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
+      </div>
+      <div className="flex w-full">
+        {mappedCalendar.map((_, ind) => (
+          <div
+            key={`monthItem-${ind}`}
+            className="pr-3 mr-3 border-r border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+            style={{ flexBasis: _.flexBasis }}
+          >
+            <div className="flex">{renderMonthImages(_)}</div>
+            <div className="font-light text-sm text-primary-text mt-3">
+              <span>{_.blackText}</span>&thinsp;
+              <span className="text-primary-main">{_.greenText}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const renderMonthNames = (item, colSize) =>
+  item.month.map((_) => (
+    <div key={`monthName-${_.name}`} style={{ flexBasis: `${colSize}%` }}>
+      {_.name}
+    </div>
+  ));
+const renderMonthImages = (item) =>
+  item.month.map((_) => (
+    <div
+      key={`monthImage-${_.image.src}`}
+      className="max-h-[207px] border-r-[1px] pr-3 mr-3 border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+    >
+      <Img image={_.image} className="flex" />
+    </div>
+  ));

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -0,0 +1,27 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { Picture } from '../../model/Picture';
+
+interface Month {
+  /** @title Название месяца */
+  name?: string;
+  /** @title Изображение календарного месяца */
+  image?: Picture;
+}
+
+interface CalendarItem {
+  month?: Month[];
+  /** @title Основной текст */
+  blackText?: string;
+  /** @title Вспомогательный текст */
+  greenText?: string;
+}
+
+/**
+ * @title Льготный период
+ */
+export interface GracePeriodContent extends HeadingContent {
+  /** @title Описание */
+  description?: string;
+  /** @title Календарь */
+  calendar?: CalendarItem[];
+}

package/src/components/Header/Header.tsx

@@ -39,7 +39,7 @@ export const Header = JSX<HeaderProps>(
         key={String(i)}
         active={_ === activeTopItem}
         {...useLink({ router, handlerDecorator }, _)}
-        ariaLabel={_.text}
+        aria-label={_.text}
         bgColor={bgColor}
       />
     ));

package/src/components/Header/HeaderSubMenu.tsx

@@ -4,6 +4,7 @@ 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 { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { headerSubMenuObserver } from './HeaderSubMenuObserver';
 
@@ -19,6 +20,10 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgCol
   const { handlerDecorator } = context;
 
   setTimeout(() => {
+    if (isSSR()) {
+      return;
+    }
+
     const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
     headerSubMenu.forEach((_) => {
       headerSubMenuObserver?.observe(_);
@@ -70,10 +75,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 +102,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/src/components/Header/HeaderSubMenuObserver.ts

@@ -1,8 +1,9 @@
 import { isSSR } from '../../utils/isSSR';
 
-export const headerSubMenuObserver = isSSR()
-  ? undefined
-  : new IntersectionObserver(
+const isClient = !isSSR();
+
+export const headerSubMenuObserver = isClient
+  ? new IntersectionObserver(
       (entries) => {
         const headerSubMenuButtonElement = window.document.querySelector(
           '[data-header-submenu-visible=toggled]',
@@ -30,7 +31,8 @@ export const headerSubMenuObserver = isSSR()
         }
       },
       { root: window.document, threshold: 1.0 },
-    );
+    )
+  : undefined;
 
 // TODO: add types
 const toggleVisibilityInItems = (visibilityList, items, className) => {

package/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/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
+import { LinkDocsListItemBase } from './LinkDocsListItemBase';
 
 export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
   <LinkDocsListItemBase
     className={`flex h-full box-border ${className}`}
-    iconClassName="mr-2.5 min-w-6 min-h-6 text-primary-text"
-    textClassName="self-center"
+    iconClassName="mr-3.5 min-w-6 min-h-6 text-primary-text"
+    textClassName="self-center font-light"
     suffixClassName="text-secondary-text group-hover:text-primary-main"
     doc={doc}
     icon={icon}

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { MobileAppTileContent } from './MobileAppTileContent';
@@ -31,15 +30,15 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           title={
             title && (
               <Heading
-                headingType={getTileHeadingType(className)}
+                headingType="h3"
                 title={title}
-                className={`whitespace-pre-wrap max-w-[600px] mb-7`}
+                className={`whitespace-pre-wrap max-w-[600px] mb-[30px]`}
               />
             )
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-7 gap-4" />
+              <ButtonSection context={context} buttons={buttons} className="flex mt-[30px] gap-4" />
             ) : null
           }
         >
@@ -52,7 +51,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                   title={title}
                   width="164"
                   height="164"
-                  className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+                  className="w-[92px] h-[92px] min-w-[92px] min-h-[92px] bg-secondary-light"
                 />
               </a>
             )}

package/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/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" }
   ]
 }