@redneckz/wildless-cms-uni-blocks 0.13.2 → 0.13.4

package/src/components/ProductBlock/renderBackwardButton.tsx

@@ -11,7 +11,7 @@ export function renderBackwardButton(
   const commonProps = { text, href, target, ariaLabel: text };
 
   return (
-    <div className="flex items-center gap-3">
+    <div className="flex items-center gap-s">
       <Button
         className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center"
         version={version}

package/src/components/ProductGallery/ProductGallery.tsx

@@ -54,10 +54,10 @@ const renderNavButton =
     const isActive = i === activeSlideIndex;
     const btnClassName = isActive
       ? 'min-w-[350px] bg-white shadow-dark-blue border-none p-6'
-      : 'min-w-[290px] ease-in duration-300 bg-white/10 px-6 py-5 hover:py-6 backdrop-blur';
+      : 'min-w-72 ease-in duration-300 bg-white/10 px-xl py-lg hover:py-xl backdrop-blur';
     const btnTitleClassName = isActive
-      ? 'text-primary-text text-h6 py-2'
-      : 'text-l pb-1 text-secondary-text group-data-secondary:text-white';
+      ? 'text-primary-text text-h6 py-xs'
+      : 'text-l pb-2xs text-secondary-text group-data-secondary:text-white';
     const btnDescClassName = isActive
       ? 'text-secondary-text text-l font-light'
       : 'text-secondary-text text-m font-light group-data-secondary:text-white/80';
@@ -69,7 +69,7 @@ const renderNavButton =
         onClick={() => onClick(i)}
         aria-label={nav?.title}
         className={style(
-          'relative px-6 box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
+          'relative px-xl box-border overflow-hidden text-left grow basis-0 border border-gray group-data-secondary:border-white/50',
           btnClassName,
         )}
       >

package/src/components/PromoTile/PromoTile.tsx

@@ -28,7 +28,7 @@ export const PromoTile = JSX<PromoTileProps>(
               title={title}
               headlineVersion={headlineVersion}
               align="text-left"
-              isPadding={false}
+              isEmbedded={true}
             />
           ) : null
         }

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

@@ -19,7 +19,7 @@ const ICON: Picture = {
 const DESCRIPTION = `
 <p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
 <br>
-<p class="text-slate-600/50 mb-3">Основными задачи Представительства</p>
+<p class="text-slate-600/50 mb-s">Основными задачи Представительства</p>
 <ul>
   <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов;</li>
   <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Беларусь;</li>

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.fixture.tsx

@@ -19,7 +19,7 @@ const ICON: Picture = {
 const DESCRIPTION = `
 <p><strong>Представительство АО «Россельхозбанк» в Республике Беларусь (г. Минск) зарегистрировано в октябре 2008 года</strong></p>
 <br>
-<p class="text-slate-600/50 mb-3">Основными задачи Представительства</p>
+<p class="text-slate-600/50 mb-s">Основными задачи Представительства</p>
 <ul>
   <li>установление и развитие деловых связей с белорусскими финансовыми институтами и компаниями АПК для реализации совместных проектов;</li>
   <li>организация взаимодействия с государственными органами власти и международными организациями, находящимися в Республике Беларусь;</li>

package/src/components/RepresentativeOfficeInfo/RepresentativeOfficeInfo.tsx

@@ -56,7 +56,7 @@ const renderIconBlock = (icon?: Picture) => (
 );
 
 const renderDescriptionBlock = (__html?: string) => (
-  <div className="border-b border-main-divider pb-5">
+  <div className="border-b border-main-divider">
     <RichText __html={__html} />
   </div>
 );

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

@@ -22,6 +22,7 @@ export const ROLLUP_ITEM: BlockDef = {
     { type: 'TextBlock', content: TEXT_BLOCK },
   ],
 };
+
 const labelIcon: Picture = { icon: 'BriefcaseIcon' };
 
 export default {
@@ -29,9 +30,11 @@ export default {
     <div>
       <RollupItem
         {...ROLLUP_ITEM.content}
-        version="secondary"
         block={ROLLUP_ITEM}
+        labelIcon={labelIcon}
+        labelIconBgVersion="primary"
         options={options}
+        version="secondary"
       />
       <RollupItem {...ROLLUP_ITEM.content} block={ROLLUP_ITEM} options={options} />
     </div>
@@ -39,11 +42,11 @@ export default {
   labelIcon: (
     <div>
       <RollupItem
+        block={ROLLUP_ITEM}
+        isExpanded={true}
         label="RollupItem label 1"
         labelIcon={labelIcon}
         labelIconBgVersion="primary"
-        isExpanded={true}
-        block={ROLLUP_ITEM}
         options={options}
       />
     </div>

package/src/components/RollupItem/RollupItem.tsx

@@ -2,33 +2,36 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import type { FoldablePartProps } from '../../ui-kit/Foldable/FoldablePartProps';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { IconBgVersion, IconName, IconProps } from '../../ui-kit/Icon/IconProps';
+import type { IconName, IconBgVersion, IconProps } from '../../ui-kit/Icon/IconProps';
 import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import { foldableSectionStyles } from './foldableSectionStyles';
 import { getIconName } from './getIconName';
-import { renderRoundedIcon } from './renderRoundedIcon';
 import { rollupIconVersion } from './rollupIconVersion';
 import type { RollupItemContent } from './RollupItemContent';
 import { rollupItemStyles } from './rollupItemStyles';
+import type { Picture } from '../../model/Picture';
+import { renderRoundedIcon } from './renderRoundedIcon';
 
-export interface RollupItemProps extends RollupItemContent, UniBlockProps {}
+interface RollupItemProps extends RollupItemContent, UniBlockProps {
+  labelIcon?: Picture;
+  labelIconBgVersion?: IconBgVersion;
+}
 
 export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
   ({
     className = '',
+    isExpanded,
+    isFoldButtonOnTop = true,
     label = 'Развернуть',
     labelIcon,
     labelIconBgVersion,
-    isExpanded,
-    isFoldButtonOnTop = true,
     version = 'primary',
     ...rest
   }) => {
@@ -45,7 +48,7 @@ export const RollupItem: JSXBlock<RollupItemProps> = JSX<RollupItemProps>(
           unfoldedByDefault={isExpanded}
           renderFoldableSection={({ isUnfolded }) => (
             <FoldableSection
-              className={style('gap-5', foldableSectionStyles)}
+              className={style('gap-lg', foldableSectionStyles)}
               isUnfolded={isUnfolded}
             >
               {renderChildren({

package/src/components/RollupItem/RollupItem.ui.json

@@ -1,7 +1,3 @@
 {
-  "content": {
-    "labelIcon": {
-      "ui:field": "icon"
-    }
-  }
+  "content": {}
 }

package/src/components/RollupItem/RollupItemContent.ts

@@ -1,7 +1,5 @@
 import type { LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
-import type { IconBgVersion } from '../../ui-kit/Icon/IconProps';
 
 /**
  * @title Сворачивающаяся секция
@@ -12,6 +10,4 @@ export type RollupItemContent = UniBlockContent &
     isExpanded?: boolean;
     /** @title Кнопка сверху */
     isFoldButtonOnTop?: boolean;
-    labelIcon?: Picture; // TODO: только для мобильной версии
-    labelIconBgVersion?: IconBgVersion;
   };

package/src/components/RollupItem/foldableSectionStyles.ts

@@ -1 +1 @@
-export const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-4';
+export const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-m';

package/src/components/SafeDepositRental/RadioButtons.tsx

@@ -4,10 +4,10 @@ import { Radio } from '../../ui-kit/Radio/Radio';
 import { style } from '../../utils/style';
 
 interface RadioButtonsProps {
-  className: string;
+  className?: string;
 }
 
-export const RadioButtons = JSX(({ className }: RadioButtonsProps) => {
+export const RadioButtons = JSX(({ className = '' }: RadioButtonsProps) => {
   const [selectedOption, setSelectedOption] = useState('option2');
   const onChange = useCallback((_: string) => setSelectedOption(_), []);
 

package/src/components/SafeDepositRental/SafeBoxCases.tsx

@@ -21,7 +21,7 @@ export const SafeBoxCases = JSX<SafeBoxCasesProps>(
     onSelectedBoxSize,
   }) => {
     return (
-      <div className="flex flex-col sm:flex-row gap-4 order-1">
+      <div className="flex flex-col sm:flex-row gap-m order-1">
         <div className="flex-1 min-w-0">
           <WrapperSelect
             data={caseVolumes}

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

@@ -4,7 +4,7 @@ import { SafeDepositRental } from './SafeDepositRental';
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <SafeDepositRental
         className="col-span-12"
         footnote="Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег

package/src/components/SafeDepositRental/SafeDepositRental.fixture.tsx

@@ -4,7 +4,7 @@ import { SafeDepositRental } from './SafeDepositRental';
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 mb-1">
+    <div className="container grid grid-cols-12">
       <SafeDepositRental
         className="col-span-12"
         footnote="Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег

package/src/components/SafeDepositRental/SafeDepositRental.tsx

@@ -43,7 +43,7 @@ export const SafeDepositRental = JSX<SafeDepositRentalProps>(
 
     return (
       <BlockWrapper className={className} defaultPadding="" {...rest}>
-        <div className="p-4xl">
+        <div className="p-4xl space-y-xl">
           {title ? (
             <Heading
               title={title}

package/src/components/SafeDepositRental/SafeDepositRentalFields.tsx

@@ -56,8 +56,8 @@ export const SafeDepositRentalFields = JSX<SafeDepositRentalFieldsProps>(
             Тип договора
           </Text>
         </div>
-        <div className="contents sm:flex justify-between items-center">
-          <RadioButtons className="mb-4 sm:mb-0" />
+        <div className="contents sm:flex justify-between items-center gap-m">
+          <RadioButtons />
           <Button text="Офисы на карте" version="primary" onClick={onClick} className="order-6" />
         </div>
       </div>

package/src/components/SafeDepositRental/SafeDepositRentalForm.tsx

@@ -37,7 +37,7 @@ export const SafeDepositRentalForm = JSX<SafeDepositRentalFormProps>((props) =>
   const tariffs = getTariffs(safeBoxCases, data.selectedBoxSize);
 
   return (
-    <div className="flex flex-col sm:flex-row gap-x-9 align-top mb-6">
+    <div className="flex flex-col sm:flex-row gap-4xl align-top">
       <SafeDepositRentalFields
         {...data}
         regions={regions}

package/src/components/SafeDepositRental/SafeDepositRentalTotal.tsx

@@ -13,15 +13,15 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
   return (
     <div className="contents sm:flex flex-col justify-between order-2">
-      <div className="flex flex-col sm:flex-row gap-x-11 gap-y-7 order-5 sm:order-none py-7 sm:py-0 border-t border-main-divider sm:border-none">
+      <div className="flex flex-col sm:flex-row gap-x-6xl gap-y-2xl order-5 sm:order-none py-2xl sm:py-0 border-t border-main-divider sm:border-none">
         {renderTotal('Аренда за', days)}
         {renderTotal('Цена', price + ' ₽')}
       </div>
-      <span className="sm:hidden order-3 mb-2 text-s-light text-secondary-text">
+      <span className="sm:hidden order-3 mb-xs text-s font-light text-secondary-text">
         {imageDescription}
       </span>
-      <div className="flex flex-col items-center gap-3 order-3 sm:order-none mb-6 sm:mb-0 bg-primary-main py-3 sm:p-8 text-center">
-        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-[246px]" />
+      <div className="flex flex-col items-center gap-s order-3 sm:order-none mb-xl sm:mb-0 bg-primary-main py-s sm:p-3xl text-center">
+        <Img image={{ icon: 'PackA4Icon' }} className="sm:h-60" />
         <span className="hidden sm:inline text-s font-light text-white opacity-80 whitespace-pre-line">
           {imageDescription}
         </span>
@@ -32,7 +32,7 @@ export const SafeDepositRentalTotal = JSX<SafeDepositRentalTotalProps>(({ days,
 
 const renderTotal = (label: string, total: string | number) => {
   return (
-    <div className="flex justify-between items-center gap-y-1 sm:flex-col sm:items-start">
+    <div className="flex justify-between items-center gap-y-xs sm:flex-col sm:items-start">
       <div className="text-l font-light text-secondary-text">{label}</div>
       <span className="text-l sm:text-h3 text-primary-text">{total}</span>
     </div>

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -1,19 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Heading } from '../../ui-kit/Heading/Heading';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
 import type { DefaultStep, Step } from './StepsBlockContent';
 import { StepsBlockContent } from './StepsBlockContent';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
-import { style } from '../../utils/style';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { UniBlockProps } from '../../model/JSXBlock';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
 
 type StepIconVersion = Record<'icon' | 'image', string>;
 
@@ -43,25 +42,26 @@ export const StepsBlock = JSX<StepsBlockProps>(
     ...rest
   }) => (
     <BlockWrapper
-      className={style('box-border flex flex-col gap-xs', className)}
+      className={style('box-border flex flex-col gap-xl', className)}
       defaultPadding="p-6xl"
       version={version}
       {...rest}
     >
-      {title ? <Heading headingType="h3" className="text-left" title={title} /> : null}
-      {description ? (
-        <Paragraph size="text-xl" font="font-light">
-          <span className={styleMap.description}>{description}</span>
-        </Paragraph>
-      ) : null}
+      <Headline
+        title={title}
+        description={description}
+        headlineVersion="M"
+        isEmbedded={true}
+        align="text-left"
+      />
       {steps?.length ? (
         <div className="box-border">
-          <div className="flex flex-col justify-between">
+          <div className="flex flex-col gap-6xl justify-between">
             {steps.map(renderStep(size, version))}
           </div>
         </div>
       ) : null}
-      {renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })}
+      {renderButtonsSection(buttons, { isVertical: true })}
     </BlockWrapper>
   ),
 );
@@ -92,7 +92,7 @@ const renderDefaultStep =
   (size: SizeVersion, version: BlockVersion) => (step: DefaultStep, i: number) =>
     (
       <div key={String(i)} className="contents">
-        <div className="flex flex-row text-center relative py-3">
+        <div className="flex flex-row text-center relative">
           <div className="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(size, version)(step, i)}
           </div>
@@ -102,7 +102,7 @@ const renderDefaultStep =
               STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
             )}
           >
-            {step.label ? <div className="text-l m-0 text-left">{step.label}</div> : null}
+            {step.label ? <div className="text-l text-left">{step.label}</div> : null}
             {step.description ? (
               <div className={style('text-s font-light text-left', styleMap.description)}>
                 {step.description}

package/src/components/StepsBlock/StepsBlock.tsx

@@ -3,15 +3,15 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { joinList } from '../../utils/joinList';
 import { style } from '../../utils/style';
-import { checkCanRenderIcon } from './checkCanRenderIcon';
-import { renderStep } from './renderStep';
+import { Headline } from '../Headline/Headline';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 import type { StyleType } from './StepsBlockStyleMaps';
 import { STEPS_BLOCK_STYLE } from './StepsBlockStyleMaps';
+import { checkCanRenderIcon } from './checkCanRenderIcon';
+import { renderStep } from './renderStep';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
@@ -29,6 +29,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
     version = 'primary',
     stepVersion = 'gray',
     title,
+    description,
     ...rest
   }) => {
     const shortGaps = steps.length > 3;
@@ -50,7 +51,13 @@ export const StepsBlock = JSX<StepsBlockProps>(
         version={version}
         {...rest}
       >
-        {title ? <Heading headingType="h4" className="text-center" title={title} /> : null}
+        <Headline
+          headlineVersion="S"
+          title={title}
+          description={description}
+          isEmbedded={true}
+          className="w-full"
+        />
         {steps?.length ? (
           <div className="box-border space-y-lg">
             <div className={style('flex items-center', paddingX)}>
@@ -58,7 +65,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 <div className={style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity)} />,
               )(steps.map(renderStepIcon(styleMap, size, stepVersion)))}
             </div>
-            <div className={style('flex justify-between', shortGaps ? 'gap-x-3' : 'gap-x-20')}>
+            <div className={style('flex justify-between', shortGaps ? 'gap-x-s' : 'gap-x-20')}>
               {steps.map(renderStep({ styleMap, isMainButton, version }))}
             </div>
           </div>

package/src/components/StepsBlock/renderStep.tsx

@@ -81,4 +81,4 @@ const renderDefaultStep =
     );
   };
 
-const getContainerWidth = (length: number): string => (length < 5 ? 'w-[276px]' : 'w-[200px]');
+const getContainerWidth = (length: number): string => (length < 5 ? 'w-72' : 'w-52');

package/src/components/SwipeListControlBlock/SwipeListControlBlock.fixture.tsx

@@ -11,7 +11,7 @@ const options = {
 
 export default {
   default: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <SwipeListControlBlock
         className="col-span-12"
         block={{
@@ -27,7 +27,7 @@ export default {
     </div>
   ),
   secondary: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <SwipeListControlBlock
         className="col-span-12"
         block={{
@@ -44,7 +44,7 @@ export default {
     </div>
   ),
   transparent: (
-    <div className="container grid grid-cols-12 p-4">
+    <div className="container grid grid-cols-12">
       <SwipeListControlBlock
         className="col-span-12"
         block={{

package/src/components/TariffsTable/EmbeddableCellData.mobile.tsx

@@ -15,7 +15,7 @@ export type EmbeddableCellDataType =
 
 const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) =>
   renderButtonsSection(buttons, {
-    className: 'mt-3',
+    className: 'mt-s',
     buttonClassName: 'w-12 h-12',
   });
 
@@ -31,7 +31,7 @@ const renderImgCellData = ({ image }: ImageContent) =>
 
 const renderListCellData = ({ isDotted, ...rest }: ListProps) => (
   <List
-    className="flex flex-col justify-between items-start text-m pl-2 text-base"
+    className="flex flex-col justify-between items-start text-m pl-xs text-base"
     isDotted={isDotted ?? true}
     {...rest}
   />

package/src/components/TariffsTable/EmbeddableCellData.tsx

@@ -27,18 +27,14 @@ interface TableCellDataProps extends TableInnerButtonProps {
 
 const renderButtonsCellData = ({ buttons }: ButtonsSectionContent) => renderButtonsSection(buttons);
 
-const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => {
-  const labelClassName = `text-h6 m-0 ${description ? 'mb-1' : ''}`;
-
-  return (
-    <div>
-      {label ? <div className={labelClassName}>{label}</div> : null}
-      {description ? (
-        <div className="text-secondary-text text-l font-light">{description}</div>
-      ) : null}
-    </div>
-  );
-};
+const renderLabelDescriptionCellData = ({ label, description }: LabelDescriptionCell) => (
+  <div className="space-y-2xs">
+    {label ? <div className="text-h6 m-0">{label}</div> : null}
+    {description ? (
+      <div className="text-secondary-text text-l font-light">{description}</div>
+    ) : null}
+  </div>
+);
 
 const renderImgCellData = ({ image }: ImageContent) => (image?.src ? <Img image={image} /> : null);
 

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -34,7 +34,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
           description={description}
           headlineVersion="M"
           align="text-left"
-          isPadding={false}
+          isEmbedded={true}
         />
         {orientation === 'vertical' ? (
           <TariffsTableVertical tiles={tiles} {...rest} />

package/src/components/TariffsTable/TariffsTable.tsx

@@ -7,11 +7,11 @@ import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { renderDefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
 import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Headline } from '../Headline/Headline';
 import { style } from '../../utils/style';
-import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { Headline } from '../Headline/Headline';
 import type { TariffsTableContent } from './TariffsTableContent';
 import { TariffsTableRow } from './TariffsTableRow';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
 
 export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
 
@@ -51,7 +51,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         defaultPadding="p-6xl"
         {...rest}
       >
-        <Headline title={title} description={description} headlineVersion="M" isPadding={false} />
+        <Headline title={title} description={description} headlineVersion="M" isEmbedded={true} />
         {hiddenRowsNum > 0 ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -30,7 +30,7 @@ export const TariffsTableCell = JSX<TariffsTableCellProps>(
   }) => {
     return (
       <div
-        className="first:pl-0 w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
+        className="w-80 flex-grow flex flex-col border-solid border-main-divider border border-t-0 border-x-0"
         role="cell"
       >
         {cells?.length

package/src/components/TariffsTable/TariffsTableVertical.tsx

@@ -5,7 +5,7 @@ import { TariffsTableTileCell } from './TariffsTableTileCell';
 
 export const TariffsTableVertical = JSX<TariffsTableProps>(({ tiles, ...rest }) =>
   tiles?.length ? (
-    <div className="flex flex-col gap-3.5">
+    <div className="flex flex-col gap-s">
       {tiles.map((tile, i) => (
         <TariffsTableTileCell key={String(i)} tile={tile} {...rest} />
       ))}

package/src/components/TariffsTable/constants.ts

@@ -1,4 +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 FIRST_CELL_CLASSES = 'w-80 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.fixture.tsx

@@ -24,7 +24,7 @@ export default {
   default: (
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
-        <div className="flex flex-col gap-6" data-theme="pc">
+        <div className="flex flex-col gap-xl" data-theme="pc">
           <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
           <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="big" image={image} />
           <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="none" />
@@ -37,7 +37,7 @@ export default {
   'business clients': (
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
-        <div className="flex flex-col gap-6" data-theme="bc">
+        <div className="flex flex-col gap-xl" data-theme="bc">
           <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
           <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>
@@ -47,7 +47,7 @@ export default {
   'ecosystem own': (
     <div className="container grid grid-cols-12">
       <div className="font-sans overflow-hidden col-span-12">
-        <div className="flex flex-col gap-6" data-theme="eo">
+        <div className="flex flex-col gap-xl" data-theme="eo">
           <TextBlock {...TEXT_BLOCK} version="primary" iconVersion="small" />
           <TextBlock {...TEXT_BLOCK} version="secondary" iconVersion="small" />
         </div>

package/src/components/TextBlock/TextBlock.tsx

@@ -15,14 +15,14 @@ export const TextBlock = JSX<TextBlockProps>(
   ({ className = '', title, description, iconVersion, image, __html, items = [], ...rest }) => (
     <BlockWrapper
       className={style(
-        'flex gap-3 sm:gap-4 bg-white group-data-secondary:bg-primary-main/10',
+        'flex gap-s sm:gap-m bg-white group-data-secondary:bg-primary-main/10',
         className,
       )}
       {...rest}
     >
-      {iconVersion === 'small' ? <div className="mt-1">{renderIcon()}</div> : null}
+      {iconVersion === 'small' ? renderIcon() : null}
       {iconVersion === 'big' ? renderImage(image) : null}
-      <div className="flex flex-col w-fit gap-1 sm:gap-2">
+      <div className="flex flex-col w-fit gap-2xs sm:gap-xs">
         {title ? (
           <Text
             size="text-l"
@@ -62,7 +62,7 @@ const renderDescription = (description: string) => (
 );
 
 const renderList = (items: string[], bullets: boolean) => {
-  const listStyle = bullets ? 'list-disc pl-6' : '';
+  const listStyle = bullets ? 'list-disc pl-xl' : '';
 
   return (
     <ul className={style('text-secondary-text group-data-secondary:text-white/80', listStyle)}>