@redneckz/wildless-cms-uni-blocks 0.3.12 → 0.3.13

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -1,7 +1,11 @@
 import type { IconName } from '../../icons/IconName';
-import type { Picture } from '../../model/Picture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { CellData, RowHeader } from '../ComparisonTable/ComparisonTableContent';
+import type { CellData } from '../ComparisonTable/ComparisonTableContent';
+import type { ListOrientation } from '../../model/ListOrientation';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 
 /**
  * @title Ряд
@@ -22,38 +26,42 @@ export interface TariffsTableColumn {
 /**
  * @title Список
  */
-export interface TariffsTableList {
+export type TariffsTableList = ListContent & {
   /** @title Маркеры */
   isDotted?: boolean;
-  /** @title Элементы списка */
-  items?: string[];
-}
+};
 
 /**
  * @title Ячейка
  */
-export interface TariffsTableCellData extends CellData {
-  list?: TariffsTableList;
-  image?: Picture;
-  /** @title Кнопки */
-  buttons?: ButtonWithIconProps[];
-}
+export type TariffsTableCellData = CellData &
+  ImageContent &
+  ButtonContent & {
+    list?: TariffsTableList;
+  };
 
 /**
  * @title Параметр
  */
-export interface TariffsTableRowHeader extends RowHeader {
+export type TariffsTableRowHeader = HeadingContent & {
   icon?: IconName;
-}
+};
 
 /**
  * @title Таблица тарифов
  */
-export interface TariffsTableContent {
-  /** @title Заголовок */
-  title?: string;
-  /** @title Колонки */
-  columns?: TariffsTableColumn[];
-  /** @title Параметры */
-  rowHeaders?: TariffsTableRowHeader[];
-}
+export type TariffsTableContent = HeadingContent &
+  DescriptionContent & {
+    /** @title Колонки */
+    columns?: TariffsTableColumn[];
+    /** @title Параметры */
+    rowHeaders?: TariffsTableRowHeader[];
+    /** @title Направление таблицы (моб.) */
+    orientation?: ListOrientation;
+  };
+
+/** @hidden */
+export type TariffsTableTileCellProps = {
+  header: TariffsTableRowHeader;
+  data: TariffsTableCellData[];
+};

package/src/components/TariffsTable/TariffsTableHorizontal.tsx

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { TariffsTableTileCell } from './TariffsTableTileCell';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import type { TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableHorizontal = JSX<{
+  context: ContentPageContext;
+  tiles: TariffsTableTileCellProps[];
+}>(({ tiles, context }) => (
+  <SwipeListControl context={context}>
+    {tiles.map((tile, i) => (
+      <TariffsTableTileCell key={String(i)} {...tile} />
+    ))}
+  </SwipeListControl>
+));

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TableTileHeader } from './TableTileHeader';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+import { Img } from '../../ui-kit/Img/Img';
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { TariffsTableCellData, TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
+  return (
+    <div className="rounded-md border-main-stroke h-full box-border border p-4">
+      <TableTileHeader {...header} />
+      {data?.length ? data.map(renderCellInner) : null}
+    </div>
+  );
+});
+
+const renderCellInner = (
+  { label, description, list, image, buttons }: TariffsTableCellData,
+  i: number,
+) => (
+  <div key={String(i)}>
+    {i > 0 && (
+      <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
+    )}
+    {label ? <div className="text-m-sm m-0">{label}</div> : null}
+    {description ? (
+      <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
+    ) : null}
+    {list?.items?.length ? (
+      <div className="flex flex-col justify-between items-start">
+        <div role="list">
+          {list.items.map((text, idx) => (
+            <BlockItem
+              className="text-m-sm"
+              key={String(idx)}
+              text={text}
+              version="gray"
+              isDotted={list.isDotted ?? true}
+            />
+          ))}
+        </div>
+      </div>
+    ) : null}
+    {image && <Img image={{ ...image, className: 'm-0' }} />}
+    {buttons?.length ? (
+      <div>
+        {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+          <Button
+            className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+            key={String(idx)}
+            rounded={rounded}
+            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+            {...buttonProps}
+            aria-label={icon}
+          />
+        ))}
+      </div>
+    ) : null}
+  </div>
+);

package/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -0,0 +1,11 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { TariffsTableTileCell } from './TariffsTableTileCell';
+import type { TariffsTableTileCellProps } from './TariffsTableContent';
+
+export const TariffsTableVertical = JSX<{ tiles: TariffsTableTileCellProps[] }>(({ tiles }) => (
+  <div className="flex flex-col gap-3.5">
+    {tiles.map((tile, i) => (
+      <TariffsTableTileCell key={String(i)} {...tile} />
+    ))}
+  </div>
+));

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

@@ -12,107 +12,119 @@ const image: Picture = {
   },
 };
 
+const items = [
+  'Вклады до 1,4 млн застрахованы',
+  'Вклады до 1,4 млн застрахованы',
+  'Вклады до 1,4 млн застрахованы',
+];
+
 export const TEXT_BLOCK: TextBlockContent = {
   title: 'Все карты Россельхозбанка работают',
   description:
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <div className="col-span-12">
-      <div>
-        <p>Private clients</p>
-        <div className="flex flex-col gap-[6px]" data-theme="pc">
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="big"
-            image={image}
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="none"
-          />
-          <TextBlock
-            context={mobileContext}
-            description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
-            blockVersion="primary"
-          />
-          <TextBlock
-            context={mobileContext}
-            title="Все карты Россельхозбанка работают"
-            blockVersion="primary"
-          />
-          <TextBlock
-            context={mobileContext}
-            title="Все карты Россельхозбанка работают"
-            blockVersion="primary"
-            iconVersion="small"
-            items={[
-              'Вклады до 1,4 млн застрахованы',
-              'Вклады до 1,4 млн застрахованы',
-              'Вклады до 1,4 млн застрахованы',
-            ]}
-          />
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <div className="col-span-12">
+        <div>
+          <p>Private clients</p>
+          <div className="flex flex-col gap-[6px]" data-theme="pc">
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="big"
+              image={image}
+            />
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="none"
+            />
+            <TextBlock
+              context={mobileContext}
+              description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+              blockVersion="primary"
+            />
+            <TextBlock
+              context={mobileContext}
+              title="Все карты Россельхозбанка работают"
+              blockVersion="primary"
+            />
+            <TextBlock
+              context={mobileContext}
+              title="Все карты Россельхозбанка работают"
+              blockVersion="primary"
+              iconVersion="small"
+              items={items}
+            />
+            <TextBlock
+              context={mobileContext}
+              title="Все карты Россельхозбанка работают"
+              description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+              blockVersion="secondary"
+              iconVersion="small"
+              items={items}
+            />
+          </div>
         </div>
-      </div>
-      <div>
-        <p>Business clients</p>
-        <div className="flex flex-col gap-[6px]" data-theme="bc">
-          <TextBlock
-            className="flex flex-col"
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary-light"
-          />
+        <div>
+          <p>Business clients</p>
+          <div className="flex flex-col gap-[6px]" data-theme="bc">
+            <TextBlock
+              className="flex flex-col"
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              iconVersion="small"
+              blockVersion="secondary"
+            />
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              iconVersion="small"
+              blockVersion="secondary-light"
+            />
+          </div>
         </div>
-      </div>
-      <div>
-        <p>Ecosystem own</p>
-        <div className="flex flex-col gap-[6px]" data-theme="eo">
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="primary"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary"
-          />
-          <TextBlock
-            context={mobileContext}
-            {...TEXT_BLOCK}
-            iconVersion="small"
-            blockVersion="secondary-light"
-          />
+        <div>
+          <p>Ecosystem own</p>
+          <div className="flex flex-col gap-[6px]" data-theme="eo">
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              iconVersion="small"
+              blockVersion="primary"
+            />
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              iconVersion="small"
+              blockVersion="secondary"
+            />
+            <TextBlock
+              context={mobileContext}
+              {...TEXT_BLOCK}
+              iconVersion="small"
+              blockVersion="secondary-light"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  ),
+};

package/src/components/TextBlock/TextBlock.fixture.tsx

@@ -18,72 +18,99 @@ export const TEXT_BLOCK: TextBlockContent = {
     "Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу можно заказать карту 'Кредитная карта Своя Union Pay' на сайте и в приложении Россельхозбанка",
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <div className="font-sans overflow-hidden col-span-12">
-      <div>
-        <p>Private clients</p>
-        <div className="flex flex-col gap-6" data-theme="pc">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="primary"
-            iconVersion="big"
-            image={image}
-          />
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="none" />
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary-light"
-            iconVersion="small"
-          />
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <div className="font-sans overflow-hidden col-span-12">
+        <div>
+          <p>Private clients</p>
+          <div className="flex flex-col gap-6" data-theme="pc">
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="big"
+              image={image}
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="none"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="secondary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="secondary-light"
+              iconVersion="small"
+            />
+          </div>
         </div>
-      </div>
-      <div>
-        <p>Business clients</p>
-        <div className="flex flex-col gap-6" data-theme="bc">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary-light"
-            iconVersion="small"
-          />
+        <div>
+          <p>Business clients</p>
+          <div className="flex flex-col gap-6" data-theme="bc">
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="secondary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="secondary-light"
+              iconVersion="small"
+            />
+          </div>
         </div>
-      </div>
-      <div>
-        <p>Ecosystem own</p>
-        <div className="flex flex-col gap-6" data-theme="eo">
-          <TextBlock context={context} {...TEXT_BLOCK} blockVersion="primary" iconVersion="small" />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary"
-            iconVersion="small"
-          />
-          <TextBlock
-            context={context}
-            {...TEXT_BLOCK}
-            blockVersion="secondary-light"
-            iconVersion="small"
-          />
+        <div>
+          <p>Ecosystem own</p>
+          <div className="flex flex-col gap-6" data-theme="eo">
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="primary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="secondary"
+              iconVersion="small"
+            />
+            <TextBlock
+              context={context}
+              {...TEXT_BLOCK}
+              blockVersion="secondary-light"
+              iconVersion="small"
+            />
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  ),
+};

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -55,10 +55,10 @@ export const TextBlock = JSX<TextBlockProps>(
           ) : null}
           {items?.length ? (
             <List
+              className="mt-1"
               items={items}
               isDotted={isDotted}
-              version="gray"
-              className="mt-1 text-m-sm text-secondary-text"
+              version={blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray'}
             />
           ) : null}
         </div>

package/src/components/Tile/Tile.fixture.tsx

@@ -40,27 +40,25 @@ export const TILE: TileContent = {
   image,
 };
 
+export const TILE_PREMIUM: TileContent = {
+  title: 'Премиальные продукты',
+  description:
+    'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус',
+  buttons: [
+    {
+      href: 'https://rshb.ru',
+      text: 'Подробнее',
+      target: '_blank',
+      version: 'secondary',
+    },
+  ],
+  image: image3,
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">
-      <Tile
-        context={context}
-        className="col-span-8"
-        title="Кредиты"
-        items={[
-          'Кредитный лимит до 10 млн ₽',
-          'Кредиты наличными на любые цели',
-          'Получите деньги без залога и поручителей',
-        ]}
-        buttons={[
-          {
-            text: 'Подробнее',
-            href: '/credit-cards',
-            version: 'secondary',
-          },
-        ]}
-        image={image}
-      />
+      <Tile context={context} className="col-span-8" {...TILE} />
     </div>
   ),
   mortgage: (
@@ -108,23 +106,7 @@ export default {
   ),
   premium: (
     <div className="container grid grid-cols-12">
-      <Tile
-        context={context}
-        className="col-span-6"
-        title="Премиальные продукты"
-        description={
-          'Выделенные зоны обслуживания и персональный финансовый консультант. Полный спектр премиальных продуктов, подчеркивающих ваш статус'
-        }
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
-        image={image3}
-      />
+      <Tile context={context} className="col-span-6" {...TILE_PREMIUM} />
     </div>
   ),
   ecosystem: (

package/src/hooks/useTableArrowScrollControl.ts

@@ -0,0 +1,22 @@
+import type { TableArrowScrollControlProps } from '../ui-kit/TableArrowScrollControl/TableArrowScrollControlProps';
+
+export const useTableArrowScrollControl = ({
+  columnsLength,
+  colsLengthForScroll,
+  activeCardIndex,
+  setActiveCardIndex,
+}: {
+  columnsLength: number;
+  colsLengthForScroll: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (_: number) => void;
+}): Required<TableArrowScrollControlProps> => {
+  const onNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const onPrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isScrollAvailable = columnsLength > colsLengthForScroll;
+  const showNextButton = isScrollAvailable && columnsLength - activeCardIndex > colsLengthForScroll;
+  const showPrevButton = Boolean(isScrollAvailable && activeCardIndex > 0);
+
+  return { onNextClick, onPrevClick, isScrollAvailable, showNextButton, showPrevButton };
+};