@redneckz/wildless-cms-uni-blocks 0.3.8 → 0.3.11

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -16,22 +16,23 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
   return (
     <li
       className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0 py-[14px]'
+        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
       } border-solid border-main-divider`}
     >
       <button
         className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-        ${hasContent ? 'group cursor-pointer' : ''}`}
+          ${bordered ? '' : 'py-[14px] px-0'}
+          ${hasContent ? 'group cursor-pointer' : ''}`}
         onClick={handleToggle}
       >
         <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
+          className={`text-sm pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -7,7 +7,7 @@ import type { AccordionItemProps } from './AccordionItem';
 
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
   return (
-    <div className={`transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}>
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
       {blocks?.length ? blocks.map(renderBlock(context)) : null}
     </div>
   );
@@ -21,7 +21,7 @@ const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps
 
   const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
-    <div className="mb-5 last:mb-0 py-2.5" key={`block_${i}`}>
+    <div className="mb-5 last:mb-0" key={`block_${i}`}>
       <AccordionBlock context={context} {...block} className="!p-0" />
     </div>
   );

package/src/components/Accordion/utils/isActiveHandler.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../../icons/IconName';
 
 export const isActiveHandler = ({ context, blocks }) => {
   const [isActive, setIsActive] = context.useState(false);

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -9,7 +9,7 @@ export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps
 export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
   return (
     <section
-      className={`font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${
+      className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
         className || ''
       }`}
     >
@@ -17,7 +17,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}
       {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
+        <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
       ) : null}
     </section>
   );
@@ -25,7 +25,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
 
 const renderStep = (benefit: Benefit, i: number) => {
   return (
-    <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
+    <div key={String(i)} className="flex items-center gap-5 max-w-[500px]">
       {benefit.icon && (
         <Icon
           className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"

package/src/components/BlockContent.ts

@@ -17,6 +17,7 @@ import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { LinkListContent } from './LinkList/LinkListContent';
 
 /**
  * @hidden
@@ -40,4 +41,5 @@ export type BlockContent =
   | TariffsTableContent
   | TextBlockContent
   | TileContent
-  | NavigationContent;
+  | NavigationContent
+  | LinkListContent;

package/src/components/Blocks.mobile.ts

@@ -10,6 +10,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
+import { LinkList } from './LinkList/LinkList';
 
 export const Blocks = {
   Accordion,
@@ -24,4 +25,5 @@ export const Blocks = {
   ProductGallery,
   StepsBlock,
   TextBlock,
+  LinkList,
 };

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

@@ -0,0 +1,152 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../setup-fixture';
+import { ComparisonTable } from './ComparisonTable';
+import type { Column } from './ComparisonTableContent';
+
+const image1: Picture = {
+  src: 'card-1.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image2: Picture = {
+  src: 'card-2.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const image3: Picture = {
+  src: 'card-3.png',
+  format: 'webp',
+  size: {
+    width: 100,
+    height: 63,
+  },
+};
+
+const rowHeaders = [
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Начисление процентов на остаток по счету' },
+  { title: 'Начисление процентов на остаток по счету' },
+];
+const columns: Column[] = [
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      subtitle: 'Менеджер свяжется с вами и согласует встречу',
+      image: image1,
+      link: {
+        text: 'Подробнее',
+        href: '#',
+      },
+    },
+    data: [
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Мир',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Россельхоз-Росснефть',
+      image: image2,
+      link: {
+        text: 'Подробнее',
+        href: '#',
+      },
+    },
+    data: [
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Начисление процентов на остаток по счету',
+        },
+      ],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'Начисление',
+        },
+      ],
+      [
+        {
+          description: 'Начисление процентов на остаток по счету',
+        },
+      ],
+    ],
+  },
+  {
+    header: {
+      title: 'Профсоюзная',
+      image: image3,
+      link: {
+        text: 'Подробнее',
+        href: '/credits',
+      },
+    },
+    data: [
+      [{ label: 'Нет' }],
+      [{ label: 'Бесплатно' }],
+      [{ label: 'Есть' }],
+      [{ label: 'До 20%' }],
+      [
+        {
+          label: 'Бесплатно',
+          description: 'При обороте по карте от 10000 ₽ в месяц',
+        },
+      ],
+      [{ label: '69 рублей в месяц' }],
+      [{ description: 'Для членов профсоюзных организаций' }],
+    ],
+  },
+];
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        columns={Array(2).fill(columns).flat()}
+        visibleRowLength={2}
+      />
+    </div>
+  ),
+  'with swiper': (
+    <div className="container grid grid-cols-12">
+      <ComparisonTable
+        className="col-span-12"
+        title="Другие дебетовые карты Россельхозбанка"
+        isColoredFirstColumn={true}
+        context={context}
+        rowHeaders={rowHeaders}
+        useSwiper={true}
+        columns={Array(2).fill(columns).flat()}
+        visibleRowLength={2}
+      />
+    </div>
+  ),
+};

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -0,0 +1,121 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ComparisonTableContent } from './ComparisonTableContent';
+import { TableColumn } from './TableColumn';
+
+export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
+
+export const ComparisonTable = JSX<ComparisonTableProps>(
+  ({
+    className,
+    context,
+    title,
+    rowHeaders,
+    columns,
+    visibleRowLength = 0,
+    isColoredFirstColumn = false,
+    useSwiper = false,
+  }) => {
+    const tableData =
+      columns?.map(({ data, header }) => ({
+        header,
+        column: data?.map((cell, i) => ({ cell, rowHeader: rowHeaders?.[i]?.title })),
+      })) || [];
+
+    const [columnsViewState, setColumnsViewState] = context.useState<boolean[]>(
+      new Array(columns?.length).fill(!visibleRowLength),
+    );
+
+    const handleToggleColumn = (i: number) => {
+      columnsViewState[i] = !columnsViewState[i];
+      setColumnsViewState([...columnsViewState]);
+    };
+
+    return (
+      <section
+        className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+          className || ''
+        }`}
+      >
+        {title && (
+          <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        )}
+
+        {renderColumns({
+          tableData,
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+          useSwiper,
+          setColumnsViewState,
+        })}
+      </section>
+    );
+  },
+);
+
+const renderColumns = ({
+  context,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  columnsViewState,
+  handleToggleColumn,
+  useSwiper,
+  setColumnsViewState,
+}) => (
+  <div role="table">
+    {tableData?.length ? (
+      useSwiper ? (
+        <SwipeListControl
+          context={context}
+          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+        >
+          {tableData.map(
+            renderColumn({
+              context,
+              visibleRowLength,
+              isColoredFirstColumn,
+              columnsViewState,
+              handleToggleColumn,
+            }),
+          )}
+        </SwipeListControl>
+      ) : (
+        tableData.map(
+          renderColumn({
+            context,
+            visibleRowLength,
+            isColoredFirstColumn,
+            columnsViewState,
+            handleToggleColumn,
+          }),
+        )
+      )
+    ) : null}
+  </div>
+);
+
+const renderColumn =
+  ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
+  (columnData, i) =>
+    (
+      <TableColumn
+        key={String(i)}
+        context={context}
+        visibleRowLength={visibleRowLength}
+        showRow={columnsViewState[i]}
+        header={columnData.header}
+        columnData={columnData.column}
+        isFillGradient={i === 0 && isColoredFirstColumn}
+        onToggleColumn={() => handleToggleColumn(i)}
+      />
+    );
+
+const onSlideChange = (columnsViewState, setColumnsViewState) => () => {
+  setColumnsViewState(new Array(columnsViewState.length).fill(false));
+};

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -26,6 +26,8 @@ export interface CellData {
 export interface ColumnHeader {
   /** @title Заголовок */
   title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   icon?: IconName;
   image?: Picture;
   link?: LinkProps;
@@ -61,4 +63,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
+  /** @title Использовать свайпер- */
+  useSwiper?: boolean;
 }

package/src/components/ComparisonTable/HeaderCell.mobile.tsx

@@ -0,0 +1,50 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { Img } from '../../ui-kit/Img/Img';
+
+export interface HeaderCellProps {
+  icon?: IconName;
+  image?: Picture;
+  title?: string;
+  subtitle?: string;
+  isFillGradient?: boolean;
+  link?: LinkProps;
+}
+
+export const HeaderCell = JSX<HeaderCellProps>(
+  ({ icon, image, title, subtitle, isFillGradient }) => (
+    <div role="columnheader" scope="col">
+      {icon && (
+        <Icon
+          className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
+          name={icon}
+          width="63"
+          height="63"
+        />
+      )}
+      {image?.src && (
+        <div className="mb-3.5">
+          <Img image={image} />
+        </div>
+      )}
+      {title && (
+        <Heading
+          headingType="h4"
+          className={`${isFillGradient ? 'text-white' : ''}`}
+          title={title}
+        />
+      )}
+      {subtitle && (
+        <div
+          className={`text-m-sm mb-3.5 ${isFillGradient ? 'text-white' : 'text-secondary-text/80'}`}
+        >
+          {subtitle}
+        </div>
+      )}
+    </div>
+  ),
+);

package/src/components/ComparisonTable/TableCell.mobile.tsx

@@ -0,0 +1,46 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { CellData } from './ComparisonTableContent';
+import { DIVIDER_CLASSES } from './constants';
+
+export interface TableCellProps {
+  cell: CellData[];
+  rowHeader?: string;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  isFillGradient?: boolean;
+}
+
+export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient = false }) => {
+  const cellWrapperClasses = `box-border flex flex-col`;
+
+  const cellClasses = `h-full ${DIVIDER_CLASSES}`;
+
+  return (
+    <div className={cellWrapperClasses} role="cell">
+      <div className={cellClasses}>{cell.map(renderCellInner(isFillGradient, rowHeader))}</div>
+    </div>
+  );
+});
+
+const renderCellInner =
+  (isFillGradient: boolean, rowHeader?: string) =>
+  ({ label, description }: CellData, i: number) =>
+    (
+      <div key={String(i)} className="flex justify-between text-m-sm py-3.5">
+        <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
+          {rowHeader}
+        </div>
+        <div className="basis-1/2">
+          {label && (
+            <div className={`text-right ${isFillGradient ? 'text-white' : ''}`}>{label}</div>
+          )}
+          {description && (
+            <div
+              className={`text-right ${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+      </div>
+    );

package/src/components/ComparisonTable/TableCell.tsx

@@ -4,8 +4,9 @@ import { BORDER_CLASSES, DIVIDER_CLASSES, GRADIENT } from './constants';
 
 export interface TableCellProps {
   cell: CellData[];
-  isLastRow: boolean;
-  isFirstRow: boolean;
+  isLastRow?: boolean;
+  isFirstRow?: boolean;
+  rowHeader?: string;
   isFillGradient: boolean;
 }
 
@@ -16,7 +17,7 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 
   const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
     isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : ''}`;
+  } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
 
   return (
     <div className={cellWrapperClasses} role="cell">

package/src/components/ComparisonTable/TableColumn.tsx

@@ -0,0 +1,66 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ButtonVersion } from '../../model/ButtonVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { GRADIENT } from './constants';
+import { HeaderCell } from './HeaderCell';
+import { TableCell } from './TableCell';
+
+export interface TableColumnProps extends UniBlockProps {
+  header: any;
+  columnData: any;
+  visibleRowLength: number;
+  isFillGradient: boolean;
+  showRow: boolean;
+  onToggleColumn: () => void;
+}
+
+export const TableColumn = JSX<TableColumnProps>(
+  ({ header, columnData, visibleRowLength = 0, isFillGradient, showRow, onToggleColumn }) => {
+    const columnDataView = columnData.slice(0, showRow ? columnData.length : visibleRowLength);
+    const gradientClassName = isFillGradient ? GRADIENT : '';
+    const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+    return (
+      <div className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}>
+        <HeaderCell {...header} isFillGradient={isFillGradient} />
+        {columnDataView?.length
+          ? columnDataView.map(({ rowHeader, cell }, i) => (
+              <TableCell
+                key={String(i)}
+                cell={cell}
+                rowHeader={rowHeader}
+                isFillGradient={isFillGradient}
+              />
+            ))
+          : null}
+
+        {showRow && renderButton({ header, buttonVersion })}
+        {renderToggleButton({ onToggleColumn, isFillGradient, showRow })}
+      </div>
+    );
+  },
+);
+
+const renderButton = ({ header, buttonVersion }) => (
+  <Button
+    href={header.link.href}
+    target={header.link.target}
+    version={buttonVersion}
+    className="font-medium text-m-sm mt-4 py-[11px]"
+  >
+    {header.link.text}
+  </Button>
+);
+
+const renderToggleButton = ({ onToggleColumn, isFillGradient, showRow }) => (
+  <div className="mt-5">
+    <a
+      onClick={onToggleColumn}
+      className={`font-medium text-m-sm cursor-pointer ${
+        isFillGradient ? 'text-white/80' : 'text-primary-main'
+      }`}
+    >
+      {!showRow ? 'Показать описание' : 'Скрыть'}
+    </a>
+  </div>
+);

package/src/components/ComparisonTable/TableRow.tsx

@@ -20,7 +20,7 @@ export const TableRow = JSX<TableRowProps>(
       {header?.title ? (
         <div
           className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-            !isLastRow ? 'border-solid' : ''
+            !isLastRow ? 'border-solid' : 'border-b-0'
           }`}
         >
           {header.title}

package/src/components/Footer/Contacts.tsx

@@ -19,7 +19,7 @@ export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, conte
       {hasButton ? (
         <Button
           version="primary"
-          className="my-4"
+          className="mt-0.5 mb-5"
           {...useLink(
             { router, handlerDecorator },
             {
@@ -38,7 +38,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;
 
   return (
-    <div className="mb-4" key={String(index)}>
+    <div className="mb-3.5" key={String(index)}>
       <div>{renderText(type, text)}</div>
       <div className="font-sans text-sm text-secondary-text">{description}</div>
     </div>

package/src/components/Footer/Footer.mobile.tsx

@@ -35,7 +35,7 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <Accordion className="!p-0 mb-4" {...propsTextBlock} />
         <div>{subMenu?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}
@@ -58,9 +58,9 @@ export const Footer = JSX<FooterProps>(
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
-    <Button key={`footer-${i}`} href={href} className="flex text-sm mb-4">
+    <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
-      <span className="pl-0.5 font-medium">{text}</span>
+      <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );
 };

package/src/components/Footer/HorizontalNavigation.mobile.tsx

@@ -17,7 +17,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
       <div className={className}>
         <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
         {links?.length ? (
-          <div className="flex flex-col gap-5 py-5">
+          <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (
               <HorizontalNavigationLink
                 key={String(i)}

package/src/components/Footer/MediaButton.tsx

@@ -32,13 +32,15 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+      {Icon && (
+        <Icon name={icon} width={width} height={height} asSVG className="block" color="none" />
+      )}
     </a>
   );
 });