@redneckz/wildless-cms-uni-blocks 0.3.12 → 0.3.15

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

@@ -8,7 +8,7 @@ export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
   align: 'center',
-  bgColor: 'transparent',
+  bgColorHeadline: 'transparent',
 };
 
 const image: Picture = {
@@ -20,47 +20,71 @@ const image: Picture = {
   },
 };
 
+const defaultProps: HeadlineContent = {
+  title: 'Копите в нескольких валютах',
+  description:
+    'Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада',
+  image: image,
+};
+
+const primaryProps: HeadlineContent = {
+  ...defaultProps,
+  bgColorHeadline: 'primary',
+};
+
+const secondaryProps: HeadlineContent = {
+  ...defaultProps,
+  bgColorHeadline: 'secondary',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Headline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        image={image}
-      />
+      <Headline className="col-span-12" context={context} {...defaultProps} align="left" />
+      <Headline className="col-span-12" context={context} {...defaultProps} align="center" />
+      <Headline className="col-span-12" context={context} {...defaultProps} align="right" />
     </div>
   ),
-  'title-img': (
+
+  primary: (
     <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...primaryProps} align="left" />
+      <Headline className="col-span-12" context={context} {...primaryProps} align="center" />
+      <Headline className="col-span-12" context={context} {...primaryProps} align="right" />
       <Headline
         className="col-span-12"
         context={context}
         title="Копите в нескольких валютах"
         image={image}
+        bgColorHeadline="primary"
       />
-    </div>
-  ),
-  'desc-img': (
-    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
         description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
         image={image}
+        bgColorHeadline="primary"
       />
     </div>
   ),
-  white: (
+  secondary: (
     <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...secondaryProps} align="left" />
+      <Headline className="col-span-12" context={context} {...secondaryProps} align="center" />
+      <Headline className="col-span-12" context={context} {...secondaryProps} align="right" />
       <Headline
         className="col-span-12"
         context={context}
         title="Копите в нескольких валютах"
+        image={image}
+        bgColorHeadline="secondary"
+      />
+      <Headline
+        className="col-span-12"
+        context={context}
         description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        bgColor="bg-white"
         image={image}
+        bgColorHeadline="secondary"
       />
     </div>
   ),

package/src/components/Headline/Headline.fixture.tsx

@@ -7,35 +7,38 @@ export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
   description: 'Карта работает в 180 странах мира. Бесплатное снятие наличных в любых банкоматах.',
   align: 'center',
-  bgColor: 'transparent',
+};
+
+export const HEADLINE_PRIMARY: HeadlineContent = {
+  ...HEADLINE,
+  bgColorHeadline: 'primary',
+};
+
+export const HEADLINE_SECONDARY: HeadlineContent = {
+  ...HEADLINE,
+  bgColorHeadline: 'secondary',
 };
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE} />
+      <Headline className="col-span-12" context={context} {...HEADLINE} align="left" />
+      <Headline className="col-span-12" context={context} {...HEADLINE} align="right" />
     </div>
   ),
-  'left white': (
+  primary: (
     <div className="container grid grid-cols-12">
-      <Headline
-        className="col-span-12"
-        context={context}
-        {...HEADLINE}
-        align="left"
-        bgColor="bg-white"
-      />
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="left" />
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="right" />
     </div>
   ),
-  'right transparent': (
+  secondary: (
     <div className="container grid grid-cols-12">
-      <Headline
-        className="col-span-12"
-        context={context}
-        {...HEADLINE}
-        align="right"
-        bgColor="transparent"
-      />
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="left" />
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="right" />
     </div>
   ),
 };

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

@@ -3,17 +3,33 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', className = '', title, description, image }) => {
+  ({
+    bgColorHeadline = 'transparent',
+    className = '',
+    title,
+    description,
+    image,
+    align = 'left',
+  }) => {
     return (
-      <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && <Heading headingType="h2" className="text-primary-text" title={title} />}
+      <section className={`px-4 py-6 ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
+        {title && (
+          <Heading
+            headingType="h2"
+            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            title={title}
+          />
+        )}
         {description && (
-          <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
+          <p className={`font-normal text-m-md ${ALIGN_TEXT[align]} ${title ? 'mt-2.5' : ''}`}>
+            {description}
+          </p>
         )}
         {image?.src && (
           <div className="mt-5 mx-auto flex justify-center">

package/src/components/Headline/Headline.tsx

@@ -2,27 +2,24 @@ import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
-import { AlignType } from '../BaseTile/BaseTileProps';
+import { ALIGN_TEXT, BACKGROUND_COLOR } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
-const alignText: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
 export const Headline = JSX<HeadlineProps>(
-  ({ bgColor = 'transparent', align = 'left', className = '', title, description }) => {
-    const textClasses = alignText[align];
+  ({ bgColorHeadline = 'transparent', align = 'left', className = '', title, description }) => {
     return (
-      <section className={`p-[50px] ${bgColor} ${className}`}>
+      <section className={`p-[50px] ${BACKGROUND_COLOR[bgColorHeadline]} ${className}`}>
         {title && (
-          <Heading headingType="h2" className={`text-primary-text ${textClasses}`} title={title} />
+          <Heading
+            headingType="h2"
+            className={`text-primary-text ${ALIGN_TEXT[align]}`}
+            title={title}
+          />
         )}
         {description && (
-          <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
+          <p className={`font-normal text-base mt-4 ${ALIGN_TEXT[align]}`}>{description}</p>
         )}
       </section>
     );

package/src/components/Headline/HeadlineContent.ts

@@ -1,4 +1,4 @@
-import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
 import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -11,6 +11,5 @@ export type HeadlineContent = HeadingContent &
   DescriptionContent &
   ImageContent & {
     align?: AlignType;
-    // TODO: image for mobile
-    bgColor?: BgColorVersion;
+    bgColorHeadline?: BlockVersionWithTransparent;
   };

package/src/components/Headline/constants.ts

@@ -0,0 +1,14 @@
+import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+
+export const ALIGN_TEXT: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+export const BACKGROUND_COLOR: Record<BlockVersionWithTransparent, string> = {
+  transparent: 'bg-transparent',
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -2,8 +2,10 @@ import { context } from '../../setup-fixture';
 
 import { LikeControl } from './LikeControl';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <LikeControl className="col-span-12" context={context} />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <LikeControl className="col-span-12" context={context} />
+    </div>
+  ),
+};

package/src/components/LinkList/LinkList.fixture.tsx

@@ -1,13 +1,11 @@
 import { mobileContext } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkListContentExample';
 import { LinkList } from './LinkList';
+import { linkDocsContentExample } from './linkListContentExample';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <LinkList
-      className="col-span-12"
-      context={mobileContext}
-      {...linkDocsContentExample}
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <LinkList className="col-span-12" context={mobileContext} {...linkDocsContentExample} />
+    </div>
+  ),
+};

package/src/components/MiniGallery/MiniGallery.example.json

@@ -11,7 +11,8 @@
         }
       },
       "title": "Заголовок 1",
-      "description": "Описание 1"
+      "description": "Описание 1",
+      "version": "primary"
     },
     {
       "image": {
@@ -22,7 +23,8 @@
         }
       },
       "title": "Заголовок 2",
-      "description": "Описание 2"
+      "description": "Описание 2",
+      "version": "primary"
     },
     {
       "image": {
@@ -33,7 +35,8 @@
         }
       },
       "title": "Заголовок 3",
-      "description": "Описание 3"
+      "description": "Описание 3",
+      "version": "primary"
     },
     {
       "image": {
@@ -44,7 +47,8 @@
         }
       },
       "title": "Заголовок 4",
-      "description": "Описание 4"
+      "description": "Описание 4",
+      "version": "primary"
     }
   ]
 }

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

@@ -2,12 +2,14 @@ import { context } from '../../setup-fixture';
 
 import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <MobileAppTileMobile
-      context={context}
-      title="Мобильное приложение!"
-      description="Загрузить для IOS и Android"
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <MobileAppTileMobile
+        context={context}
+        title="Мобильное приложение!"
+        description="Загрузить для IOS и Android"
+      />
+    </div>
+  ),
+};

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -2,33 +2,35 @@ import { context } from '../../setup-fixture';
 
 import { MobileAppTile } from './MobileAppTile';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <MobileAppTile
-      context={context}
-      className="col-span-4"
-      qr={{
-        href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
-        src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAACkCAYAAAAZtYVBAAAAAXNSR0IArs4c6QAACp1JREFUeF7tndtuKzkMBJ3//+gssG8aA1MoNDXWcTqvlCiqWSI1vuXn9/f399W/KnCIAj8F8pBMNIz/FSiQBeEoBQrkUeloMAWyDBylQIE8Kh0NpkCWgaMUKJBHpaPBFMgycJQCBfKodDSYAlkGjlKgQB6VjgZTIMvAUQoUyKPS0WAKZBk4SoECeVQ6GkwM5M/Pz6Mq2o9vUnxXf9fxtB75T8U5Pb7r/kgv0qNAXj6fXCAJmXt7gQT9qIKdXoFOj68VUn7jokCefaW6Aj3estOS/Rbg5Y5q/adAUgOjeNIrQOrfrk/7nc5PgbwoQC2REpQCkyaYgCM77Y/s0/5bIeGhhhJSINcrAelBehbIAkmM3Nr/uQpJdzh6SqMNk386sbvnU7bpymDt9gpA+0/zQ/t//A65e8Pkv0Det1TSr0DKF6pJ0AJZIJdDRcCkJ5D8F8gC+VEgCcD0jkV3Ojpg9k5l47Xj6UDTfuiOb/e7/Sl794ZTQWi+tVMCbYIsYHb87vzY/RZIeCeoQK5IUYewHerrn7KtIBY4SkgrZPbrjl9XIalFpEClAFNLTeOn/ZF9en3y9/UVkgSwCaHx1l4g7zPUCgmfeLfAUQUtkAVyUYAAozsgAUf2AvlhIKmFkp0STPbdAFD89gDYA2HH24c+2p/VH/2lvzE+HRABRAkmwadfdyOBKd7p+bQe6UPx2PxofwXyXjJKMAn+9Hxar0BSxsBOFZjsdKIpPErwafMp3j8HJCUotVvBCdi/Zk/1p/kp8OMv+1DAqb1Aru+E2AOV6k/zC+Twe9HfDjwBldoLZIFcGKIDlQJH8z8OJAW4225fxqF4bELjBAz/NlIaD+mz2x7fIXcHSP4L5KpQgSRiNtsLZIHcjJhzXyAL5KLA0y872JZEwNKdMbVfj1ca/3Q87vi/XjZ+6z++QxbI+9cFC6RDskCG3wOnilUgC+TtlYIAsRW/QDrgaPR4haQFUyCu8y1AFJ+9I02vT/GRfqQPzZ++c9v9FMiLYgXy/hd3qSNY/d4O0PTnIe2JSDc4XaGsoNPrp/q1QoZvfRVIi6B73TFtwbbF2wM9XiGtnFRR6ISnG0792wQ/rQ+tZwuAzRetT/b4DkkLTANQIFdF6YCkFa5AXhTcLYj1TwCkB2Y6ngIJJTMVPE34dMWmhD/dQWi9tmxZ8aaBpYpGQNF8m2B7IGh9AjDdH/kfLxDpyz4UcJoA2jABbBNKgNkEPx0/5cPuz/qj8WQ/7qGGAEsBJ0Fswmh8gSTFLw9prZCrIARYK+S9Xg6/99HbKyRVvNROFdMKRBXN+rPjSQ/yR/OnrzDTehXIS4anBSaA6EDZeAokKG4FopZJCbIVgFqwBSodT3qRf5pv9UnzQfG+Hcjdd0grUCqAFbxA3iOT5uM4IKklWSAIOKqgNh4r6PR+yJ898E/7s/ptv0NaAAioAjn72z62Ak7r/3jLLpD3/yaDEvx0RZuuuK2Qly9tkSAWCPJHANkDSv6mAZr2Z/Xa3rLtBne3EIqHgLFXCtqPTdi0P1qf1iM9yP/jLZsAmLanFaVArgoUyPB70gXS1qQ/9rLPdAWkE1sg/ziQ9qFg+s4xK//rRQfItnTyR/rRASQ7HVDaj52f5iN+qCFBn95QLAj8Ii8lkAAhO+k1DTjth+JJ9R5/qCmQ6xfrCTiyEwAFEo5AgSyQk1VyvGVTBZi2WzGowlALozsw+Se7XZ8KAulN+qX7Jf/bWzYJMG3XGx6+I6YApQkvkJcM0InfbS+Q2Y9DkX7pgSH/rZCtkIqRfw5I27JIDaqo0+uRv91PvdZ/Oj6db69clO/xCkkJpROWzrcAk0DpnYwSRuvb+XZ8gQw/DkZAF0j3o/sFskBSUVzstuLZ8QUSPr2jsvXi/5NCLZcSQvHYivz0eNof6WMBpw5Gen78DkmC0AZIAOuf/D19x00BLpAXBUhQCwwJTMCkgJN/Apr0mPZPepH+rZBEzMVuASD35G8aGFovBbhADldIShgBQgBau60YBATFn+4/jTfVx84//g6ZJiQVhICilkfzC+R9huJP+1iBKaEF8v573NN6pwfY5ovWK5CgUNoCKWH2zlggIWFU8WwL2y34bsCwAsA/mrLxEfCpnrvjGb9DFkhCcLWTXrsBoIps7WnBKZDhO0e2IlGFooRagOl4WOB2H5ACWSAXBgg4stOBogPyOJBUUT5dAaxglADaT7qenU/6k7+0opL/Ahn+99oC6X6fskDCVxSmK5htaTZB6fhWyIuCJAgBQvPpoWE3MLv9F0ipgL1jkHtKMNmppdL6dj8UDx0oOpAU7/R+d69H/uN3amwCKSCbYEooAZFWWBsvrUf6kD3dL/lPDwD5L5AXhewBK5DuvfcCOfydnhTYVsh7JLdXyDQB1IIsINRy6ApAJ5zipfm0vq3I5I/iIb3sfBpfIMN3bqYTRgAVSECaKlQrJNWE1V4gwx5TIFegQjnfflKaKjDpT4C748JfQ7b+3gpW+s83SRAbIAlILYvWI2BoP7vtaUeh/ZOd9KH47PwCCU/du4Ej/5RwAiq1W6Dsfii+xx9qMKDhT1RTyyMAqCJP2yke0i+1F8iLgm3Z7iEnBdAeWDowFujxlj0tiPWXtgyab+02fgLCrm+BSP3TfKtH3LLtgtPjU0FovrWn+9t9BbAVzu7fHohWSLgipEAUyOy97VZI+YFeArZAfhhIeghJE0R3LNuCpsdTfLblpXrRgUnttN80/rhCFsg1BdMJtwlO16f5BfKiAF2aqSK1QrovaVHBoXzYA9UKGf7fGqoYdEAo4TahVOFSO+3Xxjv+lE2CxwFufuigBKXxpxXEAmvXS/1P53+8QlpBKOG0YWunE24TRPGneth47Hqpf9Kf9GmFhDupTRAJbgGhO+70ena/1FHi/Z728TNKiBWEBCd/BADZ4wTJX9qw65E+tqPY9R+vkLs3TC1j2j4NIOlDCab5FC/Z7YGleGm97XdIKxgJ8Gk7CWoTQvqQP5pP8ZKd9KYKSv5bIeFLXTYBaUIIqAIpkbYtkdwTEJ+22/hpfIFcFfrzLXsaGDqgdr3pA2gfGtN4aX5bdvhLFtSiC+Rhn/ahE00nhuZP2yke21ILZIFcmLLAFsifW/2sPvQQhv52vzBOFSZtgeQ/Fki+l273Q+MxgfKFc7teWvEp/q+/Q1rBSTBKiD0QdryNj8ZbfWj/dj0a/3VP2VZwFKgVMmrppG8rpFSIKoSteHY8hUv+aD5daWj/5N/at1dIG9DbiQk/QEuC03o2fvtQRUCRv7Qj0Pqpf6tfgbwoZhNECaMKQ+sVSIk0CS7dvQ23/u34Vsj1ZR/Kl+045O/xO6QNiAAhQQqke2GaKjR1gDS/24GcDpAEIQBTuz0gtJ7Vh/yR3cZP8dn1yF+BlB8/swmdThj5I7uNnwCy65G/AlkgFwboCjQNNAE6/pRNC6Z2euqcttuETFcQ8kd2Gz/lx65H/sYrpF2w46vAnQJxhay8VWBSgQI5qWZ9xQoUyFjCOphUoEBOqllfsQIFMpawDiYVKJCTatZXrECBjCWsg0kFCuSkmvUVK1AgYwnrYFKBAjmpZn3FChTIWMI6mFSgQE6qWV+xAgUylrAOJhUokJNq1lesQIGMJayDSQX+AzMMbwXyi0XeAAAAAElFTkSuQmCC',
-      }}
-      buttons={[
-        {
-          aboveText: 'Загрузите в',
-          text: 'App Store',
-          icon: 'AppleIcon',
-          href: '#',
-          asSVG: true,
-          version: 'secondary',
-        },
-        {
-          aboveText: 'Доступно в',
-          text: 'Google Play',
-          icon: 'PlayMarketIcon',
-          href: '#',
-          asSVG: true,
-          version: 'secondary',
-        },
-      ]}
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-4"
+        qr={{
+          href: 'https://rshbnaturaldbo.onelink.me/qhkF/f182074f?af_qr=true',
+          src: 'data:image/png;base64,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',
+        }}
+        buttons={[
+          {
+            aboveText: 'Загрузите в',
+            text: 'App Store',
+            icon: 'AppleIcon',
+            href: '#',
+            asSVG: true,
+            version: 'secondary',
+          },
+          {
+            aboveText: 'Доступно в',
+            text: 'Google Play',
+            icon: 'PlayMarketIcon',
+            href: '#',
+            asSVG: true,
+            version: 'secondary',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/MobileAppTile/MobileAppTile.tsx

@@ -37,7 +37,7 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
         >
           <div className="flex items-center">
             {qr?.src && qr?.href && (
-              <a href={qr.href} target="_blank">
+              <a href={qr.href} target="_blank" aria-label={title}>
                 <img
                   src={qr.src}
                   alt={title}

package/src/components/Navigation/Navigation.fixture.tsx

@@ -2,27 +2,29 @@ import { context } from '../../setup-fixture';
 
 import { Navigation } from './Navigation';
 
-export default () => (
-  <Navigation
-    title="Потребительский кредит наличными"
-    buttons={[
-      {
-        href: '/credits',
-        text: 'Оформить',
-      },
-      {
-        href: '/tariffs',
-        text: 'Тарифы',
-      },
-      {
-        href: '/harvest',
-        text: 'Урожай',
-      },
-      {
-        href: '/faq',
-        text: 'Частые вопросы',
-      },
-    ]}
-    context={context}
-  />
-);
+export default {
+  default: (
+    <Navigation
+      title="Потребительский кредит наличными"
+      buttons={[
+        {
+          href: '/credits',
+          text: 'Оформить',
+        },
+        {
+          href: '/tariffs',
+          text: 'Тарифы',
+        },
+        {
+          href: '/harvest',
+          text: 'Урожай',
+        },
+        {
+          href: '/faq',
+          text: 'Частые вопросы',
+        },
+      ]}
+      context={context}
+    />
+  ),
+};

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -2,8 +2,10 @@ import { context } from '../../setup-fixture';
 
 import { Placeholder } from './Placeholder';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Placeholder className="col-span-12" context={context} title="Неизвестный блок" />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Placeholder className="col-span-12" context={context} title="Неизвестный блок" />
+    </div>
+  ),
+};

package/src/components/ProductBlock/ProductBlock.fixture.tsx

@@ -3,6 +3,7 @@ import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
 import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ProductBlockContent } from './ProductBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -46,7 +47,7 @@ const benefits = [
   },
 ];
 
-const buttons = [
+const buttons: ButtonWithIconProps[] = [
   {
     href: 'https://rshb.ru',
     text: 'Оформить карту',
@@ -61,6 +62,19 @@ const buttons = [
   },
 ];
 
+export const PRODUCT_BLOCK: ProductBlockContent = {
+  title: 'Оплата проходит в 180 странах мира',
+  headingType: 'h2',
+  description:
+    'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
+  items: [
+    'Совершайте любые личные покупки',
+    'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+    'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+  ],
+  buttons: buttons,
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -72,7 +86,7 @@ export default {
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         breadcrumbs={breadcrumbs}
         benefits={benefits as Benefit[]}
-        buttons={buttons as ButtonWithIconProps[]}
+        buttons={buttons}
         image={image}
       />
     </div>
@@ -98,18 +112,20 @@ export default {
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Оплата проходит \nв 180 странах мира'}
-        headingType="h2"
         breadcrumbs={breadcrumbs}
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        items={[
-          'Совершайте любые личные покупки',
-          'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
-          'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
-        ]}
-        buttons={buttons as ButtonWithIconProps[]}
+        {...PRODUCT_BLOCK}
         image={image}
       />
     </div>
   ),
+  'without image': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        breadcrumbs={breadcrumbs}
+        {...PRODUCT_BLOCK}
+      />
+    </div>
+  ),
 };

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,6 +20,7 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
+    buttons?: ButtonContent[];
   };
 
 /**

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

@@ -48,7 +48,9 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description ? <Description className="mt-3" description={description} /> : null}
+            {description ? (
+              <Description className="mt-3 text-m-md" description={description} />
+            ) : null}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -45,7 +45,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {description && (
-              <Description className="text-m-base mt-4 max-w-[600px]" description={description} />
+              <Description className="mt-4 max-w-[600px]" description={description} />
             )}
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="flex gap-6 mt-6">

package/src/components/ProductGallery/ProductGallery.example.json

@@ -14,7 +14,8 @@
           }
         },
         "description": "Описание",
-        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+        "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+        "version": "primary"
       }
     }
   ]