Closed oddball-lindsay closed 1 year ago
The v3 design system is located in src/platform/forms-system/src/js/components/FormNav.jsx
const v3SegmentedProgressBar = formConfig?.v3SegmentedProgressBar;
// show progress-bar and stepText only if hideFormNavProgress is falsy.
return (
<div>
{!hideFormNavProgress && (
<va-segmented-progress-bar
total={chaptersLengthDisplay}
current={currentChapterDisplay}
uswds={v3SegmentedProgressBar}
heading-text={chapterName ?? ''} // functionality only available for v3
{...(v3SegmentedProgressBar ? { 'header-level': '2' } : {})}
/>
)}
{!v3SegmentedProgressBar &&
!hideFormNavProgress && (
<div className="schemaform-chapter-progress">
<div className="nav-header nav-header-schemaform">
{showHeader ? (
<h2
id="nav-form-header"
data-testid="navFormHeader"
className="vads-u-font-size--h4"
>
{stepText}
{inProgressMessage}
</h2>
) : (
<div data-testid="navFormDiv" className="vads-u-font-size--h4">
{stepText}
{inProgressMessage}
</div>
)}
</div>
</div>
)}
</div>
);
A few other forms are also using this v3 design:
Issue Description
There is a new v3 progress bar that has been tested and is ready for use.
Navigation currently in use: Private Zenhub Image
New v3 design: Private Zenhub Image
Tasks
Acceptance Criteria