Add custom icon rendering and new horizontal layout

Author: timogasda

pages/steps/permutations-utils.tsx

@@ -773,14 +773,9 @@ export const stepsPermutations = createPermutations<StepsProps>([
         details: step.details && <i>Custom details for {step.details}</i>,
       }),
       step => ({
-        header: <Icon name="status-positive" variant="success" ariaLabel="step status" />,
-        details: (
-          <div>
-            {step.header}
-            <br />
-            {step.details && <i>Custom details for {step.details}</i>}
-          </div>
-        ),
+        header: step.header,
+        details: step.details && <i>Custom details for {step.details}</i>,
+        icon: <Icon ariaLabel="success" name="status-positive" variant="success" />,
       }),
     ],
   },

src/steps/interfaces.ts

@@ -26,12 +26,14 @@ export interface StepsProps extends BaseComponentProps {
    * 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.

src/steps/internal.tsx

@@ -3,6 +3,8 @@
 import React from 'react';
 import clsx from 'clsx';
 
+import { BoxProps } from '../box/interfaces';
+import InternalBox from '../box/internal';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SomeRequired } from '../internal/types';
 import StatusIndicator from '../status-indicator/internal';
@@ -12,6 +14,17 @@ import styles from './styles.css.js';
 
 type InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;
 
+const statusToColor: Record<StepsProps.Status, BoxProps.Color> = {
+  error: 'text-status-error',
+  warning: 'text-status-warning',
+  success: 'text-status-success',
+  info: 'text-status-info',
+  stopped: 'text-status-inactive',
+  pending: 'text-status-inactive',
+  'in-progress': 'text-status-inactive',
+  loading: 'text-status-inactive',
+};
+
 const CustomStep = ({
   step,
   orientation,
@@ -21,14 +34,19 @@ const CustomStep = ({
   orientation: StepsProps.Orientation;
   renderStep: Required<StepsProps>['renderStep'];
 }) => {
-  const { header, details } = renderStep(step);
+  const { status, statusIconAriaLabel } = step;
+  const { header, details, icon } = renderStep(step);
   return (
-    <li className={clsx(styles.container, styles.custom)}>
+    <li className={styles.container}>
       <div className={styles.header}>
-        <span>{header}</span>
-        {orientation === 'horizontal' && <hr className={styles.connector} role="none" />}
+        {icon ? icon : <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel} />}
+        {orientation === 'vertical' ? header : <hr className={styles.connector} role="none" />}
       </div>
-      {orientation === 'vertical' && <hr className={styles.connector} role="none" />}
+      {orientation === 'vertical' ? (
+        <hr className={styles.connector} role="none" />
+      ) : (
+        <div className={styles['horizontal-header']}>{header}</div>
+      )}
       {details && <div className={styles.details}>{details}</div>}
     </li>
   );
@@ -45,11 +63,17 @@ const InternalStep = ({
     <li className={styles.container}>
       <div className={styles.header}>
         <StatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>
-          {header}
+          {orientation === 'vertical' && header}
         </StatusIndicator>
         {orientation === 'horizontal' && <hr className={styles.connector} role="none" />}
       </div>
-      {orientation === 'vertical' && <hr className={styles.connector} role="none" />}
+      {orientation === 'vertical' ? (
+        <hr className={styles.connector} role="none" />
+      ) : (
+        <div className={styles['horizontal-header']}>
+          <InternalBox color={statusToColor[status]}>{header}</InternalBox>
+        </div>
+      )}
       {details && <div className={styles.details}>{details}</div>}
     </li>
   );

src/steps/styles.scss

@@ -20,6 +20,8 @@
       grid-template-rows: minmax(awsui.$space-static-l, auto);
 
       > .header {
+        display: flex;
+        gap: awsui.$space-xxs;
         grid-row: 1;
         grid-column: 1 / span 2;
       }
@@ -89,17 +91,18 @@
           block-size: awsui.$border-divider-list-width;
           inline-size: auto;
           min-inline-size: awsui.$space-static-xs;
-          margin-inline: awsui.$space-static-xxxs;
+          margin-inline-end: awsui.$space-static-xxs;
         }
       }
 
-      > .details {
-        display: flex;
-        grid-column: 2 / span 2;
+      > .horizontal-header {
+        grid-row: 2;
+        grid-column: 1 / span 3;
       }
 
-      &.custom > .details {
-        grid-column: span 3;
+      > .details {
+        grid-row: 3;
+        grid-column: 1 / span 3;
       }
     }