@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.
58 lines (52 loc) • 3.7 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import STOPS from "./consts";
const StyledArrow = styled.svg.withConfig({
displayName: "StopoverArrow__StyledArrow",
componentId: "sc-19ccrmh-0"
})(["vertical-align:middle;fill:currentColor;color:", ";width:", ";height:", ";", ";"], ({
theme
}) => theme.orbit.colorStopoverArrow, ({
theme
}) => theme.orbit.widthStopoverArrow, ({
theme
}) => theme.orbit.heightStopoverArrow, ({
theme
}) => theme.rtl && css(["transform:scale(-1,1);"]));
StyledArrow.defaultProps = {
theme: defaultTheme
};
const Stops = ({
stops
}) => {
if (stops === STOPS.ONE) {
return React.createElement("path", {
d: "M36 3.5001L32.4678 7l-.7063-.7 2.326-2.3051H19.9304c-.2315 1.1294-1.2395 1.9796-2.4475 1.9796-1.208 0-2.2161-.8502-2.4476-1.9796H0v-.99h15.0352c.2315-1.1296 1.2393-1.9801 2.4476-1.9801s2.216.8505 2.4475 1.9801h14.1573L31.7615.7002 32.468 0 36 3.5001zm-20.0157-.0005c0 .82.671 1.485 1.4985 1.485.8275 0 1.4985-.665 1.4985-1.485 0-.82-.671-1.4849-1.4985-1.4849-.8276 0-1.4985.6649-1.4985 1.485z"
});
}
if (stops === STOPS.TWO) {
return React.createElement("path", {
d: "M36 3.5001l-.7064.7L32.468 7l-.7067-.7 2.3264-2.3051H23.9266c-.2315 1.1294-1.2396 1.9796-2.4476 1.9796s-2.2161-.8502-2.4476-1.9796h-4.096c.0185-.09.0319-.1818.0402-.2748-.1131 1.2628-1.1839 2.2544-2.4878 2.2544-1.208 0-2.2161-.8502-2.4476-1.9796H0v-.99h10.04c.2312-1.1296 1.2395-1.9801 2.4478-1.9801s2.2166.8505 2.4478 1.9801h4.0956c.2312-1.1296 1.2395-1.9801 2.4478-1.9801s2.2166.8505 2.4478 1.9801h10.1605L31.7614.7002 32.4678 0l2.8258 2.8L36 3.5zm-25.0107-.0005c0 .82.6709 1.485 1.4985 1.485.8276 0 1.4985-.665 1.4985-1.485 0-.82-.671-1.4849-1.4985-1.4849-.8276 0-1.4985.6649-1.4985 1.485zm10.4897 1.485c.8276 0 1.4985-.665 1.4985-1.485 0-.82-.671-1.4849-1.4985-1.4849-.8276 0-1.4985.6649-1.4985 1.485 0 .82.671 1.4849 1.4985 1.4849z"
});
}
if (stops === STOPS.THREE) {
return React.createElement("path", {
d: "M32.4679 0l2.8257 2.8L36 3.5l-.7064.7L32.4682 7l-.7066-.7 2.3262-2.3051H28.922c-.2314 1.1294-1.2395 1.9796-2.4475 1.9796-1.208 0-2.216-.8502-2.4476-1.9796H19.931c.016-.0781.0284-.1576.0367-.2383l-.0014.0133a2.4551 2.4551 0 0 1-.0353.225c-.2315 1.1294-1.2396 1.9796-2.4476 1.9796s-2.216-.8502-2.4475-1.9796H10.94c-.2315 1.1294-1.2396 1.9796-2.4475 1.9796-1.3752 0-2.491-1.1018-2.4975-2.463a2.4498 2.4498 0 0 0 .05.4834H0v-.99h6.0447a2.3365 2.3365 0 0 0-.0385.2598c.1195-1.2565 1.187-2.24 2.4863-2.24 1.3792 0 2.4975 1.1082 2.4975 2.475a2.444 2.444 0 0 0-.0497-.4947l4.0954-.0001c.2312-1.1296 1.2394-1.9801 2.4477-1.9801 1.2083 0 2.2166.8505 2.4478 1.9801h4.0954c.2312-1.1296 1.2395-1.9801 2.4478-1.9801s2.2166.8505 2.4477 1.9801h5.1652L31.7616.7002 32.4679 0zM8.4925 4.9846c.8275 0 1.4985-.665 1.4985-1.485 0-.82-.671-1.4849-1.4985-1.4849-.8276 0-1.4985.6649-1.4985 1.485 0 .82.6709 1.4849 1.4985 1.4849zm7.4924-1.485c0 .82.671 1.485 1.4985 1.485.8276 0 1.4985-.665 1.4985-1.485 0-.82-.671-1.4849-1.4985-1.4849-.8275 0-1.4985.6649-1.4985 1.485zm10.4895 1.485c.8275 0 1.4985-.665 1.4985-1.485 0-.82-.671-1.4849-1.4985-1.4849-.8276 0-1.4985.6649-1.4985 1.485 0 .82.671 1.4849 1.4985 1.4849z"
});
}
return React.createElement("path", {
d: "M35.2934 4.2L36 3.5002 35.2937 2.8 32.4671 0l-.7068.7 2.327 2.3051H0v.99h34.0872l-2.3267 2.3047L32.467 7z"
});
};
const StopoverArrow = ({
stops = STOPS.ZERO,
dataTest
}) => React.createElement(StyledArrow, {
preserveAspectRatio: "xMidYMid meet",
viewBox: "0 0 36 7",
"data-test": dataTest
}, React.createElement(Stops, {
stops: stops
}));
export default StopoverArrow;