Skip to content

Commit b2fe177

Browse files
LakateLakate
authored
feat(Table, HS, BackgroundImage): add new view for Table and fix design bugs (#622)
1 parent 6655545 commit b2fe177

File tree

12 files changed

+124
-5
lines changed

12 files changed

+124
-5
lines changed

‎src/blocks/Table/__stories__/Table.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,7 @@ const DefaultTemplate: StoryFn<TableBlockModel> = (args) => (
2020
export const Default = DefaultTemplate.bind({});
2121

2222
Default.args = data.default.content as TableBlockModel;
23+
24+
export const Tick = DefaultTemplate.bind({});
25+
26+
Tick.args = data.tick.content as TableBlockModel;

‎src/blocks/Table/__stories__/data.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,25 @@
1616
"justify": ["start", "center", "center", "center"]
1717
}
1818
}
19+
},
20+
"tick": {
21+
"content": {
22+
"type": "table-block",
23+
"title": "Lorem ipsum dolor sit amet",
24+
"table": {
25+
"content": [
26+
["Lorem", "ipsum dolor sit", "amet", "minim"],
27+
["Ut enim ad minim veniam", "0", "0", "0"],
28+
["Ut enim ad minim veniam", "0", "0", "1"],
29+
["Ut enim ad minim veniam", "1", "0", "0"],
30+
["Ut enim ad minim veniam", "0", "1", "1"],
31+
["Ut enim ad minim veniam", "1", "1", "1"]
32+
],
33+
"marker": "tick",
34+
"hideLegend": true,
35+
"legend": ["Lorem", "ipsum"],
36+
"justify": ["start", "center", "center", "center"]
37+
}
38+
}
1939
}
2040
}

‎src/blocks/Table/schema.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,16 @@ export const TableBlock = {
4242
contentType: 'yfm',
4343
},
4444
},
45+
hideLegend: {
46+
type: 'boolean',
47+
},
4548
justify: {
4649
type: 'array',
4750
items: JustifyProps,
4851
},
4952
marker: {
5053
type: 'string',
51-
enum: ['disk'],
54+
enum: ['disk', 'tick'],
5255
},
5356
},
5457
},

‎src/components/Table/Table.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from 'react';
22

3+
import {Icon} from '@gravity-ui/uikit';
4+
35
import {HTML, YFMWrapper} from '../';
6+
import {Minus, Tick} from '../../icons';
47
import {ClassNameProps, Justify, LegendTableMarkerType, TableProps} from '../../models';
58
import {block} from '../../utils';
69

@@ -18,7 +21,7 @@ const b = block('table');
1821

1922
export default class Table extends React.Component<TableProps & ClassNameProps> {
2023
render() {
21-
const {content, legend, marker = 'disk', className, caption} = this.props;
24+
const {content, legend, hideLegend, marker = 'disk', className, caption} = this.props;
2225

2326
if (!content || !content.length || !content[0].length) {
2427
return null;
@@ -27,7 +30,7 @@ export default class Table extends React.Component<TableProps & ClassNameProps>
2730
return (
2831
<div className={b(null, className)} role={'table'} aria-label={caption}>
2932
{this.renderTable(content, marker, legend)}
30-
{legend && this.renderLegend(legend, marker)}
33+
{legend && !hideLegend && this.renderLegend(legend, marker)}
3134
</div>
3235
);
3336
}
@@ -59,7 +62,9 @@ export default class Table extends React.Component<TableProps & ClassNameProps>
5962
<div
6063
aria-labelledby={getMarkerId(Number(cell))}
6164
className={b('marker', {type, index: String(cell)})}
62-
/>
65+
>
66+
{type === 'tick' ? <Icon data={Number(cell) === 1 ? Tick : Minus} /> : null}
67+
</div>
6368
);
6469
}
6570

‎src/components/Table/__stories__/Table.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,7 @@ const DefaultTemplate: StoryFn<TableProps> = (args) => <Table {...args} />;
1717
export const Default = DefaultTemplate.bind({});
1818

1919
Default.args = data.default.content as TableProps;
20+
21+
export const Tick = DefaultTemplate.bind({});
22+
23+
Tick.args = data.tick.content as TableProps;

‎src/components/Table/__stories__/data.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,26 @@
55
["Lorem", "ipsum dolor sit", "amet", "minim"],
66
["Ut enim ad minim veniam", "0", "0", "0"],
77
["Ut enim ad minim veniam", "0", "0", "1"],
8+
["Ut enim ad minim veniam", "0", "2", "1"],
9+
["Ut enim ad minim veniam", "0", "1", "1"],
10+
["Ut enim ad minim veniam", "1", "1", "1"]
11+
],
12+
"legend": ["Lorem", "ipsum"],
13+
"justify": ["start", "center", "center", "center"]
14+
}
15+
},
16+
"tick": {
17+
"content": {
18+
"content": [
19+
["Lorem", "ipsum dolor sit", "amet", "minim"],
20+
["Ut enim ad minim veniam", "0", "0", "0"],
821
["Ut enim ad minim veniam", "0", "0", "1"],
22+
["Ut enim ad minim veniam", "1", "0", "0"],
923
["Ut enim ad minim veniam", "0", "1", "1"],
1024
["Ut enim ad minim veniam", "1", "1", "1"]
1125
],
26+
"marker": "tick",
27+
"hideLegend": true,
1228
"legend": ["Lorem", "ipsum"],
1329
"justify": ["start", "center", "center", "center"]
1430
}

‎src/icons/Minus.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
3+
import {a11yHiddenSvgProps} from '../utils/svg';
4+
5+
export const Minus: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
6+
<svg
7+
xmlns="http://www.w3.org/2000/svg"
8+
width="18"
9+
height="18"
10+
viewBox="0 0 18 18"
11+
fill="none"
12+
stroke="none"
13+
{...a11yHiddenSvgProps}
14+
{...props}
15+
>
16+
<path
17+
fill="#B5BFC6"
18+
fillRule="evenodd"
19+
d="M1.969 9c0-.466.378-.844.843-.844h12.376a.844.844 0 0 1 0 1.688H2.812A.844.844 0 0 1 1.97 9Z"
20+
clipRule="evenodd"
21+
/>
22+
</svg>
23+
);

‎src/icons/Tick.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
3+
import {a11yHiddenSvgProps} from '../utils/svg';
4+
5+
export const Tick: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
6+
<svg
7+
xmlns="http://www.w3.org/2000/svg"
8+
width="18"
9+
height="18"
10+
viewBox="0 0 18 18"
11+
fill="none"
12+
stroke="none"
13+
{...a11yHiddenSvgProps}
14+
{...props}
15+
>
16+
<g clipPath="url(#a)">
17+
<path
18+
fill="#37F"
19+
fillRule="evenodd"
20+
d="M15.174 3.86a.844.844 0 0 1 .092 1.19l-6.75 7.874a.843.843 0 0 1-1.238.048L3.341 9.034a.844.844 0 1 1 1.193-1.193l3.293 3.293 6.157-7.183a.844.844 0 0 1 1.19-.092Z"
21+
clipRule="evenodd"
22+
/>
23+
</g>
24+
<defs>
25+
<clipPath id="a">
26+
<path fill="#fff" d="M0 0h18v18H0z" />
27+
</clipPath>
28+
</defs>
29+
</svg>
30+
);

‎src/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,5 @@ export * from './PreviewClose';
99
export * from './NavigationClose';
1010
export * from './NavigationOpen';
1111
export * from './NavigationArrow';
12+
export * from './Tick';
13+
export * from './Minus';

‎src/models/constructor-items/blocks.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,7 @@ export interface InfoBlockProps {
251251
export interface TableProps {
252252
content: string[][];
253253
legend?: string[];
254+
hideLegend?: boolean;
254255
justify?: Justify[];
255256
marker?: LegendTableMarkerType;
256257
/**

0 commit comments

Comments
 (0)