@redneckz/wildless-cms-uni-blocks 0.5.11 → 0.5.13

package/src/components/Gallery/Gallery.fixture.tsx

@@ -1,9 +1,9 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Img } from '../../ui-kit/Img/Img';
 import { Gallery } from './Gallery';
 import type { GalleryProps } from './GalleryProps';
-
 const isDotted = true;
 
 const image: Picture = {
@@ -28,7 +28,7 @@ const buttonPrimaryIcon: ButtonWithIconProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
-  icon: { icon: 'BankIcon' },
+  appendLeft: <Img image={{ icon: 'BankIcon' }} width="24" height="24" asSVG />,
 };
 
 const defaultItems = [

package/src/components/Gallery/Gallery.mobile.tsx

@@ -1,14 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
-import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
-import type { GalleryProps } from './GalleryProps';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { getListStyle } from '../../ui-kit/List/ListItem';
+import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
+import type { GalleryProps } from './GalleryProps';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
@@ -84,12 +84,22 @@ function renderDescription(card: GalleryCardProps) {
   );
 }
 
+const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'bg-primary-text',
+  secondary: 'bg-white',
+  gray: 'bg-secondary-text',
+};
+
 function renderItems(items: GalleryItemProps[], isDotted, version: BlockVersion = 'primary') {
   return (
     <section className="mt-3">
       {items.map((item, i) => (
         <div key={String(i)}>
-          {isDotted ? <div className={getListStyle(version)} /> : null}
+          {isDotted ? (
+            <div
+              className={`rounded-full inline-block mr-3 mt-2 w-2 h-2 min-w-2 min-h-2 ${LIST_DOT_STYLE_MAP[version]}`}
+            />
+          ) : null}
           <span className="text-m font-medium">{item.title}</span>
           <span className={`text-s pl-2 ${version === 'primary' ? 'text-secondary-text' : ''}`}>
             {item.text}

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,64 +1,80 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import type { BlockVersion } from '../../model/BlockVersion';
+import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
-export const GalleryCardInner = JSX<GalleryCardProps>(
-  ({ title, description, image, items, button, version, isDotted = true }) => {
-    const titleStyleClasses = getTitleStyle(version);
+const ALIGN_TITLE: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
 
+export const GalleryCardInner = JSX<GalleryCardProps>(
+  ({
+    title,
+    headlineSmallVersion = 'XL_L',
+    description,
+    additionalDescription,
+    image,
+    items,
+    button,
+    version,
+    isDotted = true,
+    align = 'center',
+  }) => {
     return (
-      <div className="h-full flex flex-col justify-between text-center">
-        <div>
-          {image?.src ? (
-            <div className="flex justify-center">
-              <Img className="mb-6" image={image} />
-            </div>
-          ) : null}
-          {title ? renderCardTitle(title, titleStyleClasses) : null}
-          {description ? <div className={`text-m${title ? 'mt-2' : ''}`}>{description}</div> : null}
+      <div className={`h-full flex flex-col justify-between ${ALIGN_TITLE[align]}`}>
+        <div className="flex flex-col h-full">
+          {renderImage(image)}
+          {renderCardTitle(headlineSmallVersion, title)}
+          {renderDescription(description, title)}
+          {renderAdditionalDescription(additionalDescription)}
           {items?.length ? renderItems(items, isDotted, version) : null}
         </div>
-        {button?.text ? renderButton(button) : null}
+        {button ? renderButton(button) : null}
       </div>
     );
   },
 );
 
-function renderButton(button) {
-  return (
-    <Button
-      className="mt-6 w-full"
-      appendLeft={button.icon && <Img image={button.icon} width="24px" height="24px" asSVG />}
-      {...button}
-    />
-  );
-}
+const renderImage = (image?: Picture) =>
+  image?.src ? (
+    <div className="flex justify-center">
+      <Img className="mb-6" image={image} />
+    </div>
+  ) : null;
+
+const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
+  title ? <div className={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</div> : null;
 
-function renderCardTitle(title: string, className: string) {
-  return <div className={`text-xl-light m-0 ${className}`}>{title}</div>;
-}
+const renderDescription = (description?: string, title?: string) =>
+  description ? <div className={`text-base ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-function renderItems(
+const renderAdditionalDescription = (additionalDescription?: string) =>
+  additionalDescription ? (
+    <div className="text-m-light text-secondary-text mt-auto">{additionalDescription}</div>
+  ) : null;
+
+const renderButton = (button: ButtonWithIconProps) => (
+  <Button className="mt-6 w-full" {...button} />
+);
+
+const renderItems = (
   items: GalleryItemProps[],
   isDotted: boolean,
   version: BlockVersion = 'primary',
-) {
-  return (
-    <List
-      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
-      itemClassName="mt-1 text-left first:mt-0"
-      items={items.filter((item) => item?.text).map((item) => item.text as string)}
-      isDotted={isDotted}
-      version={version}
-    />
-  );
-}
-
-function getTitleStyle(version) {
-  return `text-xl-light m-0
-        ${version !== 'secondary' ? 'text-primary-text' : ''}
-      `;
-}
+) => (
+  <List
+    className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+    itemClassName="mt-1 text-left first:mt-0"
+    items={items.filter((item) => item?.text).map((item) => item.text as string)}
+    isDotted={isDotted}
+    version={version}
+  />
+);

package/src/components/Gallery/GalleryContainer.tsx

@@ -19,7 +19,15 @@ export interface GalleryCardData {
 }
 
 export const GalleryContainer = JSX<GalleryContainerProps>(
-  ({ context, title, description, cards = [], version = 'normal', activeCardIndex }) => {
+  ({
+    context,
+    title,
+    headlineVersion = 'L',
+    description,
+    cards = [],
+    version = 'normal',
+    activeCardIndex,
+  }) => {
     return (
       <div>
         <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
@@ -28,7 +36,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
           className="!p-0"
           title={title}
           description={description}
-          headlineVersion="L"
+          headlineVersion={headlineVersion}
           align="center"
         />
         <div

package/src/components/Gallery/GalleryContent.ts

@@ -1,8 +1,9 @@
+import { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineProps, HeadlineSmallProps } from '../../model/HeadlineType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 
 /**
  * @title Элемент списка
@@ -16,8 +17,10 @@ export interface GalleryItemProps {
 
 /**
  * @title Карточка
+ * @default {"headlineSmallVersion": "XL_L"}
  */
-export type GalleryCardProps = HeadlineCommonProps & {
+export type GalleryCardProps = HeadlineSmallProps & {
+  additionalDescription?: string;
   /**
    * @default {
    *   "format": "webp",
@@ -43,12 +46,17 @@ export type GalleryCardProps = HeadlineCommonProps & {
   /** @title Список */
   items?: GalleryItemProps[];
   version?: BlockVersion;
+  /**
+   * @title Выравнивание
+   * @default center
+   */
+  align?: AlignType;
 };
 
 /**
  * @title Галерея
  */
-export type GalleryContent = HeadlineCommonProps & {
+export type GalleryContent = HeadlineProps & {
   /**
    * @title Карточки
    * @minItems 3

package/src/components/GracePeriod/GracePeriod.ui.json

@@ -11,5 +11,10 @@
         }
       }
     }
+  },
+  "style": {
+    "ui:options": {
+      "minCols": 6
+    }
   }
 }

package/src/components/Header/Header.mobile.tsx

@@ -2,15 +2,16 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useLink } from '../../hooks/useLink';
 import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
 import { findActiveSubItem } from '../../services/sitemap/findActiveSubItem';
 import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
 import type { TopItemProps } from '../../ui-kit/TopItem/TopItem';
-import { getAccordionItems } from '../../utils/getAccordionItems';
-import { Accordion } from '../Accordion/Accordion';
+import { AccordionItem } from '../Accordion/AccordionItem';
+import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { LinkList } from '../LinkList/LinkList';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
 import { HeaderTop } from './HeaderTop';
@@ -19,17 +20,19 @@ export interface HeaderProps extends HeaderContent, UniBlockProps {}
 
 export const Header = JSX<HeaderProps>(
   ({ className = '', defaultLocation, bgColor = 'bg-white', context, topItems, page }) => {
+    const { handlerDecorator } = context;
     const router = context.useRouter();
+
     const fallback: Fallback | undefined = page?.fallback;
     const sitemap = useSitemap(fallback);
-    const dispositions = sitemap?.dispositions;
-    const { handlerDecorator } = context;
 
     const mergedItems = mergeTopItems(sitemap.topItems, topItems);
     const activeTopItem = mergedItems.find(isTopItemActive(router));
     const subItems = activeTopItem?.items;
     const activeSubItem = findActiveSubItem(router)(subItems);
+
     const [burgerMenuShow, setBurgerMenuShow] = useState(false);
+
     const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
 
     return (
@@ -55,14 +58,16 @@ export const Header = JSX<HeaderProps>(
           <HeaderBurger
             context={context}
             onClick={toggleBurgerMenu}
-            burgerSubMenu={dispositions}
+            burgerSubMenu={sitemap?.dispositions}
             defaultLocation={defaultLocation}
           >
-            <Accordion
-              context={context}
-              accordionItems={getAccordionItems(sitemap.topItems)}
-              className="!p-0 mb-4"
-            />
+            <AccordionItemsList>
+              {sitemap.topItems?.map((item, i) => (
+                <AccordionItem key={String(i)} context={context} label={item.text}>
+                  <LinkList context={context} documents={item.items} />
+                </AccordionItem>
+              ))}
+            </AccordionItemsList>
           </HeaderBurger>
         ) : null}
       </header>

package/src/components/Header/HeaderSubMenu.tsx

@@ -5,6 +5,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 { IntersectionObserverTag } from '../../ui-kit/IntersectionObserverTag';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { DropdownMenu } from './DropdownMenu';
 
@@ -17,7 +18,7 @@ export interface HeaderSubMenuProps {
 export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems = [], bgColor }) => {
   const [menuVisible, setMenuVisible] = useState(false);
   const router = context.useRouter();
-  const { handlerDecorator, IntersectionObserverTag } = context;
+  const { handlerDecorator } = context;
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
   const dropDownMenuItems = subItems.slice(visibleItemsCount);

package/src/components/Headline/constants.ts

@@ -1,6 +1,6 @@
 import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
-import type { HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingTagType, HeadingType } from '../../ui-kit/Heading/HeadingProps';
 
 export const ALIGN_TEXT: Record<AlignType, string> = {
@@ -72,3 +72,13 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
     as: 'h4',
   },
 };
+
+export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
+  XL_L: 'text-xl-light',
+  XL_R: 'text-xl',
+  L_L: 'text-l-light',
+  L_R: 'text-l',
+  M: 'text-m-light',
+  S: 'text-s-light',
+  XS: 'text-xs-light',
+};

package/src/components/InvestmentInfo/InvestmentInfo.example.json

@@ -0,0 +1,48 @@
+{
+  "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
+  "investmentZeroColumn": {
+    "title": "Название 1"
+  },
+  "investmentColumns": [
+    {
+      "title": "Название 2",
+      "cells": [
+        {
+          "text": "Ячейка 2-1",
+          "cellColor": "green-dark",
+          "cellSize": "S"
+        }
+      ]
+    },
+    {
+      "title": "Название 3",
+      "cells": [
+        {
+          "text": "Ячейка 3-1",
+          "cellColor": "green-dark",
+          "cellSize": "S"
+        }
+      ]
+    },
+    {
+      "title": "Название 4",
+      "cells": [
+        {
+          "text": "Ячейка 4-1",
+          "cellColor": "green-dark",
+          "cellSize": "L"
+        }
+      ]
+    },
+    {
+      "title": "Название 5",
+      "cells": [
+        {
+          "text": "Ячейка 5-1",
+          "cellColor": "green-dark",
+          "cellSize": "XL"
+        }
+      ]
+    }
+  ]
+}

package/src/components/InvestmentInfo/InvestmentInfo.fixture.tsx

@@ -0,0 +1,107 @@
+import { context } from '../../react/setup-fixture';
+import { InvestmentInfo } from './InvestmentInfo';
+import type { InvestmentInfoContent } from './InvestmentInfoContent';
+
+export const INVESTMENT_INFO: InvestmentInfoContent = {
+  items: [
+    'Качественные фермерские продукты напрямую от производителей',
+    'Самая большая база сельских туров по России',
+    'Площадки для создания комфортной жизни за городом',
+    'Подробная база вакансий для жителей сельской местности',
+  ],
+  investmentZeroColumn: {
+    title: 'Открытие ИИС',
+  },
+  investmentColumns: [
+    {
+      title: '1 января года, следующего за годом открытия ИИС',
+      cells: [
+        {
+          text: 'Потенциальный доход инвестиций',
+          cellColor: 'green-light',
+        },
+        {
+          text: 'Первый взнос 400 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'S',
+        },
+      ],
+    },
+    {
+      title: '1 января второго года после открытия ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 1 год 52 000 ₽',
+          cellColor: 'yellow',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 2 года',
+          cellColor: 'green-light',
+          cellSize: 'S',
+        },
+        {
+          text: 'Второй взнос 400 000 ₽',
+          cellColor: 'green',
+          cellSize: 'S',
+        },
+        {
+          text: 'Первый взнос 400 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'S',
+        },
+      ],
+    },
+    {
+      title: '1 января третьего года после открытия ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 2 год 52 000 ₽',
+          cellColor: 'yellow',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 3 года',
+          cellColor: 'green-light',
+          cellSize: 'M',
+        },
+        {
+          text: 'Третий взнос — 0 ₽',
+          cellColor: 'green',
+          cellSize: 'S',
+        },
+        {
+          text: 'Первый и второй взносы 800 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'L',
+        },
+      ],
+    },
+    {
+      title: 'Возможный вывод средств, закрытие ИИС',
+      cells: [
+        {
+          text: 'Налоговый вычет за 3 года 156 000 ₽',
+          cellColor: 'yellow',
+          cellSize: 'S',
+        },
+        {
+          text: 'Потенциальный доход инвестиций за 3 года',
+          cellColor: 'green-light',
+          cellSize: 'M',
+        },
+        {
+          text: 'Сумма инвестиций за 3 года 1 200 000 ₽',
+          cellColor: 'green-dark',
+          cellSize: 'XL',
+        },
+      ],
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <InvestmentInfo className="col-span-12" context={context} {...INVESTMENT_INFO} />
+    </div>
+  ),
+};