/
index.jsx
68 lines (59 loc) · 1.69 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// @flow
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 type { Props, Indent } from ".";
function capitalize(string: string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function getIndentAmount({
theme,
indent,
}: // StyledContainer takes more props, so this shouldn't be exact
// eslint-disable-next-line flowtype/require-exact-type
{
theme: typeof defaultTheme,
indent: Indent,
}) {
return indent === "none" ? 0 : theme.orbit[`space${capitalize(indent)}`];
}
const StyledContainer = styled.div`
${({ align }) => css`
box-sizing: border-box;
width: 100%;
${align === "left" &&
css`
padding-${right}: ${getIndentAmount};
`};
${align === "right" &&
css`
padding-${left}: ${getIndentAmount};
`};
${align === "center" &&
css`
padding: 0 ${getIndentAmount};
`};
`};
`;
export const StyledSeparator: any = styled.hr`
${({ theme }) => css`
height: ${theme.orbit.heightSeparator};
background: ${theme.orbit.backgroundSeparator};
box-sizing: border-box;
border-style: none;
margin-top: 0;
margin-bottom: ${getSpacingToken};
`};
`;
// $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledSeparator.defaultProps = {
theme: defaultTheme,
};
const Separator = ({ align = "left", indent = "none", spaceAfter }: Props): React.Node => (
<StyledContainer align={align} indent={indent}>
<StyledSeparator spaceAfter={spaceAfter} />
</StyledContainer>
);
export default Separator;