Merge pull request #231 from DnD-Montreal/229-create-resizable-steppe…

…r-atom-component

Add re-usable stepper form component

resources/js/Components/Atom/StepperForm.tsx

@@ -0,0 +1,47 @@
+import {Box, Step, StepLabel, Stepper} from '@mui/material'
+import React, {ReactNode} from 'react'
+import styled from 'styled-components'
+
+type StepperFormPropType = {
+    stepTitles: string[]
+    stepContent: ReactNode[]
+    stepFooter: ReactNode[]
+    activeStep: number
+    isDrawer: boolean
+}
+
+const StyledBox = styled(Box)`
+    padding: 32px 0px 16px 0px;
+    width: 100%;
+`
+
+const FormBox = styled(Box)`
+    @media only screen and (max-width: 768px) {
+        width: 100vw;
+    }
+    margin-top: 16px;
+    width: ${(props) => (props.className === 'DrawerForm' ? '100%' : '65vw')};
+`
+
+const StepperForm = ({
+    activeStep,
+    stepTitles,
+    stepContent,
+    stepFooter,
+    isDrawer,
+}: StepperFormPropType) => (
+    <FormBox className={isDrawer ? 'DrawerForm' : 'FormBox'}>
+        <Stepper activeStep={activeStep}>
+            {stepTitles.map((label: string) => (
+                <Step completed={activeStep > 0}>
+                    <StepLabel>{label}</StepLabel>
+                </Step>
+            ))}
+        </Stepper>
+        <StyledBox>{stepContent[activeStep]}</StyledBox>
+        {stepFooter[activeStep]}
+    </FormBox>
+)
+
+StepperForm.displayName = 'StepperForm'
+export default StepperForm

resources/js/Components/Atom/index.ts

@@ -1,3 +1,4 @@
 export {default as DataTable} from './DataTable'
 export {default as Drawer} from './Drawer'
 export {default as Link} from './Link'
+export {default as StepperForm} from './StepperForm'