feat: add dark ui on arrows on Swiper

WTTJ · Jul 17, 2023 · a17fd6c · a17fd6c
1 parent 44c4faf
commit a17fd6c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 17 deletions.
diff --git a/docs/pages/components/swiper.mdx b/docs/pages/components/swiper.mdx
@@ -20,6 +20,7 @@ import {
 ```jsx
 function() {
   const state = useSwiperState({ spaceBetween: 0 })
+
   return (
     <Swiper state={state} h="400">
       <img
@@ -46,6 +47,7 @@ Providing `slidesPerView` with `{ mobile: 1, tablet: 1, desktop: 2 }` will show
 ```jsx
 function() {
   const state = useSwiperState({ slidesPerView: { mobile: 1, tablet: 1, desktop: 2 } })
+
   return (
     <Swiper state={state} h={400}>
       <img
@@ -72,6 +74,7 @@ By providing `firstSlideToShow` with `2`, the swiper will begin on the second sl
 ```jsx
 function() {
   const state = useSwiperState({ firstSlideToShow: 2 })
+
   return (
     <Swiper state={state} h={400}>
       <img
@@ -98,6 +101,7 @@ By providing `centeredSlides`, the swiper will begin on the middle slide, `first
 ```jsx
 function() {
   const state = useSwiperState({ firstSlideToShow: 2, centeredSlides: true })
+
   return (
     <Swiper state={state} h={400}>
       <img
@@ -124,6 +128,7 @@ Providing `autoplay` lets the slides advance automatically. Pass `duration` to c
 ```jsx
 function() {
   const state = useSwiperState({ autoplay: true, loop: true })
+
   return (
     <Swiper state={state} h={400}>
       <img
@@ -150,6 +155,7 @@ By providing the optional `withPagination` with `{ mobile: true, desktop: true }
 ```jsx
 function() {
   const state = useSwiperState({ withPagination: { mobile: true, desktop: true } })
+
   return (
     <Swiper state={state} h={400}>
       <img
@@ -176,6 +182,7 @@ By providing the optional `withNavigation` with `{ mobile: false, desktop: false
 ```jsx
 function() {
   const state = useSwiperState({ withNavigation: { mobile: false, desktop: false }})
+
   return (
     <Swiper state={state} h={400}>
       <img
@@ -195,6 +202,24 @@ function() {
 }
 ```
 
+## With dark UI
+
+Use dark (black) colors for the pagination and arrows in case of slides too bright with `withDarkUI` props.
+
+```jsx
+function() {
+  const state = useSwiperState({ withPagination: { mobile: true, desktop: true }, withDarkUI: true })
+
+  return (
+    <Swiper state={state} h={350}>
+      {[...Array(6)].map(item => (
+        <Box border="1px solid" borderColor="dark-100" h={300} key={item} />
+      ))}
+    </Swiper>
+  )
+}
+```
+
 ## Properties
 
 <props propTypes={props.propTypes.Swiper} />

diff --git a/packages/Swiper/src/index.tsx b/packages/Swiper/src/index.tsx
@@ -28,8 +28,8 @@ export interface SwiperOptions {
   }
   /** Space between each slides */
   spaceBetween?: number
-  /** Use black colors for the pagination in case of slides too bright */
-  withDarkPagination?: boolean
+  /** Use black colors for the pagination and arrows in case of slides too bright */
+  withDarkUI?: boolean
   /** Show left and rigth navigation arrows on mobile/tablet or/and desktop */
   withNavigation?: {
     mobile: boolean
@@ -56,7 +56,7 @@ export const useSwiperState = (options: SwiperOptions = {}) => {
     loop = false,
     autoplay = false,
     duration = 5000,
-    withDarkPagination = false,
+    withDarkUI = false,
   } = options
 
   const shouldLoop = loop || autoplay
@@ -98,7 +98,7 @@ export const useSwiperState = (options: SwiperOptions = {}) => {
     autoplay,
     shouldLoop,
     duration,
-    withDarkPagination,
+    withDarkUI,
     ref,
     setShowLeftArrow,
     setShowRightArrow,
@@ -137,7 +137,7 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
     showRightArrow,
     slidesPerView,
     spaceBetween,
-    withDarkPagination,
+    withDarkUI,
     withNavigation,
     withPagination,
   } = state
@@ -287,7 +287,8 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
         position="absolute"
         shape="circle"
         size={navigationSize}
-        variant="ghost"
+        variant={withDarkUI ? 'secondary' : 'ghost'}
+        withDarkUI={withDarkUI}
         withNavigation={withNavigation}
       >
         <Icons.Left />
@@ -300,7 +301,8 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
         right={10}
         shape="circle"
         size={navigationSize}
-        variant="ghost"
+        variant={withDarkUI ? 'secondary' : 'ghost'}
+        withDarkUI={withDarkUI}
         withNavigation={withNavigation}
       >
         <Icons.Right />
@@ -326,7 +328,7 @@ export const Swiper = ({ children, dataTestId, state, ...rest }: SwiperProps) =>
               <S.Bullet
                 active={idx === currentPage}
                 key={`bullet-${idx + 1}`}
-                withDarkPagination={withDarkPagination}
+                withDarkUI={withDarkUI}
                 {...props}
               />
             )

diff --git a/packages/Swiper/src/styles.ts b/packages/Swiper/src/styles.ts
@@ -24,17 +24,23 @@ export const Swiper = styled.div<CreateWuiProps<'div'>>`
   ${system}
 `
 
-export const Arrow = styled(Button)<{ disabled: boolean } & Pick<SwiperState, 'withNavigation'>>(
-  ({ disabled, withNavigation: { desktop, mobile } }) => css`
+export const Arrow = styled(Button)<
+  { disabled: boolean } & Pick<SwiperState, 'withNavigation' | 'withDarkUI'>
+>(
+  ({ disabled, withDarkUI, withNavigation: { desktop, mobile } }) => css`
     top: 50%;
     transform: translate3d(0, -50%, 0);
     z-index: ${mobile ? 1 : -1};
     display: ${mobile ? 'flex' : 'none'};
-    background-color: light-900;
 
-    &:hover {
-      background-color: light-700;
-    }
+    ${!withDarkUI &&
+    css`
+      background-color: light-900;
+
+      &:hover {
+        background-color: light-700;
+      }
+    `}
 
     @media (min-width: md) {
       z-index: ${desktop ? 1 : -1};
@@ -67,15 +73,15 @@ export const Pagination = styled.div<Pick<SwiperState, 'withPagination'>>(
   `
 )
 
-export const Bullet = styled.div<{ active: boolean } & Pick<SwiperState, 'withDarkPagination'>>(
-  ({ active, withDarkPagination }) => css`
+export const Bullet = styled.div<{ active: boolean } & Pick<SwiperState, 'withDarkUI'>>(
+  ({ active, withDarkUI }) => css`
     height: 10;
     width: 10;
     border-radius: 50%;
     cursor: pointer;
     margin: 0 xxs;
     ${active ? th('swipers.navigation.bullet.active') : th('swipers.navigation.bullet.default')}
-    ${withDarkPagination &&
+    ${withDarkUI &&
     css`
       background-color: ${active ? 'dark-900' : 'dark-400'};
     `}