diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx index 19143c2903..82fe3e4463 100644 --- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx +++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx @@ -9,6 +9,7 @@ import { import { CreateFormDetailsScreen } from './CreateFormDetailsScreen' import { CreateFormOriginScreen } from './CreateFormOriginScreen' +import { CreateFormProgressBar } from './CreateFormProgressBar' import { CreateFormStorageModeScreen } from './CreateFormStorageModeScreen' import { EmailModeCreationScreen, @@ -16,16 +17,34 @@ import { } from './EmailModeFeedbackAndCreateScreen' import { SaveSecretKeyScreen } from './SaveSecretKeyScreen' +// Set-up pages the progress bar spans, in order. +const PROGRESS_STEP_ORDER = [ + CreateFormFlowStates.Details, + CreateFormFlowStates.Origin, + CreateFormFlowStates.Landing, +] + /** * @preconditions Requires CreateFormWizardProvider parent * Display screen content depending on the current step (with animation). */ export const CreateFormModalContent = () => { - const { direction, currentStep } = useCreateFormWizard() + const { direction, currentStep, isPaperTrackingSetUpPageEnabled } = + useCreateFormWizard() + + const progressStepIdx = PROGRESS_STEP_ORDER.indexOf(currentStep) + const showProgressBar = + isPaperTrackingSetUpPageEnabled && progressStepIdx !== -1 return ( <> {currentStep !== CreateFormFlowStates.Landing && } + {showProgressBar && ( + + )} {currentStep === CreateFormFlowStates.Details && ( diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormOriginScreen.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormOriginScreen.tsx index 5f1df2d58d..b466a6c56b 100644 --- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormOriginScreen.tsx +++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormOriginScreen.tsx @@ -56,12 +56,12 @@ export const CreateFormOriginScreen = ({ return ( <> - + {t(`${ORIGIN_I18N_PREFIX}.question`)} - + { + it('reports the current step through progressbar aria attributes', () => { + render() + + const bar = screen.getByRole('progressbar') + expect(bar).toHaveAttribute('aria-valuenow', '2') + expect(bar).toHaveAttribute('aria-valuemin', '1') + expect(bar).toHaveAttribute('aria-valuemax', '3') + expect(bar).toHaveAccessibleName('Step 2 of 3') + }) + + it('fills proportionally to the current step', () => { + render() + + expect(screen.getByTestId('progress-fill')).toHaveStyle({ width: '25%' }) + }) + + it('is fully filled on the final step', () => { + render() + + expect(screen.getByTestId('progress-fill')).toHaveStyle({ width: '100%' }) + }) +}) diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormProgressBar.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormProgressBar.tsx new file mode 100644 index 0000000000..cf0374b223 --- /dev/null +++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormProgressBar.tsx @@ -0,0 +1,43 @@ +import { Box, Container } from '@chakra-ui/react' + +interface CreateFormProgressBarProps { + currentStepIdx: number + numSteps: number +} + +/** Progress bar shown across the paper-tracking create-form set-up pages. */ +export const CreateFormProgressBar = ({ + currentStepIdx, + numSteps, +}: CreateFormProgressBarProps): JSX.Element => { + const currentStep = currentStepIdx + 1 + const progress = (currentStep / numSteps) * 100 + + return ( + + + + + + + + ) +} diff --git a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/SaveSecretKeyContent.tsx b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/SaveSecretKeyContent.tsx index bed3e9955b..0820759450 100644 --- a/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/SaveSecretKeyContent.tsx +++ b/apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/SaveSecretKeyContent.tsx @@ -73,7 +73,7 @@ export const SaveSecretKeyContent = ({ return ( <> - +