@redneckz/wildless-cms-uni-blocks 0.6.39 → 0.6.41

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,15 +1,18 @@
-import { BaseTile } from '../BaseTile/BaseTile';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
+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 { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
   CardsListItem,
   CarouselInvestmentCardContent,
 } from './CarouselInvestmentCardContent';
-import { JSX } from '@redneckz/uni-jsx';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
 
@@ -42,17 +45,29 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
 
     return (
       <BlockWrapper
-        className={`relative text-left border border-solid box-border
-        p-9 w-[697px]
-        ${BorderVersionStyleMap[version]}
-        ${className}`}
+        className={[
+          'relative text-left border border-solid box-border p-9 w-[697px]',
+          VersionStyleMap[version],
+          BorderVersionStyleMap[version],
+          className,
+        ].join(' ')}
         {...rest}
       >
         <BaseTile title={tileTitle} image={tileImage}>
           <div className="flex justify-between mb-4">
-            {description ? <span className="text-h6 w-1/3">{description}</span> : null}
+            {description ? (
+              <div className="w-1/3">
+                <Text size="text-h6">{description}</Text>
+              </div>
+            ) : null}
             {additionalDescription ? (
-              <span className="text-m-light text-secondary-text">{additionalDescription}</span>
+              <Text
+                size="text-m"
+                font="font-light"
+                color={VersionAdditionalStyleMap[version] as TextColor}
+              >
+                {additionalDescription}
+              </Text>
             ) : null}
           </div>
           {cardsList.length ? (
@@ -73,10 +88,14 @@ const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
   return visibleCardsList.map((item, i) => (
     <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
       {item?.parameter ? (
-        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+        <div className="pr-2.5">
+          <Text size={getItemListFontSize(columnsMode)}>{item.parameter}</Text>
+        </div>
       ) : null}
       {item?.parameterDescription ? (
-        <span className="text-m-light text-secondary-text">{item.parameterDescription}</span>
+        <Text size="text-m" font="font-light" color="text-secondary-text">
+          {item.parameterDescription}
+        </Text>
       ) : null}
     </li>
   ));

package/mobile/src/components/CarouselInvestmentCard/CarouselInvestmentCardContent.ts

@@ -1,10 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title Карточка галереи инвестиций
- */
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Количество колонок
@@ -21,6 +17,10 @@ export interface CardsListItem {
   /** @title Описание */
   parameterDescription?: string;
 }
+
+/**
+ * @title Карточка галереи инвестиций
+ */
 export interface CarouselInvestmentCardContent extends HeadlineCommonProps {
   /** @title Доп. описание карточки  */
   additionalDescription?: string;

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

@@ -0,0 +1,21 @@
+{
+  "content": {
+    "icon": {
+      "format": "webp",
+      "size": {
+        "width": 140,
+        "height": 140
+      }
+    },
+    "title": "Заголовок 1",
+    "description": "Описание 1",
+    "href": "/credit-cards",
+    "version": "primary",
+    "isDotted": true,
+    "items": [
+      { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
+      { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
+      { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
+    ]
+  }
+}

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -0,0 +1,102 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
+
+export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
+
+const descriptionStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white/80',
+};
+
+const BORDER_STYLE = 'box-border border-solid border border-main-stroke ';
+
+export const CarouselProductCard = JSX<CarouselProductCardProps>(
+  ({
+    title,
+    headlineSmallVersion = 'H6',
+    description,
+    additionalDescription,
+    icon,
+    items = [],
+    button = {},
+    version = 'primary',
+    isDotted = true,
+    align = 'center',
+  }) => {
+    return (
+      <section
+        className={[
+          'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
+          BORDER_STYLE,
+          AlignText[align],
+          VersionStyleMap[version],
+        ].join(' ')}
+        role="listitem"
+      >
+        <div className="flex flex-col h-full">
+          {renderImage(icon, version)}
+          {renderCardTitle(headlineSmallVersion, title)}
+          {renderDescription(description, title)}
+          {renderItems(items, isDotted, version)}
+          {renderAdditionalDescription(additionalDescription, version)}
+        </div>
+        {renderButton({ button, buttonClassName: 'mt-6' })}
+      </section>
+    );
+  },
+);
+
+const renderImage = (image?: Picture, version?: BlockVersion) => (
+  <div className="flex justify-center">
+    {image?.src ? <Img className="mb-5" image={image} /> : null}
+    {image?.icon ? (
+      <Img
+        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        image={getIconWithVersion(image, version)}
+        asSVG
+      />
+    ) : null}
+  </div>
+);
+
+const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
+  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+
+const renderDescription = (description?: string, title?: string) =>
+  description ? (
+    <div className={title ? 'mt-2' : ''}>
+      <Paragraph size="text-l">{description}</Paragraph>
+    </div>
+  ) : null;
+
+const renderAdditionalDescription = (additionalDescription?: string, version = 'primary') =>
+  additionalDescription ? (
+    <div className="mt-auto">
+      <Text size="text-m" font="font-light" color={descriptionStyleMap[version]}>
+        {additionalDescription}
+      </Text>
+    </div>
+  ) : null;
+
+const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
+  items?.length ? (
+    <List
+      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+      itemClassName="text-left"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      isDotted={isDotted}
+      version={version}
+    />
+  ) : null;

package/mobile/src/components/CarouselProductCard/CarouselProductCard.ui.json

@@ -0,0 +1,18 @@
+{
+  "content": {
+    "additionalDescription": {
+      "ui:field": "hidden"
+    },
+    "icon": {
+      "ui:field": "picture"
+    },
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  }
+}

package/mobile/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -0,0 +1,51 @@
+import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineSmallProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Элемент списка
+ */
+export interface ListProps {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Карточка продуктовой карусели
+ */
+export type CarouselProductCardContent = HeadlineSmallProps & {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 140
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 84,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
+  icon?: Picture;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+  /**
+   * @title Буллиты
+   * @default true
+   */
+  isDotted?: boolean;
+  /** @title Список */
+  items?: ListProps[];
+  version?: BlockVersion;
+  /**
+   * @title Выравнивание
+   * @default center
+   */
+  align?: AlignType;
+};

package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -1,6 +1,6 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Карточка программ карусели

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

@@ -16,7 +16,7 @@
       ],
       [
         {
-          "title": "Заголовок 2ff",
+          "title": "Заголовок 2",
           "description": "Описание 2",
           "button": {
             "href": "#",

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

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionAdditionalStyleMap } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
@@ -29,7 +30,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {renderCardTitle(headlineSmallVersion, title)}
         {renderDescription(description, title)}
         {items?.length ? renderItems(items, isDotted, version) : null}
-        {renderAdditionalDescription(additionalDescription)}
+        {renderAdditionalDescription(additionalDescription, version)}
       </div>
       {button?.text
         ? renderButton({
@@ -60,9 +61,11 @@ const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
 const renderDescription = (description?: string, title?: string) =>
   description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-const renderAdditionalDescription = (additionalDescription?: string) =>
+const renderAdditionalDescription = (additionalDescription?: string, version?: BlockVersion) =>
   additionalDescription ? (
-    <div className="text-m-light text-secondary-text mt-auto">{additionalDescription}</div>
+    <div className={`text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`}>
+      {additionalDescription}
+    </div>
   ) : null;
 
 const renderItems = (

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

@@ -22,7 +22,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   const router = useRouter();
 
   const fallback: Fallback | undefined = rest.options?.page?.fallback;
-  const { topItems, dispositions, defaultLocation } = useSWRResource<SitemapDataProps>(
+  const { topItems, dispositions, defaultLocation, logo } = useSWRResource<SitemapDataProps>(
     projectSettings.SITEMAP || 'sitemap',
     fallback,
   );
@@ -36,7 +36,7 @@ export const Header = JSX<HeaderProps>(({ className = '', bgColor = 'bg-white',
   return (
     <header className={`${bgColor} ${className}`}>
       <div className="container px-4 py-0 box-border">
-        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} />
+        <HeaderTop onClick={handleBurgerMenuShow} bgColor={bgColor} logo={logo} />
         <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-12">
           <div className="flex no-scrollbar horizontal-list h-full items-center">
             {subItems?.map((_, i) => (

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

@@ -1,13 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { LogoType } from '../../model/LogoType';
 import { Img } from '../../ui-kit/Img/Img';
 import { Logo } from '../../ui-kit/Logo/Logo';
 
 export interface HeaderTopProps {
   onClick: () => void;
   bgColor?: BgColorVersion;
+  logo?: LogoType;
 }
-export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
+export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor, logo }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-12">
     <div className="flex items-center">
       <button
@@ -23,7 +25,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
           asSVG
         />
       </button>
-      <Logo className="mr-8" bgColor={bgColor} />
+      <Logo className="mr-8" bgColor={bgColor} logo={logo} />
     </div>
     <button
       className={`${

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

@@ -29,6 +29,7 @@
         "text": "Кнопка",
         "version": "primary"
       }
-    ]
+    ],
+    "isImageOnRightSide": true
   }
 }

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

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionStyleMap } from '../../model/BlockVersion';
+import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
@@ -22,32 +22,33 @@ export const ProductTile = JSX<ProductTileProps>(
     benefits = [],
     buttons,
     image,
+    isImageOnRightSide = true,
     version = 'primary',
     ...rest
   }) => (
     <BlockWrapper
-      className={`overflow-hidden font-sans p-9 box-border relative justify-between grid min-h-[364px]
-          ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)}`}
+      className={`overflow-hidden font-sans p-9 box-border relative min-h-[364px]
+          ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${className}`}
       {...rest}
     >
-      <Headline
-        className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
-        as="h2"
-        title={title}
-        description={description}
-        headlineVersion={headlineVersion}
-        bgColorHeadline={version}
-        align="left"
-        {...rest}
-      />
-      {renderBenefits(benefits, version, image)}
-      {additionalDescription
-        ? renderAdditionalDescription(additionalDescription, image, version)
-        : null}
-      {buttons?.length ? (
-        <ButtonSection buttons={buttons} className="flex self-end mt-5 gap-4 z-10 text-l" />
-      ) : null}
-      {image?.src ? <Img className="absolute right-0 bottom-0" image={image} /> : null}
+      <div className={`flex flex-col ${isImageOnRightSide ? '' : 'items-end'}`}>
+        <Headline
+          className={`!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`}
+          as="h2"
+          title={title}
+          description={description}
+          headlineVersion={headlineVersion}
+          bgColorHeadline={version}
+          align="left"
+          {...rest}
+        />
+        {renderBenefits(benefits, version, image)}
+        {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
+        {buttons?.length ? (
+          <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
+        ) : null}
+      </div>
+      {renderImage(image, isImageOnRightSide)}
     </BlockWrapper>
   ),
 );
@@ -66,42 +67,39 @@ function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?:
   );
 }
 
-function renderBenefit(version: BlockVersion = 'primary') {
-  const labelStyleMap: Record<BlockVersion, string> = {
-    primary: 'text-secondary-text',
-    secondary: 'text-white',
-  };
-
-  return function renderVersionedBenefit(benefit: TextBenefit, i: number) {
+const renderBenefit =
+  (version: BlockVersion = 'primary') =>
+  (benefit: TextBenefit, i: number) => {
     const { label = '', description = '' } = benefit;
 
     return [
       <div key={`label-${i}`} className="text-h6">
         {label}
       </div>,
-      <div key={`desc-${i}`} className={`text-m-light ${labelStyleMap[version]}`}>
+      <div key={`desc-${i}`} className={`text-m-light ${VersionAdditionalStyleMap[version]}`}>
         {description}
       </div>,
     ];
   };
-}
-
-function renderAdditionalDescription(
-  additionalDescription: string,
-  image?: Picture,
-  version: BlockVersion = 'primary',
-) {
-  const descStyleMap: Record<BlockVersion, string> = {
-    primary: 'text-secondary-text',
-    secondary: 'text-white',
-  };
 
+function renderAdditionalDescription(additionalDescription: string, image?: Picture) {
   // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
   const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
   return (
-    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH} ${descStyleMap[version]}`}>
-      {additionalDescription}
-    </div>
+    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
+  );
+}
+
+function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
   );
 }

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -33,4 +33,6 @@ export type ProductTileContent = HeadlineProps &
     benefits?: TextBenefit[];
     /** @title Дополнительное описание */
     additionalDescription?: string;
+    /** @title Картинка справа/текст слева */
+    isImageOnRightSide?: boolean;
   };

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

@@ -1,8 +1,11 @@
 {
-  "title": "Вертикальный компоновщик",
-  "version": "transparent",
-  "align": "left",
-  "gap": "",
+  "content": {
+    "version": "transparent",
+    "isPadding": false,
+    "isInnerPadding": true,
+    "align": "left",
+    "gap": ""
+  },
   "blocks": [
     {
       "type": "Headline",

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -15,10 +15,10 @@ const alignStyle: Record<AlignType, string> = {
 };
 
 const gapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-10',
-  XL: 'gap-8',
-  L: 'gap-4',
-  M: 'gap-3',
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
   S: 'gap-2',
   XS: 'gap-1',
   '': '',
@@ -31,22 +31,37 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
-    <BlockWrapper
-      className={[
-        'flex flex-col',
-        gapStyleMap[gap],
-        align && alignStyle[align],
-        backgroundStyleMap[version],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      {...rest}
-    >
-      {renderChildren(rest)}
-    </BlockWrapper>
-  ),
+  ({
+    className = '',
+    gap = '',
+    align,
+    isPadding = false,
+    isInnerPadding = true,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+    const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
+
+    return (
+      <BlockWrapper
+        className={[
+          'flex flex-col [&>*]:max-w-full',
+          paddingStyle,
+          gapStyleMap[gap],
+          align && alignStyle[align],
+          backgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
+      </BlockWrapper>
+    );
+  },
 );
 
 VerticalLayout.childrenTypes = {

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -16,4 +16,8 @@ export interface VerticalLayoutContent {
   version?: BlockVersionWithTransparent;
   align?: AlignType;
   gap?: GapVersion;
+  /** @title Внутренний отступ компоновщика */
+  isPadding?: boolean;
+  /** @title Отступы вложенных компонентов */
+  isInnerPadding?: boolean;
 }

package/mobile/src/model/BlockVersion.ts

@@ -15,6 +15,11 @@ export const VersionStyleMap: Record<BlockVersion, string> = {
   secondary: 'bg-primary-main text-white',
 };
 
+export const VersionAdditionalStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
 export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent, string> = {
   transparent: '',
   primary: 'bg-white text-primary-text',

package/mobile/src/model/LogoType.ts

@@ -0,0 +1,6 @@
+import type { Picture } from './Picture';
+
+export type LogoType = {
+  image?: Picture;
+  title?: string;
+};