@redneckz/wildless-cms-uni-blocks 0.11.3 → 0.12.3

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsListItem } from './LinkDocsListItem';
@@ -19,14 +18,13 @@ export const LinkDocs = JSX<LinkDocsProps>(
     align,
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline
         isPadding={false}
         title={title}
         description={description}
         align={align}
         headlineVersion="M"
-        as="h2"
       />
       {documents?.length ? (
         <div className="mt-5 flex flex-col gap-6" role="list">

package/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
     ...rest
   }) => (
-    <BlockWrapper className={style('p-default', className)} {...rest}>
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
       <Headline
         className="!p-0"
         title={title}

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

@@ -1,13 +1,84 @@
 import '../../setup-fixture';
 
-import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { MobileAppTile } from './MobileAppTile';
+
+const image: Picture = {
+  src: 'icon-phone.png',
+  format: 'webp',
+  size: {
+    width: 335,
+    height: 168,
+  },
+};
+
+const listItems = [
+  'Оплачивайте товары и услуги',
+  'Следите за бонусным счетом онлайн',
+  'Покупайте товары и услуги',
+  'Копите бонусные баллы',
+];
+
+const button1: ButtonProps = {
+  text: 'App Store',
+  href: 'apps.apple.com',
+  version: 'primary',
+};
+
+const button2: ButtonProps = {
+  text: 'Google Play',
+  href: 'play.google.com',
+  version: 'secondary',
+};
+const button3: ButtonProps = {
+  text: 'Google Play',
+  href: 'play.google.com',
+  version: 'secondary',
+};
+
+const button4: ButtonProps = {
+  text: 'Google Play',
+  href: 'play.google.com',
+  version: 'secondary',
+};
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <MobileAppTileMobile
+      <MobileAppTile
+        className="col-span-12"
+        description="Загрузить для IOS и Android"
+        image={image}
+        items={listItems}
         title="Мобильное приложение!"
+        buttons={[
+          {
+            ...button1,
+            version: 'secondary',
+          },
+          button2,
+        ]}
+      />
+    </div>
+  ),
+  '4 buttons': (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        className="col-span-12"
         description="Загрузить для IOS и Android"
+        image={image}
+        items={listItems}
+        title="Мобильное приложение!"
+        buttons={[
+          {
+            ...button1,
+            version: 'secondary',
+          },
+          button2,
+          button3,
+          button4,
+        ]}
       />
     </div>
   ),

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,8 +1,8 @@
 import '../../setup-fixture';
 
-import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { MobileAppTile } from './MobileAppTile';
+import type { Picture } from '../../model/Picture';
 
 const image: Picture = {
   src: 'icon-phone.png',
@@ -95,7 +95,7 @@ export default {
   ),
   'without-image-and-list': (
     <div className="container grid grid-cols-12">
-      <MobileAppTile className="col-span-4" qr={qr} buttons={[button1, button2]} />
+      <MobileAppTile className="col-span-8" qr={qr} buttons={[button1, button2]} />
     </div>
   ),
 };

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -1,87 +1,69 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 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 { List } from '../../ui-kit/List/List';
-import { BaseTile } from '../BaseTile/BaseTile';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { style } from '../../utils/style';
 import type { MobileAppTileContent } from './MobileAppTileContent';
+import { renderDescription } from './renderDescription';
+import { renderList } from './renderList';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
   ({
-    className = '',
-    title = 'Мобильное приложение',
-    qr,
-    buttons,
-    version = 'primary',
-    items,
-    image,
-    headingType = 'h4',
+    className,
+    padding,
     alignTitle = 'left',
+    buttons = [],
     description,
+    headingType = 'h4',
+    image,
+    items,
+    qr,
+    title = 'Мобильное приложение',
+    version = 'primary',
     ...rest
   }) => {
     const containerStyle = version === 'secondary' ? 'p-3.5 min-w-[120px]' : 'min-w-[92px]';
 
     return (
       <BlockWrapper
-        className={`flex justify-between p-default box-border relative min-h-80 ${getTileMinHeight(
-          className,
-        )} ${className}`}
+        className={style('min-h-80', className)}
+        defaultPadding="p-0"
         version={version}
         {...rest}
       >
         <BaseTile
-          className="z-10"
+          className="h-full"
+          padding={padding}
+          defaultPadding="p-default"
           title={
             title ? (
               <Heading
                 headingType={headingType}
-                as="h3"
                 title={title}
-                className={`whitespace-pre-wrap mb-7 w-full ${AlignText[alignTitle]}`}
+                className={style('whitespace-pre-wrap', AlignText[alignTitle])}
               />
             ) : null
           }
-          buttons={renderButtonsSection(buttons, {
-            className: 'mt-8',
-            buttonClassName: 'min-w-[168px]',
-          })}
+          backImage={image?.src ? <Img image={image} /> : null}
+          buttons={renderButtonsSection(buttons, { isVertical: buttons.length > 3 })}
         >
           {renderDescription(description)}
-          <div className="flex flex-1 items-center mb-3">
+          <div className="flex flex-1 gap-s items-center">
             {qr?.src ? (
-              <div className={`flex justify-center mr-5 bg-white rounded-md ${containerStyle}`}>
+              <div className={style('flex justify-center bg-white rounded-md', containerStyle)}>
                 <Img className="w-fit" image={qr} />
               </div>
             ) : null}
             {renderList(items)}
           </div>
         </BaseTile>
-        {image?.src ? (
-          <div className="absolute right-0 bottom-0">
-            <Img image={image} />
-          </div>
-        ) : null}
       </BlockWrapper>
     );
   },
 );
-
-const renderList = (items?: string[]) => {
-  return items?.length ? (
-    <List items={items} listItemSize="S" />
-  ) : (
-    <span className="text-m-light text-secondary-text">
-      Наведите камеру телефона на QR-код и скачайте приложение
-    </span>
-  );
-};
-
-const renderDescription = (description?: string) =>
-  description ? <p className="text-xl-light mb-5 pt-0.5">{description}</p> : null;

package/src/components/MobileAppTile/renderDescription.tsx

@@ -0,0 +1,10 @@
+import { Text } from '../../ui-kit/Text/Text';
+
+export const renderDescription = (description?: string) =>
+  description ? (
+    <div className="mb-5 pt-0.5 sm:mb-0 sm:pt-0">
+      <Text size="text-xl" font-weight="light">
+        {description}
+      </Text>
+    </div>
+  ) : null;

package/src/components/MobileAppTile/renderList.tsx

@@ -0,0 +1,11 @@
+import { List } from '../../ui-kit/List/List';
+
+export const renderList = (items?: string[]) => {
+  return items?.length ? (
+    <List items={items} className="text-l-light mb-2 last:mb-0" />
+  ) : (
+    <span className="text-m-light text-secondary-text">
+      Наведите камеру телефона на QR-код и скачайте приложение
+    </span>
+  );
+};

package/src/components/MortgageFiltration/MortgageFiltration.example.json

@@ -50,7 +50,7 @@
       "version": "secondary"
     },
     "notFound": {
-      "title": "Нет подходящей ипотечной программы",
+      "title": "Нет подходящей программы",
       "description": "Попробуйте очистить фильтры"
     }
   }

package/src/components/MortgageFiltration/MortgageFiltration.fixture.tsx

@@ -108,7 +108,7 @@ export default {
         topItemsCount={2}
         resetButton={{ text: 'Очистить фильтры', version: 'secondary' }}
         notFound={{
-          title: 'Нет подходящей ипотечной программы',
+          title: 'Нет подходящей программы',
           description: 'Попробуйте очистить фильтры',
         }}
         block={{

package/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -16,7 +16,12 @@ export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<Mortgag
     const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
 
     return (
-      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+      <BlockWrapper
+        className={style(className)}
+        defaultPadding="p-0"
+        version="transparent"
+        {...rest}
+      >
         {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
         <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
       </BlockWrapper>

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { style } from '../../utils/style';
 import type {
   OfficeServicesBlockContent,
   OfficeServicesBlockList,
@@ -12,7 +13,7 @@ export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, Un
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
   ({ className = '', title, servicesList, ...rest }) => (
-    <BlockWrapper className={`p-8 flex flex-col ${className}`} {...rest}>
+    <BlockWrapper className={style('flex flex-col', className)} {...rest}>
       {title ? <Heading headingType="h5" className="mb-5" title={title} /> : null}
       {servicesList?.length ? (
         <ul className="list-none m-0 p-0">{servicesList.map(renderListItems)}</ul>

package/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -8,7 +8,7 @@ interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
 
 export const ParagraphBlock = JSX<ParagraphBlockProps>(
   ({ text, size, align, font, children, ...rest }) => (
-    <BlockWrapper {...rest}>
+    <BlockWrapper defaultPadding="p-0" {...rest}>
       <Paragraph size={size} align={align} font={font}>
         {text || children}
       </Paragraph>

package/src/components/PictureText/PictureText.tsx

@@ -1,46 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import { BaseProductTile } from '../../ui-kit/BaseProductTile/BaseProductTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
-import { Headline } from '../Headline/Headline';
 import type { PictureTextContent } from './PictureTextContent';
-import { renderBenefit } from './renderBenefit';
-import { style } from '../../utils/style';
-import { positionStyle } from './positionStyle';
 import { renderInsuranceSumMonth } from './renderInsuranceSumMonth';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
 export const PictureText = JSX<PictureTextProps>(
-  ({
-    className = '',
-    title,
-    description,
-    image,
-    benefits,
-    sum,
-    monthLimit,
-    directionRight = false,
-    version = 'primary',
-    ...rest
-  }) => (
-    <BlockWrapper className={style('relative p-default', className)} version={version} {...rest}>
-      <Headline
-        className="!p-0"
-        title={title}
-        description={description}
-        headlineVersion="M" // TODO: Сверить с макетом после влития мобильных правок Headline (DRAFT)
-        align="text-left"
-      />
-      <div className={style('flex mt-6', positionStyle)}>
-        {image?.src ? <Img className={directionRight ? 'order-2' : ''} image={image} /> : null}
-        <div>
-          {benefits?.length ? (
-            <div className="flex flex-col gap-4">{benefits.map(renderBenefit(version))}</div>
-          ) : null}
-          {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
-        </div>
-      </div>
+  ({ className, headlineVersion = 'M', align = 'text-center', sum, monthLimit, ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      <BaseProductTile
+        className="h-full"
+        headlineVersion={headlineVersion}
+        align={align}
+        isInsetTitle={false}
+        {...rest}
+        imageOptions={{ directionRight: false, imageAlign: 'center', ...rest.imageOptions }}
+      >
+        {renderInsuranceSumMonth(Number(sum), Number(monthLimit))}
+      </BaseProductTile>
     </BlockWrapper>
   ),
 );

package/src/components/PictureText/PictureTextContent.ts

@@ -1,17 +1,11 @@
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { BenefitsProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import { BaseProductTileContent } from '../../ui-kit/BaseProductTile/BaseProductTileContent';
 
 /**
  * @title Картинка с текстом
  */
 export type PictureTextContent = UniBlockContent &
-  BenefitsProps &
-  HeadlineCommonProps &
-  ImageContent & {
-    /** @title Картинка справа/текст слева */
-    directionRight?: boolean;
+  BaseProductTileContent & {
     /** @title Ежемесячный лимит */
     monthLimit?: number;
     /** @title Страховая сумма */

package/src/components/PictureText/renderInsuranceSumMonth.tsx

@@ -1,28 +1,21 @@
 import { Text } from '../../ui-kit/Text/Text';
-import { style } from '../../utils/style';
-import { styleInsuranceSum } from './styleInsuranceSum';
 import { toLocalNumberFormat } from '../../utils/toLocalNumberFormat';
-import { styleValueBlock, styleValueBlockText } from './styleValueBlock';
 
-export const renderInsuranceSumMonth = (sum = 0, monthLimit = 0) =>
+export const renderInsuranceSumMonth = (sum?: number, monthLimit?: number) =>
   sum || monthLimit ? (
-    <div className={style('flex mt-6', styleInsuranceSum)}>
-      {sum > 0 ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {monthLimit > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum)) : null}
+    <div className="flex flex-wrap xl:flex-nowrap xl:bg-main-divider xl:rounded-md p-xs gap-m">
+      {Number(sum) > 0 ? renderValueBlock('Страховая сумма:', sum) : null}
+      {Number(monthLimit) > 0 ? renderValueBlock('Ежемесячный лимит:', monthLimit) : null}
     </div>
   ) : null;
 
-const renderValueBlock = (title: string, sum = 0, isAnotherBlock = false) => {
-  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
-
-  return (
-    <div className={style(`flex w-full whitespace-pre`, styleValueBlock, widthStyle)}>
-      <Text font="font-light" size="text-l">
-        {title}
-      </Text>
-      <Text size="text-h6" color={styleValueBlockText}>
-        {toLocalNumberFormat(2)(sum)} ₽
-      </Text>
-    </div>
-  );
-};
+const renderValueBlock = (title: string, value = 0) => (
+  <div className="basis-full flex flex-col-reverse sm:flex-row sm:justify-between items-baseline whitespace-pre">
+    <Text font="font-light" size="text-l">
+      {title}
+    </Text>
+    <Text size="text-h6" color="text-primary-text">
+      {toLocalNumberFormat(2)(value)} ₽
+    </Text>
+  </div>
+);

package/src/components/Placeholder/Placeholder.tsx

@@ -2,9 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { style } from '../../utils/style';
-import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
-import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
-import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
 import type { PlaceholderContent } from './PlaceholderContent';
 
@@ -13,27 +10,19 @@ export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {}
 const GOLDEN_RATIO = 1.618;
 
 export const Placeholder = JSX<PlaceholderProps>(
-  ({ className, title, description = 'Блок в разработке...', ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style(
-          'p-9 box-border',
-          className,
-          getTileRightPadding(className),
-          getTileMinHeight(className),
-        )}
-        {...rest}
-      >
-        <Headline
-          className="!p-0 max-w-[600px]"
-          title={title}
-          description={description}
-          headlineVersion={getTileHeadingType(className)}
-        />
-        <figure className="m-0 min-w-[80%]">{renderShimmer()}</figure>
-      </BlockWrapper>
-    );
-  },
+  ({ className, title, description = 'Блок в разработке...', ...rest }) => (
+    <BlockWrapper className={style('box-border', className)} {...rest}>
+      <Headline
+        className="max-w-[600px]"
+        title={title}
+        description={description}
+        headlineVersion="L"
+        align="text-left"
+        isPadding={false}
+      />
+      <figure className="m-0 mt-m min-w-[80%]">{renderShimmer()}</figure>
+    </BlockWrapper>
+  ),
 );
 
 const renderShimmer = (size = 3) =>

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

@@ -1,7 +1,7 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
 
@@ -26,18 +26,21 @@ const image: Picture = {
   ],
 };
 
-const benefits: BenefitItemProps[] = [
+const benefits: ComplexBenefitContent[] = [
   {
+    type: 'default',
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
     icon: { icon: 'EmptyWalletIcon' },
   },
   {
+    type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
     icon: { icon: 'PercentageSquareIcon' },
   },
   {
+    type: 'default',
     label: 'До 5 лет',
     description: 'Срок кредитования',
     icon: { icon: 'CalendarIcon' },

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -1,7 +1,7 @@
 import '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
+import type { ComplexBenefitContent } from '../../ui-kit/BenefitItem/BenefitItemContent';
 import type { BackwardButtonProps, ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductBlock } from './ProductBlock';
 import type { ProductBlockContent } from './ProductBlockContent';
@@ -16,18 +16,21 @@ const image: Picture = {
   },
 };
 
-const benefits: BenefitItemProps[] = [
+const benefits: ComplexBenefitContent[] = [
   {
+    type: 'default',
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
     icon: { icon: 'CalendarTickIcon' },
   },
   {
+    type: 'default',
     label: 'От 16,9%',
     description: 'Ставка по кредиту',
     icon: { icon: 'PercentageSquareIcon' },
   },
   {
+    type: 'default',
     label: 'До 5 лет',
     description: 'Срок кредитования',
     icon: { icon: 'CalendarIcon' },
@@ -110,7 +113,7 @@ export default {
       <ProductBlock
         className="col-span-12"
         {...PRODUCT_BLOCK_WITH_BACK_BUTTON}
-        directionRight={false}
+        imageOptions={{ directionRight: false }}
       />
     </div>
   ),

package/src/components/ProductBlock/ProductBlock.tsx

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