From 3e2f7eab3b64e6eee575b7c4c41f7f76724661f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= <michasko37@gmail.com>
Date: Tue, 22 Mar 2022 13:46:04 +0100
Subject: [PATCH] fix(dashboard-v2): styling fixes for Slider component

---
 .../src/components/Slider/Bullets.js          |  2 +-
 .../src/components/Slider/Slide.js            |  2 +-
 .../src/components/Slider/Slider.js           | 23 +++++++++++++++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/dashboard-v2/src/components/Slider/Bullets.js b/packages/dashboard-v2/src/components/Slider/Bullets.js
index d7dff453..c090cef4 100644
--- a/packages/dashboard-v2/src/components/Slider/Bullets.js
+++ b/packages/dashboard-v2/src/components/Slider/Bullets.js
@@ -6,7 +6,7 @@ export default function Bullets({ visibleSlides, activeIndex, allSlides, changeS
   }
 
   return (
-    <div className="flex gap-3 pt-6">
+    <div className="flex gap-3 pt-6 justify-center sm:justify-start">
       {Array(allSlides - visibleSlides + 1)
         .fill(null)
         .map((_, index) => (
diff --git a/packages/dashboard-v2/src/components/Slider/Slide.js b/packages/dashboard-v2/src/components/Slider/Slide.js
index 4f700502..42d354ff 100644
--- a/packages/dashboard-v2/src/components/Slider/Slide.js
+++ b/packages/dashboard-v2/src/components/Slider/Slide.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import PropTypes from "prop-types";
 
 const Slide = styled.div.attrs(({ isVisible }) => ({
-  className: `slider-slide transition-opacity ${isVisible ? "" : "opacity-50 cursor-pointer"}`,
+  className: `slider-slide transition-opacity ${isVisible ? "" : "opacity-50 cursor-pointer select-none"}`,
 }))``;
 
 Slide.propTypes = {
diff --git a/packages/dashboard-v2/src/components/Slider/Slider.js b/packages/dashboard-v2/src/components/Slider/Slider.js
index ae311242..973b9941 100644
--- a/packages/dashboard-v2/src/components/Slider/Slider.js
+++ b/packages/dashboard-v2/src/components/Slider/Slider.js
@@ -22,12 +22,12 @@ const scrollableStyles = css`
 `;
 
 const Scroller = styled.div.attrs({
-  className: "slider-scroller grid gap-4 transition-transform",
+  className: "slider-scroller grid transition-transform",
 })`
   ${({ $scrollable }) => ($scrollable ? scrollableStyles : "")}
 `;
 
-const Slider = ({ slides, breakpoints }) => {
+const Slider = ({ slides, breakpoints, scrollerClassName, className }) => {
   const { visibleSlides, scrollable } = useActiveBreakpoint(breakpoints);
   const [activeIndex, setActiveIndex] = React.useState(0);
   const changeSlide = React.useCallback(
@@ -49,12 +49,13 @@ const Slider = ({ slides, breakpoints }) => {
   }, [slides.length, visibleSlides, activeIndex]);
 
   return (
-    <Container>
+    <Container className={className}>
       <Scroller
         $visibleSlides={visibleSlides}
         $allSlides={slides.length}
         $activeIndex={activeIndex}
         $scrollable={scrollable}
+        className={scrollerClassName}
       >
         {slides.map((slide, index) => {
           const isVisible = index >= activeIndex && index < activeIndex + visibleSlides;
@@ -63,7 +64,11 @@ const Slider = ({ slides, breakpoints }) => {
             <div key={`slide-${index}`}>
               <Slide
                 isVisible={isVisible || !scrollable}
-                onClickCapture={scrollable && !isVisible ? (event) => changeSlide(event, index) : null}
+                onClickCapture={
+                  scrollable && !isVisible
+                    ? (event) => changeSlide(event, index > activeIndex ? activeIndex + 1 : activeIndex - 1)
+                    : null
+                }
               >
                 {slide}
               </Slide>
@@ -101,6 +106,14 @@ Slider.propTypes = {
        * If set to false, all slides will be visible & rendered in a column.
        */
       scrollable: PropTypes.bool.isRequired,
+      /**
+       * Additional class names to apply to the <Scroller /> element.
+       */
+      scrollerClassName: PropTypes.string,
+      /**
+       * Additional class names to apply to the <Container /> element.
+       */
+      className: PropTypes.string,
     })
   ),
 };
@@ -123,6 +136,8 @@ Slider.defaultProps = {
       visibleSlides: 1,
     },
   ],
+  scrollerClassName: "gap-4",
+  className: "",
 };
 
 export default Slider;