@redneckz/wildless-cms-uni-blocks 0.5.9 → 0.5.11

package/src/components/Bonus/Bonus.tsx

@@ -1,8 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { UniBlockProps } from '../../types';
-import type { BonusContent } from './BonusContent';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
+import type { BonusContent, BonusCountDef, BonusImageDef } from './BonusContent';
 
 export interface BonusProps extends BonusContent, UniBlockProps {}
 
@@ -25,28 +27,26 @@ export const Bonus = JSX<BonusProps>((props) => {
           align="center"
         />
         <div className="flex flex-wrap w-full mt-9">
-          {bonusItems
+          {bonusItems?.length
             ? bonusItems.map((_, i) => {
                 return (
                   <div
                     key={String(i)}
-                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-[14px] mx-[7px] even:mr-0 odd:ml-0 last:odd:mx-0"
+                    className="flex-grow w-[49%] border border-gray pl-9 pt-9 pr-6 pb-6 mb-3 mx-2 even:mr-0 odd:ml-0 last:odd:mx-0"
                   >
                     <div className="flex justify-between w-full">
-                      <div className="mr-4">
-                        <div className="text-h4">{_.title}</div>
-                        <div className="text-xl-light mt-[14px] max-w-[488px]">{_.description}</div>
-                      </div>
-                      {_.bonusCount ? (
-                        <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
-                          <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
-                            {_.bonusCount}
-                          </span>
-                          <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
-                            {_.bonusName}
-                          </span>
+                      <div className="flex flex-col justify-between mr-4">
+                        <div>
+                          <div className="text-h4">{_.title}</div>
+                          <div className="text-xl-light mt-2 max-w-[488px]">{_.description}</div>
                         </div>
-                      ) : null}
+                        {_?.buttons?.length ? (
+                          <ButtonSection context={context} buttons={_?.buttons} />
+                        ) : null}
+                      </div>
+                      {_.bonusItemContent?.bonusType
+                        ? renderBonusItemContent(_.bonusItemContent)
+                        : null}
                     </div>
                   </div>
                 );
@@ -57,3 +57,31 @@ export const Bonus = JSX<BonusProps>((props) => {
     </BlockWrapper>
   );
 });
+
+const renderBonusItemContent = (bonusItemContent: BonusImageDef | BonusCountDef) => (
+  <div>
+    {bonusItemContent.bonusType === 'count'
+      ? renderBonusCount(bonusItemContent as BonusCountDef)
+      : renderBonusImage(bonusItemContent as BonusImageDef)}
+  </div>
+);
+
+const renderBonusCount = (_: BonusCountDef) => (
+  <div className="relative -bottom-3 h-auto flex items-end mt-14 shrink-0">
+    {_.bonusCount ? (
+      <span className="font-mohave -tracking-[5px] text-title-extra bg-clip-text text-transparent bg-green-to-yellow -mb-7">
+        {_.bonusCount}
+      </span>
+    ) : null}
+    {_.bonusName ? (
+      <span className="text-h2 bg-clip-text text-transparent bg-green-to-yellow">
+        {_.bonusName}
+      </span>
+    ) : null}
+  </div>
+);
+
+const renderBonusImage = (_: BonusImageDef) =>
+  _.image ? (
+    <Img className={`w-[50px] h-[50px] min-w-[50px] p-3 rounded-full`} image={_.image} />
+  ) : null;

package/src/components/Bonus/Bonus.ui.json

@@ -0,0 +1,16 @@
+{
+  "content": {
+    "bonusItems": {
+      "items": {
+        "bonusItemContent": {
+          "bonusType": {
+            "ui:widget": "hidden"
+          },
+          "image": {
+            "ui:field": "icon"
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Bonus/BonusContent.ts

@@ -1,15 +1,46 @@
+import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
- * @title Плитка
+ * @title Изображение
  */
-export type BonusItem = HeadlineCommonProps & {
+export type BonusImageDef = {
+  /** @default image */
+  bonusType?: 'image';
+  image?: Picture;
+};
+
+/**
+ * @title Баллы
+ */
+export type BonusCountDef = {
+  /** @default count */
+  bonusType?: 'count';
   /** @title Количество баллов */
   bonusCount?: string;
   /** @title Наименование */
   bonusName?: string;
 };
 
+/**
+ * @title Вид контента
+ */
+export type BonusItemContentDef = EmptyOption | BonusImageDef | BonusCountDef;
+
+/**
+ * @title Плитка
+ */
+export type BonusItem = HeadlineCommonProps & {
+  bonusItemContent?: BonusItemContentDef;
+  /**
+   * @title Кнопка
+   * @maxItems 1
+   */
+  buttons?: ButtonWithIconProps[];
+};
+
 /**
  * @title Блок Бонусы
  */

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

@@ -10,7 +10,7 @@
           "width": 160,
           "height": 180
         },
-        "icon": "WateringCan"
+        "icon": "WateringCanIcon"
       }
     },
     {

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';

package/src/components/BonusBenefitsBlock/BonusBenefitsBlock.ui.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "bonusBenefits": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_REST_MIN_SUM, DEFAULT_TRAVEL_MIN_SUM } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
+import { renderFootnote } from './renderFootnote';
 import { renderWantedSumInput } from './renderWantedSumInput';
 import { useBonusCalculatorParams } from './useBonusCalculatorParams';
-import { renderFootnote } from './renderFootnote';
 
 export interface BonusCalculatorProps extends CommonCalculatorProps, UniBlockProps {}
 

package/src/components/Calculator/Calculator.example.json

@@ -14,7 +14,8 @@
             "text": "Кнопка 1",
             "version": "primary"
           }
-        ]
+        ],
+        "footnote": "Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка. "
       }
     }
   ]

package/src/components/Calculator/Calculator.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { Img } from '../../ui-kit/Img/Img';

package/src/components/Calculator/Calculator.ui.json

@@ -0,0 +1,31 @@
+{
+  "content": {
+    "calculatorTabs": {
+      "items": {
+        "nav": {
+          "icon": {
+            "ui:field": "icon"
+          }
+        },
+        "calculatorBlock": {
+          "sourceBookDir": {
+            "ui:widget": "sourceBook"
+          },
+          "calcType": {
+            "ui:widget": "hidden"
+          },
+          "buttons": {
+            "items": {
+              "icon": {
+                "ui:field": "icon"
+              },
+              "iconRight": {
+                "ui:field": "icon"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -1,17 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { CommonCalculatorProps } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEFAULT_MONTHS, DEFAULT_SUM } from './constants';
 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';
-import { renderFootnote } from './renderFootnote';
 
 export const ANNUITY = 'annuity';
 export const DIFFERENTIAL = 'differential';

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,7 +2,7 @@
 
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { CommonCalculatorProps, DepositCalculatorParams } from './CalculatorContent';
 import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
@@ -15,10 +15,10 @@ import {
 } from './constants';
 import { Rate } from './Rate';
 import { renderButtonSection } from './renderButtonSection';
+import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
-import { renderWantedSumInput } from './renderWantedSumInput';
 import { renderPaymentTypeSelector } from './renderPaymentTypeSelector';
-import { renderFootnote } from './renderFootnote';
+import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface DepositCalculatorProp
   extends DepositCalculatorParams,

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,7 +1,7 @@
-import type { JSXBlock } from '../ContentPage/ContentPage';
+import type { JSXBlock } from '../../model/BlocksRegistry';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
-import { Heading } from '../../ui-kit/Heading/Heading';
 
 export const renderCalculatorBlock =
   ({ context, className }: any) =>

package/src/components/CardTransfer/CardTransfer.example.json

@@ -1,6 +1,11 @@
 {
   "title": "Укажите сумму перевода",
   "label": "Сумма перевода",
-  "buttonText": "Далее",
-  "placeholder": "1500"
+  "placeholder": "1500",
+  "button": {
+    "href": "",
+    "text": "Далее",
+    "target": "_blank",
+    "version": "primary"
+  }
 }

package/src/components/CardTransfer/CardTransfer.fixture.tsx

@@ -1,6 +1,14 @@
 import { context } from '../../react/setup-fixture';
 import { CardTransfer } from './CardTransfer';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+const button: ButtonProps = {
+  href: '',
+  text: 'Далее',
+  target: '_blank',
+  version: 'primary',
+};
 
 export default {
-  default: <CardTransfer context={context} />,
+  default: <CardTransfer context={context} button={button} />,
 };

package/src/components/CardTransfer/CardTransfer.tsx

@@ -1,26 +1,19 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { CardTransferContent } from './CardTransferContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { CurrencyInput } from '../../ui-kit/CurrencyInput/CurrencyInput';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import type { UniBlockProps } from '../../types';
-import type { GetButtonClassParams } from '../../ui-kit/Button/GetButtonClassParams';
-import type { CardTransferContent } from './CardTransferContent';
-import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
 import { getDisabledButtonClasses } from '../../ui-kit/Button/getDisabledButtonClasses';
+import { getRegularButtonClasses } from '../../ui-kit/Button/getRegularButtonClasses';
+import { useLink } from '../../hooks/useLink';
 
 const AMOUNT_KEY = 'amount';
 const FORM_URL = 'https://www.rshb.ru/p2p/';
-
 const DEFAULT_TITLE = 'Укажите сумму перевода';
 const DEFAULT_LABEL = 'Сумма перевода';
 const DEFAULT_PLACEHOLDER = '1500';
-const DEFAULT_BUTTON_TEXT = 'Далее';
-
-const BUTTON_CLASS_PARAMS: GetButtonClassParams = {
-  version: 'primary',
-  className: 'w-full h-[56px] px-9 mt-6',
-};
 
 export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
 
@@ -30,15 +23,22 @@ export const CardTransfer = JSX<CardTransferProps>(
     title = DEFAULT_TITLE,
     label = DEFAULT_LABEL,
     placeholder = DEFAULT_PLACEHOLDER,
-    buttonText = DEFAULT_BUTTON_TEXT,
+    button,
+    context,
     ...rest
   }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
     const [value, setValue] = useState<string>('');
     const isDisabled = !Number(value);
+    const buttonStyle = isDisabled
+      ? getDisabledButtonClasses({ version: button?.version })
+      : getRegularButtonClasses({ className: 'text-white', version: button?.version });
 
     return (
       <BlockWrapper
         className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+        context={context}
         {...rest}
       >
         {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
@@ -50,17 +50,16 @@ export const CardTransfer = JSX<CardTransferProps>(
             placeholder={placeholder}
             label={label}
           />
-          <button
-            type="submit"
-            className={
-              isDisabled
-                ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
-                : getRegularButtonClasses(BUTTON_CLASS_PARAMS)
-            }
-            disabled={isDisabled}
-          >
-            {buttonText}
-          </button>
+          {button?.text ? (
+            <button
+              type="submit"
+              className={`w-full p-4 mt-6 ${buttonStyle} `}
+              disabled={isDisabled}
+              {...useLink({ router, handlerDecorator }, button)}
+            >
+              {button.text}
+            </button>
+          ) : null}
         </form>
       </BlockWrapper>
     );

package/src/components/CardTransfer/CardTransfer.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CardTransfer/CardTransferContent.ts

@@ -1,4 +1,5 @@
 import type { LabelProps, TitleProps } from '../../model/HeadlineType';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
 /**
  * @title Перевод с карты на карту
@@ -7,6 +8,5 @@ export type CardTransferContent = LabelProps &
   TitleProps & {
     /** @title Плейсхолдер */
     placeholder?: string;
-    /** @title Текст кнопки */
-    buttonText?: string;
+    button?: ButtonProps;
   };

package/src/components/Catalog/Catalog.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';

package/src/components/Catalog/Catalog.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/Catalog/CatalogCard.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { Picture } from '../../model/Picture';
 import type { ProductColorVersion } from '../../model/ProductColorVersion';
-import type { UniBlockProps } from '../../types';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -28,7 +28,7 @@ export const CatalogCard = JSX<CatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors }) => {
     return (
       <section
-        className={`border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+        className={`border border-solid box-border border-main-stroke p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
         role="listitem"
       >
         {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { ComparisonTableContent } from './ComparisonTableContent';

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { ComparisonTableBody } from './ComparisonTableBody';

package/src/components/ComparisonTable/ComparisonTable.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/ComparisonTable/TableColumn.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonVersion } from '../../model/ButtonVersion';
-import type { IconProps } from '../../model/Picture';
-import type { UniBlockProps } from '../../types';
+import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { IconProps } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
 import { CellData } from './ComparisonTableContent';
 import { GRADIENT } from './constants';
@@ -48,23 +48,29 @@ export const TableColumn = JSX<TableColumnProps>(
             ))
           : null}
 
-        {showRow && renderButton({ header, buttonVersion })}
+        {showRow ? renderButton({ header, buttonVersion }) : null}
         {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
       </div>
     );
   },
 );
 
-const renderButton = ({ header, buttonVersion }) => (
-  <Button
-    href={header.link.href}
-    target={header.link.target}
-    version={buttonVersion}
-    className="text-s font-medium mt-4 py-[11px]"
-  >
-    {header.link.text}
-  </Button>
-);
+const renderButton = ({ header, buttonVersion }) => {
+  if (!header.link) {
+    return null;
+  }
+
+  return (
+    <Button
+      href={header.link.href}
+      target={header.link.target}
+      version={buttonVersion}
+      className="text-s font-medium mt-4 py-[11px]"
+    >
+      {header.link.text}
+    </Button>
+  );
+};
 
 const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
   <div className="mt-5" role="cell">

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

@@ -1,6 +1,6 @@
 import { mobileContext } from '../../react/setup-fixture';
 
-import type { ContentPageDef } from '../../types';
+import type { ContentPageDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks';
 import { ContentPage } from './ContentPage';
 import { normalizePage } from './normalizePage';

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -1,8 +1,9 @@
 import { context } from '../../react/setup-fixture';
 
-import type { ContentPageDef } from '../../types';
+import type { BlockDecorator } from '../../model/BlockDecorator';
+import type { ContentPageDef } from '../../model/ContentPageDef';
 import { Blocks } from '../Blocks';
-import { BlockDecorator, ContentPage } from './ContentPage';
+import { ContentPage } from './ContentPage';
 import { normalizePage } from './normalizePage';
 
 import data from './ContentPage.page.json';

package/src/components/ContentPage/ContentPage.page.json

@@ -57,6 +57,18 @@
         ]
       }
     },
+    {
+      "type": "Tabs",
+      "style": ["col-span-12"],
+      "content": {
+        "isSticky": true,
+        "tabs": [
+          { "type": "link", "href": "#placeholder", "text": "В разработке" },
+          { "type": "link", "href": "#products", "text": "Продукты" },
+          { "type": "link", "href": "#gallery", "text": "Галерея" }
+        ]
+      }
+    },
     {
       "type": "ProductGallery",
       "style": ["col-span-12"],
@@ -477,6 +489,7 @@
     {
       "type": "Placeholder",
       "style": ["col-span-12"],
+      "anchor": "placeholder",
       "content": {
         "title": "Какой то новый блок"
       }
@@ -557,6 +570,7 @@
     {
       "type": "ProductTile",
       "style": ["col-span-6"],
+      "anchor": "products",
       "content": {
         "title": "Акция! “Кредит На все, что хочется!”",
         "description": "Потребительский кредит на любые цели, без залога и поручительства",
@@ -882,6 +896,7 @@
     {
       "type": "MiniGallery",
       "style": ["col-span-12"],
+      "anchor": "gallery",
       "content": {
         "title": "Вы можете оплатить бонусными баллами",
         "description": "Удобный каталог с большим ассортиментом товаров и сервисов",
@@ -1421,7 +1436,6 @@
     {
       "type": "LinkDocs",
       "style": ["col-span-12"],
-      "anchor": "documents",
       "content": {
         "title": "Дополнительные документы",
         "description": "Ответы на часто задаваемые вопросы",