Merge pull request #1659 from aguescribano87/development

TP-769: Fix styles carousel

docs/iframe.html

@@ -345,4 +345,4 @@
 
 
 
-            window['STORIES'] = [];</script><script src="runtime~main.75bdc4d7.iframe.bundle.js"></script><script src="vendors~main.793a6ce2.iframe.bundle.js"></script><script src="main.967e3f05.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [];</script><script src="runtime~main.75bdc4d7.iframe.bundle.js"></script><script src="vendors~main.793a6ce2.iframe.bundle.js"></script><script src="main.2b420323.iframe.bundle.js"></script></body></html>

packages/gallery/src/Gallery.stories.js → packages/gallery/src/Carousel.stories.js

@@ -1,13 +1,13 @@
 import React from 'react'
-import { Gallery } from '.'
+import { Carousel } from '.'
 import { Box } from '@oneloop/box'
 
 export default {
-  component: Gallery,
-  title: 'Gallery',
+  component: Carousel,
+  title: 'Carousel',
 }
 
-export const GalleyComponent = () => {
+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',
@@ -26,20 +26,20 @@ export const GalleyComponent = () => {
 
   return (
     <Box __css={{ width: '770px' }}>
-      <Gallery images={imgs} video={VIDEO} planos={PLANO} video360={Video360} />
+      <Carousel images={imgs} video={VIDEO} planos={PLANO} video360={Video360} />
     </Box>
   )
 }
 
-export const GalleyPocasImg = () => {
+export const CarouselPocasImg = () => {
   const imgs = [
     'https://www.wallpaperuse.com/wallp/0-9852_m.jpg',
     'https://i.blogs.es/439f3b/casa1/450_1000.png',
   ]
 
   return (
     <Box __css={{ width: '770px' }}>
-      <Gallery images={imgs} />
+      <Carousel images={imgs} />
     </Box>
   )
 }

packages/gallery/src/index.js

@@ -18,14 +18,22 @@ const ButtonGallery = ({ text, ...props }) => (
       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>
 )
 
-export const Gallery = ({
+export const Carousel = ({
   images = [],
   planos = [],
   video = [],
@@ -149,7 +157,7 @@ export const Gallery = ({
       >
         {!Images[0] && (
           <Icon
-            icon="icon-imagenes"
+            icon="icon-propiedades"
             fontSize="34px"
             color={theme.colors.neutralGray4}
           />
@@ -219,7 +227,7 @@ export const Gallery = ({
         >
           {!Images[1] && (
             <Icon
-              icon="icon-imagenes"
+              icon="icon-propiedades"
               fontSize="24px"
               color={theme.colors.neutralGray4}
             />
@@ -243,7 +251,7 @@ export const Gallery = ({
         >
           {!Images[2] && (
             <Icon
-              icon="icon-imagenes"
+              icon="icon-propiedades"
               fontSize="24px"
               color={theme.colors.neutralGray4}
             />
@@ -275,20 +283,22 @@ export const Gallery = ({
             fontSize="32px"
           />
         </Box>
-        <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>
+        {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">
           {/* Containers */}
 

packages/gallery/styles/gallery.css

@@ -1,20 +1,23 @@
 .fullscreen {
-  position: absolute;
+  position: fixed;
   display: flex;
   align-items: center;
   z-index: -1;
   opacity: 0;
-  transition: all 0.2s ease-in-out;
-  width: 0px;
-  height: 0px;
+  width: 100%;
+  height: 100%;
   flex-direction: column;
   padding: 40px;
   gap: 24px;
   overflow: hidden;
+  top: 0;
+  left: 0;
+  transition: opacity 0.4s ease-in-out;
+  visibility: hidden;
 }
 
 .fsOverlay {
-  background-color: var(--black);
+  background-color: #000000;
   opacity: 0.8;
   width: 100%;
   height: 100%;
@@ -25,14 +28,9 @@
 }
 
 .fullscreen.openFullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
   z-index: 1000;
   opacity: 1;
-  transform: scale(1);
-  width: 100%;
-  height: 100%;
+  visibility: visible;
 }
 
 .fsTabHeader {
@@ -54,6 +52,7 @@
 
 .fsTabHeader p:hover {
   color: var(--neutralGray1);
+  border-color: var(--neutralGray1);;
 }
 
 .fsTabHeader p.tabSelected {
@@ -99,12 +98,14 @@
 
 .fsTabContImage p {
   color: #fff;
+  position: absolute;
+  bottom: 50px;
 }
 
 .fsCloseIcon {
   position: absolute;
   color: #fff;
-  right: 72px;
-  top: 54px;
+  right: 156px;
+  top: 55px;
   cursor: pointer;
 }

packages/gallery/test/Gallery.spec.js

@@ -2,26 +2,26 @@
 import React from 'react'
 import { configure, mount } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
-import { Gallery } from '../src'
+import { Carousel } from '../src'
 
 configure({ adapter: new Adapter() })
 
-describe('Gallery', () => {
+describe('Carousel', () => {
   it('renders without crashing', () => {
-    const wrapper = mount(<Gallery />)
+    const wrapper = mount(<Carousel />)
     expect(wrapper).toBeDefined()
   })
 
   it('renders correct number of tabs', () => {
-    const wrapper = mount(<Gallery images={['', '']} />)
+    const wrapper = mount(<Carousel images={['', '']} />)
     const btn = wrapper.find('.buttonGallery')
 
     expect(btn.at(0).text()).toBe('Fotos')
   })
 
   it('toggles fullscreen correctly', () => {
     const wrapper = mount(
-      <Gallery
+      <Carousel
         images={['', '']}
         video={['', '']}
         video360={['', '']}
@@ -38,7 +38,7 @@ describe('Gallery', () => {
   })
 
   it('change img', () => {
-    const wrapper = mount(<Gallery images={['', '']} />)
+    const wrapper = mount(<Carousel images={['', '']} />)
     const next = wrapper.find('.iconNext').at(0)
 
     next.simulate('click')
@@ -57,7 +57,7 @@ describe('Gallery', () => {
   })
 
   it('close fullscreen', () => {
-    const wrapper = mount(<Gallery images={['', '']} />)
+    const wrapper = mount(<Carousel images={['', '']} />)
     const closeBtn = wrapper.find('.closeIcon').at(0)
 
     closeBtn.simulate('click')