@redneckz/wildless-cms-uni-blocks 0.3.37 → 0.3.38

package/src/components/GracePeriod/GracePeriod.fixture.tsx

@@ -0,0 +1,109 @@
+import { context } from '../../setup-fixture';
+
+import type { Picture } from '../../model/Picture';
+import { GracePeriod } from './GracePeriod';
+import type { GracePeriodContent } from './GracePeriodContent';
+
+const august: Picture = {
+  src: 'calendar/august.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const september: Picture = {
+  src: 'calendar/september.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const october: Picture = {
+  src: 'calendar/october.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const november: Picture = {
+  src: 'calendar/november.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+const december: Picture = {
+  src: 'calendar/december.png',
+  format: 'webp',
+  size: {
+    width: 210,
+  },
+  alt: 'Пример использования «Карты для покупок в рассрочку»',
+};
+
+export const GRACE_PERIOD: GracePeriodContent = {
+  title: 'Пример использования «Карты для покупок в рассрочку»:',
+  description: 'Необязательное описание блока',
+  calendar: [
+    {
+      blackText: '1 декабря — беспроцентный период',
+      greenText: 'начинается с первого числа каждого месяца',
+      month: [
+        {
+          name: 'Август',
+          image: august,
+        },
+      ],
+    },
+    {
+      blackText: '25 сентября и 25 октября — обязательный платеж 25 числа следующих месяцев',
+      greenText: '(минимальный платеж, 3% от суммы задолженности)',
+      month: [
+        {
+          name: 'Сентябрь',
+          image: september,
+        },
+        {
+          name: 'Октябрь',
+          image: october,
+        },
+      ],
+    },
+    {
+      blackText: '25 ноября — последний день',
+      greenText: 'беспроцентного 3-х месячного периода',
+      month: [
+        {
+          name: 'Ноябрь',
+          image: november,
+        },
+      ],
+    },
+    {
+      blackText: '25 декабря — обязательный платеж в соответствии с тарифом',
+      greenText: '',
+      month: [
+        {
+          name: 'Декабрь',
+          image: december,
+        },
+      ],
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GracePeriod className="col-span-12" context={context} {...GRACE_PERIOD} />
+    </div>
+  ),
+};

package/src/components/GracePeriod/GracePeriod.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { GracePeriodContent } from './GracePeriodContent';
+
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface GracePeriodProps extends GracePeriodContent, UniBlockProps {}
+
+export const GracePeriod = JSX<GracePeriodProps>(
+  ({ className = '', title, description, calendar, anchor = null }) => {
+    return (
+      <section className={`bg-white p-16 pt-12 ${className}`} id={anchor}>
+        <Heading headingType="h2" className="text-center" title={title} />
+        <div className="font-light text-base-md text-center mt-3">{description}</div>
+        {renderCalendar(calendar)}
+      </section>
+    );
+  },
+);
+
+const renderCalendar = (calendar) => {
+  const colCount =
+    calendar.reduce((accumulator, currentValue) => accumulator + currentValue.month.length, 0) || 1;
+  const colSize = 100 / colCount;
+
+  const mappedCalendar = calendar.map((_) => ({
+    ..._,
+    flexBasis: `${_.month.length * colSize}%`,
+  }));
+
+  return (
+    <div className="w-full flex flex-col justify-center mt-14">
+      <div className="flex w-full mb-3 font-light text-m-title-md mb-3 text-center">
+        {mappedCalendar.map((_) => renderMonthNames(_, colSize))}
+      </div>
+      <div className="flex w-full">
+        {mappedCalendar.map((_, ind) => (
+          <div
+            key={`monthItem-${ind}`}
+            className="pr-3 mr-3 border-r border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+            style={{ flexBasis: _.flexBasis }}
+          >
+            <div className="flex">{renderMonthImages(_)}</div>
+            <div className="font-light text-sm text-primary-text mt-3">
+              <span>{_.blackText}</span>&thinsp;
+              <span className="text-primary-main">{_.greenText}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const renderMonthNames = (item, colSize) =>
+  item.month.map((_) => (
+    <div key={`monthName-${_.name}`} style={{ flexBasis: `${colSize}%` }}>
+      {_.name}
+    </div>
+  ));
+const renderMonthImages = (item) =>
+  item.month.map((_) => (
+    <div
+      key={`monthImage-${_.image.src}`}
+      className="max-h-[207px] border-r-[1px] pr-3 mr-3 border-r-gray/100 last:border-r-0 last:pr-0 last:mr-0"
+    >
+      <Img image={_.image} className="flex" />
+    </div>
+  ));

package/src/components/GracePeriod/GracePeriodContent.ts

@@ -0,0 +1,27 @@
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { Picture } from '../../model/Picture';
+
+interface Month {
+  /** @title Название месяца */
+  name?: string;
+  /** @title Изображение календарного месяца */
+  image?: Picture;
+}
+
+interface CalendarItem {
+  month?: Month[];
+  /** @title Основной текст */
+  blackText?: string;
+  /** @title Вспомогательный текст */
+  greenText?: string;
+}
+
+/**
+ * @title Льготный период
+ */
+export interface GracePeriodContent extends HeadingContent {
+  /** @title Описание */
+  description?: string;
+  /** @title Календарь */
+  calendar?: CalendarItem[];
+}

package/src/components/Header/HeaderSubMenu.tsx

@@ -4,6 +4,7 @@ import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
+import { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { headerSubMenuObserver } from './HeaderSubMenuObserver';
 
@@ -19,6 +20,10 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgCol
   const { handlerDecorator } = context;
 
   setTimeout(() => {
+    if (isSSR()) {
+      return;
+    }
+
     const headerSubMenu = globalThis.document.querySelectorAll('[data-item-name=header-submenu]');
     headerSubMenu.forEach((_) => {
       headerSubMenuObserver?.observe(_);

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -3,7 +3,6 @@ import type { UniBlockProps } from '../../types';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { MobileAppTileContent } from './MobileAppTileContent';
@@ -31,15 +30,15 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
           title={
             title && (
               <Heading
-                headingType={getTileHeadingType(className)}
+                headingType="h3"
                 title={title}
-                className={`whitespace-pre-wrap max-w-[600px] mb-7`}
+                className={`whitespace-pre-wrap max-w-[600px] mb-[30px]`}
               />
             )
           }
           buttons={
             buttons?.length ? (
-              <ButtonSection context={context} buttons={buttons} className="flex mt-7 gap-4" />
+              <ButtonSection context={context} buttons={buttons} className="flex mt-[30px] gap-4" />
             ) : null
           }
         >
@@ -52,7 +51,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
                   title={title}
                   width="164"
                   height="164"
-                  className="w-[90px] h-[90px] min-w-[90px] min-h-[90px] bg-secondary-light"
+                  className="w-[92px] h-[92px] min-w-[92px] min-h-[92px] bg-secondary-light"
                 />
               </a>
             )}

package/src/ui-kit/Button/ButtonInner.tsx

@@ -14,7 +14,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {isWithText(props) ? (
         <div>
           <div className="text-m-2xs font-light text-left">{aboveText}</div>
-          <div className="text-button-sm text-left">{text}</div>
+          <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
     </div>