department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
282 stars 202 forks source link

Update form navigation to use new v3SegmentedProgressBar #67600

Closed oddball-lindsay closed 1 year ago

oddball-lindsay commented 1 year ago

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

oddball-lindsay commented 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: image

holdenhinkle commented 1 year ago

PR - https://github.com/department-of-veterans-affairs/vets-website/pull/26178