feat: Duplicate Steps

pages/steps/permutations.page.tsx

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Steps from '~components/steps';
+
+import PermutationsView from '../utils/permutations-view';
+import ScreenshotArea from '../utils/screenshot-area';
+import { stepsPermutations } from './permutations-utils';
+
+export default function StepsPermutations() {
+  return (
+    <ScreenshotArea disableAnimations={false}>
+      <article>
+        <h1>Steps permutations</h1>
+        <PermutationsView
+          permutations={stepsPermutations}
+          render={permutation => <div>{<Steps {...permutation} />}</div>}
+        />
+      </article>
+    </ScreenshotArea>
+  );
+}

pages/steps/with-updates.page.tsx

@@ -0,0 +1,178 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef, useState } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import Header from '~components/header';
+import Steps from '~components/steps';
+
+import {
+  blockedStepsInteractive,
+  failedStepsInteractive,
+  failedStepsWithRetryButtonInteractive,
+  initialStepsInteractive,
+  loadingSteps2Interactive,
+  loadingSteps3Interactive,
+  loadingStepsInteractive,
+  successfulStepsInteractive,
+} from './permutations-utils';
+
+export default function StepsPermutationsWithUpdates() {
+  const [stepIndex1, setStepIndex1] = useState(0);
+  const timeoutRef1 = useRef<ReturnType<typeof setTimeout>>();
+  const stepsExecution1 = [
+    initialStepsInteractive,
+    loadingStepsInteractive,
+    loadingSteps2Interactive,
+    loadingSteps3Interactive,
+    successfulStepsInteractive,
+  ];
+
+  const [stepIndex2, setStepIndex2] = useState(0);
+  const timeoutRef2 = useRef<ReturnType<typeof setTimeout>>();
+  const stepsExecution2 = [
+    initialStepsInteractive,
+    loadingStepsInteractive,
+    loadingSteps2Interactive,
+    blockedStepsInteractive,
+  ];
+
+  const [stepIndex3, setStepIndex3] = useState(0);
+  const timeoutRef3 = useRef<ReturnType<typeof setTimeout>>();
+  const stepsExecution3 = [initialStepsInteractive, loadingStepsInteractive, failedStepsInteractive];
+
+  const [stepIndex4, setStepIndex4] = useState(0);
+  const timeoutRef4 = useRef<ReturnType<typeof setTimeout>>();
+  const stepsExecution4 = [initialStepsInteractive, loadingStepsInteractive, failedStepsWithRetryButtonInteractive];
+
+  const activateTimerStep1 = () => {
+    resetTimeoutStep1();
+    function step(i: number) {
+      setStepIndex1(i + 1);
+      timeoutRef1.current = setTimeout(() => i < stepsExecution1.length - 2 && step(i + 1), 2000);
+    }
+    step(0);
+  };
+  const resetTimeoutStep1 = () => {
+    setStepIndex1(0);
+    if (timeoutRef1.current !== undefined) {
+      clearTimeout(timeoutRef1.current);
+      timeoutRef1.current = undefined;
+    }
+  };
+
+  const activateTimerStep2 = () => {
+    resetTimeoutStep2();
+    function step(i: number) {
+      setStepIndex2(i + 1);
+      timeoutRef2.current = setTimeout(() => i < stepsExecution2.length - 2 && step(i + 1), 2000);
+    }
+    step(0);
+  };
+  const resetTimeoutStep2 = () => {
+    setStepIndex2(0);
+    if (timeoutRef2.current !== undefined) {
+      clearTimeout(timeoutRef2.current);
+      timeoutRef2.current = undefined;
+    }
+  };
+
+  const activateTimerStep3 = () => {
+    resetTimeoutStep3();
+    function step(i: number) {
+      setStepIndex3(i + 1);
+      timeoutRef3.current = setTimeout(() => i < stepsExecution3.length - 2 && step(i + 1), 2000);
+    }
+    step(0);
+  };
+  const resetTimeoutStep3 = () => {
+    setStepIndex3(0);
+    if (timeoutRef3.current !== undefined) {
+      clearTimeout(timeoutRef3.current);
+      timeoutRef3.current = undefined;
+    }
+  };
+
+  const activateTimerStep4 = () => {
+    resetTimeoutStep4();
+    function step(i: number) {
+      setStepIndex4(i + 1);
+      timeoutRef4.current = setTimeout(() => i < stepsExecution4.length - 2 && step(i + 1), 2000);
+    }
+    step(0);
+  };
+  const resetTimeoutStep4 = () => {
+    setStepIndex4(0);
+    if (timeoutRef4.current !== undefined) {
+      clearTimeout(timeoutRef1.current);
+      timeoutRef4.current = undefined;
+    }
+  };
+
+  return (
+    <Box margin={'l'}>
+      <article>
+        <Header variant={'h1'}>Steps permutations with updates</Header>
+        <Box margin={{ bottom: 'xl' }}>
+          <Box variant={'div'} fontWeight={'bold'} margin={'s'}>
+            Successful Execution
+          </Box>
+          <Box id="successfull-execution-label" fontWeight={'light'} margin={{ bottom: 'm' }}>
+            Steps Component Label
+          </Box>
+          <Box id="successfull-execution-description" fontWeight={'light'} margin={{ bottom: 'm' }}>
+            Steps Component Description
+          </Box>
+          <span aria-live="polite">
+            <Steps
+              steps={stepsExecution1[stepIndex1]}
+              ariaLabelledby="successfull-execution-label"
+              ariaDescribedby="successfull-execution-description"
+            />
+          </span>
+          <div style={{ display: 'flex' }}>
+            <Button onClick={activateTimerStep1}>Start</Button>
+            <Button onClick={resetTimeoutStep1}>Reset</Button>
+          </div>
+        </Box>
+        <Box margin={{ bottom: 'xl' }}>
+          <Box variant={'div'} fontWeight={'bold'} margin={'s'}>
+            Blocked Execution
+          </Box>
+          <span aria-live="polite">
+            <Steps steps={stepsExecution2[stepIndex2]} ariaLabel="Blocked Execution Label" />
+          </span>
+          <div style={{ display: 'flex' }}>
+            <Button onClick={activateTimerStep2}>Start</Button>
+            <Button onClick={resetTimeoutStep2}>Reset</Button>
+          </div>
+        </Box>
+        <Box margin={{ bottom: 'xl' }}>
+          <Box variant={'div'} fontWeight={'bold'} margin={'s'}>
+            Failed Execution
+          </Box>
+          <span aria-live="polite">
+            <Steps steps={stepsExecution3[stepIndex3]} ariaLabel="Failed Execution Label" />
+          </span>
+          <div style={{ display: 'flex' }}>
+            <Button onClick={activateTimerStep3}>Start</Button>
+            <Button onClick={resetTimeoutStep3}>Reset</Button>
+          </div>
+        </Box>
+        <Box margin={{ bottom: 'xl' }}>
+          <Box variant={'div'} fontWeight={'bold'} margin={'s'}>
+            Failed Execution with Retry
+          </Box>
+          <span aria-live="polite">
+            <Steps steps={stepsExecution4[stepIndex4]} ariaLabel="Failed Execution with Retry Label" />
+          </span>
+          <div style={{ display: 'flex' }}>
+            <Button onClick={activateTimerStep4}>Start</Button>
+            <Button onClick={resetTimeoutStep4}>Reset</Button>
+          </div>
+        </Box>
+      </article>
+    </Box>
+  );
+}

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -14713,6 +14713,67 @@ and truncates it with an ellipsis.",
 }
 `;
 
+exports[`Documenter definition for steps matches the snapshot: steps 1`] = `
+{
+  "events": [],
+  "functions": [],
+  "name": "Steps",
+  "properties": [
+    {
+      "description": "Sets the \`aria-describedby\` property on the progress steps container.",
+      "name": "ariaDescribedby",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Provides an \`aria-label\` to the progress steps container.
+Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
+      "name": "ariaLabel",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Sets the \`aria-labelledby\` property on the progress steps container.
+If there's a visible label element that you can reference, use this instead of \`ariaLabel\`.
+Don't use \`ariaLabel\` and \`ariaLabelledby\` at the same time.",
+      "name": "ariaLabelledby",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "An array of individual steps
+Each step definition has the following properties:
+ * \`status\` (string) - Status of the step corresponding to a status indicator.
+ * \`statusIconAriaLabel\` - (string) - (Optional) Alternative text for the status icon.
+ * \`header\` (ReactNode) - Summary corresponding to the step.
+ * \`details\` (ReactNode) - (Optional) Additional information corresponding to the step.
+",
+      "name": "steps",
+      "optional": false,
+      "type": "ReadonlyArray<StepsProps.Step>",
+    },
+  ],
+  "regions": [],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Documenter definition for table matches the snapshot: table 1`] = `
 {
   "events": [

src/__tests__/__snapshots__/test-utils-selectors.test.tsx.snap

@@ -522,6 +522,12 @@ exports[`test-utils selectors 1`] = `
   "status-indicator": [
     "awsui_root_1cbgc",
   ],
+  "steps": [
+    "awsui_container_gxp9y",
+    "awsui_details_gxp9y",
+    "awsui_header_gxp9y",
+    "awsui_root_gxp9y",
+  ],
   "table": [
     "awsui_body-cell-edit-active_c6tup",
     "awsui_body-cell-editor-controls_c6tup",

src/__tests__/required-props-for-components.ts

@@ -147,6 +147,9 @@ const defaultProps: Record<string, Record<string, any>> = {
   'key-value-pairs': {
     items: [],
   },
+  steps: {
+    steps: [],
+  },
 };
 
 export function getRequiredPropsForComponent(componentName: string): Record<string, any> {