@redneckz/wildless-cms-uni-blocks 0.12.5 → 0.12.6

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -39,13 +39,13 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
         'border border-solid border-gray group-data-secondary:border-white/50',
         className,
       )}
-      defaultPadding="p-0"
+      padding="p-0"
       {...rest}
     >
       <BaseTile
         className="h-full"
-        padding={padding}
         defaultPadding="p-m"
+        padding={padding}
         title={
           title ? <Heading headingType="h4" as="h3" className="mb-3.5 z-10" title={title} /> : null
         }

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -33,7 +33,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
     return (
       <BlockWrapper
         className={style('min-h-80', className)}
-        defaultPadding="p-0"
+        padding="p-0"
         version={version}
         {...rest}
       >

package/mobile/src/components/PictureText/PictureText.example.json

@@ -2,6 +2,8 @@
   "content": {
     "title": "Блок с картинкой",
     "description": "Описание",
+    "headlineVersion": "M",
+    "align": "text-center",
     "image": {
       "format": "webp",
       "size": {
@@ -10,7 +12,6 @@
       }
     },
     "version": "primary",
-    "directionRight": false,
     "benefits": [
       {
         "type": "default",
@@ -30,6 +31,10 @@
       }
     ],
     "sum": 500000,
-    "monthLimit": 25000
+    "monthLimit": 25000,
+    "imageOptions": {
+      "directionRight": false,
+      "imageAlign": "center"
+    }
   }
 }

package/mobile/src/components/PictureText/PictureText.tsx

@@ -8,15 +8,26 @@ import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
 export const PictureText = JSX<PictureTextProps>(
-  ({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+  ({
+    className,
+    padding,
+    headlineVersion = 'M',
+    align = 'text-center',
+    sum,
+    monthLimit,
+    imageOptions,
+    ...rest
+  }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
+        defaultPadding="p-default"
+        padding={padding}
         headlineVersion={headlineVersion}
         align={align}
         isInsetTitle={false}
+        imageOptions={{ directionRight: false, imageAlign: 'center', ...imageOptions }}
         {...rest}
-        imageOptions={{ directionRight: false, imageAlign: 'center', ...rest.imageOptions }}
       >
         {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
       </BaseProductTile>

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -24,7 +24,6 @@
     ],
     "version": "primary",
     "benefitsVersion": "normal",
-    "benefitsCountOfRow": 3,
     "benefits": [
       {
         "label": "Преимущество №1",
@@ -39,6 +38,9 @@
         }
       }
     ],
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -6,20 +6,24 @@ import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { renderBackwardButton } from './renderBackwardButton';
 
-export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
+export interface ProductBlockProps extends UniBlockProps, ProductBlockContent {}
 
-export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
-    defaultPadding="p-default"
-    {...rest}
-  >
-    {backwardButton?.text
-      ? renderBackwardButton(
-          backwardButton,
-          !rest.version || rest.version === 'primary' ? 'primary' : 'white',
-        )
-      : null}
-    <BaseProductTile className="grow h-full" {...rest} />
-  </BlockWrapper>
-));
+export const ProductBlock = JSX<ProductBlockProps>(
+  ({ className, padding, backwardButton, ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden flex flex-col gap-lg box-border', className)}
+      defaultPadding="p-default"
+      padding={padding}
+      {...rest}
+    >
+      {backwardButton?.text
+        ? renderBackwardButton(
+            backwardButton,
+            !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+          )
+        : null}
+
+      <BaseProductTile className="grow h-full" {...rest} />
+    </BlockWrapper>
+  ),
+);

package/mobile/src/components/ProductGallery/ProductGallery.tsx

@@ -8,20 +8,22 @@ import type { ProductGalleryContent } from './ProductGalleryContent';
 
 export interface ProductGalleryProps extends ProductGalleryContent, UniBlockProps {}
 
-export const ProductGallery = JSX<ProductGalleryProps>(({ className, slides = [], ...rest }) => (
-  <BlockWrapper
-    className={style('overflow-hidden relative', className)}
-    defaultPadding="p-m"
-    {...rest}
-  >
-    <SwipeListControl gap={0} padding={0}>
-      {slides
-        .map((s) => s.productBlock)
-        .map((_, i) => (
-          <div key={String(i)} className="box-border h-full" role="listitem">
-            <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
-          </div>
-        ))}
-    </SwipeListControl>
-  </BlockWrapper>
-));
+export const ProductGallery = JSX<ProductGalleryProps>(
+  ({ className, padding, slides = [], ...rest }) => (
+    <BlockWrapper
+      className={style('overflow-hidden relative', className)}
+      padding={padding}
+      {...rest}
+    >
+      <SwipeListControl gap={0} padding={0}>
+        {slides
+          .map((s) => s.productBlock)
+          .map((_, i) => (
+            <div key={String(i)} className="box-border h-full" role="listitem">
+              <BaseProductTile className="px-5 h-full" headlineVersion="L" {..._} {...rest} />
+            </div>
+          ))}
+      </SwipeListControl>
+    </BlockWrapper>
+  ),
+);

package/mobile/src/components/ProductTile/ProductTile.example.json

@@ -10,6 +10,7 @@
       }
     },
     "version": "primary",
+    "isTabularBenefits": true,
     "benefits": [
       {
         "type": "default",
@@ -34,7 +35,9 @@
       }
     ],
     "imageOptions": {
-      "directionRight": true
+      "directionRight": true,
+      "imageAlign": "end",
+      "isBackground": true
     }
   }
 }

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -1,73 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
-import { style } from '../../utils/style';
-import { Headline } from '../Headline/Headline';
-import type { Benefit, ProductTileContent } from './ProductTileContent';
-import { renderAdditionalDescription } from './renderAdditionalDescription';
-import { renderBenefit } from './renderBenefit';
-import { renderImage } from './renderImage';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
 export const ProductTile = JSX<ProductTileProps>(
   ({
-    className = '',
-    title,
+    className,
+    padding,
     headlineVersion = 'S',
-    description,
+    isTabularBenefits = true,
     additionalDescription,
-    benefits = [],
-    buttons,
-    image,
-    directionRight = true,
+    imageOptions,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style(
-        'overflow-hidden box-border relative min-h-[364px] flex flex-col justify-between',
-        className,
-      )}
-      {...rest}
-    >
-      <div className={style('flex flex-col', directionRight ? '' : 'items-end')}>
-        <Headline
-          className={style('!p-0 !bg-transparent z-10', title || description ? 'mb-3.5' : '')}
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          as="h2"
-          align="text-left"
-        />
-        {renderBenefits(benefits, image)}
-        {renderAdditionalDescription(additionalDescription, image)}
-      </div>
-      {renderButtonsSection(buttons, {
-        className: style('mt-5 text-l', directionRight ? '' : 'justify-end'),
-      })}
-      {renderImage(image, directionRight)}
+    <BlockWrapper className={className} padding="p-0" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
+        headlineVersion={headlineVersion}
+        isTabularBenefits={isTabularBenefits}
+        imageOptions={{ isBackground: true, ...imageOptions }}
+        {...rest}
+      >
+        {additionalDescription ? (
+          <Paragraph size="text-m" font="font-light" color="group-data-primary:text-secondary-text">
+            {additionalDescription}
+          </Paragraph>
+        ) : null}
+      </BaseProductTile>
     </BlockWrapper>
   ),
 );
-
-function renderBenefits(benefits: Benefit[], image?: Picture) {
-  if (!benefits.length) {
-    return null;
-  }
-
-  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-
-  return (
-    <div
-      className={style(
-        'z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline',
-        benefitsWidth,
-      )}
-    >
-      {benefits.length ? benefits.map(renderBenefit) : null}
-    </div>
-  );
-}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -1,41 +1,10 @@
-import type { DefaultListItemType } from '../../model/DefaultListItemType';
-import type {
-  AdditionalDescriptionProps,
-  DescriptionProps,
-  HeadlineProps,
-  LabelProps,
-} from '../../model/HeadlineType';
+import type { AdditionalDescriptionProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { RichTextItem } from '../../model/RichTextItem';
-import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-
-/**
- * @title Стандартный
- */
-type TextBenefit = DescriptionProps & LabelProps & DefaultListItemType;
-
-/**
- * @title Преимущество
- * @default{
- *  "type": "default"
- * }
- */
-export type Benefit = TextBenefit | RichTextItem;
+import { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Продуктовая плитка
  */
 export type ProductTileContent = UniBlockContent &
-  HeadlineProps &
-  AdditionalDescriptionProps &
-  ButtonContent &
-  ImageContent & {
-    /**
-     * @title Преимущества
-     * @maxItems 7
-     */
-    benefits?: Benefit[];
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
-  };
+  BaseProductTileContent &
+  AdditionalDescriptionProps;

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

@@ -30,9 +30,9 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
     ...rest
   }) => (
     <BlockWrapper className={style('box-border text-left', className)} version={version} {...rest}>
-      <div className="w-full flex justify-between">
-        {title ? <Heading headingType="h4" as="h3" className="mb-6" title={title} /> : null}
+      <div className="w-full sm:flex sm:justify-between sm:flex-row-reverse">
         {renderIconBlock(icon)}
+        {title ? <Heading headingType="h4" as="h3" className="mb-3 sm:mb-6" title={title} /> : null}
       </div>
       <div className="w-full">
         {__html ? renderDescriptionBlock(__html) : null}
@@ -50,7 +50,7 @@ export const RepresentativeOfficeInfo = JSX<RepresentativeOfficeInfoProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="self-end">
+  <div className={'w-10 h-7 sm:w-24 sm:h-16 mb-3 sm:mb-0 sm:mt-3'}>
     {icon?.src ? <Img image={icon} /> : null}
     {icon?.icon ? <Img image={icon} /> : null}
   </div>

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import type { SizeVersion } from '../../model/SizeVersion';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
@@ -8,63 +7,71 @@ import { Img } from '../../ui-kit/Img/Img';
 import { RichText } from '../../ui-kit/RichText/RichText';
 import { assertUnreachable } from '../../utils/assertUnreachable';
 import { checkCanRenderIcon } from './checkCanRenderIcon';
-import type { DefaultStep, Step, StepsBlockContent } from './StepsBlockContent';
+import type { DefaultStep, Step } 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 { StepsBlockContent } from './StepsBlockContent';
+import { UniBlockProps } from '../../model/JSXBlock';
 
-export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+type StepIconVersion = Record<'icon' | 'image', string>;
 
-const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
-  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
-  small: 'h-12 w-12 min-w-12 min-h-12',
+const STEPS_SIZE_MAP: Record<SizeVersion, StepIconVersion> = {
+  normal: { icon: 'h-11 w-11', image: 'h-14 w-14' },
+  small: { icon: 'h-12 w-12', image: 'h-14 w-14' },
 };
 
 const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
-  normal: 'min-h-[70px]',
+  normal: '',
   small: 'min-h-12',
 };
 
 const styleMap = STEPS_BLOCK_STYLE;
 
+export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
+
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
     className = '',
     title,
     description,
-    showLines = true,
     steps,
+    buttons,
     size = 'normal',
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`box-border flex flex-col ${className}`}
-      defaultPadding="px-4 py-6"
+      className={style('box-border flex flex-col gap-2', className)}
+      defaultPadding="p-default"
       version={version}
       {...rest}
     >
-      {title ? <Heading headingType="h3" className="text-center" title={title} /> : null}
+      {title ? <Heading headingType="h3" className="text-left" title={title} /> : null}
       {description ? (
-        <p className={`text-m-light text-center ${styleMap.description} ${title ? 'mt-2' : ''}`}>
-          {description}
-        </p>
+        <Paragraph size="text-xl" font="font-light">
+          <span className={styleMap.description}>{description}</span>
+        </Paragraph>
       ) : null}
       {steps?.length ? (
-        <div className={`box-border py-0.5 mb-0.5 mt-5`}>
-          <div className="flex flex-col justify-between gap-x-[101px]">
-            {steps.map(renderStep(size, version, showLines))}
+        <div className="box-border">
+          <div className="flex flex-col justify-between">
+            {steps.map(renderStep(size, version))}
           </div>
         </div>
       ) : null}
+      {renderButtonsSection(buttons, { className: 'mt-3', isVertical: true })}
     </BlockWrapper>
   ),
 );
 
 // TODO: Create universal function for this case
 const renderStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
+  (size: SizeVersion, version: BlockVersion) =>
   // Linter doesn't understand that switch processes all cases
   // eslint-disable-next-line consistent-return
-  (step: Step, i: number, steps: Step[]) => {
+  (step: Step, i: number) => {
     const { type } = step;
 
     if (!(type === 'default' || type === 'rte')) {
@@ -73,7 +80,7 @@ const renderStep =
 
     switch (type) {
       case 'default':
-        return renderDefaultStep(size, version, showLines)(step, i, steps);
+        return renderDefaultStep(size, version)(step, i);
       case 'rte':
         return <RichText __html={step.__html} />;
       default:
@@ -82,52 +89,46 @@ const renderStep =
   };
 
 const renderDefaultStep =
-  (size: SizeVersion, version: BlockVersion, showLines: boolean) =>
-  (step: DefaultStep, i: number, steps: Step[]) => {
-    const isLastStep = steps.length - 1 === i;
-    const margin = size === 'normal' ? 'ml-[34px]' : 'ml-6';
-
-    return (
-      <div key={String(i)}>
-        <div className="flex flex-row text-center relative">
-          <div className="overflow-hidden flex-shrink-0">
+  (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="overflow-hidden flex flex-shrink-0 items-center">
             {renderIconArea(size, version)(step, i)}
-            {isLastStep ? null : (
-              <div
-                className={`min-h-8 h-full w-0.5 ${
-                  showLines ? styleMap.iconConnector : ''
-                } ${margin}`}
-              />
-            )}
           </div>
           <div
-            className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+            className={style(
+              'flex flex-col justify-center h-fit',
+              STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size],
+            )}
           >
-            {step.label ? (
-              <div className="text-m-title-xs font-medium m-0 text-left mb-1">{step.label}</div>
-            ) : null}
+            {step.label ? <div className="text-l m-0 text-left">{step.label}</div> : null}
             {step.description ? (
-              <div className={`text-s ${styleMap.description} text-left`}>{step.description}</div>
+              <div className={style('text-s font-light text-left', styleMap.description)}>
+                {step.description}
+              </div>
             ) : null}
           </div>
         </div>
       </div>
     );
-  };
 
 const renderIconArea = (size: SizeVersion, version: BlockVersion) => (step: Step, i: number) => {
-  const iconAreaSize = STEPS_SIZE_MAP[size];
-
-  const iconSize = size === 'normal' ? '38' : '27';
-  const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';
-
+  const iconSize = size === 'normal' ? '38' : '24';
   const iconVersion = version === 'secondary' ? 'white' : 'color';
+  const isImg = Boolean(step?.icon?.src);
+  const iconAreaSize = STEPS_SIZE_MAP[size][isImg ? 'image' : 'icon'];
+  const containerStyle = isImg ? '' : `rounded-md ${styleMap.iconBackground}`;
 
   return (
     <div
-      className={`${iconAreaSize} ${styleMap.iconBackground} rounded-full z-10 mr-3 flex justify-center content-center`}
+      className={style(
+        iconAreaSize,
+        containerStyle,
+        'z-10 mr-3 flex justify-center content-center',
+      )}
     >
-      <span className={`font-medium flex self-center ${iconTextSize}`}>
+      <span className="flex self-center text-h4 text-secondary-text group-data-secondary:text-white">
         {checkCanRenderIcon(step?.icon) ? (
           <Img
             image={{ ...step.icon, iconVersion: step.icon?.iconVersion || iconVersion }}

package/mobile/src/components/Tile/Tile.example.json

@@ -1,11 +1,12 @@
 {
   "content": {
     "title": "Плитка",
-    "headingType": "h3",
+    "headlineVersion": "S",
     "__html": "<p>Описание</p>",
     "image": {
       "format": "webp",
       "size": {
+        "format": "webp",
         "width": 445
       }
     },
@@ -19,6 +20,9 @@
       }
     ],
     "version": "primary",
-    "directionRight": true
+    "imageOptions": {
+      "directionRight": true,
+      "imageAlign": "end"
+    }
   }
 }

package/mobile/src/components/Tile/Tile.tsx

@@ -7,14 +7,15 @@ import type { TileContent } from './TileContent';
 export interface TileProps extends TileContent, UniBlockProps {}
 
 export const Tile = JSX<TileProps>(
-  ({ className, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
-    <BlockWrapper className={className} {...rest}>
+  ({ className, padding, headlineVersion = 'S', listItemSize = 'M', ...rest }) => (
+    <BlockWrapper className={className} padding="p-0" {...rest}>
       <BaseProductTile
         className="h-full"
+        defaultPadding="p-m"
+        padding={padding}
         headlineVersion={headlineVersion}
         listItemSize={listItemSize}
         {...rest}
-        imageOptions={{ imageAlign: 'end', ...rest.imageOptions }}
       />
     </BlockWrapper>
   ),

package/mobile/src/icons/BelarusianFlag.svg

@@ -0,0 +1,4 @@
+<svg title="Белорусский флаг" viewBox="0 0 34 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M56.3125 -1.57031H-22.3125V25.5725H56.3125V-1.57031Z" fill="#CE1720"/>
+  <path d="M-13.1406 16.5234H56.3111V25.5713H-13.1406V16.5234Z" fill="#007C30"/>
+</svg>