@redneckz/wildless-cms-uni-blocks 0.6.46 → 0.6.47

package/mobile/src/content-page-repository/transformHTML.ts

@@ -0,0 +1,19 @@
+import rehypeParse from 'rehype-parse/lib';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeStringify from 'rehype-stringify';
+import { unified } from 'unified';
+import { replaceHeadingTags } from './replaceHeadingTags';
+
+export async function transformHTML(html: string | null | undefined): Promise<string> {
+  if (!html) {
+    return '';
+  }
+
+  const result = await unified()
+    .use(rehypeParse)
+    .use(rehypeSanitize)
+    .use(rehypeStringify)
+    .process(html);
+
+  return replaceHeadingTags(result.toString('utf-8'));
+}

package/mobile/src/content-page-repository/transformMarkdown.ts

@@ -1,6 +1,7 @@
 import remarkHtml from 'remark-html';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
+import { replaceHeadingTags } from './replaceHeadingTags';
 
 export async function transformMarkdown(markdown: string | null | undefined): Promise<string> {
   if (!markdown) {
@@ -9,5 +10,5 @@ export async function transformMarkdown(markdown: string | null | undefined): Pr
 
   const result = await unified().use(remarkParse).use(remarkHtml).process(markdown);
 
-  return result.toString('utf-8').replaceAll(/<h(\d)>([^<]*)<\/h\d>/g, '<p class="h$1">$2</p>');
+  return replaceHeadingTags(result.toString('utf-8'));
 }

package/mobile/src/model/BlockVersion.ts

@@ -12,6 +12,12 @@ export type BlockVersion = 'primary' | 'secondary';
  */
 export type BlockVersionWithTransparent = 'transparent' | 'primary' | 'secondary';
 
+/**
+ * @title Цвет блока
+ * @enumNames [ "Основная", "Второстепенная", "Серая"]
+ */
+export type BlockVersionWithGray = 'primary' | 'secondary' | 'gray';
+
 export const VersionStyleMap: Record<BlockVersion, string> = {
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
@@ -28,6 +34,12 @@ export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent,
   secondary: 'bg-primary-main text-white',
 };
 
+export const VersionWithGrayStyleMap: Record<BlockVersionWithGray, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+  gray: 'bg-main-divider text-primary-text',
+};
+
 export const GapStyleMap: Record<GapVersion, string> = {
   XXL: 'gap-12',
   XL: 'gap-10',

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

@@ -47,5 +47,5 @@ const renderButtonIcon = (icon: Picture) => {
   }
   const iconWidth = icon?.size?.width ? `${icon.size.width}` : '24';
 
-  return <Img image={{ ...icon }} width={iconWidth} height="24" asSVG />;
+  return <Img image={icon} width={iconWidth} height="24" asSVG />;
 };

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ImgInner } from './ImgInner';
+import type { ImageProps } from './ImgProps';
 
-import type { Image, ImageProps } from './ImgProps';
-
-export const Img = JSX<ImageProps<Image>>((props) => <ImgInner {...props} isMobile={true} />);
+export const Img = JSX<ImageProps>((props) => <ImgInner {...props} isMobile={true} />);

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -10,14 +10,13 @@ const sourcesComparator = (a: Picture, b: Picture) => {
   return 0;
 };
 
-export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix = '' }) => {
+export const ImgAsPicture = JSX<ImageProps>(
+  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
     if (!image || (!image?.sources && !image?.src)) {
       return null;
     }
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
-    const normalizedPathPrefix = normalizePathPrefix(pathPrefix);
 
     return (
       <picture className={`${pictureStyles} ${className}`}>
@@ -27,7 +26,7 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={addPathPrefixToSrcSet(src, normalizedPathPrefix)}
+                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
@@ -35,7 +34,7 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               ))
           : null}
         {renderImg(
-          { ...image, src: `${normalizedPathPrefix}${image.src}` },
+          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
           imageClassName,
           isMobile,
         )}
@@ -69,10 +68,13 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
 const normalizePathPrefix = (pathPrefix = '') =>
   pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
 
-const addPathPrefixToSrcSet = (srcset = '', pathPrefix = '') =>
+const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
+  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
+
+const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
   srcset
-    .split(',')
-    .map((src) => `${pathPrefix}${src.trim()}`)
+    ?.split(',')
+    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
     .join(', ');
 
 export function formatToMimeType(format: ImgSource['format']): string | undefined {

package/mobile/src/ui-kit/Img/ImgInner.tsx

@@ -1,35 +1,27 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
-import { getIconVersion } from './getIconVersion';
 import { ImgAsPicture } from './ImgAsPicture';
-import type { Image, ImageProps } from './ImgProps';
+import type { ImageProps } from './ImgProps';
 
-export const ImgInner = JSX<ImageProps<Image>>(
+export const ImgInner = JSX<ImageProps>(
   ({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
-    if (!image) {
+    if (!image?.src && !image?.icon) {
       return null;
     }
 
-    // backwards compatibility with existing icons in usage
-    const icon = typeof image === 'string' ? image : image.icon;
-    if (icon || icon === '') {
-      return icon.length ? (
-        <Icon
-          className={className}
-          imageClassName={imageClassName}
-          iconVersion={getIconVersion(image)}
-          name={icon}
-          {...iconProps}
-        />
-      ) : null;
-    }
-
-    return (
+    return image.icon ? (
+      <Icon
+        className={className}
+        imageClassName={imageClassName}
+        iconVersion={image?.iconVersion || 'normal'}
+        name={image.icon}
+        {...iconProps}
+      />
+    ) : (
       <ImgAsPicture
         className={className}
         imageClassName={imageClassName}
-        image={image as Picture}
+        image={image}
         isMobile={isMobile}
         pathPrefix={pathPrefix}
       />

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -1,12 +1,10 @@
 import type { Picture } from '../../model/Picture';
-import type { IconCompatibilityFields, IconName } from '../Icon/IconProps';
+import type { IconCompatibilityFields } from '../Icon/IconProps';
 
-export type Image = Picture | IconName;
-
-export interface ImageContent<T = Picture> {
-  image?: T;
+export interface ImageContent {
+  image?: Picture;
 }
-export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields {
+export interface ImageProps extends ImageContent, IconCompatibilityFields {
   className?: string;
   imageClassName?: string;
   isMobile?: boolean;

package/mobile/src/ui-kit/InnerTable/InnerTableBody.tsx

@@ -30,7 +30,7 @@ export const InnerTableBody = JSX<InnerTableBodyProps>(({ activeTabIndex, items
             >
               {_.title}
               <Img
-                image={hiddenTables[key] ? 'PlusIcon' : 'MinusIcon'}
+                image={{ icon: hiddenTables[key] ? 'PlusIcon' : 'MinusIcon' }}
                 className="absolute right-[22px]"
                 width="24"
                 height="24"

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

@@ -103,7 +103,7 @@ const CloseButton = JSX<CloseButtonProps>(({ close }) => (
       close && close();
     }}
   >
-    <Img image="CloseIcon" width="24" height="24" />
+    <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
   </button>
 ));
 

package/mobile/src/ui-kit/Logo/renderImage.tsx

@@ -1,4 +1,4 @@
-import { BgColorVersion } from '../../model/BgColorVersion';
+import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../Img/Img';
 
@@ -23,6 +23,7 @@ export const renderImage = (
       className={SVG_COLOR[bgColor]}
       width={size?.width}
       height={size?.height}
+      pathPrefix="/wcms-resources/"
       asSVG
     />
   ) : (

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

@@ -0,0 +1,8 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { RichTextProps } from './RichTextProps';
+
+export const RichText = JSX<RichTextProps>((props) => {
+  const { __html = '' } = props;
+
+  return <div className="md-container" dangerouslySetInnerHTML={{ __html }} />;
+});

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

@@ -0,0 +1,6 @@
+type HTML = string;
+
+export interface RichTextProps {
+  /** @title Текст */
+  __html?: HTML;
+}

package/mobile/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -20,7 +20,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
     <form className={`font-sans relative ${className}`}>
       <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
         <div className={LoupeIconClassName}>
-          <Img image="LoupeIcon" width="24" height="24" />
+          <Img image={{ icon: 'LoupeIcon' }} width="24" height="24" />
         </div>
         {term ? null : (
           <label
@@ -49,7 +49,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
             setTerm('');
           }}
         >
-          <Img image="CloseIcon" width="24" height="24" />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" />
         </button>
       ) : (
         <Button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.46",
+  "version": "0.6.47",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -121,6 +121,9 @@
   "dependencies": {
     "@redneckz/uni-jsx": "^2.1.7",
     "glob": "^8.0.3",
+    "rehype-parse": "^8.0.4",
+    "rehype-sanitize": "^5.0.1",
+    "rehype-stringify": "^9.0.3",
     "remark-html": "^15.0.1",
     "remark-parse": "^10.0.1",
     "sharp": "^0.30.6",

package/src/common.css

@@ -152,30 +152,47 @@ html {
 }
 
 @layer components {
-  .md-container .h1 {
+  [data-theme='eo'] .md-container ul {
+    @apply list-none;
+  }
+
+  [data-theme='eo'] .md-container ul > li::before {
+    @apply text-primary-main mr-3 font-bold;
+    content: '🗸';
+  }
+
+  .md-container {
+    @apply text-l font-sans;
+  }
+
+  .md-container p.h1 {
     @apply text-h1;
   }
 
-  .md-container .h2 {
+  .md-container p.h2 {
     @apply text-h2;
   }
 
-  .md-container .h3 {
+  .md-container p.h3 {
     @apply text-h3;
   }
 
-  .md-container .h4 {
+  .md-container p.h4 {
     @apply text-h4;
   }
 
-  .md-container .h5 {
+  .md-container p.h5 {
     @apply text-h5;
   }
 
-  .md-container .h6 {
+  .md-container p.h6 {
     @apply text-h6;
   }
 
+  .md-container p {
+    @apply text-l font-light;
+  }
+
   .md-container ul {
     @apply list-inside list-disc;
   }
@@ -184,10 +201,6 @@ html {
     @apply list-inside list-decimal;
   }
 
-  .md-container p {
-    @apply text-l font-light;
-  }
-
   .md-container li {
     @apply text-l font-light;
   }
@@ -199,6 +212,10 @@ html {
   .md-container a {
     @apply text-primary-main;
   }
+
+  .md-container strong {
+    @apply font-bold;
+  }
 }
 
 /*

package/src/components/AccordionItem/AccordionItem.tsx

@@ -47,6 +47,12 @@ const FoldButton = JSX<FoldButtonProps>(({ label, icon, onClick }) => (
     <Text size="text-xl" font="font-medium">
       {label}
     </Text>
-    <Img image={icon} className="text-primary-main flex-shrink-0" width="24" height="24" asSVG />
+    <Img
+      image={{ icon }}
+      className="text-primary-main flex-shrink-0"
+      width="24"
+      height="24"
+      asSVG
+    />
   </button>
 ));

package/src/components/Blocks.ts

@@ -46,6 +46,7 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
+import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
 import { StepsBlock } from './StepsBlock/StepsBlock';
@@ -60,12 +61,12 @@ export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   BenefitsBlock,
-  BusinessBlock,
-  ButtonBlock,
   Bonus,
   BonusBenefitsBlock,
-  CardTransfer,
+  BusinessBlock,
+  ButtonBlock,
   Calculator,
+  CardTransfer,
   Carousel,
   CarouselCard,
   CarouselCatalogCard,
@@ -76,8 +77,8 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselTariffsCard,
   Catalog,
-  ContactsBlock,
   ComparisonTable,
+  ContactsBlock,
   ErrorBlock,
   ExchangeRateTile,
   Footer,
@@ -93,6 +94,9 @@ export const Blocks: BlocksRegistry = {
   MiniGallery,
   MobileAppTile,
   OfficeMap,
+  OfficeServicesBlock,
+  OtherProducts,
+  OtherProductsItem,
   ParagraphBlock,
   PictureText,
   Placeholder,
@@ -100,9 +104,8 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
-  OfficeServicesBlock,
-  OtherProducts,
-  OtherProductsItem,
+  Recommendation,
+  RichTextBlock,
   RollupItem,
   SafeDepositRental,
   StepsBlock,
@@ -112,5 +115,4 @@ export const Blocks: BlocksRegistry = {
   Tile,
   VerticalLayout,
   Video,
-  Recommendation,
 };

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -28,13 +28,9 @@ const renderItem = (item: BusinessCardItemProps, key: string) => {
   return (
     <li key={key} className="flex items-center gap-3.5 mb-3 last:mb-0">
       {icon?.icon ? (
-        <Img
-          className={`w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider`}
-          image={icon.icon}
-          asSVG
-        />
+        <Img image={icon} className="w-12 h-12 min-w-12 p-3 rounded-full bg-main-divider" asSVG />
       ) : null}
-      {icon?.src ? <Img image={icon.icon} /> : null}
+      {icon?.src ? <Img image={icon} /> : null}
       <span className="text-xl-light">{text}</span>
     </li>
   );

package/src/components/Carousel/Carousel.tsx

@@ -57,9 +57,11 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 Carousel.childrenTypes = [
   'CarouselCard',
   'CarouselCatalogCard',
-  'CarouselTariffsCard',
+  'CarouselInvestmentCard',
   'CarouselProductCard',
   'CarouselProgramsCard',
+  'CarouselRecommendationCard',
+  'CarouselTariffsCard',
   'CarouselInvestmentCard',
 ];
 

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

@@ -44,4 +44,13 @@ export default {
       />
     </div>
   ),
+  gray: (
+    <div className="container grid grid-cols-12 mb-1">
+      <CarouselRecommendationCard
+        className="col-span-4"
+        version="gray"
+        {...CAROUSEL_RECOMMENDATION_CARD}
+      />
+    </div>
+  ),
 };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -7,7 +7,9 @@ import { JSX } from '@redneckz/uni-jsx';
 import { List } from '../../ui-kit/List/List';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { SocialMedia } from '../Footer/SocialMedia';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { BlockVersion, BlockVersionWithGray } from '../../model/BlockVersion';
+import { VersionWithGrayStyleMap } from '../../model/BlockVersion';
+
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 import type { UniBlockProps } from '../../model/JSXBlock';
 
@@ -35,8 +37,8 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={`relative text-left border border-solid box-border p-7 min-w-[524px]
-        ${BorderVersionStyleMap[version]}
-        ${VersionStyleMap[version]}
+        ${BorderVersionStyleMap[getOmitVersion(version)]}
+        ${VersionWithGrayStyleMap[version]}
         ${className}`}
         {...rest}
       >
@@ -51,7 +53,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
               />
             ) : null}
             {socialMedia.length ? (
-              <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={getOmitVersion(version)}
+              />
             ) : null}
             {button?.text ? <div className="pt-2 mt-16">{renderButton({ button })}</div> : null}
           </div>
@@ -60,3 +66,6 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     );
   },
 );
+
+const getOmitVersion = (version: BlockVersionWithGray): BlockVersion =>
+  version === 'gray' ? 'primary' : version;

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -1,4 +1,4 @@
-import type { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersionWithGray } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkCommonProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
@@ -41,5 +41,5 @@ export interface CarouselRecommendationCardContent extends HeadlineCommonProps,
    * }
    */
   button?: ButtonProps;
-  version?: BlockVersion;
+  version?: BlockVersionWithGray;
 }

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -4,6 +4,7 @@ import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m-light text-secondary-text';
+const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-11`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -20,8 +21,8 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
     <thead>
       <tr>
         <th className={TABLE_HEAD_STYLE}>Валюта</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Купить</th>
-        <th className={`${TABLE_HEAD_STYLE} pl-11`}>Продать</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Купить</th>
+        <th className={TABLE_HEAD_STYLE_WITH_PL}>Продать</th>
       </tr>
     </thead>
     <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>

package/src/components/Header/HeaderBurger.tsx

@@ -23,11 +23,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
           className="absolute top-4 right-4 border-none bg-transparent cursor-pointer"
           onClick={onClick}
         >
-          <Img image="CloseIcon" width="24" height="24" asSVG />
+          <Img image={{ icon: 'CloseIcon' }} width="24" height="24" asSVG />
         </button>
         <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
-            image="GeolocationIcon"
+            image={{ icon: 'GeolocationIcon' }}
             width="20"
             height="20"
             className="text-primary-main box-border mr-2"

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -132,7 +132,7 @@ function renderDoneIcon(isActive: boolean) {
   return isActive ? (
     <Img
       className={`h-6 w-6 min-w-6 min-h-6 absolute right-4 top-4`}
-      image="DoneIcon"
+      image={{ icon: 'DoneIcon' }}
       width="24"
       height="24"
     />

package/src/components/ProductTile/ProductTile.ui.json

@@ -2,7 +2,7 @@
   "content": {
     "benefits": {
       "items": {
-        "md": {
+        "__html": {
           "ui:widget": "html"
         },
         "type": {

package/src/components/ProductTile/ProductTileContent.ts

@@ -2,7 +2,7 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
+import type { RichTextProps } from '../../ui-kit/RichText/RichTextProps';
 
 /**
  * @title Стандартный
@@ -16,9 +16,9 @@ type TextBenefit = DescriptionProps &
 /**
  * @title Форматированный текст
  */
-type MarkdownTextContent = MarkdownTextProps & {
-  /** @default md */
-  type: 'md';
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
 };
 
 /**
@@ -27,7 +27,7 @@ type MarkdownTextContent = MarkdownTextProps & {
  *  "type": "default"
  * }
  */
-export type Benefit = TextBenefit | MarkdownTextContent;
+export type Benefit = TextBenefit | RichText;
 
 /**
  * @title Продуктовая плитка

package/src/components/ProductTile/renderBenefit.tsx

@@ -1,5 +1,5 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { Text } from '../../ui-kit/Text/Text';
 import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { assertUnreachable } from '../../utils/assertUnreachable';
@@ -17,7 +17,7 @@ export const renderBenefit =
   (benefit: Benefit, i: number) => {
     const { type } = benefit;
 
-    if (!(type === 'default' || type === 'md')) {
+    if (!(type === 'default' || type === 'rte')) {
       return null;
     }
 
@@ -31,8 +31,8 @@ export const renderBenefit =
             {benefit.description}
           </Text>,
         ];
-      case 'md':
-        return <MarkdownText md={benefit.md} />;
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
       default:
         assertUnreachable(benefit);
     }