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 (
<>
-
+