@redneckz/wildless-cms-uni-blocks 0.14.70 → 0.14.72

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -40,45 +40,43 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       isImageSecondary = false,
     } = {},
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
-        defaultPadding="p-0"
-        {...rest}
-      >
-        <LinkWrapper href={href} target={target} className="h-full">
-          <BaseTile
-            className="h-full"
-            defaultPadding="p-2xl"
-            padding={padding}
-            insetTitle={
-              <Headline
-                title={title}
-                description={description}
-                headlineVersion="XS"
-                isEmbedded={true}
-                align={align}
-              />
-            }
-            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
-            buttons={
-              socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
-              ) : null
-            }
-            isImageAlwaysOnRight={isImageAlwaysOnRight}
-            isImageSecondary={isImageSecondary}
-            imageAlign="center"
-          >
-            <BenefitsList benefits={benefits} />
-            <List items={items} isDotted={isDotted} listItemSize="S" />
-            {renderAdditionalDescription(additionalDescription, align)}
-          </BaseTile>
-        </LinkWrapper>
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
+      <LinkWrapper href={href} target={target} className="h-full">
+        <BaseTile
+          className="h-full"
+          defaultPadding="p-2xl"
+          padding={padding}
+          insetTitle={
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align={align}
+            />
+          }
+          {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
+          buttons={
+            socialMedia.length ? (
+              <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
+            ) : null
+          }
+          isImageAlwaysOnRight={isImageAlwaysOnRight}
+          isImageSecondary={isImageSecondary}
+          imageAlign="center"
+        >
+          <BenefitsList benefits={benefits} />
+          <List items={items} isDotted={isDotted} listItemSize="S" />
+          {renderAdditionalDescription(additionalDescription, align)}
+        </BaseTile>
+      </LinkWrapper>
+    </BlockWrapper>
+  ),
 );
 
 const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>

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

@@ -48,7 +48,7 @@ export const TableColumn = JSX<TableColumnProps>(
         {showRow && header?.link ? (
           <LinkButton
             href={header.link.href}
-            target={header.link.target}
+            target={header.link?.target}
             version={buttonVersion}
             className="text-s font-medium mt-m py-s"
           >

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -121,13 +121,9 @@ const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
   ) : null;
 };
 
-const renderInvestmentColumnTitle = (
-  column: InvestmentColumn | InvestmentZeroColumn,
-  i: number,
-) => {
-  return (
+const renderInvestmentColumnTitle = (column: InvestmentColumn | InvestmentZeroColumn, i: number) =>
+  column?.title ? (
     <div key={`title_${i}`} className={`flex-1 max-w-[180px] text-center px-xs last:pr-3xl`}>
       {column.title}
     </div>
-  );
-};
+  ) : null;

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,11 +1,7 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DefaultListItemType } from '../../model/DefaultListItemType';
-import {
-  type DescriptionProps,
-  type HeadlineCommonProps,
-  type LabelProps,
-} from '../../model/HeadlineType';
+import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
 import { type RichTextItem } from '../../model/RichTextItem';
@@ -42,7 +38,8 @@ export type Step = DefaultStep | RichTextStep;
  * @title Блок шаги
  */
 export type StepsBlockContent = UniBlockContent &
-  HeadlineCommonProps &
+  TitleProps &
+  DescriptionProps &
   ButtonsSectionContent & {
     /** @title Линии */
     showLines?: boolean;

package/mobile/src/components/StickyBottomMenu/RenderItem.tsx

@@ -7,13 +7,13 @@ import { type MenuItemProps } from './StickyBottomMenuProps';
 
 interface RenderItemProps {
   isActive?: boolean;
-  item: MenuItemProps;
+  item?: MenuItemProps;
   onClick?: () => void;
 }
 
 export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) => {
   const isAnotherPortal = projectSettings?.BASE_PATH
-    ? !item.href?.startsWith(projectSettings?.BASE_PATH)
+    ? !item?.href?.startsWith(projectSettings?.BASE_PATH)
     : true;
 
   const link = useLink({ isRemote: isAnotherPortal });
@@ -22,7 +22,7 @@ export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) =>
     target,
     onClick: handleClick,
   } = link({
-    href: item.href,
+    href: item?.href || '',
     target: '_self',
   });
   const isActiveItem = item?.icon?.icon === 'BurgerIcon' ? item.isActive : isActive;
@@ -45,7 +45,7 @@ export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) =>
           iconVersion: iconVersion,
         }}
       />
-      {item.title}
+      {item?.title || ''}
     </a>
   );
 });

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -25,8 +25,8 @@ export const ImgAsPicture = JSX<ImageProps>(
                   srcSet={adjustSrc(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
-                  width={image.size?.width}
-                  height={image.size?.height}
+                  width={image?.size?.width}
+                  height={image?.size?.height}
                 />
               ))
           : null}
@@ -42,14 +42,14 @@ const renderImg = (image: Picture, imageClassName = '') => (
   <img
     src={image.src}
     className={style('object-contain', imageClassName)}
-    alt={image.alt || image.title}
-    title={image.title || ''}
+    alt={image?.alt || image?.title || ''}
+    title={image?.title || ''}
     style={{
-      width: image.size?.width ? `${image.size?.width}px` : '100%',
-      height: image.size?.height ? `${image.size?.height}px` : 'auto',
+      width: image?.size?.width ? `${image.size?.width}px` : '100%',
+      height: image?.size?.height ? `${image.size?.height}px` : 'auto',
     }}
-    width={image.size?.width}
-    height={image.size?.height}
+    width={image?.size?.width}
+    height={image?.size?.height}
   />
 );
 

package/mobile/src/ui-kit/List/List.tsx

@@ -29,7 +29,7 @@ export const LIST_VERSION_STYLE: Record<
 };
 
 export const List = JSX<ListProps>(
-  ({ className, isDotted = true, items = [], listItemSize = 'M' }) => {
+  ({ className, isDotted = true, items = [], listItemSize = 'M', dotClassName = '' }) => {
     const versionStyle = LIST_VERSION_STYLE[listItemSize];
 
     return items?.length ? (
@@ -42,7 +42,11 @@ export const List = JSX<ListProps>(
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem key={String(i)} isDotted={isDotted} dotClassName={versionStyle.dotStyle}>
+          <ListItem
+            key={String(i)}
+            isDotted={isDotted}
+            dotClassName={style(dotClassName || 'bg-primary-text', versionStyle.dotStyle)}
+          >
             {item}
           </ListItem>
         ))}

package/mobile/src/ui-kit/List/ListContent.ts

@@ -20,4 +20,6 @@ export type ListProps = ListContent &
   BulletsProps & {
     /** @hidden */
     className?: string;
+    /** @hidden */
+    dotClassName?: string;
   };

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -17,7 +17,7 @@ export const ListItem = JSX<ListItemProps>(({ className, isDotted, dotClassName,
       <div className="shrink-0">
         <div
           className={style(
-            'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+            'align-middle inline-block rounded-full group-data-secondary:bg-white',
             dotClassName,
           )}
         />

package/mobile/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -29,9 +29,11 @@ export const SlideCheckbox = JSX<SlideCheckboxProps>(
           )}
         />
       </div>
-      <Text size="text-l" font="font-light" color="text-primary-text">
-        {text}
-      </Text>
+      {text ? (
+        <Text size="text-l" font="font-light" color="text-primary-text">
+          {text}
+        </Text>
+      ) : null}
     </div>
   ),
 );

package/mobile/src/ui-kit/SlideCheckboxGroup/SlideCheckboxGroup.tsx

@@ -9,12 +9,12 @@ type SlideCheckboxGroupItem = {
 
 interface SlideCheckboxGroupProps extends ControlProps<string> {
   multiple: false;
-  items: SlideCheckboxGroupItem[];
+  items?: SlideCheckboxGroupItem[];
 }
 
 interface MultipleSlideCheckboxGroupProps extends ControlProps<string[]> {
   multiple: true;
-  items: SlideCheckboxGroupItem[];
+  items?: SlideCheckboxGroupItem[];
 }
 
 export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideCheckboxGroupProps>(
@@ -38,7 +38,7 @@ export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideChe
     return items.map((item) => (
       <SlideCheckbox
         key={item.value}
-        text={item.title}
+        text={item?.title}
         value={[value].flatMap((_) => _).includes(item.value)}
         onChange={() => handleChange(item.value)}
         type={multiple ? 'checkbox' : 'radio'}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.70",
+  "version": "0.14.72",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationForm/Footnote.tsx

@@ -16,7 +16,7 @@ export const Footnote = JSX<FootnoteProps>(({ text, link }) => (
       <LinkButton
         href={link.href}
         ariaLabel="условия передачи данных"
-        target={link.target}
+        target={link.target || ''}
         className="text-primary-main"
       >
         <Text>{link.text}</Text>

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -56,7 +56,7 @@ const renderBenefit = (
         >
           {description}
         </Text>
-        <List className="text-secondary-text" listItemSize="S" items={items} isDotted={isDotted} />
+        <List dotClassName="bg-secondary-text" listItemSize="S" items={items} isDotted={isDotted} />
       </div>
     ) : null}
   </div>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -40,45 +40,43 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       isImageSecondary = false,
     } = {},
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
-        defaultPadding="p-0"
-        {...rest}
-      >
-        <LinkWrapper href={href} target={target} className="h-full">
-          <BaseTile
-            className="h-full"
-            defaultPadding="p-2xl"
-            padding={padding}
-            insetTitle={
-              <Headline
-                title={title}
-                description={description}
-                headlineVersion="XS"
-                isEmbedded={true}
-                align={align}
-              />
-            }
-            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
-            buttons={
-              socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
-              ) : null
-            }
-            isImageAlwaysOnRight={isImageAlwaysOnRight}
-            isImageSecondary={isImageSecondary}
-            imageAlign="center"
-          >
-            <BenefitsList benefits={benefits} />
-            <List items={items} isDotted={isDotted} listItemSize="S" />
-            {renderAdditionalDescription(additionalDescription, align)}
-          </BaseTile>
-        </LinkWrapper>
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
+      <LinkWrapper href={href} target={target} className="h-full">
+        <BaseTile
+          className="h-full"
+          defaultPadding="p-2xl"
+          padding={padding}
+          insetTitle={
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align={align}
+            />
+          }
+          {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
+          buttons={
+            socialMedia.length ? (
+              <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
+            ) : null
+          }
+          isImageAlwaysOnRight={isImageAlwaysOnRight}
+          isImageSecondary={isImageSecondary}
+          imageAlign="center"
+        >
+          <BenefitsList benefits={benefits} />
+          <List items={items} isDotted={isDotted} listItemSize="S" />
+          {renderAdditionalDescription(additionalDescription, align)}
+        </BaseTile>
+      </LinkWrapper>
+    </BlockWrapper>
+  ),
 );
 
 const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -35,7 +35,7 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
       <div className="mt-auto w-full">
         <LinkButton
           href={link.href}
-          target={link.target}
+          target={link.target || ''}
           className="w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
           <div className="text-xs font-light font-medium py-s">{link.text}</div>

package/src/components/ComparisonTable/TableColumn.tsx

@@ -48,7 +48,7 @@ export const TableColumn = JSX<TableColumnProps>(
         {showRow && header?.link ? (
           <LinkButton
             href={header.link.href}
-            target={header.link.target}
+            target={header.link?.target}
             version={buttonVersion}
             className="text-s font-medium mt-m py-s"
           >

package/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -121,13 +121,9 @@ const renderInvestmentCell = (cell: InvestmentCell, i: number) => {
   ) : null;
 };
 
-const renderInvestmentColumnTitle = (
-  column: InvestmentColumn | InvestmentZeroColumn,
-  i: number,
-) => {
-  return (
+const renderInvestmentColumnTitle = (column: InvestmentColumn | InvestmentZeroColumn, i: number) =>
+  column?.title ? (
     <div key={`title_${i}`} className={`flex-1 max-w-[180px] text-center px-xs last:pr-3xl`}>
       {column.title}
     </div>
-  );
-};
+  ) : null;

package/src/components/StepsBlock/StepsBlock.tsx

@@ -21,7 +21,6 @@ const getPaddingX = (steps: number) => (steps < 5 ? 'px-24' : 'px-16');
 
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
-    align = AlignStyles,
     buttons,
     className = '',
     description,
@@ -58,7 +57,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           description={description}
           isEmbedded={true}
           className="w-full"
-          align={align}
+          align={AlignStyles}
         />
         {steps?.length ? (
           <div className="box-border space-y-lg">

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,11 +1,7 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DefaultListItemType } from '../../model/DefaultListItemType';
-import {
-  type DescriptionProps,
-  type HeadlineCommonProps,
-  type LabelProps,
-} from '../../model/HeadlineType';
+import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
 import { type RichTextItem } from '../../model/RichTextItem';
@@ -42,7 +38,8 @@ export type Step = DefaultStep | RichTextStep;
  * @title Блок шаги
  */
 export type StepsBlockContent = UniBlockContent &
-  HeadlineCommonProps &
+  TitleProps &
+  DescriptionProps &
   ButtonsSectionContent & {
     /** @title Линии */
     showLines?: boolean;

package/src/components/StickyBottomMenu/RenderItem.tsx

@@ -7,13 +7,13 @@ import { type MenuItemProps } from './StickyBottomMenuProps';
 
 interface RenderItemProps {
   isActive?: boolean;
-  item: MenuItemProps;
+  item?: MenuItemProps;
   onClick?: () => void;
 }
 
 export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) => {
   const isAnotherPortal = projectSettings?.BASE_PATH
-    ? !item.href?.startsWith(projectSettings?.BASE_PATH)
+    ? !item?.href?.startsWith(projectSettings?.BASE_PATH)
     : true;
 
   const link = useLink({ isRemote: isAnotherPortal });
@@ -22,7 +22,7 @@ export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) =>
     target,
     onClick: handleClick,
   } = link({
-    href: item.href,
+    href: item?.href || '',
     target: '_self',
   });
   const isActiveItem = item?.icon?.icon === 'BurgerIcon' ? item.isActive : isActive;
@@ -45,7 +45,7 @@ export const RenderItem = JSX<RenderItemProps>(({ isActive, item, onClick }) =>
           iconVersion: iconVersion,
         }}
       />
-      {item.title}
+      {item?.title || ''}
     </a>
   );
 });

package/src/ui-kit/Img/ImgAsPicture.tsx

@@ -25,8 +25,8 @@ export const ImgAsPicture = JSX<ImageProps>(
                   srcSet={adjustSrc(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
-                  width={image.size?.width}
-                  height={image.size?.height}
+                  width={image?.size?.width}
+                  height={image?.size?.height}
                 />
               ))
           : null}
@@ -42,14 +42,14 @@ const renderImg = (image: Picture, imageClassName = '') => (
   <img
     src={image.src}
     className={style('object-contain', imageClassName)}
-    alt={image.alt || image.title}
-    title={image.title || ''}
+    alt={image?.alt || image?.title || ''}
+    title={image?.title || ''}
     style={{
-      width: image.size?.width ? `${image.size?.width}px` : '100%',
-      height: image.size?.height ? `${image.size?.height}px` : 'auto',
+      width: image?.size?.width ? `${image.size?.width}px` : '100%',
+      height: image?.size?.height ? `${image.size?.height}px` : 'auto',
     }}
-    width={image.size?.width}
-    height={image.size?.height}
+    width={image?.size?.width}
+    height={image?.size?.height}
   />
 );
 

package/src/ui-kit/List/List.tsx

@@ -29,7 +29,7 @@ export const LIST_VERSION_STYLE: Record<
 };
 
 export const List = JSX<ListProps>(
-  ({ className, isDotted = true, items = [], listItemSize = 'M' }) => {
+  ({ className, isDotted = true, items = [], listItemSize = 'M', dotClassName = '' }) => {
     const versionStyle = LIST_VERSION_STYLE[listItemSize];
 
     return items?.length ? (
@@ -42,7 +42,11 @@ export const List = JSX<ListProps>(
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem key={String(i)} isDotted={isDotted} dotClassName={versionStyle.dotStyle}>
+          <ListItem
+            key={String(i)}
+            isDotted={isDotted}
+            dotClassName={style(dotClassName || 'bg-primary-text', versionStyle.dotStyle)}
+          >
             {item}
           </ListItem>
         ))}

package/src/ui-kit/List/ListContent.ts

@@ -20,4 +20,6 @@ export type ListProps = ListContent &
   BulletsProps & {
     /** @hidden */
     className?: string;
+    /** @hidden */
+    dotClassName?: string;
   };

package/src/ui-kit/List/ListItem.tsx

@@ -17,7 +17,7 @@ export const ListItem = JSX<ListItemProps>(({ className, isDotted, dotClassName,
       <div className="shrink-0">
         <div
           className={style(
-            'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+            'align-middle inline-block rounded-full group-data-secondary:bg-white',
             dotClassName,
           )}
         />

package/src/ui-kit/SlideCheckbox/SlideCheckbox.tsx

@@ -29,9 +29,11 @@ export const SlideCheckbox = JSX<SlideCheckboxProps>(
           )}
         />
       </div>
-      <Text size="text-l" font="font-light" color="text-primary-text">
-        {text}
-      </Text>
+      {text ? (
+        <Text size="text-l" font="font-light" color="text-primary-text">
+          {text}
+        </Text>
+      ) : null}
     </div>
   ),
 );

package/src/ui-kit/SlideCheckboxGroup/SlideCheckboxGroup.tsx

@@ -9,12 +9,12 @@ type SlideCheckboxGroupItem = {
 
 interface SlideCheckboxGroupProps extends ControlProps<string> {
   multiple: false;
-  items: SlideCheckboxGroupItem[];
+  items?: SlideCheckboxGroupItem[];
 }
 
 interface MultipleSlideCheckboxGroupProps extends ControlProps<string[]> {
   multiple: true;
-  items: SlideCheckboxGroupItem[];
+  items?: SlideCheckboxGroupItem[];
 }
 
 export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideCheckboxGroupProps>(
@@ -38,7 +38,7 @@ export const SlideCheckboxGroup = JSX<SlideCheckboxGroupProps | MultipleSlideChe
     return items.map((item) => (
       <SlideCheckbox
         key={item.value}
-        text={item.title}
+        text={item?.title}
         value={[value].flatMap((_) => _).includes(item.value)}
         onChange={() => handleChange(item.value)}
         type={multiple ? 'checkbox' : 'radio'}