@redneckz/wildless-cms-uni-blocks 0.3.18 → 0.3.19

package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.d.ts

@@ -0,0 +1,30 @@
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+/** @title Кнопка под слайдом */
+interface ProductGalleryNav {
+    /** @title Заголовок */
+    title: string;
+    /** @title Описание */
+    description: string;
+}
+/**
+ * @title Слайд
+ */
+export interface ProductSlide {
+    /** @title Превью содержимого слайда на навигации */
+    nav?: ProductGalleryNav;
+    /** @title Содержимое слайда */
+    productBlock: ProductBlockInnerContent;
+}
+/**
+ * @title Продуктовая галерея
+ */
+export interface ProductGalleryGreenContent {
+    /**
+     * @title Задержка
+     * @hidden //! temporary not used
+     */
+    duration?: number;
+    /** @title Слайды */
+    slides?: ProductSlide[];
+}
+export {};

package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ProductGalleryGreenContent.js.map

package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductGalleryGreenContent.js","sourceRoot":"","sources":["../../../src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts"],"names":[],"mappings":""}

package/mobile/lib/icons/IconName.d.ts

@@ -1,6 +1,7 @@
 export declare enum IconMap {
     ActualBalanceIcon = "ActualBalanceIcon",
     AppleIcon = "AppleIcon",
+    ArrowsRewindRight = "ArrowsRewindRight",
     AtmIcon = "AtmIcon",
     BankIcon = "BankIcon",
     BurgerIcon = "BurgerIcon",
@@ -77,7 +78,7 @@ export declare enum IconMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "ArrowsRewindRight", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
-export declare type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";
+export declare type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "ArrowsRewindRight" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";

package/mobile/lib/icons/IconName.js

@@ -3,6 +3,7 @@ export var IconMap;
 (function (IconMap) {
     IconMap["ActualBalanceIcon"] = "ActualBalanceIcon";
     IconMap["AppleIcon"] = "AppleIcon";
+    IconMap["ArrowsRewindRight"] = "ArrowsRewindRight";
     IconMap["AtmIcon"] = "AtmIcon";
     IconMap["BankIcon"] = "BankIcon";
     IconMap["BurgerIcon"] = "BurgerIcon";

package/mobile/lib/icons/IconName.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconName.js","sourceRoot":"","sources":["../../src/icons/IconName.ts"],"names":[],"mappings":"AACA,0BAA0B;AAE1B,MAAM,CAAN,IAAY,OAEX;AAFD,WAAY,OAAO;IACjB,kDAAuC,CAAA;IAAE,kCAAuB,CAAA;IAAE,8BAAmB,CAAA;IAAE,gCAAqB,CAAA;IAAE,oCAAyB,CAAA;IAAE,8CAAmC,CAAA;IAAE,0CAA+B,CAAA;IAAE,oDAAyC,CAAA;IAAE,wCAA6B,CAAA;IAAE,gDAAqC,CAAA;IAAE,kDAAuC,CAAA;IAAE,gCAAqB,CAAA;IAAE,sCAA2B,CAAA;IAAE,wCAA6B,CAAA;IAAE,8CAAmC,CAAA;IAAE,8CAAmC,CAAA;IAAE,kCAAuB,CAAA;IAAE,kCAAuB,CAAA;IAAE,sDAA2C,CAAA;IAAE,8CAAmC,CAAA;IAAE,kDAAuC,CAAA;IAAE,8BAAmB,CAAA;IAAE,gDAAqC,CAAA;IAAE,gDAAqC,CAAA;IAAE,oCAAyB,CAAA;IAAE,kCAAuB,CAAA;IAAE,0DAA+C,CAAA;IAAE,8CAAmC,CAAA;IAAE,wDAA6C,CAAA;IAAE,gCAAqB,CAAA;IAAE,8CAAmC,CAAA;IAAE,kCAAuB,CAAA;IAAE,oCAAyB,CAAA;IAAE,8BAAmB,CAAA;IAAE,gCAAqB,CAAA;IAAE,0CAA+B,CAAA;IAAE,oDAAyC,CAAA;IAAE,wCAA6B,CAAA;IAAE,8BAAmB,CAAA;IAAE,kCAAuB,CAAA;IAAE,4CAAiC,CAAA;IAAE,kCAAuB,CAAA;IAAE,8BAAmB,CAAA;IAAE,kCAAuB,CAAA;IAAE,oDAAyC,CAAA;IAAE,kDAAuC,CAAA;IAAE,oCAAyB,CAAA;IAAE,oCAAyB,CAAA;IAAE,4BAAiB,CAAA;IAAE,wCAA6B,CAAA;IAAE,sDAA2C,CAAA;IAAE,wDAA6C,CAAA;IAAE,kEAAuD,CAAA;IAAE,gDAAqC,CAAA;IAAE,4CAAiC,CAAA;IAAE,gCAAqB,CAAA;IAAE,gDAAqC,CAAA;IAAE,sCAA2B,CAAA;IAAE,4CAAiC,CAAA;IAAE,gCAAqB,CAAA;IAAE,4CAAiC,CAAA;IAAE,wCAA6B,CAAA;IAAE,4CAAiC,CAAA;IAAE,wCAA6B,CAAA;IAAE,wCAA6B,CAAA;IAAE,wCAA6B,CAAA;IAAE,gCAAqB,CAAA;IAAE,4BAAiB,CAAA;IAAE,4CAAiC,CAAA;IAAE,0CAA+B,CAAA;IAAE,oCAAyB,CAAA;IAAE,sDAA2C,CAAA;AACtxE,CAAC,EAFW,OAAO,KAAP,OAAO,QAElB"}
+{"version":3,"file":"IconName.js","sourceRoot":"","sources":["../../src/icons/IconName.ts"],"names":[],"mappings":"AACA,0BAA0B;AAE1B,MAAM,CAAN,IAAY,OAEX;AAFD,WAAY,OAAO;IACjB,kDAAuC,CAAA;IAAE,kCAAuB,CAAA;IAAE,kDAAuC,CAAA;IAAE,8BAAmB,CAAA;IAAE,gCAAqB,CAAA;IAAE,oCAAyB,CAAA;IAAE,8CAAmC,CAAA;IAAE,0CAA+B,CAAA;IAAE,oDAAyC,CAAA;IAAE,wCAA6B,CAAA;IAAE,gDAAqC,CAAA;IAAE,kDAAuC,CAAA;IAAE,gCAAqB,CAAA;IAAE,sCAA2B,CAAA;IAAE,wCAA6B,CAAA;IAAE,8CAAmC,CAAA;IAAE,8CAAmC,CAAA;IAAE,kCAAuB,CAAA;IAAE,kCAAuB,CAAA;IAAE,sDAA2C,CAAA;IAAE,8CAAmC,CAAA;IAAE,kDAAuC,CAAA;IAAE,8BAAmB,CAAA;IAAE,gDAAqC,CAAA;IAAE,gDAAqC,CAAA;IAAE,oCAAyB,CAAA;IAAE,kCAAuB,CAAA;IAAE,0DAA+C,CAAA;IAAE,8CAAmC,CAAA;IAAE,wDAA6C,CAAA;IAAE,gCAAqB,CAAA;IAAE,8CAAmC,CAAA;IAAE,kCAAuB,CAAA;IAAE,oCAAyB,CAAA;IAAE,8BAAmB,CAAA;IAAE,gCAAqB,CAAA;IAAE,0CAA+B,CAAA;IAAE,oDAAyC,CAAA;IAAE,wCAA6B,CAAA;IAAE,8BAAmB,CAAA;IAAE,kCAAuB,CAAA;IAAE,4CAAiC,CAAA;IAAE,kCAAuB,CAAA;IAAE,8BAAmB,CAAA;IAAE,kCAAuB,CAAA;IAAE,oDAAyC,CAAA;IAAE,kDAAuC,CAAA;IAAE,oCAAyB,CAAA;IAAE,oCAAyB,CAAA;IAAE,4BAAiB,CAAA;IAAE,wCAA6B,CAAA;IAAE,sDAA2C,CAAA;IAAE,wDAA6C,CAAA;IAAE,kEAAuD,CAAA;IAAE,gDAAqC,CAAA;IAAE,4CAAiC,CAAA;IAAE,gCAAqB,CAAA;IAAE,gDAAqC,CAAA;IAAE,sCAA2B,CAAA;IAAE,4CAAiC,CAAA;IAAE,gCAAqB,CAAA;IAAE,4CAAiC,CAAA;IAAE,wCAA6B,CAAA;IAAE,4CAAiC,CAAA;IAAE,wCAA6B,CAAA;IAAE,wCAA6B,CAAA;IAAE,wCAA6B,CAAA;IAAE,gCAAqB,CAAA;IAAE,4BAAiB,CAAA;IAAE,4CAAiC,CAAA;IAAE,0CAA+B,CAAA;IAAE,oCAAyB,CAAA;IAAE,sDAA2C,CAAA;AAC/zE,CAAC,EAFW,OAAO,KAAP,OAAO,QAElB"}

package/mobile/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            {buttons?.length ? <div>{buttons}</div> : null}
+            {buttons ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,7 +20,13 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
-    buttons?: ButtonContent[];
+    /**
+     * @title Стиль для текстовой части
+     * @hidden
+     */
+    textBlockClassName?: string;
+    /** @title Фоновый текст под иллюстрацией */
+    backgroundText?: string;
   };
 
 /**

package/mobile/src/components/ProductGallery/ProductGalleryContent.ts

@@ -5,7 +5,7 @@ interface ProductGalleryNav {
   /** @title Заголовок */
   title: string;
   /** @title Описание */
-  desc: string;
+  description: string;
 }
 
 /**

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

@@ -0,0 +1,22 @@
+{
+  "slides": [
+    {
+      "nav": {
+        "title": "Заголовок",
+        "description": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 280
+          }
+        },
+        "version": "primary",
+        "description": "Описание",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      }
+    }
+  ]
+}

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -0,0 +1,98 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
+import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
+
+export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
+
+export const ProductGalleryGreen = JSX<ProductGalleryProps>(
+  ({ className = '', context, slides = [] }) => {
+    const galleryNav = slides.map((s) => s.nav);
+    const galleryBlocks = slides.map((s) => s.productBlock);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section
+        className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
+      >
+        <div
+          className="flex duration-1000 pb-14"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
+        </div>
+
+        <div className="flex items-center absolute bottom-6 left-0 right-0 px-9 box-border">
+          {galleryNav.map((slide, i) =>
+            renderNavButton({
+              slide,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
+  return (
+    <section
+      key={String(i)}
+      className="box-border relative flex grow-0 shrink-0 basis-full px-9"
+      role="listitem"
+    >
+      <div className="flex grow">
+        {block.backgroundText ? (
+          <div className="absolute text-[454px] font-bold text-white tracking-[-10px] leading-[299px] opacity-[.1] right-12 top-20 z-0">
+            {block.backgroundText}
+          </div>
+        ) : null}
+        <ProductBlockInner
+          className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]"
+          context={context}
+          textBlockClassName="mb-[154px]"
+          version="secondary"
+          {...block}
+        />
+        <Icon
+          className="absolute right-[460px] top-[200px] z-0 mb-4"
+          name="ArrowsRewindRight"
+          width="230"
+          height="187"
+        />
+      </div>
+    </section>
+  );
+}
+
+function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
+  const isActiveBtn = i === activeSlideIndex;
+  const btnClassName = isActiveBtn
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
+    : 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300';
+  const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-white';
+  const btnDescClassName = isActiveBtn ? 'text-secondary-text' : 'text-white';
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={slide?.title}
+      className={`box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
+        ${btnClassName}
+      `}
+    >
+      <div className="border-0 px-6">
+        <div className={`text-sm font-medium pb-[3px] ${btnTitleClassName}`}>{slide?.title}</div>
+        <div className={`text-xs text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
+      </div>
+    </button>
+  );
+}

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts

@@ -0,0 +1,32 @@
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+
+/** @title Кнопка под слайдом */
+interface ProductGalleryNav {
+  /** @title Заголовок */
+  title: string;
+  /** @title Описание */
+  description: string;
+}
+
+/**
+ * @title Слайд
+ */
+export interface ProductSlide {
+  /** @title Превью содержимого слайда на навигации */
+  nav?: ProductGalleryNav;
+  /** @title Содержимое слайда */
+  productBlock: ProductBlockInnerContent;
+}
+
+/**
+ * @title Продуктовая галерея
+ */
+export interface ProductGalleryGreenContent {
+  /**
+   * @title Задержка
+   * @hidden //! temporary not used
+   */
+  duration?: number;
+  /** @title Слайды */
+  slides?: ProductSlide[];
+}

package/mobile/src/icons/ArrowsRewindRight.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 230 187" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_7050_138706)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.24 52.16L14 104.32V0L92.24 52.16ZM216.119 52.16L137.879 104.32V0L216.119 52.16Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_7050_138706" x="0.959999" y="0" width="228.199" height="186.907" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="69.5467"/>
+<feGaussianBlur stdDeviation="6.52"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0196078 0 0 0 0 0.0117647 0 0 0 0 0.0156863 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7050_138706"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7050_138706" result="shape"/>
+</filter>
+</defs>
+</svg>

package/mobile/src/icons/IconName.ts

@@ -2,7 +2,7 @@
 // Generated. Do not touch
 
 export enum IconMap {
-  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GpsIcon = "GpsIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
+  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", ArrowsRewindRight = "ArrowsRewindRight", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GpsIcon = "GpsIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
 }
 
 /**
@@ -10,7 +10,7 @@ export enum IconMap {
  * @title Иконка
  * @enumNames [
  *   "",
- *   "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
+ *   "Деньги", "Лого «Apple»", "ArrowsRewindRight", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
-export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";
+export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "ArrowsRewindRight" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";

package/package.json

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

package/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            {buttons?.length ? <div>{buttons}</div> : null}
+            {buttons ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/Blocks.ts

@@ -15,6 +15,7 @@ import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
+import { ProductGalleryGreen } from './ProductGalleryGreen/ProductGalleryGreen';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
 import { Recommendation } from './Recommendation/Recommendation';
@@ -39,6 +40,7 @@ export const Blocks = {
   PictureText,
   ProductBlock,
   ProductGallery,
+  ProductGalleryGreen,
   ProductTile,
   PromoTile,
   Recommendation,

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,7 +20,13 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
-    buttons?: ButtonContent[];
+    /**
+     * @title Стиль для текстовой части
+     * @hidden
+     */
+    textBlockClassName?: string;
+    /** @title Фоновый текст под иллюстрацией */
+    backgroundText?: string;
   };
 
 /**

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -23,26 +23,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     image,
     items,
     version = 'primary',
+    textBlockClassName = '',
   }) => {
+    const textColor = version === 'secondary' ? 'text-white' : '';
     return (
       <div className={`flex grow justify-between items-stretch ${className}`}>
-        <div className={'flex flex-col'}>
+        <div className={`flex flex-col ${textBlockClassName}`}>
           <BaseTile
             context={context}
-            title={
-              title && (
-                <Heading
-                  headingType={headingType}
-                  title={title}
-                  className="whitespace-pre-wrap max-w-[600px]"
-                />
-              )
-            }
-            buttons={
-              buttons?.length ? (
-                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
-              ) : null
-            }
+            title={getTitle(title, headingType, textColor)}
+            buttons={getButtons(context, buttons)}
           >
             {description && (
               <Description className="mt-4 max-w-[600px]" description={description} />
@@ -62,3 +52,21 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     );
   },
 );
+
+const getTitle = (title, headingType, textColor) => {
+  return (
+    title && (
+      <Heading
+        headingType={headingType}
+        title={title}
+        className={`whitespace-pre-wrap max-w-[600px] ${textColor}`}
+      />
+    )
+  );
+};
+
+const getButtons = (context, buttons) => {
+  return buttons?.length ? (
+    <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+  ) : null;
+};

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

@@ -93,7 +93,7 @@ export default {
             {
               nav: {
                 title: 'Выгодно покупать',
-                desc: 'Дополнительные бонусные баллы за покупки',
+                description: 'Дополнительные бонусные баллы за покупки',
               },
               productBlock: {
                 title: 'Дополнительные бонусные баллы за покупки!',
@@ -187,7 +187,7 @@ export default {
             {
               nav: {
                 title: 'Выгодно покупать',
-                desc: 'Дополнительные бонусные баллы за покупки',
+                description: 'Дополнительные бонусные баллы за покупки',
               },
               productBlock: {
                 title: 'Дополнительные бонусные баллы за покупки!',

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

@@ -41,7 +41,7 @@ export default {
           {
             nav: {
               title: 'Деньги на любые цели',
-              desc: 'Ставка от 12,5% годовых на срок до 5 лет',
+              description: 'Ставка от 12,5% годовых на срок до 5 лет',
             },
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 5 лет!',
@@ -65,7 +65,7 @@ export default {
           {
             nav: {
               title: 'Для людей в возрасте',
-              desc: 'Ставка от 12,5% годовых на срок до 3 лет',
+              description: 'Ставка от 12,5% годовых на срок до 3 лет',
             },
             productBlock: {
               title: 'Ставка от 12,5% годовых на срок до 3 лет!',
@@ -89,7 +89,7 @@ export default {
           {
             nav: {
               title: 'Выгодно покупать',
-              desc: 'Дополнительные бонусные баллы за покупки',
+              description: 'Дополнительные бонусные баллы за покупки',
             },
             productBlock: {
               title: 'Дополнительные бонусные баллы за покупки!',
@@ -113,7 +113,7 @@ export default {
           {
             nav: {
               title: 'Карты Unionpay',
-              desc: 'Кэшбэк до 20% у партнеров',
+              description: 'Кэшбэк до 20% у партнеров',
             },
             productBlock: {
               title: 'Карты Unionpay',

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -5,7 +5,7 @@ interface ProductGalleryNav {
   /** @title Заголовок */
   title: string;
   /** @title Описание */
-  desc: string;
+  description: string;
 }
 
 /**

package/src/components/ProductGalleryGreen/ProductGalleryGreen.example.json

@@ -0,0 +1,22 @@
+{
+  "slides": [
+    {
+      "nav": {
+        "title": "Заголовок",
+        "description": "Описание"
+      },
+      "productBlock": {
+        "title": "Продуктовая галерея",
+        "image": {
+          "format": "webp",
+          "size": {
+            "width": 280
+          }
+        },
+        "version": "primary",
+        "description": "Описание",
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      }
+    }
+  ]
+}