feat: Add modal-based step navigation for narrow viewports for Wizard component

src/wizard/internal.tsx

@@ -201,12 +201,14 @@ export default function InternalWizard({
             i18nStrings={i18nStrings}
             submitButtonText={submitButtonText}
             activeStepIndex={actualActiveStepIndex}
+            farthestStepIndex={farthestStepIndex.current}
             isPrimaryLoading={isLoadingNextStep}
             allowSkipTo={allowSkipTo}
             customPrimaryActions={customPrimaryActions}
             secondaryActions={secondaryActions}
             onCancelClick={onCancelClick}
             onPreviousClick={onPreviousClick}
+            onStepClick={onStepClick}
             onSkipToClick={onSkipToClick}
             onPrimaryClick={onPrimaryClick}
           />

src/wizard/styles.scss

@@ -261,8 +261,6 @@
 }
 
 .collapsed-steps {
-  color: awsui.$color-text-heading-secondary;
-  font-weight: styles.$font-weight-bold;
   padding-block-start: awsui.$space-scaled-xxs;
   &-hidden {
     display: none;
@@ -304,3 +302,120 @@
   display: flex;
   justify-content: flex-end;
 }
+
+/* Expandable step navigation styles */
+.expandable-step-list {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block-start: awsui.$space-s;
+  padding-block-end: 0;
+  padding-inline: 0;
+}
+
+.expandable-step-item {
+  display: grid;
+  grid-template-columns: awsui.$space-l 1fr;
+  column-gap: awsui.$space-xs;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.expandable-step-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  grid-column: 1;
+  grid-row: 1 / span 2;
+}
+
+.expandable-step-circle {
+  flex-shrink: 0;
+  inline-size: 12px;
+  block-size: 12px;
+  margin-block-start: 4px;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  box-sizing: border-box;
+}
+
+.expandable-step-circle-active {
+  background-color: awsui.$color-background-control-checked;
+  box-shadow:
+    0 0 0 3px awsui.$color-background-container-content,
+    0 0 0 5px awsui.$color-background-control-checked;
+}
+
+.expandable-step-circle-visited {
+  background-color: awsui.$color-text-interactive-default;
+  border-block: 2px solid awsui.$color-text-interactive-default;
+  border-inline: 2px solid awsui.$color-text-interactive-default;
+}
+
+.expandable-step-circle-next {
+  background-color: awsui.$color-text-interactive-default;
+  border-block: 2px solid awsui.$color-text-interactive-default;
+  border-inline: 2px solid awsui.$color-text-interactive-default;
+}
+
+.expandable-step-circle-unvisited {
+  background-color: awsui.$color-background-container-content;
+  border-block: 2px solid awsui.$color-text-interactive-disabled;
+  border-inline: 2px solid awsui.$color-text-interactive-disabled;
+}
+
+.expandable-step-line {
+  flex-grow: 1;
+  inline-size: 2px;
+  min-block-size: awsui.$space-m;
+  background-color: awsui.$color-border-divider-default;
+  margin-block: awsui.$space-xxs;
+}
+
+.expandable-step-content {
+  display: flex;
+  flex-direction: column;
+  grid-column: 2;
+  padding-block-end: awsui.$space-xs;
+}
+
+.expandable-step-label {
+  font-size: awsui.$font-size-body-s;
+  color: awsui.$color-text-small;
+}
+
+.expandable-step-title {
+  font-size: awsui.$font-size-body-m;
+}
+
+.expandable-step-title-active {
+  color: awsui.$color-background-control-checked;
+  font-weight: styles.$font-weight-bold;
+}
+
+.expandable-step-title-clickable {
+  @include styles.styles-reset;
+  background: transparent;
+  border-block: none;
+  border-inline: none;
+  padding-block: 0;
+  padding-inline: 0;
+  cursor: pointer;
+  text-align: start;
+  font-size: inherit;
+  color: awsui.$color-text-body-default;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.link-focus;
+  }
+}
+
+.expandable-step-title-unvisited {
+  color: awsui.$color-text-status-inactive;
+}

src/wizard/wizard-form.tsx

@@ -25,12 +25,14 @@ import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
 import { WizardProps } from './interfaces';
 import WizardActions from './wizard-actions';
 import WizardFormHeader from './wizard-form-header';
+import WizardStepNavigationExpandable from './wizard-step-navigation-expandable';
 
 import styles from './styles.css.js';
 
 interface WizardFormProps extends InternalBaseComponentProps {
   steps: ReadonlyArray<WizardProps.Step>;
   activeStepIndex: number;
+  farthestStepIndex: number;
   showCollapsedSteps: boolean;
   i18nStrings: WizardProps.I18nStrings;
   submitButtonText?: string;
@@ -41,6 +43,7 @@ interface WizardFormProps extends InternalBaseComponentProps {
   onCancelClick: () => void;
   onPreviousClick: () => void;
   onPrimaryClick: () => void;
+  onStepClick: (stepIndex: number) => void;
   onSkipToClick: (stepIndex: number) => void;
 }
 
@@ -75,6 +78,7 @@ function WizardForm({
   stepHeaderRef,
   steps,
   activeStepIndex,
+  farthestStepIndex,
   showCollapsedSteps,
   i18nStrings,
   submitButtonText,
@@ -85,6 +89,7 @@ function WizardForm({
   onCancelClick,
   onPreviousClick,
   onPrimaryClick,
+  onStepClick,
   onSkipToClick,
 }: WizardFormProps & { stepHeaderRef: MutableRefObject<HTMLDivElement | null> }) {
   const rootRef = useRef<HTMLElement>();
@@ -128,11 +133,22 @@ function WizardForm({
     }
   }, [funnelInteractionId, funnelIdentifier, isLastStep, errorText, __internalRootRef, errorSlotId, funnelStepInfo]);
 
+  const stepNavigationProps = {
+    activeStepIndex,
+    farthestStepIndex,
+    allowSkipTo,
+    i18nStrings,
+    isLoadingNextStep: isPrimaryLoading,
+    onStepClick,
+    onSkipToClick,
+    steps,
+  };
+
   return (
     <>
       <WizardFormHeader>
         <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>
-          {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}
+          <WizardStepNavigationExpandable {...stepNavigationProps} />
         </div>
         <InternalHeader
           className={styles['form-header-component']}