@redneckz/wildless-cms-uni-blocks 0.3.74 → 0.3.75

package/mobile/src/components/Footer/Footer.tsx

@@ -28,6 +28,7 @@ export const Footer = JSX<FooterProps>(
   }) => {
     const sitemap = useSitemap(context.useAsyncData);
     const dispositions = sitemap?.dispositions;
+
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
@@ -57,6 +58,7 @@ export const Footer = JSX<FooterProps>(
 
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}

package/mobile/src/components/Footer/SocialMedia.tsx

@@ -13,6 +13,7 @@ export interface SocialMediaProps extends UniBlockProps {
 export const SocialMedia = JSX<SocialMediaProps>(({ className, media, version, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
       {media?.map((_, index) => (

package/mobile/src/components/Footer/TextInformation.tsx

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">

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

@@ -8,6 +8,7 @@ import type { GalleryCard, GalleryItem } from './GalleryContent';
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version, isDotted = true }) => {
     const titleStyleClasses = getTitleStyle(version);
+
     return (
       <div className="h-full flex flex-col justify-between text-center">
         <div>

package/mobile/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -24,6 +24,7 @@ export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDe
   }
   const classNameBlock = style2className(block?.style);
   const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
   return (
     <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
   );

package/mobile/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -19,6 +19,7 @@ export const renderBlock =
     }
     const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
     return (
       <div className={className} key={`block_${i}`}>
         <EmbeddedBlock context={context} {...block} className={classNameBlock} />

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

@@ -15,6 +15,7 @@ export interface HeaderBurgerProps {
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
         <button
@@ -46,6 +47,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 
 const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
       {icon ? (

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

@@ -29,6 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
   ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className={`flex items-center ${className || ''}`}>
         <TopItem

package/mobile/src/components/Headline/Headline.tsx

@@ -18,6 +18,7 @@ export const Headline = JSX<HeadlineProps>(
     align = 'left',
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+
     return (
       <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
         {title ? (

package/mobile/src/components/Insurance/Insurance.tsx

@@ -64,6 +64,7 @@ function renderInsuranceSumMonth(sum, monthLimit) {
 
 function renderValueBlock(title, sum, isAnotherBlock) {
   const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
   return (
     <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
       <span className="text-secondary-text text-base">{title}</span>

package/mobile/src/components/Insurance/InsuranceContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Преимущество
@@ -15,12 +14,16 @@ export interface InsuranceBenefit {
 /**
  * @title Страховка
  */
-export type InsuranceContent = InsuranceProps & {
+export type InsuranceContent = {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
   description?: string;
   image?: Picture;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
   /**
    * @title Список преимуществ
    * @maxItems 6

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -6,8 +6,8 @@
   },
   "insuranceTabs": [
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 1",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,
@@ -21,8 +21,8 @@
       ]
     },
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 2",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -9,7 +9,6 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
-    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -36,7 +35,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
           {renderInsuranceGalleries({
             context,
             className,
-            insuranceGalleries,
+            insuranceTabs,
           })}
         </div>
         {button?.text ? (
@@ -55,7 +54,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   },
 );
 
-const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+const renderInsuranceGalleries = ({
+  insuranceTabs,
+  context,
+  className = '',
+}: InsuranceAmountBlockProps) => {
+  const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
+
   return insuranceGalleries?.length
     ? insuranceGalleries.map((cards) => (
         <InsuranceAmountBlockInner context={context} className={className} cards={cards} />

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,14 +1,16 @@
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Кнопка выбора программы
  */
-export type cardItem = InsuranceProps & {
+export type CardItem = {
+  /** @title Иконка */
   icon?: Picture;
   /** @title Страховой взнос */
   fee?: number;
+  /** @title Страховая сумма */
+  sum?: number;
 };
 
 /**
@@ -18,7 +20,7 @@ export interface InsuranceAmountBlockTabs {
   /** @title Заголовок вкладки */
   title?: string;
   /** @title Содержимое вкладки */
-  cards?: cardItem[];
+  cards?: CardItem[];
 }
 
 /**

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
-import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
+import type { InsuranceAmountBlockTabs, CardItem } from './InsuranceAmountBlockContent';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -9,14 +9,14 @@ export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs
 
 type InsuranceGalleryProps = {
   tabsShift: number;
-  cards: cardItem[];
+  cards: CardItem[];
   activeSlideIndex: number;
   isLastShift: boolean;
   setActiveSlideIndex: FuncReturnVoid<number>;
 };
 
 type InsuranceSlideProps = {
-  slide: cardItem;
+  slide: CardItem;
   i: number;
   activeSlideIndex: number;
   onClick: FuncReturnVoid<MouseEvent>;
@@ -30,7 +30,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const handleNextClick = () => setTabsShift(tabsShift + 1);
     const handlePrevClick = () => setTabsShift(tabsShift - 1);
 
-    const galleryLength = cards?.length;
+    const galleryLength = cards?.length ?? 0;
 
     const isGalleryScrollAvailable = cards?.length > 2;
     const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
@@ -40,7 +40,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     return (
       <section id={anchor} className={`min-w-full ${className}`}>
         <div className="relative mt-7 overflow-hidden">
-          {galleryLength > 1
+          {galleryLength
             ? renderGallery({
                 tabsShift,
                 cards,
@@ -75,6 +75,7 @@ function renderGallery({
   setActiveSlideIndex,
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+
   return (
     <div
       style={{ transform: `translateX(-${tabsShiftWidth}px)` }}

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

@@ -18,6 +18,7 @@ export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
 export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
   ({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
     const { text, fileSize, ...linkProps } = doc;
+
     return (
       <a className={className} role="link" {...linkProps}>
         {icon ? (
@@ -40,6 +41,7 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
   const prefix = ext || fileSize ? ',' : '';
   const extension = ext ? ` ${ext}` : '';
   const size = fileSize ? ` (${fileSize})` : '';
+
   return prefix + extension + size;
 };
 
@@ -49,5 +51,6 @@ const getExtFromHref = (href: string) => {
   }
 
   const index = href.lastIndexOf('.');
+
   return index !== -1 ? href.substring(index + 1) : '';
 };

package/mobile/src/components/LinkList/LinkList.tsx

@@ -17,6 +17,7 @@ export const LinkList = JSX<LinkListProps>(({ className = '', documents, anchor
 const renderLinkListItem = (documents) => {
   return documents.map((doc, i) => {
     const { text, ...linkProps } = doc;
+
     return (
       <li key={`list_item_${String(i)}`} className="mb-4 list-none">
         <a className="hover:text-primary-main" role="link" {...linkProps}>

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -7,12 +7,10 @@ import { Logo } from '../../ui-kit/Logo/Logo';
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
 export const MobileAppTile = JSX<MobileAppTileProps>(
-  ({ className, title = 'Мобильное приложение', description, href = '#' }) => {
+  ({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
     return (
       <div
-        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${
-          className || ''
-        }`}
+        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light ${className}`}
       >
         {href ? (
           <div className="flex">

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,6 +1,9 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
 
 /**
  * @title QR код
@@ -17,9 +20,12 @@ export interface QRCode {
  */
 export type MobileAppTileContent = HeadingContent &
   DescriptionContent &
-  ButtonContent & {
+  ButtonContent &
+  ListContent &
+  ImageContent & {
     // TODO: description для мобильной версии
     qr?: QRCode;
     /** @title Ссылка */
     href?: string; // TODO: для мобильной версии
+    version?: BlockVersion;
   };

package/mobile/src/components/OtherProducts/OtherProducts.tsx

@@ -8,9 +8,9 @@ export interface OtherProductsProps extends OtherProductsContent, UniBlockProps
 export const OtherProducts = JSX<OtherProductsProps>(
   ({ blockItems, colorPalette, context, className = '' }) => {
     return (
-      <section className={`font-sans bg-white text-primary-text ${className}`}>
+      <section className={`font-sans text-primary-text ${className}`}>
         {blockItems?.length ? (
-          <div className="list-none m-0 p-0">
+          <div className="box-border1">
             {blockItems.map((item, i) => (
               <OtherProductsItem
                 key={`BlockItem${i}`}

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -1,5 +1,5 @@
 import type { ColorPalette } from '../../types';
-import type { BlockDef, ColumnsCount } from '../../ui-kit/BlocksList/BlocksListProps';
+import type { BlockDef } from '../../ui-kit/BlocksList/BlocksListProps';
 
 /**
  * @title Элемент списка
@@ -10,16 +10,13 @@ export interface BlockItemCommonProps {
    * @default Список
    */
   label?: string;
-  /**
-   * @title Отображать в раскрытом виде
-   */
+  /** @title Отображать в раскрытом виде */
   isUnfolded?: boolean;
   /**
    * @title Блоки
    * @maxItems 10
    */
   blocks?: BlockDef[];
-  columns?: ColumnsCount;
 }
 
 /**
@@ -28,9 +25,7 @@ export interface BlockItemCommonProps {
 export interface OtherProductsContent {
   /** @title Заголовок */
   title?: string;
-  /**
-   * @title Список
-   */
+  /** @title Список */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;
 }

package/mobile/src/components/OtherProducts/OtherProductsItem.tsx

@@ -10,13 +10,12 @@ export interface BlockItemProps extends BlockItemCommonProps, UniBlockProps {
 }
 
 export const OtherProductsItem = JSX<BlockItemProps>(
-  ({ label, blocks, columns = 1, context, dataTheme, isUnfolded }) => {
+  ({ label, blocks, context, dataTheme, isUnfolded }) => {
     const foldableBlocks = renderBlocksList({
       context,
-      className: 'box-border p-5',
-      columns,
       blocks,
     }) as VNode[];
+
     return (
       <div className="border-0 border-b border-solid border-main-divider">
         {blocks?.length ? (
@@ -27,11 +26,8 @@ export const OtherProductsItem = JSX<BlockItemProps>(
             isUnfolded={isUnfolded}
             context={context}
             foldButtonLabel={label}
-            render={(children, isActive) => (
-              <Wrapper columns={columns} isActive={isActive}>
-                {children}
-              </Wrapper>
-            )}
+            containerClasses="grid grid-cols-12 gap-1 border-box"
+            render={(children, isActive) => <Wrapper isActive={isActive}>{children}</Wrapper>}
           />
         ) : null}
       </div>
@@ -39,14 +35,6 @@ export const OtherProductsItem = JSX<BlockItemProps>(
   },
 );
 
-const Wrapper = JSX<{ columns: number; isActive: boolean }>(({ columns, children, isActive }) => {
-  return (
-    <div
-      className={`box-border w-full ${isActive ? 'p-9' : ''} ${
-        columns > 1 ? 'flex flex-wrap' : ''
-      }`}
-    >
-      {children}
-    </div>
-  );
+const Wrapper = JSX<{ isActive: boolean }>(({ children }) => {
+  return <div className="box-border">{children}</div>;
 });

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

@@ -13,6 +13,7 @@ export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
 export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
   const { className = '', version = 'primary' } = props;
+
   return (
     <section
       className={`font-sans bg-white px-4 py-6 ${productBlockStyleMap[version]} ${className}`}

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

@@ -13,6 +13,7 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
 
 export function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps, i: number) {
   const isIconWhite = version === 'secondary';
+
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon ? (

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -97,6 +97,7 @@ function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'pr
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
+
   return (
     <div key={String(i)} className={`text-sm ${i ? 'mt-4' : ''} ${labelStyleMap[version]}`}>
       {benefit.description}
@@ -109,5 +110,6 @@ function renderAdditionalDescription(additionalDescription: string, version = 'p
     primary: 'text-secondary-text',
     secondary: 'text-white',
   };
+
   return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
 }

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -68,5 +68,6 @@ function formatDate(date: string) {
     month: 'long',
     year: 'numeric',
   };
+
   return dateObj.toLocaleString('ru-RU', dateFormat).replace('г.', '');
 }