Skip to content

Commit 18554f9

Browse files
rwieruchrwieruch
committed
footer style
1 parent ff426cd commit 18554f9

File tree

8 files changed

+104
-22
lines changed

8 files changed

+104
-22
lines changed

‎.storybook/preview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const parameters = {
6565
'CRUD',
6666
['Create', 'Update', 'Delete'],
6767
'Misc',
68-
['Cell', 'Row', 'Column'],
68+
['Cell', 'Row', 'Column', 'Footer'],
6969
'Recipes',
7070
['Controlled'],
7171
'Client vs Server',

‎.storybook/stories/Misc/footer.story.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import {
5+
Table,
6+
Header,
7+
HeaderRow,
8+
Body,
9+
Row,
10+
HeaderCell,
11+
Cell,
12+
Footer,
13+
FooterRow,
14+
FooterCell,
15+
} from '@table-library/react-table-library/table';
16+
17+
import { nodes } from '../data';
18+
19+
storiesOf('Misc/Footer', module)
20+
.addParameters({ component: Table })
21+
.add('base', () => {
22+
const data = { nodes };
23+
24+
return (
25+
<Table data={data}>
26+
{(tableList) => (
27+
<>
28+
<Header>
29+
<HeaderRow>
30+
<HeaderCell>Task</HeaderCell>
31+
<HeaderCell>Deadline</HeaderCell>
32+
<HeaderCell>Type</HeaderCell>
33+
<HeaderCell>Complete</HeaderCell>
34+
<HeaderCell>Tasks</HeaderCell>
35+
</HeaderRow>
36+
</Header>
37+
38+
<Body>
39+
{tableList.map((item) => (
40+
<Row key={item.id} item={item}>
41+
<Cell>{item.name}</Cell>
42+
<Cell>
43+
{item.deadline.toLocaleDateString('en-US', {
44+
year: 'numeric',
45+
month: '2-digit',
46+
day: '2-digit',
47+
})}
48+
</Cell>
49+
<Cell>{item.type}</Cell>
50+
<Cell>{item.isComplete.toString()}</Cell>
51+
<Cell>{item.nodes?.length}</Cell>
52+
</Row>
53+
))}
54+
</Body>
55+
56+
<Footer>
57+
<FooterRow>
58+
<FooterCell>Task</FooterCell>
59+
<FooterCell>Deadline</FooterCell>
60+
<FooterCell>Type</FooterCell>
61+
<FooterCell>Complete</FooterCell>
62+
<FooterCell>Tasks</FooterCell>
63+
</FooterRow>
64+
</Footer>
65+
</>
66+
)}
67+
</Table>
68+
);
69+
});

‎.storybook/stories/Themes/Libraries/mantine/theme.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const Component = () => {
3737
background-color: #fafafa;
3838
}
3939
}
40-
`,
40+
`,
4141
};
4242
const theme = useTheme([mantineTheme, customTheme]);
4343

‎src/common/components/Cell.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,14 @@ const CellContainer = React.forwardRef(
7373
},
7474
);
7575

76-
const HEADER_CELL_CONTAINER_STYLE = css`
76+
const HEADER_CELL_CONTAINER_STYLE = ({ _inverseBorder }: { _inverseBorder?: boolean }) => css`
7777
${BASE_STYLE}
7878
7979
position: relative;
8080
81-
border-bottom: 1px solid ${COLORS.BORDER};
81+
${_inverseBorder
82+
? `border-top: 1px solid ${COLORS.BORDER};`
83+
: `border-bottom: 1px solid ${COLORS.BORDER};`}
8284
8385
svg,
8486
path {
@@ -88,7 +90,7 @@ const HEADER_CELL_CONTAINER_STYLE = css`
8890

8991
const HeaderCellContainer = React.forwardRef(
9092
(props: Record<string, any>, ref: React.ForwardedRef<HTMLDivElement>) => {
91-
return <div {...props} css={HEADER_CELL_CONTAINER_STYLE} ref={ref} />;
93+
return <div {...props} css={HEADER_CELL_CONTAINER_STYLE(props)} ref={ref} />;
9294
},
9395
);
9496

‎src/table/Footer/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const FooterRow: React.FC<HeaderRowProps> = (props) => (
1717
);
1818

1919
const FooterCell: React.FC<HeaderCellProps> = (props) => (
20-
<HeaderCell {...props} role="columnfooter" />
20+
<HeaderCell {...props} role="columnfooter" _inverseBorder />
2121
);
2222

2323
export { Footer, FooterRow, FooterCell };

‎src/themes/chakra-ui/index.ts

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,28 @@ const getCommonTheme = (options: OptionsSound, _: ConfigurationSound) => ({
3232
caption {
3333
color: #868e96;
3434
}
35-
36-
.tr-footer {
37-
border-top: 1px solid #e2e8f0;
38-
border-bottom: 1px solid transparent;
39-
}
4035
`,
4136
BaseRow: `
4237
color: #4a5568;
4338
`,
4439
HeaderRow: `
4540
text-transform: uppercase;
4641
font-size: 12px;
47-
4842
font-weight: bold;
4943
5044
border-bottom: 1px solid #e2e8f0;
45+
46+
&.tr-footer {
47+
border-top: 1px solid transparent;
48+
border-bottom: 1px solid transparent;
49+
}
5150
`,
5251
Row: `
5352
font-size: 16px;
5453
55-
&.row-select.row-select-single-selected, &.row-select.row-select-selected {
54+
border-bottom: 1px solid #e2e8f0;
55+
56+
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
5657
background-color: #81E6D9;
5758
border-bottom: 1px solid #81E6D9;
5859
}
@@ -66,6 +67,7 @@ const getCommonTheme = (options: OptionsSound, _: ConfigurationSound) => ({
6667
padding-right: ${options.horizontalSpacing}px;
6768
}
6869
70+
border-top: 1px solid transparent;
6971
border-right: 1px solid transparent;
7072
border-bottom: 1px solid transparent;
7173
`,

‎src/themes/mantine/index.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,28 @@ const getCommonTheme = (options: OptionsSound, _: ConfigurationSound) => ({
3939
HeaderRow: `
4040
height: 42px;
4141
42+
border-bottom: 1px solid #dee2e6;
43+
4244
&.tr-footer {
45+
border-top: 1px solid transparent;
4346
border-bottom: 1px solid transparent;
4447
}
4548
`,
4649
Row: `
4750
height: 49px;
4851
49-
&.row-select.row-select-single-selected, &.row-select.row-select-selected {
52+
border-bottom: 1px solid #dee2e6;
53+
54+
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
5055
background-color: #b3dcff;
5156
border-bottom: 1px solid #b3dcff;
5257
}
5358
`,
5459
BaseRow: `
5560
font-size: 14px;
56-
57-
border-bottom: 1px solid #dee2e6;
5861
`,
5962
BaseCell: `
63+
border-top: 1px solid transparent;
6064
border-right: 1px solid transparent;
6165
border-bottom: 1px solid transparent;
6266

‎src/themes/material-ui/index.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,11 +38,6 @@ const getCommonTheme = (options: OptionsSound, _: ConfigurationSound) => ({
3838
font-size: 14px;
3939
color: #868e96;
4040
}
41-
42-
.tr-footer {
43-
border-top: 1px solid #e0e0e0;
44-
border-bottom: 1px solid transparent;
45-
}
4641
`,
4742
BaseRow: `
4843
height: 54px;
@@ -51,16 +46,26 @@ const getCommonTheme = (options: OptionsSound, _: ConfigurationSound) => ({
5146
`,
5247
HeaderRow: `
5348
font-weight: bold;
49+
5450
border-bottom: 1px solid #e0e0e0;
51+
52+
&.tr-footer {
53+
border-top: 1px solid transparent;
54+
border-bottom: 1px solid transparent;
55+
}
5556
`,
5657
Row: `
57-
&.row-select.row-select-single-selected, &.row-select.row-select-selected {
58+
border-bottom: 1px solid #e0e0e0;
59+
60+
&.tr.tr-body.row-select.row-select-single-selected, &.tr.tr-body.row-select.row-select-selected {
5861
background-color: #bddffd;
62+
border-bottom: 1px solid #bddffd;
5963
}
6064
`,
6165
BaseCell: `
6266
padding: ${options.verticalSpacing}px ${options.horizontalSpacing}px;
6367
68+
border-top: 1px solid transparent;
6469
border-right: 1px solid transparent;
6570
border-bottom: 1px solid transparent;
6671

0 commit comments

Comments
 (0)