Merge pull request #126 from sima-land/125-interactive-image-upd

#125 Поправить размер точек у InteractiveImage
sima-land · Dec 16, 2022 · 7ede028 · 7ede028
2 parents a2618bf + fbd76cd
commit 7ede028
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 71 deletions.
diff --git a/src/common/components/intractive-image/interactive-image.module.scss b/src/common/components/intractive-image/interactive-image.module.scss
@@ -22,8 +22,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 64px;
-  height: 64px;
+  width: 52px;
+  height: 52px;
   background: rgba(colors.$basic-gray87, 0.4);
   border-radius: 50%;
   transform: translate(-50%, -50%);
@@ -34,8 +34,8 @@
   &::after {
     content: '';
     display: block;
-    width: 24px;
-    height: 24px;
+    width: 20px;
+    height: 20px;
     background: #fff;
     border-radius: 50%;
   }

diff --git a/src/common/components/product-info/__stories__/index.stories.tsx b/src/common/components/product-info/__stories__/index.stories.tsx
@@ -47,80 +47,50 @@ const Bootstrap: React.FC = ({ children }) => (
 );
 
 export const Primary = () => (
-  <Bootstrap>
-    <ProductInfo>
-      <Parts.Image
-        src={data.imageSrc}
-        href={data.url}
-        onClick={e => {
-          e.preventDefault();
-          action('Клик: ссылка на товар (изображение)')();
-        }}
-      >
-        <Parts.ImageButton
-          icon={FavoriteSVG}
-          hint='Добавить в избранное'
-          onClick={action('Клик: добавить в избранное')}
-          data-testid='favorite-button'
-        />
-        <Parts.ImageButton
-          icon={QuickView2SVG}
-          hint='Быстрый просмотр'
-          onClick={action('Клик: быстрый просмотр')}
-          data-testid='quick-view-button'
-        />
-        <Parts.ImageButton
-          icon={Camera2SVG}
-          hint='Смотреть фото'
-          onClick={action('Клик: Смотреть фото')}
-          data-testid='photo-button'
-          hintDirection='right'
-        />
-      </Parts.Image>
+  <ProductInfo>
+    <Parts.Image src={data.imageSrc} href={data.url}>
+      <Parts.ImageButton
+        icon={FavoriteSVG}
+        hint='Добавить в избранное'
+        onClick={action('Клик: добавить в избранное')}
+      />
+      <Parts.ImageButton
+        icon={QuickView2SVG}
+        hint='Быстрый просмотр'
+        onClick={action('Клик: быстрый просмотр')}
+      />
+      <Parts.ImageButton
+        icon={Camera2SVG}
+        hint='Смотреть фото'
+        onClick={action('Клик: Смотреть фото')}
+      />
+    </Parts.Image>
 
-      <Parts.Badges lineLimit={1}>
-        {data.badges.map((badge, index) => (
-          <Badge key={index} {...badge} onClick={action('Клик: шильдик')} />
-        ))}
-      </Parts.Badges>
+    <Parts.Badges lineLimit={1}>
+      <Badge {...badges[0]} />
+      <Badge {...badges[1]} />
+    </Parts.Badges>
 
-      <Parts.Prices
-        price={data.price}
-        oldPrice={data.oldPrice}
-        currencyGrapheme={data.currencyGrapheme}
-      />
+    <Parts.Prices
+      price={data.price}
+      oldPrice={data.oldPrice}
+      currencyGrapheme={data.currencyGrapheme}
+    />
 
-      <Parts.Title
-        href={data.url}
-        onClick={e => {
-          e.preventDefault();
-          action('Клик: ссылка на товар')();
-        }}
-      >
-        {data.name}
-      </Parts.Title>
+    <Parts.Title href={data.url}>{data.name}</Parts.Title>
 
-      <Parts.SecondaryInfo>Арт. 1234567890</Parts.SecondaryInfo>
+    <Parts.SecondaryInfo>Арт. 1234567890</Parts.SecondaryInfo>
 
-      <Parts.TrademarkLink
-        href={data.trademarkUrl}
-        onClick={e => {
-          e.preventDefault();
-          action('Клик: ссылка на торговую марку')();
-        }}
-      >
-        {data.trademarkName}
-      </Parts.TrademarkLink>
+    <Parts.TrademarkLink href={data.trademarkUrl}>{data.trademarkName}</Parts.TrademarkLink>
 
-      <Parts.RatingCounter value={4.5} reviewCount={28} />
+    <Parts.RatingCounter value={4.5} reviewCount={28} />
 
-      <Parts.Footer>
-        <Parts.CartControl stepText='По 5 шт' markupText='Комплектация + 50 ₽ при покупке до 20 шт'>
-          <Stepper defaultValue={3} size='s' style={{ width: '122px' }} />
-        </Parts.CartControl>
-      </Parts.Footer>
-    </ProductInfo>
-  </Bootstrap>
+    <Parts.Footer>
+      <Parts.CartControl stepText='По 5 шт' markupText='Комплектация + 50 ₽ при покупке до 20 шт'>
+        <Stepper defaultValue={3} size='s' style={{ width: '122px' }} />
+      </Parts.CartControl>
+    </Parts.Footer>
+  </ProductInfo>
 );
 
 export const PositionedImageIcons = () => (

diff --git a/src/common/components/product-info/types.ts b/src/common/components/product-info/types.ts
@@ -1,4 +1,7 @@
 export interface ProductInfoProps {
+  /** Ограничение товара. Влияет на отображение информации. */
   restriction?: 'adult' | 'unavailable';
+
+  /** Содержимое. */
   children?: React.ReactNode;
 }
diff --git a/src/desktop/components/product-card/__stories__/index.stories.tsx b/src/desktop/components/product-card/__stories__/index.stories.tsx
@@ -104,6 +104,8 @@ export const PrimaryItem = () => {
             {data.trademark.name}
           </Parts.TrademarkLink>
 
+          <Parts.RatingCounter value={4.7} reviewCount={52} />
+
           <Parts.Footer>
             <Parts.CartControl
               stepText='По 5 шт'

diff --git a/src/desktop/components/product-carousel/__stories__/index.stories.tsx b/src/desktop/components/product-carousel/__stories__/index.stories.tsx
@@ -88,6 +88,8 @@ export const Primary = () => {
               {item.name}
             </Parts.Title>
 
+            <Parts.RatingCounter value={4.7} reviewCount={52} />
+
             <Parts.Footer>
               <Parts.CartControl
                 stepText='По 5 шт'