From 91f308bcaa64925294258a2df2cf15f03f9fe787 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 24 Oct 2023 17:20:47 +0300
Subject: [PATCH] feat: add state and change function to OSCards story

---
 .../ValidatorInstalling/OSCards.stories.tsx    | 18 +++++++++++++-----
 .../ValidatorInstalling/OSCards.tsx            |  6 +++---
 .../ValidatorInstalling/ValidatorInstall.tsx   |  4 ++--
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
index 7a077a03..0da83319 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
 
 import OSCards from './OSCards'
 import { MAC } from '../../../../constants'
@@ -15,9 +16,16 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    selectedOs: MAC,
-    handleOsCardClick: () => {},
-  },
+export const Default: Story = (args: { selectedOS: string }) => {
+  const [selectedOS, setSelectedOS] = useState(args.selectedOS)
+
+  const handleOSCardClick = (os: string) => {
+    setSelectedOS(os)
+  }
+
+  return <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
+}
+
+Default.args = {
+  selectedOS: MAC,
 }
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index 888af880..dd09c888 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -20,10 +20,10 @@ const cards = [
 
 type OSCardsProps = {
   selectedOS: string
-  handleOsCardClick: (os: string) => void
+  handleOSCardClick: (os: string) => void
 }
 
-const OSCards = ({ selectedOS, handleOsCardClick }: OSCardsProps) => {
+const OSCards = ({ selectedOS, handleOSCardClick }: OSCardsProps) => {
   return (
     <XStack justifyContent={'space-between'} my={'15px'}>
       {cards.map(card => (
@@ -32,7 +32,7 @@ const OSCards = ({ selectedOS, handleOsCardClick }: OSCardsProps) => {
           icon={card.icon}
           name={card.name}
           isSelected={selectedOS === card.name}
-          onClick={() => handleOsCardClick(card.name)}
+          onClick={() => handleOSCardClick(card.name)}
         />
       ))}
     </XStack>
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index 58ff994c..caf647db 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -13,7 +13,7 @@ const ValidatorSetupInstall = () => {
   const [selectedOS, setSelectedOS] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
 
-  const handleOsCardClick = (os: string) => {
+  const handleOSCardClick = (os: string) => {
     setSelectedOS(os)
   }
 
@@ -36,7 +36,7 @@ const ValidatorSetupInstall = () => {
         <Text size={15} color="#647084" weight={'regular'}>
           {DOCUMENTATIONS[selectedClient].general}
         </Text>
-        <OSCards selectedOS={selectedOS} handleOsCardClick={handleOsCardClick} />
+        <OSCards selectedOS={selectedOS} handleOSCardClick={handleOSCardClick} />
         <YStack space={'$2'}>
           <Text size={19}>Package Managers</Text>
           <Text size={15} weight={'semibold'}>