@redneckz/wildless-cms-uni-blocks 0.14.97 → 0.14.99

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -4,6 +4,7 @@ import { type Picture } from '../../model/Picture';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
 import { borderStyle, gradientStyle } from './constants';
 
@@ -38,7 +39,11 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
           target={link.target || ''}
           className="w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs font-light font-medium py-s">{link.text}</div>
+          <div className="py-s">
+            <Paragraph size="text-xs" font="font-medium">
+              {link.text}
+            </Paragraph>
+          </div>
         </LinkButton>
       </div>
     )}

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

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
 import { style } from '../../utils/style';
-import { type CellData } from './ComparisonTableContent';
+import type { CellData } from './ComparisonTableContent';
 import { dividerStyle } from './constants';
 
 export interface TableCellProps {
@@ -21,26 +23,31 @@ export const TableCell = JSX<TableCellProps>(({ cell, rowHeader, isFillGradient
   </div>
 ));
 
+const rowHeaderAndDescriptionColor = (isFillGradient = false): TextColor =>
+  `${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`;
+const labelColor = (isFillGradient = false): TextColor => `${isFillGradient ? 'text-white' : ''}`;
+
 const renderCellInner =
   (isFillGradient: boolean, rowHeader?: string) =>
   ({ label, description }: CellData, i: number) =>
     (
       <div key={String(i)} className="flex justify-between text-s py-s">
-        <div className={`${isFillGradient ? 'text-white/80' : 'text-secondary-text'}`}>
+        <Paragraph size="text-s" color={rowHeaderAndDescriptionColor(isFillGradient)}>
           {rowHeader}
-        </div>
+        </Paragraph>
         <div className="basis-1/2">
           {label ? (
-            <div className={style('text-right', isFillGradient ? 'text-white' : '')}>{label}</div>
+            <div className="text-right">
+              <Paragraph size="text-s" align="text-right" color={labelColor(isFillGradient)}>
+                {label}
+              </Paragraph>
+            </div>
           ) : null}
           {description ? (
-            <div
-              className={style(
-                'text-right',
-                isFillGradient ? 'text-white/80' : 'text-secondary-text',
-              )}
-            >
-              {description}
+            <div className="text-right">
+              <Paragraph size="text-s" color={rowHeaderAndDescriptionColor(isFillGradient)}>
+                {description}
+              </Paragraph>
             </div>
           ) : null}
         </div>

package/src/components/ComparisonTable/TableColumn.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { type UniBlockProps } from '../../model/JSXBlock';
 import { type LinkButtonVersion } from '../../model/LinkButtonVersion';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { type CellData, type ColumnHeader } from './ComparisonTableContent';
 import { gradientStyle } from './constants';
@@ -76,11 +77,11 @@ const renderToggleButton = ({
     <a
       role="link"
       onClick={onToggleColumn}
-      className={`text-s font-medium cursor-pointer ${
-        isFillGradient ? 'text-white/80' : 'text-primary-main'
-      }`}
+      className={`cursor-pointer ${isFillGradient ? 'text-white/80' : 'text-primary-main'}`}
     >
-      {!showRow ? 'Показать описание' : 'Скрыть'}
+      <Text size="text-s" font="font-medium">
+        {!showRow ? 'Показать описание' : 'Скрыть'}
+      </Text>
     </a>
   </div>
 );

package/src/components/ComparisonTable/TableRow.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type TitleProps } from '../../model/HeadlineType';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { style } from '../../utils/style';
 import { type CellData } from './ComparisonTableContent';
 import { COLUMN_WIDTH, dividerStyle, firstCellStyle } from './constants';
@@ -21,12 +22,16 @@ export interface TableRowProps {
 }
 
 const titleStyle = (isLastRow = false) =>
-  style('text-s py-2xl', dividerStyle, firstCellStyle, isLastRow ? 'border-b-0' : 'border-solid');
+  style('py-2xl', dividerStyle, firstCellStyle, isLastRow ? 'border-b-0' : 'border-solid');
 
 export const TableRow = JSX<TableRowProps>(
   ({ row: { header, data }, activeIndex, isColoredFirstColumn, isFirstRow, isLastRow }) => (
     <TableRowContainer>
-      {header?.title ? <div className={titleStyle(isLastRow)}>{header.title}</div> : null}
+      {header?.title ? (
+        <div className={titleStyle(isLastRow)}>
+          <Paragraph size="text-s">{header.title}</Paragraph>
+        </div>
+      ) : null}
       {data?.length ? (
         <TableCarouselContainer activeIndex={activeIndex} columnWidth={COLUMN_WIDTH}>
           {data.map((cell, i) => (