From 1de17e890dd58ed555a0f4ac2a4d474cd8f875f8 Mon Sep 17 00:00:00 2001
From: krutoo <dima.krutoo@yandex.ru>
Date: Mon, 22 Jul 2024 15:12:36 +0500
Subject: [PATCH 1/3] #279
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- product-info: проп src заменен пропом images (major)
- product-slider: добавлен проп itemProps по аналогии с ProductCarousel (minor)
---
 .../components/product-info/parts/image.tsx   | 23 +++++++++++--------
 src/common/components/product-info/types.ts   |  8 +++----
 .../product-slider/product-slider.tsx         | 20 +++++++++++++---
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/common/components/product-info/parts/image.tsx b/src/common/components/product-info/parts/image.tsx
index 3d3d4c53..f8b7b22f 100644
--- a/src/common/components/product-info/parts/image.tsx
+++ b/src/common/components/product-info/parts/image.tsx
@@ -1,6 +1,6 @@
 import { ProductInfoImageProps } from '../types';
 import { useContext } from 'react';
-import { ProductImage } from '../../product-image';
+import { ProductImage, ProductImageProps } from '../../product-image';
 import { HoverSlider, HoverSliderItem } from '../../hover-slider';
 import { ProductInfoContext } from '../utils';
 import { ProductInfoMedia } from './media';
@@ -13,7 +13,7 @@ import styles from './image.m.scss';
  * @return Элемент.
  */
 export function ProductInfoImage({
-  src,
+  images = [],
   href,
   children,
   anchorProps,
@@ -30,8 +30,6 @@ export function ProductInfoImage({
     anchorProps?.className,
   );
 
-  const list = Array.isArray(src) ? src : [src];
-
   return (
     <ProductInfoMedia {...restProps}>
       <a
@@ -40,20 +38,18 @@ export function ProductInfoImage({
         href={adult ? undefined : href}
         className={rootClassName}
       >
-        {list.length > 1 && !adult ? (
+        {images.length > 1 && !adult ? (
           <HoverSlider
             withNav={!adult}
             {...sliderProps}
             className={classNames(styles.slider, sliderProps?.className)}
           >
-            {list.map((item, index) => (
-              <HoverSliderItem key={index}>
-                <ProductImage src={item} className={styles.image} />
-              </HoverSliderItem>
+            {images.map((imageProps, index) => (
+              <HoverSliderItem key={index}>{renderImage(imageProps)}</HoverSliderItem>
             ))}
           </HoverSlider>
         ) : (
-          <ProductImage src={list[0]} className={styles.image} />
+          images.slice(0, 1).map(renderImage)
         )}
       </a>
 
@@ -62,3 +58,10 @@ export function ProductInfoImage({
     </ProductInfoMedia>
   );
 }
+
+/** @inheritdoc */
+function renderImage(props: ProductImageProps, key?: string | number | null | undefined) {
+  return (
+    <ProductImage key={key} {...props} className={classNames(styles.image, props.className)} />
+  );
+}
diff --git a/src/common/components/product-info/types.ts b/src/common/components/product-info/types.ts
index 1ca6c442..5baa97ef 100644
--- a/src/common/components/product-info/types.ts
+++ b/src/common/components/product-info/types.ts
@@ -1,6 +1,6 @@
 import type { LinkProps } from '@sima-land/ui-nucleons/link';
 import type { StrokedSVGProps } from '@sima-land/ui-nucleons/stroked-svg';
-import type { ProductImageStyle } from '../product-image';
+import type { ProductImageProps, ProductImageStyle } from '../product-image';
 import type { HoverSliderProps } from '../hover-slider/types';
 import type {
   AnchorHTMLAttributes,
@@ -38,12 +38,12 @@ export interface ProductInfoMediaProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 export interface ProductInfoImageProps extends ProductInfoMediaProps {
-  /** Ссылка на картинку или список ссылок для вывода слайдера. */
-  src?: string | string[];
-
   /** Ссылка на товар. */
   href?: string;
 
+  /** Картинки. */
+  images?: ProductImageProps[];
+
   /** Прочие атрибуты элемента-ссылки. */
   anchorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
 
diff --git a/src/mobile/components/product-slider/product-slider.tsx b/src/mobile/components/product-slider/product-slider.tsx
index 7c81e1cf..59b4edd0 100644
--- a/src/mobile/components/product-slider/product-slider.tsx
+++ b/src/mobile/components/product-slider/product-slider.tsx
@@ -1,7 +1,8 @@
-import { Children, isValidElement, ReactElement, useMemo, useRef } from 'react';
+import { Children, CSSProperties, isValidElement, ReactElement, useMemo, useRef } from 'react';
 import { useIntersection } from '@sima-land/ui-nucleons/hooks';
 import { TouchSlider } from '@sima-land/ui-nucleons/touch-slider';
 import { ProductInfo, ProductInfoProps, Parts } from '../../../common/components/product-info';
+import classNames from 'classnames';
 import styles from './product-slider.m.scss';
 
 export type ItemElement = ReactElement<ProductInfoProps, typeof ProductInfo>;
@@ -15,6 +16,9 @@ export interface ProductSliderProps {
 
   /** Функция, инициализирующая загрузку рекомендаций. */
   onNeedRequest?: () => void;
+
+  /** Предоставит свойства для элемента . */
+  itemProps?: { style?: CSSProperties; className?: string };
 }
 
 /**
@@ -22,7 +26,12 @@ export interface ProductSliderProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export const ProductSlider = ({ children, onInViewport, onNeedRequest }: ProductSliderProps) => {
+export const ProductSlider = ({
+  children,
+  onInViewport,
+  onNeedRequest,
+  itemProps,
+}: ProductSliderProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
 
   // инициируем загрузку данных, когда компонент почти попал в зону видимости
@@ -48,7 +57,12 @@ export const ProductSlider = ({ children, onInViewport, onNeedRequest }: Product
             isValidElement(item) &&
               item.type === ProductInfo &&
               list.push(
-                <div key={item.key} className={styles.item} data-testid='product-slider:item'>
+                <div
+                  key={item.key}
+                  data-testid='product-slider:item'
+                  {...itemProps}
+                  className={classNames(styles.item, itemProps?.className)}
+                >
                   {item}
                 </div>,
               );

From a4163e64aeb3b062e10cb7727e509ddceaa4b7a6 Mon Sep 17 00:00:00 2001
From: krutoo <dima.krutoo@yandex.ru>
Date: Mon, 22 Jul 2024 15:15:54 +0500
Subject: [PATCH 2/3] #279
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- правки тестов
---
 .../__test__/product-info.test.tsx            | 44 +++++++++++++++----
 .../__test__/product-carousel.test.tsx        | 24 ++++++----
 .../__test__/product-slider.test.tsx          | 10 +++--
 3 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/src/common/components/product-info/__test__/product-info.test.tsx b/src/common/components/product-info/__test__/product-info.test.tsx
index 2b0aefd1..ef08cdbe 100644
--- a/src/common/components/product-info/__test__/product-info.test.tsx
+++ b/src/common/components/product-info/__test__/product-info.test.tsx
@@ -10,7 +10,7 @@ describe('ProductInfo', () => {
   it('should render all parts', () => {
     const { container, queryAllByTestId } = render(
       <ProductInfo>
-        <Parts.Image src='/public/test.png' href='https://sima-land.ru/product'>
+        <Parts.Image images={[{ src: '/public/test.png' }]} href='https://sima-land.ru/product'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -80,7 +80,7 @@ describe('ProductInfo', () => {
   it('should hide parts for unavailable product', () => {
     const { queryAllByTestId } = render(
       <ProductInfo restriction='unavailable'>
-        <Parts.Image src='/public/test.png' href='https://sima-land.ru/product'>
+        <Parts.Image images={[{ src: '/public/test.png' }]} href='https://sima-land.ru/product'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -141,7 +141,11 @@ describe('ProductInfo', () => {
     const { queryAllByTestId } = render(
       <ProductInfo restriction='adult'>
         <Parts.Image
-          src={['/public/test1.png', '/public/test2.png']}
+          images={[
+            //
+            { src: '/public/test1.png' },
+            { src: '/public/test2.png' },
+          ]}
           href='https://sima-land.ru/product'
         >
           <Parts.ImageButton
@@ -204,7 +208,10 @@ describe('ProductInfo', () => {
     const { container } = render(
       <ProductInfo strict={false}>
         <Parts.Title href='https://my-site.com'>My product!</Parts.Title>
-        <Parts.Image src='https://my-site.com/images/1' href='https://my-site.com' />
+        <Parts.Image
+          images={[{ src: 'https://my-site.com/images/1' }]}
+          href='https://my-site.com'
+        />
         <div>My custom child element!</div>
       </ProductInfo>,
     );
@@ -217,7 +224,7 @@ describe('ProductInfo', () => {
 
     const { getByTestId } = render(
       <ProductInfo restriction='unavailable'>
-        <Parts.Image src='/public/test.jpg' href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: '/public/test.jpg' }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -270,7 +277,7 @@ describe('ProductInfo', () => {
   it('should render link to waiting list', () => {
     const { getByTestId } = render(
       <ProductInfo restriction='unavailable'>
-        <Parts.Image src='/public/test.jpg' href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: '/public/test.jpg' }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -325,7 +332,7 @@ describe('ProductInfo', () => {
 
     const { getByTestId } = render(
       <ProductInfo restriction='adult'>
-        <Parts.Image src='/images/product.png' href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: '/images/product.png' }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -378,7 +385,15 @@ describe('ProductInfo', () => {
   it('should render hover slider when src is an array', () => {
     const { queryAllByTestId } = render(
       <ProductInfo>
-        <Parts.Image src={['/foo.png', '/bar.png', '/baz.png']} href='https://www.sima-land.ru'>
+        <Parts.Image
+          images={[
+            //
+            { src: '/foo.png' },
+            { src: '/bar.png' },
+            { src: '/baz.png' },
+          ]}
+          href='https://www.sima-land.ru'
+        >
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -429,7 +444,7 @@ describe('ProductInfo', () => {
   it('should render cart control loading', () => {
     const { container, queryAllByTestId } = render(
       <ProductInfo>
-        <Parts.Image src='/foobar.png' href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: '/foobar.png' }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'right', y: 'top' }}
@@ -479,4 +494,15 @@ describe('ProductInfo', () => {
     expect(container.textContent).not.toContain('По 1 шт');
     expect(container.textContent).not.toContain('Комплектация + 50 ₽ при покупке до 20 шт');
   });
+
+  it('Parts.Image should accept undefined for "images"', () => {
+    const { queryAllByTestId } = render(
+      <ProductInfo>
+        <Parts.Image images={undefined} href='https://www.sima-land.ru' />
+      </ProductInfo>,
+    );
+
+    expect(queryAllByTestId('product-image-link')).toHaveLength(1);
+    expect(queryAllByTestId('product-image')).toHaveLength(0);
+  });
 });
diff --git a/src/desktop/components/product-carousel/__test__/product-carousel.test.tsx b/src/desktop/components/product-carousel/__test__/product-carousel.test.tsx
index d3284957..db3fa0f1 100644
--- a/src/desktop/components/product-carousel/__test__/product-carousel.test.tsx
+++ b/src/desktop/components/product-carousel/__test__/product-carousel.test.tsx
@@ -50,7 +50,11 @@ describe('ProductCarousel', () => {
       <ProductCarousel>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url} onClick={spies.imageClick} />
+            <Parts.Image
+              images={[{ src: item.imageSrc }]}
+              href={item.url}
+              onClick={spies.imageClick}
+            />
 
             <Parts.Prices
               price={item.price}
@@ -98,7 +102,11 @@ describe('ProductCarousel', () => {
     const { container } = render(
       <ProductCarousel>
         <ProductInfo>
-          <Parts.Image src={items[0].imageSrc} href={items[0].url} onClick={spies.imageClick} />
+          <Parts.Image
+            images={[{ src: items[0].imageSrc }]}
+            href={items[0].url}
+            onClick={spies.imageClick}
+          />
 
           <Parts.Prices
             price={items[0].price}
@@ -140,7 +148,7 @@ describe('ProductCarousel', () => {
         <ProductCarousel>
           {items.map((item, index) => (
             <ProductInfo key={index}>
-              <Parts.Image src={item.imageSrc} href={item.url} />
+              <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
               <Parts.Prices
                 price={item.price}
@@ -167,7 +175,7 @@ describe('ProductCarousel', () => {
         <ProductCarousel>
           {items.map((item, index) => (
             <ProductInfo key={index}>
-              <Parts.Image src={item.imageSrc} href={item.url} />
+              <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
               <Parts.Prices
                 price={item.price}
@@ -191,7 +199,7 @@ describe('ProductCarousel', () => {
         <ProductCarousel itemSize={{ xs: 3 }}>
           {items.map((item, index) => (
             <ProductInfo key={index}>
-              <Parts.Image src={item.imageSrc} href={item.url} />
+              <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
               <Parts.Prices
                 price={item.price}
@@ -223,7 +231,7 @@ describe('ProductCarousel', () => {
         <ProductCarousel itemSize={{ xs: 3 }}>
           {items.map((item, index) => (
             <ProductInfo key={index}>
-              <Parts.Image src={item.imageSrc} href={item.url} />
+              <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
               <Parts.Prices
                 price={item.price}
@@ -326,7 +334,7 @@ describe('intersections', () => {
       <ProductCarousel onNeedRequest={spy}>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url} />
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
             <Parts.Prices
               price={item.price}
@@ -358,7 +366,7 @@ describe('intersections', () => {
       <ProductCarousel onInViewport={spy}>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url} />
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
             <Parts.Prices
               price={item.price}
diff --git a/src/mobile/components/product-slider/__test__/product-slider.test.tsx b/src/mobile/components/product-slider/__test__/product-slider.test.tsx
index e65f14b6..2d07a993 100644
--- a/src/mobile/components/product-slider/__test__/product-slider.test.tsx
+++ b/src/mobile/components/product-slider/__test__/product-slider.test.tsx
@@ -23,7 +23,11 @@ describe('ProductSlider', () => {
       <ProductSlider>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url} onClick={spies.imageClick}>
+            <Parts.Image
+              images={[{ src: item.imageSrc }]}
+              href={item.url}
+              onClick={spies.imageClick}
+            >
               <Parts.ImageButton
                 icon={FavoriteSVG}
                 hint='Добавить в избранное'
@@ -98,7 +102,7 @@ describe('intersections', () => {
       <ProductSlider onNeedRequest={spy}>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url} />
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
             <Parts.Prices
               price={item.price}
@@ -130,7 +134,7 @@ describe('intersections', () => {
       <ProductSlider onInViewport={spy}>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url} />
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
             <Parts.Prices
               price={item.price}

From e633d5c690ade23b88730f5a334df8e884eeec7d Mon Sep 17 00:00:00 2001
From: krutoo <dima.krutoo@yandex.ru>
Date: Mon, 22 Jul 2024 15:20:03 +0500
Subject: [PATCH 3/3] #279
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- docs: правки примеров использования ProductInfo
---
 .github/workflows/gh-pages.yml                |  5 ++++
 .../product-info/01-primary.stories.tsx       |  2 +-
 .../02-image-slider.stories.meta.json         |  7 ++++++
 .../product-info/02-image-slider.stories.tsx  | 21 ++++++++++------
 .../03-custom-ratio.stories.meta.json         |  7 ++++++
 .../product-info/03-custom-ratio.stories.tsx  | 18 ++++++++------
 .../product-info/04-cart-loading.stories.tsx  |  2 +-
 .../product-info/05-not-enough.stories.tsx    |  2 +-
 .../06-not-enough-waited.stories.tsx          |  2 +-
 .../product-info/07-unavailable.stories.tsx   |  2 +-
 .../08-mature-content.stories.tsx             | 24 ++++++++++++++++---
 .../product-info/09-with-carousel.stories.tsx |  2 +-
 .../components/product-info/styles.m.css      |  7 ++++++
 .../product-carousel/01-primary.stories.tsx   |  2 +-
 .../02-unavailable.stories.tsx                |  2 +-
 .../product-carousel/03-adult.stories.tsx     |  2 +-
 .../04-deferred-data.stories.tsx              |  2 +-
 .../product-carousel/05-few-items.stories.tsx |  2 +-
 .../06-custom-item-size.stories.tsx           |  2 +-
 .../product-slider/01-primary.stories.tsx     |  2 +-
 .../product-slider/02-unavailable.stories.tsx |  2 +-
 .../product-slider/03-adult.stories.tsx       |  2 +-
 22 files changed, 87 insertions(+), 32 deletions(-)
 create mode 100644 docs/stories/common/components/product-info/02-image-slider.stories.meta.json
 create mode 100644 docs/stories/common/components/product-info/03-custom-ratio.stories.meta.json
 create mode 100644 docs/stories/common/components/product-info/styles.m.css

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index d0a0b842..d6579eec 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -23,6 +23,11 @@ jobs:
           npm ci
         working-directory: docs
 
+      - name: Lint docs
+        run: |
+          npm run check
+        working-directory: docs
+
       - name: Build docs
         run: |
           NODE_ENV=production npm run build
diff --git a/docs/stories/common/components/product-info/01-primary.stories.tsx b/docs/stories/common/components/product-info/01-primary.stories.tsx
index 97a11b51..7ba1c840 100644
--- a/docs/stories/common/components/product-info/01-primary.stories.tsx
+++ b/docs/stories/common/components/product-info/01-primary.stories.tsx
@@ -18,7 +18,7 @@ export default function Primary() {
   return (
     <div style={{ maxWidth: '200px' }}>
       <ProductInfo>
-        <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: strawberries }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/02-image-slider.stories.meta.json b/docs/stories/common/components/product-info/02-image-slider.stories.meta.json
new file mode 100644
index 00000000..dffa59f4
--- /dev/null
+++ b/docs/stories/common/components/product-info/02-image-slider.stories.meta.json
@@ -0,0 +1,7 @@
+{
+  "parameters": {
+    "sources": {
+      "extraSources": ["./styles.m.css"]
+    }
+  }
+}
diff --git a/docs/stories/common/components/product-info/02-image-slider.stories.tsx b/docs/stories/common/components/product-info/02-image-slider.stories.tsx
index 402f1940..523669aa 100644
--- a/docs/stories/common/components/product-info/02-image-slider.stories.tsx
+++ b/docs/stories/common/components/product-info/02-image-slider.stories.tsx
@@ -8,6 +8,7 @@ import berries0 from './images/strawberries.jpg';
 import berries1 from './images/berries1.jpg';
 import berries2 from './images/berries2.jpg';
 import berries3 from './images/berries3.jpg';
+import styles from './styles.m.css';
 
 export const meta = {
   category: 'common/ProductInfo',
@@ -18,18 +19,24 @@ export const meta = {
 };
 
 const images = [
-  // ссылки на картинки
-  berries0,
-  berries1,
-  berries2,
-  berries3,
+  { src: berries0, alt: 'Первая картинка' },
+  { src: berries1, alt: 'Вторая картинка' },
+  { src: berries2, alt: 'Третья картинка' },
+  { src: berries3, alt: 'Четвертая картинка' },
 ];
 
 export default function ImageSlider() {
   return (
-    <div style={{ maxWidth: '200px' }}>
+    <div className={styles.card}>
       <ProductInfo>
-        <Parts.Image src={images} href='https://www.sima-land.ru'>
+        <Parts.Image
+          href='https://www.sima-land.ru'
+          images={images}
+          sliderProps={{
+            // прокидываем класс навигации чтобы стилями скрывать ее когда мышка не наведена на карточку
+            navProps: { className: styles.nav },
+          }}
+        >
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/03-custom-ratio.stories.meta.json b/docs/stories/common/components/product-info/03-custom-ratio.stories.meta.json
new file mode 100644
index 00000000..dffa59f4
--- /dev/null
+++ b/docs/stories/common/components/product-info/03-custom-ratio.stories.meta.json
@@ -0,0 +1,7 @@
+{
+  "parameters": {
+    "sources": {
+      "extraSources": ["./styles.m.css"]
+    }
+  }
+}
diff --git a/docs/stories/common/components/product-info/03-custom-ratio.stories.tsx b/docs/stories/common/components/product-info/03-custom-ratio.stories.tsx
index 64bfcb33..1435bcb3 100644
--- a/docs/stories/common/components/product-info/03-custom-ratio.stories.tsx
+++ b/docs/stories/common/components/product-info/03-custom-ratio.stories.tsx
@@ -8,6 +8,7 @@ import berries0 from './images/strawberries.jpg';
 import berries1 from './images/berries1.jpg';
 import berries2 from './images/berries2.jpg';
 import berries3 from './images/berries3.jpg';
+import styles from './styles.m.css';
 
 export const meta = {
   category: 'common/ProductInfo',
@@ -18,20 +19,23 @@ export const meta = {
 };
 
 const images = [
-  // ссылки на картинки
-  berries0,
-  berries1,
-  berries2,
-  berries3,
+  { src: berries0, alt: 'Первая картинка' },
+  { src: berries1, alt: 'Вторая картинка' },
+  { src: berries2, alt: 'Третья картинка' },
+  { src: berries3, alt: 'Четвертая картинка' },
 ];
 
 export default function CustomRatio() {
   return (
-    <div style={{ maxWidth: '200px' }}>
+    <div className={styles.card}>
       <ProductInfo>
         <Parts.Image
-          src={images}
           href='https://www.sima-land.ru'
+          images={images}
+          sliderProps={{
+            // прокидываем класс навигации чтобы стилями скрывать ее когда мышка не наведена на карточку
+            navProps: { className: styles.nav },
+          }}
           style={{
             '--product-info-media-ratio': '4 / 3',
             '--product-image-object-fit': 'cover',
diff --git a/docs/stories/common/components/product-info/04-cart-loading.stories.tsx b/docs/stories/common/components/product-info/04-cart-loading.stories.tsx
index d7d72c37..3c2506ea 100644
--- a/docs/stories/common/components/product-info/04-cart-loading.stories.tsx
+++ b/docs/stories/common/components/product-info/04-cart-loading.stories.tsx
@@ -17,7 +17,7 @@ export default function CartLoading() {
   return (
     <div style={{ width: '200px' }}>
       <ProductInfo>
-        <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: strawberries }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/05-not-enough.stories.tsx b/docs/stories/common/components/product-info/05-not-enough.stories.tsx
index 65f10b6a..836e2dbc 100644
--- a/docs/stories/common/components/product-info/05-not-enough.stories.tsx
+++ b/docs/stories/common/components/product-info/05-not-enough.stories.tsx
@@ -17,7 +17,7 @@ export default function NotEnough() {
   return (
     <div style={{ width: '200px' }}>
       <ProductInfo restriction='unavailable'>
-        <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: strawberries }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/06-not-enough-waited.stories.tsx b/docs/stories/common/components/product-info/06-not-enough-waited.stories.tsx
index be8b6c67..75804bcf 100644
--- a/docs/stories/common/components/product-info/06-not-enough-waited.stories.tsx
+++ b/docs/stories/common/components/product-info/06-not-enough-waited.stories.tsx
@@ -17,7 +17,7 @@ export default function NotEnoughWaited() {
   return (
     <div style={{ width: '200px' }}>
       <ProductInfo restriction='unavailable'>
-        <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: strawberries }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/07-unavailable.stories.tsx b/docs/stories/common/components/product-info/07-unavailable.stories.tsx
index 2b96d342..e4a5572b 100644
--- a/docs/stories/common/components/product-info/07-unavailable.stories.tsx
+++ b/docs/stories/common/components/product-info/07-unavailable.stories.tsx
@@ -17,7 +17,7 @@ export default function Unavailable() {
   return (
     <div style={{ width: '200px' }}>
       <ProductInfo restriction='unavailable'>
-        <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+        <Parts.Image images={[{ src: strawberries }]} href='https://www.sima-land.ru'>
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/08-mature-content.stories.tsx b/docs/stories/common/components/product-info/08-mature-content.stories.tsx
index 4aa0670e..f6d9eae7 100644
--- a/docs/stories/common/components/product-info/08-mature-content.stories.tsx
+++ b/docs/stories/common/components/product-info/08-mature-content.stories.tsx
@@ -3,7 +3,11 @@ import { Badge } from '@sima-land/moleculas/common/components/badge';
 import FavoriteSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Favorite';
 import MagnifierPlusSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/MagnifierPlus';
 import ComparisonAddSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/ComparisonAdd';
-import strawberries from './images/strawberries.jpg';
+import berries0 from './images/strawberries.jpg';
+import berries1 from './images/berries1.jpg';
+import berries2 from './images/berries2.jpg';
+import berries3 from './images/berries3.jpg';
+import styles from './styles.m.css';
 
 export const meta = {
   category: 'common/ProductInfo',
@@ -13,11 +17,25 @@ export const meta = {
   },
 };
 
+const images = [
+  { src: berries0, alt: 'Первая картинка' },
+  { src: berries1, alt: 'Вторая картинка' },
+  { src: berries2, alt: 'Третья картинка' },
+  { src: berries3, alt: 'Четвертая картинка' },
+];
+
 export default function Adult() {
   return (
-    <div style={{ width: '200px' }}>
+    <div className={styles.card}>
       <ProductInfo restriction='adult'>
-        <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+        <Parts.Image
+          href='https://www.sima-land.ru'
+          images={images}
+          sliderProps={{
+            // прокидываем класс навигации чтобы стилями скрывать ее когда мышка не наведена на карточку
+            navProps: { className: styles.nav },
+          }}
+        >
           <Parts.ImageButton
             icon={FavoriteSVG}
             position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/09-with-carousel.stories.tsx b/docs/stories/common/components/product-info/09-with-carousel.stories.tsx
index c2d3dcee..1a7f39ba 100644
--- a/docs/stories/common/components/product-info/09-with-carousel.stories.tsx
+++ b/docs/stories/common/components/product-info/09-with-carousel.stories.tsx
@@ -64,7 +64,7 @@ export default function WithCarousel() {
             }}
           >
             <ProductInfo>
-              <Parts.Image src={strawberries} href='https://www.sima-land.ru'>
+              <Parts.Image images={[{ src: strawberries }]} href='https://www.sima-land.ru'>
                 <Parts.ImageButton
                   icon={FavoriteSVG}
                   position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/common/components/product-info/styles.m.css b/docs/stories/common/components/product-info/styles.m.css
new file mode 100644
index 00000000..0bbdee93
--- /dev/null
+++ b/docs/stories/common/components/product-info/styles.m.css
@@ -0,0 +1,7 @@
+.card {
+  max-width: 200px;
+}
+
+.card:not(:hover) .nav {
+  display: none;
+}
diff --git a/docs/stories/desktop/components/product-carousel/01-primary.stories.tsx b/docs/stories/desktop/components/product-carousel/01-primary.stories.tsx
index 761e95b5..2a40d275 100644
--- a/docs/stories/desktop/components/product-carousel/01-primary.stories.tsx
+++ b/docs/stories/desktop/components/product-carousel/01-primary.stories.tsx
@@ -34,7 +34,7 @@ export default function Primary() {
       <ProductCarousel>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url}>
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url}>
               <Parts.ImageButton
                 icon={FavSVG}
                 position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/desktop/components/product-carousel/02-unavailable.stories.tsx b/docs/stories/desktop/components/product-carousel/02-unavailable.stories.tsx
index 1851756d..609b8fb9 100644
--- a/docs/stories/desktop/components/product-carousel/02-unavailable.stories.tsx
+++ b/docs/stories/desktop/components/product-carousel/02-unavailable.stories.tsx
@@ -32,7 +32,7 @@ export default function Unavailable() {
       <ProductCarousel>
         {items.map((item, index) => (
           <ProductInfo key={index} restriction='unavailable'>
-            <Parts.Image src={item.imageSrc} href={item.url}>
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url}>
               <Parts.ImageButton
                 icon={FavSVG}
                 position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/desktop/components/product-carousel/03-adult.stories.tsx b/docs/stories/desktop/components/product-carousel/03-adult.stories.tsx
index 615a31a9..70161918 100644
--- a/docs/stories/desktop/components/product-carousel/03-adult.stories.tsx
+++ b/docs/stories/desktop/components/product-carousel/03-adult.stories.tsx
@@ -31,7 +31,7 @@ export default function Adult() {
       <ProductCarousel>
         {items.map((item, index) => (
           <ProductInfo key={index} restriction='adult'>
-            <Parts.Image src={item.imageSrc} href={item.url}>
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url}>
               <Parts.ImageButton
                 icon={FavSVG}
                 position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/desktop/components/product-carousel/04-deferred-data.stories.tsx b/docs/stories/desktop/components/product-carousel/04-deferred-data.stories.tsx
index b5058557..fb1aee4b 100644
--- a/docs/stories/desktop/components/product-carousel/04-deferred-data.stories.tsx
+++ b/docs/stories/desktop/components/product-carousel/04-deferred-data.stories.tsx
@@ -41,7 +41,7 @@ export default function DeferredData() {
         {(ready ? items : []).map((item, index) => (
           <ProductInfo key={index}>
             <Parts.Image
-              src={item.imageSrc}
+              images={[{ src: item.imageSrc }]}
               href={item.url}
               onClick={e => {
                 e.preventDefault();
diff --git a/docs/stories/desktop/components/product-carousel/05-few-items.stories.tsx b/docs/stories/desktop/components/product-carousel/05-few-items.stories.tsx
index eed70355..52f2541e 100644
--- a/docs/stories/desktop/components/product-carousel/05-few-items.stories.tsx
+++ b/docs/stories/desktop/components/product-carousel/05-few-items.stories.tsx
@@ -34,7 +34,7 @@ export default function FewItems() {
         {items.slice(0, 4).map((item, index) => (
           <ProductInfo key={index}>
             <Parts.Image
-              src={item.imageSrc}
+              images={[{ src: item.imageSrc }]}
               href={item.url}
               onClick={e => {
                 e.preventDefault();
diff --git a/docs/stories/desktop/components/product-carousel/06-custom-item-size.stories.tsx b/docs/stories/desktop/components/product-carousel/06-custom-item-size.stories.tsx
index 2129261c..ee604259 100644
--- a/docs/stories/desktop/components/product-carousel/06-custom-item-size.stories.tsx
+++ b/docs/stories/desktop/components/product-carousel/06-custom-item-size.stories.tsx
@@ -22,7 +22,7 @@ export default function CustomItemSize() {
       >
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url}>
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url}>
               <Parts.ImageButton
                 icon={FavSVG}
                 position={{ x: 'left', y: 'top' }}
diff --git a/docs/stories/mobile/components/product-slider/01-primary.stories.tsx b/docs/stories/mobile/components/product-slider/01-primary.stories.tsx
index a8be020b..8945841f 100644
--- a/docs/stories/mobile/components/product-slider/01-primary.stories.tsx
+++ b/docs/stories/mobile/components/product-slider/01-primary.stories.tsx
@@ -49,7 +49,7 @@ export default function Primary() {
       <ProductSlider>
         {items.map((item, index) => (
           <ProductInfo key={index}>
-            <Parts.Image src={item.imageSrc} href={item.url}>
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url}>
               <Parts.ImageButton
                 icon={wished[index] ? FavSVG : NotFavSVG}
                 fill={wished[index] ? COLORS.get('additional-red') : undefined}
diff --git a/docs/stories/mobile/components/product-slider/02-unavailable.stories.tsx b/docs/stories/mobile/components/product-slider/02-unavailable.stories.tsx
index d119e264..e7b392f3 100644
--- a/docs/stories/mobile/components/product-slider/02-unavailable.stories.tsx
+++ b/docs/stories/mobile/components/product-slider/02-unavailable.stories.tsx
@@ -42,7 +42,7 @@ export default function Unavailable() {
       <ProductSlider>
         {items.map((item, index) => (
           <ProductInfo key={index} restriction='unavailable'>
-            <Parts.Image src={item.imageSrc} href={item.url} />
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
             <Parts.Prices
               price={item.price}
diff --git a/docs/stories/mobile/components/product-slider/03-adult.stories.tsx b/docs/stories/mobile/components/product-slider/03-adult.stories.tsx
index 914a2b47..4ac9c0ee 100644
--- a/docs/stories/mobile/components/product-slider/03-adult.stories.tsx
+++ b/docs/stories/mobile/components/product-slider/03-adult.stories.tsx
@@ -42,7 +42,7 @@ export default function Adult() {
       <ProductSlider>
         {items.map((item, index) => (
           <ProductInfo key={index} restriction='adult'>
-            <Parts.Image src={item.imageSrc} href={item.url} />
+            <Parts.Image images={[{ src: item.imageSrc }]} href={item.url} />
 
             <Parts.Prices
               price={item.price}