chore: Include Wizard header in step context

cloudscape-design · Jul 25, 2023 · 9bdd99a · 9bdd99a
1 parent ea832bb
commit 9bdd99a
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 38 deletions.
diff --git a/pages/funnel-analytics/with-error-alert-in-wizard.page.tsx b/pages/funnel-analytics/with-error-alert-in-wizard.page.tsx
@@ -7,13 +7,15 @@ import { i18nStrings } from '../wizard/common';
 import Alert from '~components/alert';
 import Container from '~components/container';
 import Header from '~components/header';
+import Link from '~components/link';
 
 export default function WizardPage() {
   const [errorMode, setErrorMode] = useState(0);
 
   const steps: WizardProps.Step[] = [
     {
       title: 'Step 1',
+      info: <Link variant="info">Info</Link>,
       content: (
         <div>
           <div>Content 1</div>

diff --git a/src/wizard/wizard-form.tsx b/src/wizard/wizard-form.tsx
@@ -63,49 +63,57 @@ export default function WizardForm({
 
   return (
     <>
-      <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>
-        <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>
-          {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}
-        </div>
-        <InternalHeader className={styles['form-header-component']} variant="h1" description={description} info={info}>
-          <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>
-            {title}
-            {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}
-          </span>
-        </InternalHeader>
-      </WizardFormHeader>
       <AnalyticsFunnelStep
         stepNameSelector={`.${styles['form-header-component-wrapper']}`}
         stepNumber={activeStepIndex + 1}
       >
         {({ funnelStepProps }) => (
-          <InternalForm
-            className={clsx(styles['form-component'])}
-            actions={
-              <WizardActions
-                cancelButtonText={i18nStrings.cancelButton}
-                primaryButtonText={isLastStep ? submitButtonText ?? i18nStrings.submitButton : i18nStrings.nextButton}
-                primaryButtonLoadingText={
-                  isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement
-                }
-                previousButtonText={i18nStrings.previousButton}
-                onCancelClick={onCancelClick}
-                onPreviousClick={onPreviousClick}
-                onPrimaryClick={onPrimaryClick}
-                onSkipToClick={() => onSkipToClick(skipToTargetIndex)}
-                showPrevious={activeStepIndex !== 0}
-                isPrimaryLoading={isPrimaryLoading}
-                showSkipTo={showSkipTo}
-                skipToButtonText={skipToButtonText}
-              />
-            }
-            secondaryActions={secondaryActions}
-            errorText={errorText}
-            errorIconAriaLabel={i18nStrings.errorIconAriaLabel}
-            {...funnelStepProps}
-          >
-            {content}
-          </InternalForm>
+          <>
+            <WizardFormHeader isMobile={isMobile || showCollapsedSteps} isVisualRefresh={isVisualRefresh}>
+              <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>
+                {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}
+              </div>
+              <InternalHeader
+                className={styles['form-header-component']}
+                variant="h1"
+                description={description}
+                info={info}
+              >
+                <span className={styles['form-header-component-wrapper']} tabIndex={-1} ref={stepHeaderRef}>
+                  {title}
+                  {isOptional && <i>{` - ${i18nStrings.optional}`}</i>}
+                </span>
+              </InternalHeader>
+            </WizardFormHeader>
+
+            <InternalForm
+              className={clsx(styles['form-component'])}
+              actions={
+                <WizardActions
+                  cancelButtonText={i18nStrings.cancelButton}
+                  primaryButtonText={isLastStep ? submitButtonText ?? i18nStrings.submitButton : i18nStrings.nextButton}
+                  primaryButtonLoadingText={
+                    isLastStep ? i18nStrings.submitButtonLoadingAnnouncement : i18nStrings.nextButtonLoadingAnnouncement
+                  }
+                  previousButtonText={i18nStrings.previousButton}
+                  onCancelClick={onCancelClick}
+                  onPreviousClick={onPreviousClick}
+                  onPrimaryClick={onPrimaryClick}
+                  onSkipToClick={() => onSkipToClick(skipToTargetIndex)}
+                  showPrevious={activeStepIndex !== 0}
+                  isPrimaryLoading={isPrimaryLoading}
+                  showSkipTo={showSkipTo}
+                  skipToButtonText={skipToButtonText}
+                />
+              }
+              secondaryActions={secondaryActions}
+              errorText={errorText}
+              errorIconAriaLabel={i18nStrings.errorIconAriaLabel}
+              {...funnelStepProps}
+            >
+              {content}
+            </InternalForm>
+          </>
         )}
       </AnalyticsFunnelStep>
     </>