@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.
50 lines • 1.75 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import getSpacingToken from "../common/getSpacingToken";
import { left, right } from "../utils/rtl";
import useTheme from "../hooks/useTheme";
function capitalize(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function getIndentAmount({
theme,
$indent
}) {
return $indent === "none" ? 0 : theme.orbit[`space${capitalize($indent)}`];
}
const StyledContainer = styled.div.withConfig({
displayName: "Separator__StyledContainer",
componentId: "sc-1k4hjle-0"
})(["", ";"], ({
$align
}) => css(["box-sizing:border-box;width:100%;padding-", ":", ";padding-", ":", ";padding:", ";"], right, $align === "left" && getIndentAmount, left, $align === "right" && getIndentAmount, $align === "center" && `0 ${getIndentAmount}`));
export const StyledSeparator = styled.hr.withConfig({
displayName: "Separator__StyledSeparator",
componentId: "sc-1k4hjle-1"
})(["", ";"], ({
theme,
$type,
$color
}) => css(["height:", ";background:", ";box-sizing:border-box;border-style:", ";border-color:", ";margin-top:0;margin-bottom:", ";"], theme.orbit.heightSeparator, theme.orbit.backgroundSeparator, $type, $color, getSpacingToken));
StyledSeparator.defaultProps = {
theme: defaultTheme
};
const Separator = ({
align = "left",
indent = "none",
spaceAfter,
type = "none",
color
}) => {
const theme = useTheme();
return /*#__PURE__*/React.createElement(StyledContainer, {
$align: align,
$indent: indent
}, /*#__PURE__*/React.createElement(StyledSeparator, {
$type: type,
spaceAfter: spaceAfter,
$color: color && theme.orbit[color]
}));
};
export default Separator;