@redneckz/wildless-cms-uni-blocks 0.5.10 → 0.5.12

package/mobile/lib/ui-kit/Select/Select.d.ts

@@ -1,8 +1,14 @@
+export interface OptionProps {
+    key: string;
+    text: string;
+}
 export interface SelectProps {
     className?: string;
-    id?: string;
-    name?: string;
-    value: string;
-    onChange: (value: string) => void;
+    label?: string;
+    value?: OptionProps;
+    onChange: (value: OptionProps) => void;
+    options: OptionProps[];
+    isBorder?: boolean;
+    placeholder?: string;
 }
 export declare const Select: import("@redneckz/uni-jsx").UNIComponent<SelectProps, any, any>;

package/mobile/lib/ui-kit/Select/Select.js

@@ -1,9 +1,30 @@
-import { jsx as _jsx } from "@redneckz/uni-jsx/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@redneckz/uni-jsx/jsx-runtime";
 import { JSX } from '@redneckz/uni-jsx';
-const selectStyle = {
-    background: `url('/icons/ArrowDownIcon.svg') right 16px top 50% / 21px no-repeat`,
-};
-export const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
-    return (_jsx("select", { className: `appearance-none pl-0.5 ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), placeholder: "", children: children }));
+import { Icon } from '../Icon/Icon.js';
+import { useState, useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useOutsideClick } from '../../hooks/useOutsideClick.js';
+export const Select = JSX(({ className = '', isBorder = true, label, options = [], value, onChange, placeholder = '' }) => {
+    const [selectedItem, setSelectedItem] = useState(options[0] || { key: '', text: '' });
+    const [isOpen, setIsOpen] = useState(false);
+    const wrapperRef = useRef(null);
+    useOutsideClick(wrapperRef, setIsOpen);
+    const choiceOption = (option) => {
+        setSelectedItem(option);
+        setIsOpen(false);
+        onChange(option);
+    };
+    const isSelected = (option) => Boolean(option.key === selectedItem.key);
+    useEffect(() => {
+        setSelectedItem(value || { key: '', text: '' });
+    }, [value]);
+    return (_jsxs("div", { className: `${className}`, ref: wrapperRef, children: [label ? _jsx("span", { className: "mb-2 flex", children: label }) : null, _jsxs("div", { className: `relative ${isOpen ? 'z-20' : 'z-10'}`, children: [_jsxs("div", { className: `text-l flex justify-between items-center mb-0.5 text-primary-text cursor-pointer
+            ${getBorderStyle(isBorder)}`, onClick: () => setIsOpen(!isOpen), children: [_jsx("p", { className: "p-4 pr-8 h-[56px] overflow-hidden text-ellipsis whitespace-nowrap", children: selectedItem?.text || placeholder }), _jsx(Icon, { name: "ArrowUpIcon", width: "16", height: "16", className: `absolute right-3 ${isOpen ? '' : 'rotate-180'}` })] }), options?.length ? (_jsx("div", { className: `h-0 ${renderOptionsStyle(isOpen)}`, children: _jsx("div", { className: `bg-white text-l max-h-[256px] overflow-y-auto overflow-x-hidden rounded-md shadow-[0_4px_25px_rgba(0,0,0,0.07)]`, children: options.map(renderOption(choiceOption, isOpen, isSelected)) }) })) : null] })] }));
 });
+const renderOptionsStyle = (isOpen) => (isOpen ? '' : 'overflow-hidden');
+const renderOption = (choiceOption, isOpen, isSelected) => (option, i) => {
+    return (_jsxs("div", { onClick: () => {
+            choiceOption(option);
+        }, className: "flex px-4 py-3 cursor-pointer hover:bg-main-divider pr-11 relative", children: [_jsx("span", { className: "min-h-6", children: option.text }), _jsx(Icon, { name: "DoneSimpleIcon", width: "16", height: "16", className: ['absolute right-4 pt-0.5', isSelected(option) && isOpen ? '' : 'hidden'].join(' ') })] }, String(i)));
+};
+const getBorderStyle = (isBorder) => isBorder ? 'border border-main-stroke rounded-md hover:border-primary-hover' : '';
 //# sourceMappingURL=Select.js.map

package/mobile/lib/ui-kit/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAUxC,MAAM,WAAW,GAAG;IAClB,UAAU,EAAE,qEAAqE;CAClF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CACvB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,iBACE,SAAS,EAAE,0BAA0B,SAAS,EAAE,EAChD,KAAK,EAAE,WAAW,EAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,IAAI,EAAE,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAe,CAAC,EACnD,WAAW,EAAC,EAAE,YAEb,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/ui-kit/Select/Select.tsx"],"names":[],"mappings":"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"}

package/mobile/lib/utils/changeHashOnObserve.d.ts

@@ -1 +1,9 @@
-export declare const changeHashOnObserve: (entries: IntersectionObserverEntry[]) => void;
+import { AnchorClickScrollingEvent } from '../components/Tabs/Tabs';
+interface ChangeHashOnObserveProps {
+    anchor?: string;
+    anchorClickRef?: {
+        current: AnchorClickScrollingEvent | null;
+    };
+}
+export declare const changeHashOnObserve: ({ anchor, anchorClickRef }: ChangeHashOnObserveProps) => (entries: IntersectionObserverEntry[]) => void;
+export {};

package/mobile/lib/utils/changeHashOnObserve.js

@@ -1,10 +1,18 @@
-export const changeHashOnObserve = (entries) => {
-    if (!entries.length) {
+import { EventBus } from '../EventBus/EventBus.js';
+export const changeHashOnObserve = ({ anchor, anchorClickRef }) => (entries) => {
+    if (!entries?.length) {
         return;
     }
     const [entry] = entries;
-    if (entry.isIntersecting) {
-        // Here must be logic for block intersection event
+    if (!entry.isIntersecting || entry.boundingClientRect.top > 150) {
+        return;
+    }
+    if (anchorClickRef?.current?.isScrolling && anchorClickRef.current.label === `#${anchor}`) {
+        EventBus.inst.fire('anchorClick', { isScrolling: false, label: undefined });
+        EventBus.inst.fire('tab', { type: 'link', label: anchor });
+    }
+    else if (!anchorClickRef?.current?.isScrolling) {
+        EventBus.inst.fire('tab', { type: 'link', label: anchor });
     }
 };
 //# sourceMappingURL=changeHashOnObserve.js.map

package/mobile/lib/utils/changeHashOnObserve.js.map

@@ -1 +1 @@
-{"version":3,"file":"changeHashOnObserve.js","sourceRoot":"","sources":["../../src/utils/changeHashOnObserve.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,OAAoC,EAAE,EAAE;IAC1E,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;QACnB,OAAO;KACR;IACD,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;IAExB,IAAI,KAAK,CAAC,cAAc,EAAE;QACxB,kDAAkD;KACnD;AACH,CAAC,CAAC"}
+{"version":3,"file":"changeHashOnObserve.js","sourceRoot":"","sources":["../../src/utils/changeHashOnObserve.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAShD,MAAM,CAAC,MAAM,mBAAmB,GAC9B,CAAC,EAAE,MAAM,EAAE,cAAc,EAA4B,EAAE,EAAE,CACzD,CAAC,OAAoC,EAAE,EAAE;IACvC,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE;QACpB,OAAO;KACR;IAED,MAAM,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;IAExB,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,kBAAkB,CAAC,GAAG,GAAG,GAAG,EAAE;QAC/D,OAAO;KACR;IAED,IAAI,cAAc,EAAE,OAAO,EAAE,WAAW,IAAI,cAAc,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,MAAM,EAAE,EAAE;QACzF,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC5E,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;KAC5D;SAAM,IAAI,CAAC,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE;QAChD,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;KAC5D;AACH,CAAC,CAAC"}

package/mobile/lib/utils/getSanitizedValue.d.ts

@@ -0,0 +1 @@
+export declare const getSanitizedValue: (_: string) => string;

package/mobile/lib/utils/getSanitizedValue.js

@@ -0,0 +1,2 @@
+export const getSanitizedValue = (_) => _.split(/\s+/).join('');
+//# sourceMappingURL=getSanitizedValue.js.map

package/mobile/lib/utils/getSanitizedValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getSanitizedValue.js","sourceRoot":"","sources":["../../src/utils/getSanitizedValue.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC"}

package/mobile/src/EventBus/EventMap.ts

@@ -1,6 +1,8 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
+import type { AnchorClickScrollingEvent, TabActivationEvent } from '../components/Tabs/Tabs';
 import type { TariffsTableInnerEvent } from '../ui-kit/InnerTable/InnerTableProps';
+
 export interface EventMap {
   tab: TabActivationEvent;
   tariffInnerTable: TariffsTableInnerEvent;
+  anchorClick: AnchorClickScrollingEvent;
 }

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

@@ -0,0 +1,79 @@
+{
+  "content": {
+    "accordionItems": {
+      "items": {
+        "blocks": {
+          "items": {
+            "blockListType": {
+              "ui:widget": "hidden"
+            },
+            "image": {
+              "ui:field": "picture"
+            },
+            "benefitList": {
+              "items": {
+                "description": {
+                  "benefitType": {
+                    "ui:widget": "hidden"
+                  }
+                },
+                "icon": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "style": {
+              "ui:field": "style"
+            },
+            "benefits": {
+              "items": {
+                "icon": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "buttons": {
+              "items": {
+                "icon": {
+                  "ui:field": "icon"
+                },
+                "iconRight": {
+                  "ui:field": "icon"
+                }
+              }
+            },
+            "icon": {
+              "ui:field": "icon"
+            },
+            "backwardButton": {
+              "icon": {
+                "ui:field": "icon"
+              },
+              "iconRight": {
+                "ui:field": "icon"
+              }
+            },
+            "cards": {
+              "items": {
+                "image": {
+                  "ui:field": "picture"
+                },
+                "button": {
+                  "icon": {
+                    "ui:field": "icon"
+                  },
+                  "iconRight": {
+                    "ui:field": "icon"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "labelIcon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/Accordion/AccordionItem.tsx

@@ -1,44 +1,68 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import { UniBlockProps } from '../../model/ContentPageDef';
+import { renderBlocksList } from '../../ui-kit/BlocksList/renderBlocksList';
+import { Foldable } from '../../ui-kit/Foldable/Foldable';
+import type { FoldButtonProps } from '../../ui-kit/Foldable/FoldButtonProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
 import { Img } from '../../ui-kit/Img/Img';
 import type { AccordionItemCommonProps } from './AccordionContent';
-import { AccordionItemInner } from './AccordionItemInner';
-import { useActiveHandler } from './useActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
+const icons: IconName[] = ['PlusIcon', 'MinusIcon'];
+
 export const AccordionItem = JSX<AccordionItemProps>(
-  ({ label, labelIcon, blocks, bordered, context }) => {
-    const { hasContent, icon, handleToggle } = useActiveHandler({ blocks });
+  ({ label = '', labelIcon, blocks, bordered, context }) => {
+    const foldableBlocks = blocks ? renderBlocksList({ context, blocks, className: '!px-0' }) : [];
 
     return (
       <li className={`${borderedLiClass(bordered)} border-solid border-main-divider`}>
-        <button
-          className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-          ${bordered ? '' : 'py-[14px] px-0'}
-          ${hasContent ? 'group cursor-pointer' : ''}`}
-          onClick={handleToggle}
-        >
-          <span
-            className={`text-m-title-xs font-medium pr-2.5 flex ${
-              hasContent ? 'group-hover:text-primary-main' : ''
-            }`}
-          >
-            {labelIcon ? (
-              <Img image={labelIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
-            ) : null}
-            {label}
-          </span>
-          {hasContent ? (
-            <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
-          ) : null}
-        </button>
-        {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+        <Foldable
+          hiddenBlocksNum={foldableBlocks.length}
+          blocks={foldableBlocks}
+          isFoldButtonOnTop
+          containerClassName="flex flex-wrap group-last:last:pb-0"
+          renderFoldButton={(props) => (
+            <FoldButton
+              className={bordered ? '' : 'py-[14px] px-0'}
+              icon={icons[Number(props.isUnfolded)]}
+              label={label}
+              primaryIcon={labelIcon}
+              hasContent={Boolean(blocks?.length)}
+              onClick={props.onToggle}
+            />
+          )}
+        />
       </li>
     );
   },
 );
 
+const FoldButton = JSX<FoldButtonProps>(
+  ({ className, hasContent, icon, label, primaryIcon, onClick }) => (
+    <button
+      className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
+  ${className}
+  ${hasContent ? 'group cursor-pointer' : ''}`}
+      onClick={onClick}
+    >
+      <span
+        className={`text-m-title-xs font-medium pr-2.5 flex ${
+          hasContent ? 'group-hover:text-primary-main' : ''
+        }`}
+      >
+        {primaryIcon ? (
+          <Img image={primaryIcon} className="mr-3 flex-shrink-0" width="24" height="24" asSVG />
+        ) : null}
+        {label}
+      </span>
+      {hasContent ? (
+        <Img className="flex-shrink-0" image={icon} width="24" height="24" asSVG />
+      ) : null}
+    </button>
+  ),
+);
+
 function borderedLiClass(bordered?: boolean) {
   return bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0';
 }

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -63,7 +63,7 @@ const renderBenefits = (
 };
 
 const setIconVersion = (benefitIcon: Picture, benefitsBlockVersion: BlockVersion) => {
-  if (!benefitIcon.icon) {
+  if (!benefitIcon.icon || benefitIcon?.iconVersion) {
     return benefitIcon;
   }
   benefitIcon.iconVersion = benefitsBlockVersion === 'secondary' ? 'white' : 'normal';

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

@@ -0,0 +1,16 @@
+{
+  "content": {
+    "benefitList": {
+      "items": {
+        "description": {
+          "benefitType": {
+            "ui:widget": "hidden"
+          }
+        },
+        "icon": {
+          "ui:field": "icon"
+        }
+      }
+    }
+  }
+}

package/mobile/src/components/Blocks.ts

@@ -1,6 +1,5 @@
 import { Accordion } from './Accordion/Accordion';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
-import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
@@ -18,7 +17,6 @@ import { TextBlock } from './TextBlock/TextBlock';
 export const Blocks = {
   Accordion,
   ComparisonTable,
-  ExchangeRateTile,
   Footer,
   Gallery,
   Header,

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

@@ -5,8 +5,11 @@
     {
       "title": "Плитка 1",
       "description": "Описание плитки 1",
-      "bonusCount": 1,
-      "bonusName": "балл"
+      "bonusItemContent": {
+        "bonusType": "count",
+        "bonusCount": "1",
+        "bonusName": "балл"
+      }
     }
   ]
 }

package/mobile/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 { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Img } from '../../ui-kit/Img/Img';
 import { Headline } from '../Headline/Headline';
-import type { BonusContent } from './BonusContent';
+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/mobile/src/components/Bonus/Bonus.ui.json

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

package/mobile/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/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.example.json

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

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

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

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

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

package/mobile/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/mobile/src/components/Calculator/CalculatorContent.ts

@@ -138,7 +138,7 @@ export type CalculatorNav = HeadlineCommonProps & IconProps;
 /**
  * @title Вкладка
  */
-export type CalculatorTab = TitleProps & {
+export type CalculatorTab = {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
 };

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

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