feat: add Swiper slider

RenatoFranca · RenatoFranca · commit fa28514eacb5 · 2020-10-14T12:18:48.000-03:00
diff --git a/package.json b/package.json
@@ -19,7 +19,9 @@
     "next": "9.5.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "styled-components": "^5.2.0"
+    "sass": "^1.27.0",
+    "styled-components": "^5.2.0",
+    "swiper": "^6.3.3"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
diff --git a/src/components/AppBar/index.tsx b/src/components/AppBar/index.tsx
@@ -26,7 +26,11 @@ const AppBar = ({ testID, secondaryAppBar }: IAppBar) => {
           </S.SecondaryAppBarContainer>
         </S.SecondaryAppBar>
       )}
-      <S.AppBar color="secondary" data-secondary-app-bar={secondaryAppBar}>
+      <S.AppBar
+        color="secondary"
+        position="static"
+        data-secondary-app-bar={secondaryAppBar}
+      >
         <S.Toolbar>
           <Container>
             <S.IconButton edge="start" color="inherit" aria-label="menu">
diff --git a/src/components/AppBar/test.tsx b/src/components/AppBar/test.tsx
@@ -16,7 +16,8 @@ const appBarProps: IAppBar = {
         text: 'SiteFácil',
         link: {
           aria: 'Link to SiteFácil',
-          url: 'http://sitefacil.co'
+          url: 'http://sitefacil.co',
+          icon: false
         }
       }
     ]
diff --git a/src/components/Site/index.tsx b/src/components/Site/index.tsx
@@ -4,6 +4,8 @@ import { ISite } from './types'
 import FacebookIcon from '@material-ui/icons/Facebook'
 import InstagramIcon from '@material-ui/icons/Instagram'
 import TwitterIcon from '@material-ui/icons/Twitter'
+import Slider from 'components/Slider'
+import { ISlider } from 'components/Slider/types'
 
 const appBarProps: IAppBar = {
   secondaryAppBar: {
@@ -46,10 +48,18 @@ const appBarProps: IAppBar = {
   }
 }
 
+const sliderProps: ISlider = {
+  images: [
+    'https://images.unsplash.com/photo-1553551427-d4bbcd986ff5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80',
+    'https://images.unsplash.com/photo-1551125337-ca452e9e0339?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'
+  ]
+}
+
 const Site = ({ testID }: ISite) => {
   return (
     <S.Wrapper data-testid={testID}>
       <S.AppBar {...appBarProps} />
+      <Slider {...sliderProps}></Slider>
     </S.Wrapper>
   )
 }
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
@@ -0,0 +1,29 @@
+import * as S from './styles'
+import { ISlider } from './types'
+import SwiperCore, { Autoplay, Navigation } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+SwiperCore.use([Autoplay, Navigation])
+
+const Slider = ({ testID, images }: ISlider) => {
+  return (
+    <S.Wrapper data-testid={testID}>
+      <Swiper
+        centeredSlides={true}
+        navigation
+        autoplay
+        autoHeight={true}
+        loop={true}
+      >
+        {images &&
+          images.map((image, index) => (
+            <SwiperSlide key={index}>
+              <img src={image} />
+            </SwiperSlide>
+          ))}
+      </Swiper>
+    </S.Wrapper>
+  )
+}
+
+export default Slider
diff --git a/src/components/Slider/styles.ts b/src/components/Slider/styles.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  img {
+    width: 100%;
+  }
+`
diff --git a/src/components/Slider/test.tsx b/src/components/Slider/test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import Slider from '.'
+import { ISlider } from './types'
+
+const sliderProps: ISlider = {
+  testID: 'slider'
+}
+
+beforeEach(() => {
+  render(<Slider {...sliderProps} />)
+})
+
+describe('<Slider />', () => {
+  it('should render a <Slider /> component', () => {
+    expect(screen.getByTestId('slider')).toBeVisible()
+  })
+})
diff --git a/src/components/Slider/types.ts b/src/components/Slider/types.ts
@@ -0,0 +1,4 @@
+export interface ISlider {
+  testID?: string
+  images: string[]
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -7,6 +7,8 @@ import { ThemeProvider } from '@material-ui/core/styles'
 import theme from 'styles/theme'
 import { CssBaseline } from '@material-ui/core'
 
+import '../../node_modules/swiper/swiper-bundle.min.css'
+
 function App({ Component, pageProps }: AppProps) {
   React.useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
diff --git a/yarn.lock b/yarn.lock
@@ -4748,6 +4748,21 @@ chokidar@2.1.8, chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+"chokidar@>=2.0.0 <4.0.0":
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.5.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chokidar@^3.3.0, chokidar@^3.4.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
@@ -6093,6 +6108,13 @@ dom-walk@^0.1.0:
   resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
   integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
 
+dom7@^3.0.0-alpha.7:
+  version "3.0.0-alpha.9"
+  resolved "https://registry.yarnpkg.com/dom7/-/dom7-3.0.0-alpha.9.tgz#0110c21181b8bad3a1ee72443e04d3c2e3f1d38f"
+  integrity sha512-wTxPe1vJqLAy2PzAROh/n1PsRF/ZklAJyRIn9shm2dAQjP4JhjsgDKQ1YTbuzf1KVlqOlqYPmwupQExcB9jOUg==
+  dependencies:
+    ssr-window "^3.0.0-alpha.1"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -12802,6 +12824,13 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+  integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 recast@^0.14.7:
   version "0.14.7"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.14.7.tgz#4f1497c2b5826d42a66e8e3c9d80c512983ff61d"
@@ -13337,6 +13366,13 @@ sass-loader@10.0.2:
     schema-utils "^2.7.1"
     semver "^7.3.2"
 
+sass@^1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.27.0.tgz#0657ff674206b95ec20dc638a93e179c78f6ada2"
+  integrity sha512-0gcrER56OkzotK/GGwgg4fPrKuiFlPNitO7eUJ18Bs+/NBlofJfMxmxqpqJxjae9vu0Wq8TZzrSyxZal00WDig==
+  dependencies:
+    chokidar ">=2.0.0 <4.0.0"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -13894,6 +13930,11 @@ sshpk@^1.7.0:
     safer-buffer "^2.0.2"
     tweetnacl "~0.14.0"
 
+ssr-window@^3.0.0-alpha.1, ssr-window@^3.0.0-alpha.4:
+  version "3.0.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-3.0.0-alpha.4.tgz#0c69a18c4305ecccdd8e11596155ca07b635f345"
+  integrity sha512-+dBRP/pZ+VyITxTzD0lMDzDwN/BmfUl8xi2e6t5Nz4+FqUphfcBLB1OOUSYCRNFB25rD3c8AJRYpY5rHTbL+kg==
+
 ssri@^6.0.0, ssri@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
@@ -14337,6 +14378,14 @@ svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swiper@^6.3.3:
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-6.3.3.tgz#e0b2e27621c07e789bfa91569b5676e896d18001"
+  integrity sha512-SnG1weu2GhqKxuG4NTIA1A6OE9x3P/+d2DW6APLUgYNHm0ZgkAOxL/tEDubiHvgwqtaVaz6QWqkSbCaDYffSNg==
+  dependencies:
+    dom7 "^3.0.0-alpha.7"
+    ssr-window "^3.0.0-alpha.4"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,8 @@ const appBarProps: IAppBar = {`
`16`	`16`	`text: 'SiteFácil',`
`17`	`17`	`link: {`
`18`	`18`	`aria: 'Link to SiteFácil',`
`19`		`- url: 'http://sitefacil.co'`
	`19`	`+ url: 'http://sitefacil.co',`
	`20`	`+ icon: false`
`20`	`21`	`}`
`21`	`22`	`}`
`22`	`23`	`]`