chore: Wizard with custom steps poc

pages/0_wizard_and_steps/common/steps-components.tsx

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import clsx from 'clsx';
+
+import { Badge, Box, SpaceBetween } from '~components';
+
+import styles from '../styles.scss';
+
+export function StepHeader({
+  visited,
+  active,
+  isNew,
+  onClick,
+  children,
+}: {
+  children: React.ReactNode;
+  visited: boolean;
+  isNew: boolean;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      tabIndex={active ? -1 : 0}
+      aria-current="step"
+      className={clsx(styles['steps-button'], {
+        [styles['steps-button-visited']]: visited,
+        [styles['steps-button-active']]: active,
+      })}
+    >
+      <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+        <span>{children}</span>
+        {isNew ? <Badge color="blue">New</Badge> : null}
+      </SpaceBetween>
+    </button>
+  );
+}
+
+export function StepDescription({ children }: { children: React.ReactNode }) {
+  return (
+    <Box fontSize="body-s" color="text-body-secondary" margin={{ bottom: 's' }}>
+      {children}
+    </Box>
+  );
+}

pages/0_wizard_and_steps/styles.scss

@@ -0,0 +1,41 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '~design-tokens' as awsui;
+
+.steps-button {
+  border-block: none;
+  border-inline: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  background: none;
+  cursor: pointer;
+  color: awsui.$color-text-status-inactive;
+
+  &.steps-button-visited {
+    text-decoration: underline;
+    color: awsui.$color-text-link-default;
+  }
+
+  &-active {
+    font-weight: bold;
+    color: awsui.$color-text-interactive-active;
+    cursor: text;
+    user-select: text;
+
+    &.steps-button-visited {
+      text-decoration: none;
+      color: awsui.$color-text-interactive-active;
+    }
+  }
+
+  &:focus {
+    outline-color: awsui.$color-border-item-focused;
+  }
+}

pages/0_wizard_and_steps/variant-1.page.tsx

@@ -0,0 +1,168 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import {
+  AppLayout,
+  Box,
+  Checkbox,
+  Container,
+  Drawer,
+  FormField,
+  Header,
+  Select,
+  SpaceBetween,
+  StatusIndicatorProps,
+  Steps,
+} from '~components';
+import Button from '~components/button';
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+import Wizard from '~components/wizard';
+
+import { i18nStrings as wizardI18nStrings } from '../wizard/common';
+import { StepDescription, StepHeader } from './common/steps-components';
+
+const stepsMetadata = [
+  { title: 'Step 1: Workflow overview', subtitle: 'Review step progress' },
+  { title: 'Step 2: Select EC2 instance', subtitle: 'Create or choose target EC2 instance' },
+  { title: 'Step 3: Select S3 bucket', subtitle: 'Pick S3 bucket access' },
+  { title: 'Step 4: Configure IAM role', subtitle: 'Set permissions and policies' },
+  { title: 'Step 5: Updated S3 bucket policy', subtitle: 'Configure bucket access rules' },
+  { title: 'Step 6: Updated KMS key policy', subtitle: 'Set encryption permissions based on the S3 bucket selection' },
+];
+
+const statusOptions = [{ value: 'success' }, { value: 'in-progress' }, { value: 'pending' }, { value: 'error' }];
+
+interface StateSettings {
+  status: StatusIndicatorProps.Type;
+  isNew: boolean;
+}
+
+export default function WizardPage() {
+  const [activeStepIndex, setActiveStepIndex] = useState(3);
+  const [stepStates, setStepStates] = useState<StateSettings[]>([
+    { status: 'success', isNew: false },
+    { status: 'error', isNew: false },
+    { status: 'success', isNew: false },
+    { status: 'in-progress', isNew: false },
+    { status: 'pending', isNew: false },
+    { status: 'pending', isNew: true },
+  ]);
+  const changeStepSettings = (index: number, settings: (prev: StateSettings) => StateSettings) => {
+    setStepStates(prev => {
+      const copy = [...prev];
+      copy[index] = settings(copy[index]);
+      return copy;
+    });
+  };
+  const changeStepStatus = (index: number, status: StatusIndicatorProps.Type) =>
+    changeStepSettings(index, prev => ({ ...prev, status }));
+  const changeStepNew = (index: number, isNew: boolean) => changeStepSettings(index, prev => ({ ...prev, isNew }));
+  const getStatusProps = (status: StatusIndicatorProps.Type) => {
+    switch (status) {
+      case 'success':
+        return { status: 'success', statusIconAriaLabel: 'success' } as const;
+      case 'in-progress':
+        return { status: 'in-progress', statusIconAriaLabel: 'in progress', statusColorOverride: 'blue' } as const;
+      case 'pending':
+        return { status: 'pending', statusIconAriaLabel: 'pending' } as const;
+      case 'error':
+      default:
+        return { status: 'error', statusIconAriaLabel: 'error' } as const;
+    }
+  };
+  const steps = stepsMetadata.map((_, index) => {
+    const { title, subtitle } = stepsMetadata[index];
+    const { status, isNew } = stepStates[index];
+    const statusProps = getStatusProps(status);
+    return {
+      title,
+      ...statusProps,
+      header: (
+        <StepHeader
+          visited={status === 'success' || status === 'error'}
+          active={activeStepIndex === index}
+          onClick={() => setActiveStepIndex(index)}
+          isNew={isNew}
+        >
+          {title}
+        </StepHeader>
+      ),
+      details: <StepDescription>{subtitle}</StepDescription>,
+      content: (
+        <SpaceBetween size="s">
+          <Container>
+            <div style={{ height: 400 }}>Content {index + 1}</div>
+          </Container>
+        </SpaceBetween>
+      ),
+    };
+  });
+
+  const [activeDrawerId, setActiveDrawerId] = useState<null | string>('settings');
+  return (
+    <I18nProvider messages={[messages]} locale="en">
+      <AppLayout
+        navigationHide={true}
+        activeDrawerId={activeDrawerId}
+        onDrawerChange={({ detail }) => setActiveDrawerId(detail.activeDrawerId)}
+        drawers={[
+          {
+            id: 'settings',
+            content: (
+              <Drawer header={<Header variant="h2">Steps settings</Header>}>
+                <SpaceBetween size="m">
+                  {stepsMetadata.map(({ title }, index) => (
+                    <FormField key={title} label={`Step ${index + 1} settings`}>
+                      <SpaceBetween size="xs">
+                        <Select
+                          options={statusOptions}
+                          selectedOption={statusOptions.find(o => o.value === stepStates[index].status)!}
+                          onChange={({ detail }) =>
+                            changeStepStatus(index, detail.selectedOption.value as StatusIndicatorProps.Type)
+                          }
+                        ></Select>
+
+                        <Checkbox
+                          checked={stepStates[index].isNew}
+                          onChange={({ detail }) => changeStepNew(index, detail.checked)}
+                        >
+                          New
+                        </Checkbox>
+                      </SpaceBetween>
+                    </FormField>
+                  ))}
+                </SpaceBetween>
+              </Drawer>
+            ),
+            trigger: { iconName: 'settings' },
+            ariaLabels: {
+              drawerName: 'Steps settings',
+              triggerButton: 'Open steps settings',
+              closeButton: 'Close steps settings',
+            },
+          },
+        ]}
+        contentType="wizard"
+        content={
+          <Wizard
+            id="wizard"
+            steps={steps}
+            i18nStrings={wizardI18nStrings}
+            activeStepIndex={activeStepIndex}
+            onNavigate={e => setActiveStepIndex(e.detail.requestedStepIndex)}
+            secondaryActions={activeStepIndex === 2 ? <Button>Save as draft</Button> : null}
+            customNavigationSide={
+              <Box>
+                <Steps steps={steps} />
+              </Box>
+            }
+            customNavigationTop={<Box>Custom nav top!</Box>}
+          />
+        }
+      />
+    </I18nProvider>
+  );
+}

pages/app/index.tsx

@@ -42,6 +42,7 @@ function isAppLayoutPage(pageId?: string) {
     'prompt-input/simple',
     'funnel-analytics/static-single-page-flow',
     'funnel-analytics/static-multi-page-flow',
+    '0_wizard_and_steps',
   ];
   return pageId !== undefined && appLayoutPages.some(match => pageId.includes(match));
 }

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -26259,6 +26259,16 @@ Use this if you need to wait for a response from the server before the user can
     },
   ],
   "regions": [
+    {
+      "description": "Overrides wizard steps navigation with a custom one when it is rendered on the side.",
+      "isDefault": false,
+      "name": "customNavigationSide",
+    },
+    {
+      "description": "Overrides wizard steps navigation with a custom one when it is rendered on the top.",
+      "isDefault": false,
+      "name": "customNavigationTop",
+    },
     {
       "description": "Specifies left-aligned secondary actions for the wizard. Use a button dropdown if multiple actions are required.",
       "isDefault": false,

src/steps/index.tsx

@@ -16,7 +16,6 @@ const Steps = ({ steps, ...props }: StepsProps) => {
   const baseProps = getBaseProps(props);
   const baseComponentProps = useBaseComponent('Steps');
   const externalProps = getExternalProps(props);
-
   return <InternalSteps {...baseProps} {...baseComponentProps} {...externalProps} steps={steps} />;
 };
 

src/steps/interfaces.ts

@@ -33,10 +33,12 @@ export interface StepsProps extends BaseComponentProps {
 
 export namespace StepsProps {
   export type Status = StatusIndicatorProps.Type;
+  export type Color = StatusIndicatorProps.Color;
 
   export interface Step {
     status: Status;
     statusIconAriaLabel?: string;
+    statusColorOverride?: Color;
     header: React.ReactNode;
     details?: React.ReactNode;
   }

src/steps/internal.tsx

@@ -12,11 +12,11 @@ import styles from './styles.css.js';
 
 type InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps<HTMLDivElement>;
 
-const InternalStep = ({ status, statusIconAriaLabel, header, details }: StepsProps.Step) => {
+const InternalStep = ({ status, statusIconAriaLabel, statusColorOverride, header, details }: StepsProps.Step) => {
   return (
     <li className={styles.container}>
       <div className={styles.header}>
-        <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>
+        <StatusIndicator type={status} colorOverride={statusColorOverride} iconAriaLabel={statusIconAriaLabel}>
           {header}
         </StatusIndicator>
       </div>
@@ -47,6 +47,7 @@ const InternalSteps = ({
             key={index}
             status={step.status}
             statusIconAriaLabel={step.statusIconAriaLabel}
+            statusColorOverride={step.statusColorOverride}
             header={step.header}
             details={step.details}
           />

src/wizard/interfaces.ts

@@ -129,6 +129,16 @@ export interface WizardProps extends BaseComponentProps {
    * or `skip` (when navigated using navigation pane or the *skip-to* button to the previously unvisited step).
    */
   onNavigate?: NonCancelableEventHandler<WizardProps.NavigateDetail>;
+
+  /**
+   * Overrides wizard steps navigation with a custom one when it is rendered on the side.
+   */
+  customNavigationSide?: React.ReactNode;
+
+  /**
+   * Overrides wizard steps navigation with a custom one when it is rendered on the top.
+   */
+  customNavigationTop?: React.ReactNode;
 }
 
 export namespace WizardProps {

src/wizard/internal.tsx

@@ -45,6 +45,8 @@ export default function InternalWizard({
   onCancel,
   onSubmit,
   onNavigate,
+  customNavigationSide,
+  customNavigationTop,
   __internalRootRef,
   __injectAnalyticsComponentMetadata = false,
   ...rest
@@ -179,23 +181,30 @@ export default function InternalWizard({
       <div
         className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}
       >
-        <WizardNavigation
-          activeStepIndex={actualActiveStepIndex}
-          farthestStepIndex={farthestStepIndex.current}
-          allowSkipTo={allowSkipTo}
-          hidden={smallContainer}
-          i18nStrings={i18nStrings}
-          isLoadingNextStep={isLoadingNextStep}
-          onStepClick={onStepClick}
-          onSkipToClick={onSkipToClick}
-          steps={steps}
-        />
+        {customNavigationSide ? (
+          smallContainer ? null : (
+            <div className={styles['navigation-custom']}>{customNavigationSide}</div>
+          )
+        ) : (
+          <WizardNavigation
+            activeStepIndex={actualActiveStepIndex}
+            farthestStepIndex={farthestStepIndex.current}
+            allowSkipTo={allowSkipTo}
+            hidden={smallContainer}
+            i18nStrings={i18nStrings}
+            isLoadingNextStep={isLoadingNextStep}
+            onStepClick={onStepClick}
+            onSkipToClick={onSkipToClick}
+            steps={steps}
+          />
+        )}
         <div
           className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}
         >
           <WizardForm
             steps={steps}
             showCollapsedSteps={smallContainer}
+            customCollapsedSteps={customNavigationTop}
             i18nStrings={i18nStrings}
             submitButtonText={submitButtonText}
             activeStepIndex={actualActiveStepIndex}