@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.
80 lines (76 loc) • 2.53 kB
JavaScript
import * as React from "react";
import styled from "styled-components";
import StyledRelative from "../primitives/StyledRelative";
import StyledIconWrapper from "../primitives/StyledIconWrapper";
import StyledProgressLine from "../primitives/StyledProgressLine";
import StyledText from "../primitives/StyledText";
import CustomBadge from "./CustomBadge";
import Badge from "../../../Badge";
import Text from "../../../Text";
import Stack from "../../../Stack";
const StyledDescription = styled.div.withConfig({
displayName: "TimelineStepDesktop__StyledDescription",
componentId: "sc-3yjpwz-0"
})(["max-width:250px;width:100%;"]);
const StyledAligned = styled.div.withConfig({
displayName: "TimelineStepDesktop__StyledAligned",
componentId: "sc-3yjpwz-1"
})(["text-align:center;"]);
const Label = ({
asText,
type,
label
}) => {
if (asText) {
return /*#__PURE__*/React.createElement(Text, {
type: type,
weight: "bold"
}, label);
}
return !type ? /*#__PURE__*/React.createElement(CustomBadge, null, /*#__PURE__*/React.createElement(StyledAligned, null, label)) : /*#__PURE__*/React.createElement(Badge, {
type: type
}, /*#__PURE__*/React.createElement(StyledAligned, null, label));
};
const TimelineStepDesktop = ({
type,
last,
nextType,
children,
label,
subLabel,
asText,
typeIcon
}) => {
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, {
size: "small"
}, subLabel)), /*#__PURE__*/React.createElement(StyledRelative, {
inner: true
}, /*#__PURE__*/React.createElement(StyledProgressLine, {
"data-test": "progressLine",
desktop: true,
status: type
}), /*#__PURE__*/React.createElement(StyledIconWrapper, null, typeIcon), /*#__PURE__*/React.createElement(StyledProgressLine, {
"data-test": "progressLine",
desktop: true,
status: nextType || last && type
})), /*#__PURE__*/React.createElement(Stack, {
flex: true,
align: "center",
spacing: "XSmall",
direction: "column"
}, /*#__PURE__*/React.createElement(Label, {
asText: asText,
type: type,
label: label
}), /*#__PURE__*/React.createElement(StyledDescription, null, /*#__PURE__*/React.createElement(Text, {
align: "center",
type: type ? "primary" : "secondary"
}, children))));
};
export default TimelineStepDesktop;