TP-1283: Update carousel

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.be5559d7.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.ea73c1e1.iframe.bundle.js"></script></body></html>

packages/carousel/package.json

@@ -5,7 +5,8 @@
   "module": "src/index.js",
   "files": [
     "lib",
-    "styles"
+    "styles",
+    "components"
   ],
   "dependencies": {
     "@oneloop/box": "^1.2.283",

packages/carousel/src/Carousel.stories.js

@@ -11,8 +11,10 @@ export const CarouselComponent = () => {
   const imgs = [
     'https://www.wallpaperuse.com/wallp/0-9852_m.jpg',
     'https://static.inmofactory.com/images/inmofactory/documents/1/124683/34021431/582525589.jpg?rule=web_412x257',
-    'https://staticbp.com/img/prop_new_b/534/00534436-01.jpg',
     'https://imgs.nestimg.com/casa_en_fraccionamiento_privadas_de_la_hacienda_3210125690712336672.jpg',
+    'https://static.inmofactory.com/images/inmofactory/documents/1/124683/34021431/582525589.jpg?rule=web_412x257',
+    'https://imgs.nestimg.com/casa_en_fraccionamiento_privadas_de_la_hacienda_3210125690712336672.jpg',
+    'https://static.tokkobroker.com/pictures/3576822133737522479342344804526371670339487603874495331054752417644934016466.jpg',
   ]
 
   const VIDEO = [
@@ -25,7 +27,7 @@ export const CarouselComponent = () => {
   const Video360 = ['https://my.matterport.com/show/?m=eURj8Qwwzb2']
 
   return (
-    <Box __css={{ width: '770px' }}>
+    <Box>
       <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}

packages/carousel/src/components/ButtonGallery.js

@@ -0,0 +1,32 @@
+import { Box } from '@oneloop/box'
+import React from 'react'
+import theme from '@oneloop/theme'
+
+export const ButtonGallery = ({ text, ...props }) => {
+  return (
+    <Box
+      __css={{
+        padding: '6px 12px',
+        color: '#FFF',
+        borderRadius: '32px',
+        background: theme.colors.secondary,
+        border: '1px solid #A2D4E5',
+        fontFamily: 'Nunito Sans',
+        fontSize: '12px',
+        fontWeight: '600',
+        cursor: 'pointer',
+        ':hover': {
+          background: '#A2D4E5',
+          color: theme.colors.secondary,
+        },
+        ':active': {
+          color: theme.colors.secondaryHover,
+          borderColor: theme.colors.secondary,
+        },
+      }}
+      {...props}
+    >
+      {text}
+    </Box>
+  )
+}

packages/carousel/src/components/FullScreen.js

@@ -0,0 +1,168 @@
+import React, { useEffect, useState } from 'react'
+import { Box } from '@oneloop/box'
+import { Icon } from '@oneloop/icons'
+import { Text } from '@oneloop/text'
+
+export const FullScreen = ({
+  fullscreen,
+  tabContainers,
+  tabSelected,
+  imgWithCover,
+  index,
+  setIndex,
+  setTabSelected,
+  video,
+  video360,
+  setFullscreen,
+  bluePrintsWithCover,
+}) => {
+  const [contTab, setContTab] = useState(0)
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [contTab, index])
+  useEffect(() => {
+    let newContTab
+    if (tabSelected === 'videos') {
+      newContTab = video.length
+    } else if (tabSelected === 'fotos') {
+      newContTab = imgWithCover.length
+    } else if (tabSelected === 'planos') {
+      newContTab = bluePrintsWithCover.length
+    } else if (tabSelected === 'video360') {
+      newContTab = video360.length
+    }
+    setContTab(newContTab)
+  }, [tabSelected])
+  const changeTabContainer = (tab) => {
+    setIndex(0)
+    setTabSelected(tab)
+  }
+  const handleKeyDown = (event) => {
+    if (event.key === 'ArrowRight') {
+      next()
+    }
+
+    if (event.key === 'ArrowLeft') {
+      prev()
+    }
+
+    if (event.key === 'Escape') {
+      closeFullscreen()
+    }
+  }
+  const next = () => setIndex((prev) => Math.min(contTab - 1, prev + 1))
+
+  const prev = () => setIndex((prev) => Math.max(0, prev - 1))
+  const closeFullscreen = () => {
+    setFullscreen(false)
+    setTabSelected('fotos')
+    setIndex(0)
+  }
+  return (
+    <Box className={`fullscreen ${fullscreen ? 'openFullscreen' : ''}`}>
+      <Box className="fsOverlay" onClick={closeFullscreen}></Box>
+      {tabContainers.length > 1 && (
+        <Box className="fsTabHeader">
+          {tabContainers.map((tab, i) => (
+            <Text
+              key={i}
+              onClick={() => changeTabContainer(tab.toLocaleLowerCase())}
+              className={`${
+                tabSelected === tab.toLocaleLowerCase() && 'tabSelected'
+              }`}
+              variant="bodyBold.fontSize14"
+            >
+              {tab}
+            </Text>
+          ))}
+        </Box>
+      )}
+      <Box className="fsContainerTabs" __css={{ position: 'relative' }}>
+        <Icon
+          icon="icon-atras"
+          className="iconPrev"
+          fontSize="40px"
+          onClick={prev}
+        />
+
+        {tabSelected === 'fotos' && (
+          <Box className="fsTabCont">
+            <Box className="fsTabContImage">
+              <img src={imgWithCover[index]} alt="Foto" />
+              <Text className="contFotos" variant="bodyBold.fontSize14">{`${
+                index + 1
+              }/${imgWithCover.length}`}</Text>
+            </Box>
+          </Box>
+        )}
+
+        {tabSelected === 'videos' && (
+          <Box className="fsTabCont">
+            <Box className="fsTabContImage">
+              <iframe
+                width="100%"
+                height="100%"
+                src={video[index]}
+                title="Video"
+                frameBorder="0"
+                allowFullScreen
+              />
+              <Text variant="bodyBold.fontSize14">{`${index + 1}/${
+                video.length
+              }`}</Text>
+            </Box>
+          </Box>
+        )}
+
+        {tabSelected === 'planos' && (
+          <Box className="fsTabCont">
+            <Box className="fsTabContImage">
+              <img src={bluePrintsWithCover[index]} alt="Foto" />
+              <Text variant="bodyBold.fontSize14">{`${index + 1}/${
+                bluePrintsWithCover.length
+              }`}</Text>
+            </Box>
+          </Box>
+        )}
+
+        {tabSelected === 'video360' && (
+          <Box className="fsTabCont">
+            <Box className="fsTabContImage">
+              <iframe
+                width="100%"
+                height="100%"
+                src={video360[index]}
+                title="Video"
+                frameBorder="0"
+                allowFullScreen
+              />
+              <Text variant="bodyBold.fontSize14">{`${index + 1}/${
+                video360.length
+              }`}</Text>
+            </Box>
+          </Box>
+        )}
+
+        <Icon
+          className="iconNext"
+          style={{ transform: 'rotate(180deg)' }}
+          onClick={next}
+          icon="icon-atras"
+          fontSize="40px"
+        />
+
+        <Box className="fsCloseIcon">
+          <Icon
+            onClick={closeFullscreen}
+            className="closeIcon"
+            icon="icon-cerrar"
+          />
+        </Box>
+      </Box>
+    </Box>
+  )
+}

packages/carousel/src/components/ImageCard.js

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { Box } from '@oneloop/box'
+import theme from '@oneloop/theme'
+
+const validateImageDimensions = async (imageUrl) => {
+  // eslint-disable-next-line no-undef
+  const img = new Image()
+  img.src = imageUrl
+
+  await new Promise((resolve) => {
+    img.onload = () => resolve()
+  })
+
+  return img.width > img.height
+}
+
+export const ImageCard = ({ url, styles, children, ...props }) => {
+  const [rectangle, setRectangle] = useState(false)
+  const isRectangle = async () => {
+    const isRectangle = await validateImageDimensions(url)
+    return setRectangle(isRectangle)
+  }
+  useEffect(() => {
+    isRectangle()
+  }, [url])
+
+  return (
+    <Box
+      __css={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: theme.colors.neutralGray8,
+        width: '100%',
+        height: '47%',
+        borderRadius: '12px',
+        backgroundSize: rectangle ? 'cover' : 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        backgroundImage: `url(${url})`,
+        cursor: 'pointer',
+        ...styles,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
+}