@redneckz/wildless-cms-uni-blocks 0.4.5 → 0.4.7

package/src/common.css

@@ -72,7 +72,7 @@ html {
     width: 100%;
   }
 
-  .calc-rate-text {
+  .gradient-color-text {
     background: linear-gradient(180deg, #42ab44 0%, #f6db7d 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

package/src/components/BlockContent.ts

@@ -1,6 +1,7 @@
 import type { BenefitsBlockContent } from './BenefitsBlock/BenefitsBlockContent';
 import type { BonusContent } from './Bonus/BonusContent';
 import type { BonusBenefitsBlockContent } from './BonusBenefitsBlock/BonusBenefitsBlockContent';
+import type { CardTransferContent } from './CardTransfer/CardTransferContent';
 import type { ComparisonTableContent } from './ComparisonTable/ComparisonTableContent';
 import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTileContent';
 import type { FooterContent } from './Footer/FooterContent';
@@ -12,6 +13,7 @@ import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
 import type { MobileAppTileContent } from './MobileAppTile/MobileAppTileContent';
 import type { NavigationContent } from './Navigation/NavigationContent';
+import type { OfficeServicesBlockContent } from './OfficeServicesBlock/OfficeServicesBlockContent';
 import type { PictureTextContent } from './PictureText/PictureTextContent';
 import type { PlaceholderContent } from './Placeholder/PlaceholderContent';
 import type { ProductBlockContent } from './ProductBlock/ProductBlockContent';
@@ -20,10 +22,11 @@ import type { ProductTileContent } from './ProductTile/ProductTileContent';
 import type { PromoTileContent } from './PromoTile/PromoTileContent';
 import type { SafeDepositRentalContent } from './SafeDepositRental/SafeDepositRentalContent';
 import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
-import { TabsContent } from './Tabs/TabsContent';
+import type { TabsContent } from './Tabs/TabsContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { ErrorBlockContent } from './ErrorBlock/ErrorBlockContent';
 
 /**
  * @hidden
@@ -31,6 +34,7 @@ import type { TileContent } from './Tile/TileContent';
 export type BlockContent =
   | BenefitsBlockContent
   | BonusContent
+  | CardTransferContent
   | ComparisonTableContent
   | ExchangeRateTileContent
   | FooterContent
@@ -54,4 +58,6 @@ export type BlockContent =
   | LinkListContent
   | BonusBenefitsBlockContent
   | SafeDepositRentalContent
-  | TabsContent;
+  | TabsContent
+  | ErrorBlockContent
+  | OfficeServicesBlockContent;

package/src/components/Blocks.ts

@@ -3,6 +3,7 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { Calculator } from './Calculator/Calculator';
+import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
@@ -16,6 +17,7 @@ import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
+import { OfficeServicesBlock } from './OfficeServicesBlock/OfficeServicesBlock';
 import { OtherProducts } from './OtherProducts/OtherProducts';
 import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
@@ -30,11 +32,13 @@ import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 
 export const Blocks = {
   Accordion,
   BenefitsBlock,
   Bonus,
+  CardTransfer,
   ComparisonTable,
   Calculator,
   Catalog,
@@ -64,4 +68,6 @@ export const Blocks = {
   BonusBenefitsBlock,
   SafeDepositRental,
   Tabs,
+  ErrorBlock,
+  OfficeServicesBlock,
 };

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

@@ -13,11 +13,11 @@ export default {
         bonusBenefits={[
           {
             label: 'Более 5000 товаров',
-            icon: { icon: 'WateringCan' },
+            icon: { icon: 'WateringCanIcon' },
           },
           {
             label: '750 авиакомпаний, 1,2 млн отелей, билеты РЖД',
-            icon: { icon: 'AirPlane' },
+            icon: { icon: 'AirPlaneIcon' },
           },
           {
             label: 'Аренда автомобилей',

package/src/components/Calculator/BonusCalculatorForm.tsx

@@ -39,7 +39,7 @@ export const BonusCalculatorForm = JSX<BonusCalculatorProps>(
           {renderWantedSumInput(
             'Сумма покупок в остальных категориях, ₽',
             {
-              className: 'mt-6',
+              className: 'mt-7',
               minSum: minSumOther,
               maxSum: maxSumOther,
               moneyValue: restExpenseValue,

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

@@ -52,6 +52,7 @@ const DEPOSIT_CALCULATOR_BLOCK: DepositCalculatorParamsDef = {
 };
 
 const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
+  title: 'Обменивайте баллы на путешествия',
   calcType: 'BonusCalculatorForm',
   buttons: buttons,
 };

package/src/components/Calculator/Calculator.tsx

@@ -75,9 +75,11 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
 
   const btnClassName = isActiveBtn
     ? 'h-[88px] w-[387px] min-w-[387px] p-5 border-none bg-primary-main text-white'
-    : `h-[77px] w-[322px] min-w-[322px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
+    : `h-[77px] w-[328px] min-w-[328px] px-5 py-4 ease-in duration-300 bg-white text-primary-text`;
   const btnTitleClassName = isActiveBtn ? 'text-xl mb-1.5' : `text-l mb-[3px]`;
-  const btnDescClassName = isActiveBtn ? 'text-l font-light text-white' : `text-m font-light`;
+  const btnDescClassName = isActiveBtn
+    ? 'text-l-light text-white'
+    : `text-m-light text-secondary-text`;
   const iconClassName = isActiveBtn ? '' : `text-primary-main`;
 
   return (
@@ -86,7 +88,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       key={String(i)}
       onClick={onClick}
       aria-label={tab?.title}
-      className={`box-border font-sans relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
+      className={`box-border relative border border-main-stroke cursor-pointer text-left border-b-0 flex hover:h-[88px]
       ${btnClassName}`}
     >
       <Img
@@ -98,7 +100,7 @@ function renderNavButton({ tab, i, activeSlideIndex, onClick }: NavButtonProps)
       />
       <div className="border-0">
         <div className={`${btnTitleClassName}`}>{tab?.title}</div>
-        <div className={`text-secondary-text ${btnDescClassName}`}>{tab.description}</div>
+        <div className={`${btnDescClassName}`}>{tab.description}</div>
       </div>
     </button>
   );

package/src/components/Calculator/CalculatorContent.ts

@@ -1,6 +1,7 @@
 import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { TitleProps } from '../../model/HeadlineType';
 
 export interface CommonCalculatorProps {
   /** @title Кнопки */
@@ -115,7 +116,8 @@ export interface CalculatorParams {
  * @title Кредитный калькулятор
  * @default {"calcType": "CreditCalculatorForm"}
  */
-export type CreditCalculatorParamsDef = CreditCalculatorParams &
+export type CreditCalculatorParamsDef = TitleProps &
+  CreditCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'CreditCalculatorForm';
   };
@@ -124,7 +126,8 @@ export type CreditCalculatorParamsDef = CreditCalculatorParams &
  * @title Ипотечный калькулятор
  * @default {"calcType": "MortgageCalculatorForm"}
  */
-export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
+export type MortgageCalculatorParamsDef = TitleProps &
+  MortgageCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'MortgageCalculatorForm';
   };
@@ -133,7 +136,8 @@ export type MortgageCalculatorParamsDef = MortgageCalculatorParams &
  * @title Калькулятор вкладов
  * @default {"calcType": "DepositCalculatorForm"}
  */
-export type DepositCalculatorParamsDef = DepositCalculatorParams &
+export type DepositCalculatorParamsDef = TitleProps &
+  DepositCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'DepositCalculatorForm';
   };
@@ -142,7 +146,8 @@ export type DepositCalculatorParamsDef = DepositCalculatorParams &
  * @title Калькулятор бонусов
  * @default {"calcType": "BonusCalculatorForm"}
  */
-export type BonusCalculatorParamsDef = BonusCalculatorParams &
+export type BonusCalculatorParamsDef = TitleProps &
+  BonusCalculatorParams &
   CommonCalculatorProps & {
     calcType: 'BonusCalculatorForm';
   };
@@ -171,10 +176,10 @@ export interface CalculatorNav {
 /**
  * @title Вкладка
  */
-export interface CalculatorTab {
+export type CalculatorTab = TitleProps & {
   nav?: CalculatorNav;
   calculatorBlock?: CalculatorBlockDef;
-}
+};
 
 /**
  * @title Калькулятор

package/src/components/Calculator/CalculatorValueBlock.tsx

@@ -13,7 +13,7 @@ export const CalculatorValueBlock = JSX<CalculatorValueBlockProps>(
   ({ title, value, postfix = '', prefix, className = '' }) => {
     return (
       <div className={`mb-5 ${className}`}>
-        {title ? <div className="text-l-light">{title}</div> : null}
+        {title ? <div className="text-l-light text-secondary-text">{title}</div> : null}
         {value ? (
           <div className="text-h3">
             {prefix} {addSpacesBetweenNumbers(Math.round(value))} {postfix}

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -55,7 +55,7 @@ export const CreditCalculatorForm = JSX<CreditCalculatorProp>(
             setMoneyValue,
           )}
           {renderMonthsInput('Срок кредита, месяцев', calculatorParams, setMonthsValue)}
-          <div className="pt-7">
+          <div className="mt-7">
             <Checkbox
               text="Получаю зарплату на счёт в Россельхозбанке"
               checked={isSalaryClient}

package/src/components/Calculator/MortgageCalculatorForm.tsx

@@ -32,8 +32,6 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
     const maxMonths = /* calculatorParams?.maxMonths || */ DEFAULT_MAX_MONTHS;
 
     const rate = getCreditRate({ calculatorParams, isInsurance: isInsurance });
-
-    const monthlyPayment = 777777; // TODO: hardcode
     const proposalMortgageValue = { credit: 3892000, period: 15, taxRefund: 650000 }; // TODO: hardcode
 
     return (
@@ -60,17 +58,13 @@ export const MortgageCalculatorForm = JSX<MortgageCalculatorProp>(
             <Checkbox text="Страхование жизни" checked={isInsurance} onChange={toggleIsInsurance} />
             <Checkbox
               className="mt-4"
-              text="Страхование жизни, злоровья и временной утраты трудоспособности"
+              text="Страхование жизни, здоровья и временной утраты трудоспособности"
               checked={isFullInsurance}
               onChange={toggleIsFullInsurance}
             />
           </div>
         </div>
-        <div>
-          <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
-
-          <CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />
-        </div>
+        <Rate rate={rate} rateBlockClassName="tracking-[-25px]" unit="%" />
         <div>
           <div className="w-[351px]">{renderProposalMortgage(proposalMortgageValue)}</div>
           {renderButtonSection(context, buttons)}

package/src/components/Calculator/Rate.tsx

@@ -9,14 +9,14 @@ export interface RateProps {
 
 export const Rate = JSX<RateProps>(({ rate, title = 'Ставка', unit, rateBlockClassName }) => (
   <div>
-    <div className="text-l-light ml-3">{title}</div>
+    <div className="text-l-light text-secondary-text">{title}</div>
     <div className="flex justify-start">
       <span
-        className={`block calc-rate-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
+        className={`block gradient-color-text font-mohave text-title-huge pr-6 -mt-4 ${rateBlockClassName}`}
       >
         {String(rate).replace('.', ',')}
       </span>
-      {unit ? <span className="calc-rate-text text-[65px] leading-[75px]">{unit}</span> : ''}
+      {unit ? <span className="gradient-color-text text-[65px] leading-[75px]">{unit}</span> : ''}
     </div>
   </div>
 ));

package/src/components/Calculator/renderCalculatorBlock.tsx

@@ -1,6 +1,7 @@
 import type { JSXBlock } from '../ContentPage/ContentPage';
 import type { CalculatorBlockDef } from './CalculatorContent';
 import { EmbeddableCalcBlocks, EmbeddableCalcProps } from './EmbeddableCalcBlocks';
+import { Heading } from '../../ui-kit/Heading/Heading';
 
 export const renderCalculatorBlock =
   ({ context, className }: any) =>
@@ -18,6 +19,7 @@ export const renderCalculatorBlock =
         role="listitem"
       >
         <div className="box-border p-9 w-full">
+          {block?.title ? <Heading className="text-center mb-6" title={block.title} /> : null}
           <EmbeddedBlock context={context} {...block} className="flex justify-between" />
         </div>
       </section>

package/src/components/Calculator/renderInitialFeeInput.tsx

@@ -17,7 +17,7 @@ export function renderInitialFeeInput(title, props: RenderWantedSumInputParams,
 
   return (
     <InputRange
-      className="mt-6"
+      className="mt-7"
       title={title}
       items={[
         `От ${addSpacesBetweenNumbers(minSum)} рублей`,

package/src/components/Calculator/renderMonthsInput.tsx

@@ -19,7 +19,7 @@ export function renderMonthsInput(title: string, params: RenderMonthsInputParams
 
   return (
     <InputRange
-      className="mt-6"
+      className="mt-7"
       title={title}
       items={[`От ${monthText(minMonths)}`, `До ${monthText(maxMonths)}`]}
       min={minMonths}

package/src/components/Calculator/renderProposalMortgage.tsx

@@ -6,11 +6,16 @@ type porposalMortgage = {
   taxRefund: number;
 };
 
+const monthlyPayment = 777777; // TODO: hardcode
+
 export function renderProposalMortgage({ credit, period, taxRefund }: porposalMortgage) {
   return (
     <div>
-      {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
-      {<CalculatorValueBlock title="Срок" value={period} postfix="лет" />}
+      <div className="flex justify-between">
+        {<CalculatorValueBlock title="Сумма кредита" value={credit} postfix="₽" />}
+        {<CalculatorValueBlock title="Срок" value={period} postfix="лет" className="w-[120px]" />}
+      </div>
+      {<CalculatorValueBlock title="Ежемесячный платеж" value={monthlyPayment} postfix="₽" />}
       {<CalculatorValueBlock title="Налоговый вычет" value={taxRefund} postfix="₽" />}
     </div>
   );

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

@@ -0,0 +1,6 @@
+import { context } from '../../react/setup-fixture';
+import { CardTransfer } from './CardTransfer';
+
+export default {
+  default: <CardTransfer context={context} />,
+};

package/src/components/CardTransfer/CardTransfer.tsx

@@ -0,0 +1,59 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+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';
+
+const AMOUNT_KEY = 'amount';
+const INPUT_LABEL = 'Сумма перевода';
+const BUTTON_TEXT = 'Далее';
+const PLACEHOLDER = '1500';
+const TITLE = 'Укажите сумму перевода';
+
+const FORM_URL = 'https://www.rshb.ru/p2p/';
+
+const BUTTON_CLASS_PARAMS: GetButtonClassParams = {
+  version: 'primary',
+  className: 'w-full h-[56px] px-9 mt-6',
+};
+
+export interface CardTransferProps extends CardTransferContent, UniBlockProps {}
+
+export const CardTransfer = JSX<CardTransferProps>(({ className = '', title = TITLE, ...rest }) => {
+  const [value, setValue] = useState<string>('');
+  const isDisabled = !Number(value);
+
+  return (
+    <BlockWrapper
+      className={`p-[50px] flex flex-col items-center font-sans bg-white ${className}`}
+      {...rest}
+    >
+      {title ? <Heading className="max-w-[684px] pb-9" headingType="h2" title={title} /> : null}
+      <form className="w-[468px]" method="POST" action={FORM_URL}>
+        <CurrencyInput
+          name={AMOUNT_KEY}
+          value={value}
+          onChange={setValue}
+          placeholder={PLACEHOLDER}
+          label={INPUT_LABEL}
+        />
+        <button
+          type="submit"
+          className={
+            isDisabled
+              ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
+              : getRegularButtonClasses(BUTTON_CLASS_PARAMS)
+          }
+          disabled={isDisabled}
+        >
+          {BUTTON_TEXT}
+        </button>
+      </form>
+    </BlockWrapper>
+  );
+});

package/src/components/CardTransfer/CardTransferContent.ts

@@ -0,0 +1,10 @@
+/**
+ * @title Перевод с карты на карту
+ */
+export type CardTransferContent = {
+  /**
+   * @title Заголовок
+   * @hidden
+   */
+  title?: string;
+};

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

@@ -2197,6 +2197,10 @@
         ]
       }
     },
+    {
+      "type": "CardTransfer",
+      "style": ["col-span-12"]
+    },
     {
       "type": "SafeDepositRental",
       "style": ["col-span-12"]

package/src/components/ErrorBlock/ErrorBlock.example.json

@@ -0,0 +1,13 @@
+{
+  "title": "Страница не найдена",
+  "subtitle": "Возможно неправильно набран адрес или такой странице не существует",
+  "error": {
+    "errorContentType": "Code",
+    "code": 404
+  },
+  "button": {
+    "text": "Вернуться на главную",
+    "version": "primary",
+    "target": "_blank"
+  }
+}

package/src/components/ErrorBlock/ErrorBlock.fixture.tsx

@@ -0,0 +1,53 @@
+import { context } from '../../react/setup-fixture';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ErrorBlock } from './ErrorBlock';
+
+const image: Picture = {
+  src: 'error.png',
+  format: 'webp',
+  alt: 'Ошибка',
+  size: {
+    width: 460,
+    height: 294,
+  },
+};
+
+const buttonPrimary: ButtonProps = {
+  href: '/credit-cards',
+  text: 'Вернуться на главную',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ErrorBlock
+        className="col-span-12"
+        context={context}
+        title="Страница не найдена"
+        subtitle="Возможно неправильно набран адрес или такой странице не существует"
+        error={{
+          errorContentType: 'Code',
+          code: 404,
+        }}
+        button={buttonPrimary}
+      />
+    </div>
+  ),
+  'error-with-image': (
+    <div className="container grid grid-cols-12">
+      <ErrorBlock
+        className="col-span-12"
+        context={context}
+        title="Страница не найдена"
+        subtitle="Возможно неправильно набран адрес или такой странице не существует"
+        error={{
+          errorContentType: 'Image',
+          image: image,
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/ErrorBlock/ErrorBlock.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { ErrorBlockContent } from './ErrorBlockContent';
+import { useLink } from '../../hooks/useLink';
+import { Button } from '../../ui-kit/Button/Button';
+import { Img } from '../../ui-kit/Img/Img';
+import { Heading } from '../../ui-kit/Heading/Heading';
+
+export interface ErrorBlockProps extends ErrorBlockContent, UniBlockProps {}
+
+const renderErrorContent = (error: ErrorBlockContent['error']) => {
+  if (error?.errorContentType === 'Image' && error?.image) {
+    return <Img className="mb-7" image={error.image} />;
+  }
+
+  if (error?.errorContentType === 'Code' && error.code) {
+    return <div className="text-title-extra gradient-color-text">{error.code}</div>;
+  }
+
+  return null;
+};
+
+export const ErrorBlock = JSX<ErrorBlockProps>(
+  ({ context, className = '', title, subtitle, error, button }) => {
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
+
+    return (
+      <section className={`flex flex-col justify-center items-center ${className}`} role="listitem">
+        <div className="flex justify-center mb-7">{renderErrorContent(error)}</div>
+        {title ? <Heading headingType="h1" className="text-left mb-4" title={title} /> : null}
+        {subtitle ? <div className="text-xl-light text-left mb-7">{subtitle}</div> : null}
+        {button?.text ? (
+          <Button
+            className="py-4 px-9"
+            version={button?.version}
+            {...useLink({ router, handlerDecorator }, button)}
+          >
+            {button.text}
+          </Button>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -0,0 +1,38 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { EmptyOption } from '../../model/EmptyOptionType';
+
+/**
+ * @title Изображение
+ */
+export type ErrorImageDef = {
+  /** @default Image */
+  errorContentType: 'Image';
+  /** @title Изображение */
+  image?: Picture;
+};
+
+/**
+ * @title Код ошибки
+ */
+export type ErrorCodeDef = {
+  /** @default Code */
+  errorContentType: 'Code';
+  /** @title Код ошибки */
+  code?: number;
+};
+export type ErrorContentDef = EmptyOption | ErrorImageDef | ErrorCodeDef;
+
+/**
+ * @title Блок Ошибка
+ */
+export interface ErrorBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  subtitle?: string;
+  /** @title Вид контента */
+  error?: ErrorContentDef;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}

package/src/components/OfficeServicesBlock/OfficeServicesBlock.example.json

@@ -0,0 +1,33 @@
+{
+  "title": "Услуги",
+  "officesList": [
+    {
+      "text": "Обслуживание физических лиц",
+      "icon": { "icon": "CardTickIcon" }
+    },
+    {
+      "text": "Обслуживание юридических лиц",
+      "icon": { "icon": "EmptyWalletChangeIcon" }
+    },
+    {
+      "text": "Продажа монет из драгоценных металлов",
+      "icon": { "icon": "UserTickIcon" }
+    },
+    {
+      "text": "Аренда индивидуальных сейфовых ячеек",
+      "icon": { "icon": "UserTickIcon" }
+    },
+    {
+      "text": "Операции с обезличенными металлическими счетами",
+      "icon": { "icon": "ShieldTickIcon" }
+    },
+    {
+      "text": "Операции со слитками драгоценных металлов",
+      "icon": { "icon": "ShieldTickIcon" }
+    },
+    {
+      "text": "Передача фото и голоса в Единую биометрическую систему",
+      "icon": { "icon": "ShieldTickIcon" }
+    }
+  ]
+}