@redneckz/wildless-cms-uni-blocks 0.15.342 → 0.16.1

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

@@ -1,7 +1,7 @@
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { type Picture } from '../../model/Picture';
 import '../../setup-fixture';
-import { type ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
+import { type BenefitItemContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { Blocks } from '../Blocks';
 import { ProductBlock } from './ProductBlock';
@@ -17,29 +17,25 @@ const image: Picture = {
   },
 };
 
-const benefits: ComplexBenefitContent[] = [
+const benefits: BenefitItemContent[] = [
   {
-    type: 'default',
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
     icon: { icon: 'CalendarTickIcon' },
   },
   {
-    type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
     icon: { icon: 'PercentageRoundIcon' },
   },
   {
-    type: 'default',
     label: 'До 5 лет',
     description: 'Срок кредитования',
     icon: { icon: 'CalendarIcon' },
   },
 ];
 
-const benefit: ComplexBenefitContent = {
-  type: 'default',
+const benefit: BenefitItemContent = {
   label: 'до 5 млн Р',
   description: 'Кредитный лимит',
 };
@@ -68,11 +64,13 @@ const buttonsSecond: LinkButtonContent[] = [
   },
 ];
 
-const items = [
-  'Совершайте любые личные покупки',
-  'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-  'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-];
+const __html = `
+  <ul>
+    <li>Совершайте любые личные покупки</li>
+    <li>Используйте корпоративную карту как обычную дебетовую, если вы ИП</li>
+    <li>Расходы для бизнеса на УСН 15% позволят снизить налоговую базу</li>
+  </ul>
+`;
 
 export const PRODUCT_BLOCK_WITH_IMAGE: ProductBlockContent = {
   title: 'Акция! “Кредит На все, что хочется!”',
@@ -111,7 +109,7 @@ export const PRODUCT_BLOCK_WITH_IMAGE: ProductBlockContent = {
 export const PRODUCT_BLOCK: ProductBlockContent = {
   title: 'Оплата проходит в 180 странах мира',
   headlineVersion: 'L',
-  items,
+  __html,
   buttons: buttons,
 };
 
@@ -129,6 +127,7 @@ const PRODUCT_BLOCK_WITH_BACK_BUTTON: ProductBlockContent = {
 
 const options = {
   blocksRegistry: Blocks,
+  page: { common: require('../../../cosmos-static/wcms-resources/common.json') },
 } as BlockRendererOptions;
 
 const UNIT_BLOCK_DATA = {
@@ -151,6 +150,7 @@ export default {
         backwardButton={true}
         buttons={buttons}
         image={image}
+        options={options}
       />
     </div>
   ),
@@ -160,6 +160,7 @@ export default {
         className="col-span-12"
         {...PRODUCT_BLOCK_WITH_BACK_BUTTON}
         imageOptions={{ directionRight: false }}
+        options={options}
       />
     </div>
   ),
@@ -211,24 +212,20 @@ export default {
         image={image}
         benefits={[
           {
-            type: 'default',
             label: 'Телесное повреждение',
             icon: { icon: 'ShieldTickIcon' },
           },
           {
-            type: 'default',
             label: 'Госпитализация застрахованного',
             description: 'Описание',
             icon: { icon: 'ShieldTickIcon' },
           },
           {
-            type: 'default',
             label:
               'Сокращение численности работников организации и другой текст для теста длинны текста',
             icon: { icon: 'ShieldTickIcon' },
           },
           {
-            type: 'default',
             label: 'Смерть застрахованного',
             icon: { icon: 'ShieldTickIcon' },
           },
@@ -254,6 +251,7 @@ export default {
         buttons={buttonsSecond}
         image={image}
         version="secondary"
+        options={options}
       />
     </div>
   ),

package/src/components/ProductBlock/ProductBlock.tsx

@@ -8,13 +8,18 @@ import { type ProductBlockContent } from './ProductBlockContent';
 export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
 export const ProductBlock = UniBlock<ProductBlockProps>(
-  ({ className, padding, ...rest }) => (
+  ({ className, padding, defaultPadding, ...rest }) => (
     <BlockWrapper
       className={style('overflow-hidden flex flex-col gap-3xl box-border', className)}
       padding="p-0"
       {...rest}
     >
-      <BaseProductTile defaultPadding="p-6xl" padding={padding} className="grow h-full" {...rest} />
+      <BaseProductTile
+        defaultPadding={defaultPadding || 'p-6xl'}
+        padding={padding}
+        className="grow h-full"
+        {...rest}
+      />
     </BlockWrapper>
   ),
   { childrenTypes: ['UnitBlock'] },

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -1,3 +1,4 @@
+import { type AdditionalDescriptionProps } from '../../model/HeadlineType';
 import { type BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
 
@@ -5,7 +6,8 @@ import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
  * @title Продуктовый блок
  */
 export type ProductBlockContent = UniBlockContent &
-  BaseProductTileContent & {
+  BaseProductTileContent &
+  AdditionalDescriptionProps & {
     /** @title Отображать кнопку возврата */
     backwardButton?: boolean;
   };

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -4,19 +4,33 @@ import { getRegularButtonClasses } from '../../ui-kit/LinkButton/getRegularButto
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
 import { style } from '../../utils/style';
 
-export function renderBackwardButton(
-  version: LinkButtonVersion,
-  handleClick: () => void,
+type BackwardButtonProps = {
+  version: LinkButtonVersion;
+  handleClick: () => void;
+  text: string | undefined;
+  alwaysVisible?: boolean;
+};
+
+export function renderBackwardButton({
+  version,
+  handleClick,
+  text = 'Вернуться назад',
   alwaysVisible = false,
-) {
+}: BackwardButtonProps) {
+  if (!text) {
+    return null;
+  }
   const iconVersion = version === 'primary' ? 'white' : 'black';
   const className = 'w-12 h-12 min-h-12 min-w-12 flex items-center justify-center';
-  const text = 'Вернуться назад';
+
+  const bgBackwardButton = version === 'primary' ? 'bg-primary-main' : 'bg-white';
+
+  const visible = alwaysVisible ? 'flex' : 'hidden sm:flex';
 
   return (
-    <div className={style(alwaysVisible ? 'flex' : 'hidden sm:flex', 'items-center gap-s')}>
+    <div className={style(visible, 'items-center gap-s')}>
       <div
-        className={getRegularButtonClasses({ className, version, rounded: true })}
+        className={style(getRegularButtonClasses({ className, rounded: true }), bgBackwardButton)}
         onClick={handleClick}
       >
         <Img
@@ -29,7 +43,7 @@ export function renderBackwardButton(
       </div>
       <LinkButton
         version="link"
-        className="group-data-secondary:text-white/80"
+        className="group-data-secondary:text-white"
         text={text}
         ariaLabel={text}
         onClick={handleClick}

package/src/components/ProductGallery/ProductGallery.example.json

@@ -11,15 +11,8 @@
         "productBlock": {
           "title": "Продуктовая галерея",
           "headlineVersion": "M",
-          "image": {
-            "format": "webp",
-            "size": {
-              "width": 608,
-              "height": 299
-            }
-          },
           "description": "Описание",
-          "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+          "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>",
           "isDotted": true,
           "benefitsVersion": "normal",
           "benefits": [
@@ -50,15 +43,8 @@
         "productBlock": {
           "title": "Продуктовая галерея",
           "headlineVersion": "XXL",
-          "image": {
-            "format": "webp",
-            "size": {
-              "width": 608,
-              "height": 299
-            }
-          },
           "description": "Описание",
-          "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+          "__html": "<ul><li>Элемент списка 1</li><li>Элемент списка 2</li><li>Элемент списка 3</li></ul>",
           "isDotted": true,
           "benefitsVersion": "normal",
           "benefits": [

package/src/components/ProductGallery/ProductGallery.fixture.mobile.tsx

@@ -23,11 +23,14 @@ const creditCard: Picture = {
   },
 };
 
-const items = [
-  'Потребительский кредит по специальной процентной ставке',
-  'Получите деньги без залога и поручительства',
-  'Кредитный лимит до 5 млн рублей',
-];
+const __html = `
+  <ul>
+    <li>Потребительский кредит по специальной процентной ставке</li>
+    <li>Получите деньги без залога и поручительства</li>
+    <li>Кредитный лимит до 5 млн рублей</li>
+  </ul>
+`;
+
 const buttons: LinkButtonContent[] = [
   {
     href: 'https://rshb.ru',
@@ -57,7 +60,7 @@ export default {
               title: 'Кредит по одному документу',
               description: 'Ставка от 5,5% годовых',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons,
               image: percentImage,
             },
@@ -66,7 +69,7 @@ export default {
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 3 лет!',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons,
               image: creditCard,
             },
@@ -75,7 +78,7 @@ export default {
             productBlock: {
               title: 'Дополнительные бонусные баллы за покупки!',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons,
               image: creditCard,
             },
@@ -84,7 +87,7 @@ export default {
             productBlock: {
               title: 'Карты Unionpay',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons,
               image: creditCard,
             },
@@ -104,7 +107,7 @@ export default {
               title: 'Кредит по одному документу',
               description: 'Кредит наличными без залога и поручительства, только по паспорту',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons: buttonsSecondary,
               image: percentImage,
             },
@@ -113,7 +116,7 @@ export default {
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 3 лет!',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons: buttonsSecondary,
               image: creditCard,
             },
@@ -122,7 +125,7 @@ export default {
             productBlock: {
               title: 'Дополнительные бонусные баллы за покупки!',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons: buttonsSecondary,
               image: creditCard,
             },
@@ -131,7 +134,7 @@ export default {
             productBlock: {
               title: 'Карты Unionpay',
               headlineVersion: 'L',
-              items,
+              __html,
               buttons: buttonsSecondary,
               image: creditCard,
             },

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -2,6 +2,7 @@ import '../../setup-fixture';
 
 import { type Picture } from '../../model/Picture';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+import { type ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import { ProductGallery } from './ProductGallery';
 
 const percentImage: Picture = {
@@ -14,29 +15,14 @@ const percentImage: Picture = {
   alt: 'Ставка от 3,6% годовых',
 };
 
-const worker: Picture = {
-  src: 'money-2.png',
-  format: 'webp',
-  size: {
-    width: 280,
-    height: 280,
-  },
-};
+const __html = `
+  <ul>
+    <li>Потребительский кредит по специальной процентной ставке</li>
+    <li>Получите деньги без залога и поручительства</li>
+    <li>Кредитный лимит до 5 млн рублей</li>
+  </ul>
+`;
 
-const creditCard: Picture = {
-  src: 'credit-card-1.png',
-  format: 'webp',
-  size: {
-    width: 280,
-    height: 280,
-  },
-};
-
-const items = [
-  'Потребительский кредит по специальной процентной ставке',
-  'Получите деньги без залога и поручительства',
-  'Кредитный лимит до 5 млн рублей',
-];
 const buttons: LinkButtonContent[] = [
   {
     href: 'https://rshb.ru',
@@ -46,14 +32,14 @@ const buttons: LinkButtonContent[] = [
   },
 ];
 
-const buttonsSecondary: LinkButtonContent[] = [
-  {
-    href: 'https://rshb.ru',
-    text: 'Подробнее',
-    target: '_blank',
-    version: 'white',
-  },
-];
+const productBlock: ProductBlockContent = {
+  title: 'Кредит по одному документу',
+  description: 'Ставка от 5,5% годовых',
+  headlineVersion: 'L',
+  __html,
+  buttons,
+  image: percentImage,
+};
 
 export default {
   default: (
@@ -66,53 +52,28 @@ export default {
               title: 'Кредит по одному документу',
               description: 'Ставка от 5,5% годовых',
             },
-            productBlock: {
-              title: 'Кредит по одному документу',
-              description: 'Ставка от 5,5% годовых',
-              headlineVersion: 'L',
-              items,
-              buttons,
-              image: percentImage,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Для людей в возрасте',
               description: 'Ставка до 7% годовых',
             },
-            productBlock: {
-              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headlineVersion: 'L',
-              items,
-              buttons,
-              image: worker,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Выгодно покупать',
               description: 'Ставка от 5% годовых',
             },
-            productBlock: {
-              title: 'Дополнительные бонусные баллы за покупки!',
-              headlineVersion: 'L',
-              items,
-              buttons,
-              image: creditCard,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Карты Unionpay',
               description: '120 дней льготный период',
             },
-            productBlock: {
-              title: 'Карты Unionpay',
-              headlineVersion: 'L',
-              items,
-              buttons,
-              image: creditCard,
-            },
+            productBlock,
           },
         ]}
       />
@@ -129,53 +90,28 @@ export default {
               title: 'Кредит по одному документу',
               description: 'Ставка от 5,5% годовых',
             },
-            productBlock: {
-              title: 'Кредит по одному документу',
-              description: 'Кредит наличными без залога и поручительства, только по паспорту',
-              headlineVersion: 'L',
-              items,
-              buttons: buttonsSecondary,
-              image: percentImage,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Для людей в возрасте',
               description: 'Ставка до 7% годовых',
             },
-            productBlock: {
-              title: 'Ставка от 12,5% годовых на срок до 3 лет!',
-              headlineVersion: 'L',
-              items,
-              buttons: buttonsSecondary,
-              image: worker,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Выгодно покупать',
               description: 'Ставка от 5% годовых',
             },
-            productBlock: {
-              title: 'Дополнительные бонусные баллы за покупки!',
-              headlineVersion: 'L',
-              items,
-              buttons: buttonsSecondary,
-              image: creditCard,
-            },
+            productBlock,
           },
           {
             nav: {
               title: 'Карты Unionpay',
               description: '120 дней льготный период',
             },
-            productBlock: {
-              title: 'Карты Unionpay',
-              headlineVersion: 'L',
-              items,
-              buttons: buttonsSecondary,
-              image: creditCard,
-            },
+            productBlock,
           },
         ]}
       />

package/src/components/ProductGallery/ProductGallery.tsx

@@ -84,8 +84,8 @@ const renderNavButton =
   ({ nav }: ProductSlide, i: number) => {
     const isActive = i === activeSlideIndex;
     const btnClassName = isActive
-      ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
-      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
+      ? 'min-w-[370px] mt-s h-28 bg-white shadow-dark-blue border-none p-6'
+      : 'min-w-72  mt-lg h-24 ease-in duration-300 bg-white/10 px-xl py-lg hover:backdrop-blur';
     const btnTitleClassName = isActive
       ? 'text-primary-text text-h6 py-xs'
       : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
@@ -100,7 +100,11 @@ const renderNavButton =
         onClick={() => onClick(i)}
         aria-label={nav?.title}
         className={style(
-          'max-h-28 mt-xs ml-xs relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50 whitespace-nowrap',
+          'relative overflow-hidden grow',
+          'ml-xs px-xl',
+          'box-border basis-0 border',
+          'border-gray group-data-secondary:border-white/50',
+          'text-left whitespace-nowrap',
           btnClassName,
         )}
       >

package/src/components/ProductGallery/ProductGallery.ui.json

@@ -10,6 +10,12 @@
             "items": {
               "icon": {
                 "ui:field": "icon"
+              },
+              "__html": {
+                "ui:widget": "html"
+              },
+              "type": {
+                "ui:widget": "hidden"
               }
             }
           },

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.example.json

@@ -6,12 +6,9 @@
     "description": "Описание",
     "__html": "<p>Описание</p>",
     "richVersion": "",
-    "icon": { "format": "webp", "size": { "width": 70, "height": 48 } },
     "button": {
       "text": "Информация о регионе",
-      "version": "link",
-      "icon": { "format": "webp", "size": { "width": 16, "height": 16 } },
-      "iconRight": { "format": "webp", "size": { "width": 16, "height": 16 } }
+      "version": "link"
     }
   }
 }

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -6,6 +6,7 @@ import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { RichText } from '../../ui-kit/RichText/RichText';
+import { type RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 import { Text } from '../../ui-kit/Text/Text';
 import { type TextColor } from '../../ui-kit/Text/TextProps';
 import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
@@ -25,6 +26,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     button,
     className = '',
     __html,
+    richVersion,
     icon,
     title,
     version = 'primary',
@@ -44,7 +46,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
         {title ? <Heading headingType="h3" as="h3" title={title} /> : null}
       </div>
       <div className="w-full space-y-m">
-        {__html ? renderDescriptionBlock(__html) : null}
+        {__html ? renderDescriptionBlock({ __html, richVersion }) : null}
         {renderBlock({
           label: 'Адрес',
           data: address,
@@ -63,9 +65,9 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
   ),
 );
 
-const renderDescriptionBlock = (__html?: string) => (
+const renderDescriptionBlock = (props: RichTextProps) => (
   <div className="border-b border-main-divider pb-lg">
-    <RichText __html={__html} />
+    <RichText {...props} itemSize="list-s" />
   </div>
 );
 

package/src/components/RichTextBlock/RichTextBlock.tsx

@@ -7,7 +7,7 @@ import { type RichTextBlockContent } from './RichTextBlockContent';
 interface RichTextBlockProps extends RichTextBlockContent, UniBlockProps {}
 
 export const RichTextBlock = JSX<RichTextBlockProps>((props) => {
-  const { __html, richVersion, ...rest } = props;
+  const { __html, richVersion = '', ...rest } = props;
 
   return (
     <BlockWrapper defaultPadding="p-0" {...rest}>

package/src/components/RollupItem/AccordionFoldButton.tsx

@@ -7,7 +7,6 @@ import { Text } from '../../ui-kit/Text/Text';
 import { TextWithIcon } from '../../ui-kit/TextWithIcon/TextWithIcon';
 import { style } from '../../utils/style';
 import { renderRoundedIcon } from './renderRoundedIcon';
-import { rollupIconVersion } from './rollupIconVersion';
 
 interface RollupButtonProps {
   label?: string;
@@ -36,9 +35,7 @@ export const AccordionFoldButton = JSX<RollupButtonProps>(
           ) : null}
         </div>
       }
-      iconNode={
-        icon ? <Icon name={icon} iconVersion={rollupIconVersion} width="24" height="24" /> : null
-      }
+      iconNode={icon ? <Icon name={icon} iconVersion="color" width="24" height="24" /> : null}
     />
   ),
 );

package/src/components/RollupItem/RollupItem.fixture.tsx

@@ -2,8 +2,8 @@ import '../../setup-fixture';
 
 import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { Blocks } from '../Blocks';
-import { RollupItem } from '../RollupItem/RollupItem';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
+import { RollupItem } from './RollupItem';
 
 const options = {
   blocksRegistry: Blocks,