@redneckz/wildless-cms-uni-blocks 0.7.7 → 0.7.9

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlDots.js

@@ -8,7 +8,7 @@ const activeDotStyles = {
     'horizontal-list': 'w-6',
     'vertical-list': 'h-6',
 };
-const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
+const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 export const SwipeListControlDots = JSX(({ containerRef, activeIndex, dotCount = 0, listType = 'horizontal-list' }) => {
     const handleClick = (idx) => {

package/mobile/lib/ui-kit/SwipeListControl/SwipeListControlDots.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,oBAAoB;IACvC,eAAe,EAAE,sDAAsD;CACxE,CAAC;AAEF,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,KAAK;IACxB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,MAAM,QAAQ,GACZ,yGAAyG,CAAC;AAE5G,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAS9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,iBAAiB,EAAE,EAAE,EAAE;IAC5E,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;QAClC,IAAI,GAAG,KAAK,WAAW,IAAI,YAAY,EAAE,OAAO,EAAE;YAChD,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;gBACjD,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAE,cAAc,eAAe,CAAC,QAAQ,CAAC,EAAE,YACtD,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CACtD,cAEE,SAAS,EAAE,GAAG,QAAQ,IACpB,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBACpD,EAAE,EACF,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAN1B,MAAM,CAAC,GAAG,CAAC,CAOhB,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}
+{"version":3,"file":"SwipeListControlDots.js","sourceRoot":"","sources":["../../../src/ui-kit/SwipeListControl/SwipeListControlDots.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAGxC,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,oBAAoB;IACvC,eAAe,EAAE,sDAAsD;CACxE,CAAC;AAEF,MAAM,eAAe,GAAyC;IAC5D,iBAAiB,EAAE,KAAK;IACxB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,MAAM,QAAQ,GACZ,yIAAyI,CAAC;AAE5I,MAAM,gBAAgB,GAAG,oBAAoB,CAAC;AAS9C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CACrC,CAAC,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,iBAAiB,EAAE,EAAE,EAAE;IAC5E,MAAM,WAAW,GAAG,CAAC,GAAW,EAAE,EAAE;QAClC,IAAI,GAAG,KAAK,WAAW,IAAI,YAAY,EAAE,OAAO,EAAE;YAChD,YAAY,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,cAAc,CAAC;gBACjD,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;IACH,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,SAAS,EAAE,cAAc,eAAe,CAAC,QAAQ,CAAC,EAAE,YACtD,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAW,EAAE,EAAE,CAAC,CACtD,cAEE,SAAS,EAAE,GAAG,QAAQ,IACpB,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,gBACpD,EAAE,EACF,IAAI,EAAC,QAAQ,uBAEb,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,IAN1B,MAAM,CAAC,GAAG,CAAC,CAOhB,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACX,CAAC,CACF,CAAC"}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -45,7 +45,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <span className="mb-2">{description}</span> : null}
+            {description ? (
+              <span className="mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]">
+                {description}
+              </span>
+            ) : null}
             {items.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

package/mobile/src/components/ErrorBlock/ErrorBlock.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ErrorBlockContent } from './ErrorBlockContent';
+import { style } from '../../utils/style';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
@@ -19,9 +20,17 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   return null;
 };
 
+const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
+
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button }) => (
-    <section className={`flex flex-col justify-center items-center mt-12 ${className}`}>
+    <section
+      className={style(
+        'flex flex-col justify-center items-center',
+        getErrorBlockStyle(button?.text as string),
+        className,
+      )}
+    >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (

package/mobile/src/components/Header/DropdownMenu.tsx

@@ -43,18 +43,22 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
         className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
-        {items?.map((item, i) => (
-          <a
-            key={item.href || String(i)}
-            className={style(
-              'text-l-light pb-4 hover:text-primary-main',
-              item === activeItem ? 'text-primary-main' : '',
-            )}
-            {...link(item)}
-          >
-            {item.text}
-          </a>
-        ))}
+        {items?.map((item, i) => {
+          const { text, ...linkProps } = item;
+
+          return (
+            <a
+              key={item.href || String(i)}
+              className={style(
+                'text-l-light pb-4 hover:text-primary-main',
+                item === activeItem ? 'text-primary-main' : '',
+              )}
+              {...link(linkProps)}
+            >
+              {text}
+            </a>
+          );
+        })}
       </div>
     </div>
   );

package/mobile/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -45,4 +45,6 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
   },
 );
 
-OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
+OtherProductsItem.childrenTypes = {
+  exclude: ['OtherProductsItem'],
+};

package/mobile/src/components/PictureText/PictureText.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -39,17 +37,6 @@ export const PictureText = JSX<PictureTextProps>(
   ),
 );
 
-const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
-  (
-    <BenefitItem
-      key={String(i)}
-      icon={benefit.icon}
-      label={benefit.label}
-      description={benefit.description}
-      version={version}
-    />
-  );
-
 function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">

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

@@ -5,6 +5,16 @@
     },
     "monthLimit": {
       "ui:field": "number"
+    },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
     }
   }
 }

package/mobile/src/components/PictureText/renderBenefit.tsx

@@ -0,0 +1,33 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+
+export const renderBenefit =
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (version: BlockVersion) => (benefit: ComplexBenefitProps, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return (
+          <BenefitItem
+            key={String(i)}
+            icon={benefit.icon}
+            label={benefit.label}
+            description={benefit.description}
+            version={version}
+          />
+        );
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/mobile/src/components/ProductTile/renderBenefit.tsx

@@ -29,7 +29,11 @@ export const renderBenefit =
           </Text>,
         ];
       case 'rte':
-        return <RichText __html={benefit.__html} />;
+        return (
+          <div className="col-span-2">
+            <RichText __html={benefit.__html} />
+          </div>
+        );
       default:
         assertUnreachable(benefit);
     }

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

@@ -2,7 +2,7 @@
   "content": {
     "listType": "vertical-list"
   },
-  "style": ["col-span-12", "h-96"],
+  "style": ["col-span-12"],
   "type": "SwipeListControlBlock",
   "blocks": [
     {

package/mobile/src/ui-kit/BenefitItem/BenefitItemProps.ts

@@ -1,7 +1,8 @@
-import type { IconProps } from '../../model/Picture';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { IconVersion } from '../../model/IconVersion';
 import type { DescriptionProps, LabelProps } from '../../model/HeadlineType';
+import type { IconVersion } from '../../model/IconVersion';
+import type { IconProps } from '../../model/Picture';
+import { RichTextProps } from '../RichText/RichTextProps';
 
 export interface BenefitItemCommonProps {
   /** @hidden */
@@ -14,10 +15,34 @@ export interface BenefitItemCommonProps {
 
 export type BenefitItemProps = DescriptionProps & LabelProps & IconProps;
 
+/**
+ * @title Стандартный бенефит
+ */
+type DefaultBenefit = BenefitItemProps & {
+  /** @default default */
+  type: 'default';
+};
+
+/**
+ * @title Форматированный текст
+ */
+type RichText = RichTextProps & {
+  /** @default rte */
+  type: 'rte';
+};
+
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export type ComplexBenefitProps = DefaultBenefit | RichText;
+
 /**
  * @title Преимущество
  */
 export type BenefitsProps = BenefitItemCommonProps & {
   /** @title Список преимуществ */
-  benefits?: BenefitItemProps[];
+  benefits?: ComplexBenefitProps[];
 };

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

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
+
+interface SlideCheckboxProps {
+  checked?: boolean;
+  text?: string;
+  onClick?: () => void;
+}
+export const SlideCheckbox = JSX<SlideCheckboxProps>(({ checked, text, onClick }) => (
+  <div
+    role="checkbox"
+    aria-checked={checked}
+    className="flex justify-start items-center w-full cursor-pointer mb-4"
+    onClick={() => onClick && onClick()}
+  >
+    <div
+      className={`relative duration-300 w-9 h-5 mr-3 rounded rounded-2xl ${
+        checked ? 'bg-primary-main' : 'bg-main-divider'
+      }`}
+    >
+      <div
+        className={`absolute opacity-80 duration-500 top-0.5 w-4 h-4 bg-white rounded rounded-full ${
+          checked ? 'left-[50%]' : 'left-[5%]'
+        }`}
+      />
+    </div>
+    <div>
+      <Text size="text-m" font="font-light" color="text-primary-text">
+        {text}
+      </Text>
+    </div>
+  </div>
+));

package/mobile/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -12,7 +12,7 @@ const activeDotStyles: Record<SwipeListControlType, string> = {
 };
 
 const dotStyle =
-  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
+  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white group-data-transparent:bg-white';
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 

package/package.json

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

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

@@ -65,6 +65,7 @@ export default {
         className="col-span-4"
         version="gray"
         {...CAROUSEL_RECOMMENDATION_CARD}
+        description="На портале представлено множество ипотечных программ, в том числе и сельская ипотека"
       />
     </div>
   ),

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -45,7 +45,11 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <span className="mb-2">{description}</span> : null}
+            {description ? (
+              <span className="mb-2 group-data-gray:text-secondary-text group-data-gray:max-w-[265px]">
+                {description}
+              </span>
+            ) : null}
             {items.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { ErrorBlockContent } from './ErrorBlockContent';
+import { style } from '../../utils/style';
 
 export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
 
@@ -19,9 +20,17 @@ const renderErrorContent = (error: ErrorBlockContent['error']) => {
   return null;
 };
 
+const getErrorBlockStyle = (text: string) => (text ? 'py-20 pt-3 pb-1' : 'mb-16 pb-2 mt-24 pt-3');
+
 export const ErrorBlock = JSX<ErrorBlockProps>(
   ({ className = '', title, subtitle, error, button }) => (
-    <section className={`flex flex-col justify-center items-center mt-12 ${className}`}>
+    <section
+      className={style(
+        'flex flex-col justify-center items-center',
+        getErrorBlockStyle(button?.text as string),
+        className,
+      )}
+    >
       <div className="flex justify-center py-20">{renderErrorContent(error)}</div>
       {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
       {subtitle ? (

package/src/components/Header/DropdownMenu.tsx

@@ -43,18 +43,22 @@ export const DropdownMenu = JSX<DropdownMenuProps>(({ className = '', items, act
         className={style('flex flex-col rounded-md bg-white p-6 pb-2', visible ? '' : 'hidden')}
         aria-hidden={!visible}
       >
-        {items?.map((item, i) => (
-          <a
-            key={item.href || String(i)}
-            className={style(
-              'text-l-light pb-4 hover:text-primary-main',
-              item === activeItem ? 'text-primary-main' : '',
-            )}
-            {...link(item)}
-          >
-            {item.text}
-          </a>
-        ))}
+        {items?.map((item, i) => {
+          const { text, ...linkProps } = item;
+
+          return (
+            <a
+              key={item.href || String(i)}
+              className={style(
+                'text-l-light pb-4 hover:text-primary-main',
+                item === activeItem ? 'text-primary-main' : '',
+              )}
+              {...link(linkProps)}
+            >
+              {text}
+            </a>
+          );
+        })}
       </div>
     </div>
   );

package/src/components/OtherProductsItem/OtherProductsItem.tsx

@@ -45,4 +45,6 @@ export const OtherProductsItem: JSXBlock<OtherProductsItemProps> = JSX<OtherProd
   },
 );
 
-OtherProductsItem.childrenTypes = []; // All types of blocks are suitable
+OtherProductsItem.childrenTypes = {
+  exclude: ['OtherProductsItem'],
+};

package/src/components/PictureText/PictureText.fixture.tsx

@@ -29,6 +29,14 @@ const imageInsurance: Picture = {
   ],
 };
 
+const imageMonitor: Picture = {
+  src: 'monitor.png',
+  format: 'webp',
+  alt: 'Управление несколькими счетами',
+  size: {
+    width: 420,
+  },
+};
 export const PICTURE_TEXT: PictureTextContent = {
   title: 'Обменивайте бонусы на путешествия',
   description:
@@ -36,11 +44,13 @@ export const PICTURE_TEXT: PictureTextContent = {
     'бонусные баллы на авиа и ж/д билеты, бронирование отелей и прокат автомобилей.',
   benefits: [
     {
+      type: 'default',
       label: 'Кредит по одному документу',
       description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
       icon: { icon: 'DocumentTextIcon' },
     },
     {
+      type: 'default',
       label: 'Кредит на общих условиях',
       description: 'До 5 млн ₽ на общих условиях получения кредита',
       icon: { icon: 'DocumentTextIcon' },
@@ -54,19 +64,23 @@ export const INSURANCE_TEXT: PictureTextContent = {
   description: 'Покрываемые риски программы «Защита вас и ваших близких»',
   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' },
     },
@@ -75,6 +89,24 @@ export const INSURANCE_TEXT: PictureTextContent = {
   sum: 500000,
 };
 
+export const BENEFITS_HTML_TEXT: PictureTextContent = {
+  title: '',
+  benefits: [
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты  контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+    {
+      type: 'rte',
+      __html:
+        '<p class="h3">Управление несколькими счетами</p><p>Контролируйте баланс, пересылайте реквизиты контрагентам и установите любимый счёт для регулярных платежей</p>',
+    },
+  ],
+
+  image: imageMonitor,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -96,4 +128,9 @@ export default {
       <PictureText className="col-span-12" {...INSURANCE_TEXT} monthLimit={25000} />
     </div>
   ),
+  'benefits as html': (
+    <div className="container grid grid-cols-12">
+      <PictureText className="col-span-12" {...BENEFITS_HTML_TEXT} />
+    </div>
+  ),
 };

package/src/components/PictureText/PictureText.tsx

@@ -1,13 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
+import { renderBenefit } from './renderBenefit';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -39,17 +37,6 @@ export const PictureText = JSX<PictureTextProps>(
   ),
 );
 
-const renderBenefit = (version: BlockVersion) => (benefit: BenefitItemProps, i: number) =>
-  (
-    <BenefitItem
-      key={String(i)}
-      icon={benefit.icon}
-      label={benefit.label}
-      description={benefit.description}
-      version={version}
-    />
-  );
-
 function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
   return sum || monthLimit ? (
     <div className="bg-main-divider rounded-md flex mt-7 gap-6 px-5 py-4">

package/src/components/PictureText/PictureText.ui.json

@@ -5,6 +5,16 @@
     },
     "monthLimit": {
       "ui:field": "number"
+    },
+    "benefits": {
+      "items": {
+        "__html": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
     }
   }
 }

package/src/components/PictureText/renderBenefit.tsx

@@ -0,0 +1,33 @@
+import { BlockVersion } from '../../model/BlockVersion';
+import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { ComplexBenefitProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import { RichText } from '../../ui-kit/RichText/RichText';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+
+export const renderBenefit =
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (version: BlockVersion) => (benefit: ComplexBenefitProps, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'rte')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return (
+          <BenefitItem
+            key={String(i)}
+            icon={benefit.icon}
+            label={benefit.label}
+            description={benefit.description}
+            version={version}
+          />
+        );
+      case 'rte':
+        return <RichText __html={benefit.__html} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/src/components/ProductTile/renderBenefit.tsx

@@ -29,7 +29,11 @@ export const renderBenefit =
           </Text>,
         ];
       case 'rte':
-        return <RichText __html={benefit.__html} />;
+        return (
+          <div className="col-span-2">
+            <RichText __html={benefit.__html} />
+          </div>
+        );
       default:
         assertUnreachable(benefit);
     }

package/src/components/SwipeListControlBlock/SwipeListControlBlock.example.json

@@ -2,7 +2,7 @@
   "content": {
     "listType": "vertical-list"
   },
-  "style": ["col-span-12", "h-96"],
+  "style": ["col-span-12"],
   "type": "SwipeListControlBlock",
   "blocks": [
     {

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -41,4 +41,21 @@ export default {
       />
     </div>
   ),
+  transparent: (
+    <div className="container grid grid-cols-12 p-4">
+      <SwipeListControlBlock
+        className="col-span-12"
+        block={{
+          type: 'SwipeListControlBlock',
+          blocks: [
+            { type: 'ProductTile', content: { ...PRODUCT_TILE, version: '' } },
+            { type: 'ProductTile', content: { ...PRODUCT_TILE, version: '' } },
+          ],
+        }}
+        listType="vertical-list"
+        options={options}
+        version="transparent"
+      />
+    </div>
+  ),
 };