@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.8

package/src/components/Blocks.ts

@@ -3,8 +3,8 @@ import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { Calculator } from './Calculator/Calculator';
-import { Catalog } from './Catalog/Catalog';
 import { CardTransfer } from './CardTransfer/CardTransfer';
+import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -17,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';
@@ -31,6 +32,7 @@ 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,
@@ -66,4 +68,6 @@ export const Blocks = {
   BonusBenefitsBlock,
   SafeDepositRental,
   Tabs,
+  ErrorBlock,
+  OfficeServicesBlock,
 };

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

@@ -42,7 +42,7 @@ export const Calculator = JSX<CalculatorProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text ${className}`}
+        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`}
         {...rest}
       >
         <div className="bg-white">
@@ -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/ContentPage/ContentPage.fixture.mobile.tsx

@@ -13,7 +13,7 @@ export default {
       className="bg-secondary-text"
       context={mobileContext}
       blocksRegistry={Blocks}
-      data={normalizePage(data as ContentPageDef)}
+      data={normalizePage(data as ContentPageDef, Blocks)}
     />
   ),
 };

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

@@ -32,7 +32,7 @@ export default {
       className="bg-main"
       context={context}
       blocksRegistry={Blocks}
-      data={normalizePage(data as ContentPageDef) as ContentPageDef}
+      data={normalizePage(data as ContentPageDef, Blocks)}
     />
   ),
   editor: (
@@ -41,7 +41,7 @@ export default {
         className="bg-transparent"
         context={context}
         blocksRegistry={Blocks}
-        data={normalizePage(data as ContentPageDef)}
+        data={normalizePage(data as ContentPageDef, Blocks)}
         blockDecorator={blockDecorator}
       />
     </div>

package/src/components/ContentPage/isBlockInRegistry.ts

@@ -1,3 +1,5 @@
-export function isBlockInRegistry<T>(blockType: string | undefined, registry: Record<string, T>) {
+import { BlocksRegistry } from './ContentPage';
+
+export function isBlockInRegistry(blockType: string | undefined, registry: BlocksRegistry) {
   return (blockType || '') in registry;
 }

package/src/components/ContentPage/normalizePage.mobile.ts

@@ -1,20 +1,21 @@
 import type { BlockDef, ContentPageDef, Slot } from '../../types';
-import { Blocks } from '../Blocks';
+import { BlocksRegistry } from './ContentPage';
 import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export function normalizePage(
   contentPage: ContentPageDef | undefined | null,
+  blocksRegistry: BlocksRegistry,
 ): ContentPageDef | undefined {
   if (!contentPage) {
     return undefined;
   }
 
-  const { blocks, slots } = contentPage;
+  const { blocks = [], slots } = contentPage;
 
   return {
     ...contentPage,
-    blocks: getMobileBlocks(blocks),
+    blocks: getMobileBlocks(blocks, blocksRegistry),
     slots:
       slots &&
       Object.keys(slots).reduce(
@@ -22,7 +23,7 @@ export function normalizePage(
           ...res,
           [key]: {
             ...slots[key],
-            blocks: getMobileBlocks((slots[key] as Slot).blocks),
+            blocks: getMobileBlocks((slots[key] as Slot).blocks || [], blocksRegistry),
           },
         }),
         {},
@@ -30,11 +31,12 @@ export function normalizePage(
   };
 }
 
-function getMobileBlocks(blocks?: BlockDef[]) {
+function getMobileBlocks(blocks: BlockDef[], blocksRegistry: BlocksRegistry) {
   return blocks
     ?.filter(
       (block) =>
-        isBlockInRegistry(block?.type || block?.mobile?.type, Blocks) && !block.mobile?.hidden,
+        isBlockInRegistry(block?.type || block?.mobile?.type, blocksRegistry) &&
+        !block.mobile?.hidden,
     )
     .map(normalizeBlock);
 }

package/src/components/ContentPage/normalizePage.ts

@@ -1,20 +1,21 @@
 import type { BlockDef, ContentPageDef, Slot } from '../../types';
-import { Blocks } from '../Blocks';
+import { BlocksRegistry } from './ContentPage';
 import { isBlockInRegistry } from './isBlockInRegistry';
 import { normalizeBlock } from './normalizeBlock';
 
 export function normalizePage<T extends ContentPageDef | undefined | null>(
   contentPage: T,
+  blocksRegistry: BlocksRegistry,
 ): ContentPageDef | undefined {
   if (!contentPage) {
     return undefined;
   }
 
-  const { blocks, slots } = contentPage;
+  const { blocks = [], slots } = contentPage;
 
   return {
     ...contentPage,
-    blocks: getDesktopBlocks(blocks),
+    blocks: getDesktopBlocks(blocks, blocksRegistry),
     slots:
       slots &&
       Object.keys(slots).reduce(
@@ -22,7 +23,7 @@ export function normalizePage<T extends ContentPageDef | undefined | null>(
           ...res,
           [key]: {
             ...slots[key],
-            blocks: getDesktopBlocks((slots[key] as Slot).blocks),
+            blocks: getDesktopBlocks((slots[key] as Slot).blocks || [], blocksRegistry),
           },
         }),
         {},
@@ -30,6 +31,8 @@ export function normalizePage<T extends ContentPageDef | undefined | null>(
   };
 }
 
-function getDesktopBlocks(blocks?: BlockDef[]) {
-  return blocks?.filter((block) => isBlockInRegistry(block?.type, Blocks)).map(normalizeBlock);
+function getDesktopBlocks(blocks: BlockDef[], blocksRegistry: BlocksRegistry) {
+  return blocks
+    ?.filter((block) => isBlockInRegistry(block?.type, blocksRegistry))
+    .map(normalizeBlock);
 }

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 { EmptyOption } from '../../model/EmptyOptionType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @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/Footer/HorizontalNavigation.tsx

@@ -21,7 +21,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
-                className="font-l-light max-w-[292px]"
+                className="text-l-light max-w-[292px]"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}

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" }
+    }
+  ]
+}

package/src/components/OfficeServicesBlock/OfficeServicesBlock.fixture.tsx

@@ -0,0 +1,44 @@
+import { context } from '../../react/setup-fixture';
+import { OfficeServicesBlock } from './OfficeServicesBlock';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <OfficeServicesBlock
+        className="col-span-4"
+        context={context}
+        title="Услуги"
+        servicesList={[
+          {
+            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' },
+          },
+        ]}
+      />
+    </div>
+  ),
+};