@redneckz/wildless-cms-uni-blocks 0.3.47 → 0.3.50

package/src/components/GracePeriod/GracePeriod.example.json

@@ -12,7 +12,8 @@
             "src": "calendar/august.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -29,7 +30,8 @@
             "src": "calendar/september.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -40,7 +42,8 @@
             "src": "calendar/october.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -57,7 +60,8 @@
             "src": "calendar/november.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }
@@ -74,7 +78,8 @@
             "src": "calendar/december.png",
             "format": "webp",
             "size": {
-              "width": 210
+              "width": 210,
+              "height": 190
             },
             "alt": "Пример использования «Карты для покупок в рассрочку»"
           }

package/src/components/GracePeriod/GracePeriod.tsx

@@ -10,8 +10,8 @@ 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} />
+      <section className={`font-sans bg-white p-[50px] ${className}`} id={anchor}>
+        <Heading headingType="h3" className="text-center" title={title} />
         <div className="font-light text-base-md text-center mt-3">{description}</div>
         {calendar ? renderCalendar(calendar) : null}
       </section>
@@ -21,24 +21,30 @@ export const GracePeriod = JSX<GracePeriodProps>(
 
 const renderCalendar = (calendar) => {
   const colCount =
-    calendar.reduce((accumulator, currentValue) => accumulator + currentValue.month.length, 0) || 1;
+    calendar.reduce(
+      (accumulator, currentValue) =>
+        currentValue?.month?.length ? accumulator + currentValue.month.length : accumulator,
+      0,
+    ) || 1;
   const colSize = 100 / colCount;
 
-  const mappedCalendar = calendar.map((_) => ({
-    ..._,
-    flexBasis: `${_.month.length * colSize}%`,
-  }));
+  const mappedCalendar = calendar
+    .filter((_) => _?.month?.length)
+    .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">
+    <div className="w-full flex flex-col justify-center mt-[54px]">
+      <div className="flex w-full mb-3 font-light text-m-title-md 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"
+            className="pr-[11px] mr-3 border-r border-main-divider last:border-r-0 last:pr-0 last:mr-0"
             style={{ flexBasis: _.flexBasis }}
           >
             <div className="flex">{renderMonthImages(_)}</div>
@@ -64,7 +70,7 @@ const renderMonthImages = (item) =>
     _.image?.src ? (
       <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"
+        className="h-[207px] border-r-[1px] pr-3 mr-3 border-main-divider last:border-r-0 last:pr-0 last:mr-0"
       >
         <Img image={_.image} className="flex" />
       </div>

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,10 +1,19 @@
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { Picture } from '../../model/Picture';
 
 interface Month {
   /** @title Название месяца */
   name?: string;
-  /** @title Изображение календарного месяца */
+  /**
+   * @title Изображение календарного месяца
+   * @default
+   * {
+   *  format: "webp",
+   *  size: {
+   *    width: 210,
+   *    height: 190
+   *   }
+   * }
+   */
   image?: Picture;
 }
 
@@ -20,7 +29,9 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent extends HeadingContent {
+export interface GracePeriodContent {
+  /** @title Заголовок */
+  title?: string;
   /** @title Описание */
   description?: string;
   /** @title Календарь */

package/src/components/NavigatorTabs/NavigatorTabItem.tsx

@@ -1,19 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { NavigatorTab } from './NavigatorTabsContent';
+import type { LinkProps } from '../../model/LinkProps';
 
-export interface NavigatorTabItemProps extends NavigatorTab {
+export interface NavigatorTabItemProps extends LinkProps {
   active?: boolean;
   className?: string;
   onClick?: (ev: MouseEvent) => void;
 }
 
-const TEXT_CLASSES = 'font-sans font-normal text-sm';
+const TEXT_CLASSES = 'font-sans font-normal text-m-md';
 const LINK_CLASSES = 'flex-1 flex items-center justify-center cursor-pointer';
 
 export const NavigatorTabItem = JSX<NavigatorTabItemProps>(
-  ({ className = '', label, active, children, onClick, href, target = '_self' }) => (
+  ({ className = '', text, active, children, onClick, href, target = '_self' }) => (
     <a className={getLinkClasses(className, active)} target={target} href={href} onClick={onClick}>
-      <span className={getTextClasses(active)}>{label || children}</span>
+      <span className={getTextClasses(active)}>{text || children}</span>
     </a>
   ),
 );

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

@@ -1,7 +1,7 @@
 {
   "navigatorTabs": [
-    { "label": "Tab1", "href": "#tab1" },
-    { "label": "Tab2", "href": "#tab2" },
-    { "label": "Link", "href": "https://rshb.ru", "target": "_blank" }
+    { "text": "Таб 1", "href": "", "target": "_self" },
+    { "text": "Таб 2", "href": "", "target": "_self" },
+    { "text": "Таб 3", "href": "", "target": "_self" }
   ]
 }

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -1,11 +1,16 @@
 import { context } from '../../setup-fixture';
 import { NavigatorTabs } from './NavigatorTabs';
 import tabsExample from './NavigatorTabs.example.json';
+import type { NavigatorTabsContent } from './NavigatorTabsContent';
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <NavigatorTabs context={context} className="col-span-12" {...tabsExample} />
+      <NavigatorTabs
+        context={context}
+        className="col-span-12"
+        {...(tabsExample as NavigatorTabsContent)}
+      />
     </div>
   ),
 };

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,29 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
-import { getHash, isURL } from '../../utils/url';
-import type { Router } from '../ContentPage/ContentPageContext';
+import { getHash } from '../../utils/url';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { NavigatorTabItem } from './NavigatorTabItem';
-import type { NavigatorTab, NavigatorTabsContent } from './NavigatorTabsContent';
+import type { NavigatorTabsContent } from './NavigatorTabsContent';
 
 export interface TabsBlockProps extends UniBlockProps, NavigatorTabsContent {}
 
 export const NavigatorTabs = JSX<TabsBlockProps>(
   ({ className = '', navigatorTabs, context, anchor = null }) => {
-    const router = context.useRouter();
     const href = globalThis.location?.href; // TODO: remove globalThis, use href from router
 
     return (
       <section
-        className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${className}`}
+        className={`sticky top-0 z-20 box-border flex gap-x-1 h-14 ${className}`}
         id={anchor}
       >
-        {navigatorTabs ? navigatorTabs.map(renderTab(href, router)) : null}
+        {navigatorTabs ? navigatorTabs.map(renderTab(context, href)) : null}
       </section>
     );
   },
 );
 
-const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: number) => {
+const renderTab = (context: ContentPageContext, href?: string) => (tab: LinkProps, i: number) => {
+  const { useRouter, handlerDecorator } = context;
+  const router = useRouter();
+
   const hash = getHash(href);
   const active = hash ? tab.href === hash : i === 0;
 
@@ -31,14 +35,7 @@ const renderTab = (href?: string, router?: Router) => (tab: NavigatorTab, i: num
     <NavigatorTabItem
       key={tab.href}
       active={active}
-      onClick={() => handleRoute(router, tab.href)}
-      {...tab}
+      {...useLink({ router, handlerDecorator }, 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/src/components/NavigatorTabs/NavigatorTabsContent.ts

@@ -1,14 +1,4 @@
-/**
- * @title Таб
- */
-export interface NavigatorTab {
-  /** @title Название */
-  label?: string;
-  /** @title Якорь */
-  href?: string;
-  /** @title Таргет (target) */
-  target?: string;
-}
+import type { LinkProps } from '../../model/LinkProps';
 
 /**
  * @title Блок табов
@@ -18,5 +8,5 @@ export interface NavigatorTabsContent {
    * @title Список табов
    * @minItems 3
    */
-  navigatorTabs?: NavigatorTab[];
+  navigatorTabs?: LinkProps[];
 }

package/src/components/ProductBlock/ProductBlock.example.json

@@ -1,6 +1,12 @@
 {
   "title": "Продукт",
   "description": "Описание",
+  "headingType": "h2",
+  "backwardButton": {
+    "href": "https://rshb.ru",
+    "text": "Кнопка возврата",
+    "icon": { "icon": "ArrowLeftIcon" }
+  },
   "image": {
     "format": "webp",
     "size": {

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -19,7 +19,7 @@ const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
-    icon: { icon: 'EmptyWalletIcon' },
+    icon: { icon: 'EmptyWalletIcon', iconVersion: 'white' },
   },
   {
     label: 'От 16,9%',
@@ -48,6 +48,15 @@ const buttons: ButtonWithIconProps[] = [
   },
 ];
 
+const buttonsSecond: ButtonWithIconProps[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
 const items = [
   'Совершайте любые личные покупки',
   'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
@@ -70,6 +79,18 @@ export const PRODUCT_BLOCK: ProductBlockContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        backwardButton={backwardButton}
+        headingType="h1"
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        buttons={buttons}
+        image={image}
+      />
+
       <ProductBlock
         className="col-span-12"
         context={context}
@@ -77,6 +98,18 @@ export default {
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
+        benefitsVersion="white"
+        buttons={buttons}
+        image={image}
+      />
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
+      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
         buttons={buttons}
         image={image}
       />
@@ -85,48 +118,52 @@ export default {
   secondary: (
     <div className="container grid grid-cols-12">
       <ProductBlock
+        className="col-span-12"
         context={context}
+        backwardButton={backwardButton}
+        headingType="h1"
+        title="Потребительский кредит наличными"
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits}
+        buttons={buttonsSecond}
+        image={image}
+        version="secondary"
+      />
+
+      <ProductBlock
         className="col-span-12"
+        context={context}
         title="Потребительский кредит наличными"
         headingType="h2"
-        version="secondary"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
-        items={items}
+        benefitsVersion="white"
+        buttons={buttonsSecond}
         image={image}
+        version="secondary"
+      />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...PRODUCT_BLOCK}
+        image={image}
+        version="secondary"
+      />
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...PRODUCT_BLOCK}
+        version="secondary"
       />
-    </div>
-  ),
-  'with items': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} image={image} />
-    </div>
-  ),
-  'without image': (
-    <div className="container grid grid-cols-12">
-      <ProductBlock className="col-span-12" context={context} {...PRODUCT_BLOCK} />
-    </div>
-  ),
-  'default-h1': (
-    <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         title="Потребительский кредит наличными"
-        headingType="h1"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         benefits={benefits}
-        buttons={buttons}
+        buttons={buttonsSecond}
         image={image}
-        backwardButton={backwardButton}
+        version="secondary"
       />
     </div>
   ),

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -5,8 +5,15 @@ import type { DescriptionContent } from '../../ui-kit/Description/DescriptionCon
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { IconVersion } from '../../model/IconVersion';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+export type BenefitItemProps = {
+  benefit: Benefit;
+  version?: BlockVersion;
+  benefitsVersion?: IconVersion;
+};
+
 export type ProductBlockInnerContent = HeadingContent &
   HeadingTypeContent &
   DescriptionContent &
@@ -19,6 +26,7 @@ export type ProductBlockInnerContent = HeadingContent &
      * @maxItems 3
      */
     benefits?: Benefit[];
+    benefitsVersion?: IconVersion;
     version?: BlockVersion;
     /**
      *  @title Буллиты

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

@@ -20,6 +20,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     headingType = 'h2',
     description,
     benefits,
+    benefitsVersion = 'normal',
     buttons,
     image,
     items,
@@ -56,7 +57,11 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               <Description className="mt-3 text-m-md" description={description} />
             ) : null}
             {benefits?.filter((items) => items.label)?.length ? (
-              <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
+              <div className="mt-3">
+                {benefits.map((benefit, i) =>
+                  renderBenefit({ benefit, version, benefitsVersion }, i),
+                )}
+              </div>
             ) : null}
             {items?.length ? (
               <List

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -19,6 +19,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     headingType = 'h2',
     description,
     benefits,
+    benefitsVersion = 'normal',
     buttons,
     image,
     items,
@@ -43,7 +44,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">
-                {benefits.map((_, i) => renderBenefit(_, i, version))}
+                {benefits.map((benefit, i) =>
+                  renderBenefit({ benefit, version, benefitsVersion }, i),
+                )}
               </div>
             ) : null}
             {items?.length ? (

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

@@ -1,6 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { BenefitItemProps } from './ProductBlockContent';
 
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
   primary: 'text-primary-text',
@@ -11,13 +11,14 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white',
 };
 
-export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion) {
+export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps, i: number) {
+  const isIconWhite = version === 'secondary';
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon ? (
         <Img
-          className="w-6 h-6 rounded-full box-border"
-          image={benefit.icon}
+          className={renderBenefitIconBgStyle(version)}
+          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
           width="24"
           height="24"
           asSVG
@@ -34,3 +35,13 @@ export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion
     </div>
   );
 }
+
+function renderBenefitIconBgStyle(version) {
+  let bgColorStyle = 'text-primary-main';
+
+  if (version === 'secondary') {
+    bgColorStyle = 'text-black';
+  }
+
+  return `w-6 h-6 rounded-full box-border ${bgColorStyle}`;
+}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -1,11 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import { Img } from '../../ui-kit/Img/Img';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { BenefitItemProps } from './ProductBlockContent';
 
-const benefitIconBgStyleMap: Record<BlockVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white/30',
-};
 const benefitTitleStyleMap: Record<BlockVersion, string> = {
   primary: 'text-primary-text',
   secondary: 'text-white',
@@ -15,13 +11,17 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white',
 };
 
-export function renderBenefit(benefit: Benefit, i: number, version: string) {
+export function renderBenefit(
+  { benefit, version = 'primary', benefitsVersion = 'normal' }: BenefitItemProps,
+  i: number,
+) {
+  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon ? (
         <Img
-          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border text-primary-text ${benefitIconBgStyleMap[version]}`}
-          image={benefit.icon}
+          className={renderBenefitIconBgStyle(version, benefitsVersion)}
+          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
           width="24"
           height="24"
           asSVG
@@ -38,3 +38,15 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
     </div>
   );
 }
+
+function renderBenefitIconBgStyle(version, benefitsVersion) {
+  let bgColorStyle = 'bg-primary-main text-black';
+
+  if (version === 'secondary') {
+    bgColorStyle = 'bg-white/30 text-black';
+  } else if (benefitsVersion === 'normal') {
+    bgColorStyle = 'bg-secondary-light text-primary-main';
+  }
+
+  return `w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+}

package/src/components/ProductTile/ProductTile.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Продуктовая плитка",
+  "headingType": "h3",
   "description": "Описание",
   "image": {
     "format": "webp",

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -1,9 +1,9 @@
 import { context } from '../../setup-fixture';
 
-import { ProductTile } from './ProductTile';
 import type { Picture } from '../../model/Picture';
-import type { ProductTileContent } from './ProductTileContent';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ProductTile } from './ProductTile';
+import type { ProductTileContent } from './ProductTileContent';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -57,6 +57,7 @@ const buttonsSecondary: ButtonProps[] = [
 
 export const PRODUCT_TILE: ProductTileContent = {
   title: 'Акция! “Кредит На все, что хочется!”',
+  headingType: 'h3',
   description: 'Потребительский кредит на любые цели, без залога и поручительства',
   benefits,
   buttons: buttons,
@@ -64,6 +65,7 @@ export const PRODUCT_TILE: ProductTileContent = {
 };
 export const PRODUCT_PENSION_TILE: ProductTileContent = {
   title: 'Кредит пенсионный',
+  headingType: 'h3',
   description: 'Для людей в возрасте до 75 лет',
   benefits,
   buttons: buttonsSecondary,
@@ -81,6 +83,7 @@ export default {
         context={context}
         className="col-span-6"
         title="Акция! “Пенсионный кредит”"
+        headingType="h3"
         description={'Потребительский кредит на любые цели, без залога и поручительства'}
         benefits={benefits}
         buttons={buttonsSecondary}
@@ -94,6 +97,7 @@ export default {
         context={context}
         className="col-span-8"
         title="Кредит под залог недвижимости"
+        headingType="h3"
         description={'Без переоформления залогой недвижимости на банк'}
         benefits={benefits}
         buttons={buttonsSecondary}
@@ -107,6 +111,7 @@ export default {
         context={context}
         className="col-span-4"
         title="Кредит пенсионный"
+        headingType="h3"
         description={'Для людей в возрасте до 75 лет'}
         benefits={benefits}
         buttons={buttonsSecondary}