@redneckz/wildless-cms-uni-blocks 0.5.14 → 0.6.15

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useExchangeRates } from '../../hooks/useExchangeRates';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -30,8 +30,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`bg-white text-primary-text font-sans p-9 box-border min-h-[320px] 
-          ${className}`}
+        className={`bg-white text-primary-text font-sans p-9 box-border min-h-[320px] ${className}`}
         {...rest}
       >
         <BaseTile

package/src/components/Footer/Contacts.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { Button } from '../../ui-kit/Button/Button';
 import type { ContactInfo } from './FooterContent';
 

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

@@ -1,12 +1,12 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { useSitemap } from '../../services/sitemap/useSitemap';
 import { Button } from '../../ui-kit/Button/Button';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { AccordionItem } from '../Accordion/AccordionItem';
 import { AccordionItemsList } from '../Accordion/AccordionItemsList';
+import { AccordionItem } from '../AccordionItem/AccordionItem';
 import { LinkList } from '../LinkList/LinkList';
 import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
 import { Contacts } from './Contacts';

package/src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';

package/src/components/Footer/FooterLink.ts

@@ -1,4 +1,4 @@
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 
 export interface FooterLink extends UniBlockProps {

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 

package/src/components/Footer/HorizontalNavigation.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { TitleProps } from '../../model/HeadlineType';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 

package/src/components/Footer/Sitemap.tsx

@@ -1,17 +1,25 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { Fallback } from '../../model/Fallback';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { mergeTopItems } from '../../services/sitemap/mergeTopItems';
 import type { TopMenuItem } from '../../services/sitemap/SitemapProps';
 import { useSitemap } from '../../services/sitemap/useSitemap';
-import type { Fallback } from '../../model/Fallback';
+import type { HandlerDecorator, Router } from '../ContentPage/ContentPageContext';
 
 export interface SitemapProps extends UniBlockProps {
   items?: TopMenuItem[];
   fallback?: Fallback;
 }
 
+interface RenderColumnProps {
+  menuItem: TopMenuItem;
+  index: number;
+  router: Router;
+  handlerDecorator?: HandlerDecorator;
+}
+
 export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, context }) => {
   const sitemap = useSitemap(fallback);
   const mergedItems = mergeTopItems(sitemap.topItems, items);
@@ -22,13 +30,13 @@ export const Sitemap = JSX<SitemapProps>(({ className = '', items, fallback, con
 
   return (
     <div className={`flex flex-grow items-start justify-between gap-[54px] xl:gap-5 ${className}`}>
-      {mergedItems?.map((_, i) => renderColumn(_, i, linkParams))}
+      {mergedItems?.map((_, i) => renderColumn({ menuItem: _, index: i, ...linkParams }))}
     </div>
   );
 });
 
-const renderColumn = (c: TopMenuItem, index: number, { router, handlerDecorator }) => {
-  const { text, href, items, target } = c;
+const renderColumn = ({ menuItem, index, router, handlerDecorator }: RenderColumnProps) => {
+  const { text, href, items, target } = menuItem;
 
   return (
     <div key={String(index)} className="flex flex-col w-1/5 last:w-1/4 gap-3.5">

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 

package/src/components/Footer/SocialMedia.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { MediaButton } from './MediaButton';
 

package/src/components/Gallery/Gallery.example.json

@@ -4,7 +4,7 @@
   "orientation": "horizontal",
   "cards": [
     {
-      "image": {
+      "icon": {
         "format": "webp",
         "size": {
           "width": 150,
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "image": {
+      "icon": {
         "format": "webp",
         "size": {
           "width": 140,

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

@@ -32,19 +32,19 @@ const defaultItems = [
 
 const cards: GalleryCardProps[] = [
   {
-    image,
+    icon: image,
     title: 'Вклады в любой валюте',
     description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
     button: link,
   },
   {
-    image,
+    icon: image,
     title: 'Вклады в любой валюте',
     description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
     version: 'secondary',
   },
   {
-    image,
+    icon: image,
     title: 'Вклады в любой валюте',
     isDotted,
     items: defaultItems,

package/src/components/Gallery/Gallery.fixture.tsx

@@ -46,7 +46,7 @@ export const defaultProps: GalleryProps = {
       title: 'Более 5000 товаров',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
@@ -55,7 +55,7 @@ export const defaultProps: GalleryProps = {
     {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      image,
+      icon: image,
       button: buttonPrimaryIcon,
       isDotted,
       items: defaultItems,
@@ -63,7 +63,7 @@ export const defaultProps: GalleryProps = {
     {
       title: 'Фермерские продукты',
       description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
@@ -72,7 +72,7 @@ export const defaultProps: GalleryProps = {
       title: '«Моя выгода»',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
@@ -89,26 +89,26 @@ const textAndButtonProps: GalleryProps = {
       title: 'Более 5000 товаров',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
       button: buttonPrimary,
     },
     {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      image,
+      icon: image,
       button: buttonPrimary,
     },
     {
       title: 'Фермерские продукты',
       description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
+      icon: image,
       button: buttonPrimary,
     },
     {
       title: '«Моя выгода»',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
       button: buttonPrimary,
     },
   ],
@@ -121,28 +121,28 @@ const listAndButtonProps: GalleryProps = {
   cards: [
     {
       title: 'Более 5000 товаров',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
     },
     {
       title: 'Более 1000 развлечений',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
     },
     {
       title: 'Фермерские продукты',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
     },
     {
       title: '«Моя выгода»',
-      image,
+      icon: image,
       button: buttonPrimary,
       isDotted,
       items: defaultItems,
@@ -159,49 +159,45 @@ const textAndNoButtonProps: GalleryProps = {
       title: 'Более 5000 товаров',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
     },
     {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
-      image,
+      icon: image,
     },
     {
       title: 'Фермерские продукты',
       description: 'Высокий процент даже при небольшой сумме денежных средств',
-      image,
+      icon: image,
     },
     {
       title: '«Моя выгода»',
       description:
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
-      image,
+      icon: image,
     },
   ],
 };
 
 const onlyTitleProps: GalleryProps = {
   title: 'Вы можете оплатить бонусными баллами',
-  description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
   context,
   cards: [
     {
       title: 'Более 5000 товаров',
-      image,
+      icon: { icon: 'PercentageRoundIcon' },
     },
     {
       title: 'Более 1000 развлечений',
-      image,
+      icon: { icon: 'InterestIcon' },
     },
     {
       title: 'Фермерские продукты',
-      image,
-    },
-    {
-      title: '«Моя выгода»',
-      image,
+      icon: { icon: 'WalletIcon' },
     },
   ],
+  button: buttonPrimary,
 };
 
 export default {

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

@@ -3,12 +3,15 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import { VersionStyleMap } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { ListItemVersion } from '../../ui-kit/List/ListProps';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import { Picture } from '../../model/Picture';
 
 export const Gallery = JSX<GalleryProps>(
   ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
@@ -32,7 +35,11 @@ export const Gallery = JSX<GalleryProps>(
   },
 );
 
-function renderCardsLayout(orientation: ListOrientation, cards: GalleryCardProps[], context) {
+function renderCardsLayout(
+  orientation: ListOrientation,
+  cards: GalleryCardProps[],
+  context: ContentPageContext,
+) {
   return orientation === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
@@ -48,11 +55,7 @@ function renderCard(card: GalleryCardProps, key: number) {
       key={key}
     >
       <div>
-        {card.image?.src ? (
-          <div className="flex justify-center">
-            <Img className="mb-3.5" image={card.image} />
-          </div>
-        ) : null}
+        {renderImage(card.icon)}
         {card.title ? <h3 className={`text-m-title-xs font-medium m-0`}>{card.title}</h3> : null}
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items, card.isDotted, card.version) : null}
@@ -62,14 +65,15 @@ function renderCard(card: GalleryCardProps, key: number) {
   );
 }
 
-function renderButton(button) {
-  return (
-    <Button
-      className="mt-3"
-      appendLeft={button?.icon && <Img image={button?.icon} width="24px" height="24px" asSVG />}
-      {...button}
-    />
-  );
+const renderImage = (image?: Picture) =>
+  image?.src || image?.icon ? (
+    <div className="flex justify-center">
+      <Img className="mb-3.5" image={image} />
+    </div>
+  ) : null;
+
+function renderButton(button?: ButtonWithIconProps) {
+  return <Button className="mt-3" {...button} />;
 }
 
 function renderDescription(card: GalleryCardProps) {
@@ -90,7 +94,11 @@ const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   gray: 'bg-secondary-text',
 };
 
-function renderItems(items: GalleryItemProps[], isDotted, version: BlockVersion = 'primary') {
+function renderItems(
+  items: GalleryItemProps[],
+  isDotted?: boolean,
+  version: BlockVersion = 'primary',
+) {
   return (
     <section className="mt-3">
       {items.map((item, i) => (

package/src/components/Gallery/Gallery.ui.json

@@ -1 +1,11 @@
-{}
+{
+  "content": {
+    "cards": {
+      "items": {
+        "additionalDescription": {
+          "ui:field": "hidden"
+        }
+      }
+    }
+  }
+}

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,27 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { AlignType } from '../../model/AlignType';
+import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
-const ALIGN_TITLE: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
 export const GalleryCardInner = JSX<GalleryCardProps>(
   ({
     title,
-    headlineSmallVersion = 'XL_L',
+    headlineSmallVersion = 'H6',
     description,
     additionalDescription,
-    image,
+    icon,
     items,
     button,
     version,
@@ -29,42 +22,40 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
     align = 'center',
   }) => {
     return (
-      <div className={`h-full flex flex-col justify-between ${ALIGN_TITLE[align]}`}>
+      <div className={`h-full flex flex-col justify-between ${AlignText[align]}`}>
         <div className="flex flex-col h-full">
-          {renderImage(image)}
+          {renderImage(icon)}
           {renderCardTitle(headlineSmallVersion, title)}
           {renderDescription(description, title)}
-          {renderAdditionalDescription(additionalDescription)}
           {items?.length ? renderItems(items, isDotted, version) : null}
+          {renderAdditionalDescription(additionalDescription)}
         </div>
-        {button ? renderButton(button) : null}
+        {button?.text ? <Button className="mt-6" {...button} /> : null}
       </div>
     );
   },
 );
 
-const renderImage = (image?: Picture) =>
-  image?.src ? (
-    <div className="flex justify-center">
-      <Img className="mb-6" image={image} />
-    </div>
-  ) : null;
+const renderImage = (image?: Picture) => (
+  <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={image} asSVG />
+    ) : null}
+  </div>
+);
 
 const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
   title ? <div className={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</div> : null;
 
 const renderDescription = (description?: string, title?: string) =>
-  description ? <div className={`text-base ${title ? 'mt-2' : ''}`}>{description}</div> : null;
+  description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
 const renderAdditionalDescription = (additionalDescription?: string) =>
   additionalDescription ? (
     <div className="text-m-light text-secondary-text mt-auto">{additionalDescription}</div>
   ) : null;
 
-const renderButton = (button: ButtonWithIconProps) => (
-  <Button className="mt-6 w-full" {...button} />
-);
-
 const renderItems = (
   items: GalleryItemProps[],
   isDotted: boolean,
@@ -72,7 +63,7 @@ const renderItems = (
 ) => (
   <List
     className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
-    itemClassName="mt-1 text-left first:mt-0"
+    itemClassName="text-left"
     items={items.filter((item) => item?.text).map((item) => item.text as string)}
     isDotted={isDotted}
     version={version}

package/src/components/Gallery/GalleryContainer.tsx

@@ -22,7 +22,7 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
   ({
     context,
     title,
-    headlineVersion = 'L',
+    headlineVersion = 'M',
     description,
     cards = [],
     version = 'normal',
@@ -30,7 +30,6 @@ export const GalleryContainer = JSX<GalleryContainerProps>(
   }) => {
     return (
       <div>
-        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent" />
         <Headline
           context={context}
           className="!p-0"

package/src/components/Gallery/GalleryContent.ts

@@ -20,6 +20,7 @@ export interface GalleryItemProps {
  * @default {"headlineSmallVersion": "XL_L"}
  */
 export type GalleryCardProps = HeadlineSmallProps & {
+  /** @title Дополнительное описание */
   additionalDescription?: string;
   /**
    * @default {
@@ -35,7 +36,7 @@ export type GalleryCardProps = HeadlineSmallProps & {
    *   }]
    * }
    */
-  image?: Picture;
+  icon?: Picture;
   /** @title Кнопка */
   button?: ButtonWithIconProps;
   /**
@@ -64,4 +65,5 @@ export type GalleryContent = HeadlineProps & {
   cards?: GalleryCardProps[];
   /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
   orientation?: ListOrientation; //TODO: for mobile
+  button?: ButtonWithIconProps;
 };

package/src/components/Gallery/GalleryInner.tsx

@@ -1,19 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useState } from '@redneckz/uni-jsx/lib/hooks';
-import type { UniBlockProps } from '../../model/ContentPageDef';
 import type { GalleryVersion } from '../../model/GalleryVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
 import type { GalleryContent } from './GalleryContent';
+import { Button } from '../../ui-kit/Button/Button';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
+  ({ context, cards = [], className = '', version = 'normal', button, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -30,7 +31,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`}
+        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
         <GalleryContainer
@@ -46,8 +47,14 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           btnClass: ['left-8', 'right-8'],
           className: 'top-1/2',
         })}
-        <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
-        <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
+        {isGalleryScrollAvailable ? (
+          <div>
+            <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
+            <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
+          </div>
+        ) : null}
+
+        {button ? <Button className="mt-8 mx-auto" {...button} /> : null}
       </BlockWrapper>
     );
   },

package/src/components/Gallery/GalleryProps.ts

@@ -1,4 +1,4 @@
-import type { UniBlockProps } from '../../model/ContentPageDef';
+import type { UniBlockProps } from '../../model/JSXBlock';
 import type { GalleryContent } from './GalleryContent';
 
 export interface GalleryProps extends GalleryContent, UniBlockProps {}