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

package/src/components/NavigatorTabs/NavigatorTabs.tsx

@@ -1,15 +1,16 @@
 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 (
@@ -17,13 +18,16 @@ export const NavigatorTabs = JSX<TabsBlockProps>(
         className={`sticky top-0 z-20 box-border flex gap-x-1 h-12 ${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/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}

package/src/components/ProductTile/ProductTile.tsx

@@ -6,7 +6,6 @@ import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
@@ -24,6 +23,7 @@ export const ProductTile = JSX<ProductTileProps>(
     context,
     className = '',
     title,
+    headingType = 'h3',
     description,
     benefits,
     buttons,
@@ -43,7 +43,8 @@ export const ProductTile = JSX<ProductTileProps>(
           title={
             title && (
               <Heading
-                headingType={getTileHeadingType(className)}
+                headingType={headingType}
+                as="h3"
                 title={title}
                 className={`whitespace-pre-wrap max-w-[600px]`}
               />

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
 
@@ -9,6 +9,7 @@ import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
  * @title Продуктовая плитка
  */
 export type ProductTileContent = HeadingContent &
+  HeadingTypeContent &
   DescriptionContent &
   ButtonContent &
   ImageContent & {

package/src/components/StepsBlock/StepsBlock.tsx

@@ -81,7 +81,7 @@ const renderStepTitle = (step: Step, i: number, isMainButton: boolean) => {
       </div>
       {step?.button?.text && !isMainButton ? (
         <Button
-          className="box-border mt-[38px] py-3 h-12 w-full max-w-[240px]"
+          className="box-border mt-8 py-3 h-12 w-full max-w-[240px]"
           version="primary"
           href="#"
         >

package/src/components/Tile/Tile.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Плитка",
+  "headingType": "h3",
   "titleSize": "M",
   "description": "Описание",
   "image": {

package/src/components/Tile/Tile.fixture.tsx

@@ -29,6 +29,7 @@ const image4: Picture = {
 
 export const TILE: TileContent = {
   title: 'Кредиты',
+  headingType: 'h3',
   items: ['До 3 млн ₽', 'до 5 лет'],
   buttons: [
     {
@@ -42,6 +43,7 @@ export const TILE: TileContent = {
 
 export const TILE_PREMIUM: TileContent = {
   title: 'Премиальные продукты',
+  headingType: 'h3',
   description:
     'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус',
   buttons: [
@@ -68,6 +70,7 @@ export default {
         version="secondary"
         className="col-span-4"
         title="Ипотека"
+        headingType="h3"
         items={[
           'Качественные фермерские продукты напрямую от производителей',
           'Самая большая база сельских туров по России',
@@ -91,6 +94,7 @@ export default {
         context={context}
         className="col-span-6"
         title="Банковские пластиковые карты"
+        headingType="h3"
         items={['Счета в разных валютах', 'Бесплатное обслуживание', 'Кэшбэк до 15% от покупок']}
         buttons={[
           {
@@ -115,6 +119,7 @@ export default {
         context={context}
         className="col-span-12 pr-28"
         title="Экосистема «СВОЕ», созданная для людей"
+        headingType="h3"
         items={[
           'Качественные фермерские продукты напрямую от производителей',
           'Самая большая база сельских туров по России',

package/src/components/Tile/Tile.tsx

@@ -7,7 +7,6 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { TileContent } from './TileContent';
@@ -25,6 +24,7 @@ export const Tile = JSX<TileProps>((props) => {
   const {
     context,
     title,
+    headingType = 'h3',
     description,
     items,
     children,
@@ -49,7 +49,7 @@ export const Tile = JSX<TileProps>((props) => {
         title={
           title && (
             <Heading
-              headingType={getTileHeadingType(className)}
+              headingType={headingType}
               as="h3"
               title={title}
               className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}

package/src/components/Tile/TileContent.ts

@@ -1,7 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+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';
 
@@ -9,6 +9,7 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
  * @title Плитка
  */
 export type TileContent = HeadingContent &
+  HeadingTypeContent &
   DescriptionContent &
   ListContent &
   ButtonContent &

package/src/types.ts

@@ -2,7 +2,11 @@ import type { BlockContent } from './components/BlockContent';
 import type { ContentPageContext } from './components/ContentPage/ContentPageContext';
 import type { BlockVersion } from './model/BlockVersion';
 
-export type ColorPalette = 'pc' | 'bc' | 'eo' | 'eo2' | 'eo3' | 'eo4';
+/**
+ * @title Цветовая палитра
+ * @enumNames ["", "Частным клиентам", "Бизнес клиентам", "Экосистема Своё"]
+ */
+export type ColorPalette = '' | 'pc' | 'bc' | 'eo';
 
 export interface BaseBlockDef {
   type?: string;

package/src/ui-kit/Button/ButtonInner.tsx

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button-sm text-left">{text}</div>
+          <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
     </div>