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

package/mobile/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -1,9 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-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 {
   BenefitBlockItemProps,
   BenefitsBlockContent,
@@ -11,47 +5,56 @@ import type {
   ListBenefitDef,
   TextBenefitDef,
 } from './BenefitsBlockContent';
+import { benefitImageStyles } from './benefitImageStyles';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
 export const BenefitsBlock = JSX<BenefitsBlockProps>(
   ({ className = '', title, benefitList, ...rest }) => (
-    <BlockWrapper
-      className={style('flex flex-col items-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      {title ? (
-        <Heading headingType="h3" as="h2" className="max-w-[47rem] text-center" title={title} />
-      ) : null}
+    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+      {title ? <Heading headingType="h3" as="h2" className="text-center" title={title} /> : null}
       {benefitList?.length ? (
-        <div className="flex flex-wrap w-full justify-center gap-x-20 mt-8">
-          {benefitList.map(renderStep)}
+        <div
+          className="sm:flex sm:flex-wrap w-full sm:justify-center sm:gap-x-m gap-y-lg sm:gap-y-0 mt-8"
+          role="list"
+        >
+          {benefitList.map(renderBenefit)}
         </div>
       ) : null}
     </BlockWrapper>
   ),
 );
 
-const renderStep = (benefit: BenefitBlockItemProps, i: number) => {
-  const description = benefit.description;
-
-  return (
-    <div key={String(i)} className="flex items-center basis-1/2 max-w-[500px] mb-14">
-      {benefit?.icon?.icon ? (
-        <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-icon bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black"
-          image={benefit.icon}
-        />
-      ) : null}
-      {benefit?.icon?.src ? <Img image={benefit.icon} /> : null}
-      <div className="ml-5 h-full">
-        {benefit?.label ? <Heading headingType="h6">{benefit.label}</Heading> : null}
-        {renderDescription(description)}
+const renderBenefit = (benefit: BenefitBlockItemProps, i: number) => (
+  <div
+    key={String(i)}
+    className="flex items-center sm:basis-1/2 sm:max-w-[400px] mb-14"
+    role="listitem"
+  >
+    {benefit?.icon?.icon ? (
+      <Img
+        className={style(
+          'p-3 mr-5 shrink-0 bg-main-divider text-primary-main group-data-secondary:bg-white/30 group-data-secondary:text-black',
+          benefitImageStyles,
+        )}
+        image={benefit.icon}
+      />
+    ) : null}
+    {benefit?.icon?.src ? <Img className="mr-5 shrink-0" image={benefit.icon} /> : null}
+    {benefit?.label ? (
+      <div className="sm:h-full">
+        <Heading headingType="h6">{benefit.label}</Heading>
+        {renderDescription(benefit.description)}
       </div>
-    </div>
-  );
-};
+    ) : null}
+  </div>
+);
 
 const renderDescription = (description: DescriptionDef | undefined) => {
   const benefitType = description?.benefitType || null;

package/mobile/src/components/BenefitsBlock/benefitImageStyles.tsx

@@ -0,0 +1 @@
+export const benefitImageStyles = 'w-56 h-56 min-w-56';

package/mobile/src/components/Blocks.ts

@@ -1,4 +1,5 @@
 import type { BlocksRegistry } from '../model/BlocksRegistry';
+import { BonusBenefitsBlock } from './BonusBenefitsBlock/BonusBenefitsBlock';
 import { ButtonsBlock } from './ButtonsBlock/ButtonsBlock';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
@@ -19,12 +20,15 @@ import { ProductGallery } from './ProductGallery/ProductGallery';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { Tabs } from './Tabs/Tabs';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { VerticalLayout } from './VerticalLayout/VerticalLayout';
+import { BenefitsBlock } from './BenefitsBlock/BenefitsBlock';
 
 export const Blocks: BlocksRegistry = {
   ButtonsBlock,
+  BonusBenefitsBlock,
   CardTransfer,
   Carousel,
   CarouselTariffsCard,
@@ -39,6 +43,7 @@ export const Blocks: BlocksRegistry = {
   Placeholder,
   ProductBlock,
   StepsBlock,
+  Tabs,
   TariffsTable,
   TextBlock,
   RichTextBlock,
@@ -47,4 +52,5 @@ export const Blocks: BlocksRegistry = {
   CarouselRecommendationCard,
   CarouselProgramsCard,
   ProductGallery,
+  BenefitsBlock,
 };

package/mobile/src/components/BonusBenefitsBlock/BonusBenefitsBlock.tsx

@@ -1,15 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
 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 {
-  BonusBenefit,
-  BonusBenefitsBlockContent,
-  ColumnsCount,
-} from './BonusBenefitsBlockContent';
+import type { BonusBenefitsBlockContent } from './BonusBenefitsBlockContent';
+import { renderBonusBenefits } from './renderBonusBenefits';
 
 export interface BenefitsBlockProps extends BonusBenefitsBlockContent, UniBlockProps {}
 
@@ -23,48 +18,17 @@ export const BonusBenefitsBlock = JSX<BenefitsBlockProps>(
     title,
     ...rest
   }) => (
-    <BlockWrapper
-      className={style('flex flex-col text-center', className)}
-      defaultPadding="p-default"
-      {...rest}
-    >
-      <Headline className="!p-0 mb-8" title={title} description={subtitle} headlineVersion="M" />
-      {bonusBenefits?.length ? (
-        <div
-          className={`grid gap-1 ${AlignText[cardTextAlign]} ${getElementsColsValue(columnsCount)}`}
-        >
-          {bonusBenefits.map(renderBonusBenefit)}
-        </div>
-      ) : null}
+    <BlockWrapper className={style('p-default', className)} defaultPadding="p-default" {...rest}>
+      <Headline
+        className="mb-4 sm:mb-8"
+        isPadding={false}
+        title={title}
+        description={subtitle}
+        headlineVersion="M"
+      />
+      {bonusBenefits?.length
+        ? renderBonusBenefits(bonusBenefits, columnsCount, cardTextAlign)
+        : null}
     </BlockWrapper>
   ),
 );
-
-const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => {
-  return (
-    <div
-      key={String(i)}
-      className={style(
-        'flex flex-col items-center text-h6',
-        !description && !title ? 'justify-center' : '',
-      )}
-    >
-      {title ? <span>{title}</span> : null}
-      {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
-      {description ? <span>{description}</span> : null}
-    </div>
-  );
-};
-
-const getElementsColsValue = (colValue: ColumnsCount) => {
-  switch (colValue) {
-    case '3':
-      return 'grid-cols-3';
-    case '4':
-      return 'grid-cols-4';
-    case '5':
-      return 'grid-cols-5';
-    default:
-      return 'grid-cols-5';
-  }
-};

package/mobile/src/components/BonusBenefitsBlock/bonusBenefitAlign.ts

@@ -0,0 +1 @@
+export const bonusBenefitAlign = 'text-left';

package/mobile/src/components/BonusBenefitsBlock/bonusBenefitStyles.ts

@@ -0,0 +1 @@
+export const bonusBenefitStyles = 'justify-between p-4 h-full border border-gray';

package/mobile/src/components/BonusBenefitsBlock/renderBonusBenefit.tsx

@@ -0,0 +1,29 @@
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import { style } from '../../utils/style';
+import { bonusBenefitAlign } from './bonusBenefitAlign';
+import { BonusBenefit } from './BonusBenefitsBlockContent';
+import { bonusBenefitStyles } from './bonusBenefitStyles';
+
+export const renderBonusBenefit = ({ icon, title, description }: BonusBenefit, i: number) => (
+  <div
+    key={String(i)}
+    className={style(
+      'flex flex-col',
+      bonusBenefitStyles,
+      !description && !title ? 'justify-center' : '',
+    )}
+  >
+    {title ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {title}
+      </Text>
+    ) : null}
+    {icon ? <Img image={icon} height="180" className="w-auto" /> : null}
+    {description ? (
+      <Text size="text-h6" font="font-normal" align={bonusBenefitAlign}>
+        {description}
+      </Text>
+    ) : null}
+  </div>
+);

package/mobile/src/components/BonusBenefitsBlock/renderBonusBenefits.tsx

@@ -0,0 +1,14 @@
+import { AlignType } from '../../model/AlignType';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { BonusBenefit, ColumnsCount } from './BonusBenefitsBlockContent';
+import { renderBonusBenefit } from './renderBonusBenefit';
+
+export const renderBonusBenefits = (
+  bonusBenefits: BonusBenefit[],
+  columnsCount: ColumnsCount,
+  cardTextAlign: AlignType,
+) => (
+  <SwipeListControl>
+    {bonusBenefits.map((_, i) => renderBonusBenefit({ ..._ }, i))}
+  </SwipeListControl>
+);

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -21,7 +21,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
       className={style(
-        'border box-border border-gray min-w-[392px] h-full flex flex-col justify-left',
+        'border box-border border-gray p-default sm:p-7 h-full flex flex-col justify-left',
         className,
       )}
       {...rest}
@@ -41,7 +41,7 @@ export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
         <div className="flex mb-4 text-secondary-text">
           <div className="mr-1.5">
             <Text size="text-s" align="text-left" font="font-light">
-              Доступные цвета:
+              Цвета:
             </Text>
           </div>
           {colors.map(renderColorOption)}
@@ -61,6 +61,6 @@ const renderColorOption = (color: ProductColorVersion, i: number) => (
   <div
     role="figure"
     key={String(i)}
-    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+    className={`w-6 h-6 ml-1 sm:ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
   />
 );

package/mobile/src/components/CarouselCatalogCard/CatalogCard.ts

@@ -0,0 +1,22 @@
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+const colors: ProductColorVersion[] = ['black', 'white'];
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
+};
+
+export const CATALOG_CARD = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};

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

@@ -3,17 +3,7 @@
     "format": "webp",
     "size": {
       "width": 290
-    },
-    "sources": [
-      {
-        "media": 1279,
-        "size": {
-          "width": 174
-        },
-        "format": "webp",
-        "alignment": "southeast"
-      }
-    ]
+    }
   },
   "title": "Заголовок",
   "description": "Описание",

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/CarouselProductCard/CarouselProductCard.example.json

@@ -5,17 +5,7 @@
       "size": {
         "width": 140,
         "height": 140
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 84
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -5,8 +5,11 @@ import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
@@ -15,18 +18,17 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
     return (
       <BlockWrapper
         className={style('border border-gray', className)}
-        defaultPadding="p-0"
+        defaultPadding="p-lg sm:p-0"
         {...rest}
       >
-        <LinkWrapper className="flex" href={href} target={target}>
-          <div className="w-[200px] min-w-[200px] self-center">
-            {icon?.icon ? <Img image={icon} /> : null}
-            {icon?.src ? <Img image={icon} /> : null}
+        <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
+          <div className="min-w-[200px] flex justify-center">
+            {icon?.src || icon?.icon ? <Img image={icon} /> : null}
           </div>
-          <div className="p-8 pl-3 w-full">
-            {title ? <Heading className="mb-3.5" headingType="h5" title={title} /> : null}
+          <div className="sm:px-3 py-xl">
+            {title ? <Heading className="mb-2 sm:mb-3.5" headingType="h6" title={title} /> : null}
             {list.length ? (
-              <div className="flex flex-col gap-3">{list?.map(renderList)}</div>
+              <div className="flex flex-col gap-2 sm:gap-3">{list?.map(renderList)}</div>
             ) : null}
           </div>
         </LinkWrapper>
@@ -36,8 +38,16 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (
-  <div key={String(i)} className="break-words">
-    {_.title ? <div className="text-h6">{_.title}</div> : null}
-    {_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
+  <div key={String(i)} className="flex flex-row-reverse justify-between gap-y-1 sm:flex-col">
+    {_.title ? (
+      <Text size="text-l" font={cardTitleFont}>
+        {_.title}
+      </Text>
+    ) : null}
+    {_.description ? (
+      <Paragraph size="text-l" font="font-light" color={cardDescriptionColor}>
+        {_.description}
+      </Paragraph>
+    ) : null}
   </div>
 );

package/mobile/src/components/CarouselProgramsCard/programCardStyles.ts

@@ -0,0 +1,2 @@
+export const cardTitleFont = 'font-light';
+export const cardDescriptionColor = '';

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

@@ -5,18 +5,7 @@
       "size": {
         "width": 290,
         "height": 290
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 174,
-            "height": 174
-          },
-          "format": "webp",
-          "alignment": "southeast"
-        }
-      ]
+      }
     },
     "title": "Заголовок 1",
     "description": "Описание 1",

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

@@ -9,17 +9,7 @@
         "format": "webp",
         "size": {
           "width": 460
-        },
-        "sources": [
-          {
-            "media": 1279,
-            "size": {
-              "width": 276
-            },
-            "format": "webp",
-            "alignment": "center"
-          }
-        ]
+        }
       }
     },
     "button": {

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

@@ -6,17 +6,7 @@
       "size": {
         "width": 529,
         "height": 345
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 360
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "alignTitle": "left",
     "qr": 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,25 +2,16 @@
   "content": {
     "title": "Блок с картинкой",
     "description": "Описание",
+    "headlineVersion": "M",
+    "align": "text-center",
     "image": {
       "format": "webp",
       "size": {
         "width": 400,
         "height": 300
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 240
-          },
-          "format": "webp",
-          "alignment": "center"
-        }
-      ]
+      }
     },
     "version": "primary",
-    "directionRight": false,
     "benefits": [
       {
         "type": "default",
@@ -40,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

@@ -12,17 +12,7 @@
       "size": {
         "width": 234,
         "height": 234
-      },
-      "sources": [
-        {
-          "media": 1279,
-          "size": {
-            "width": 164
-          },
-          "format": "webp",
-          "alignment": "northeast"
-        }
-      ]
+      }
     },
     "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
     "isDotted": true,
@@ -34,7 +24,6 @@
     ],
     "version": "primary",
     "benefitsVersion": "normal",
-    "benefitsCountOfRow": 3,
     "benefits": [
       {
         "label": "Преимущество №1",
@@ -49,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>
+  ),
+);