@redneckz/wildless-cms-uni-blocks 0.3.71 → 0.3.73

package/src/components/Headline/Headline.tsx

@@ -15,21 +15,24 @@ export const Headline = JSX<HeadlineProps>(
     title,
     description,
     anchor = null,
+    headingType = 'h2',
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+
     return (
-      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`} id={anchor}>
+      <section
+        className={`p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`}
+        id={anchor}
+      >
         {title ? (
           <Heading
-            headingType="h2"
+            headingType={headingType}
             className={`text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         ) : null}
         {description ? (
-          <p className={`font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>
-            {description}
-          </p>
+          <p className={`text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>{description}</p>
         ) : null}
       </section>
     );

package/src/components/Headline/HeadlineContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingContent, HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../../model/AlignType';
 
@@ -12,4 +12,5 @@ export type HeadlineContent = HeadingContent &
   ImageContent & {
     align?: AlignType;
     bgColorHeadline?: BlockVersionWithTransparent;
+    headingType?: HeadingType;
   };

package/src/components/Insurance/Insurance.fixture.tsx

@@ -1,9 +1,9 @@
 import { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { InsuranceBenefit } from './InsuranceContent';
 import { Insurance } from './Insurance';
 
-const benefits: Benefit[] = [
+const benefits: InsuranceBenefit[] = [
   {
     label: 'Телесное повреждение',
     description: 'Описание',

package/src/components/Insurance/Insurance.tsx

@@ -3,8 +3,7 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { InsuranceContent } from './InsuranceContent';
+import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
 
 export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 
@@ -36,7 +35,7 @@ export const Insurance = JSX<InsuranceProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number) {
+function renderBenefit(benefit: InsuranceBenefit, i: number) {
   return (
     <div key={String(i)} className="flex items-center gap-5">
       {benefit?.icon ? (

package/src/components/Insurance/InsuranceContent.ts

@@ -1,12 +1,26 @@
 import type { Picture } from '../../model/Picture';
-import type { BenefitsBlockContent } from '../BenefitsBlock/BenefitsBlockContent';
 import type { InsuranceProps } from '../../model/Insurance';
 
-export type InsuranceContent = BenefitsBlockContent &
-  InsuranceProps & {
-    /** @title Заголовок */
-    title?: string;
-    /** @title Описание */
-    description?: string;
-    image?: Picture;
-  };
+/**
+ * @title Преимущество
+ */
+export interface InsuranceBenefit {
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+  icon?: Picture;
+}
+
+export type InsuranceContent = InsuranceProps & {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  image?: Picture;
+  /**
+   * @title Список преимуществ
+   * @maxItems 6
+   */
+  benefits?: InsuranceBenefit[];
+};

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,6 +1,6 @@
 {
   "title": "Список документов",
-  "subtitle": "Описание",
+  "description": "Описание",
   "icon": {
     "icon": "DocIcon"
   },

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

@@ -5,12 +5,7 @@ import { linkDocsContentExample } from './linkDocsContentExample';
 export default {
   'vertical (default)': (
     <div className="container grid grid-cols-12">
-      <LinkDocs
-        className="col-span-12"
-        context={mobileContext}
-        subtitle="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-        {...linkDocsContentExample}
-      />
+      <LinkDocs className="col-span-12" context={mobileContext} {...linkDocsContentExample} />
     </div>
   ),
   'vertical, no border': (

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

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
 import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { Headline } from '../Headline/Headline';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -12,7 +12,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     context,
     title,
-    subtitle,
+    description,
     icon = { icon: 'DocIconMonoColor' },
     documents,
     orientation = 'vertical',
@@ -22,16 +22,14 @@ export const LinkDocs = JSX<LinkDocsProps>(
       <section
         className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
       >
-        {title ? (
-          <Heading
-            headingType="h2"
-            className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`}
-            title={title}
-          />
-        ) : null}
-        {subtitle ? (
-          <h3 className="mt-0 font-normal mb-5 text-center text-m-md">{subtitle}</h3>
-        ) : null}
+        <Headline
+          className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+          title={title}
+          description={description}
+          context={context}
+          align="center"
+          headingType="h3"
+        />
         {orientation === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,21 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import type { AlignType } from '../../model/AlignType';
+import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
 
-const titleAlignStyleMap: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
-const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'mb-8',
-  single: 'mb-[26px]',
-};
-
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
   single: 'flex gap-3.5 flex-col',
@@ -25,10 +13,11 @@ export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
   ({
+    context,
     className = '',
     title,
-    subtitle,
-    align,
+    description,
+    align = 'center',
     documents,
     icon = { icon: 'DocIcon' },
     columnsMode = 'double',
@@ -36,26 +25,16 @@ export const LinkDocs = JSX<LinkDocsProps>(
   }) => {
     return (
       <section className={`font-sans text-primary-text p-[50px] bg-white ${className}`} id={anchor}>
-        {title ? (
-          <Heading
-            headingType="h2"
-            className={`${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${
-              titleAlignStyleMap[align ?? 'center']
-            }`}
-            title={title}
-          />
-        ) : null}
-        {subtitle ? (
-          <h3
-            className={`text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${
-              titleAlignStyleMap[align ?? 'center']
-            }`}
-          >
-            {subtitle}
-          </h3>
-        ) : null}
+        <Headline
+          className="!p-0"
+          title={title}
+          description={description}
+          context={context}
+          align={align}
+          headingType="h3"
+        />
         <LinkDocsList
-          className={linkColumnsModeStyleMap[columnsMode]}
+          className={`mt-8 ${linkColumnsModeStyleMap[columnsMode]}`}
           columnsMode={columnsMode}
           documents={documents}
           icon={icon}

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -27,7 +27,7 @@ export interface LinkDocsContent {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
-  subtitle?: string;
+  description?: string;
   /** @title Название иконки */
   icon?: Picture;
   /** @title Список */

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -11,7 +11,7 @@ export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
 export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
   ({ context, hasBorder = true, documents, icon }) => {
     return (
-      <SwipeListControl context={context} className="text-m-sm text-primary-main">
+      <SwipeListControl context={context} className="text-m-sm text-primary-main mt-5">
         {documents?.length
           ? documents.map((doc, i) => (
               <LinkDocsListItem

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -13,7 +13,9 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
   ({ hasBorder = true, documents, icon }) => {
     return (
       <div
-        className={`text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`}
+        className={`text-m-sm text-primary-main flex flex-col mt-5 ${
+          hasBorder ? 'gap-3.5' : 'gap-2'
+        }`}
         role="list"
       >
         {documents?.length

package/src/components/LinkDocs/linkDocsContentExample.ts

@@ -2,7 +2,7 @@ import type { LinkDocsContent } from './LinkDocsContent';
 
 export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
-  subtitle: 'Ответы на часто задаваемые вопросы',
+  description: 'Ответы на часто задаваемые вопросы',
   documents: [
     { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },

package/src/components/PictureText/PictureText.tsx

@@ -1,11 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import type { PictureTextContent } from './PictureTextContent';
+import type { PictureTextContent, PictureTextBenefit } from './PictureTextContent';
 
 import { BlockVersion } from '../../model/BlockVersion';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
 
@@ -43,7 +42,7 @@ export const PictureText = JSX<PictureTextProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number, version: string) {
+function renderBenefit(benefit: PictureTextBenefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex flex-row mb-8">
       {benefit.icon ? (
@@ -56,7 +55,7 @@ function renderBenefit(benefit: Benefit, i: number, version: string) {
         />
       ) : null}
       <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
-        {benefit.label && (
+        {benefit?.label ? (
           <div
             className={`font-medium text-xl m-0 ${
               version === 'primary' ? 'text-primary-text' : ''
@@ -64,14 +63,14 @@ function renderBenefit(benefit: Benefit, i: number, version: string) {
           >
             {benefit.label}
           </div>
-        )}
-        {benefit.description && (
+        ) : null}
+        {benefit?.description ? (
           <div
             className={`font-normal text-sm ${version === 'primary' ? 'text-secondary-text' : ''}`}
           >
             {benefit.description}
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );

package/src/components/PictureText/PictureTextContent.ts

@@ -1,17 +1,25 @@
 import { BlockVersion } from '../../model/BlockVersion';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { Picture } from '../../model/Picture';
 
 export type TitleWithImageContent = HeadingContent & ImageContent;
 
+export interface PictureTextBenefit {
+  icon?: Picture;
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+}
+
 /**
  * @title Картинка с текстом
  */
 export interface PictureTextContent extends TitleWithImageContent {
   version?: BlockVersion;
   /** @title Список преимуществ */
-  benefits?: Benefit[];
+  benefits?: PictureTextBenefit[];
   /**
    * @title Картинка справа/текст слева
    * @default false

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

@@ -1,8 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { ProductBlock } from './ProductBlock';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ProductBlockBenefit } from './ProductBlockContent';
 
 const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
 const description =
@@ -25,7 +25,7 @@ const image: Picture = {
   ],
 };
 
-const benefits: Benefit[] = [
+const benefits: ProductBlockBenefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',

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

@@ -1,9 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../react/setup-fixture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { ProductBlock } from './ProductBlock';
-import type { ProductBlockContent } from './ProductBlockContent';
+import type { ProductBlockContent, ProductBlockBenefit } from './ProductBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -15,7 +14,7 @@ const image: Picture = {
   },
 };
 
-const benefits: Benefit[] = [
+const benefits: ProductBlockBenefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -6,10 +6,18 @@ import type { DescriptionContent } from '../../ui-kit/Description/DescriptionCon
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Picture } from '../../model/Picture';
+
+export interface ProductBlockBenefit {
+  icon?: Picture;
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+}
 
 export type BenefitItemProps = {
-  benefit: Benefit;
+  benefit: ProductBlockBenefit;
   version?: BlockVersion;
   benefitsVersion?: IconVersion;
 };
@@ -25,7 +33,7 @@ export type ProductBlockInnerContent = HeadingContent &
      * @minItems 2
      * @maxItems 3
      */
-    benefits?: Benefit[];
+    benefits?: ProductBlockBenefit[];
     benefitsVersion?: IconVersion;
     version?: BlockVersion;
     /**

package/src/components/ProductBlock/renderBenefit.tsx

@@ -27,13 +27,13 @@ export function renderBenefit(
           asSVG
         />
       ) : null}
-      <div className="flex gap-0.5 flex-col h-full max-w-[149px]  min-w-[149px]">
+      <div className="flex gap-0.5 flex-col h-full max-w-[149px] min-w-[149px]">
         <div className={`text-xl m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
-        {benefit.description && (
+        {benefit.description ? (
           <div className={`font-light text-m-md ${benefitDescStyleMap[version]}`}>
             {benefit.description}
           </div>
-        )}
+        ) : null}
       </div>
     </div>
   );

package/src/components/ProductTile/ProductTile.tsx

@@ -8,8 +8,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
-import type { ProductTileContent } from './ProductTileContent';
+import type { ProductTileContent, TextBenefit } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 

package/src/components/ProductTile/ProductTileContent.ts

@@ -3,7 +3,13 @@ import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent, HeadingTypeContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
-import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface TextBenefit {
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+}
 
 /**
  * @title Продуктовая плитка

package/src/react/IntersectionObserverTag.tsx

@@ -1,7 +1,7 @@
-import { FC, useCallback, useRef } from 'react';
-import { IntersectionObserverTagProps } from '../components/ContentPage/ContentPageContext';
+import { useCallback, useRef } from 'react';
+import { IntersectionObserverComponent } from '../components/ContentPage/ContentPageContext';
 
-export const IntersectionObserverTag: FC<IntersectionObserverTagProps> = (props) => {
+export const IntersectionObserverTag: IntersectionObserverComponent = (props) => {
   const { Tag, observerCallback, observerOptions, children, ...rest } = props;
 
   const intersectionObserver = useRef<IntersectionObserver>();