@redneckz/wildless-cms-uni-blocks 0.6.35 → 0.6.37

package/src/components/CarouselProgramsCard/CarouselProgramsCard.example.json

@@ -0,0 +1,25 @@
+{
+  "icon": {
+    "icon": "SignDocsIcon",
+    "format": "webp",
+    "size": {
+      "width": 200,
+      "height": 242
+    }
+  },
+  "title": "Заголовок",
+  "list": [
+    {
+      "title": "Ячейка 1-1",
+      "description": "Описание 1-1"
+    },
+    {
+      "title": "Ячейка 1-2",
+      "description": "Описание 1-2"
+    },
+    {
+      "title": "Ячейка 1-3",
+      "description": "Описание 1-3"
+    }
+  ]
+}

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -0,0 +1,38 @@
+import type { Picture } from '../../model/Picture';
+import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselProgramsCard } from './CarouselProgramsCard';
+import { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+const imageMonth: Picture = {
+  src: 'coin.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 242,
+  },
+  title: 'money',
+};
+
+const list = [
+  { title: 'От 16 до 81', description: 'платежей' },
+  {
+    title: 'От 3 до 7,5 млн руб. ',
+    description: 'остаток по счету',
+  },
+];
+
+export const BUSINESS_CARD: CarouselProgramsCardContent = {
+  title: 'Продвинутый',
+  icon: imageMonth,
+  list,
+};
+
+const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard {...BUSINESS_CARD} />;
+const CAROUSEL_BUSINESS_CARD_SECONDARY = (
+  <CarouselProgramsCard {...BUSINESS_CARD} version="secondary" />
+);
+
+export default {
+  default: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD}</div>,
+  secondary: <div className="container grid grid-cols-12">{CAROUSEL_BUSINESS_CARD_SECONDARY}</div>,
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -0,0 +1,36 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+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 { getIconWithVersion } from '../../utils/getIconWithVersion';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+
+export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
+
+export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
+  ({ className = '', title, icon, list = [], version = 'primary', ...rest }) => (
+    <BlockWrapper
+      className={`font-sans border border-main-stroke flex min-w-[536px] ${VersionStyleMap[version]} ${className}`}
+      {...rest}
+    >
+      <div className="w-[200px] min-w-[200px] self-end">
+        {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
+      </div>
+      <div className="p-8 pl-3 w-full">
+        {title ? <Heading className=" mb-3.5" headingType="h5" title={title} /> : null}
+        {list.length ? <div className="flex flex-col gap-3">{list?.map(renderList)}</div> : null}
+      </div>
+    </BlockWrapper>
+  ),
+);
+
+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>
+);

package/src/components/CarouselProgramsCard/CarouselProgramsCard.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -0,0 +1,13 @@
+import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Карточка программ карусели
+ */
+export type CarouselProgramsCardContent = TitleProps & {
+  icon?: Picture;
+  /** @title Список */
+  list?: HeadlineCommonProps[];
+  version?: BlockVersion;
+};

package/src/components/CarouselTariffsCard/CarouselTariffsCard.fixture.tsx

@@ -1,7 +1,7 @@
 import type { Picture } from '../../model/Picture';
-import { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { CarouselTariffsCard } from './CarouselTariffsCard';
-import { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
 
 const imageMonth: Picture = {
   src: 'monthly-payment.png',

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -1,7 +1,3 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { VNode } from '../../model/VNode';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { Foldable } from '../../ui-kit/Foldable/Foldable';
@@ -10,32 +6,36 @@ import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
+import { JSX } from '@redneckz/uni-jsx';
+import { VNode } from '../../model/VNode';
 import type { CarouselTariffsCardContent } from './CarouselTariffsCardContent';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselTariffsCardProps extends CarouselTariffsCardContent, UniBlockProps {}
 
+const VISIBLE_ROWS_COUNT = 1;
+
 export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   ({ className = '', title, icon, isHighlighting, button, rows = [], ...rest }) => {
-    const hitStyle = getHitStyle(Boolean(isHighlighting));
     const rowsNode = rows.map(renderCardInfo);
-    const VISIBLE_ROWS_COUNT = 1;
-    const [visibleRows, hiddenRows] = [
-      rowsNode.slice(0, VISIBLE_ROWS_COUNT),
-      rowsNode.slice(VISIBLE_ROWS_COUNT),
-    ];
+    const visibleRows = rowsNode.slice(0, VISIBLE_ROWS_COUNT);
+    const hiddenRows = rowsNode.slice(VISIBLE_ROWS_COUNT);
 
     return (
       <BlockWrapper
-        className={`font-sans bg-white p-8 border border-main-stroke relative w-[322px] min-w-[322px] -ml-[1px] ${hitStyle} ${className}`}
+        className={`font-sans relative bg-white border border-main-stroke min-w-[322px] p-8 
+        ${getHitStyle(isHighlighting)}
+        ${className}`}
         {...rest}
       >
         {isHighlighting ? renderHitIcon() : null}
-        {icon?.src ? <Img className="flex justify-center" image={icon} /> : null}
+        {icon?.src ? <Img image={icon} /> : null}
         {title ? (
           <Heading className="text-primary-text text-center pt-2" headingType="h5" title={title} />
         ) : null}
         {button ? <Button className="w-full mt-4" {...button} /> : null}
-        {rows?.length ? (
+        {rows.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
               <div>
@@ -51,8 +51,8 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
   },
 );
 
-const getHitStyle = (isHighlighting: boolean): string =>
-  isHighlighting ? 'mt-9 pt-[71px]' : 'mt-[70px] pt-9';
+const getHitStyle = (isHighlighting?: boolean): string =>
+  isHighlighting ? 'mt-9 pt-[70px]' : 'mt-[70px] pt-9';
 
 const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode => (
   <button
@@ -71,23 +71,19 @@ const renderFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps): VNode =>
 );
 
 const renderCardInfo = (cell: HeadlineCommonProps, i: number): VNode => (
-  <div key={String(i)} className="py-5 border-b border-main-divider flex flex-col gap-1">
+  <div key={String(i)} className="py-5 border-b border-main-divider">
     {cell?.title ? (
       <div className="text-secondary-text text-m-light opacity-80">{cell.title}</div>
     ) : null}
-    {cell?.description ? <div className="text-primary-text text-h6">{cell.description}</div> : null}
+    {cell?.description ? (
+      <div className="text-primary-text text-h6 mt-1">{cell.description}</div>
+    ) : null}
   </div>
 );
 
-const renderHitIcon = (): VNode => {
-  const POSITION_STYLE = 'absolute -top-7 -right-4';
-
-  return (
-    <div
-      className={`h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)] ${POSITION_STYLE}`}
-    >
-      <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
-      <div className="text-center">Хит</div>
-    </div>
-  );
-};
+const renderHitIcon = (): VNode => (
+  <div className="absolute -top-7 -right-4 h-[60px] w-[60px] bg-white flex flex-col items-center justify-center shadow-[0_4px_25px_rgba(0,0,0,0.07)]">
+    <Icon iconVersion="black" name="HeartIcon" width="23" height="22" asSVG />
+    <div className="text-center">Хит</div>
+  </div>
+);

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -62,7 +62,7 @@ const TableInner = JSX<ComparisonTableProps>(
     ));
 
     return orientation === 'horizontal' ? (
-      <SwipeListControl onSlideChange={handleSlideChange}>{tableColumns}</SwipeListControl>
+      <SwipeListControl onVisibleIndicesChange={handleSlideChange}>{tableColumns}</SwipeListControl>
     ) : (
       tableColumns
     );

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -20,7 +20,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     ...rest
   }) => {
     const [isShowAllRow, setIsShowAllRow] = useState(!visibleRowLength);
-    const showToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
+    const handleToggle = useCallback(() => setIsShowAllRow((_) => !_), []);
 
     return (
       <BlockWrapper
@@ -40,7 +40,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           visibleRowLength={visibleRowLength}
         />
         {visibleRowLength
-          ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
+          ? renderShowMoreToggleButton({ isShowAllRow, onClick: handleToggle })
           : null}
       </BlockWrapper>
     );

package/src/components/Gallery/Gallery.mobile.tsx

@@ -45,7 +45,7 @@ function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps
 function renderCard(card: GalleryCardProps, key: number) {
   return (
     <div
-      className={`h-full justify-between box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
+      className={`w-full h-full flex flex-col justify-between shrink-0 box-border snap-start snap-always border-solid border rounded-md border-main-stroke p-4
       ${VersionStyleMap[card.version ?? 'primary']}`}
       key={key}
     >

package/src/components/Gallery/GalleryCardInner.tsx

@@ -19,6 +19,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     items,
     button,
     version,
+    isFullWidth = true,
     isDotted = true,
     align = 'center',
   }) => (
@@ -30,7 +31,12 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {items?.length ? renderItems(items, isDotted, version) : null}
         {renderAdditionalDescription(additionalDescription)}
       </div>
-      {button?.text ? renderButton({ button, buttonClassName: 'mt-6' }) : null}
+      {button?.text
+        ? renderButton({
+            button,
+            buttonClassName: `mt-6 ${isFullWidth ? '' : 'self-center'}`,
+          })
+        : null}
     </div>
   ),
 );

package/src/components/Gallery/GalleryContent.ts

@@ -52,6 +52,11 @@ export type GalleryCardProps = HeadlineSmallProps & {
    * @default center
    */
   align?: AlignType;
+  /**
+   * @title Кнопка по всей ширине
+   * @default true
+   */
+  isFullWidth?: boolean;
 };
 
 /**

package/src/components/Gallery/GalleryInner.tsx

@@ -38,7 +38,6 @@ export const GalleryInner = JSX<GalleryInnerProps>(
             <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
           </div>
         ) : null}
-
         {button ? renderButton({ button, buttonClassName: 'mt-8 mx-auto' }) : null}
       </BlockWrapper>
     );

package/src/components/Header/Header.mobile.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { useRouter } from '../../hooks/useRouter';
 import type { Fallback } from '../../model/Fallback';
 import type { UniBlockProps } from '../../model/JSXBlock';
@@ -30,15 +30,13 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const activeTopItem = topItems?.find(isTopItemActive(router));
   const subItems = activeTopItem?.items;
   const activeSubItem = findActiveSubItem(router)(subItems);
-
   const [burgerMenuShow, setBurgerMenuShow] = useState(false);
-
-  const toggleBurgerMenu = () => setBurgerMenuShow(!burgerMenuShow);
+  const handleBurgerMenuShow = useCallback(() => setBurgerMenuShow((_) => !_), []);
 
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
         <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (
@@ -55,7 +53,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
       </div>
       {burgerMenuShow ? (
         <HeaderBurger
-          onClick={toggleBurgerMenu}
+          onClick={handleBurgerMenuShow}
           burgerSubMenu={dispositions}
           defaultLocation={defaultLocation}
         >

package/src/components/Header/HeaderSubMenu.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useMemo, useRef, useState } from '@redneckz/uni-jsx/lib/hooks';
+import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { useRouter } from '../../hooks/useRouter';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
@@ -18,13 +19,11 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ subItems = [], bgColor }
   const activeSubItem = findActiveSubItem(router)(subItems);
 
   const [visibleItemsCount, setVisibleItemsCount] = useState(subItems.length);
+
   const dropDownMenuItems = subItems.slice(visibleItemsCount);
 
   const subItemsListRef = useRef<HTMLDivElement | null>(null);
-  const observerOptions = useMemo(
-    () => ({ threshold: 1, root: subItemsListRef.current }),
-    [subItemsListRef.current],
-  );
+  const observerOptions: IntersectionObserverOptions = { rootRef: subItemsListRef };
   const subItemsVisibilityHandlers = useMemo(
     () =>
       subItems.map((_, index) => (isIntersecting: boolean) => {

package/src/components/Header/HeaderSubMenuItem.tsx

@@ -1,6 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
-import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
+import {
+  useIntersectionObserver,
+  type IntersectionObserverOptions,
+} from '../../hooks/useIntersectionObserver';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
@@ -9,7 +12,7 @@ export interface HeaderSubMenuItemProps extends LinkProps {
   className?: string;
   active?: boolean;
   bgColor?: BgColorVersion;
-  observerOptions?: IntersectionObserverInit;
+  observerOptions?: IntersectionObserverOptions;
   onVisibilityChange?: (isIntersecting: boolean) => void;
 }
 

package/src/components/ImgBlock/ImgBlock.example.json

@@ -0,0 +1,11 @@
+{
+  "content": {
+    "image": {
+      "format": "webp",
+      "size": {
+        "width": 400,
+        "height": 300
+      }
+    }
+  }
+}

package/src/components/ImgBlock/ImgBlock.fixture.tsx

@@ -0,0 +1,21 @@
+import type { Picture } from '../../model/Picture';
+import '../../setup-fixture';
+import { ImgBlock } from './ImgBlock';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ImgBlock className="col-span-12" image={image} />
+    </div>
+  ),
+};

package/src/components/ImgBlock/ImgBlock.tsx

@@ -0,0 +1,17 @@
+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 type { ImgBlockContent } from './ImgBlockContent';
+
+interface ImgBlockProps extends ImgBlockContent, UniBlockProps {}
+
+export const ImgBlock = JSX<ImgBlockProps>((props) => {
+  const { className, image, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Img image={image} />
+    </BlockWrapper>
+  );
+});

package/src/components/ImgBlock/ImgBlock.ui.json

@@ -0,0 +1,7 @@
+{
+  "content": {
+    "image": {
+      "ui:field": "picture"
+    }
+  }
+}

package/src/components/ImgBlock/ImgBlockContent.ts

@@ -0,0 +1,8 @@
+import type { Picture } from '../../model/Picture';
+
+/**
+ * @title Картинка
+ */
+export interface ImgBlockContent {
+  image?: Picture;
+}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -1,15 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlockContent';
 import { InsuranceAmountBlockInner } from './InsuranceAmountBlockInner';
 
-interface RenderNavButtonProps {
+interface NavButtonProps {
   title?: string;
   i: number;
-  activeSlideIndex?: number;
+  isActive: boolean;
   onClick: () => void;
 }
 
@@ -18,6 +18,7 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', title, insuranceTabs = [], button, ...rest }) => {
     const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const handleActiveSlideIndex = useCallback((_: number) => setActiveSlideIndex(_), []);
 
     return (
       <BlockWrapper
@@ -31,8 +32,8 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
               renderNavButton({
                 title: item?.title,
                 i,
-                activeSlideIndex,
-                onClick: () => setActiveSlideIndex(i),
+                isActive: Boolean(i === activeSlideIndex),
+                onClick: () => handleActiveSlideIndex(i),
               }),
             )}
           </div>
@@ -62,12 +63,8 @@ const renderInsuranceGalleries = ({ insuranceTabs, button }: InsuranceAmountBloc
     : null;
 };
 
-function renderNavButton({ title, i, activeSlideIndex, onClick }: RenderNavButtonProps) {
-  const isActiveBtn = i === activeSlideIndex;
-
-  const btnClassName = isActiveBtn
-    ? 'bg-primary-main text-white rounded-md'
-    : `text-secondary-text`;
+function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
+  const btnClassName = isActive ? 'bg-primary-main text-white rounded-md' : `text-secondary-text`;
 
   return (
     <button

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -20,7 +20,7 @@ type InsuranceGalleryProps = {
   onClick: (index: number) => void;
 };
 
-type InsuranceSlideProps = {
+type NavButtonProps = {
   slide: CardItem;
   i: number;
   isActive: boolean;
@@ -80,7 +80,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
     >
       <div className={`w-full flex flex-nowrap gap-3.5 pb-12 ${cardsAlignStyle}`}>
         {cards.map((slide, i) =>
-          renderSlide({
+          renderNavButton({
             slide,
             i,
             isActive: Boolean(i === selectedCardIndex),
@@ -92,7 +92,7 @@ function renderGallery({ activeIndex, cards, selectedCardIndex, onClick }: Insur
   );
 }
 
-function renderSlide({ slide, i, isActive, onClick }: InsuranceSlideProps) {
+function renderNavButton({ slide, i, isActive, onClick }: NavButtonProps) {
   const btnClassName = isActive
     ? 'shadow-dark-blue/42 border-primary-main'
     : `ease-in duration-300 border-main-stroke`;

package/src/components/ParagraphBlock/ParagraphBlock.example.json

@@ -0,0 +1,5 @@
+{
+  "content": {
+    "text": "Текст"
+  }
+}

package/src/components/ParagraphBlock/ParagraphBlock.fixture.tsx

@@ -0,0 +1,45 @@
+import '../../setup-fixture';
+import { ParagraphBlock } from './ParagraphBlock';
+
+const DEFAULT_CLASS_NAME = 'col-span-12 w-full';
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера XL" size="text-xl" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера L" size="text-l" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера M" size="text-m" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера S" size="text-s" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст размера XS" size="text-xs" />
+    </div>
+  ),
+  colors: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-error" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-green" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-main" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-main" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-primary-text" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-secondary-text" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Текст" color="text-white" />
+    </div>
+  ),
+  alignment: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Слева" align="text-left" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Справа" align="text-right" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По центру" align="text-center" />
+    </div>
+  ),
+  font: (
+    <div className="container grid grid-cols-12">
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="По умолчанию (наследует от родителя)" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Тонкий" font="font-light" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Обычный" font="font-normal" />
+      <ParagraphBlock className={DEFAULT_CLASS_NAME} text="Средний" font="font-medium" />
+    </div>
+  ),
+};

package/src/components/ParagraphBlock/ParagraphBlock.tsx

@@ -0,0 +1,19 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { ParagraphBlockContent } from './ParagraphBlockContent';
+
+interface ParagraphBlockProps extends ParagraphBlockContent, UniBlockProps {}
+
+export const ParagraphBlock = JSX<ParagraphBlockProps>((props) => {
+  const { className, text, size, color, align, font, ...rest } = props;
+
+  return (
+    <BlockWrapper className={className} {...rest}>
+      <Paragraph size={size} color={color} align={align} font={font}>
+        {text}
+      </Paragraph>
+    </BlockWrapper>
+  );
+});

package/src/components/ParagraphBlock/ParagraphBlock.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/ParagraphBlock/ParagraphBlockContent.ts

@@ -0,0 +1,9 @@
+import type { ParagraphProps } from '../../ui-kit/Paragraph/ParagraphProps';
+
+/**
+ * @title Параграф
+ */
+export interface ParagraphBlockContent extends ParagraphProps {
+  /** @title Текст */
+  text?: string;
+}