@itwin/itwinui-react/esm/core/Stepper/WorkflowDiagram.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { Box } from '../../utils/index.js';
import { WorkflowDiagramStep } from './WorkflowDiagramStep.js';
export const WorkflowDiagram = React.forwardRef((props, ref) => {
  let { steps, className, contentProps, wrapperProps, ...rest } = props;
  return React.createElement(
    Box,
    {
      as: 'div',
      ...wrapperProps,
      ref: ref,
    },
    React.createElement(
      Box,
      {
        as: 'ol',
        className: cx('iui-workflow-diagram', className),
        ...rest,
      },
      steps.map((s, index) => {
        let thisContentProps = contentProps?.(index);
        return React.createElement(WorkflowDiagramStep, {
          contentProps: thisContentProps,
          key: index,
          title: s.name,
          description: s.description,
        });
      }),
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  WorkflowDiagram.displayName = 'WorkflowDiagram';