@redneckz/wildless-cms-uni-blocks 0.9.13 → 0.9.14

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
@@ -28,9 +27,12 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             align="text-left"
           />
           {additionalDescription ? (
-            <div className="pt-6">
-              <Paragraph>{additionalDescription}</Paragraph>
-            </div>
+            <Headline
+              className="pt-6"
+              isPadding={false}
+              description={description}
+              align="text-left"
+            />
           ) : null}
         </div>
         {links?.length ? renderLinks(links) : null}
@@ -48,11 +50,13 @@ const renderLinks = (links: LinkProps[]) => {
       isBlur={false}
       isCyclic={true}
       itemCount={itemCount}
+      arrowsPadded={false}
+      showDots={true}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start"
+          className="w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start"
         >
           {links
             .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCard.example.json

@@ -0,0 +1,6 @@
+{
+  "content": {
+    "richVersion": "striped",
+    "__html": "<h4>Заголовок4</h4><p><br></p><table><thead><tr><th><p>Заголовок 1-1</p></th><th><p>Заголовок 1-2</p></th></tr></thead><tbody><tr><td><p>Описание 1-1</p></td><td><p>Описание 1-2</p></td></tr><tr><td><p>Описание 2-1</p></td><td><p>Описание 2-2</p></td></tr><tr><td><p>Описание 3-1<br></p></td><td><p>Описание 3-2<br></p></td></tr><tr><td><p>Описание 4-1<br></p></td><td><p>Описание 4-2<br></p></td></tr></tbody></table></li>"
+  }
+}

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { style } from '../../utils/style';
+import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent';
+
+export interface CarouselRichTextCardProps extends CarouselRichTextCardContent, UniBlockProps {}
+
+export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
+  ({ className = '', __html, richVersion = 'striped', ...rest }) => {
+    return (
+      <BlockWrapper
+        className={style('p-9 border border-gray min-w-96', richVersion, className)}
+        {...rest}
+      >
+        <RichText __html={__html} />
+      </BlockWrapper>
+    );
+  },
+);

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCard.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/mobile/src/components/CarouselRichTextCard/CarouselRichTextCardContent.ts

@@ -0,0 +1,7 @@
+import type { UniBlockContent } from '../../model/JSXBlock';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+
+/**
+ * @title Карточка c форматированным вводом
+ */
+export type CarouselRichTextCardContent = UniBlockContent & RichTextProps & {};

package/mobile/src/components/Tabs/ScrollableTabs.tsx

@@ -12,7 +12,7 @@ interface ScrollableTabsProps extends RenderTabProps {
 
 export type IsScrollButtonsShown = boolean[];
 
-const scrollButtonStyle = 'absolute z-50 top-0';
+const scrollButtonStyle = 'absolute z-40 top-0';
 
 export const ScrollableTabs = JSX<ScrollableTabsProps>((props) => {
   const { tabs, onClick, currentTab, page, showCounter } = props;

package/mobile/src/components/VerticalLayout/VerticalLayout.example.json

@@ -22,7 +22,6 @@
         {
           "content": {
             "image": {
-              "alignment": "center",
               "size": {
                 "width": 230,
                 "height": 230
@@ -35,7 +34,6 @@
             "button": {
               "text": "Подробнее",
               "icon": {
-                "alignment": "center",
                 "format": "webp",
                 "size": {
                   "width": 24,
@@ -47,7 +45,6 @@
               },
               "version": "primary",
               "iconRight": {
-                "alignment": "center",
                 "format": "webp",
                 "size": {
                   "width": 24,
@@ -69,7 +66,6 @@
         {
           "content": {
             "image": {
-              "alignment": "center",
               "size": {
                 "width": 230,
                 "height": 230
@@ -82,7 +78,6 @@
             "button": {
               "text": "Подробнее",
               "icon": {
-                "alignment": "center",
                 "format": "webp",
                 "size": {
                   "width": 24,
@@ -94,7 +89,6 @@
               },
               "version": "primary",
               "iconRight": {
-                "alignment": "center",
                 "format": "webp",
                 "size": {
                   "width": 24,
@@ -116,7 +110,6 @@
         {
           "content": {
             "image": {
-              "alignment": "center",
               "size": {
                 "width": 230,
                 "height": 230
@@ -129,7 +122,6 @@
             "button": {
               "text": "Подробнее",
               "icon": {
-                "alignment": "center",
                 "format": "webp",
                 "size": {
                   "width": 24,
@@ -141,7 +133,6 @@
               },
               "version": "primary",
               "iconRight": {
-                "alignment": "center",
                 "format": "webp",
                 "size": {
                   "width": 24,

package/mobile/src/ui-kit/Button/renderArrows.tsx

@@ -24,7 +24,7 @@ export function renderArrows({
     <div>
       {canDec ? (
         <ArrowButton
-          className={`absolute z-50 ${btnClass[0]} ${className}`}
+          className={`absolute z-40 ${btnClass[0]} ${className}`}
           onClick={dec}
           ariaLabel="Пролистать влево"
           data-block-control="scroll-left"
@@ -33,7 +33,7 @@ export function renderArrows({
       ) : null}
       {canInc ? (
         <ArrowButton
-          className={`absolute z-50 rotate-180 ${btnClass[1]} ${className}`}
+          className={`absolute z-40 rotate-180 ${btnClass[1]} ${className}`}
           onClick={inc}
           ariaLabel="Пролистать вправо"
           data-block-control="scroll-right"

package/mobile/src/ui-kit/LocationDialog/LocationDialog.tsx

@@ -45,7 +45,10 @@ export const LocationDialog = JSX<LocationDialogProps>(
         {...dialogProps}
         head={
           <div>
-            <CurrentLocation currentLocation={currentLocation} />
+            <CurrentLocation
+              currentLocation={currentLocation}
+              onChangeLocation={handleChangeLocation}
+            />
             <SearchBar onSearch={setQuery} searchTerm={query} className="mb-7" />
           </div>
         }
@@ -81,13 +84,18 @@ const cleanUpRegions = (regions: Region[]) =>
     name: region.name?.replace(/республика|область|край'/gi, '').trim() || '',
   }));
 
-const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation }) =>
+const CurrentLocation = JSX<CurrentLocationProps>(({ currentLocation, onChangeLocation }) =>
   currentLocation ? (
     <div className="mb-4">
       <Text size="text-l" font="font-light">
         Сейчас выбран:&nbsp;
       </Text>
-      <button className="cursor-pointer" onClick={close}>
+      <button
+        className="cursor-pointer"
+        onClick={() => {
+          onChangeLocation && onChangeLocation(currentLocation);
+        }}
+      >
         <Text color="text-primary-main">{currentLocation.name}</Text>
       </button>
     </div>

package/mobile/src/ui-kit/LocationDialog/LocationDialogProps.ts

@@ -8,6 +8,7 @@ export interface RegionLinkProps {
 
 export interface CurrentLocationProps {
   currentLocation?: Region;
+  onChangeLocation?: (region: Region) => void;
 }
 
 export interface ForeignOfficeProps {

package/mobile/src/ui-kit/RichText/RichTextProps.ts

@@ -3,4 +3,9 @@ type HTML = string;
 export interface RichTextProps {
   /** @title Текст */
   __html?: HTML;
+  /**
+   * @title Стиль форматированного текста
+   * @enumNames ["по умолчанию", "в полоску"]
+   */
+  richVersion?: '' | 'striped';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/common.css

@@ -21,6 +21,8 @@ html {
   --color-primary-active: 36, 95, 52;
   --color-secondary-hover: 36, 131, 65;
   --color-secondary-active: 36, 95, 52;
+  --color-secondary-text: 125, 126, 127;
+  --color-secondary-light: 245, 247, 249;
   --color-gradient-from: 141, 189, 76;
   --color-gradient-to: 69, 172, 69;
 }
@@ -245,6 +247,24 @@ html {
   .md-container strong {
     @apply font-bold;
   }
+
+  .striped .md-container table {
+    width: 100%;
+    table-layout: fixed;
+    text-align: left;
+  }
+  .striped .md-container table thead {
+    color: rgb(var(--color-secondary-text));
+  }
+
+  .striped .md-container table td,
+  .striped .md-container table th {
+    padding: 8px 14px 5px;
+  }
+
+  .striped .md-container table tbody tr:nth-child(2n-1) {
+    background-color: rgb(var(--color-secondary-light));
+  }
 }
 
 /*

package/src/components/ApplicationForm/Footnote.tsx

@@ -10,7 +10,7 @@ interface FootnoteProps {
 
 export const Footnote = JSX<FootnoteProps>(({ link }) => (
   <Paragraph size="text-s-light" color="text-secondary-text">
-    <Text>Нажимая кнопку вы подтверждаете согласие с </Text>
+    <Text>Нажимая кнопку, вы подтверждаете согласие с </Text>
     {link ? (
       <Button
         href={link.href}

package/src/components/ApplicationForm/renderQuestionsInterested.tsx

@@ -36,7 +36,7 @@ export const renderQuestionsInterested = ({
       />
     </div>
     <textarea
-      placeholder="Укажите интересующий Вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
+      placeholder="Укажите интересующий вас вопрос, место ведения бизнеса и удобное время для телефонного звонка"
       className="block w-full resize-y min-h-24 p-4 outline-none border rounded-md border-main-stroke hover:border-primary-hover active:focus:border-primary-text"
       value={text}
       onChange={(e) => handleChange({ text: e.target.value })}

package/src/components/Blocks.ts

@@ -17,6 +17,7 @@ import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { CarouselProductCard } from './CarouselProductCard/CarouselProductCard';
 import { CarouselProgramsCard } from './CarouselProgramsCard/CarouselProgramsCard';
 import { CarouselRecommendationCard } from './CarouselRecommendationCard/CarouselRecommendationCard';
+import { CarouselRichTextCard } from './CarouselRichTextCard/CarouselRichTextCard';
 import { CarouselTariffsCard } from './CarouselTariffsCard/CarouselTariffsCard';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ContactsBlock } from './ContactsBlock/ContactsBlock';
@@ -73,6 +74,7 @@ export const Blocks: BlocksRegistry = {
   CarouselProductCard,
   CarouselProgramsCard,
   CarouselRecommendationCard,
+  CarouselRichTextCard,
   CarouselTariffsCard,
   ComparisonTable,
   ContactsBlock,

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

@@ -6,8 +6,8 @@
     "cardTextAlign": "center",
     "bonusBenefits": [
       {
-        "title": "",
-        "description": "Более 5000 товаров",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -18,8 +18,8 @@
         }
       },
       {
-        "title": "",
-        "description": "750 авиакомпаний, 1,2 млн отелей, билеты РЖД",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -30,8 +30,8 @@
         }
       },
       {
-        "title": "",
-        "description": "Аренда автомобилей",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -42,8 +42,8 @@
         }
       },
       {
-        "title": "",
-        "description": "Болеее 1000 развлечений",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -54,8 +54,8 @@
         }
       },
       {
-        "title": "",
-        "description": "Платежные гаджеты Pay Ring",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -66,8 +66,8 @@
         }
       },
       {
-        "title": "",
-        "description": "Цифровые сервисы",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -78,8 +78,8 @@
         }
       },
       {
-        "title": "",
-        "description": "Фермерские продукты",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {
@@ -90,8 +90,8 @@
         }
       },
       {
-        "title": "",
-        "description": "Страхование",
+        "title": "Верхний заголовок",
+        "description": "Нижний заголовок",
         "icon": {
           "format": "webp",
           "size": {

package/src/components/Carousel/Carousel.fixture.tsx

@@ -15,6 +15,7 @@ import {
   CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
   CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
 } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
+import { RICH_CARD } from '../CarouselRichTextCard/CarouselRichTextCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
 
@@ -251,4 +252,20 @@ export default {
       />
     </div>
   ),
+  'rich-text': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        visibleItemCount={2}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselRichTextCard',
+            content: RICH_CARD,
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/Carousel/Carousel.tsx

@@ -9,9 +9,11 @@ import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListSc
 import { style } from '../../utils/style';
 import type { CarouselContent } from './CarouselContent';
 import { CarouselScrollButtons } from './CarouselScrollButtons';
+import { SwipeListControlDots } from '../../ui-kit/SwipeListControl/SwipeListControlDots';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
+  showDots?: boolean;
 }
 
 const ITEMS_GAP = 4;
@@ -25,13 +27,13 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     isCyclic = false,
     arrowsPadded = true,
     isPadding = true,
+    showDots = false,
     ...rest
   }) => {
-    const { blocks: childBlocks } = rest.block || {};
-    const count = itemCount || childBlocks?.length || 0;
+    const { blocks: childBlocks = [] } = rest.block || {};
+    const count = itemCount || childBlocks?.length;
 
     const [activeIndex, setActiveIndex] = useState<number>(Math.floor((visibleItemCount || 0) / 2));
-
     const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
     const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
 
@@ -39,7 +41,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
       itemCount: count,
       isCyclic,
     });
-
+    const [dotsActiveIndex] = scroll.visibleIndicesRange;
     const isBankHistoryCarousel = childBlocks && childBlocks[0]?.type === 'CarouselBankHistoryCard';
 
     return (
@@ -80,6 +82,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             activeIndex={activeIndex}
             itemCount={count}
           />
+          {showDots ? renderDots(containerRef, dotsActiveIndex, itemCount) : null}
         </div>
       </BlockWrapper>
     );
@@ -95,8 +98,22 @@ Carousel.childrenTypes = [
   'CarouselProgramsCard',
   'CarouselRecommendationCard',
   'CarouselTariffsCard',
+  'CarouselRichTextCard',
   'CarouselInvestmentCard',
   'CarouselEventCard',
 ];
 
 const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');
+
+const renderDots = (
+  containerRef: { current: HTMLDivElement | null },
+  dotsActiveIndex: number,
+  itemCount: number | undefined,
+) => (
+  <SwipeListControlDots
+    containerRef={containerRef}
+    activeIndex={dotsActiveIndex}
+    dotCount={itemCount}
+    listType={'horizontal-list'}
+  />
+);

package/src/components/Carousel/CarouselContent.ts

@@ -6,12 +6,12 @@ import type { UniBlockContent } from '../../model/JSXBlock';
 export type CarouselContent = UniBlockContent & {
   /**
    * @title Количество видимых карточек
-   * @enumNames ["auto", "1", "2", "3"]
+   * @enumNames ["auto", "1", "2", "3", "4"]
    */
   visibleItemCount?: 0 | 1 | 2 | 3 | 4;
-  /** @title Добавление  блюра на стрелках*/
+  /** @title Добавление блюра на стрелках*/
   isBlur?: boolean;
-  /** @title Добавление  отступа на стрелках */
+  /** @title Добавление отступа на стрелках */
   arrowsPadded?: boolean;
   /** @title Цикличность */
   isCyclic?: boolean;

package/src/components/Carousel/CarouselScrollButtons.tsx

@@ -15,8 +15,8 @@ interface CarouselScrollButtonsProps {
   itemCount: number;
 }
 
-const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-50';
-const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
+const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-40';
+const blurBaseStyle = 'absolute top-0 bottom-0 z-40 w-[84px] pointer-events-none';
 
 export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
   ({

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
@@ -28,9 +27,12 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             align="text-left"
           />
           {additionalDescription ? (
-            <div className="pt-6">
-              <Paragraph>{additionalDescription}</Paragraph>
-            </div>
+            <Headline
+              className="pt-6"
+              isPadding={false}
+              description={description}
+              align="text-left"
+            />
           ) : null}
         </div>
         {links?.length ? renderLinks(links) : null}
@@ -48,11 +50,13 @@ const renderLinks = (links: LinkProps[]) => {
       isBlur={false}
       isCyclic={true}
       itemCount={itemCount}
+      arrowsPadded={false}
+      showDots={true}
     >
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start"
+          className="w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start"
         >
           {links
             .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)

package/src/components/CarouselRichTextCard/CarouselRichTextCard.example.json

@@ -0,0 +1,6 @@
+{
+  "content": {
+    "richVersion": "striped",
+    "__html": "<h4>Заголовок4</h4><p><br></p><table><thead><tr><th><p>Заголовок 1-1</p></th><th><p>Заголовок 1-2</p></th></tr></thead><tbody><tr><td><p>Описание 1-1</p></td><td><p>Описание 1-2</p></td></tr><tr><td><p>Описание 2-1</p></td><td><p>Описание 2-2</p></td></tr><tr><td><p>Описание 3-1<br></p></td><td><p>Описание 3-2<br></p></td></tr><tr><td><p>Описание 4-1<br></p></td><td><p>Описание 4-2<br></p></td></tr></tbody></table></li>"
+  }
+}

package/src/components/CarouselRichTextCard/CarouselRichTextCard.fixture.tsx

@@ -0,0 +1,24 @@
+import { CarouselRichTextCard } from './CarouselRichTextCard';
+import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent';
+
+export const RICH_CARD: CarouselRichTextCardContent = {
+  __html:
+    '<h4>Заголовок 4</h4><p><br></p>' +
+    '<table>' +
+    '<thead><tr><th><p>Эмитент</p></th><th><p>Код</p></th></tr></thead>' +
+    '<tbody>' +
+    '<tr><td><p>ПАО «Полюс»</p></td><td><p>PLZL</p></td></tr>' +
+    '<tr><td><p>Полиметалл Интернэшнл плс</p></td><td><p>POLY</p></td></tr>' +
+    '<tr><td><p>ПАО «ГМК «Норильский никель»<br></p></td><td><p>GMKN<br></p></td></tr>' +
+    '<tr><td><p>ПАО «Лензолото»<br></p></td><td><p>LNZL<br></p></td></tr>' +
+    '</tbody>' +
+    '</table>',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselRichTextCard {...RICH_CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -0,0 +1,21 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { style } from '../../utils/style';
+import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent';
+
+export interface CarouselRichTextCardProps extends CarouselRichTextCardContent, UniBlockProps {}
+
+export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
+  ({ className = '', __html, richVersion = 'striped', ...rest }) => {
+    return (
+      <BlockWrapper
+        className={style('p-9 border border-gray min-w-96', richVersion, className)}
+        {...rest}
+      >
+        <RichText __html={__html} />
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/CarouselRichTextCard/CarouselRichTextCard.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "__html": {
+      "ui:widget": "html"
+    }
+  }
+}

package/src/components/CarouselRichTextCard/CarouselRichTextCardContent.ts

@@ -0,0 +1,7 @@
+import type { UniBlockContent } from '../../model/JSXBlock';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
+
+/**
+ * @title Карточка c форматированным вводом
+ */
+export type CarouselRichTextCardContent = UniBlockContent & RichTextProps & {};