@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.
44 lines • 1.44 kB
JavaScript
import styled, { css } from "styled-components";
import { left } from "../../../utils/rtl";
import defaultTheme from "../../../defaultTheme";
import { renderStatus } from "./helpers";
const getBorderStyle = ({
desktop,
status,
nextStatus,
theme,
last,
prevStatus
}) => {
if (desktop) {
if (status && !nextStatus && !last) {
return css(["border-image-slice:1;border-image-source:linear-gradient( to right,", ",", " );"], renderStatus(prevStatus, theme), renderStatus(status, theme));
}
}
if (status && !nextStatus && !last) {
return css(["border-image-slice:1;border-image-source:linear-gradient( to bottom,", ",", " );"], renderStatus(prevStatus, theme), renderStatus(status, theme));
}
return css(["border-color:", ";"], renderStatus(status, theme));
};
const StyledProgressLine = styled.span.withConfig({
displayName: "StyledProgressLine",
componentId: "sc-pwuxl0-0"
})(["", ""], ({
desktop,
theme,
status,
nextStatus,
prevStatus,
last
}) => css(["position:", ";top:", ";border-width:1px;border-style:", ";", ";", ":", ";width:", ";height:", ";"], !desktop && "absolute", !desktop && "15px", !status ? "dashed" : "solid", getBorderStyle({
desktop,
theme,
status,
nextStatus,
prevStatus,
last
}), left, !desktop && "11px", desktop && "50%", !desktop && `calc(100% + 2px)`));
StyledProgressLine.defaultProps = {
theme: defaultTheme
};
export default StyledProgressLine;