@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.
71 lines • 2.27 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import StyledRelative from "../primitives/StyledRelative";
import TypeIcon from "./TypeIcon";
import StyledProgressLine from "../primitives/StyledProgressLine";
import StyledText from "../primitives/StyledText";
import Text from "../../../Text";
import Stack from "../../../Stack";
import defaultTheme from "../../../defaultTheme";
const StyledDescription = styled.div.withConfig({
displayName: "TimelineStepDesktop__StyledDescription",
componentId: "sc-zvbdcg-0"
})(["", ""], ({
theme,
active
}) => css(["max-width:250px;width:100%;> p{color:", ";}"], active ? theme.orbit.paletteInkDark : theme.orbit.paletteInkLight));
StyledDescription.defaultProps = {
theme: defaultTheme
};
const TimelineStepDesktop = ({
type,
nextType,
prevType,
last,
children,
active,
label,
subLabel
}) => {
return /*#__PURE__*/React.createElement(Stack, {
inline: true,
shrink: true,
direction: "column",
align: "center",
spaceAfter: "large"
}, subLabel && /*#__PURE__*/React.createElement(StyledText, null, /*#__PURE__*/React.createElement(Text, {
align: "center",
size: "small"
}, subLabel)), /*#__PURE__*/React.createElement(StyledRelative, {
inner: true
}, /*#__PURE__*/React.createElement(StyledProgressLine, {
desktop: true,
status: type,
prevStatus: prevType,
nextStatus: nextType
}), /*#__PURE__*/React.createElement(TypeIcon, {
type: type,
active: !!active
}), /*#__PURE__*/React.createElement(StyledProgressLine, {
desktop: true,
status: !nextType && !last ? undefined : type,
prevStatus: prevType,
nextStatus: nextType,
last: last
})), /*#__PURE__*/React.createElement(Stack, {
flex: true,
align: "center",
spacing: "XSmall",
direction: "column"
}, /*#__PURE__*/React.createElement(StyledText, {
active: active || last && type === "success"
}, /*#__PURE__*/React.createElement(Text, {
align: "center",
weight: "bold"
}, label)), /*#__PURE__*/React.createElement(StyledDescription, {
active: active || last && type === "success"
}, /*#__PURE__*/React.createElement(Text, {
align: "center"
}, children))));
};
export default TimelineStepDesktop;