From 9d24a272f52d12ccf4d068a04e4b5a3d0e6c9287 Mon Sep 17 00:00:00 2001
From: Camilo Vega <59750365+camilovegag@users.noreply.github.com>
Date: Fri, 9 Feb 2024 07:43:52 -0500
Subject: [PATCH] Implement dot navigation (#159)

---
 packages/berlin/src/components/dots/Dots.styled.tsx | 5 +++++
 packages/berlin/src/components/dots/Dots.tsx        | 5 +++--
 packages/berlin/src/pages/Onboarding.tsx            | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/berlin/src/components/dots/Dots.styled.tsx b/packages/berlin/src/components/dots/Dots.styled.tsx
index b69a4690..10df935b 100644
--- a/packages/berlin/src/components/dots/Dots.styled.tsx
+++ b/packages/berlin/src/components/dots/Dots.styled.tsx
@@ -7,7 +7,12 @@ type DotProps = {
 export const Dot = styled.div<DotProps>`
   background-color: ${(props) => (props.$active ? 'var(--color-black)' : 'var(--color-gray)')};
   border-radius: 50%;
+  cursor: pointer;
   height: 0.5rem;
   transition: 0.2s ease-in;
   width: 0.5rem;
+
+  &:hover {
+    background-color: var(--color-black);
+  }
 `;
diff --git a/packages/berlin/src/components/dots/Dots.tsx b/packages/berlin/src/components/dots/Dots.tsx
index 391daa27..d5bef910 100644
--- a/packages/berlin/src/components/dots/Dots.tsx
+++ b/packages/berlin/src/components/dots/Dots.tsx
@@ -4,13 +4,14 @@ import { Dot } from './Dots.styled';
 type DotsProps = {
   dots: number;
   activeDotIndex: number;
+  setStep: React.Dispatch<React.SetStateAction<number>>;
 };
 
-function Dots({ dots, activeDotIndex }: DotsProps) {
+function Dots({ dots, activeDotIndex, setStep }: DotsProps) {
   return (
     <FlexRow>
       {Array.from({ length: dots }).map((_, index) => (
-        <Dot key={index} $active={index === activeDotIndex} />
+        <Dot key={index} $active={index === activeDotIndex} onClick={() => setStep(index)} />
       ))}
     </FlexRow>
   );
diff --git a/packages/berlin/src/pages/Onboarding.tsx b/packages/berlin/src/pages/Onboarding.tsx
index 81ed9982..94be8e6e 100644
--- a/packages/berlin/src/pages/Onboarding.tsx
+++ b/packages/berlin/src/pages/Onboarding.tsx
@@ -35,7 +35,7 @@ function Onboarding() {
     <FlexColumn $gap="3rem">
       <Title>{data[step].title}</Title>
       <BodyContent content={data[step].body} />
-      <Dots dots={data.length} activeDotIndex={step} />
+      <Dots dots={data.length} activeDotIndex={step} setStep={setStep} />
       <FlexRow>
         <Button onClick={handleSkip} $color="secondary">
           Skip