@redneckz/wildless-cms-uni-blocks 0.2.88 → 0.2.92

package/src/components/PictureText/PictureText.tsx

@@ -35,7 +35,9 @@ function renderBenefit(benefit: Benefit, i: number) {
         />
       )}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
-        <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        {benefit.label && (
+          <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        )}
         {benefit.description && (
           <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
         )}

package/src/components/PictureText/PictureTextContent.ts

@@ -4,8 +4,7 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 /**
  * @title Картинка с текстом
  */
-export interface PictureTextContent
-  extends Pick<BaseTileCommonProps, 'title' | 'description' | 'image'> {
+export interface PictureTextContent extends Pick<BaseTileCommonProps, 'title' | 'image'> {
   /**
    * @title Список преимуществ
    */

package/src/components/TariffsTable/TariffsTable.example.json

@@ -0,0 +1,85 @@
+{
+  "title": "Заголовок",
+  "rowHeaders": [
+    {
+      "title": "Параметр 1",
+      "icon": "MoneyIcon"
+    },
+    {
+      "title": "Параметр 2",
+      "icon": "DollarIcon"
+    },
+    {
+      "title": "Параметр 3"
+    },
+    {
+      "title": "Параметр 4"
+    }
+  ],
+  "columns": [
+    {
+      "data": [
+        [
+          {
+            "label": "Ячейка 1"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 2-1",
+            "description": "Описание для ячейки 2-1"
+          },
+          {
+            "label": "Ячейка 2-2",
+            "description": "Описание для ячейки 2-2"
+          }
+        ],
+        [
+          {
+            "label": "Ячейка 3-1",
+            "description": "Описание для ячейки 3-1"
+          },
+          {
+            "label": "Ячейка 3-2",
+            "buttons": [
+              {
+                "icon": "AppleIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/_blank",
+                "target": "_blank"
+              },
+              {
+                "icon": "PlayMarketIcon",
+                "rounded": true,
+                "version": "secondary",
+                "href": "/secondary"
+              }
+            ]
+          }
+        ],
+        [
+          {
+            "image": {
+              "src": "payment-systems.png",
+              "format": "webp",
+              "size": {
+                "width": 288,
+                "height": 56
+              }
+            }
+          },
+          {
+            "list": {
+              "items": [
+                "item 1",
+                "item 2",
+                "item 3"
+              ]
+            }
+          }
+        ]
+      ]
+    }
+  ]
+}

package/src/components/TariffsTable/TariffsTable.fixture.tsx

@@ -0,0 +1,192 @@
+import { context } from '../../setup-fixture';
+import { TariffsTable } from './TariffsTable';
+import type { Picture } from '../../model/Picture';
+import type { TariffsTableColumn, TariffsTableRowHeader } from './TariffsTableContent';
+
+const image: Picture = {
+  src: 'payment-systems.png',
+  format: 'webp',
+  size: {
+    width: 288,
+    height: 56,
+  },
+};
+
+const rowHeaders: TariffsTableRowHeader[] = [
+  { title: 'Начисление процентов на остаток по счету', icon: 'OkIcon' },
+  { title: 'Снятие наличных', icon: 'GlassIcon' },
+  { title: 'Оформление онлайн', icon: 'ShieldTickIcon' },
+  { title: 'Кэшбэк баллами' },
+  { title: 'Стоимость обслуживания' },
+  { title: 'Стоимость SMS-сервиса' },
+  { title: 'Дополнительная информация' },
+];
+
+const columns: TariffsTableColumn[] = [
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: 'Бесплатно',
+          description: 'В сторонних банкоматах - 1 раз в месяц, далее 1% минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [{ label: 'Платёжные системы картинкой' }, { image: image }],
+      [
+        { label: 'Кнопки-иконки' },
+        {
+          buttons: [
+            {
+              icon: 'AppleIcon',
+              rounded: true,
+              version: 'secondary',
+              href: '/_blank',
+              target: '_blank',
+            },
+            {
+              icon: 'PlayMarketIcon',
+              rounded: true,
+              version: 'secondary',
+              href: '/secondary',
+            },
+          ],
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          list: {
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+      [
+        {
+          image: {
+            src: 'money-1.png',
+            format: 'webp',
+            size: {
+              width: 140,
+              height: 140,
+            },
+          },
+        },
+      ],
+    ],
+  },
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'В банкоматах и кассах Россельхозбанка и банков-партнеров',
+        },
+        {
+          label: '1%',
+          description: 'В сторонних банкоматах, минимум 150 руб',
+        },
+      ],
+      [{ label: 'Нет' }],
+      [
+        { label: 'До 20%' },
+        {
+          list: {
+            isDotted: false,
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [
+        { label: '69 рублей в месяц' },
+        {
+          list: {
+            version: 'primary',
+            items: ['item 1', 'item 2', 'item 3'],
+          },
+        },
+      ],
+      [
+        {
+          description:
+            'Копите баллы каждый день и обменивайте их на скидки на электронику и бытовую технику Panasonic',
+        },
+      ],
+    ],
+  },
+  {
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+
+export default {
+  default: (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+      />
+    </div>
+  ),
+  '1 column': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 1)}
+      />
+    </div>
+  ),
+  '2 columns': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 2)}
+      />
+    </div>
+  ),
+  '3 columns': (
+    <div className="w-[1280px]">
+      <TariffsTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={columns.slice(0, 3)}
+      />
+    </div>
+  ),
+};

package/src/components/TariffsTable/TariffsTable.tsx

@@ -0,0 +1,72 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
+import { Title } from '../../ui-kit/Title/Title';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { TariffsTableRow } from './TariffsTableRow';
+import type { UniBlockProps } from '../../types';
+import type { TariffsTableContent } from './TariffsTableContent';
+import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
+
+export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
+
+export const TariffsTable = JSX<TariffsTableProps>(
+  ({ className, context, title, rowHeaders, columns }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders?.map((header, i) => ({
+      header,
+      data: colData.map((col) => col?.[i] || [{}]),
+    }));
+
+    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
+      useComparisonTableScroll(
+        colData,
+        COLS_LENGTH_FOR_SCROLL,
+        activeCardIndex,
+        setActiveCardIndex,
+      );
+
+    return (
+      <section
+        className={`bg-white font-sans py-[50px] pl-[50px] overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        <Title className="font-medium m-0 max-w-[47rem] text-center mb-9 mx-auto">{title}</Title>
+        {rowData?.length ? (
+          <div className="relative">
+            {rowData.map((row, i, { length }) => (
+              <TariffsTableRow
+                key={String(i)}
+                row={row}
+                isLastRow={i + 1 === length}
+                activeCardIndex={activeCardIndex}
+              />
+            ))}
+            {isScrollAvailable ? (
+              <div>
+                <div className="absolute top-7 right-7 z-10">
+                  <ArrowButton
+                    onClick={nextClick}
+                    disabled={!showNextButton}
+                    ariaLabel="Пролистать вправо"
+                  />
+                  <ArrowButton
+                    className="mt-4 rotate-180"
+                    onClick={prevClick}
+                    disabled={!showPrevButton}
+                    ariaLabel="Пролистать влево"
+                  />
+                </div>
+              </div>
+            ) : null}
+          </div>
+        ) : null}
+        {isScrollAvailable ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -0,0 +1,64 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { DIVIDER_CLASSES } from './constants';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import type { TariffsTableCellData } from './TariffsTableContent';
+import { Icon } from '../../ui-kit/Icon/Icon';
+
+export interface TariffsTableCellProps {
+  cell: TariffsTableCellData[];
+  isLastRow: boolean;
+}
+
+export const TariffsTableCell = JSX<TariffsTableCellProps>(({ cell, isLastRow }) => {
+  const cellWrapperClasses = `first:pl-0 pl-10 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0 ${
+    isLastRow ? 'border-t-0 rounded-b-md' : ''
+  }`;
+
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+
+  return (
+    <div className={cellWrapperClasses}>
+      <div className={cellClasses}>{cell.map((item, i) => renderCellInner(item, i))}</div>
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div className="first:pt-5 last:pb-5">
+    {i > 0 && (
+      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
+    )}
+    {label && <h5 className="text-xl font-medium m-0">{label}</h5>}
+    {description && <div className="text-sm text-secondary-text">{description}</div>}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div>
+          {list.items.map((text, idx) => (
+            <BlockItem
+              key={String(idx)}
+              text={text}
+              version={list.version ?? 'secondary'}
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={image} />}
+    {buttons?.length
+      ? buttons.map(({ icon, ...buttonProps }, idx) => (
+          <Button
+            className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
+            key={String(idx)}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" />}
+            {...buttonProps}
+          />
+        ))
+      : null}
+  </div>
+);

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -0,0 +1,61 @@
+import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { Picture } from '../../model/Picture';
+import type { BlockItemVersion } from '../../ui-kit/BlockItem/BlockItemProps';
+import type { BaseTileIconButton } from '../BaseTile/BaseTileProps';
+
+/**
+ * @title Ряд
+ */
+export type TariffsTableRowData = {
+  header: TariffsTableRowHeader;
+  data: TariffsTableCellData[][];
+};
+
+/**
+ * @title Колонка
+ */
+export interface TariffsTableColumn {
+  /** @title Данные */
+  data?: TariffsTableCellData[][];
+}
+
+/**
+ * @title Список
+ */
+export interface TariffsTableList {
+  version?: BlockItemVersion;
+  /** @title Маркеры */
+  isDotted?: boolean;
+  /** @title Элементы списка */
+  items?: string[];
+}
+
+/**
+ * @title Ячейка
+ */
+export interface TariffsTableCellData extends CellData {
+  list?: TariffsTableList;
+  image?: Picture;
+  /** @title Кнопки */
+  buttons?: BaseTileIconButton[];
+}
+
+/**
+ * @title Параметр
+ */
+export interface TariffsTableRowHeader extends RowHeader {
+  icon?: IconName;
+}
+
+/**
+ * @title Таблица тарифов
+ */
+export interface TariffsTableContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Колонки */
+  columns?: TariffsTableColumn[];
+  /** @title Параметры */
+  rowHeaders?: TariffsTableRowHeader[];
+}

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { COLUMN_WIDTH, DIVIDER_CLASSES, FIRST_CELL_CLASSES } from './constants';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { TariffsTableCell } from './TariffsTableCell';
+import { TableRowContainer } from '../ComparisonTable/TableRowContainer';
+import { TableCarouselContainer } from '../ComparisonTable/TableCarouselContainer';
+import type { TariffsTableRowData } from './TariffsTableContent';
+
+export interface TariffsTableRowProps {
+  className?: string;
+  row: TariffsTableRowData;
+  activeCardIndex: number;
+  isLastRow: boolean;
+}
+
+export const TariffsTableRow = JSX<TariffsTableRowProps>(
+  ({ row: { header, data }, activeCardIndex, isLastRow }) => {
+    return (
+      <TableRowContainer>
+        <div
+          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+            !isLastRow ? 'border-solid' : ''
+          }`}
+        >
+          <div className="flex items-center text-primary-text">
+            {header?.icon && (
+              <Icon className="pr-[14px]" name={header.icon} width="24px" height="24px" />
+            )}
+            {header?.title}
+          </div>
+        </div>
+        {data?.length ? (
+          <TableCarouselContainer
+            activeCardIndex={activeCardIndex}
+            columnWidth={COLUMN_WIDTH}
+            version="tariff"
+          >
+            {data.map((cell, i) => (
+              <TariffsTableCell key={String(i)} cell={cell} isLastRow={isLastRow} />
+            ))}
+          </TableCarouselContainer>
+        ) : null}
+      </TableRowContainer>
+    );
+  },
+);

package/src/components/TariffsTable/constants.ts

@@ -0,0 +1,4 @@
+export const DIVIDER_CLASSES = 'border-main-divider border border-t-0 border-x-0';
+export const FIRST_CELL_CLASSES = 'w-[354px] flex-shrink-0';
+export const COLS_LENGTH_FOR_SCROLL = 2;
+export const COLUMN_WIDTH = 4 * 80 + 40; // w-80 + pl-10 = 360px

package/src/components/TextBlock/TextBlock.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { Picture } from '../../model/Picture';
-import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 import type { UniBlockProps } from '../../types';
 import { Img } from '../../ui-kit/Img';
+import type { TextBlockContent, TextBlockVersion } from './TextBlockContent';
 
 export interface TextBlockProps extends TextBlockContent, UniBlockProps {}
 
@@ -54,7 +54,7 @@ export const TextBlock = JSX<TextBlockProps>(
 
 function renderIcon(className: string) {
   return (
-    <div className={`pt-1.5 pr-4`}>
+    <div className={`pt-1.5 pl-1 pr-4`}>
       <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
     </div>
   );

package/src/hooks/useComparisonTableScroll.ts

@@ -0,0 +1,16 @@
+export const useComparisonTableScroll = <COL_DATA>(
+  colData: COL_DATA[],
+  colsLengthForScroll: number,
+  activeCardIndex: number,
+  setActiveCardIndex: (_: number) => void,
+) => {
+  const nextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const prevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isScrollAvailable = colData?.length && colData.length > colsLengthForScroll;
+  const showNextButton =
+    isScrollAvailable && colData?.length - activeCardIndex > colsLengthForScroll;
+  const showPrevButton = isScrollAvailable && activeCardIndex > 0;
+
+  return { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton };
+};

package/src/model/TableVersion.ts

@@ -0,0 +1 @@
+export type TableVersion = 'comparison' | 'tariff';

package/src/ui-kit/BlockItem/BlockItem.fixture.tsx

@@ -2,4 +2,11 @@ import '../../setup-fixture';
 
 import { BlockItem } from './BlockItem';
 
-export default <BlockItem text="Совершайте любые личные покупки" />;
+export default {
+  primary: <BlockItem text="Совершайте любые личные покупки" />,
+  'primary without dot': <BlockItem text="Совершайте любые личные покупки" isDotted={false} />,
+  secondary: <BlockItem text="Совершайте любые личные покупки" version="secondary" />,
+  'secondary without dot': (
+    <BlockItem text="Совершайте любые личные покупки" isDotted={false} version="secondary" />
+  ),
+};

package/src/ui-kit/BlockItem/BlockItem.tsx

@@ -1,33 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
-
-type BlockItemVersion = 'primary' | 'secondary';
-export interface BlockItemContent {
-  text?: string;
-}
-
-export interface BlockItemProps extends BlockItemContent {
-  className?: string;
-  version?: BlockItemVersion;
-}
+import { BlockItemProps, BlockItemVersion } from './BlockItemProps';
 
 const listStyleMap: Record<BlockItemVersion, string> = {
-  primary: 'bg-primary-main',
-  secondary: 'bg-white',
+  primary: 'bg-primary-main w-[8px] h-[8px] min-w-[8px] min-h-[8px] mt-2 rounded-full',
+  secondary: 'bg-secondary-text w-[6px] h-[6px] min-w-[6px] min-h-[6px] mt-2.5 rounded-full',
 };
 
 const textStyleMap: Record<BlockItemVersion, string> = {
   primary: 'text-primary-text',
-  secondary: 'text-white',
+  secondary: 'text-secondary-text',
 };
 
 export const BlockItem = JSX<BlockItemProps>(
-  ({ className, text, children, version = 'primary' }) => {
+  ({ className, isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`inline-block flex ${className || ''}`} role="listitem">
-        <div
-          className={`inline-block w-[8px] h-[8px] min-w-[8px] min-h-[8px] rounded-full mt-2 ${listStyleMap[version]}`}
-        ></div>
-        <span className={`text-base font-normal font-sans mx-3 ${textStyleMap[version]}`}>
+        {isDotted && <div className={`inline-block mr-3 ${listStyleMap[version]}`} />}
+        <span className={`text-base font-normal font-sans mr-3 ${textStyleMap[version]}`}>
           {text || children}
         </span>
       </div>

package/src/ui-kit/BlockItem/BlockItemProps.ts

@@ -0,0 +1,22 @@
+/**
+ * @title Версия списка
+ */
+export type BlockItemVersion = 'primary' | 'secondary';
+
+/**
+ * @title Содержимое элемента блока
+ */
+export interface BlockItemContent {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Параметры элемента блока
+ */
+export interface BlockItemProps extends BlockItemContent {
+  className?: string;
+  version?: BlockItemVersion;
+  /** @title Маркер */
+  isDotted?: boolean;
+}

package/src/ui-kit/Button/ButtonProps.ts

@@ -13,12 +13,13 @@ export interface ButtonAdditionalProps {
 }
 
 export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
+  /** @title Текст */
   text?: string;
   version?: ButtonVersion;
 }
 
 export interface ButtonWithIconProps extends ButtonProps {
-  /** @hidden */
+  /** @title Верхний текст */
   aboveText?: string;
   /** @hidden */
   appendLeft?: any;