-
Notifications
You must be signed in to change notification settings - Fork 91
/
StyledTable.tsx
85 lines (71 loc) · 1.99 KB
/
StyledTable.tsx
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
74
75
76
77
78
79
80
81
82
83
84
85
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import styled from 'styled-components';
import stripUnit from 'polished/lib/helpers/stripUnit';
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
import { StyledHeaderCell, StyledHeaderRow, StyledRow, StyledCell } from './';
const COMPONENT_ID = 'tables.table';
type SIZE = 'small' | 'large';
export interface IStyledTableProps {
size?: SIZE;
}
/**
* 1. <table> reset
* 2. <th> reset
*/
export const StyledTable = styled.table.attrs<IStyledTableProps>({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION
})<IStyledTableProps>`
display: table;
border: none; /* [1] */
width: 100%; /* [1] */
table-layout: fixed; /* [1] */
border-collapse: collapse; /* [1] */
border-spacing: 0; /* [1] */
line-height: ${props => (props.theme.space.base * 5) / stripUnit(props.theme.fontSizes.md)};
color: ${props => getColor('neutralHue', 800, props.theme)};
font-size: ${props => props.theme.fontSizes.md};
direction: ${props => props.theme.rtl && 'rtl'};
${props =>
props.size === 'large' &&
`
${StyledRow} {
height: 64px;
}
${StyledHeaderRow} {
height: 72px;
}
${StyledCell}:not([data-garden-overflow='true']) {
padding-top: 22px;
padding-bottom: 22px;
}
${StyledHeaderCell}:not([data-garden-overflow='true']) {
padding-top: 26px;
padding-bottom: 26px;
}
`};
${props =>
props.size === 'small' &&
`
${StyledRow} {
height: 32px;
}
${StyledHeaderRow} {
height: 40px;
}
${StyledCell}:not([data-garden-overflow='true']) {
padding-top: 6px;
padding-bottom: 6px;
}
${StyledHeaderCell}:not([data-garden-overflow='true']) {
padding-top: 10px;
padding-bottom: 10px;
}
`};
${props => retrieveComponentStyles(COMPONENT_ID, props)};
`;