@redneckz/wildless-cms-uni-blocks 0.3.91 → 0.3.93

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -15,7 +15,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
 
     return (
       <div className={className}>
-        <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
+        <span className="text-primary-text font-medium text-sm">{title}</span>
         {links?.length ? (
           <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (

package/src/components/Footer/HorizontalNavigation.tsx

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

package/src/components/Footer/HorizontalNavigationLink.tsx

@@ -10,7 +10,7 @@ interface HorizontalNavigationLinkProps extends LinkProps {
 export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+      className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Footer/MediaButton.tsx

@@ -51,7 +51,7 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' })
   const classes =
     version === 'secondary'
       ? 'bg-secondary-light hover:bg-secondary-hover'
-      : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
+      : 'border-solid border-[1px] border-main-divider hover:border-transparent hover:bg-primary-main';
 
   const isPrimary = version === 'primary';
 

package/src/components/Footer/Sitemap.tsx

@@ -19,7 +19,7 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, context }) =>
   };
 
   return (
-    <div className={`flex items-start justify-between gap-11 xl:gap-5 ${className}`}>
+    <div className={`flex items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
       {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
     </div>
   );
@@ -29,9 +29,9 @@ const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator
   const { text, href, items, target } = c;
 
   return (
-    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-[14px]">
+    <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">
       <a
-        className="block font-sans leading-5 text-l text-primary-text no-underline"
+        className="block leading-5 text-l text-primary-text hover:text-primary-main no-underline"
         href={href}
         target={target || '_self'}
       >
@@ -50,7 +50,7 @@ interface ColumnItemProps extends LinkProps {
 
 const ColumnItem = JSX<ColumnItemProps>(({ text, href, target, index }) => (
   <a
-    className="block font-sans text-l-light text-secondary-text hover:text-primary-main no-underline"
+    className="block text-l-light text-secondary-text hover:text-primary-main no-underline"
     href={href}
     target={target || '_self'}
   >

package/src/components/Footer/SocialMedia.tsx

@@ -16,7 +16,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
     const { handlerDecorator } = context;
 
     return (
-      <div>
+      <div className="font-sans">
         <div className={`flex gap-2.5 ${className}`}>
           {media?.map((_, index) => (
             <MediaButton

package/src/components/Footer/TextInformation.mobile.tsx

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">
-        <span className="font-sans font-normal text-xs text-secondary-text">
+        <span className="font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>

package/src/components/Footer/TextInformation.tsx

@@ -10,7 +10,7 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5">
-        <span className="font-sans font-light text-xs text-secondary-text">
+        <span className="font-light text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>

package/src/components/Footer/TextInformationLink.tsx

@@ -10,7 +10,7 @@ interface TextInformationLinkProps extends LinkProps {
 export const TextInformationLink = JSX<Partial<TextInformationLinkProps>>(
   ({ className = '', index, text, href, target, onClick }) => (
     <a
-      className={`font-sans text-xs text-secondary-text visited:text-secondary-text hover:text-primary-text inline-block no-underline max-w-[292px] ${className}`}
+      className={`text-xs text-secondary-text visited:text-secondary-text hover:text-primary-main inline-block no-underline max-w-[292px] ${className}`}
       href={href}
       target={target}
       onClick={onClick}

package/src/components/Header/Header.tsx

@@ -35,8 +35,9 @@ export const Header = JSX<HeaderProps>(
     const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
-    const activeTopItem = mergedItems.find(isTopItemActive(router));
-
+    const [firstPortal] = mergedItems;
+    // Если по слагу невозможно понять к какому подпорталу этот слаг относиться, то выбираем первый подпортал.
+    const activeTopItem = mergedItems.find(isTopItemActive(router)) || firstPortal;
     const topMenu = mergedItems.map((_, i) => (
       <TopItem
         key={String(i)}

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconVersion } from '../../model/IconVersion';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
@@ -50,22 +50,24 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           bgColor={bgColor}
         />
         <HeaderSecondaryMenuButton
-          className={`mr-5 ${COLORS_MAP[bgColor]}`}
+          className={`mr-5 group ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
           <Img
             image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
-            className="h-full"
+            className="h-full pointer-events-none"
+            imageClassName="group-hover:text-primary-main pointer-events-none"
             asSVG
           />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
-          className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
+          className={`${LINKS_COLORS_MAP[bgColor]} group min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
           <Img
             image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
-            className="h-full bg-secondary-light rounded-full"
+            className="h-full bg-main-divider rounded-full pointer-events-none"
+            imageClassName="group-hover:text-primary-main"
             asSVG
           />
         </HeaderSecondaryMenuButton>

package/src/components/Header/HeaderSubMenu.tsx

@@ -39,7 +39,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [],
   };
 
   return (
-    <nav className="relative mt-5">
+    <nav className="relative mt-6">
       <div className="overflow-hidden whitespace-nowrap mr-52 pb-3">
         {subItems.map((_, i) => (
           <IntersectionObserverTag

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Headline } from '../Headline/Headline';
+import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {

package/src/components/ProductBlock/ProductBlock.tsx

@@ -36,10 +36,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
   return (
     <BlockWrapper
       context={context}
-      className={`font-sans overflow-hidden pt-[50px] pl-[50px] pb-[50px] pr-[7.5rem] box-border
-      ${backwardButton?.text ? 'min-h-[542px] max-h-[542]' : 'min-h-[454px] max-h-[454px]'} ${
-        productBlockStyleMap[version]
-      } ${className}`}
+      className={`font-sans overflow-hidden p-[50px] flex flex-col box-border min-h-[528px] ${productBlockStyleMap[version]} ${className}`}
       {...otherProps}
     >
       {backwardButton?.text
@@ -64,12 +61,7 @@ export const ProductBlock = JSX<ProductBlockProps>((props) => {
           )}
         </div>
       ) : null}
-      <ProductBlockInner
-        context={context}
-        version={version}
-        {...otherProps}
-        className={backwardButton?.text ? 'pb-[88px]' : ''}
-      />
+      <ProductBlockInner context={context} version={version} {...otherProps} />
     </BlockWrapper>
   );
 });

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -13,7 +13,7 @@ export function renderBackwardButton(
   const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
 
   return (
-    <div className={`flex items-center ${className}`}>
+    <div className={`flex items-center cursor-pointer ${className}`} onClick={onClick}>
       <Button
         version={version}
         rounded
@@ -21,7 +21,6 @@ export function renderBackwardButton(
         ariaLabel={text}
         href={href}
         target={target}
-        onClick={onClick}
       >
         <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>

package/src/components/ProductTile/ProductTile.tsx

@@ -57,7 +57,7 @@ export const ProductTile = JSX<ProductTileProps>(
           <ButtonSection
             context={context}
             buttons={buttons}
-            className="flex self-end mt-5 gap-4 z-[1]"
+            className="flex self-end mt-5 gap-4 z-[1] text-l"
           />
         ) : null}
         {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
@@ -96,7 +96,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
   };
 
   return (
-    <div key={String(i)} className={`${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
+    <div key={String(i)} className={`text-m ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
     </div>
   );

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -0,0 +1,9 @@
+import { context } from '../../react/setup-fixture';
+import { SafeDepositRental } from './SafeDepositRental';
+export default {
+  default: (
+    <div className="container grid grid-cols-12 mb-1">
+      <SafeDepositRental className="col-span-12" context={context} />
+    </div>
+  ),
+};

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useSafeDepositRental } from '../../hooks/useSafeDepositRental';
+import type { UniBlockProps } from '../../types';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { SafeDepositRentalContent } from './SafeDepositRentalContent';
+import { SafeDepositRentalForm } from './SafeDepositRentalForm';
+import { SafeDepositRentalTotal } from './SafeDepositRentalTotal';
+
+export interface SafeDepositRentalProps extends SafeDepositRentalContent, UniBlockProps {}
+
+const DEFAULT_DAYS = 26;
+
+export const SafeDepositRental = JSX<SafeDepositRentalProps>(
+  ({ context, className = '', ...rest }) => {
+    const [days, setDays] = context.useState(DEFAULT_DAYS);
+    const data = useSafeDepositRental(context.useAsyncData);
+
+    return (
+      <BlockWrapper context={context} className={`bg-white px-8 py-12 ${className}`} {...rest}>
+        <div className="flex justify-between align-top mb-6">
+          {data?.cities?.length ? (
+            <SafeDepositRentalForm {...data} days={days} setDays={setDays} context={context} />
+          ) : null}
+          <SafeDepositRentalTotal days={days} />
+        </div>
+        <p className="text-button font-light text-secondary-text">
+          Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег
+          или процедуры ипотечной сделки
+        </p>
+      </BlockWrapper>
+    );
+  },
+);

package/src/components/SafeDepositRental/SafeDepositRentalContent.ts

@@ -0,0 +1,7 @@
+/**
+ * @title Аренда сейфовых ячеек
+ */
+export interface SafeDepositRentalContent {
+  /** @title Заголовок */
+  title?: string;
+}

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -0,0 +1,164 @@
+import { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { InputRange } from '../../ui-kit/InputRange/InputRange';
+import { Radio } from '../../ui-kit/Radio/Radio';
+import { Select } from '../../ui-kit/Select/Select';
+import { SelectOption } from '../../ui-kit/Select/SelectOption';
+
+export type SafeDepositRentalFormProps = UniBlockProps;
+
+export const SafeDepositRentalForm = ({
+  cities,
+  cellDimensions,
+  cellOptions,
+  days,
+  setDays,
+  context,
+}) => {
+  return (
+    <div className="flex-1 mr-9">
+      {cities.length ? renderCitiesOffices(cities, context) : null}
+      {renderRentalPeriod(days, setDays)}
+      {cellDimensions.length && cellOptions.length
+        ? renderDimensionsOptions(cellDimensions, cellOptions, context)
+        : null}
+      <span className="text-secondary-text font-light">Тип договора</span>
+      <div className="flex justify-between items-center mt-5">
+        {renderRadioButtons(context)}
+        <Button text="Офисы на карте" version="primary" />
+      </div>
+    </div>
+  );
+};
+
+const renderCitiesOffices = (cities, context) => {
+  const [selectedCity, setSelectedCity] = context.useState(cities[0].city);
+
+  const setSelected = (_) => setSelectedCity(_);
+
+  const offices = cities.find((_) => _.city === selectedCity).offices;
+
+  return (
+    <div className="flex justify-between mb-6">
+      <div className="w-full mr-4">
+        {cities.length
+          ? renderSelect({
+              data: cities,
+              field: 'city',
+              selected: selectedCity,
+              setSelected,
+              label: 'Город',
+            })
+          : null}
+      </div>
+      <div className="w-full">
+        {offices.length
+          ? renderSelect({
+              data: offices,
+              field: 'office',
+              selected: offices[0],
+              setSelected,
+              label: 'Отделение',
+            })
+          : null}
+      </div>
+    </div>
+  );
+};
+
+const renderDimensionsOptions = (cellDimensions, cellOptions, context) => {
+  const [selectedDimension, setSelectedDimension] = context.useState(cellDimensions[0].dimension);
+  const [selectedOption, setSelectedOption] = context.useState(cellOptions[0].option);
+
+  return (
+    <div className="flex justify-between mb-6">
+      <div className="mr-4 w-full">
+        {cellDimensions.length
+          ? renderSelect({
+              data: cellDimensions,
+              field: 'dimension',
+              selected: selectedDimension,
+              setSelected: setSelectedDimension,
+              label: 'Размер ячейки',
+            })
+          : null}
+      </div>
+      <div className="w-full">
+        {cellOptions.length
+          ? renderSelect({
+              data: cellOptions,
+              field: 'option',
+              selected: selectedOption,
+              setSelected: setSelectedOption,
+              label: 'Параметры ячейки, мм (ВхШхД)',
+            })
+          : null}
+      </div>
+    </div>
+  );
+};
+
+interface SelectProps {
+  data: any[];
+  field: string;
+  selected: string;
+  setSelected: (value: string) => void;
+  label: string;
+}
+
+const renderSelect = (props: SelectProps) => {
+  const { data, field, selected, setSelected, label } = props;
+
+  return (
+    <div>
+      <span className="block font-light text-m mb-2">{label}</span>
+      <Select
+        className="h-14 border border-gray p-4 rounded-md text-m-sm w-full cursor-pointer"
+        value={selected}
+        onChange={(_) => setSelected(_)}
+      >
+        {data.map((_, i) => (
+          <SelectOption key={String(i)} value={_?.[field]}>
+            {_?.[field]}
+          </SelectOption>
+        ))}
+      </Select>
+    </div>
+  );
+};
+
+export const renderRentalPeriod = (days, setDays) => {
+  const items = ['От 1 дня', 'До 365 дней'];
+
+  return (
+    <div className="mb-6">
+      <span className="block font-light text-m mb-[3px]">Срок аренды</span>
+      <InputRange min={1} max={365} value={days} items={items} onChange={setDays} />
+    </div>
+  );
+};
+
+const renderRadioButtons = (context) => {
+  const [selected, setSelected] = context.useState('option1');
+  const onChange = (_: React.ChangeEvent<HTMLInputElement>) => setSelected(_.target.value);
+
+  return (
+    <div>
+      <Radio
+        className="mb-2"
+        name="contractType"
+        text="Простое хранение"
+        value="option1"
+        checked={selected === 'option1'}
+        onChange={onChange}
+      />
+      <Radio
+        name="contractType"
+        text="Сделка с недвижимостью"
+        value="option2"
+        checked={selected === 'option2'}
+        onChange={onChange}
+      />
+    </div>
+  );
+};

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -0,0 +1,57 @@
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img/Img';
+
+export type SafeDepositRentalTotalProps = UniBlockProps;
+
+type Days = {
+  days: number;
+};
+
+export const SafeDepositRentalTotal = ({ days }: Days) => {
+  const price = calculatePrice(days);
+
+  return (
+    <div className="flex flex-col justify-between">
+      <div className="flex">
+        {renderTotal('Аренда за', days, 'mr-11')}
+        {renderTotal('Цена', price + ' ₽')}
+      </div>
+      <div className="bg-primary-main px-10 pt-10 pb-4 text-center">
+        <Img image={{ icon: 'PackA4' }} width="290" height="257" asSVG />
+
+        <span className="font-light text-white opacity-80 mt-2 inline-block">
+          На рисунки изображена пачка<br></br> листов формата А4
+        </span>
+      </div>
+    </div>
+  );
+};
+
+const renderTotal = (label, total, className = '') => {
+  return (
+    <div className={className}>
+      <span className="block font-light text-m mb-1">{label}</span>
+      <span className="text-h3">{total}</span>
+    </div>
+  );
+};
+
+const calculatePrice = (days: number) => {
+  let TariffType = 1;
+
+  switch (true) {
+    case days > 30 && days <= 90:
+      TariffType = 2;
+      break;
+
+    case days > 90 && days <= 180:
+      TariffType = 3;
+      break;
+
+    case days > 180 && days <= 365:
+      TariffType = 4;
+      break;
+  }
+
+  return days * TariffType;
+};

package/src/components/StepsBlock/StepsBlock.example.json

@@ -14,6 +14,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -25,6 +30,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     },
     {
@@ -36,6 +46,11 @@
           "height": 48
         },
         "format": "webp"
+      },
+      "button": {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
       }
     }
   ],

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -28,6 +28,7 @@ export default {
         context={context}
         title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
         steps={steps.slice(0, 3)}
+        version="secondary"
       />
     </div>
   ),
@@ -43,19 +44,19 @@ export default {
             label: 'В мобильном приложении или интернет-банке',
             description: 'Для всех клиентов Россельхозбанка',
             icon: { icon: 'SignDocsIcon' },
-            button: { text: 'Войти в интернет-банк', href: 'https://www.rshb.ru/' },
+            button: { text: 'Войти в интернет-банк' },
           },
           {
             label: 'Через Госуслуги',
             description: 'При наличии данных в Единой биометрической системе',
             icon: { icon: 'ClockIcon' },
-            button: { text: 'Оформить', href: 'https://www.rshb.ru/' },
+            button: { text: 'Оформить' },
           },
           {
             label: 'В офисах Россельхозбанка',
             description: 'Откройте вклад',
             icon: { icon: 'ComfortableCompIcon' },
-            button: { text: 'Офисы на карте', href: 'https://www.rshb.ru/' },
+            button: { text: 'Офисы на карте' },
           },
         ]}
       />

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -6,7 +6,7 @@ import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import { checkIsIconRenderable } from '../../utils/checkIsIconRenderable';
-import { getStyleMap } from './StepsBlockStyleMaps';
+import { STEPS_BLOCK_STYLE_MAPS } from './StepsBlockStyleMaps';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -30,7 +30,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     size = 'normal',
     version = 'primary',
   }) => {
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <section
@@ -62,7 +62,7 @@ const renderStepTitle =
   (step: Step, i: number, steps: Step[]) => {
     const isLastStep = steps.length - 1 === i;
     const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-    const styleMap = getStyleMap(version);
+    const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
 
     return (
       <div key={String(i)}>
@@ -93,7 +93,7 @@ const renderStepTitle =
   };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const styleMap = getStyleMap(version);
+  const styleMap = STEPS_BLOCK_STYLE_MAPS[version];
   const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';