@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
44 lines • 3.51 kB
JavaScript
// 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 InternalBox from '../box/internal';
import InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';
import styles from './styles.css.js';
const statusToColor = {
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',
'not-started': 'text-status-inactive',
};
const CustomStep = ({ step, orientation, renderStep, }) => {
const { status, statusIconAriaLabel } = step;
const { header, details, icon } = renderStep(step);
return (React.createElement("li", { className: styles.container },
React.createElement("div", { className: styles.header },
icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel }),
orientation === 'vertical' ? header : React.createElement("hr", { className: styles.connector, role: "none" })),
orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] }, header)),
details && React.createElement("div", { className: styles.details }, details)));
};
const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, }) => {
return (React.createElement("li", { className: styles.container },
React.createElement("div", { className: styles.header }, orientation === 'vertical' ? (React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)) : (React.createElement(React.Fragment, null,
React.createElement(InternalBox, { color: statusToColor[status] },
React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel })),
React.createElement("hr", { className: styles.connector, role: "none" })))),
orientation === 'vertical' ? (React.createElement("hr", { className: styles.connector, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] },
React.createElement(InternalBox, { color: statusToColor[status] }, header))),
details && React.createElement("div", { className: styles.details }, details)));
};
const InternalSteps = ({ steps, orientation = 'vertical', renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }) => {
return (React.createElement("div", { ...props, className: clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical), ref: __internalRootRef },
React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation }))))));
};
export default InternalSteps;
//# sourceMappingURL=internal.js.map