feat: Horizontal variant of steps (#3959)

Author: timogasda

pages/steps/permutations-utils.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import Box from '~components/box';
 import Button from '~components/button';
+import Icon from '~components/icon';
 import Link from '~components/link';
 import Popover from '~components/popover';
 import { StepsProps } from '~components/steps';
@@ -738,6 +739,7 @@ const changesetStepsInteractive: ReadonlyArray<StepsProps.Step> = [
 
 export const stepsPermutations = createPermutations<StepsProps>([
   {
+    orientation: ['vertical', 'horizontal'],
     steps: [
       initialSteps,
       loadingSteps,
@@ -761,4 +763,20 @@ export const stepsPermutations = createPermutations<StepsProps>([
     ],
     ariaLabel: ['test label'],
   },
+  {
+    steps: [allStatusesSteps, successfulSteps],
+    ariaLabel: ['test label'],
+    orientation: ['vertical', 'horizontal'],
+    renderStep: [
+      step => ({
+        header: <b>Custom header for {step.header}</b>,
+        details: step.details && <i>Custom details for {step.details}</i>,
+      }),
+      step => ({
+        header: step.header,
+        details: step.details && <i>Custom details for {step.details}</i>,
+        icon: <Icon ariaLabel="success" name="status-positive" variant="success" />,
+      }),
+    ],
+  },
 ]);

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

@@ -23099,6 +23099,48 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "The visual orientation of the steps (vertical or horizontal).
+By default the orientation is vertical.",
+      "inlineType": {
+        "name": "StepsProps.Orientation",
+        "type": "union",
+        "values": [
+          "horizontal",
+          "vertical",
+        ],
+      },
+      "name": "orientation",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "string",
+    },
+    {
+      "description": "Render a step. This overrides the default icon, header, and details provided by the component.
+The function is called for each step and should return an object with the following keys:
+* \`header\` (React.ReactNode) - Summary corresponding to the step.
+* \`details\` (React.ReactNode) - (Optional) Additional information corresponding to the step.
+* \`icon\` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.",
+      "inlineType": {
+        "name": "(step: StepsProps.Step) => { header: React.ReactNode; details?: React.ReactNode; icon?: React.ReactNode; }",
+        "parameters": [
+          {
+            "name": "step",
+            "type": "StepsProps.Step",
+          },
+        ],
+        "returnType": "{ header: React.ReactNode; details?: React.ReactNode; icon?: React.ReactNode; }",
+        "type": "function",
+      },
+      "name": "renderStep",
+      "optional": true,
+      "systemTags": [
+        "core",
+      ],
+      "type": "((step: StepsProps.Step) => { header: React.ReactNode; details?: React.ReactNode; icon?: React.ReactNode; })",
+    },
     {
       "description": "An array of individual steps
 

src/status-indicator/internal.tsx

@@ -47,6 +47,31 @@ const typeToIcon: (size: IconProps.Size) => Record<StatusIndicatorProps.Type, JS
   loading: <InternalSpinner />,
 });
 
+interface InternalStatusIconProps extends Pick<InternalStatusIndicatorProps, 'type' | 'iconAriaLabel'> {
+  animate?: InternalStatusIndicatorProps['__animate'];
+  size?: InternalStatusIndicatorProps['__size'];
+  display?: InternalStatusIndicatorProps['__display'];
+}
+
+export function InternalStatusIcon({
+  type,
+  iconAriaLabel,
+  animate,
+  display,
+  size = 'normal',
+}: InternalStatusIconProps) {
+  return (
+    <span
+      className={clsx(styles.icon, animate && styles['icon-shake'])}
+      aria-label={iconAriaLabel}
+      role={iconAriaLabel ? 'img' : undefined}
+    >
+      {typeToIcon(size)[type]}
+      {display === 'inline' && <>&nbsp;</>}
+    </span>
+  );
+}
+
 export default function StatusIndicator({
   type,
   children,
@@ -85,14 +110,13 @@ export default function StatusIndicator({
           __animate && styles['container-fade-in']
         )}
       >
-        <span
-          className={clsx(styles.icon, __animate && styles['icon-shake'])}
-          aria-label={iconAriaLabel}
-          role={iconAriaLabel ? 'img' : undefined}
-        >
-          {typeToIcon(__size)[type]}
-          {__display === 'inline' && <>&nbsp;</>}
-        </span>
+        <InternalStatusIcon
+          type={type}
+          iconAriaLabel={iconAriaLabel}
+          animate={__animate}
+          display={__display}
+          size={__size}
+        />
         {children}
       </span>
     </WithNativeAttributes>

src/steps/__tests__/steps.test.tsx

@@ -68,6 +68,18 @@ const stepsWithIconAriaLabel: ReadonlyArray<StepsProps.Step> = [
   },
 ];
 
+const stepsForCustomRender: ReadonlyArray<StepsProps.Step> = [
+  {
+    header: 'Checked Cross Region Consent',
+    status: 'success',
+  },
+  {
+    header: 'Analyzing security rules',
+    status: 'loading',
+    details: 'Step details',
+  },
+];
+
 const renderSteps = (props: Partial<StepsProps>) => {
   const renderResult = render(<Steps {...defaultProps} {...props} />);
   return createWrapper(renderResult.container).findSteps()!;
@@ -142,4 +154,82 @@ describe('Steps', () => {
       });
     });
   });
+
+  describe('orientation', () => {
+    test('renders with default vertical orientation', () => {
+      const wrapper = renderSteps({ steps: successfullSteps });
+
+      expect(wrapper.getElement()).not.toHaveClass(stepsStyles.horizontal);
+    });
+
+    test('renders with horizontal orientation when explicitly set', () => {
+      const wrapper = renderSteps({
+        steps: successfullSteps,
+        orientation: 'horizontal',
+      });
+
+      expect(wrapper.getElement()).toHaveClass(stepsStyles.horizontal);
+    });
+
+    test('renders with vertical orientation', () => {
+      const wrapper = renderSteps({
+        steps: successfullSteps,
+        orientation: 'vertical',
+      });
+
+      expect(wrapper.getElement()).not.toHaveClass(stepsStyles.horizontal);
+    });
+  });
+
+  describe('renderStep', () => {
+    const customRenderStep = (step: StepsProps.Step) => ({
+      header: <span data-testid="custom-header">Custom: {step.header}</span>,
+      details: step.details ? <div data-testid="custom-details">Details: {step.details}</div> : undefined,
+      icon: <span data-testid="custom-icon">icon</span>,
+    });
+
+    test('renders custom content when using renderStep', () => {
+      const wrapper = renderSteps({ steps: stepsForCustomRender, renderStep: customRenderStep });
+
+      const customHeaders = wrapper.findAll('[data-testid="custom-header"]');
+      expect(customHeaders).toHaveLength(stepsForCustomRender.length);
+
+      expect(customHeaders[0].getElement()).toHaveTextContent('Checked Cross Region Consent');
+      expect(customHeaders[1].getElement()).toHaveTextContent('Analyzing security rules');
+    });
+
+    test('renders custom details when using renderStep', () => {
+      const wrapper = renderSteps({ steps: stepsForCustomRender, renderStep: customRenderStep });
+
+      const customDetails = wrapper.findAll('[data-testid="custom-details"]');
+      // Only last step has details
+      expect(customDetails).toHaveLength(1);
+      expect(customDetails[0].getElement()).toHaveTextContent('Step details');
+    });
+
+    test('renders custom icon when using renderStep', () => {
+      const wrapper = renderSteps({ steps: stepsForCustomRender, renderStep: customRenderStep });
+
+      const customHeaders = wrapper.findAll('[data-testid="custom-icon"]');
+      expect(customHeaders).toHaveLength(stepsForCustomRender.length);
+    });
+
+    test('renders custom content in horizontal mode', () => {
+      const wrapper = renderSteps({
+        steps: stepsForCustomRender,
+        orientation: 'horizontal',
+        renderStep: customRenderStep,
+      });
+
+      expect(wrapper.findAll('[data-testid="custom-header"]')).not.toHaveLength(0);
+      expect(wrapper.findAll('[data-testid="custom-details"]')).not.toHaveLength(0);
+      expect(wrapper.findAll('[data-testid="custom-icon"]')).not.toHaveLength(0);
+    });
+
+    test('does not render status indicators when using renderStep with icon', () => {
+      const wrapper = renderSteps({ steps: stepsForCustomRender, renderStep: customRenderStep });
+
+      expect(wrapper.findItems()[0].findHeader()?.findStatusIndicator()).toBeNull();
+    });
+  });
 });

src/steps/interfaces.ts

@@ -14,6 +14,27 @@ export interface StepsProps extends BaseComponentProps {
    *  * `details` (ReactNode) - (Optional) Additional information corresponding to the step.
    */
   steps: ReadonlyArray<StepsProps.Step>;
+  /**
+   * The visual orientation of the steps (vertical or horizontal).
+   * By default the orientation is vertical.
+   *
+   * @awsuiSystem core
+   */
+  orientation?: StepsProps.Orientation;
+  /**
+   * Render a step. This overrides the default icon, header, and details provided by the component.
+   * The function is called for each step and should return an object with the following keys:
+   * * `header` (React.ReactNode) - Summary corresponding to the step.
+   * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.
+   * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.
+   *
+   * @awsuiSystem core
+   */
+  renderStep?: (step: StepsProps.Step) => {
+    header: React.ReactNode;
+    details?: React.ReactNode;
+    icon?: React.ReactNode;
+  };
   /**
    * Provides an `aria-label` to the progress steps container.
    * Don't use `ariaLabel` and `ariaLabelledby` at the same time.
@@ -40,4 +61,6 @@ export namespace StepsProps {
     header: React.ReactNode;
     details?: React.ReactNode;
   }
+
+  export type Orientation = 'vertical' | 'horizontal';
 }