#213 ProductCard: добавить возможность определять фильтры содержимого (…

…#214) - common: удалены типы и константы устаревших модификаторов (major) - product-card: добавлены пропсы reduceBaseInfo и reduceHoverInfo (minor)
sima-land · Jan 9, 2024 · 18ca727 · 18ca727
1 parent ef58666
commit 18ca727
Show file tree

Hide file tree

Showing 13 changed files with 414 additions and 321 deletions.
diff --git a/src/common/constants.ts b/src/common/constants.ts
diff --git a/src/common/types.ts b/src/common/types.ts
diff --git a/src/desktop/components/product-card/__stories__/01-primary.stories.tsx b/src/desktop/components/product-card/__stories__/01-primary.stories.tsx
@@ -0,0 +1,81 @@
+import { ProductCard, reduceBaseInfo } from '@sima-land/moleculas/desktop/components/product-card';
+import { ProductInfo, Parts } from '@sima-land/moleculas/common/components/product-info';
+import { Badge, BadgeProps } from '@sima-land/moleculas/common/components/badge';
+import { Stepper } from '@sima-land/ui-nucleons/stepper';
+import FavSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Favorite';
+import cupSrc from './cup.jpg';
+
+export default {
+  title: 'desktop/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Компонент карточки товара',
+      },
+    },
+  },
+};
+
+export function Primary() {
+  const badges: BadgeProps[] = [
+    { color: '#b52ea8', fields: [{ type: 'text', value: '-56%' }] },
+    { color: '#ff7200', fields: [{ type: 'text', value: '3 по цене 2' }] },
+    { color: '#2962ff', fields: [{ type: 'text', value: 'Товар месяца' }] },
+    { color: '#00b8d4', fields: [{ type: 'text', value: 'Акция' }] },
+  ];
+
+  return (
+    <div style={{ width: '200px', margin: '32px' }}>
+      <ProductCard reduceBaseInfo={elem => reduceBaseInfo(elem, { hideImageButtons: false })}>
+        <ProductInfo>
+          {/* Изображение */}
+          <Parts.Image src={cupSrc} href='https://www.sima-land.ru'>
+            <Parts.ImageButton
+              icon={FavSVG}
+              position={{ x: 'left', y: 'top' }}
+              hint='Добавить в избранное'
+              hintDirection='right'
+            />
+          </Parts.Image>
+
+          {/* Шильдики */}
+          <Parts.Badges lineLimit={2}>
+            {badges.map((badge, badgeIndex) => (
+              <Badge key={badgeIndex} {...badge} />
+            ))}
+          </Parts.Badges>
+
+          {/* Цены */}
+          <Parts.Prices price={99876543.21} oldPrice={99987654.32} currencyGrapheme='₽' />
+
+          {/* Название */}
+          <Parts.Title href='https://www.sima-land.ru'>
+            Ножницы портновские, с прорезиненной ручкой, 20 см, цвет чёрный/серый
+          </Parts.Title>
+
+          {/* Ссылка под названием */}
+          <Parts.TrademarkLink href='https://www.sima-land.ru/offers/'>
+            Торговая марка Сима-ленд
+          </Parts.TrademarkLink>
+
+          {/* Рейтинг */}
+          <Parts.RatingCounter value={4.7} reviewCount={52} />
+
+          {/* Произвольный контент */}
+          <Parts.Footer>
+            <Parts.CartControl
+              stepText='По 5 шт'
+              markupText='Комплектация + 50 ₽ при покупке до 20 шт'
+            >
+              <Stepper defaultValue={12} size='s' style={{ width: '122px' }} />
+            </Parts.CartControl>
+          </Parts.Footer>
+        </ProductInfo>
+      </ProductCard>
+    </div>
+  );
+}
+
+Primary.storyName = 'Простой пример';
diff --git a/src/desktop/components/product-card/__stories__/02-not-enough.stories.tsx b/src/desktop/components/product-card/__stories__/02-not-enough.stories.tsx
@@ -0,0 +1,81 @@
+import { ProductCard, reduceBaseInfo } from '@sima-land/moleculas/desktop/components/product-card';
+import { ProductInfo, Parts } from '@sima-land/moleculas/common/components/product-info';
+import { Badge, BadgeProps } from '@sima-land/moleculas/common/components/badge';
+import { Stepper } from '@sima-land/ui-nucleons/stepper';
+import FavSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Favorite';
+import cupSrc from './cup.jpg';
+
+export default {
+  title: 'desktop/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Компонент карточки товара',
+      },
+    },
+  },
+};
+
+export function NotEnough() {
+  const badges: BadgeProps[] = [
+    { color: '#b52ea8', fields: [{ type: 'text', value: '-56%' }] },
+    { color: '#ff7200', fields: [{ type: 'text', value: '3 по цене 2' }] },
+    { color: '#2962ff', fields: [{ type: 'text', value: 'Товар месяца' }] },
+    { color: '#00b8d4', fields: [{ type: 'text', value: 'Акция' }] },
+  ];
+
+  return (
+    <div style={{ width: '200px', margin: '32px' }}>
+      <ProductCard reduceBaseInfo={elem => reduceBaseInfo(elem, { hideImageButtons: false })}>
+        <ProductInfo restriction='unavailable'>
+          {/* Изображение */}
+          <Parts.Image src={cupSrc} href='https://www.sima-land.ru'>
+            <Parts.ImageButton
+              icon={FavSVG}
+              position={{ x: 'left', y: 'top' }}
+              hint='Добавить в избранное'
+              hintDirection='right'
+            />
+          </Parts.Image>
+
+          {/* Шильдики */}
+          <Parts.Badges lineLimit={2}>
+            {badges.map((badge, badgeIndex) => (
+              <Badge key={badgeIndex} {...badge} />
+            ))}
+          </Parts.Badges>
+
+          {/* Цены */}
+          <Parts.Prices price={99876543.21} oldPrice={99987654.32} currencyGrapheme='₽' />
+
+          {/* Название */}
+          <Parts.Title href='https://www.sima-land.ru'>
+            Ножницы портновские, с прорезиненной ручкой, 20 см, цвет чёрный/серый
+          </Parts.Title>
+
+          {/* Ссылка под названием */}
+          <Parts.TrademarkLink href='https://www.sima-land.ru/offers/'>
+            Торговая марка Сима-ленд
+          </Parts.TrademarkLink>
+
+          {/* Рейтинг */}
+          <Parts.RatingCounter value={4.7} reviewCount={52} />
+
+          {/* Произвольный контент */}
+          <Parts.Footer>
+            <Parts.CartControl
+              stepText='По 5 шт'
+              markupText='Комплектация + 50 ₽ при покупке до 20 шт'
+            >
+              <Stepper defaultValue={12} size='s' style={{ width: '122px' }} />
+            </Parts.CartControl>
+          </Parts.Footer>
+        </ProductInfo>
+      </ProductCard>
+    </div>
+  );
+}
+
+NotEnough.storyName = 'Нет в наличии';
diff --git a/src/desktop/components/product-card/__stories__/10-test-multiple-hover.stories.tsx b/src/desktop/components/product-card/__stories__/10-test-multiple-hover.stories.tsx
@@ -0,0 +1,91 @@
+import { ProductCard, reduceBaseInfo } from '@sima-land/moleculas/desktop/components/product-card';
+import { ProductInfo, Parts } from '@sima-land/moleculas/common/components/product-info';
+import { Badge, BadgeProps } from '@sima-land/moleculas/common/components/badge';
+import { Stepper } from '@sima-land/ui-nucleons/stepper';
+import FavSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/Favorite';
+import cupSrc from './cup.jpg';
+
+export default {
+  title: 'desktop/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Компонент карточки товара',
+      },
+    },
+  },
+};
+
+function SomeCard() {
+  const badges: BadgeProps[] = [
+    { color: '#b52ea8', fields: [{ type: 'text', value: '-56%' }] },
+    { color: '#ff7200', fields: [{ type: 'text', value: '3 по цене 2' }] },
+    { color: '#2962ff', fields: [{ type: 'text', value: 'Товар месяца' }] },
+    { color: '#00b8d4', fields: [{ type: 'text', value: 'Акция' }] },
+  ];
+
+  return (
+    <div style={{ width: '200px' }}>
+      <ProductCard reduceBaseInfo={elem => reduceBaseInfo(elem, { hideImageButtons: false })}>
+        <ProductInfo>
+          {/* Изображение */}
+          <Parts.Image src={cupSrc} href='https://www.sima-land.ru'>
+            <Parts.ImageButton
+              icon={FavSVG}
+              position={{ x: 'left', y: 'top' }}
+              hint='Добавить в избранное'
+              hintDirection='right'
+            />
+          </Parts.Image>
+
+          {/* Шильдики */}
+          <Parts.Badges lineLimit={2}>
+            {badges.map((badge, badgeIndex) => (
+              <Badge key={badgeIndex} {...badge} />
+            ))}
+          </Parts.Badges>
+
+          {/* Цены */}
+          <Parts.Prices price={99876543.21} oldPrice={99987654.32} currencyGrapheme='₽' />
+
+          {/* Название */}
+          <Parts.Title href='https://www.sima-land.ru'>
+            Ножницы портновские, с прорезиненной ручкой, 20 см, цвет чёрный/серый
+          </Parts.Title>
+
+          {/* Ссылка под названием */}
+          <Parts.TrademarkLink href='https://www.sima-land.ru/offers/'>
+            Торговая марка Сима-ленд
+          </Parts.TrademarkLink>
+
+          {/* Рейтинг */}
+          <Parts.RatingCounter value={4.7} reviewCount={52} />
+
+          {/* Произвольный контент */}
+          <Parts.Footer>
+            <Parts.CartControl
+              stepText='По 5 шт'
+              markupText='Комплектация + 50 ₽ при покупке до 20 шт'
+            >
+              <Stepper defaultValue={12} size='s' style={{ width: '122px' }} />
+            </Parts.CartControl>
+          </Parts.Footer>
+        </ProductInfo>
+      </ProductCard>
+    </div>
+  );
+}
+
+export function TestMultipleHover() {
+  return (
+    <div style={{ display: 'flex', gap: '32px', flexWrap: 'wrap', padding: '32px' }}>
+      {[...Array(10).keys()].map(index => (
+        <SomeCard key={index} />
+      ))}
+    </div>
+  );
+}
+
+TestMultipleHover.storyName = 'Тест: показ/скрытие всплывающей карточки';
diff --git a/src/desktop/components/product-card/__stories__/cup.jpg b/src/desktop/components/product-card/__stories__/cup.jpg