@redneckz/wildless-cms-uni-blocks 0.3.6 → 0.3.9

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

@@ -6,22 +6,17 @@ export const InputRange = JSX<InputRangeProps>(
   ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
     const handleChange = (value: string) => {
       if (!onChange) return;
-
       const sanitizedValue = Number(value.replace(/\D/g, ''));
       onChange(sanitizedValue);
     };
-
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
-
     const handleBlur = () => {
       if (!onChange) return;
-
       if (value < min) onChange(min);
       if (value > max) onChange(max);
     };
-
     return (
       <div className={className}>
         <label className="block relative">
@@ -32,14 +27,12 @@ export const InputRange = JSX<InputRangeProps>(
           ) : null}
           <input
             className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${
-                          title ? 'pt-4' : ''
-                        }`}
+                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${ title ? 'pt-4' : '' }`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 top-8 px-4">
+          <div className="absolute inset-x-0 top-[35px] px-4 leading-[18px]">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -54,9 +47,7 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4">
-              {item}
-            </span>
+            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4"> {item} </span>
           ))}
         </div>
       </div>

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

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
@@ -23,24 +22,23 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
       <input
         id="search-bar-input"
         className={
-          'h-12 pl-12 w-full peer font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
+          'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
         }
         value={term}
         onChange={(e) => setTerm(e.target.value)}
         type="text"
         name="search-bar-input"
+        placeholder="some search"
       />
-      <Button
-        version="primary"
-        text="Найти"
-        className="w-auto invisible peer-focus:visible absolute top-1 right-1"
+      <button
+        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer"
         onClick={(e) => {
           e.preventDefault();
-          console.log('click');
+          setTerm('');
         }}
       >
-        <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
-      </Button>
+        <Icon name="CloseIcon" width="24" height="24" />
+      </button>
     </form>
   );
 });

package/mobile/src/utils/getAccordionItems.ts

@@ -3,7 +3,7 @@ export const getAccordionItems = (items) =>
     label: item.text || '',
     blocks: [
       {
-        accordionBlockType: 'LinkDocs',
+        accordionBlockType: 'LinkList',
         documents: item.items || [],
       },
     ],

package/mobile/src/utils/getCurrentDate.ts

@@ -0,0 +1,3 @@
+export const getCurrentDate = () => {
+  return new Date().toJSON().slice(0, "YYYY-MM-DD".length);
+};

package/package.json

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

package/src/components/Accordion/Accordion.mobile.tsx

@@ -10,9 +10,7 @@ export const Accordion = JSX<AccordionProps>(
   ({ title, description, accordionItems, context, className = '', bordered }) => {
     return (
       <section
-        className={`py-6 font-sans bg-white text-primary-text ${
-          bordered ? 'px-4' : ''
-        } ${className}`}
+        className={`py-6 px-4 font-sans bg-white text-primary-text ${className}`}
       >
         {title ? <Heading headingType="h3" className="mb-2 text-center" title={title} /> : null}
         {description ? <div className="mb-5 text-m-md text-center">{description}</div> : null}

package/src/components/Accordion/AccordionBlocks.tsx

@@ -6,6 +6,7 @@ import { Tile } from '../Tile/Tile';
 import { ProductTile } from '../ProductTile/ProductTile';
 import { Gallery } from '../Gallery/Gallery';
 import { MiniGallery } from '../MiniGallery/MiniGallery';
+import { LinkList } from '../LinkList/LinkList';
 
 export const AccordionBlocks = {
   Headline,
@@ -16,4 +17,5 @@ export const AccordionBlocks = {
   ProductTile,
   Gallery,
   MiniGallery,
+  LinkList,
 };

package/src/components/Accordion/AccordionContent.ts

@@ -6,6 +6,7 @@ import type { PictureTextContent } from '../PictureText/PictureTextContent';
 import type { ProductTileContent } from '../ProductTile/ProductTileContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
 import type { TileContent } from '../Tile/TileContent';
+import type { LinkListContent } from '../LinkList/LinkListContent';
 
 /**
  * @title Тип блока
@@ -18,7 +19,8 @@ export type AccordionBlockType =
   | 'Tile'
   | 'ProductTile'
   | 'Gallery'
-  | 'MiniGallery';
+  | 'MiniGallery'
+  | 'LinkList';
 
 interface AccordionBlockDef {
   accordionBlockType: AccordionBlockType;
@@ -64,6 +66,11 @@ export type GalleryAccordionBlockDef = GalleryContent & AccordionBlockDef;
  */
 export type MiniGalleryAccordionBlockDef = MiniGalleryContent & AccordionBlockDef;
 
+/**
+ * @title Список ссылок
+ */
+export type LinkListAccordionBlockDef = LinkListContent & AccordionBlockDef;
+
 /**
  * @title Выберите блок
  */
@@ -81,7 +88,8 @@ export type AccordionBlockProps =
   | TileAccordionBlockDef
   | ProductTileAccordionBlockDef
   | GalleryAccordionBlockDef
-  | MiniGalleryAccordionBlockDef;
+  | MiniGalleryAccordionBlockDef
+  | LinkListAccordionBlockDef;
 
 /**
  * @title Элемент списка

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -16,22 +16,23 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
   return (
     <li
       className={`${
-        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0 py-[14px]'
+        bordered ? 'border p-4 rounded mb-4' : 'border-0 border-b last:border-b-0'
       } border-solid border-main-divider`}
     >
       <button
         className={`border-none bg-transparent flex justify-between text-left w-full font-sans text-primary-text
-        ${hasContent ? 'group cursor-pointer' : ''}`}
+          ${bordered ? '' : 'py-[14px] px-0'}
+          ${hasContent ? 'group cursor-pointer' : ''}`}
         onClick={handleToggle}
       >
         <span
-          className={`text-m-title-xs pr-2.5 font-medium ${
+          className={`text-sm pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
+        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -7,7 +7,7 @@ import type { AccordionItemProps } from './AccordionItem';
 
 export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
   return (
-    <div className={`transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 `}>
+    <div className="transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0">
       {blocks?.length ? blocks.map(renderBlock(context)) : null}
     </div>
   );
@@ -21,7 +21,7 @@ const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps
 
   const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
-    <div className="mb-5 last:mb-0 py-2.5" key={`block_${i}`}>
+    <div className="mb-5 last:mb-0" key={`block_${i}`}>
       <AccordionBlock context={context} {...block} className="!p-0" />
     </div>
   );

package/src/components/Accordion/utils/isActiveHandler.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../../icons/IconName';
 
 export const isActiveHandler = ({ context, blocks }) => {
   const [isActive, setIsActive] = context.useState(false);

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -9,7 +9,7 @@ export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps
 export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
   return (
     <section
-      className={`font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${
+      className={`font-sans text-primary-text bg-white p-12 flex flex-col items-center ${
         className || ''
       }`}
     >
@@ -17,7 +17,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
       ) : null}
       {benefits?.length ? (
-        <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
+        <div className="grid grid-cols-2 gap-8 mt-9">{benefits.map(renderStep)}</div>
       ) : null}
     </section>
   );
@@ -25,7 +25,7 @@ export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefi
 
 const renderStep = (benefit: Benefit, i: number) => {
   return (
-    <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
+    <div key={String(i)} className="flex items-center gap-5 max-w-[500px]">
       {benefit.icon && (
         <Icon
           className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]"

package/src/components/BlockContent.ts

@@ -17,6 +17,7 @@ import type { StepsBlockContent } from './StepsBlock/StepsBlockContent';
 import type { TariffsTableContent } from './TariffsTable/TariffsTableContent';
 import type { TextBlockContent } from './TextBlock/TextBlockContent';
 import type { TileContent } from './Tile/TileContent';
+import type { LinkListContent } from './LinkList/LinkListContent';
 
 /**
  * @hidden
@@ -40,4 +41,5 @@ export type BlockContent =
   | TariffsTableContent
   | TextBlockContent
   | TileContent
-  | NavigationContent;
+  | NavigationContent
+  | LinkListContent;

package/src/components/Blocks.mobile.ts

@@ -10,6 +10,7 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
+import { LinkList } from './LinkList/LinkList';
 
 export const Blocks = {
   Accordion,
@@ -24,4 +25,5 @@ export const Blocks = {
   ProductGallery,
   StepsBlock,
   TextBlock,
+  LinkList,
 };

package/src/components/ComparisonTable/TableCell.tsx

@@ -16,7 +16,7 @@ export const TableCell = JSX<TableCellProps>(({ cell, isFirstRow, isLastRow, isF
 
   const cellClasses = `mx-7 h-full ${DIVIDER_CLASSES} ${
     isFillGradient && isFirstRow ? 'border-t' : ''
-  } ${!isLastRow ? 'border-solid' : ''}`;
+  } ${!isLastRow ? 'border-solid' : 'border-b-0'}`;
 
   return (
     <div className={cellWrapperClasses} role="cell">

package/src/components/ComparisonTable/TableRow.tsx

@@ -20,7 +20,7 @@ export const TableRow = JSX<TableRowProps>(
       {header?.title ? (
         <div
           className={`text-sm py-7 ${DIVIDER_CLASSES} ${FIRST_CELL_CLASSES} ${
-            !isLastRow ? 'border-solid' : ''
+            !isLastRow ? 'border-solid' : 'border-b-0'
           }`}
         >
           {header.title}

package/src/components/ContentPage/ContentPageHead.tsx

@@ -7,13 +7,8 @@ export interface ContentPageHeadProps {
 }
 
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
-  const {
-    title,
-    main: { description, keywords, canonical, robots },
-    og,
-    twitter,
-    jsonLd,
-  } = data;
+  const { title, main, og, twitter, jsonLd } = data;
+  const { description, keywords, canonical, robots } = main || {};
   return (
     <HeadComponent>
       <title>{title}</title>
@@ -21,19 +16,27 @@ export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data,
       {description && <meta name="description" content={description} />}
       {keywords && <meta name="keywords" content={keywords.join(',')} />}
       {robots && <meta name="robots" content={robots.join(',')} />}
-      {og
-        ? Object.entries(og).map(([key, value]) => (
-            <meta key={key} name={`og:${key}`} content={value} />
-          ))
-        : null}
-      {twitter
-        ? Object.entries(twitter).map(([key, value]) => (
-            <meta key={key} name={`twitter:${key}`} content={value} />
-          ))
-        : null}
+      {renderOpenGraph(og)}
+      {renderTwitter(twitter)}
       {canonical && <link rel="canonical" href={canonical} />}
       {jsonLd && <script type="application/ld+json">{jsonLd}</script>}
       {children}
     </HeadComponent>
   );
 });
+
+function renderOpenGraph(og: Record<string, string> | undefined) {
+  return og
+    ? Object.entries(og).map(([key, value]) => (
+        <meta key={key} name={`og:${key}`} content={value} />
+      ))
+    : null;
+}
+
+function renderTwitter(twitter: Record<string, string> | undefined) {
+  return twitter
+    ? Object.entries(twitter).map(([key, value]) => (
+        <meta key={key} name={`twitter:${key}`} content={value} />
+      ))
+    : null;
+}

package/src/components/Footer/Contacts.tsx

@@ -19,7 +19,7 @@ export const Contacts = JSX<ContactsProps>(({ className, items, hasButton, conte
       {hasButton ? (
         <Button
           version="primary"
-          className="my-4"
+          className="mt-0.5 mb-5"
           {...useLink(
             { router, handlerDecorator },
             {
@@ -38,7 +38,7 @@ const renderContact = (item: ContactInfo, index: number) => {
   const { type, text, description } = item;
 
   return (
-    <div className="mb-4" key={String(index)}>
+    <div className="mb-3.5" key={String(index)}>
       <div>{renderText(type, text)}</div>
       <div className="font-sans text-sm text-secondary-text">{description}</div>
     </div>

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

@@ -35,7 +35,7 @@ export const Footer = JSX<FooterProps>(
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
-        <Accordion className="p-0 pt-0 pb-0 mb-4" {...propsTextBlock} />
+        <Accordion className="!p-0 mb-4" {...propsTextBlock} />
         <div>{subMenu?.map(renderSubMenuItem)}</div>
         <MobileAppTile
           context={context}
@@ -58,9 +58,9 @@ export const Footer = JSX<FooterProps>(
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
-    <Button key={`footer-${i}`} href={href} className="flex text-sm mb-4">
+    <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
-      <span className="pl-0.5 font-medium">{text}</span>
+      <span className="pl-2.5 font-medium text-primary-text">{text}</span>
     </Button>
   );
 };

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

@@ -17,7 +17,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
       <div className={className}>
         <span className="text-primary-text font-sans font-medium text-sm">{title}</span>
         {links?.length ? (
-          <div className="flex flex-col gap-5 py-5">
+          <div className="flex flex-col gap-2 pt-3">
             {links.map((_, i) => (
               <HorizontalNavigationLink
                 key={String(i)}

package/src/components/Footer/MediaButton.tsx

@@ -32,13 +32,15 @@ export const MediaButton = JSX<MediaButtonProps>(({ href }) => {
 
   return (
     <a
-      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:fill-primary-main"
+      className="flex items-center justify-center border border-solid border-main-divider rounded-full no-underline outline-none w-[38px] h-[38px] hover:text-primary-main"
       href={href}
       aria-label={label}
       target="_blank"
       rel="noopener noreferrer"
     >
-      {Icon && <Icon name={icon} width={width} height={height} asSVG className="block" />}
+      {Icon && (
+        <Icon name={icon} width={width} height={height} asSVG className="block" color="none" />
+      )}
     </a>
   );
 });

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

@@ -8,13 +8,13 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   const { handlerDecorator } = context;
   return (
     <div className={`${className || ''}`}>
-      <div className="pt-5 pb-[5px]">
+      <div className="py-6">
         <span className="font-sans font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
       {links?.length ? (
-        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
+        <div className={`flex flex-col justify-start items-start gap-2`}>
           {links.map((_, i) => (
             <TextInformationLink
               key={String(i)}

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

@@ -13,7 +13,11 @@
       "title": "Заголовок 1",
       "description": "Описание 1",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -26,7 +30,11 @@
       "title": "Заголовок 2",
       "description": "Описание 2",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -39,7 +47,11 @@
       "title": "Заголовок 3",
       "description": "Описание 3",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -52,7 +64,11 @@
       "title": "Заголовок 4",
       "description": "Описание 4",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     }
   ]
 }

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

@@ -19,6 +19,7 @@ const buttonPrimary: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
+  icon: 'BankIcon',
 };
 const link: ButtonCommonProps = {
   href: '/credit-cards',

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

@@ -21,6 +21,14 @@ const buttonPrimary: ButtonCommonProps = {
   version: 'secondary',
 };
 
+const buttonPrimaryIcon: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: 'BankIcon',
+};
+
 const defaultItems = [
   { text: 'Качественные фермерские продукты напрямую от производителей' },
   { text: 'Самая большая база сельских туров по России' },
@@ -45,7 +53,7 @@ export const defaultProps: GalleryProps = {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
       image,
-      button: buttonPrimary,
+      button: buttonPrimaryIcon,
       items: defaultItems,
     },
     {

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

@@ -7,6 +7,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import { Icon } from '../../ui-kit/Icon/Icon';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -44,7 +45,6 @@ function renderCard(card: GalleryCard, key: number) {
     <div
       className={`box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
       ${blockStyle[card.version ?? 'primary']}`}
-      role="listitem"
       key={key}
     >
       <div>
@@ -57,11 +57,21 @@ function renderCard(card: GalleryCard, key: number) {
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card?.button?.href ? <Button className="mt-3" {...card.button} /> : null}
+      {card?.button?.href ? renderButton(card.button) : null}
     </div>
   );
 }
 
+function renderButton(button) {
+  return (
+    <Button
+      className="mt-3"
+      appendLeft={button?.icon && <Icon name={button?.icon} width="24px" height="24px" asSVG />}
+      {...button}
+    />
+  );
+}
+
 function renderDescription(card: GalleryCard) {
   return (
     <div
@@ -77,8 +87,8 @@ function renderDescription(card: GalleryCard) {
 function renderItems(items: GalleryItem[]) {
   return (
     <section className="mt-3">
-      {items.map((item) => (
-        <div>
+      {items.map((item, i) => (
+        <div key={String(i)}>
           <span className="text-m-md font-medium">{item.title}</span>
           <span className="text-m-sm text-secondary-text pl-2">{item.text}</span>
         </div>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import type { GalleryCard } from './GalleryContent';
 
@@ -22,12 +23,22 @@ export const GalleryCardInner = JSX<GalleryCard>(
           ) : null}
           {items?.length ? renderItems(items, version) : null}
         </div>
-        {button?.text && <Button className="mt-6" {...button} />}
+        {button?.text ? renderButton(button) : null}
       </div>
     );
   },
 );
 
+function renderButton(button) {
+  return (
+    <Button
+      className="mt-6 w-full"
+      appendLeft={button.icon && <Icon name={button.icon} width="24px" height="24px" asSVG />}
+      {...button}
+    />
+  );
+}
+
 function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }

package/src/components/Gallery/GalleryInner.tsx

@@ -38,19 +38,20 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         />
         {showPrevButton && (
           <ArrowButton
-            className="absolute top-1/2 left-8 rotate-180"
+            className="absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]"
             onClick={handlePrevClick}
             ariaLabel="Пролистать влево"
           />
         )}
         {showNextButton && (
           <ArrowButton
-            className="absolute top-1/2 right-1 z-10"
+            className="absolute top-1/2 right-8 z-10 mt-[25px]"
             onClick={handleNextClick}
             ariaLabel="Пролистать вправо"
           />
         )}
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" />
+        <div className="absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" />
       </section>
     );
   },