@redneckz/wildless-cms-uni-blocks 0.6.30 → 0.6.32

package/mobile/src/utils/sliceArray.ts

@@ -0,0 +1,15 @@
+export const sliceArray = <T>(items: T[], size: number) => {
+  const result = items.reduce((resultArray: T[][], item: T, index: number) => {
+    const chunkIndex = Math.floor(index / (size - 1));
+
+    if (!resultArray[chunkIndex]) {
+      resultArray[chunkIndex] = [item];
+    }
+
+    resultArray[chunkIndex].push(item);
+
+    return resultArray;
+  }, []);
+
+  return result;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.6.30",
+  "version": "0.6.32",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -181,7 +181,7 @@
   },
   "size-limit": [
     {
-      "limit": "8 kB",
+      "limit": "9 kB",
       "path": "lib/common.css"
     },
     {

package/src/components/Blocks.ts

@@ -1,6 +1,7 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
 import { Accordion } from './Accordion/Accordion';
 import { AccordionItem } from './AccordionItem/AccordionItem';
+import { CarouselLinks } from './CarouselLinks/CarouselLinks';
 import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 import { Bonus } from './Bonus/Bonus';
 import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
@@ -49,6 +50,7 @@ import { VerticalLayout } from './VerticalLayout/VerticalLayout';
 export const Blocks: BlocksRegistry = {
   Accordion,
   AccordionItem,
+  CarouselLinks,
   BenefitsBlock,
   BusinessBlock,
   Bonus,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -23,7 +23,7 @@ export default {
       <Carousel
         className="col-span-12"
         cardFullViewCount={1}
-        cardWidth={1200}
+        cardWidth="1007"
         isBlur={false}
         isCyclic={true}
         block={{ type: 'Carousel', blocks: new Array(2).fill(CARD).flat() }}
@@ -37,7 +37,7 @@ export default {
       <Carousel
         className="col-span-12"
         cardFullViewCount={3}
-        cardWidth={350}
+        cardWidth="350"
         isBlur={true}
         isCyclic={false}
         block={{ type: 'Carousel', blocks: new Array(5).fill(CARD_MINI).flat() }}
@@ -58,7 +58,7 @@ export default {
       <Carousel
         className="col-span-12"
         cardFullViewCount={3}
-        cardWidth={322}
+        cardWidth="322"
         isBlur={true}
         isCyclic={false}
         block={{ type: 'Carousel', blocks: new Array(5).fill(TARIFFS_CARD).flat() }}

package/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControl } from '../../hooks/useCarousel';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -12,7 +12,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     cardFullViewCount = 1,
     children,
-    cardWidth = 1007,
+    cardWidth = '1007',
     className = '',
     isBlur = true,
     isCyclic = false,
@@ -26,12 +26,11 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 
     const isScrollAvailable = childBlocksLength > cardFullViewCount;
 
-    const [activeIndex, controls] = useCarouselControl({
+    const [activeIndex, controls] = useCarouselControls({
       itemsCount: childBlocksLength,
       visibleItemCount: cardFullViewCount,
       isCyclic,
     });
-
     const { inc, dec, canDec, canInc } = controls;
 
     return (

package/src/components/Carousel/CarouselContainer.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { CardWidth } from './CarouselContent';
 
 export interface CarouselContainerProps {
   activeItem: number;
   cardFullViewCount: number;
-  cardWidth: number;
+  cardWidth: CardWidth;
 }
 
 export const CarouselContainer = JSX<CarouselContainerProps>(
@@ -11,7 +12,7 @@ export const CarouselContainer = JSX<CarouselContainerProps>(
     const cardFullViewStyles =
       cardFullViewCount === 1
         ? `translateX(-${activeItem}00%)`
-        : `translateX(-${activeItem * cardWidth}px)`;
+        : `translateX(-${activeItem * Number(cardWidth)}px)`;
 
     return (
       <div

package/src/components/Carousel/CarouselContent.ts

@@ -1,10 +1,18 @@
 /**
  * @title Карусель
  */
+
+/**
+ * @title Ширина карточек
+ * @enumNames [ "1007", "833", "350", "322" ]
+ */
+export type CardWidth = '322' | '350' | '832' | '1007';
 export interface CarouselContent {
-  /** @title Блоки */
+  /** @title Количество видимых карточек */
   cardFullViewCount?: number;
-  cardWidth?: number;
+  cardWidth?: CardWidth;
+  /** @title Добавление  блюра */
   isBlur?: boolean;
+  /** @title Цикличность */
   isCyclic?: boolean;
 }

package/src/components/CarouselCard/CarouselCard.fixture.tsx

@@ -11,24 +11,21 @@ const button: ButtonProps = {
 
 export const CARD: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
-  description:
-    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
   version: 'normal',
 };
 
 export const CARD_NEW: CarouselCardContent = {
   title: 'РСХБ?',
-  description:
-    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
   version: 'normal',
 };
 
 export const CARD_MINI: CarouselCardContent = {
   title: 'Хочешь попасть на практику в РСХБ?',
-  description:
-    'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты под руководством опытных наставников, внести свой вклад в развитие перспективных цифровых продуктов.',
+  description: 'Стажировка в Россельхозбанке — это возможность реализовать смелые идеи и проекты.',
   button,
   version: 'mini',
 };

package/src/components/CarouselLinks/CarouselLinks.example.json

@@ -0,0 +1,55 @@
+{
+  "title": "Заголовок",
+  "description": "Описание 1",
+  "additionalDescription": "Описание 2",
+  "links": [
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    },
+    {
+      "text": "Текст",
+      "href": "#"
+    }
+  ]
+}

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -0,0 +1,28 @@
+import { CarouselLinks } from './CarouselLinks';
+
+const link = {
+  text: 'Аудиторские заключения',
+  href: '#',
+};
+const links = Array(24).fill(link);
+
+const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
+  один из крупнейших банков в России. Был основан в 2000 году в целях развития
+  национальной кредитно-финансовой системы агропромышленного сектора и
+  сельских территорий Российской Федерации.`;
+
+const additionalDescription = `Сегодня это универсальный коммерческий банк,
+  предоставляющий все виды банковских услуг и занимающий лидирующие позиции
+  в финансировании агропромышленного комплекса России.`;
+
+export default {
+  default: (
+    <CarouselLinks
+      links={links}
+      title="О Банке"
+      description={description}
+      additionalDescription={additionalDescription}
+      block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+    />
+  ),
+};

package/src/components/CarouselLinks/CarouselLinks.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { sliceArray } from '../../utils/sliceArray';
+import { Carousel } from '../Carousel/Carousel';
+import type { CarouselLinksContent } from './CarouselLinksContent';
+
+export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
+
+const MAX_LINKS_COUNT = 12;
+
+export const CarouselLinks = JSX<CarouselLinksProps>(
+  ({ additionalDescription, block, description, links, title, className = '', ...rest }) => {
+    return (
+      <BlockWrapper
+        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        {...rest}
+      >
+        <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
+          {title ? <Heading title={title} as="h1" headingType="h0" className="pb-0.5" /> : null}
+          {description ? (
+            <Description description={description} className="text-xl-light pt-5" />
+          ) : null}
+          {additionalDescription ? (
+            <Description description={additionalDescription} className="pt-6" />
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links, block) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderLinks = (links: LinkProps[], block: any) => {
+  const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
+
+  const slides = slicedLinks.map((slide) => (
+    <div className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start">
+      {slide.map((link, index) => (
+        <LinkButton className="m-1" key={String(index)} {...link} />
+      ))}
+    </div>
+  ));
+
+  return (
+    <Carousel
+      className="min-w-[832px] w-[832px]"
+      isBlur={false}
+      cardFullViewCount={1}
+      cardWidth={'832'}
+      isCyclic={true}
+      block={{ type: 'Carousel', blocks: slides }}
+    >
+      {slides}
+    </Carousel>
+  );
+};

package/src/components/CarouselLinks/CarouselLinksContent.ts

@@ -0,0 +1,10 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkProps } from '../../model/LinkProps';
+
+/** @title Карусель с ссылками */
+export interface CarouselLinksContent extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Ссылки */
+  links?: LinkProps[];
+}

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useCarouselControl } from '../../hooks/useCarousel';
+import { useCarouselControls } from '../../hooks/useCarouselControls';
 import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
 import type { Column, RowHeader } from './ComparisonTableContent';
 import { ComparisonTableRows } from './ComparisonTableRows';
@@ -26,7 +26,7 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
 
     const isScrollAvailable = colData.length > COLS_LENGTH_FOR_SCROLL;
 
-    const [activeIndex, controls] = useCarouselControl({
+    const [activeIndex, controls] = useCarouselControls({
       itemsCount: colData.length,
       visibleItemCount: COLS_LENGTH_FOR_SCROLL,
     });

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { CarouselControls } from '../../hooks/useCarouselControls';
 import type { TitleProps } from '../../model/HeadlineType';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import type { CellData } from './ComparisonTableContent';
 import { TableRow } from './TableRow';
-import type { Controls } from '../../hooks/useCarousel';
-import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 type ComparisonTableRowsProps = {
   rowData: { header: TitleProps; data: CellData[][] }[];
   activeCardIndex: number;
   isColoredFirstColumn: boolean;
-  controls: Controls;
+  controls: CarouselControls;
   isScrollAvailable: boolean;
 };
 

package/src/components/ContactsBlock/ContactsBlock.example.json

@@ -2,26 +2,30 @@
   "content": {
     "version": "secondary",
     "info": [
-      {
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 1",
-          "target": "_blank",
-          "version": "secondary"
+      [
+        {
+          "title": "Заголовок 1",
+          "description": "Описание 1",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 1",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      },
-      {
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 2",
-          "target": "_blank",
-          "version": "secondary"
+      ],
+      [
+        {
+          "title": "Заголовок 2ff",
+          "description": "Описание 2",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 2",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      }
+      ]
     ],
     "contacts": [
       [

package/src/components/ContactsBlock/ContactsBlock.fixture.tsx

@@ -9,20 +9,22 @@ const button: ButtonProps = {
   version: 'secondary',
 };
 
-const info = [
-  {
-    title: 'Телеграм-канал РСХБ Инвестиции',
-    description:
-      'Всегда вовремя: главные новости, инвестиционные идеи, анонсы размещения облигаций',
-    button,
-  },
-  {
-    title: 'Подписка на аналитику',
-    description: 'E-mail рассылка: главное за неделю',
-    button,
-  },
-];
 const contacts = [
+  [
+    {
+      title: 'Телеграм-канал РСХБ Инвестиции',
+      description:
+        'Всегда вовремя: главные новости, инвестиционные идеи, анонсы размещения облигаций',
+      button,
+    },
+  ],
+  [
+    {
+      title: 'Подписка на аналитику',
+      description: 'E-mail рассылка: главное за неделю',
+      button,
+    },
+  ],
   [
     {
       title: '8 (800) 100-40-40',
@@ -49,8 +51,12 @@ const contacts = [
 ];
 
 export default {
-  secondary: <ContactsBlock className="col-span-12" info={info} contacts={contacts} />,
+  secondary: <ContactsBlock className="col-span-12" contacts={contacts} />,
   primary: (
-    <ContactsBlock className="col-span-12" version="primary" info={info} contacts={contacts} />
+    <ContactsBlock
+      className="col-span-12"
+      version="primary"
+      contacts={contacts}
+    />
   ),
 };

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -1,68 +1,58 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Description } from '../../ui-kit/Description/Description';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import type { ContactItemProps, ContactsBlockContent, InfoItemProps } from './ContactsBlockContent';
+import { Headline } from '../Headline/Headline';
+import type { ContactBlockProps, ContactsBlockContent } from './ContactsBlockContent';
 
 export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps {}
 
 interface RenderContactsColumnProps {
-  contactsColumn?: ContactItemProps[];
+  version?: BlockVersion;
+  column?: ContactBlockProps[];
   index?: number;
 }
 
-const contactsBlockStyleMap = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => {
     return (
-      <BlockWrapper
-        className={`${contactsBlockStyleMap[version]} flex p-12 ${className}`}
-        {...rest}
-      >
-        {info ? renderInfo(info) : null}
-        {contacts ? renderContacts(contacts) : null}
+      <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
+        {info?.length ? renderBlocks(info, version) : null}
+        {contacts?.length ? renderBlocks(contacts, version) : null}
       </BlockWrapper>
     );
   },
 );
 
-const renderInfo = (info: InfoItemProps[]) => (
-  <div className="flex grow basis-0 pr-11">
-    {info.map(({ title, description, button }, index) => (
-      <div className="grow basis-0 pr-11 last:pr-0" key={String(index)}>
-        <Heading as="h5" headingType="h5" title={title} className="pb-2.5" />
-        <Description className="text-l-light pb-6" description={description} />
-        {button ? <Button {...button} /> : null}
-      </div>
-    ))}
-  </div>
-);
-
-const renderContacts = (contacts: ContactItemProps[][]) => (
+const renderBlocks = (info: ContactBlockProps[][], version?: BlockVersion) => (
   <div className="flex grow basis-0">
-    {contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index }))}
+    {info.map((column, index) => renderBlocksColumn({ column, index, version }))}
   </div>
 );
 
-const renderContactsColumn = ({ contactsColumn, index }: RenderContactsColumnProps) =>
-  contactsColumn ? (
-    <div className="flex flex-col grow basis-0 pr-11" key={String(index)}>
-      {contactsColumn.map(({ title, description, additionalDescription }, key) => (
-        <div className="pr-11 last:pr-0 last:mt-5" key={String(key)}>
-          <Heading as="h5" headingType="h5" title={title} />
-          <Description className="text-l-light mt-2.5" description={description} />
+const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProps) =>
+  column ? (
+    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+      {column.map(({ title = '', description, additionalDescription, button }, key) => (
+        <div className="mt-6 first:mt-0" key={String(key)}>
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="XS"
+            align="left"
+            bgColorHeadline={version}
+          />
           {additionalDescription ? (
             <Description
               className="text-m-light mt-1.5 opacity-80"
               description={additionalDescription}
             />
           ) : null}
+          {button ? <Button className="mt-6" {...button} /> : null}
         </div>
       ))}
     </div>

package/src/components/ContactsBlock/ContactsBlockContent.ts

@@ -2,6 +2,16 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Элемент плитки
+ */
+export interface ContactBlockProps extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}
+
 /**
  * @title Контакты
  */
@@ -10,31 +20,11 @@ export interface ContactsBlockContent {
    * @title Данные
    * @maxItems 2
    * */
-  info?: InfoItemProps[];
+  info?: ContactBlockProps[][];
   /**
    * @title Контакты
    * @maxItems 2
    * */
-  contacts?: ContactItemProps[][];
+  contacts?: ContactBlockProps[][];
   version?: BlockVersion;
 }
-
-/**
- * @title Элемент плитки
- */
-export interface ContactItemProps {
-  /** @title Дополнительное описание */
-  additionalDescription?: string;
-  /** @title Описание */
-  description?: string;
-  /** @title Заголовок */
-  title?: string;
-}
-
-/**
- * @title Элемент плитки
- */
-export interface InfoItemProps extends HeadlineCommonProps {
-  /** @title Кнопка */
-  button?: ButtonProps;
-}

package/src/components/Headline/constants.ts

@@ -64,6 +64,12 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
     headingType: 'h4',
     as: 'h4',
   },
+  XS: {
+    descriptionFont: 'text-l-light',
+    gap: 'gap-2',
+    headingType: 'h5',
+    as: 'h5',
+  },
 };
 
 export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -85,6 +85,7 @@ export default {
         headlineVersion="L"
         title="Потребительский кредит наличными"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefitsCountOfRow={2}
         benefits={benefits}
         benefitsVersion="normal"
         buttons={buttons}