All files / components/Form/FormStepsButtons FormStepsButtons.tsx

100% Statements 2/2
100% Branches 5/5
100% Functions 1/1
100% Lines 2/2

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66                                      24x             449x                                                                              
import { Button } from '../../ButtonsAndLinks/Button/Button'
import { Route } from '../../ButtonsAndLinks/Route/Route'
 
export type FormStepsButtonsProps = {
	/** Called when click back button. Do the same as submit. */
	previousOnClick?: () => Promise<void>
	/** Page link to before current page. */
	previousHref: string
	/** Page link to after current page. */
	nextHref: string
	/** Next step loading. */
	loading?: boolean
	/** Form dirty state. */
	dirty: boolean
}
 
/**
 * Buttons to use for the funnel form. Displays next and previous step buttons.
 */
export const FormStepsButtons: React.FC<FormStepsButtonsProps> = ({
	previousOnClick,
	loading = false,
	dirty,
	previousHref,
	nextHref,
}) => {
	return (
		<div className="mb-4 mt-8 flex flex-col items-center justify-between md:mb-5 md:mt-10 md:flex-row">
			{/* Previous Step */}
			{!dirty ? (
				<Route datacy="route-previous-submit" href={previousHref} className="order-1 md:order-none" kind="tertiary">
					Vorheriger Schritt
				</Route>
			) : (
				<Button
					datacy="button-previous-submit"
					type="button"
					loading={loading}
					onClick={previousOnClick}
					className="order-1 md:order-none"
					kind="tertiary"
				>
					Vorheriger Schritt
				</Button>
			)}
 
			{/* Next Step - Submit Button */}
			{!dirty ? (
				<Route datacy="route-next-submit" href={nextHref} icon="arrow_forward" className="mb-4 md:mb-0">
					Nächster Schritt
				</Route>
			) : (
				<Button
					datacy="button-next-submit"
					type="submit"
					className="mb-4 md:mb-0"
					loading={loading}
					icon="arrow_forward"
				>
					Nächster Schritt
				</Button>
			)}
		</div>
	)
}