Feature Description

Create the component only for the Progress snack bar for the PDF generation feature.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new reusable PDF generation progress snackbar component is added for dashboard context.
• The component copy and visually matches the Figma design
• The component supports external control via props (for progress value and cancel handler), so it can be wired to orchestrator state later.
• The component is accessible:
  • Progress indicator exposes proper progress semantics.
  • Cancel control is keyboard accessible.
  • Snackbar content can be announced non-intrusively (aria-live="polite" or equivalent).
• The component is responsive and keeps snackbar positioning consistent with Site Kit snackbar behavior on desktop and mobile.
• Scope is component-only: no wiring into PDF export flow, datastore, notification registration, etc in this issue.

Implementation Brief

• Add assets/js/components/pdf-export/PDFReportProgressSnackbar.tsx.
  • Use assets/js/components/Notice component
  • Use existing googlesitekit-notice-snackbar--bottom-right class to adapt snackbar behaviour
  • Render top assets/js/googlesitekit/components-gm2/ProgressBar.js as determinate (indeterminate={ false }, compress, height={ 8 }, progress in 0..1).
  • Render Notice below progress bar using Notice.TYPES.INFO_ALT_2, hideIcon, and a dismiss action labeled Cancel.
  • Add default copy for title, description and cancel label from referenced Figma design
  • Expose props: progress, onCancel, title, description, cancelLabel, className.
    • onCancel is a required prop callback invoked from the Cancel action; cancellation side effects should be handled by the integrating parent/orchestrator, not by this component.
  • Ensure component is presentational only (no datastore/selectors/notification registration side effects).
  • Add scoped styles in assets/sass/components/pdf-export/_googlesitekit-pdf-report-progress-snackbar.scss.
    • Import the new partial in admin.scss
  • Keep all visual overrides under .googlesitekit-pdf-report-progress-snackbar to avoid regressions in existing notice/toast components.

Test Coverage

• Add PDFReportProgressSnackbar.test.ts.
  • Verify default text renders.
  • Verify custom title/description/cancelLabel render.
  • Verify progressbar is present and updates from progress prop.
  • Verify onCancel is called on Cancel click.
• Add PDFReportProgressSnackbar.stories.js with:
  • Initial progress
  • Mid progress (we can include only this scenario to the VRT)
  • Near-complete progress

QA Brief

• Scope: Component-only delivery. There is no integration into the PDF export flow yet, the component is verified through Storybook.
• Where to find it: Storybook → Components / PDFExport / PDFReportProgressSnackbar. Three stories: Initial (5%), MidProgress (50%, included in VRT), NearComplete (90%).
• Visual: Confirm each story matches the Figma design.

Changelog entry

• Create the Progress snackbar component