@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
16 lines (15 loc) • 1.21 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiSpacer } from "../spacer/Spacer";
import { Fragment } from "react";
export const VuiList = ({ items, size = "m", alignItems = "center" }) => {
return (_jsx(_Fragment, { children: items.map((item, index) => {
const humanizedStep = index + 1;
const numberClasses = classNames("vuiListNumber", `vuiListNumber--${size}`, {
"vuiListNumber-isComplete": item.isComplete
});
return (_jsxs(Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: alignItems, spacing: size }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx("div", Object.assign({ className: numberClasses, "aria-label": `Step ${humanizedStep}` }, { children: humanizedStep })) })), _jsx(VuiFlexItem, Object.assign({ grow: 1, alignItems: "start" }, { children: item.render() }))] })), index < items.length - 1 && _jsx(VuiSpacer, { size: "s" })] }, item.key));
}) }));
};