-
Notifications
You must be signed in to change notification settings - Fork 4k
/
styles.ts
73 lines (66 loc) · 1.55 KB
/
styles.ts
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
69
70
71
72
73
/**
* External dependencies
*/
import styled from '@emotion/styled';
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { space } from '../ui/utils/space';
import { rtl } from '../utils';
import type { Props } from './types';
const MARGIN_DIRECTIONS: Record<
NonNullable< Props[ 'orientation' ] >,
Record< 'start' | 'end', string >
> = {
vertical: {
start: 'marginLeft',
end: 'marginRight',
},
horizontal: {
start: 'marginTop',
end: 'marginBottom',
},
};
// Renders the correct margins given the Divider's `orientation` and the writing direction.
// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined,
// the latter will take priority.
const renderMargin = ( {
'aria-orientation': orientation = 'horizontal',
margin,
marginStart,
marginEnd,
}: Props ) =>
css(
rtl( {
[ MARGIN_DIRECTIONS[ orientation ].start ]: space(
marginStart ?? margin
),
[ MARGIN_DIRECTIONS[ orientation ].end ]: space(
marginEnd ?? margin
),
} )()
);
const renderBorder = ( {
'aria-orientation': orientation = 'horizontal',
}: Props ) => {
return css( {
[ orientation === 'vertical'
? 'borderRight'
: 'borderBottom' ]: '1px solid currentColor',
} );
};
const renderSize = ( {
'aria-orientation': orientation = 'horizontal',
}: Props ) =>
css( {
height: orientation === 'vertical' ? 'auto' : 0,
width: orientation === 'vertical' ? 0 : 'auto',
} );
export const DividerView = styled.hr< Props >`
border: 0;
margin: 0;
${ renderBorder }
${ renderSize }
${ renderMargin }
`;