feat: first test for new wizard

Author: Who-is-PS

src/i18n/messages/all.en.json

@@ -468,6 +468,9 @@
     "i18nStrings.nextButton": "Next",
     "i18nStrings.optional": "optional",
     "i18nStrings.nextButtonLoadingAnnouncement": "Loading next step",
-    "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form"
+    "i18nStrings.submitButtonLoadingAnnouncement": "Submitting form",
+    "i18nStrings.stepNavigationTitle": "Step",
+    "i18nStrings.stepNavigationDismissAriaLabel": "Close step navigation",
+    "i18nStrings.stepNavigationConfirmButton": "Ok"
   }
-}
+}

src/wizard/interfaces.ts

@@ -170,6 +170,9 @@ export namespace WizardProps {
     optional?: string;
     nextButtonLoadingAnnouncement?: string;
     submitButtonLoadingAnnouncement?: string;
+    stepNavigationTitle?: string;
+    stepNavigationDismissAriaLabel?: string;
+    stepNavigationConfirmButton?: string;
   }
 
   export interface NavigateDetail {

src/wizard/internal.tsx

@@ -136,6 +136,9 @@ export default function InternalWizard({
     previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),
     nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),
     optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),
+    stepNavigationTitle: rest.i18nStrings?.stepNavigationTitle,
+    stepNavigationDismissAriaLabel: rest.i18nStrings?.stepNavigationDismissAriaLabel,
+    stepNavigationConfirmButton: rest.i18nStrings?.stepNavigationConfirmButton,
   };
 
   if (activeStepIndex && activeStepIndex >= steps.length) {
@@ -201,12 +204,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,14 +261,163 @@
 }
 
 .collapsed-steps {
-  color: awsui.$color-text-heading-secondary;
-  font-weight: styles.$font-weight-bold;
   padding-block-start: awsui.$space-scaled-xxs;
   &-hidden {
     display: none;
   }
 }
 
+.collapsed-steps-navigation {
+  display: inline-block;
+}
+
+.collapsed-steps-trigger {
+  @include styles.styles-reset;
+  display: inline-flex;
+  align-items: center;
+  gap: awsui.$space-xxs;
+  padding-block: 0;
+  padding-inline: 0;
+  border-block: none;
+  border-inline: none;
+  background: transparent;
+  color: awsui.$color-text-link-default;
+  font-weight: styles.$font-weight-bold;
+  font-size: inherit;
+  cursor: pointer;
+
+  &:hover {
+    color: awsui.$color-text-link-hover;
+  }
+
+  &:disabled {
+    color: awsui.$color-text-interactive-disabled;
+    cursor: default;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.link-focus;
+  }
+}
+
+.collapsed-steps-trigger-label {
+  /* used for test utils */
+}
+
+.step-navigation-list {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.step-navigation-item {
+  position: relative;
+  padding-inline-start: awsui.$space-l;
+  margin-block-end: awsui.$space-s;
+
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: calc(#{awsui.$space-l} / 2 - 1px);
+    inset-block-start: calc(#{awsui.$space-m} + 6px);
+    block-size: calc(100% + #{awsui.$space-s} - 6px);
+    inline-size: 2px;
+    background-color: awsui.$color-border-divider-default;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}
+
+.step-navigation-button {
+  @include styles.styles-reset;
+  display: flex;
+  align-items: flex-start;
+  gap: awsui.$space-xs;
+  padding-block: 0;
+  padding-inline: 0;
+  border-block: none;
+  border-inline: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: start;
+  inline-size: 100%;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.link-focus;
+  }
+}
+
+.step-navigation-button-disabled {
+  cursor: default;
+}
+
+.step-navigation-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%;
+  border-block: 2px solid awsui.$color-text-interactive-disabled;
+  border-inline: 2px solid awsui.$color-text-interactive-disabled;
+  background-color: awsui.$color-background-container-content;
+  box-sizing: border-box;
+}
+
+.step-navigation-circle-selected {
+  border-color: awsui.$color-background-control-checked;
+  background-color: awsui.$color-background-control-checked;
+  box-shadow:
+    0 0 0 2px awsui.$color-background-container-content,
+    0 0 0 4px awsui.$color-background-control-checked;
+}
+
+.step-navigation-circle-visited {
+  border-color: awsui.$color-text-interactive-default;
+}
+
+.step-navigation-circle-unvisited {
+  border-color: awsui.$color-text-interactive-disabled;
+}
+
+.step-navigation-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.step-navigation-label {
+  font-size: awsui.$font-size-body-s;
+  color: awsui.$color-text-small;
+}
+
+.step-navigation-title {
+  font-size: awsui.$font-size-body-m;
+  color: awsui.$color-text-body-default;
+}
+
+.step-navigation-title-selected {
+  color: awsui.$color-background-control-checked;
+  font-weight: styles.$font-weight-bold;
+}
+
+.step-navigation-title-visited {
+  color: awsui.$color-text-interactive-default;
+}
+
+.step-navigation-title-unvisited {
+  color: awsui.$color-text-status-inactive;
+}
+
 .form-header-component {
   &-wrapper {
     outline: none;

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 WizardStepNavigationModal from './wizard-step-navigation-modal';
 
 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>();
@@ -132,7 +137,16 @@ function WizardForm({
     <>
       <WizardFormHeader>
         <div className={clsx(styles['collapsed-steps'], !showCollapsedSteps && styles['collapsed-steps-hidden'])}>
-          {i18nStrings.collapsedStepsLabel?.(activeStepIndex + 1, steps.length)}
+          <WizardStepNavigationModal
+            activeStepIndex={activeStepIndex}
+            farthestStepIndex={farthestStepIndex}
+            allowSkipTo={allowSkipTo}
+            i18nStrings={i18nStrings}
+            isLoadingNextStep={isPrimaryLoading}
+            onStepClick={onStepClick}
+            onSkipToClick={onSkipToClick}
+            steps={steps}
+          />
         </div>
         <InternalHeader
           className={styles['form-header-component']}