@redneckz/wildless-cms-uni-blocks 0.2.115 → 0.3.1

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

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Description } from '../../ui-kit/Description/Description';
+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 type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    titleSize,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,21 +25,32 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`${className || ''}`}>
+      <div className={`${className}`}>
         <div>
           <BaseTile
             context={context}
-            title={title}
-            titleSize={titleSize || 'XL'}
-            description={description}
-            items={items}
-            buttons={buttons}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && <Description description={description} />}
             {benefits?.length ? (
               <div className="mt-[19px]">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && (

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,18 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Img } from '../../ui-kit/Img';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Description } from '../../ui-kit/Description/Description';
+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 type { ProductBlockInnerCommonProps } from './ProductBlockContent';
+import type { ProductBlockInnerContent } from './ProductBlockContent';
 import { renderBenefit } from './renderBenefit';
 
-export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
+export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className,
+    className = '',
     context,
     title,
-    titleSize,
+    headingType = 'h2',
     description,
     benefits,
     buttons,
@@ -21,22 +25,34 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch ${className || ''}`}>
+      <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={'flex flex-col'}>
           <BaseTile
             context={context}
-            title={title}
-            titleSize={titleSize || 'XL'}
-            description={description}
-            items={items}
-            buttons={buttons}
-            version={version}
+            title={
+              title && (
+                <Heading
+                  headingType={headingType}
+                  title={title}
+                  className={`whitespace-pre-wrap max-w-[600px]`}
+                />
+              )
+            }
+            buttons={
+              buttons?.length ? (
+                <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+              ) : null
+            }
           >
+            {description && (
+              <Description className="mt-4 max-w-[600px]" description={description} />
+            )}
             {benefits?.length ? (
               <div className="flex gap-6 mt-6 mb-3.5">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
+            {items?.length ? <List items={items} /> : null}
           </BaseTile>
         </div>
         {image?.src && <Img className="mt-auto" image={image} />}

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

@@ -20,11 +20,12 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
-      <h4 className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
+      <div className={`font-medium text-m-base m-0 ${benefitTitleStyleMap[version]}`}>
         {benefit.label}
-      </h4>
+      </div>
       {benefit.description && (
         <div className={`font-normal text-m-sm ${benefitDescStyleMap[version]}`}>
           {benefit.description}

package/src/components/ProductBlock/renderBenefit.tsx

@@ -24,12 +24,13 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           name={benefit.icon}
           width="24"
           height="24"
+          asSVG
         />
       )}
       <div className="flex gap-1 flex-col h-full max-w-[149px]">
-        <h4 className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
+        <div className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
           {benefit.label}
-        </h4>
+        </div>
         {benefit.description && (
           <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
             {benefit.description}

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductGallery } from './ProductGallery';

package/src/components/ProductGallery/ProductGallery.fixture.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { context } from '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
@@ -45,6 +44,7 @@ export default (
           },
           productBlock: {
             title: 'Ставка от 12,5% годовых на срок до 5 лет!',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -68,6 +68,7 @@ export default (
           },
           productBlock: {
             title: 'Ставка от 12,5% годовых на срок до 3 лет!',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -91,6 +92,7 @@ export default (
           },
           productBlock: {
             title: 'Дополнительные бонусные баллы за покупки!',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',
@@ -114,6 +116,7 @@ export default (
           },
           productBlock: {
             title: 'Карты Unionpay',
+            headingType: 'h2',
             items: [
               'Потребительский кредит по специальной процентной ставке',
               'Получите деньги без залога и поручительства',

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

@@ -25,6 +25,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
         <div className="flex px-4 py-6">
           {slides.map((_, i) =>
             renderNavButton({
+              slide: _.productBlock,
               i,
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
@@ -37,7 +38,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
   const isActiveBtn = i === activeSlideIndex;
   const progressBarClassName = isActiveBtn ? 'animate-slide bg-primary-main' : 'bg-main-divider';
   return (
@@ -45,6 +46,7 @@ function renderNavButton({ i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
+      aria-label={slide?.title}
       className={`relative overflow-hidden border-0 bg-inherit cursor-pointer pl-0 mr-1.5 pt-4 pb-5 last:mr-0 grow basis-0`}
     >
       <div

package/src/components/ProductGallery/ProductGallery.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 import type { ProductGalleryContent } from './ProductGalleryContent';
 
@@ -38,7 +38,7 @@ export const ProductGallery = JSX<ProductGalleryProps>(
   },
 );
 
-function renderProductBlock(block: ProductBlockInnerCommonProps, i: number, context) {
+function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
   return (
     <section key={String(i)} className="flex grow-0 shrink-0 basis-full" role="listitem">
       <div className="p-10 flex grow">
@@ -61,6 +61,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       type="button"
       key={String(i)}
       onClick={onClick}
+      aria-label={slide?.title}
       className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-5 grow basis-0`}
     >
       <div className="border-0 border-r border-solid border-main-divider px-6">

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

@@ -1,20 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
-  titleSize?: TitleSize;
-  block?: ProductBlockInnerCommonProps;
+  headingType?: HeadingType;
+  block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, titleSize, context }) => {
+  ({ block, headingType, context }) => {
     return (
       <section className="flex grow-0 shrink-0 basis-full px-4 py-6" role="listitem">
         <div className="flex grow">
-          <ProductBlockInner context={context} titleSize={titleSize} {...block} />
+          <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>
       </section>
     );

package/src/components/ProductGallery/ProductGalleryBlock.tsx

@@ -1,23 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { TitleSize } from '../../ui-kit/Title/TitleProps';
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import { HeadingType } from '../../ui-kit/Heading/HeadingContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
 
 export interface ProductGalleryBlockProps extends UniBlockProps {
-  titleSize?: TitleSize;
-  block?: ProductBlockInnerCommonProps;
+  headingType?: HeadingType;
+  block?: ProductBlockInnerContent;
 }
 
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
-  ({ block, titleSize, context }) => {
+  ({ block, headingType, context }) => {
     return (
       <section className="flex grow-0 shrink-0 basis-full" role="listitem">
         <div className="p-10 flex grow">
           <ProductBlockInner
             className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem]"
             context={context}
-            titleSize={titleSize}
+            headingType={headingType || 'h2'}
             {...block}
           />
         </div>

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -1,4 +1,4 @@
-import type { ProductBlockInnerCommonProps } from '../ProductBlock/ProductBlockContent';
+import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -15,7 +15,7 @@ export interface ProductSlide {
   /** @title Превью содержимого слайда на навигации */
   nav?: ProductGalleryNav;
   /** @title Содержимое слайда */
-  productBlock: ProductBlockInnerCommonProps;
+  productBlock: ProductBlockInnerContent;
 }
 
 /**

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -2,6 +2,7 @@ import { context } from '../../setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { ProductTile } from './ProductTile';
+import { ProductTileContent } from './ProductTileContent';
 
 const cardWithMoney: Picture = {
   src: 'card-with-diamond.png',
@@ -21,6 +22,33 @@ const building: Picture = {
   format: 'webp',
 };
 
+export const PRODUCT_TILE: ProductTileContent = {
+  title: 'Акция! “Кредит На все, что хочется!”',
+  description: 'Потребительский кредит на любые цели, без залога и поручительства',
+  benefits: [
+    {
+      label: 'до 5 млн Р',
+      description: 'Кредитный лимит',
+    },
+    {
+      label: 'от 12,5%',
+      description: 'Процентная ставка',
+    },
+    {
+      label: 'до 5 лет',
+      description: 'Срок кредитования',
+    },
+  ],
+  buttons: [
+    {
+      text: 'Подробнее',
+      href: '/credit-cards',
+      version: 'secondary',
+    },
+  ],
+  image: cardWithMoney,
+};
+
 export default {
   credit: (
     <div className="container grid grid-cols-12">

package/src/components/ProductTile/ProductTile.tsx

@@ -1,27 +1,75 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import { Tile } from '../Tile/Tile';
 import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
-export const ProductTile = JSX<ProductTileProps>((props) => {
-  const { benefits, version } = props;
-  return (
-    <Tile {...props}>
-      <div className="flex mt-5 mb-1">
-        {benefits?.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
-        {benefits?.length ? (
-          <div className="pt-1">
-            {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+const productTileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const ProductTile = JSX<ProductTileProps>(
+  ({
+    context,
+    className = '',
+    title,
+    description,
+    benefits,
+    buttons,
+    image,
+    version = 'primary',
+  }) => {
+    return (
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
+          productTileStyleMap[version]
+        } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
+      >
+        <BaseTile
+          context={context}
+          title={
+            title && (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            )
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+          image={image?.src && <Img className="mt-auto ml-7" image={image} />}
+        >
+          {description && <Description className="mt-4 max-w-[600px]" description={description} />}
+          <div className="flex mt-5 mb-1">
+            {benefits?.length ? (
+              <div className="mr-8">{benefits.map(renderBenefitLabel)}</div>
+            ) : null}
+            {benefits?.length ? (
+              <div className="pt-1">
+                {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+              </div>
+            ) : null}
           </div>
-        ) : null}
-      </div>
-    </Tile>
-  );
-});
+        </BaseTile>
+      </section>
+    );
+  },
+);
 
 function renderBenefitLabel(benefit: Benefit, i: number) {
   return (

package/src/components/ProductTile/ProductTileContent.ts

@@ -1,13 +1,21 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 /**
  * @title Продуктовая плитка
  */
-export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
-  /**
-   * @title Преимущества
-   * @maxItems 7
-   */
-  benefits?: Omit<Benefit, 'icon'>[];
-}
+export type ProductTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent &
+  ImageContent & {
+    version?: BlockVersion;
+    /**
+     * @title Преимущества
+     * @maxItems 7
+     */
+    benefits?: TextBenefit[];
+  };

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,5 +1,4 @@
 import { context } from '../../setup-fixture';
-
 import { PromoTile } from './PromoTile';
 
 export default {

package/src/components/PromoTile/PromoTile.tsx

@@ -1,33 +1,60 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { Tile } from '../Tile/Tile';
+import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { BaseTile } from '../BaseTile/BaseTile';
+import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
+import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
+import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import type { PromoTileContent } from './PromoTileContent';
 
 export interface PromoTileProps extends PromoTileContent, UniBlockProps {}
 
+const promoTileStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
+
 export const PromoTile = JSX<PromoTileProps>(
   ({
-    className,
+    className = '',
     context,
     title = 'Акции и спецпредложения',
     date,
     description,
     buttons = [],
-    version,
+    version = 'primary',
   }) => {
     return (
-      <Tile
-        className={className}
-        context={context}
-        title={title}
-        buttons={buttons}
-        version={version}
+      <section
+        className={`bg-white text-primary-text font-sans p-9 box-border ${className} ${
+          promoTileStyleMap[version]
+        } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       >
-        <div className="mt-1.5">
-          {date && <div className="text-sm mb-2">{formatDate(date)}</div>}
-          <div className="text-base">{description}</div>
-        </div>
-      </Tile>
+        <BaseTile
+          context={context}
+          title={
+            title ? (
+              <Heading
+                headingType={getTileHeadingType(className)}
+                title={title}
+                className={`whitespace-pre-wrap max-w-[600px]`}
+              />
+            ) : null
+          }
+          buttons={
+            buttons?.length ? (
+              <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            ) : null
+          }
+        >
+          <div className="mt-1.5">
+            {date ? <div className="text-sm mb-2">{formatDate(date)}</div> : null}
+            <div className="text-base">{description}</div>
+          </div>
+        </BaseTile>
+      </section>
     );
   },
 );

package/src/components/PromoTile/PromoTileContent.ts

@@ -1,9 +1,15 @@
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionProps';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 
 /**
  * @title Акции
  */
-export interface PromoTileContent extends BaseTileCommonProps {
-  /** @title Дата публикации */
-  date?: string;
-}
+export type PromoTileContent = HeadingContent &
+  DescriptionContent &
+  ButtonContent & {
+    /** @title Дата публикации */
+    date?: string;
+    version?: BlockVersion;
+  };

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { SizeVersion } from '../../model/SizeVersion';
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
 import type { Step, StepsBlockContent } from './StepsBlockContent';
 
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
@@ -15,11 +15,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           className || ''
         }`}
       >
-        {title && (
-          <Title size="M" className="font-medium m-0 text-center">
-            {title}
-          </Title>
-        )}
+        {title && <Heading headingType="h3" className="text-center" title={title} />}
         {description && <p className={`text-m-md text-center ${title && 'mt-2'}`}>{description}</p>}
         {steps?.length ? (
           <div className={`box-border py-0.5 mb-0.5 mt-5`}>
@@ -86,7 +82,7 @@ const renderIconArea = (step: Step, size: SizeVersion, i: number) => {
       className={`${iconAreaSize} bg-secondary-light rounded-full z-10 mr-3 flex justify-center content-center`}
     >
       <span className={`font-medium text-secondary-text self-center ${iconTextSize}`}>
-        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} />) || i + 1}
+        {(step.icon && <Icon name={step.icon} width={iconSize} height={iconSize} asSVG />) || i + 1}
       </span>
     </div>
   );