@redneckz/wildless-cms-uni-blocks 0.3.9 → 0.3.10

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;
 }
 

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/Gallery/Gallery.mobile.tsx

@@ -2,12 +2,12 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
-import { Icon } from '../../ui-kit/Icon/Icon';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -57,7 +57,7 @@ function renderCard(card: GalleryCard, key: number) {
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card?.button?.href ? renderButton(card.button) : null}
+      {card?.button?.text ? renderButton(card.button) : null}
     </div>
   );
 }

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

@@ -9,12 +9,8 @@ export default {
         <p>Private clients</p>
         <div className="flex gap-6" data-theme="pc">
           <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button
-            href="https://www.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-          />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Link" version="secondary" />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Secondary" version="link" />
         </div>
       </div>
       <div>

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { SwipeListControlList } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getScrollPoints } from './utils/getScrollPoints';
 import { getIndexParts } from './utils/getIndexParts';
-import { SwipeListControlList } from './SwipeListControlList';
-import { SwipeListControlDots } from './SwipeListControlDots';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { getScrollPoints } from './utils/getScrollPoints';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,6 +14,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    onSlideChange,
   }) => {
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
@@ -35,28 +36,35 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       });
 
       const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      if (index !== activeIndex && onSlideChange) {
+        onSlideChange();
+      }
       setActiveIndex(index);
       setIndexFraction(fraction);
     };
 
     return (
       <div className={className}>
-        <SwipeListControlList
-          gap={gap}
-          padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
-        >
-          {children}
-        </SwipeListControlList>
-        <SwipeListControlDots
-          activeIndex={activeIndex}
-          indexFraction={indexFraction}
-          showDots={showDots}
-        >
-          {children}
-        </SwipeListControlDots>
+        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
+        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
       </div>
     );
   },
 );
+
+const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (
+  <SwipeListControlList
+    gap={gap}
+    padding={padding}
+    activeIndex={activeIndex}
+    onScroll={handleScroll}
+  >
+    {children}
+  </SwipeListControlList>
+);
+
+const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (
+  <SwipeListControlDots activeIndex={activeIndex} indexFraction={indexFraction} showDots={showDots}>
+    {children}
+  </SwipeListControlDots>
+);

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -16,4 +16,5 @@ export interface SwipeContainer {
 export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  onSlideChange?: () => void;
 }