Merge pull request #97 from sima-land/96-product-carousel-arrows-bug

#96 ProductCarousel: Стрелки каруселей выводятся когда товаров не хватает для прокрутки
sima-land · Mar 29, 2022 · 41c450d · 41c450d
2 parents d9bf241 + b39fc9b
commit 41c450d
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 265 deletions.
diff --git a/src/desktop/components/modifiers/modifiers.scss b/src/desktop/components/modifiers/modifiers.scss
@@ -1,3 +1,8 @@
+// внешний отступ вокруг каждого элемента группы
 $gutter: 4px;
+
+// размер квадратного модификатора
 $minSize: 48px;
+
+// максимальная высота блока с ограничением в 2 строки
 $groupMaxHeight: ($minSize * 2) + ($gutter * 4);
diff --git a/src/desktop/components/product-carousel/__stories__/index.stories.tsx b/src/desktop/components/product-carousel/__stories__/index.stories.tsx
@@ -103,6 +103,8 @@ export const Primary = () => {
   );
 };
 
+Primary.storyName = 'Простой пример';
+
 export const Unavailable = () => {
   const [wished, toggleWish] = useState<Record<number, boolean>>({});
 
@@ -166,6 +168,8 @@ export const Unavailable = () => {
   );
 };
 
+Unavailable.storyName = 'Нет в наличии';
+
 export const Adult = () => (
   <DemoBlock>
     <ProductCarousel withHoverCard>
@@ -205,6 +209,8 @@ export const Adult = () => (
   </DemoBlock>
 );
 
+Adult.storyName = 'Товары для взрослых';
+
 export const DeferredData = () => {
   const [wished, toggleWish] = useState<Record<number, boolean>>({});
   const [ready, setReady] = useState<boolean>(false);
@@ -276,3 +282,65 @@ export const DeferredData = () => {
     </DemoBlock>
   );
 };
+
+DeferredData.storyName = 'Тест: загрузка после mount';
+
+export const FewItems = () => (
+  <DemoBlock>
+    <ProductCarousel withHoverCard>
+      {items.slice(0, 4).map((item, index) => (
+        <ProductInfo key={index}>
+          <Parts.Image
+            src={item.imageSrc}
+            href={item.url}
+            onClick={e => {
+              e.preventDefault();
+              action('Клик: ссылка на товар (изображение)')();
+            }}
+          >
+            <Parts.ImageButton
+              icon={NotFavSVG}
+              hint='Добавить в избранное'
+              data-testid='favorite-button'
+            />
+          </Parts.Image>
+
+          {item.badges && (
+            <Parts.Badges lineLimit={1}>
+              {item.badges.map((badge, badgeIndex) => (
+                <Badge key={badgeIndex} {...badge} onClick={action('Клик: шильдик')} />
+              ))}
+            </Parts.Badges>
+          )}
+
+          <Parts.Prices
+            price={item.price}
+            oldPrice={item.oldPrice}
+            currencyGrapheme={item.currencyGrapheme}
+          />
+
+          <Parts.Title
+            href={item.url}
+            onClick={e => {
+              e.preventDefault();
+              action('Клик: ссылка на товар')();
+            }}
+          >
+            {item.name}
+          </Parts.Title>
+
+          <Parts.Footer>
+            <Parts.CartControl
+              stepText='По 5 шт'
+              markupText='Комплектация + 50 ₽ при покупке до 20 шт'
+            >
+              <Stepper defaultValue={3} size='s' style={{ width: '122px' }} />
+            </Parts.CartControl>
+          </Parts.Footer>
+        </ProductInfo>
+      ))}
+    </ProductCarousel>
+  </DemoBlock>
+);
+
+FewItems.storyName = 'Мало товаров для прокрутки';