@redneckz/wildless-cms-uni-blocks 0.3.21 → 0.3.24

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @hidden
@@ -49,6 +50,24 @@ export interface RowHeader {
   /** @title Заголовок */
   title?: string;
 }
+
+/**
+ * @title Ячейка
+ */
+export interface TableColumnData {
+  rowHeader?: string;
+  cell: CellData[];
+}
+
+/**
+ * @title Параметр
+ */
+export interface TableColumnHeader {
+  /** @title Заголовок */
+  title?: string;
+  icon?: IconName;
+}
+
 /**
  * @title Сравнительная таблица
  */
@@ -63,6 +82,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
-  /** @title Использовать свайпер (моб.) */
-  useSwiper?: boolean;
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  useSwiper?: ListOrientation;
 }

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -13,6 +13,7 @@ export interface HeaderCellProps {
   image?: Picture;
   title?: string;
   link?: LinkProps;
+  isFillGradient?: boolean;
 }
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (

package/src/components/ComparisonTable/TableColumn.tsx

@@ -5,10 +5,11 @@ import { Button } from '../../ui-kit/Button/Button';
 import { GRADIENT } from './constants';
 import { HeaderCell } from './HeaderCell';
 import { TableCell } from './TableCell';
+import type { TableColumnData, TableColumnHeader } from './ComparisonTableContent';
 
 export interface TableColumnProps extends UniBlockProps {
-  header: any;
-  columnData: any;
+  header: TableColumnHeader;
+  columnData: TableColumnData[];
   visibleRowLength: number;
   isFillGradient: boolean;
   showRow: boolean;

package/src/components/ContentPage/ContentPage.page.json

@@ -1394,7 +1394,7 @@
         "title": "Своя кредитная карта",
         "description": "Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.",
         "align": "center",
-        "bgColor": "transparent"
+        "bgColorHeadline": "transparent"
       }
     },
     {

package/src/components/ContentPage/ContentPage.tsx

@@ -91,7 +91,6 @@ function renderBlock(
   if (!(type && type in blocksRegistry)) {
     console.warn(`No block with "${type}" is registered`);
   }
-
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {

package/src/components/Gallery/Gallery.example.json

@@ -6,8 +6,8 @@
       "image": {
         "format": "webp",
         "size": {
-          "width": 140,
-          "height": 140
+          "width": 150,
+          "height": 150
         }
       },
       "title": "Заголовок 1",
@@ -55,24 +55,6 @@
         {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
         {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
       ]
-    },
-    {
-      "image": {
-        "format": "webp",
-        "size": {
-          "width": 140,
-          "height": 140
-        }
-      },
-      "title": "Заголовок 4",
-      "description": "Описание 4",
-      "href": "/credit-cards",
-      "version": "primary",
-      "items": [
-        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
-        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
-        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
-      ]
     }
   ]
 }

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

@@ -3,6 +3,7 @@ import { context } from '../../setup-fixture';
 import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
 import { Gallery } from './Gallery';
 import { GalleryCard } from './GalleryContent';
+import { ListOrientation } from '../../model/ListOrientation';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -82,7 +83,7 @@ const cards: GalleryCard[] = [
 const defaultProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  isScroll: false,
+  useSwiper: 'horizontal' as ListOrientation,
   context,
   cards: cards,
 };
@@ -90,7 +91,7 @@ const defaultProps = {
 const scrollProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  isScroll: true,
+  useSwiper: 'horizontal' as ListOrientation,
   context,
   cards: cards,
 };

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

@@ -8,6 +8,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -15,7 +16,7 @@ const blockStyle: Record<BlockVersion, string> = {
 };
 
 export const Gallery = JSX<GalleryProps>(
-  ({ context, title, description, cards = [], className, isScroll = true }) => {
+  ({ context, title, description, cards = [], className, useSwiper = 'horizontal' }) => {
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
@@ -34,14 +35,14 @@ export const Gallery = JSX<GalleryProps>(
             </div>
           ) : null}
         </div>
-        {renderCardsLayout(isScroll, cards, context)}
+        {renderCardsLayout(useSwiper, cards, context)}
       </section>
     );
   },
 );
 
-function renderCardsLayout(isScroll: boolean, cards: GalleryCard[], context) {
-  return isScroll ? (
+function renderCardsLayout(useSwiper: ListOrientation, cards: GalleryCard[], context) {
+  return useSwiper === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
     <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import type { GalleryCard } from './GalleryContent';
+import { List } from '../../ui-kit/List/List';
+import type { GalleryCard, GalleryItem } from './GalleryContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
@@ -43,21 +43,16 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items, version) {
+function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
   return (
-    <section className={`max-w-[308px] mt-2`} role="list">
-      {items
-        .filter((item) => item?.text)
-        .map((item, i) => renderItem(item.text as string, i, version))}
-    </section>
-  );
-}
-
-function renderItem(item: string, i: number, version?: BlockVersion) {
-  return (
-    <BlockItem key={String(i)} version={version ?? 'primary'}>
-      <span className="text-sm">{item}</span>
-    </BlockItem>
+    <List
+      className={`max-w-[308px] mt-2 text-sm ${
+        version === 'primary' ? '!text-secondary-text' : ''
+      }`}
+      itemClassName="mt-1 first:mt-0"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      version={version}
+    />
   );
 }
 

package/src/components/Gallery/GalleryContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Элемент списка
@@ -38,9 +39,9 @@ export interface GalleryContent {
   description?: string;
   /**
    * @title Карточки
-   * @minItems 4
+   * @minItems 3
    */
   cards?: GalleryCard[];
-  /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */
-  isScroll?: boolean; //TODO: for mobile
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  useSwiper?: ListOrientation; //TODO: for mobile
 }

package/src/components/Headline/Headline.example.json

@@ -2,5 +2,12 @@
   "title": "Заголовок",
   "description": "Описание",
   "align": "center",
-  "bgColorHeadline": "transparent"
+  "bgColorHeadline": "transparent",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 180,
+      "height": 180
+    }
+  }
 }

package/src/components/Headline/Headline.tsx

@@ -15,12 +15,14 @@ export const Headline = JSX<HeadlineProps>(
         {title && (
           <Heading
             headingType="h2"
-            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            className={`text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         )}
         {description && (
-          <p className={`font-normal text-base mt-4 ${ALIGN_TEXT[align]}`}>{description}</p>
+          <p className={`font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>
+            {description}
+          </p>
         )}
       </section>
     );

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,6 +1,6 @@
 {
-  "title": "Дополнительные документы",
-  "subtitle": "Ответы на часто задаваемые вопросы",
+  "title": "Список документов",
+  "subtitle": "Описание",
   "icon": "DocIcon",
   "documents": [
     {

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,9 @@ export const LinkDocs = JSX<LinkDocsProps>(
     hasBorder = true,
   }) => {
     return (
-      <section className={`font-sans text-primary-text py-6 px-4 bg-white ${className}`}>
+      <section
+        className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
+      >
         {title ? (
           <Heading
             headingType="h2"

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Отображение списка
@@ -11,15 +12,6 @@ import type { AlignType } from '../BaseTile/BaseTileProps';
  */
 export type LinkColumnsMode = 'single' | 'double';
 
-/**
- * @title Отображение списка (моб.)
- * @enumNames [
- *    "Вертикально",
- *    "Горизонтально",
- *    ]
- */
-export type LinkListMode = 'vertical' | 'horizontal';
-
 /**
  * @title Элемент списка
  */
@@ -34,14 +26,15 @@ export interface LinkDocsItem extends LinkProps {
 export interface LinkDocsContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Подзаголовок */
+  /** @title Описание */
   subtitle?: string;
   /** @title Название иконки */
   icon?: IconName;
   /** @title Список */
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
-  listMode?: LinkListMode; // TODO: мобильный проп
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  listMode?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
   align?: AlignType;

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -16,7 +16,7 @@ export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
           ? documents.map((doc, i) => (
               <LinkDocsListItem
                 key={String(i)}
-                className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                className={hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''}
                 doc={doc}
                 icon={icon}
               />

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import type { LinkDocsItem } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
 
@@ -20,7 +20,9 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
           ? documents.map((doc, i) => (
               <div key={String(i)} role="listitem">
                 <LinkDocsListItem
-                  className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                  className={
+                    hasBorder ? 'rounded-md border-main-stroke border border-solid p-4' : ''
+                  }
                   doc={doc}
                   icon={icon}
                 />

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -2,5 +2,6 @@ import type { GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
+ * @minItems 3
  */
 export type MiniGalleryContent = GalleryContent;

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -19,7 +19,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
             <div className="flex justify-center align-middle rounded-md bg-primary-main w-[50px] h-[50px]">
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
-            <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
+            <a href={href} target="_blank" className="flex flex-col justify-center pl-3 font-sans">
               <div className="text-m-button font-medium mb-[3px]">{title}</div>
               <div className="text-m-button text-secondary-text">{description}</div>
             </a>

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -9,6 +9,10 @@ export interface blockItemCommonProps {
    * @default Список
    */
   label?: string;
+  /**
+   * @title Отображать в раскрытом виде
+   */
+  isExpanded?: boolean;
   /** @title Блоки */
   blocks?: BlockDef[];
   /**
@@ -17,7 +21,6 @@ export interface blockItemCommonProps {
    */
   bordered?: boolean; // TODO: только для мобильной версии
   columns?: ColumnsCount;
-  isActive?: boolean;
 }
 
 /**

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useActiveHandler } from './utils/useActiveHandler';
+import { useActiveHandler } from './useActiveHandler';
 import type { UniBlockProps } from '../../types';
 import type { blockItemCommonProps } from './OtherProductsContent';
 import { Icon } from '../../ui-kit/Icon/Icon';
@@ -7,30 +7,32 @@ import { OtherProductsItemInner } from './OtherProductsItemInner';
 
 export interface BlockItemProps extends blockItemCommonProps, UniBlockProps {}
 
-export const OtherProductsItem = JSX<BlockItemProps>(({ label, blocks, columns, context }) => {
-  const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
-    context,
-    blocks,
-  });
+export const OtherProductsItem = JSX<BlockItemProps>(
+  ({ label, isExpanded, blocks, columns, context }) => {
+    const { hasContent, icon, handleToggle, isActive } = useActiveHandler({
+      context,
+      blocks,
+      initialState: isExpanded,
+    });
 
-  return (
-    <div className="border-0 border-b border-solid border-main-divider">
-      {hasContent ? (
-        <OtherProductsItemInner
-          columns={columns}
-          blocks={blocks}
-          context={context}
-          isActive={isActive}
-        />
-      ) : null}
-      <button
-        className={`border-none bg-primary-main px-0 py-[25px] text-center w-full font-sans text-white text-base
-        ${hasContent ? 'group cursor-pointer' : ''}`}
-        onClick={handleToggle}
-      >
-        <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
-        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
-      </button>
-    </div>
-  );
-});
+    return (
+      <div className="border-0 border-b border-solid border-main-divider">
+        {hasContent ? (
+          <OtherProductsItemInner
+            isExpanded={isActive}
+            columns={columns}
+            blocks={blocks}
+            context={context}
+          />
+        ) : null}
+        <button
+          className="border-none bg-primary-main px-0 py-[25px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          onClick={handleToggle}
+        >
+          <span className="pr-3">{isActive ? 'Скрыть' : label}</span>
+          {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+        </button>
+      </div>
+    );
+  },
+);

package/{mobile/src/components/OtherProducts/utils → src/components/OtherProducts}/useActiveHandler.ts

@@ -1,7 +1,8 @@
-import type { IconName } from '../../../icons/IconName';
+import type { IconName } from '../../icons/IconName';
+import { ActiveHandler } from '../../ui-kit/BlocksList/BlocksListProps';
 
-export const useActiveHandler = ({ context, blocks }) => {
-  const [isActive, setIsActive] = context.useState(false);
+export const useActiveHandler = ({ context, blocks, initialState = false }: ActiveHandler) => {
+  const [isActive, setIsActive] = context.useState(initialState);
   const hasContent = blocks?.length;
   const icon: IconName = isActive ? 'ArrowUpIcon' : 'ArrowDownIcon';
 

package/src/components/ProductBlock/ProductBlock.example.json

@@ -4,10 +4,12 @@
   "image": {
     "format": "webp",
     "size": {
-      "width": 300
+      "width": 234,
+      "height": 234
     }
   },
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "isDotted": true,
   "buttons": [
     {
       "text": "Кнопка",

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

@@ -4,6 +4,11 @@ import { ProductBlock } from './ProductBlock';
 import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
+const description =
+  'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.';
+const label = 'Самое лучшее предложение';
+
 const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
@@ -20,7 +25,7 @@ const image: Picture = {
   ],
 };
 
-const benefits = [
+const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
@@ -38,7 +43,7 @@ const benefits = [
   },
 ];
 
-const buttons = [
+const buttons: ButtonWithIconProps[] = [
   {
     href: 'https://rshb.ru',
     text: 'Оформить карту',
@@ -51,7 +56,7 @@ const buttons = [
     target: '_blank',
     version: 'secondary',
   },
-] as ButtonWithIconProps;
+];
 
 const items = [
   'Совершайте любые личные покупки',
@@ -59,30 +64,61 @@ const items = [
   'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
 ];
 
+const props = { title, description, image, buttons };
+
 export default {
   default: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock className="col-span-12" context={context} {...props} benefits={benefits} />
+    </div>
+  ),
+  items: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock className="col-span-12" context={context} {...props} items={items} />
+    </div>
+  ),
+  'primary with label': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={benefits as Benefit[]}
-        buttons={buttons as ButtonWithIconProps[]}
-        image={image}
+        {...props}
+        benefits={benefits}
+        label={label}
       />
     </div>
   ),
-  items: (
+  secondary: (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        {...props}
+        benefits={benefits}
+        version="secondary"
+      />
+    </div>
+  ),
+  'secondary with items': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...props}
         items={items}
-        buttons={buttons as ButtonWithIconProps[]}
-        image={image}
+        version="secondary"
+      />
+    </div>
+  ),
+  'secondary with label': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...props}
+        benefits={benefits}
+        label={label}
+        version="secondary"
       />
     </div>
   ),