@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.
66 lines • 2.07 kB
JavaScript
import * as React from "react";
import cx from "clsx";
import TypeIcon from "./TypeIcon";
import ProgressLine from "./ProgressLine";
import TextWrapper from "./TextWrapper";
import Text from "../../../Text";
import Stack from "../../../Stack";
import useTheme from "../../../hooks/useTheme";
const TimelineStepDesktop = ({
type,
nextType,
prevType,
last,
children,
active,
label,
subLabel,
hasSubLabelMargin
}) => {
const theme = useTheme();
return /*#__PURE__*/React.createElement(Stack, {
inline: true,
shrink: true,
direction: "column",
align: "center",
as: "li"
}, /*#__PURE__*/React.createElement("div", {
className: cx("relative flex w-[calc(100%+theme(spacing.400))] items-center"),
"aria-hidden": true
}, /*#__PURE__*/React.createElement(ProgressLine, {
desktop: true,
status: type,
prevStatus: prevType,
nextStatus: nextType
}), /*#__PURE__*/React.createElement(TypeIcon, {
type: type,
active: !!active
}), /*#__PURE__*/React.createElement(ProgressLine, {
desktop: true,
status: !nextType && !last ? undefined : type,
prevStatus: prevType,
nextStatus: nextType,
last: last
})), /*#__PURE__*/React.createElement(Stack, {
flex: true,
align: "center",
spacing: "200",
direction: "column"
}, subLabel && /*#__PURE__*/React.createElement(TextWrapper, null, /*#__PURE__*/React.createElement(Text, {
align: "center",
size: "small"
}, subLabel)), /*#__PURE__*/React.createElement(TextWrapper, {
active: active || last && type === "success"
}, /*#__PURE__*/React.createElement(Text, {
align: "center",
weight: "bold",
margin: {
top: !subLabel && hasSubLabelMargin ? theme.orbit.space600 : 0
}
}, label)), children && /*#__PURE__*/React.createElement("div", {
className: cx("w-full max-w-[250px]", active || last && type === "success" ? "[&>p]:text-ink-dark" : "[&>p]:text-ink-light")
}, /*#__PURE__*/React.createElement(Text, {
align: "center"
}, children))));
};
export default TimelineStepDesktop;