Merge pull request #282 from sima-land/279-product-info-upd

Шаг 2 #279 ProductInfo: доработать в соответствии с новыми дизайн-гайдами
sima-land · Jul 22, 2024 · 68785af · 68785af
2 parents 43c62f1 + e633d5c
commit 68785af
Show file tree

Hide file tree

Showing 28 changed files with 179 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}