@redneckz/wildless-cms-uni-blocks 0.3.68 → 0.3.70

package/src/components/Footer/MediaButton.tsx

@@ -52,7 +52,7 @@ interface MediaButtonProps {
   version?: BlockVersion;
 }
 
-export const MediaButton = JSX<MediaButtonProps>(({ href, version }) => {
+export const MediaButton = JSX<MediaButtonProps>(({ href, version = 'primary' }) => {
   const { icon, width, height, label } =
     ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
@@ -60,18 +60,30 @@ export const MediaButton = JSX<MediaButtonProps>(({ href, version }) => {
 
   const classes =
     version === 'secondary'
-      ? 'text-white hover:text-primary-main hover:bg-white'
-      : 'text-primary-main hover:text-white hover:bg-primary-main hover:border-primary-main';
+      ? 'bg-secondary-light hover:bg-secondary-hover'
+      : 'border-main-divider border-solid border-[1px] hover:bg-primary-main';
+
+  const isPrimary = version === 'primary';
 
   return (
     <a
-      className={` flex items-center justify-center border border-solid rounded-md border-main-divider no-underline outline-none w-14 h-14 box-border ${classes}`}
+      className={`flex items-center justify-center rounded-md w-14 h-14 group box-border ${classes} ${
+        isPrimary ? 'hover:text-black' : ''
+      }`}
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {icon ? <Img image={icon} width={width} height={height} asSVG className="block" /> : null}
+      {icon ? (
+        <Img
+          image={{ ...icon, iconVersion: 'normal' }}
+          imageClassName={isPrimary ? 'group-hover:text-white' : ''}
+          width={width}
+          height={height}
+          asSVG
+        />
+      ) : null}
     </a>
   );
 });

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -1,4 +1,5 @@
 import type { Picture } from '../../model/Picture';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 interface Month {
   /** @title Название месяца */
@@ -29,9 +30,7 @@ interface CalendarItem {
 /**
  * @title Льготный период
  */
-export interface GracePeriodContent {
-  /** @title Заголовок */
-  title?: string;
+export interface GracePeriodContent extends HeadingContent {
   /** @title Описание */
   description?: string;
   /** @title Календарь */

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img/Img';
@@ -21,9 +21,9 @@ const LINKS_COLORS_MAP: Record<BgColorVersion, string> = {
   'bg-white': 'text-secondary-light hover:text-secondary-hover',
   transparent: 'text-white',
 };
-const LINKS_ICON_NAME_MAP: Record<BgColorVersion, IconName> = {
-  'bg-white': 'GridIcon',
-  transparent: 'GridIconWhite',
+const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
+  'bg-white': 'black',
+  transparent: 'white',
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
@@ -52,13 +52,21 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className={`mr-5 ${COLORS_MAP[bgColor]}`}
           ariaLabel="Поиск по сайту"
         >
-          <Img image="LoupeIcon" className="h-full" asSVG />
+          <Img
+            image={{ icon: 'LoupeIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            className="h-full"
+            asSVG
+          />
         </HeaderSecondaryMenuButton>
         <HeaderSecondaryMenuButton
           className={`${LINKS_COLORS_MAP[bgColor]} min-w-[32px] min-h-[32px]`}
           ariaLabel="Дополнительные ссылки"
         >
-          <Img image={LINKS_ICON_NAME_MAP[bgColor]} className="h-full" asSVG />
+          <Img
+            image={{ icon: 'GridIcon', iconVersion: LINKS_ICON_VERSION_MAP[bgColor] }}
+            className="h-full bg-secondary-light rounded-full"
+            asSVG
+          />
         </HeaderSecondaryMenuButton>
       </div>
     );

package/src/components/Header/HeaderTop.tsx

@@ -16,7 +16,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
         aria-label="Открыть меню"
       >
         <Img
-          image={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
+          image={{ icon: 'BurgerIcon', iconVersion: bgColor === 'bg-white' ? 'black' : 'white' }}
           className="text-primary-text"
           width="24"
           height="24"

package/src/components/Insurance/Insurance.example.json

@@ -0,0 +1,21 @@
+{
+  "title": "Заголовок",
+  "description": "Описание",
+  "insurance": 500000,
+  "benefits": [
+    {
+      "label": "Заголовок 1",
+      "description": "Описание 1",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    },
+    {
+      "label": "Заголовок 2",
+      "description": "Описание 2",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    }
+  ]
+}

package/src/components/Insurance/Insurance.fixture.tsx

@@ -1,11 +1,12 @@
-import { Insurance } from './Insurance';
+import { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import { Picture } from '../../model/Picture';
+import { Insurance } from './Insurance';
 
 const benefits: Benefit[] = [
   {
     label: 'Телесное повреждение',
+    description: 'Описание',
     icon: { icon: 'ShieldTickIcon' },
   },
   {
@@ -48,7 +49,7 @@ export default {
         description="Покрываемые риски программы «Защита вас и ваших близких»"
         benefits={benefits}
         image={image}
-        insuranceSum={500000}
+        sum={500000}
       />
       <Insurance
         context={context}
@@ -57,7 +58,7 @@ export default {
         description="Покрываемые риски программы «Защита вас и ваших близких»"
         benefits={benefits}
         image={image}
-        insuranceSum={500000}
+        sum={500000}
         monthLimit={25000}
       />
     </div>

package/src/components/Insurance/Insurance.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { InsuranceContent } from './InsuranceContent';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { InsuranceContent } from './InsuranceContent';
 
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
 export const Insurance = JSX<InsuranceProps>(
-  ({ className = '', title, description, image, benefits, insuranceSum, monthLimit }) => {
+  ({ className = '', title, description, image, benefits, sum, monthLimit }) => {
     return (
       <section className={`px-[100px] py-[50px] bg-white text-primary-text ${className}`}>
         {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
@@ -23,11 +23,9 @@ export const Insurance = JSX<InsuranceProps>(
               ) : null}
 
               <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
-                {insuranceSum
-                  ? renderValueBlock('Страховая сумма:', insuranceSum, Boolean(monthLimit))
-                  : null}
+                {sum ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
                 {monthLimit
-                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(insuranceSum))
+                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
                   : null}
               </div>
             </div>
@@ -50,8 +48,11 @@ function renderBenefit(benefit: Benefit, i: number) {
           asSVG
         />
       ) : null}
-      <div className="flex">
-        <div className="text-title-2xs">{benefit.label}</div>
+      <div>
+        {benefit?.label ? <div className="text-title-2xs">{benefit.label}</div> : null}
+        {benefit?.description ? (
+          <div className="mt-2 font-light text-secondary-text">{benefit.description}</div>
+        ) : null}
       </div>
     </div>
   );

package/src/components/Insurance/InsuranceContent.ts

@@ -1,14 +1,12 @@
 import type { Picture } from '../../model/Picture';
 import type { BenefitsBlockContent } from '../BenefitsBlock/BenefitsBlockContent';
+import type { InsuranceProps } from '../../model/Insurance';
 
-export type InsuranceContent = BenefitsBlockContent & {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Описание */
-  description?: string;
-  /** @title Ежемесячный лимит */
-  monthLimit?: number;
-  /** @title Страховая сумма */
-  insuranceSum?: number;
-  image?: Picture;
-};
+export type InsuranceContent = BenefitsBlockContent &
+  InsuranceProps & {
+    /** @title Заголовок */
+    title?: string;
+    /** @title Описание */
+    description?: string;
+    image?: Picture;
+  };

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -0,0 +1,44 @@
+{
+  "title": "Заголовок",
+  "button": {
+    "href": "https://rshb.ru",
+    "text": "Текст кнопки"
+  },
+  "insuranceTabs": [
+    {
+      "title": "Описание",
+      "card": [
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        }
+      ]
+    },
+    {
+      "title": "Описание",
+      "card": [
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        },
+        {
+          "sum": 200000,
+          "fee": 2100,
+          "icon": { "icon": "ActualBalanceIcon" }
+        }
+      ]
+    }
+  ]
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -0,0 +1,52 @@
+import { context } from '../../setup-fixture';
+import { InsuranceAmountBlock } from './InsuranceAmountBlock';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <InsuranceAmountBlock
+        className="col-span-12"
+        context={context}
+        title="Выбор страховой суммы"
+        button={{ href: 'https://rshb.ru', text: 'Выбрать программу' }}
+        insuranceTabs={[
+          {
+            title: 'Индивидуальный',
+            cards: [
+              {
+                sum: 200000,
+                fee: 2100,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+              {
+                sum: 200000,
+                fee: 2100,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+              {
+                sum: 200000,
+                fee: 2100,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+            ],
+          },
+          {
+            title: 'Семейный',
+            cards: [
+              {
+                sum: 400000,
+                fee: 3600,
+                icon: { icon: 'ActualBalanceIcon' },
+              },
+              {
+                sum: 600000,
+                fee: 3600,
+                icon: { icon: 'MoneyInsuranceIcon' },
+              },
+            ],
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -0,0 +1,84 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
+import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Button } from '../../ui-kit/Button/Button';
+
+export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent, UniBlockProps {}
+
+export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
+  ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
+    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+
+    return (
+      <section
+        id={anchor}
+        className={`box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white ${className}`}
+      >
+        {title ? <Heading className="text-center" title={title} headingType="h3" /> : null}
+        <div className="p-1.5 bg-secondary-light w-fit m-auto rounded-md mt-[34px]">
+          {insuranceTabs.map((item, i) =>
+            renderNavButton({
+              title: item?.title,
+              i,
+              activeSlideIndex,
+              onClick: () => setActiveSlideIndex(i),
+            }),
+          )}
+        </div>
+        <div
+          className="flex"
+          style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
+          role="list"
+        >
+          {renderInsuranceGalleries({
+            context,
+            className,
+            insuranceGalleries,
+          })}
+        </div>
+        {button?.text ? (
+          <div className="flex justify-center">
+            <Button
+              className="box-border p-4 h-14 w-full max-w-[240px]"
+              version={button?.version || 'primary'}
+              href={button.href}
+            >
+              {button.text}
+            </Button>
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);
+
+const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+  return insuranceGalleries?.length
+    ? insuranceGalleries.map((cards) => (
+        <InsuranceAmountBlockInner context={context} className={className} cards={cards} />
+      ))
+    : null;
+};
+
+function renderNavButton({ title, i, activeSlideIndex, onClick }) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'bg-primary-main text-white rounded-md'
+    : `text-secondary-text`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      aria-label={title}
+      className={`box-border px-4 py-3 text-m-md ${btnClassName}`}
+    >
+      {title}
+    </button>
+  );
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -0,0 +1,33 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { InsuranceProps } from '../../model/Insurance';
+
+/**
+ * @title Кнопка выбора программы
+ */
+export type cardItem = InsuranceProps & {
+  icon?: Picture;
+  /** @title Страховой взнос */
+  fee?: number;
+};
+
+/**
+ * @title Вкладка
+ */
+export interface InsuranceAmountBlockTabs {
+  /** @title Заголовок вкладки */
+  title?: string;
+  /** @title Содержимое вкладки */
+  cards?: cardItem[];
+}
+
+/**
+ * @title Страховые суммы
+ */
+export interface InsuranceAmountBlockContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Список вкладок */
+  insuranceTabs?: InsuranceAmountBlockTabs[];
+  button?: ButtonProps;
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -0,0 +1,157 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps, FuncReturnVoid } from '../../types';
+import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Img } from '../../ui-kit/Img/Img';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+
+export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
+
+type InsuranceGalleryProps = {
+  tabsShift: number;
+  cards: cardItem[];
+  activeSlideIndex: number;
+  isLastShift: boolean;
+  setActiveSlideIndex: FuncReturnVoid<number>;
+};
+
+type InsuranceSlideProps = {
+  slide: cardItem;
+  i: number;
+  activeSlideIndex: number;
+  onClick: FuncReturnVoid<MouseEvent>;
+};
+
+const arrowBtnStyle =
+  'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
+
+export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
+  ({ className = '', context, cards = [], anchor = null }) => {
+    const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
+    const [tabsShift, setTabsShift] = context.useState(0);
+
+    const handleNextClick = () => setTabsShift(tabsShift + 1);
+    const handlePrevClick = () => setTabsShift(tabsShift - 1);
+
+    const galleryLength = cards?.length;
+
+    const isGalleryScrollAvailable = cards?.length > 2;
+    const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
+    const isLastShift = galleryLength === tabsShift + 2;
+    const showPrevButton = tabsShift > 0;
+
+    return (
+      <section id={anchor} className={`min-w-full ${className}`}>
+        <div className="relative mt-7 overflow-hidden">
+          {galleryLength > 1
+            ? renderGallery({
+                tabsShift,
+                cards,
+                activeSlideIndex,
+                isLastShift,
+                setActiveSlideIndex,
+              })
+            : null}
+          {showPrevButton ? (
+            <div>
+              <ArrowButton
+                className={`${arrowBtnStyle} left-0 top-9`}
+                onClick={handlePrevClick}
+                ariaLabel="Пролистать влево"
+                data-block-control="scroll-left"
+              />
+              <div className="absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" />
+            </div>
+          ) : null}
+          {showNextButton ? (
+            <div>
+              <ArrowButton
+                className={`${arrowBtnStyle} right-0 top-9 rotate-180`}
+                onClick={handleNextClick}
+                ariaLabel="Пролистать вправо"
+                data-block-control="scroll-right"
+              />
+              <div className="absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" />
+            </div>
+          ) : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderGallery({
+  tabsShift,
+  cards,
+  activeSlideIndex,
+  isLastShift,
+  setActiveSlideIndex,
+}: InsuranceGalleryProps) {
+  const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+  return (
+    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000">
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]">
+        {cards.map((slide, i) =>
+          renderSlide({
+            slide,
+            i,
+            activeSlideIndex,
+            onClick: () => setActiveSlideIndex(i),
+          }),
+        )}
+      </div>
+    </div>
+  );
+}
+
+function renderSlide({ slide, i, activeSlideIndex, onClick }: InsuranceSlideProps) {
+  const isActiveBtn = i === activeSlideIndex;
+
+  const btnClassName = isActiveBtn
+    ? 'shadow-dark-blue/42 border-primary-main'
+    : `ease-in duration-300 border-main-stroke`;
+
+  return (
+    <button
+      type="button"
+      key={String(i)}
+      onClick={onClick}
+      className={`p-[30px] min-w-[460px] flex items-center bg-white border-solid border relative ${btnClassName}`}
+    >
+      {slide?.icon ? (
+        <Img
+          className={`h-[108px] w-[108px] p-3 rounded-full bg-secondary-light mr-[30px]`}
+          image={slide.icon}
+          width="24"
+          height="24"
+        />
+      ) : null}
+
+      <div className="flex gap-3.5">
+        {slide?.sum ? renderValueBlock('страховая сумма', slide.sum) : null}
+        {slide?.fee ? renderValueBlock('страховой взнос', slide.fee) : null}
+      </div>
+      {renderDoneIcon(isActiveBtn)}
+    </button>
+  );
+}
+
+function renderValueBlock(title, sum) {
+  return (
+    <div className="flex flex-col text-left">
+      <span className="whitespace-pre text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
+      <span className="whitespace-pre text-secondary-text font-light text-base mt-1">{title}</span>
+    </div>
+  );
+}
+
+function renderDoneIcon(isActive) {
+  return isActive ? (
+    <Img
+      className={`h-[24px] w-[24px] min-w-[24px] min-h-[24px] absolute right-4 top-4`}
+      image="DoneIcon"
+      width="24"
+      height="24"
+    />
+  ) : null;
+}

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -8,6 +8,9 @@ export function renderBackwardButton(
   version: BlockVersion,
   className: string,
 ) {
+  const iconVersion = version === 'primary' ? 'white' : 'black';
+  const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
+
   return (
     <div className={`flex items-center ${className}`}>
       <Button
@@ -17,7 +20,7 @@ export function renderBackwardButton(
         ariaLabel={button?.text}
         href={button?.href}
       >
-        <Img className="w-4 h-4" image={button?.icon || { icon: 'ArrowLeftIcon' }} asSVG />
+        <Img className="w-4 h-4" image={{ ...backwardIcon, iconVersion }} asSVG />
       </Button>
       {button?.text ? <span className="text-m-md font-light">{button.text}</span> : null}
     </div>

package/src/components/Recommendation/RecommendationCard.tsx

@@ -17,7 +17,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
   ({ context, className = '', title, description, items, image, version, socialMedia }) => {
     return (
       <section
-        className={`border border-solid box-border p-[30px] w-[524px] ${className}`}
+        className={`border border-solid box-border p-[30px] min-w-[524px] ${className}`}
         role="listitem"
       >
         <BaseTile

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

@@ -43,19 +43,19 @@ export default {
             label: 'В мобильном приложении или интернет-банке',
             description: 'Для всех клиентов Россельхозбанка',
             icon: { icon: 'SignDocsIcon' },
-            button: { text: 'Войти в интернет-банк' },
+            button: { text: 'Войти в интернет-банк', href: 'https://www.rshb.ru/' },
           },
           {
             label: 'Через Госуслуги',
             description: 'При наличии данных в Единой биометрической системе',
             icon: { icon: 'ClockIcon' },
-            button: { text: 'Оформить' },
+            button: { text: 'Оформить', href: 'https://www.rshb.ru/' },
           },
           {
             label: 'В офисах Россельхозбанка',
             description: 'Откройте вклад',
             icon: { icon: 'ComfortableCompIcon' },
-            button: { text: 'Офисы на карте' },
+            button: { text: 'Офисы на карте', href: 'https://www.rshb.ru/' },
           },
         ]}
       />