Tax buttons refactoring

apps/tax/pages/tax/index.tsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
 
-import { Box, Button, Divider, FormStepperV2, Section } from '@island.is/island-ui/core'
+import { Box, FormStepperV2, Section } from '@island.is/island-ui/core'
 import FormStepsLayout from '@island.is/tax/screens/Layouts/FormStepsLayout'
-
-import StepOne from './steps/StepOne'
-import StepTwo from './steps/StepTwo'
+import StepOne from '@island.is/tax/screens/Tax/steps/StepOne'
+import StepTwo from '@island.is/tax/screens/Tax/steps/StepTwo'
 
 const steps = [
   { title: 'Gagnaöflun', index: 0 },
@@ -30,30 +29,44 @@ export async function getServerSideProps() {
   }
 }
 
-const renderStep = (step: number) => {
-  switch (step) {
-    case 0:
-      return <StepOne></StepOne>
-    case 1:
-      return <StepTwo></StepTwo>
-    case 2:
-      return <div>Step3</div>
-    case 3:
-      return <div>Step4</div>
-    case 4:
-      return <div>Step5</div>
-    case 5:
-      return <div>Step6</div>
-    case 6:
-      return <div>Step7</div>
-    default:
-      break
-  }
-}
-
 const Tax = ({ taxInfo }) => {
   const [currentStep, setCurrentStep] = useState(0)
 
+  const renderStep = (step: number) => {
+    switch (step) {
+      case 0:
+        return <StepOne onForward={onForward} onBackward={onBackward}></StepOne>
+      case 1:
+        return <StepTwo onForward={onForward} onBackward={onBackward}></StepTwo>
+      case 2:
+        return <div>Step3</div>
+      case 3:
+        return <div>Step4</div>
+      case 4:
+        return <div>Step5</div>
+      case 5:
+        return <div>Step6</div>
+      case 6:
+        return <div>Step7</div>
+      default:
+        break
+    }
+  }
+
+  const onForward = () => {
+    if (currentStep < 6) {
+      const newStep = currentStep + 1
+      setCurrentStep(newStep)
+    }
+  }
+
+  const onBackward = () => {
+    if (currentStep > 0) {
+      const newStep = currentStep - 1
+      setCurrentStep(newStep)
+    }
+  }
+
   return (
     <FormStepsLayout
       sidebarContent={
@@ -71,39 +84,7 @@ const Tax = ({ taxInfo }) => {
         </Box>
       }
     >
-      <Box>
-        {renderStep(currentStep)}
-        <Box display="flex" justifyContent="spaceBetween">
-          <Button
-            colorScheme="destructive"
-            variant="ghost"
-            onClick={() => {
-              if (currentStep > 0) {
-                const newStep = currentStep - 1
-                setCurrentStep(newStep)
-              }
-            }}
-          >
-            Hætta við
-          </Button>
-          <Button
-            colorScheme="default"
-            iconType="filled"
-            preTextIconType="filled"
-            size="default"
-            variant="primary"
-            icon="arrowForward"
-            onClick={() => {
-              if (currentStep < 6) {
-                const newStep = currentStep + 1
-                setCurrentStep(newStep)
-              }
-            }}
-          >
-            Halda áfram
-          </Button>
-        </Box>
-      </Box>
+      {renderStep(currentStep)}
     </FormStepsLayout>
   )
 }

apps/tax/screens/Tax/Buttons.tsx

@@ -0,0 +1,33 @@
+import { Box, Button } from '@island.is/island-ui/core'
+
+type ButtonProps = {
+  onForward: () => void
+  onBackward: () => void
+}
+
+const Buttons = ({ onForward, onBackward }: ButtonProps) => {
+  return (
+    <Box display="flex" justifyContent="spaceBetween" marginTop={6}>
+      <Button
+        colorScheme="destructive"
+        variant="ghost"
+        onClick={() => onBackward()}
+      >
+        Hætta við
+      </Button>
+      <Button
+        colorScheme="default"
+        iconType="filled"
+        preTextIconType="filled"
+        size="default"
+        variant="primary"
+        icon="arrowForward"
+        onClick={() => onForward()}
+      >
+        Halda áfram
+      </Button>
+    </Box>
+  )
+}
+
+export default Buttons

apps/tax/pages/tax/steps/StepOne.tsx → apps/tax/screens/Tax/steps/StepOne.tsx

@@ -1,6 +1,13 @@
 import { Box, Checkbox, Icon, Text } from '@island.is/island-ui/core'
 
-const StepOne = () => {
+import Buttons from '../Buttons'
+
+type StepOneProps = {
+  onForward: () => void
+  onBackward: () => void
+}
+
+const StepOne = ({ onForward, onBackward }: StepOneProps) => {
   return (
     <Box
       background="white"
@@ -45,6 +52,8 @@ const StepOne = () => {
           subLabel="Ég skil að ofangreind gögn verði sótt rafrænt."
         />
       </Box>
+
+      <Buttons onBackward={onBackward} onForward={onForward}></Buttons>
     </Box>
   )
 }

apps/tax/pages/tax/steps/StepTwo.tsx → apps/tax/screens/Tax/steps/StepTwo.tsx

@@ -8,9 +8,16 @@ import {
   Text,
   Typography,
 } from '@island.is/island-ui/core'
-import { fieldWrapper } from '@island.is/tax/screens/StepTwo.css'
+import { fieldWrapper } from '@island.is/tax/screens/Tax/steps/StepTwo.css'
 
-const StepTwo = () => {
+import Buttons from '../Buttons'
+
+type StepTwoProps = {
+  onForward: () => void
+  onBackward: () => void
+}
+
+const StepTwo = ({ onForward, onBackward }: StepTwoProps) => {
   return (
     <Box
       background="white"
@@ -111,12 +118,13 @@ const StepTwo = () => {
         </GridRow>
       </GridContainer>
 
-      <Box paddingY={2}>
+      <Box paddingY={3}>
         <AlertMessage
           type="info"
           message="Ef netfang og símanúmer er ekki rétt hér að ofan þá verður að breyta þeim upplýsingum á mínum síðum Ísland.is"
         />
       </Box>
+      <Buttons onBackward={onBackward} onForward={onForward}></Buttons>
     </Box>
   )
 }