@redneckz/wildless-cms-uni-blocks 0.6.26 → 0.6.27

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -1,7 +1,7 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 
-import { BenefitsBlock } from './BenefitsBlock';
 import type { Picture } from '../../model/Picture';
+import { BenefitsBlock } from './BenefitsBlock';
 
 const itemsList = [
   'Комиссия за выдачу',
@@ -24,7 +24,6 @@ export default {
   'desc-img': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         benefitList={[
@@ -68,7 +67,6 @@ export default {
   'desc-icon': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         benefitList={[
@@ -112,7 +110,6 @@ export default {
   list: (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         benefitList={[
@@ -159,7 +156,6 @@ export default {
   'list-green': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         benefitList={[
@@ -207,7 +203,6 @@ export default {
   'desc-icon-green': (
     <div className="container grid grid-cols-12">
       <BenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         benefitList={[

package/src/components/Blocks.mobile.ts

@@ -11,7 +11,6 @@ import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
-import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
@@ -28,7 +27,6 @@ export const Blocks: BlocksRegistry = {
   LinkList,
   MobileAppTile,
   ProductBlock,
-  ProductGallery,
   StepsBlock,
   TariffsTable,
   TextBlock,

package/src/components/Blocks.ts

@@ -4,6 +4,7 @@ import { AccordionItem } from './AccordionItem/AccordionItem';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
+import { BusinessBlock } from './BusinessBlock/BusinessBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Catalog } from './Catalog/Catalog';
@@ -38,18 +39,22 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 import { InvestmentGallery } from './InvestmentGallery/InvestmentGallery';
 
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
   BenefitsBlock,
+  BusinessBlock,
   Bonus,
+  BonusBenefitsBlock,
   CardTransfer,
   ComparisonTable,
   Calculator,
   Catalog,
   ContactsBlock,
+  ErrorBlock,
   ExchangeRateTile,
   Footer,
   Gallery,
@@ -58,10 +63,12 @@ export const Blocks: BlocksRegistry = {
   Headline,
   InsuranceAmountBlock,
   InvestmentInfo,
+  InvestmentGallery,
   LinkDocs,
   MiniGallery,
   MobileAppTile,
   PictureText,
+  Placeholder,
   ProductBlock,
   ProductGallery,
   ProductTile,
@@ -71,14 +78,11 @@ export const Blocks: BlocksRegistry = {
   OtherProducts,
   OtherProductsItem,
   Recommendation,
+  SafeDepositRental,
   StepsBlock,
+  Tabs,
   TariffsTable,
   TextBlock,
   Tile,
-  Placeholder,
-  BonusBenefitsBlock,
-  SafeDepositRental,
-  Tabs,
-  ErrorBlock,
-  InvestmentGallery,
+  VerticalLayout,
 };

package/src/components/Bonus/Bonus.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Bonus } from './Bonus';
 import type { BonusContent } from './BonusContent';
@@ -65,7 +65,7 @@ export const BONUS: BonusContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Bonus className="col-span-12" context={context} {...BONUS} />
+      <Bonus className="col-span-12" {...BONUS} />
     </div>
   ),
 };

package/src/components/Bonus/Bonus.tsx

@@ -9,22 +9,18 @@ import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent'
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
 export const Bonus = JSX<BonusProps>((props) => {
-  const { context, className = '', title, description, bonusItems, ...rest } = props;
+  const { className = '', title, description, bonusItems, ...rest } = props;
 
   return (
-    <BlockWrapper
-      className={`font-sans bg-white p-[50px] pb-9 ${className}`}
-      context={context}
-      {...rest}
-    >
+    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
       <div className="container">
         <Headline
-          context={context}
           className="!p-0"
           title={title}
           description={description}
           headlineVersion="M"
           align="center"
+          {...rest}
         />
         <div className="flex flex-wrap w-full mt-9">
           {bonusItems?.length
@@ -40,9 +36,7 @@ export const Bonus = JSX<BonusProps>((props) => {
                           <div className="text-h4">{_.title}</div>
                           <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
                         </div>
-                        {_?.buttons?.length ? (
-                          <ButtonSection context={context} buttons={_?.buttons} />
-                        ) : null}
+                        {_?.buttons?.length ? <ButtonSection buttons={_?.buttons} /> : null}
                       </div>
                       {_.bonusItemContent?.bonusType
                         ? renderBonusItemContent(_.bonusItemContent)

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 
 import { BonusBenefitsBlock } from './BonusBenefitsBlock';
 import { BonusBenefit } from './BonusBenefitsBlockContent';
@@ -42,7 +42,6 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <BonusBenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"
@@ -53,7 +52,6 @@ export default {
   '5-cols': (
     <div className="container grid grid-cols-12">
       <BonusBenefitsBlock
-        context={context}
         className="col-span-12"
         title="Преимущества кредита"
         subtitle="Удобный каталог с большим ассортиментом товаров и сервисов"

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -12,19 +12,18 @@ import type {
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
 export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
-  ({ context, className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
+  ({ className = '', title, subtitle, bonusBenefits, columnsCount = '4', ...rest }) => (
     <BlockWrapper
       className={`font-sans text-primary-text bg-white p-[50px] flex flex-col text-center ${className}`}
-      context={context}
       {...rest}
     >
       <Headline
-        context={context}
         className="!p-0"
         title={title}
         description={subtitle}
         headlineVersion="M"
         align="center"
+        {...rest}
       />
       {bonusBenefits?.length ? (
         <div className={`grid gap-1 mt-8 ${getElementsColsValue(columnsCount)}`}>

package/src/components/BusinessBlock/BusinessBlock.example.json

@@ -0,0 +1,65 @@
+{
+  "title": "Заголовок блока",
+  "cards": [
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 319,
+          "height": 230
+        }
+      },
+      "title": "Заголовок карточки",
+      "cardItems": [
+        {
+          "icon": { "icon": "RoundRubleIcon" },
+          "text": "Пункт 1"
+        },
+        {
+          "icon": { "icon": "EmptyWalletIcon" },
+          "text": "Пункт 2"
+        },
+        {
+          "icon": { "icon": "PercentageSquareIcon" },
+          "text": "Пункт 3"
+        }
+      ],
+      "button": {
+        "href": "#",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "secondary"
+      }
+    },
+    {
+      "image": {
+        "format": "webp",
+        "size": {
+          "width": 304,
+          "height": 237
+        }
+      },
+      "title": "Заголовок карточки",
+      "cardItems": [
+        {
+          "icon": { "icon": "RoundRubleIcon" },
+          "text": "Пункт 1"
+        },
+        {
+          "icon": { "icon": "EmptyWalletIcon" },
+          "text": "Пункт 2"
+        },
+        {
+          "icon": { "icon": "PercentageSquareIcon" },
+          "text": "Пункт 3"
+        }
+      ],
+      "button": {
+        "href": "#",
+        "text": "Подробнее",
+        "target": "_blank",
+        "version": "secondary"
+      }
+    }
+  ]
+}

package/src/components/BusinessBlock/BusinessBlock.fixture.tsx

@@ -0,0 +1,74 @@
+import '../../react/setup-fixture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { BusinessBlock } from './BusinessBlock';
+import type {
+  BusinessBlockContent,
+  BusinessCardItemProps,
+  BusinessCardProps,
+} from './BusinessBlockContent';
+
+const button: ButtonWithIconProps = {
+  href: '#',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const items: BusinessCardItemProps[] = [
+  {
+    icon: { icon: 'RoundRubleIcon' },
+    text: 'Пункт 1',
+  },
+  {
+    icon: { icon: 'EmptyWalletIcon' },
+    text: 'Пункт 2',
+  },
+  {
+    icon: { icon: 'PercentageSquareIcon' },
+    text: 'Пункт 3',
+  },
+];
+
+const cards: BusinessCardProps[] = [
+  {
+    image: {
+      src: 'business-block-1.png',
+      format: 'png',
+      size: {
+        width: 319,
+        height: 230,
+      },
+      title: 'business-block-1',
+    },
+    title: 'Заголовок карточки',
+    cardItems: items,
+    button,
+  },
+  {
+    image: {
+      src: 'business-block-2.png',
+      format: 'png',
+      size: {
+        width: 304,
+        height: 237,
+      },
+      title: 'business-block-2',
+    },
+    title: 'Заголовок карточки',
+    cardItems: items,
+    button,
+  },
+];
+
+const PROPS: BusinessBlockContent = {
+  title: 'Заголовок блока',
+  cards,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BusinessBlock className="col-span-12" {...PROPS} />
+    </div>
+  ),
+};

package/src/components/BusinessBlock/BusinessBlock.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { BusinessBlockContent } from './BusinessBlockContent';
+import { BusinessCard } from './BusinessCard';
+
+export interface BusinessBlockProps extends BusinessBlockContent, UniBlockProps {}
+
+export const BusinessBlock = JSX<BusinessBlockProps>(
+  ({ className = '', title, cards, ...rest }) => (
+    <BlockWrapper className={`font-sans bg-white p-[50px] pb-9 ${className}`} {...rest}>
+      <Heading headingType="h3" title={title} className="text-center mb-8" />
+      <div className="flex gap-5">
+        {cards?.length ? cards.map((_, i) => <BusinessCard key={String(i)} {..._} />) : null}
+      </div>
+    </BlockWrapper>
+  ),
+);

package/src/components/BusinessBlock/BusinessBlock.ui.json

@@ -0,0 +1,26 @@
+{
+  "content": {
+    "cards": {
+      "items": {
+        "image": {
+          "ui:field": "picture"
+        },
+        "button": {
+          "icon": {
+            "ui:field": "icon"
+          },
+          "iconRight": {
+            "ui:field": "icon"
+          }
+        },
+        "cardItems": {
+          "items": {
+            "icon": {
+              "ui:field": "icon"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/BusinessBlock/BusinessBlockContent.ts

@@ -0,0 +1,31 @@
+import type { IconProps, Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+export type BusinessCardItemProps = IconProps & {
+  /** @title Текст */
+  text?: string;
+};
+
+export interface BusinessCardProps {
+  /** @title Заголовок карточки */
+  title?: string;
+  image?: Picture;
+  /** @title Список */
+  cardItems?: BusinessCardItemProps[];
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}
+
+/**
+ * @title Бизнес блок
+ */
+export interface BusinessBlockContent {
+  /** @title Заголовок блока */
+  title?: string;
+  /**
+   * @title Карточки
+   * @minItems 2
+   * @maxItems 2
+   */
+  cards?: BusinessCardProps[];
+}

package/src/components/BusinessBlock/BusinessCard.tsx

@@ -0,0 +1,41 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { BusinessCardItemProps, BusinessCardProps } from './BusinessBlockContent';
+
+export const BusinessCard = JSX<BusinessCardProps>((props) => {
+  const { title, image, cardItems, button } = props;
+
+  return (
+    <div className="border-color-stroke border p-9 w-1/2">
+      {image ? (
+        <div className="flex justify-center">
+          {image?.src ? <Img className="mb-5" image={image} /> : null}
+          {image?.icon ? <Img image={image} asSVG /> : null}
+        </div>
+      ) : null}
+      {title ? <Heading headingType="h4" title={title} className="mb-6" /> : null}
+      {cardItems?.length ? <ul>{cardItems.map((_, i) => renderItem(_, String(i)))}</ul> : null}
+      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+    </div>
+  );
+});
+
+const renderItem = (item: BusinessCardItemProps, key: string) => {
+  const { icon, text } = item;
+
+  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
+        />
+      ) : null}
+      {icon?.src ? <Img image={icon.icon} /> : null}
+      <span className="text-xl-light">{text}</span>
+    </li>
+  );
+};

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
@@ -10,10 +9,12 @@ import { renderFootnote } from './renderFootnote';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
 
-export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
+export interface BonusCalculatorProps extends CommonCalculatorProps {
+  className?: string;
+}
 
 export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
-  ({ context, className = '', sourceBookDir = '', buttons, footnote }) => {
+  ({ className = '', sourceBookDir = '', buttons, footnote }) => {
     const [travelExpenseValue, setTravelExpenseValue] = useState(DEFAULT_TRAVEL_MIN_SUM);
     const [restExpenseValue, setRestExpenseValue] = useState(DEFAULT_REST_MIN_SUM);
     const userInputParams = {
@@ -57,7 +58,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
         </div>
         <div className="w-full max-w-[350px]">
           {yearBonus >= 0 ? <CalculatorValueBlock title="Баллов за год" value={yearBonus} /> : null}
-          {renderButtonSection(context, buttons)}
+          {renderButtonSection(buttons)}
           {renderFootnote(footnote)}
         </div>
       </section>

package/src/components/Calculator/Calculator.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../react/setup-fixture';
+import '../../react/setup-fixture';
 import { Calculator } from './Calculator';
 
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
@@ -54,7 +54,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Calculator
         className="col-span-12"
-        context={context}
         calculatorTabs={[
           {
             nav: {
@@ -87,7 +86,6 @@ export default {
     <div className="container grid grid-cols-12">
       <Calculator
         className="col-span-12"
-        context={context}
         calculatorTabs={[
           {
             nav: {

package/src/components/Calculator/Calculator.tsx

@@ -24,7 +24,7 @@ type NavButtonProps = {
 };
 
 export const Calculator = JSX<CalculatorProps>(
-  ({ className = '', context, calculatorTabs = [], ...rest }) => {
+  ({ className = '', calculatorTabs = [], ...rest }) => {
     const tabsNav = calculatorTabs.map((_) => _.nav || ({} as CalculatorNav));
     const calculatorBlocks = calculatorTabs.map(
       ({ calculatorBlock }) => calculatorBlock || ({} as CalculatorBlockDef),
@@ -41,7 +41,6 @@ export const Calculator = JSX<CalculatorProps>(
 
     return (
       <BlockWrapper
-        context={context}
         className={`box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`}
         {...rest}
       >
@@ -61,9 +60,7 @@ export const Calculator = JSX<CalculatorProps>(
           style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
           role="list"
         >
-          {calculatorBlocks?.length
-            ? calculatorBlocks.map(renderCalculatorBlock({ context, className }))
-            : null}
+          {calculatorBlocks?.length ? calculatorBlocks.map(renderCalculatorBlock) : null}
         </div>
       </BlockWrapper>
     );

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
+import { RadioButtonGroup } from '../../ui-kit/RadioButtonGroup/RadioButtonGroup';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
@@ -9,7 +9,6 @@ import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
 import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
-import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useCreditCalculatorParams } from './useCreditCalculatorParams';
 
@@ -27,10 +26,12 @@ const paymentTypeItems = [
   },
 ];
 
-export interface CreditCalculatorProp extends CommonCalculatorProps, UniBlockProps {}
+export interface CreditCalculatorProp extends CommonCalculatorProps {
+  className?: string;
+}
 
 export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
-  ({ context, className = '', sourceBookDir, buttons, footnote }) => {
+  ({ className = '', sourceBookDir, buttons, footnote }) => {
     const [isAnnuity, toggleIsAnnuity] = useState(false);
     const [isInsurance, toggleIsInsurance] = useState(true);
     const [isSalaryClient, toggleIsSalaryClient] = useState(false);
@@ -88,13 +89,12 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             value={calculatorParams.monthlyPayment}
             postfix="₽"
           />
-          {renderPaymentTypeSelector({
-            context,
-            items: paymentTypeItems,
-            checkedItem: isAnnuity ? ANNUITY : DIFFERENTIAL,
-            onChange: (text: string) => toggleIsAnnuity(text === ANNUITY),
-          })}
-          {renderButtonSection(context, buttons)}
+          <RadioButtonGroup
+            items={paymentTypeItems}
+            checkedItem={isAnnuity ? ANNUITY : DIFFERENTIAL}
+            onChange={(text: string) => toggleIsAnnuity(text === ANNUITY)}
+          />
+          {renderButtonSection(buttons)}
           {renderFootnote(footnote)}
         </div>
       </section>