Merge pull request #1803 from aguescribano87/development

TP-1277: Front img carousel
TokkoLabs · Apr 25, 2024 · 2abcee3 · 2abcee3
2 parents 34706d0 + b284fe2
commit 2abcee3
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 14 deletions.
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -345,4 +345,4 @@
 
 
 
-            window['STORIES'] = [];</script><script src="runtime~main.087d072d.iframe.bundle.js"></script><script src="vendors~main.bed38707.iframe.bundle.js"></script><script src="main.ebc844bb.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [];</script><script src="runtime~main.087d072d.iframe.bundle.js"></script><script src="vendors~main.bed38707.iframe.bundle.js"></script><script src="main.5eff0b0f.iframe.bundle.js"></script></body></html>
diff --git a/docs/main.5eff0b0f.iframe.bundle.js b/docs/main.5eff0b0f.iframe.bundle.js
diff --git a/...ain.ebc844bb.iframe.bundle.js.LICENSE.txt → ...ain.5eff0b0f.iframe.bundle.js.LICENSE.txt b/...ain.ebc844bb.iframe.bundle.js.LICENSE.txt → ...ain.5eff0b0f.iframe.bundle.js.LICENSE.txt
diff --git a/docs/main.5eff0b0f.iframe.bundle.js.map b/docs/main.5eff0b0f.iframe.bundle.js.map
diff --git a/docs/main.ebc844bb.iframe.bundle.js b/docs/main.ebc844bb.iframe.bundle.js
diff --git a/docs/main.ebc844bb.iframe.bundle.js.map b/docs/main.ebc844bb.iframe.bundle.js.map
diff --git a/packages/carousel/src/Carousel.stories.js b/packages/carousel/src/Carousel.stories.js
@@ -20,13 +20,14 @@ export const CarouselComponent = () => {
     'https://www.youtube.com/embed/70KXYjyzFK4',
   ]
 
-  const PLANO = ['https://www.krellbrokers.com/images/plano-2.png']
+  const PLANO = ['https://cedreo.com/wp-content/uploads/2023/10/ES_CASA-4-HABITACIONES_2D_GROUND-FLOOR-PLAN_624.png']
 
   const Video360 = ['https://my.matterport.com/show/?m=eURj8Qwwzb2']
 
   return (
     <Box __css={{ width: '770px' }}>
       <Carousel
+        frontCoverBlueprints="https://hips.hearstapps.com/hmg-prod/images/apartamento15-organizada-1528886170.jpg?crop=1.00xw:0.669xh;0,0.160xh&resize=640:*"
         images={imgs}
         video={VIDEO}
         planos={PLANO}

diff --git a/packages/carousel/src/index.js b/packages/carousel/src/index.js
@@ -87,14 +87,28 @@ export const Carousel = ({
   video = [],
   video360 = [],
   otherComponent = false,
+  frontCoverImg = false,
+  frontCoverBlueprints = false,
   ...props
 }) => {
-  const Images = [...images, ...planos]
   const [fullscreen, setFullscreen] = useState(false)
   const [tabSelected, setTabSelected] = useState('fotos')
   const tabContainers = []
   const [index, setIndex] = useState(0)
   const [contTab, setContTab] = useState(0)
+  const Images = [...images, ...planos]
+  const imgWithCover = [...images]
+  const bluePrintsWithCover = [...planos]
+
+  if (frontCoverImg) {
+    Images.unshift(frontCoverImg)
+    imgWithCover.unshift(frontCoverImg)
+  }
+
+  if (frontCoverBlueprints) {
+    Images.unshift(frontCoverBlueprints)
+    bluePrintsWithCover.unshift(frontCoverBlueprints)
+  }
 
   const changeTabContainer = (tab) => {
     setIndex(0)
@@ -122,9 +136,9 @@ export const Carousel = ({
     if (tabSelected === 'videos') {
       newContTab = video.length
     } else if (tabSelected === 'fotos') {
-      newContTab = images.length
+      newContTab = imgWithCover.length
     } else if (tabSelected === 'planos') {
-      newContTab = planos.length
+      newContTab = bluePrintsWithCover.length
     } else if (tabSelected === 'video360') {
       newContTab = video360.length
     }
@@ -175,6 +189,7 @@ export const Carousel = ({
   const closeFullscreen = () => {
     setFullscreen(false)
     setTabSelected('fotos')
+    setIndex(0)
   }
 
   return (
@@ -287,7 +302,7 @@ export const Carousel = ({
                     fontSize: '14px',
                     fontWeight: '700',
                   }}
-                >{`+${images.length - 3}`}</Box>
+                >{`+${Images.length - 3}`}</Box>
               )}
             </ImageCard>
           </Box>
@@ -327,10 +342,10 @@ export const Carousel = ({
           {tabSelected === 'fotos' && (
             <Box className="fsTabCont">
               <Box className="fsTabContImage">
-                <img src={images[index]} alt="Foto" />
+                <img src={imgWithCover[index]} alt="Foto" />
                 <Text className="contFotos" variant="bodyBold.fontSize14">{`${
                   index + 1
-                }/${images.length}`}</Text>
+                }/${imgWithCover.length}`}</Text>
               </Box>
             </Box>
           )}
@@ -356,9 +371,9 @@ export const Carousel = ({
           {tabSelected === 'planos' && (
             <Box className="fsTabCont">
               <Box className="fsTabContImage">
-                <img src={planos[index]} alt="Foto" />
+                <img src={bluePrintsWithCover[index]} alt="Foto" />
                 <Text variant="bodyBold.fontSize14">{`${index + 1}/${
-                  planos.length
+                  bluePrintsWithCover.length
                 }`}</Text>
               </Box>
             </Box>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -345,4 +345,4 @@



		window['STORIES'] = [];</script><script src="runtime~main.087d072d.iframe.bundle.js"></script><script src="vendors~main.bed38707.iframe.bundle.js"></script><script src="main.ebc844bb.iframe.bundle.js"></script></body></html>
		window['STORIES'] = [];</script><script src="runtime~main.087d072d.iframe.bundle.js"></script><script src="vendors~main.bed38707.iframe.bundle.js"></script><script src="main.5eff0b0f.iframe.bundle.js"></script></body></html>