@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.
92 lines (86 loc) • 2.76 kB
JavaScript
import _styled from "styled-components";
import * as React from "react";
import styled, { css } from "styled-components";
import StyledRelative from "../primitives/StyledRelative";
import defaultTheme from "../../../defaultTheme";
import CustomBadge from "./CustomBadge";
import Badge from "../../../Badge";
import Text from "../../../Text";
import Stack from "../../../Stack";
import StyledIconWrapper from "../primitives/StyledIconWrapper";
import StyledProgressLine from "../primitives/StyledProgressLine";
import StyledText from "../primitives/StyledText";
const StyledIndent = styled.div.withConfig({
displayName: "TimelineStepMobile__StyledIndent",
componentId: "sc-xl9v41-0"
})(["padding-left:", ";"], ({
theme,
isText
}) => !isText && theme.orbit.spaceXSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledIndent.defaultProps = {
theme: defaultTheme
};
const Label = ({
asText,
type,
label
}) => {
if (asText) {
return /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(Text, {
type: type,
weight: "medium"
}, label));
}
return !type ? /*#__PURE__*/React.createElement(CustomBadge, null, label) : /*#__PURE__*/React.createElement(Badge, {
type: type
}, label);
};
const TimelineStepMobile = ({
type,
subLabel,
label,
nextType,
typeIcon,
asText,
children,
last
}) => {
return /*#__PURE__*/React.createElement(StyledRelative, null, /*#__PURE__*/React.createElement(Stack, {
flex: true,
spaceAfter: "large",
align: "stretch",
desktop: {
align: "start"
}
}, /*#__PURE__*/React.createElement(StyledIconWrapper, {
mobile: true
}, typeIcon), !last && /*#__PURE__*/React.createElement(StyledProgressLine, {
status: nextType,
"data-test": "progressLine"
}), /*#__PURE__*/React.createElement(Stack, {
flex: true,
shrink: true,
direction: "column",
spacing: "XXSmall"
}, /*#__PURE__*/React.createElement(Stack, {
flex: true,
direction: asText ? "column" : "row",
align: asText ? "start" : "center",
spacing: "XXSmall"
}, /*#__PURE__*/React.createElement(Label, {
label: label,
asText: asText,
type: type
}), subLabel && /*#__PURE__*/React.createElement(StyledText, null, /*#__PURE__*/React.createElement(Text, {
size: "small"
}, subLabel))), /*#__PURE__*/React.createElement(StyledIndent, {
isText: asText
}, /*#__PURE__*/React.createElement(Text, {
type: type ? "primary" : "secondary"
}, children)))));
};
export default TimelineStepMobile;
var _StyledDiv = styled("div").withConfig({
displayName: "TimelineStepMobile___StyledDiv",
componentId: "sc-xl9v41-1"
})(["padding-top:2px;"]);