feat(paper-forms): progress bar on set-up pages

apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormModalContent.tsx

@@ -9,23 +9,42 @@ import {
 
 import { CreateFormDetailsScreen } from './CreateFormDetailsScreen'
 import { CreateFormOriginScreen } from './CreateFormOriginScreen'
+import { CreateFormProgressBar } from './CreateFormProgressBar'
 import { CreateFormStorageModeScreen } from './CreateFormStorageModeScreen'
 import {
   EmailModeCreationScreen,
   EmailModeFeedbackScreen,
 } 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 && <ModalCloseButton />}
+      {showProgressBar && (
+        <CreateFormProgressBar
+          currentStepIdx={progressStepIdx}
+          numSteps={PROGRESS_STEP_ORDER.length}
+        />
+      )}
       <XMotionBox keyProp={currentStep} custom={direction}>
         {currentStep === CreateFormFlowStates.Details && (
           <CreateFormDetailsScreen />

apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormOriginScreen.tsx

@@ -56,12 +56,12 @@ export const CreateFormOriginScreen = ({
   return (
     <>
       <ModalHeader color="secondary.700">
-        <Container maxW="42.5rem" p={0}>
+        <Container maxW="45rem" p={0}>
           {t(`${ORIGIN_I18N_PREFIX}.question`)}
         </Container>
       </ModalHeader>
       <ModalBody whiteSpace="pre-wrap">
-        <Container maxW="42.5rem" p={0}>
+        <Container maxW="45rem" p={0}>
           <FormControl
             isRequired
             isInvalid={!!errors.formOrigins?.value}

apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/CreateFormProgressBar.test.tsx

@@ -0,0 +1,29 @@
+import { screen } from '@testing-library/react'
+
+import { render } from '~/test-utils'
+
+import { CreateFormProgressBar } from './CreateFormProgressBar'
+
+describe('CreateFormProgressBar', () => {
+  it('reports the current step through progressbar aria attributes', () => {
+    render(<CreateFormProgressBar currentStepIdx={1} numSteps={3} />)
+
+    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(<CreateFormProgressBar currentStepIdx={0} numSteps={4} />)
+
+    expect(screen.getByTestId('progress-fill')).toHaveStyle({ width: '25%' })
+  })
+
+  it('is fully filled on the final step', () => {
+    render(<CreateFormProgressBar currentStepIdx={2} numSteps={3} />)
+
+    expect(screen.getByTestId('progress-fill')).toHaveStyle({ width: '100%' })
+  })
+})

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 (
+    <Box px="1.5rem" pt="1.5rem">
+      <Container maxW="45rem" p={0}>
+        <Box
+          role="progressbar"
+          aria-valuenow={currentStep}
+          aria-valuemin={1}
+          aria-valuemax={numSteps}
+          aria-label={`Step ${currentStep} of ${numSteps}`}
+          h="0.25rem"
+          w="100%"
+          bg="neutral.200"
+          borderRadius="2px"
+          overflow="hidden"
+        >
+          <Box
+            data-testid="progress-fill"
+            h="100%"
+            w={`${progress}%`}
+            bg="primary.500"
+            borderRadius="2px"
+            transition="width 0.35s cubic-bezier(0.4, 0, 0.2, 1)"
+          />
+        </Box>
+      </Container>
+    </Box>
+  )
+}

apps/frontend/src/features/workspace/components/CreateFormModal/CreateFormModalContent/SaveSecretKeyContent.tsx

@@ -73,7 +73,7 @@ export const SaveSecretKeyContent = ({
   return (
     <>
       <ModalBody whiteSpace="pre-wrap">
-        <Container maxW="42.5rem" p={0}>
+        <Container maxW="45rem" p={0}>
           <Box
             bg="white"
             borderRadius="4px"