@redneckz/wildless-cms-uni-blocks 0.8.26 → 0.8.28

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -5,7 +5,15 @@
       "size": {
         "width": 140,
         "height": 140
-      }
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 84,
+          "format": "webp",
+          "alignment": "center"
+        }
+      ]
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
@@ -16,6 +24,7 @@
       { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
       { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
       { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
-    ]
+    ],
+    "align": "text-center"
   }
 }

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -1,7 +1,8 @@
+import type { BulletsProps } from '../../model/Bullets';
+import type { ButtonCommonIconProps } from '../../model/Button';
 import type { AdditionalDescriptionProps, HeadlineSmallProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
@@ -17,34 +18,11 @@ export interface ListProps {
  */
 export type CarouselProductCardContent = UniBlockContent &
   HeadlineSmallProps &
-  AdditionalDescriptionProps & {
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 140
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *       "width": 84,
-     *       "format": "webp",
-     *       "alignment": "center"
-     *   }]
-     * }
-     */
-    icon?: Picture;
-    /** @title Кнопка */
-    button?: ButtonWithIconProps;
-    /**
-     * @title Буллиты
-     * @default true
-     */
-    isDotted?: boolean;
+  AdditionalDescriptionProps &
+  IconProps &
+  ButtonCommonIconProps &
+  BulletsProps & {
     /** @title Список */
     items?: ListProps[];
-    /**
-     * @title Выравнивание
-     * @default text-center
-     */
     align?: TextAlign;
   };

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -23,6 +23,8 @@ const list = [
 export const BUSINESS_CARD: CarouselProgramsCardContent = {
   title: 'Продвинутый',
   icon: imageMonth,
+  href: 'http://rshb.ru',
+  target: '_blank',
   list,
 };
 

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -6,22 +6,35 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+import { useLink } from '../../hooks/useLink';
+import { style } from '../../utils/style';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, list = [], ...rest }) => (
-    <BlockWrapper className={`border border-gray flex min-w-[536px] ${className}`} {...rest}>
-      <div className="w-[200px] min-w-[200px] self-center">
-        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
-        {icon?.src ? <Img image={icon} /> : null}
-      </div>
-      <div className="p-8 pl-3 w-full">
-        {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
-        {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
-      </div>
-    </BlockWrapper>
-  ),
+  ({ className = '', title, icon, list = [], href, target, ...rest }) => {
+    const link = useLink();
+    const adjustedProps = link({ href, target });
+    const tagName = href ? 'a' : 'section';
+
+    return (
+      <BlockWrapper
+        tag={tagName}
+        className={style('border border-gray flex min-w-[536px]', className)}
+        extraProps={adjustedProps}
+        {...rest}
+      >
+        <div className="w-[200px] min-w-[200px] self-center">
+          {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+          {icon?.src ? <Img image={icon} /> : null}
+        </div>
+        <div className="p-8 pl-3 w-full">
+          {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+          {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
+        </div>
+      </BlockWrapper>
+    );
+  },
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (

package/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -1,11 +1,13 @@
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { IconProps } from '../../model/Picture';
+import type { LinkCommonProps } from '../../model/LinkProps';
 
 /**
  * @title Карточка программ карусели
  */
 export type CarouselProgramsCardContent = UniBlockContent &
+  LinkCommonProps &
   TitleProps &
   IconProps & {
     /** @title Список */

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -1,20 +1,33 @@
 {
   "content": {
-    "image": {
+    "icon": {
       "format": "webp",
       "size": {
-        "width": 180,
-        "height": 180
-      }
+        "width": 290,
+        "height": 290
+      },
+      "sources": [
+        {
+          "media": 1279,
+          "width": 174,
+          "height": 174,
+          "format": "webp",
+          "alignment": "southeast"
+        }
+      ]
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
+    "target": null,
+    "href": null,
     "socialMedia": [
       {
         "href": "https://t.me",
         "target": "_blank",
         "version": "gray",
-        "rounded": false
+        "rounded": false,
+        "aboveText": "Доступно в",
+        "text": "Telegram"
       }
     ],
     "version": "primary"

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx

@@ -5,8 +5,9 @@ import type {
   CarouselRecommendationCardContent,
   RecommendationSocialMedia,
 } from './CarouselRecommendationCardContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
 
-const image: Picture = {
+const icon: Picture = {
   src: 'product-basket.png',
   format: 'webp',
   size: {
@@ -16,49 +17,91 @@ const image: Picture = {
   title: 'product-basket',
 };
 
-const socialMedia: RecommendationSocialMedia[] = [
+const appendLeft = <Icon name="PlayMarketIcon" iconVersion="color" width="24" height="24" asSVG />;
+
+const commonProps: RecommendationSocialMedia = {
+  target: '_blank',
+  version: 'gray',
+  rounded: false,
+};
+
+const socialMediaWithText: RecommendationSocialMedia[] = [
+  {
+    href: 'https://t.me',
+    aboveText: 'Доступно в',
+    text: 'Telegram',
+    appendLeft,
+    ...commonProps,
+  },
+  {
+    href: 'https://vk.com',
+    aboveText: 'Доступно в',
+    text: 'Telegram',
+    appendLeft,
+    ...commonProps,
+  },
+  {
+    href: 'https://ok.ru',
+    aboveText: 'Доступно в',
+    text: 'Telegram',
+    appendLeft,
+    ...commonProps,
+  },
+];
+
+const socialMediaWithoutText: RecommendationSocialMedia[] = [
   {
     href: 'https://t.me',
-    target: '_blank',
-    version: 'gray',
-    rounded: false,
+    ...commonProps,
   },
   {
     href: 'https://vk.com',
-    target: '_blank',
-    version: 'gray',
-    rounded: false,
+    ...commonProps,
   },
   {
     href: 'https://ok.ru',
-    target: '_blank',
-    version: 'gray',
-    rounded: false,
-    icon: {
-      icon: 'OkIcon',
-    },
+    ...commonProps,
   },
 ];
 
-const items = ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'];
+const items = [
+  'Бесплатное подключение и обслуживание',
+  'Вход и подписание документов по биометрии',
+  'Работа со счетами, шаблонами и выпиской',
+];
 
 export const CAROUSEL_RECOMMENDATION_CARD: CarouselRecommendationCardContent = {
-  title: 'РоссельхозБанк',
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
   items,
-  image,
-  socialMedia,
+  icon,
+  socialMedia: socialMediaWithText,
+};
+
+export const CAROUSEL_RECOMMENDATION_CARD_SIMPLE: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  items,
+  icon,
+  socialMedia: socialMediaWithoutText,
+};
+export const CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST: CarouselRecommendationCardContent = {
+  title: 'Подключаем мобильный банк для управления бизнесом',
+  description: 'Все возможности банка для бизнеса в вашем смартфоне',
+  icon,
+  socialMedia: socialMediaWithoutText,
 };
 
 export default {
   default: (
     <div className="container grid grid-cols-12 mb-1">
-      <CarouselRecommendationCard className="col-span-4" {...CAROUSEL_RECOMMENDATION_CARD} />
+      <CarouselRecommendationCard className="col-span-12" {...CAROUSEL_RECOMMENDATION_CARD} />
     </div>
   ),
   secondary: (
     <div className="container grid grid-cols-12 mb-1">
       <CarouselRecommendationCard
-        className="col-span-4"
+        className="col-span-12"
         version="secondary"
         {...CAROUSEL_RECOMMENDATION_CARD}
       />
@@ -67,10 +110,27 @@ export default {
   gray: (
     <div className="container grid grid-cols-12 mb-1">
       <CarouselRecommendationCard
-        className="col-span-4"
+        className="col-span-12"
         version="gray"
         {...CAROUSEL_RECOMMENDATION_CARD}
-        description="На портале представлено множество ипотечных программ, в том числе и сельская ипотека"
+      />
+    </div>
+  ),
+  socialMediaWithoutText: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD_SIMPLE}
+      />
+    </div>
+  ),
+  cardWithoutList: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-12"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST}
       />
     </div>
   ),

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,13 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import { style } from '../../utils/style';
-import { BaseTile } from '../BaseTile/BaseTile';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { SocialMedia } from '../Footer/SocialMedia';
+import { style } from '../../utils/style';
+import { useLink } from '../../hooks/useLink';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+
+const BORDER_STYLE =
+  'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+
+const setAdditionalIconStyles = (items: string[]) =>
+  items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
@@ -15,49 +24,58 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   ({
     className = '',
     description,
-    image,
+    href,
+    icon,
     items = [],
     socialMedia = [],
+    target,
     title,
     version = 'primary',
     ...rest
   }) => {
-    const tileTitle = title ? (
-      <Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
-    ) : null;
-    const tileImage = image?.src ? (
-      <Img className="absolute bottom-0 right-0 m-0" image={image} />
-    ) : null;
-    const BORDER_STYLE =
-      'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
+    const link = useLink();
+    const adjustedProps = link({ href, target });
+    const tagName = href ? 'a' : 'section';
 
     return (
       <BlockWrapper
         className={style(
-          'relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50',
+          'relative p-12 min-w-[524px] h-full flex flex-col box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
+        extraProps={adjustedProps}
+        tag={tagName}
         version={version}
         {...rest}
       >
-        <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
-          <div className="h-full flex flex-col justify-between">
-            {description ? (
-              <span className="mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]">
-                {description}
-              </span>
-            ) : null}
+        <div className="self-center">
+          {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
+        </div>
+        <div className="mb-5">
+          {description ? (
+            <Paragraph size="text-xl" font="font-light" color="group-data-gray:text-secondary-text">
+              {description}
+            </Paragraph>
+          ) : null}
+        </div>
+        <div className="flex align-center w-full">
+          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
             {items.length ? (
-              <List
-                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
-                items={items}
-              />
+              <List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
             ) : null}
-            {socialMedia.length ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
+            {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
           </div>
-        </BaseTile>
+          {renderIconBlock(icon, items)}
+        </div>
       </BlockWrapper>
     );
   },
 );
+
+const renderIconBlock = (icon: Picture | undefined, items: string[]) => (
+  <div className={style('flex', setAdditionalIconStyles(items))}>
+    {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+    {icon?.src ? <Img image={icon} /> : null}
+  </div>
+);

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -2,11 +2,13 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkCommonProps } from '../../model/LinkProps';
-import type { IconProps, Picture } from '../../model/Picture';
+import type { IconProps } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
 
 export type RecommendationSocialMedia = LinkCommonProps &
-  IconProps & {
+  IconProps &
+  ButtonWithIconProps & {
     version: ButtonVersion;
     rounded?: boolean;
   };
@@ -16,24 +18,9 @@ export type RecommendationSocialMedia = LinkCommonProps &
  */
 export type CarouselRecommendationCardContent = UniBlockContent &
   HeadlineCommonProps &
-  ListContent & {
-    /**
-     * @title Соц сети
-     */
+  ListContent &
+  IconProps &
+  LinkCommonProps & {
+    /** @title Соц сети */
     socialMedia?: RecommendationSocialMedia[];
-    /**
-     * @default {
-     *   "format": "webp",
-     *   "size": {
-     *       "width": 290
-     *   },
-     *   "sources": [{
-     *       "media": 1279,
-     *       "width": 174,
-     *       "format": "webp",
-     *       "alignment": "southeast"
-     *   }]
-     * }
-     */
-    image?: Picture;
   };

package/src/components/ComparisonTable/ComparisonTable.example.json

@@ -17,6 +17,10 @@
       {
         "header": {
           "title": "Продукт 1",
+          "icon": {
+            "format": "webp",
+            "size": { "width": 24 }
+          },
           "image": {
             "format": "webp",
             "size": {
@@ -51,6 +55,10 @@
       {
         "header": {
           "title": "Продукт 2",
+          "icon": {
+            "format": "webp",
+            "size": { "width": 24 }
+          },
           "image": {
             "format": "webp",
             "size": {

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,8 +1,14 @@
-import type { DescriptionProps, LabelProps, TitleProps } from '../../model/HeadlineType';
+import type {
+  DescriptionProps,
+  LabelProps,
+  SubtitleProps,
+  TitleProps,
+} from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { Picture } from '../../model/Picture';
+import type { IconProps, Picture } from '../../model/Picture';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Ячейка
@@ -12,15 +18,13 @@ export type CellData = LabelProps & DescriptionProps;
 /**
  * @title Шапка колонки
  */
-export type ColumnHeader = TitleProps & {
-  /** @title Подзаголовок */
-  subtitle?: string;
-  /** @default { "format": "webp", "size": { "width": 24 } } */
-  icon?: Picture;
-  /** @default { "format": "webp", "size": { "width": 100 } } */
-  image?: Picture;
-  link?: LinkProps;
-};
+export type ColumnHeader = TitleProps &
+  SubtitleProps &
+  IconProps &
+  ImageContent & {
+    icon?: Picture;
+    link?: LinkProps;
+  };
 
 /**
  * @title Продукт

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { TitleProps } from '../../model/HeadlineType';
+import type { SubtitleProps, TitleProps } from '../../model/HeadlineType';
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,8 +8,8 @@ import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 export type HeaderCellProps = ImageContent &
   IconProps &
-  TitleProps & {
-    subtitle?: string;
+  TitleProps &
+  SubtitleProps & {
     isFillGradient?: boolean;
     link?: LinkProps;
   };

package/src/components/ContentPage/ContentPage.tsx

@@ -8,6 +8,8 @@ import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
+import { defaultEventBus } from '../../EventBus/defaultEventBus';
+import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
 
 interface ContentPageProps extends UniBlockProps {
   blocksRegistry: BlocksRegistry;
@@ -20,6 +22,8 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
 
   const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
 
+  const [overflowStyle, setOverflowStyle] = useState<string>('');
+
   const options: BlockRendererOptions = {
     key: '',
     page: data,
@@ -30,8 +34,19 @@ export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((pr
 
   useBlockRouterProvider();
 
+  useEffect(
+    () =>
+      defaultEventBus.subscribe('setPageOverflowHidden', (isHidden) => {
+        setOverflowStyle(isHidden ? 'overflow-hidden h-screen' : '');
+      }),
+    [],
+  );
+
   return (
-    <section className={style('relative', pageStyle, className)} data-theme={colorPalette}>
+    <section
+      className={style('relative', pageStyle, className, overflowStyle)}
+      data-theme={colorPalette}
+    >
       {slots?.header ? (
         <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
           {renderBlocksList(slots?.header, {

package/src/components/ErrorBlock/ErrorBlock.example.json

@@ -4,7 +4,21 @@
     "subtitle": "Описание",
     "error": {
       "errorContentType": "Code",
-      "code": "404"
+      "code": "404",
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 460
+        },
+        "sources": [
+          {
+            "media": 1279,
+            "width": 276,
+            "format": "webp",
+            "alignment": "center"
+          }
+        ]
+      }
     },
     "button": {
       "text": "Кнопка",