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

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/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>();