@digigov/react-core 2.0.0-a32ad9b2 → 2.0.0-a594a958
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AccordionSection/index.web.d.ts +0 -1
- package/AccordionSection/index.web.js.map +2 -2
- package/AccordionSectionSummaryHeading/index.d.ts +1 -0
- package/AccordionSectionSummaryHeading/index.js +3 -2
- package/AccordionSectionSummaryHeading/index.js.map +2 -2
- package/BannerContainer/index.js +1 -1
- package/BannerContainer/index.js.map +2 -2
- package/Button/index.js +1 -0
- package/Button/index.js.map +2 -2
- package/{CircularProgress → CircularProgressBase}/index.d.ts +5 -5
- package/{CircularProgress → CircularProgressBase}/index.js +4 -4
- package/CircularProgressBase/index.js.map +7 -0
- package/{CircularProgress → CircularProgressBase}/package.json +1 -1
- package/DetailsContent/index.d.ts +1 -0
- package/DetailsContent/index.js +3 -2
- package/DetailsContent/index.js.map +2 -2
- package/Grid/index.d.ts +1 -7
- package/Grid/index.js.map +2 -2
- package/LinkBase/index.js +1 -0
- package/LinkBase/index.js.map +2 -2
- package/NavListItemActionBase/index.js +2 -2
- package/NavListItemActionBase/index.js.map +2 -2
- package/SummaryList/index.d.ts +10 -2
- package/SummaryList/index.js +10 -2
- package/SummaryList/index.js.map +2 -2
- package/SummaryListItem/index.js +1 -1
- package/SummaryListItem/index.js.map +2 -2
- package/SummaryListItemKey/index.d.ts +14 -0
- package/SummaryListItemKey/index.js +14 -2
- package/SummaryListItemKey/index.js.map +2 -2
- package/SummaryListItemValue/index.d.ts +14 -0
- package/SummaryListItemValue/index.js +11 -2
- package/SummaryListItemValue/index.js.map +2 -2
- package/Table/index.d.ts +9 -0
- package/Table/index.js +4 -1
- package/Table/index.js.map +2 -2
- package/TableDataCell/index.d.ts +22 -0
- package/TableDataCell/index.js +18 -2
- package/TableDataCell/index.js.map +2 -2
- package/WarningText/index.d.ts +7 -0
- package/WarningText/index.js +10 -2
- package/WarningText/index.js.map +2 -2
- package/cjs/AccordionSection/index.web.js.map +2 -2
- package/cjs/AccordionSectionSummaryHeading/index.js +3 -2
- package/cjs/AccordionSectionSummaryHeading/index.js.map +2 -2
- package/cjs/BannerContainer/index.js +1 -1
- package/cjs/BannerContainer/index.js.map +2 -2
- package/cjs/Button/index.js +1 -0
- package/cjs/Button/index.js.map +2 -2
- package/cjs/{CircularProgress → CircularProgressBase}/index.js +8 -8
- package/cjs/CircularProgressBase/index.js.map +7 -0
- package/cjs/DetailsContent/index.js +3 -2
- package/cjs/DetailsContent/index.js.map +2 -2
- package/cjs/Grid/index.js.map +2 -2
- package/cjs/LinkBase/index.js +1 -0
- package/cjs/LinkBase/index.js.map +2 -2
- package/cjs/NavListItemActionBase/index.js +2 -2
- package/cjs/NavListItemActionBase/index.js.map +2 -2
- package/cjs/SummaryList/index.js +10 -2
- package/cjs/SummaryList/index.js.map +2 -2
- package/cjs/SummaryListItem/index.js +1 -1
- package/cjs/SummaryListItem/index.js.map +2 -2
- package/cjs/SummaryListItemKey/index.js +14 -2
- package/cjs/SummaryListItemKey/index.js.map +3 -3
- package/cjs/SummaryListItemValue/index.js +11 -2
- package/cjs/SummaryListItemValue/index.js.map +3 -3
- package/cjs/Table/index.js +4 -1
- package/cjs/Table/index.js.map +2 -2
- package/cjs/TableDataCell/index.js +18 -2
- package/cjs/TableDataCell/index.js.map +3 -3
- package/cjs/WarningText/index.js +10 -2
- package/cjs/WarningText/index.js.map +2 -2
- package/cjs/index.js +2 -4
- package/cjs/index.js.map +2 -2
- package/cjs/lazy/index.js +1 -2
- package/cjs/lazy.js.map +2 -2
- package/cjs/registry/index.js +8 -10
- package/cjs/registry.js.map +2 -2
- package/index.d.ts +1 -2
- package/index.js +2 -3
- package/index.js.map +2 -2
- package/lazy/index.js +1 -2
- package/package.json +3 -3
- package/registry/index.js +8 -10
- package/src/Accordion/__snapshots__/index.test.tsx.snap +48 -0
- package/src/Accordion/index.test.tsx +24 -0
- package/src/AccordionSection/index.web.tsx +0 -1
- package/src/AccordionSectionSummaryHeading/__snapshots__/index.test.tsx.snap +17 -0
- package/src/AccordionSectionSummaryHeading/index.test.tsx +9 -0
- package/src/AccordionSectionSummaryHeading/index.tsx +9 -2
- package/src/BannerContainer/__snapshots__/index.test.tsx.snap +1 -1
- package/src/BannerContainer/index.tsx +1 -1
- package/src/Button/index.tsx +1 -0
- package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap +6 -6
- package/src/CircularProgressBase/index.test.tsx +38 -0
- package/src/{CircularProgress → CircularProgressBase}/index.tsx +7 -7
- package/src/DetailsContent/index.tsx +11 -2
- package/src/Grid/index.tsx +1 -7
- package/src/LinkBase/index.tsx +1 -0
- package/src/NavListItemActionBase/__snapshots__/index.test.tsx.snap +0 -1
- package/src/NavListItemActionBase/index.tsx +2 -2
- package/src/SummaryList/__snapshots__/index.test.tsx.snap +36 -0
- package/src/SummaryList/index.test.tsx +15 -0
- package/src/SummaryList/index.tsx +20 -3
- package/src/SummaryListItem/index.tsx +1 -1
- package/src/SummaryListItemKey/__snapshots__/index.test.tsx.snap +70 -0
- package/src/SummaryListItemKey/index.test.tsx +29 -0
- package/src/SummaryListItemKey/index.tsx +29 -1
- package/src/SummaryListItemValue/__snapshots__/index.test.tsx.snap +34 -0
- package/src/SummaryListItemValue/index.test.tsx +14 -0
- package/src/SummaryListItemValue/index.tsx +30 -2
- package/src/Table/index.tsx +12 -0
- package/src/TableDataCell/__snapshots__/index.test.tsx.snap +79 -2
- package/src/TableDataCell/index.test.tsx +42 -0
- package/src/TableDataCell/index.tsx +56 -1
- package/src/TableRow/__snapshots__/index.test.tsx.snap +1 -1
- package/src/TableRow/index.test.tsx +1 -1
- package/src/WarningText/__snapshots__/index.test.tsx.snap +26 -0
- package/src/WarningText/index.test.tsx +5 -0
- package/src/WarningText/index.tsx +17 -2
- package/src/index.ts +1 -2
- package/src/lazy.js +1 -2
- package/src/registry.js +8 -10
- package/AutoCompleteInputTypeahead/index.d.ts +0 -11
- package/AutoCompleteInputTypeahead/index.js +0 -25
- package/AutoCompleteInputTypeahead/index.js.map +0 -7
- package/AutoCompleteInputTypeahead/package.json +0 -6
- package/CircularProgress/index.js.map +0 -7
- package/CircularProgress/index.test.d.ts +0 -1
- package/cjs/AutoCompleteInputTypeahead/index.js +0 -58
- package/cjs/AutoCompleteInputTypeahead/index.js.map +0 -7
- package/cjs/CircularProgress/index.js.map +0 -7
- package/src/AutoCompleteInputTypeahead/__snapshots__/index.test.tsx.snap +0 -16
- package/src/AutoCompleteInputTypeahead/index.test.tsx +0 -8
- package/src/AutoCompleteInputTypeahead/index.tsx +0 -32
- package/src/CircularProgress/index.test.tsx +0 -34
- /package/{AutoCompleteInputTypeahead → CircularProgressBase}/index.test.d.ts +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import Base, { BaseProps } from '@digigov/react-core/Base';
|
|
4
|
+
import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
|
|
4
5
|
|
|
5
6
|
export interface SummaryListItemKeyProps extends BaseProps<'dt'> {
|
|
6
7
|
/**
|
|
@@ -16,6 +17,22 @@ export interface SummaryListItemKeyProps extends BaseProps<'dt'> {
|
|
|
16
17
|
* lg shows the width of the key column for large screens.
|
|
17
18
|
*/
|
|
18
19
|
lg?: WidthValues;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* error is optional.
|
|
23
|
+
* Use error prop to highlight the SummaryListItemKey when there is an error in the corresponding field.
|
|
24
|
+
* @value true
|
|
25
|
+
* @value false
|
|
26
|
+
* @default false
|
|
27
|
+
*/
|
|
28
|
+
|
|
29
|
+
error?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* errorAssistiveText is optional.
|
|
32
|
+
* Default value is "Λανθασμένο πεδίο".
|
|
33
|
+
* errorAssistiveText is used to provide a textual warning for assistive technologies like screen readers.
|
|
34
|
+
*/
|
|
35
|
+
errorAssistiveText?: string;
|
|
19
36
|
}
|
|
20
37
|
|
|
21
38
|
export type WidthValues = 3 | 4 | 5 | 6 | 7 | 8 | 9;
|
|
@@ -27,7 +44,16 @@ export const SummaryListItemKey = React.forwardRef<
|
|
|
27
44
|
HTMLElement,
|
|
28
45
|
SummaryListItemKeyProps
|
|
29
46
|
>(function SummaryListItemKey(
|
|
30
|
-
{
|
|
47
|
+
{
|
|
48
|
+
sm = 3,
|
|
49
|
+
md,
|
|
50
|
+
lg,
|
|
51
|
+
error,
|
|
52
|
+
errorAssistiveText = 'Λανθασμένο πεδίο',
|
|
53
|
+
className,
|
|
54
|
+
children,
|
|
55
|
+
...props
|
|
56
|
+
},
|
|
31
57
|
ref
|
|
32
58
|
) {
|
|
33
59
|
return (
|
|
@@ -39,9 +65,11 @@ export const SummaryListItemKey = React.forwardRef<
|
|
|
39
65
|
[`ds-summary-list__key--sm-${sm}`]: sm !== undefined,
|
|
40
66
|
[`ds-summary-list__key--md-${md}`]: md !== undefined,
|
|
41
67
|
[`ds-summary-list__key--lg-${lg}`]: lg !== undefined,
|
|
68
|
+
'ds-summary-list__key--error': error === true,
|
|
42
69
|
})}
|
|
43
70
|
{...props}
|
|
44
71
|
>
|
|
72
|
+
{error === true && <VisuallyHidden>{errorAssistiveText}</VisuallyHidden>}
|
|
45
73
|
{children}
|
|
46
74
|
</Base>
|
|
47
75
|
);
|
|
@@ -1,5 +1,39 @@
|
|
|
1
1
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
|
2
2
|
|
|
3
|
+
exports[`renders the SummaryListItemValue with error="true 1`] = `
|
|
4
|
+
<body>
|
|
5
|
+
<div>
|
|
6
|
+
<dd
|
|
7
|
+
class="ds-summary-list__value ds-summary-list__value--error"
|
|
8
|
+
>
|
|
9
|
+
<span
|
|
10
|
+
class="ds-visually-hidden"
|
|
11
|
+
>
|
|
12
|
+
Λανθασμένο πεδίο
|
|
13
|
+
</span>
|
|
14
|
+
hello
|
|
15
|
+
</dd>
|
|
16
|
+
</div>
|
|
17
|
+
</body>
|
|
18
|
+
`;
|
|
19
|
+
|
|
20
|
+
exports[`renders the SummaryListItemValue with error="true and errorAssistiveText="wrong 1`] = `
|
|
21
|
+
<body>
|
|
22
|
+
<div>
|
|
23
|
+
<dd
|
|
24
|
+
class="ds-summary-list__value ds-summary-list__value--error"
|
|
25
|
+
>
|
|
26
|
+
<span
|
|
27
|
+
class="ds-visually-hidden"
|
|
28
|
+
>
|
|
29
|
+
wrong
|
|
30
|
+
</span>
|
|
31
|
+
hello
|
|
32
|
+
</dd>
|
|
33
|
+
</div>
|
|
34
|
+
</body>
|
|
35
|
+
`;
|
|
36
|
+
|
|
3
37
|
exports[`renders the SummaryListItemValue with no props 1`] = `
|
|
4
38
|
<body>
|
|
5
39
|
<div>
|
|
@@ -8,3 +8,17 @@ it('renders the SummaryListItemValue with no props', () => {
|
|
|
8
8
|
render(<SummaryListItemValue>hello</SummaryListItemValue>).baseElement
|
|
9
9
|
).toMatchSnapshot();
|
|
10
10
|
});
|
|
11
|
+
it('renders the SummaryListItemValue with error="true', () => {
|
|
12
|
+
expect(
|
|
13
|
+
render(<SummaryListItemValue error>hello</SummaryListItemValue>).baseElement
|
|
14
|
+
).toMatchSnapshot();
|
|
15
|
+
});
|
|
16
|
+
it('renders the SummaryListItemValue with error="true and errorAssistiveText="wrong', () => {
|
|
17
|
+
expect(
|
|
18
|
+
render(
|
|
19
|
+
<SummaryListItemValue error errorAssistiveText="wrong">
|
|
20
|
+
hello
|
|
21
|
+
</SummaryListItemValue>
|
|
22
|
+
).baseElement
|
|
23
|
+
).toMatchSnapshot();
|
|
24
|
+
});
|
|
@@ -1,24 +1,52 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import Base, { BaseProps } from '@digigov/react-core/Base';
|
|
4
|
+
import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
|
|
4
5
|
|
|
5
|
-
export interface SummaryListItemValueProps extends BaseProps<'dd'> {
|
|
6
|
+
export interface SummaryListItemValueProps extends BaseProps<'dd'> {
|
|
7
|
+
/**
|
|
8
|
+
* error is optional.
|
|
9
|
+
* Use error prop to highlight the SummaryListItemKey when there is an error in the corresponding field.
|
|
10
|
+
* @value true
|
|
11
|
+
* @value false
|
|
12
|
+
* @default false
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
error?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* errorAssistiveText is optional.
|
|
18
|
+
* Default value is "Λανθασμένο πεδίο".
|
|
19
|
+
* errorAssistiveText is used to provide a textual warning for assistive technologies like screen readers.
|
|
20
|
+
*/
|
|
21
|
+
errorAssistiveText?: string;
|
|
22
|
+
}
|
|
6
23
|
/**
|
|
7
24
|
* Details for the SummaryListItemValue.
|
|
8
25
|
*/
|
|
9
26
|
export const SummaryListItemValue = React.forwardRef<
|
|
10
27
|
HTMLElement,
|
|
11
28
|
SummaryListItemValueProps
|
|
12
|
-
>(function SummaryListItemValue(
|
|
29
|
+
>(function SummaryListItemValue(
|
|
30
|
+
{
|
|
31
|
+
error,
|
|
32
|
+
errorAssistiveText = 'Λανθασμένο πεδίο',
|
|
33
|
+
className,
|
|
34
|
+
children,
|
|
35
|
+
...props
|
|
36
|
+
},
|
|
37
|
+
ref
|
|
38
|
+
) {
|
|
13
39
|
return (
|
|
14
40
|
<Base
|
|
15
41
|
as="dd"
|
|
16
42
|
ref={ref}
|
|
17
43
|
className={clsx(className, {
|
|
18
44
|
'ds-summary-list__value': true,
|
|
45
|
+
'ds-summary-list__value--error': error === true,
|
|
19
46
|
})}
|
|
20
47
|
{...props}
|
|
21
48
|
>
|
|
49
|
+
{error === true && <VisuallyHidden>{errorAssistiveText}</VisuallyHidden>}
|
|
22
50
|
{children}
|
|
23
51
|
</Base>
|
|
24
52
|
);
|
package/src/Table/index.tsx
CHANGED
|
@@ -47,6 +47,15 @@ export interface TableProps extends BaseProps<'table'> {
|
|
|
47
47
|
* @default 'default'
|
|
48
48
|
*/
|
|
49
49
|
variant?: 'zebra' | 'default';
|
|
50
|
+
/**
|
|
51
|
+
* verticalAlign is optional.
|
|
52
|
+
* The verticalAlign property sets vertical alignment of the table-cells.
|
|
53
|
+
* @value 'top'
|
|
54
|
+
* @value 'middle'
|
|
55
|
+
* @value 'bottom'
|
|
56
|
+
* @default 'middle'
|
|
57
|
+
*/
|
|
58
|
+
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
50
59
|
}
|
|
51
60
|
/**
|
|
52
61
|
* Table component is used to wrap the sub components of a table
|
|
@@ -59,6 +68,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
|
|
|
59
68
|
dense = false,
|
|
60
69
|
verticalBorders = false,
|
|
61
70
|
stacked = 'never',
|
|
71
|
+
verticalAlign = 'middle',
|
|
62
72
|
className,
|
|
63
73
|
children,
|
|
64
74
|
...props
|
|
@@ -79,6 +89,8 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
|
|
|
79
89
|
'ds-table--dense': dense,
|
|
80
90
|
'ds-table--zebra': variant === 'zebra',
|
|
81
91
|
'ds-table--vertical-lines': verticalBorders,
|
|
92
|
+
'ds-table--align-top': verticalAlign === 'top',
|
|
93
|
+
'ds-table--align-bottom': verticalAlign === 'bottom',
|
|
82
94
|
})}
|
|
83
95
|
{...props}
|
|
84
96
|
>
|
|
@@ -13,7 +13,7 @@ exports[`renders the Table with dataType numeric prop 1`] = `
|
|
|
13
13
|
class="ds-table__row"
|
|
14
14
|
>
|
|
15
15
|
<td
|
|
16
|
-
class="ds-table__cell ds-table__cell--numeric"
|
|
16
|
+
class="ds-table__cell ds-table__cell--border ds-table__cell--numeric"
|
|
17
17
|
>
|
|
18
18
|
hello
|
|
19
19
|
</td>
|
|
@@ -24,6 +24,35 @@ exports[`renders the Table with dataType numeric prop 1`] = `
|
|
|
24
24
|
</body>
|
|
25
25
|
`;
|
|
26
26
|
|
|
27
|
+
exports[`renders the Table with highlight warning prop 1`] = `
|
|
28
|
+
<body>
|
|
29
|
+
<div>
|
|
30
|
+
<table
|
|
31
|
+
class="ds-table"
|
|
32
|
+
>
|
|
33
|
+
<tbody
|
|
34
|
+
class="ds-table__body"
|
|
35
|
+
>
|
|
36
|
+
<tr
|
|
37
|
+
class="ds-table__row"
|
|
38
|
+
>
|
|
39
|
+
<td
|
|
40
|
+
class="ds-table__cell ds-table__cell--border ds-table__cell--warning"
|
|
41
|
+
>
|
|
42
|
+
<span
|
|
43
|
+
class="ds-visually-hidden"
|
|
44
|
+
>
|
|
45
|
+
Προσοχή
|
|
46
|
+
</span>
|
|
47
|
+
hello
|
|
48
|
+
</td>
|
|
49
|
+
</tr>
|
|
50
|
+
</tbody>
|
|
51
|
+
</table>
|
|
52
|
+
</div>
|
|
53
|
+
</body>
|
|
54
|
+
`;
|
|
55
|
+
|
|
27
56
|
exports[`renders the Table with no props 1`] = `
|
|
28
57
|
<body>
|
|
29
58
|
<div>
|
|
@@ -37,7 +66,55 @@ exports[`renders the Table with no props 1`] = `
|
|
|
37
66
|
class="ds-table__row"
|
|
38
67
|
>
|
|
39
68
|
<td
|
|
40
|
-
class="ds-table__cell"
|
|
69
|
+
class="ds-table__cell ds-table__cell--border"
|
|
70
|
+
>
|
|
71
|
+
hello
|
|
72
|
+
</td>
|
|
73
|
+
</tr>
|
|
74
|
+
</tbody>
|
|
75
|
+
</table>
|
|
76
|
+
</div>
|
|
77
|
+
</body>
|
|
78
|
+
`;
|
|
79
|
+
|
|
80
|
+
exports[`renders the Table with variant border prop 1`] = `
|
|
81
|
+
<body>
|
|
82
|
+
<div>
|
|
83
|
+
<table
|
|
84
|
+
class="ds-table"
|
|
85
|
+
>
|
|
86
|
+
<tbody
|
|
87
|
+
class="ds-table__body"
|
|
88
|
+
>
|
|
89
|
+
<tr
|
|
90
|
+
class="ds-table__row"
|
|
91
|
+
>
|
|
92
|
+
<td
|
|
93
|
+
class="ds-table__cell ds-table__cell--border"
|
|
94
|
+
>
|
|
95
|
+
hello
|
|
96
|
+
</td>
|
|
97
|
+
</tr>
|
|
98
|
+
</tbody>
|
|
99
|
+
</table>
|
|
100
|
+
</div>
|
|
101
|
+
</body>
|
|
102
|
+
`;
|
|
103
|
+
|
|
104
|
+
exports[`renders the Table with wordBreak break-all prop 1`] = `
|
|
105
|
+
<body>
|
|
106
|
+
<div>
|
|
107
|
+
<table
|
|
108
|
+
class="ds-table"
|
|
109
|
+
>
|
|
110
|
+
<tbody
|
|
111
|
+
class="ds-table__body"
|
|
112
|
+
>
|
|
113
|
+
<tr
|
|
114
|
+
class="ds-table__row"
|
|
115
|
+
>
|
|
116
|
+
<td
|
|
117
|
+
class="ds-table__cell ds-table__cell--border ds-table__cell--break-all"
|
|
41
118
|
>
|
|
42
119
|
hello
|
|
43
120
|
</td>
|
|
@@ -33,3 +33,45 @@ it('renders the Table with dataType numeric prop', () => {
|
|
|
33
33
|
).baseElement
|
|
34
34
|
).toMatchSnapshot();
|
|
35
35
|
});
|
|
36
|
+
|
|
37
|
+
it('renders the Table with variant border prop', () => {
|
|
38
|
+
expect(
|
|
39
|
+
render(
|
|
40
|
+
<Table>
|
|
41
|
+
<TableBody>
|
|
42
|
+
<TableRow>
|
|
43
|
+
<TableDataCell variant="border">hello</TableDataCell>
|
|
44
|
+
</TableRow>
|
|
45
|
+
</TableBody>
|
|
46
|
+
</Table>
|
|
47
|
+
).baseElement
|
|
48
|
+
).toMatchSnapshot();
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
it('renders the Table with wordBreak break-all prop', () => {
|
|
52
|
+
expect(
|
|
53
|
+
render(
|
|
54
|
+
<Table>
|
|
55
|
+
<TableBody>
|
|
56
|
+
<TableRow>
|
|
57
|
+
<TableDataCell wordBreak="break-all">hello</TableDataCell>
|
|
58
|
+
</TableRow>
|
|
59
|
+
</TableBody>
|
|
60
|
+
</Table>
|
|
61
|
+
).baseElement
|
|
62
|
+
).toMatchSnapshot();
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
it('renders the Table with highlight warning prop', () => {
|
|
66
|
+
expect(
|
|
67
|
+
render(
|
|
68
|
+
<Table>
|
|
69
|
+
<TableBody>
|
|
70
|
+
<TableRow>
|
|
71
|
+
<TableDataCell highlight="warning">hello</TableDataCell>
|
|
72
|
+
</TableRow>
|
|
73
|
+
</TableBody>
|
|
74
|
+
</Table>
|
|
75
|
+
).baseElement
|
|
76
|
+
).toMatchSnapshot();
|
|
77
|
+
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import Base, { BaseProps } from '@digigov/react-core/Base';
|
|
4
|
+
import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
|
|
4
5
|
// import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
|
|
5
6
|
|
|
6
7
|
export interface TableDataCellProps extends BaseProps<'td'> {
|
|
@@ -13,6 +14,36 @@ export interface TableDataCellProps extends BaseProps<'td'> {
|
|
|
13
14
|
* @default 'text'
|
|
14
15
|
*/
|
|
15
16
|
dataType?: 'text' | 'numeric';
|
|
17
|
+
/**
|
|
18
|
+
* variant is optional.
|
|
19
|
+
* Use this prop to control the bottom border of the table-cell.
|
|
20
|
+
* @value 'border'
|
|
21
|
+
* @value 'none'
|
|
22
|
+
* @default 'border'
|
|
23
|
+
*/
|
|
24
|
+
variant?: 'border' | 'none';
|
|
25
|
+
/**
|
|
26
|
+
* wordBreak is optional.
|
|
27
|
+
* Use this prop to control the word break of the table-cell contents.
|
|
28
|
+
*/
|
|
29
|
+
wordBreak?: 'break-all' | 'none';
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* highlight is optional.
|
|
33
|
+
* Add the highlight prop to add a highlight line on the left of the row.
|
|
34
|
+
* @value 'warning' warning highlight line
|
|
35
|
+
* @value 'error' error highlight line
|
|
36
|
+
* @default undefined
|
|
37
|
+
*/
|
|
38
|
+
highlight?: 'warning' | 'error';
|
|
39
|
+
|
|
40
|
+
/*
|
|
41
|
+
* highlightAssistiveText is optional.
|
|
42
|
+
* Use this prop to add assistive text for screen readers when the highlight prop is used.
|
|
43
|
+
* This text will be visually hidden.
|
|
44
|
+
* @default undefined
|
|
45
|
+
*/
|
|
46
|
+
highlightAssistiveText?: string;
|
|
16
47
|
}
|
|
17
48
|
/**
|
|
18
49
|
* Use TableDataCell inside the Table component to fill the data of a cell in a table.
|
|
@@ -21,19 +52,43 @@ export const TableDataCell = React.forwardRef<
|
|
|
21
52
|
HTMLTableCellElement,
|
|
22
53
|
TableDataCellProps
|
|
23
54
|
>(function TableDataCell(
|
|
24
|
-
{
|
|
55
|
+
{
|
|
56
|
+
dataType = 'text',
|
|
57
|
+
variant = 'border',
|
|
58
|
+
wordBreak = 'none',
|
|
59
|
+
highlight,
|
|
60
|
+
highlightAssistiveText,
|
|
61
|
+
className,
|
|
62
|
+
children,
|
|
63
|
+
...props
|
|
64
|
+
},
|
|
25
65
|
ref
|
|
26
66
|
) {
|
|
67
|
+
const calculatedHighlightAssistiveText =
|
|
68
|
+
highlightAssistiveText ||
|
|
69
|
+
(highlight === 'warning'
|
|
70
|
+
? 'Προσοχή'
|
|
71
|
+
: highlight === 'error'
|
|
72
|
+
? 'Λανθασμένο πεδίο'
|
|
73
|
+
: undefined);
|
|
74
|
+
|
|
27
75
|
return (
|
|
28
76
|
<Base
|
|
29
77
|
as="td"
|
|
30
78
|
ref={ref}
|
|
31
79
|
className={clsx(className, {
|
|
32
80
|
'ds-table__cell': true,
|
|
81
|
+
'ds-table__cell--border': variant === 'border',
|
|
82
|
+
'ds-table__cell--break-all': wordBreak === 'break-all',
|
|
33
83
|
'ds-table__cell--numeric': dataType === 'numeric',
|
|
84
|
+
'ds-table__cell--warning': highlight === 'warning',
|
|
85
|
+
'ds-table__cell--error': highlight === 'error',
|
|
34
86
|
})}
|
|
35
87
|
{...props}
|
|
36
88
|
>
|
|
89
|
+
{calculatedHighlightAssistiveText && (
|
|
90
|
+
<VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
|
|
91
|
+
)}
|
|
37
92
|
{children}
|
|
38
93
|
</Base>
|
|
39
94
|
);
|
|
@@ -77,3 +77,29 @@ exports[`renders the WarningText with no props 1`] = `
|
|
|
77
77
|
</div>
|
|
78
78
|
</body>
|
|
79
79
|
`;
|
|
80
|
+
|
|
81
|
+
exports[`renders the WarningText with strong=false 1`] = `
|
|
82
|
+
<body>
|
|
83
|
+
<div>
|
|
84
|
+
<div
|
|
85
|
+
class="ds-warning-text"
|
|
86
|
+
>
|
|
87
|
+
<div
|
|
88
|
+
class="ds-warning-text__icon"
|
|
89
|
+
>
|
|
90
|
+
!
|
|
91
|
+
</div>
|
|
92
|
+
<div
|
|
93
|
+
class="ds-warning-text__content"
|
|
94
|
+
>
|
|
95
|
+
<span
|
|
96
|
+
class="ds-warning-text__assistive"
|
|
97
|
+
>
|
|
98
|
+
Προσοχή
|
|
99
|
+
</span>
|
|
100
|
+
hello
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</body>
|
|
105
|
+
`;
|
|
@@ -18,3 +18,8 @@ it('renders the WarningText with dense=true', () => {
|
|
|
18
18
|
render(<WarningText dense>hello</WarningText>).baseElement
|
|
19
19
|
).toMatchSnapshot();
|
|
20
20
|
});
|
|
21
|
+
it('renders the WarningText with strong=false', () => {
|
|
22
|
+
expect(
|
|
23
|
+
render(<WarningText strong={false}>hello</WarningText>).baseElement
|
|
24
|
+
).toMatchSnapshot();
|
|
25
|
+
});
|
|
@@ -16,6 +16,13 @@ export interface WarningTextProps extends BaseProps<'div'> {
|
|
|
16
16
|
* @default false
|
|
17
17
|
* */
|
|
18
18
|
dense?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* strong is optional.
|
|
21
|
+
* @value true if you want to emphasize importance, conveying meaning to both sighted and screen readers.
|
|
22
|
+
* @value false WarningText will be a simple div element.
|
|
23
|
+
* @default true
|
|
24
|
+
* */
|
|
25
|
+
strong?: boolean;
|
|
19
26
|
}
|
|
20
27
|
/**
|
|
21
28
|
* WarningText.
|
|
@@ -24,9 +31,17 @@ export interface WarningTextProps extends BaseProps<'div'> {
|
|
|
24
31
|
*/
|
|
25
32
|
export const WarningText = React.forwardRef<HTMLDivElement, WarningTextProps>(
|
|
26
33
|
function WarningText(
|
|
27
|
-
{
|
|
34
|
+
{
|
|
35
|
+
className,
|
|
36
|
+
strong = true,
|
|
37
|
+
assistiveText = 'Προσοχή',
|
|
38
|
+
dense,
|
|
39
|
+
children,
|
|
40
|
+
...props
|
|
41
|
+
},
|
|
28
42
|
ref
|
|
29
43
|
) {
|
|
44
|
+
const Component = strong ? 'strong' : 'div';
|
|
30
45
|
return (
|
|
31
46
|
<Base
|
|
32
47
|
as="div"
|
|
@@ -47,7 +62,7 @@ export const WarningText = React.forwardRef<HTMLDivElement, WarningTextProps>(
|
|
|
47
62
|
</Base>
|
|
48
63
|
|
|
49
64
|
<Base
|
|
50
|
-
as=
|
|
65
|
+
as={Component}
|
|
51
66
|
className={clsx({
|
|
52
67
|
'ds-warning-text__content': true,
|
|
53
68
|
})}
|
package/src/index.ts
CHANGED
|
@@ -151,7 +151,6 @@ export * from '@digigov/react-core/AdminLayout';
|
|
|
151
151
|
export * from '@digigov/react-core/AdminMain';
|
|
152
152
|
export * from '@digigov/react-core/AdminTopSection';
|
|
153
153
|
export * from '@digigov/react-core/AutoCompleteInputBase';
|
|
154
|
-
export * from '@digigov/react-core/AutoCompleteInputTypeahead';
|
|
155
154
|
export * from '@digigov/react-core/AutoCompleteResultList';
|
|
156
155
|
export * from '@digigov/react-core/AutoCompleteResultListItem';
|
|
157
156
|
export * from '@digigov/react-core/AutoCompleteContainer';
|
|
@@ -191,7 +190,7 @@ export * from '@digigov/react-core/PaginationList';
|
|
|
191
190
|
export * from '@digigov/react-core/PaginationListItem';
|
|
192
191
|
export * from '@digigov/react-core/PaginationLabelContainer';
|
|
193
192
|
export * from '@digigov/react-core/LoaderContainer';
|
|
194
|
-
export * from '@digigov/react-core/
|
|
193
|
+
export * from '@digigov/react-core/CircularProgressBase';
|
|
195
194
|
export * from '@digigov/react-core/FullPageBackground';
|
|
196
195
|
export * from '@digigov/react-core/StepNavCircleNumber';
|
|
197
196
|
export * from '@digigov/react-core/StepNav';
|
package/src/lazy.js
CHANGED
|
@@ -152,7 +152,6 @@ export default {
|
|
|
152
152
|
'AdminMain': lazy(() => import('@digigov/react-core/AdminMain').then((module) => ({ default: module['AdminMain'] }))),
|
|
153
153
|
'AdminTopSection': lazy(() => import('@digigov/react-core/AdminTopSection').then((module) => ({ default: module['AdminTopSection'] }))),
|
|
154
154
|
'AutoCompleteInputBase': lazy(() => import('@digigov/react-core/AutoCompleteInputBase').then((module) => ({ default: module['AutoCompleteInputBase'] }))),
|
|
155
|
-
'AutoCompleteInputTypeahead': lazy(() => import('@digigov/react-core/AutoCompleteInputTypeahead').then((module) => ({ default: module['AutoCompleteInputTypeahead'] }))),
|
|
156
155
|
'AutoCompleteResultList': lazy(() => import('@digigov/react-core/AutoCompleteResultList').then((module) => ({ default: module['AutoCompleteResultList'] }))),
|
|
157
156
|
'AutoCompleteResultListItem': lazy(() => import('@digigov/react-core/AutoCompleteResultListItem').then((module) => ({ default: module['AutoCompleteResultListItem'] }))),
|
|
158
157
|
'AutoCompleteContainer': lazy(() => import('@digigov/react-core/AutoCompleteContainer').then((module) => ({ default: module['AutoCompleteContainer'] }))),
|
|
@@ -192,7 +191,7 @@ export default {
|
|
|
192
191
|
'PaginationListItem': lazy(() => import('@digigov/react-core/PaginationListItem').then((module) => ({ default: module['PaginationListItem'] }))),
|
|
193
192
|
'PaginationLabelContainer': lazy(() => import('@digigov/react-core/PaginationLabelContainer').then((module) => ({ default: module['PaginationLabelContainer'] }))),
|
|
194
193
|
'LoaderContainer': lazy(() => import('@digigov/react-core/LoaderContainer').then((module) => ({ default: module['LoaderContainer'] }))),
|
|
195
|
-
'
|
|
194
|
+
'CircularProgressBase': lazy(() => import('@digigov/react-core/CircularProgressBase').then((module) => ({ default: module['CircularProgressBase'] }))),
|
|
196
195
|
'FullPageBackground': lazy(() => import('@digigov/react-core/FullPageBackground').then((module) => ({ default: module['FullPageBackground'] }))),
|
|
197
196
|
'StepNavCircleNumber': lazy(() => import('@digigov/react-core/StepNavCircleNumber').then((module) => ({ default: module['StepNavCircleNumber'] }))),
|
|
198
197
|
'StepNav': lazy(() => import('@digigov/react-core/StepNav').then((module) => ({ default: module['StepNav'] }))),
|
package/src/registry.js
CHANGED
|
@@ -3,10 +3,10 @@ import * as _digigov_react_core from "@digigov/react-core";
|
|
|
3
3
|
import * as _digigov_react_core_Accordion from "@digigov/react-core/Accordion";
|
|
4
4
|
import * as _digigov_react_core_Accordion_index_web from "@digigov/react-core/Accordion/index.web";
|
|
5
5
|
import * as _digigov_react_core_AccordionControls from "@digigov/react-core/AccordionControls";
|
|
6
|
-
import * as _digigov_react_core_AccordionSectionContent from "@digigov/react-core/AccordionSectionContent";
|
|
7
|
-
import * as _digigov_react_core_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
|
|
8
6
|
import * as _digigov_react_core_AccordionSection from "@digigov/react-core/AccordionSection";
|
|
9
7
|
import * as _digigov_react_core_AccordionSection_index_web from "@digigov/react-core/AccordionSection/index.web";
|
|
8
|
+
import * as _digigov_react_core_AccordionSectionContent from "@digigov/react-core/AccordionSectionContent";
|
|
9
|
+
import * as _digigov_react_core_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
|
|
10
10
|
import * as _digigov_react_core_AccordionSectionSummaryHeading from "@digigov/react-core/AccordionSectionSummaryHeading";
|
|
11
11
|
import * as _digigov_react_core_AdminAside from "@digigov/react-core/AdminAside";
|
|
12
12
|
import * as _digigov_react_core_AdminContainer from "@digigov/react-core/AdminContainer";
|
|
@@ -14,12 +14,11 @@ import * as _digigov_react_core_AdminHeader from "@digigov/react-core/AdminHeade
|
|
|
14
14
|
import * as _digigov_react_core_AdminHeaderContent from "@digigov/react-core/AdminHeaderContent";
|
|
15
15
|
import * as _digigov_react_core_AdminLayout from "@digigov/react-core/AdminLayout";
|
|
16
16
|
import * as _digigov_react_core_AdminMain from "@digigov/react-core/AdminMain";
|
|
17
|
-
import * as _digigov_react_core_Aside from "@digigov/react-core/Aside";
|
|
18
17
|
import * as _digigov_react_core_AdminTopSection from "@digigov/react-core/AdminTopSection";
|
|
18
|
+
import * as _digigov_react_core_Aside from "@digigov/react-core/Aside";
|
|
19
19
|
import * as _digigov_react_core_AutoCompleteAssistiveHint from "@digigov/react-core/AutoCompleteAssistiveHint";
|
|
20
20
|
import * as _digigov_react_core_AutoCompleteContainer from "@digigov/react-core/AutoCompleteContainer";
|
|
21
21
|
import * as _digigov_react_core_AutoCompleteInputBase from "@digigov/react-core/AutoCompleteInputBase";
|
|
22
|
-
import * as _digigov_react_core_AutoCompleteInputTypeahead from "@digigov/react-core/AutoCompleteInputTypeahead";
|
|
23
22
|
import * as _digigov_react_core_AutoCompleteMultipleInput from "@digigov/react-core/AutoCompleteMultipleInput";
|
|
24
23
|
import * as _digigov_react_core_AutoCompleteMultipleInputContainer from "@digigov/react-core/AutoCompleteMultipleInputContainer";
|
|
25
24
|
import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core/AutoCompleteResultList";
|
|
@@ -61,7 +60,7 @@ import * as _digigov_react_core_ChipContainer from "@digigov/react-core/ChipCont
|
|
|
61
60
|
import * as _digigov_react_core_ChipHeading from "@digigov/react-core/ChipHeading";
|
|
62
61
|
import * as _digigov_react_core_ChipKeyValue from "@digigov/react-core/ChipKeyValue";
|
|
63
62
|
import * as _digigov_react_core_ChoiceDividerText from "@digigov/react-core/ChoiceDividerText";
|
|
64
|
-
import * as
|
|
63
|
+
import * as _digigov_react_core_CircularProgressBase from "@digigov/react-core/CircularProgressBase";
|
|
65
64
|
import * as _digigov_react_core_CloseButton from "@digigov/react-core/CloseButton";
|
|
66
65
|
import * as _digigov_react_core_Code from "@digigov/react-core/Code";
|
|
67
66
|
import * as _digigov_react_core_CodeBlockContainer from "@digigov/react-core/CodeBlockContainer";
|
|
@@ -287,10 +286,10 @@ export default {
|
|
|
287
286
|
'@digigov/react-core/Accordion': lazyImport(_digigov_react_core_Accordion),
|
|
288
287
|
'@digigov/react-core/Accordion/index.web': lazyImport(_digigov_react_core_Accordion_index_web),
|
|
289
288
|
'@digigov/react-core/AccordionControls': lazyImport(_digigov_react_core_AccordionControls),
|
|
290
|
-
'@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
|
|
291
|
-
'@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
|
|
292
289
|
'@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),
|
|
293
290
|
'@digigov/react-core/AccordionSection/index.web': lazyImport(_digigov_react_core_AccordionSection_index_web),
|
|
291
|
+
'@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
|
|
292
|
+
'@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
|
|
294
293
|
'@digigov/react-core/AccordionSectionSummaryHeading': lazyImport(_digigov_react_core_AccordionSectionSummaryHeading),
|
|
295
294
|
'@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
|
|
296
295
|
'@digigov/react-core/AdminContainer': lazyImport(_digigov_react_core_AdminContainer),
|
|
@@ -298,12 +297,11 @@ export default {
|
|
|
298
297
|
'@digigov/react-core/AdminHeaderContent': lazyImport(_digigov_react_core_AdminHeaderContent),
|
|
299
298
|
'@digigov/react-core/AdminLayout': lazyImport(_digigov_react_core_AdminLayout),
|
|
300
299
|
'@digigov/react-core/AdminMain': lazyImport(_digigov_react_core_AdminMain),
|
|
301
|
-
'@digigov/react-core/Aside': lazyImport(_digigov_react_core_Aside),
|
|
302
300
|
'@digigov/react-core/AdminTopSection': lazyImport(_digigov_react_core_AdminTopSection),
|
|
301
|
+
'@digigov/react-core/Aside': lazyImport(_digigov_react_core_Aside),
|
|
303
302
|
'@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
|
|
304
303
|
'@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
|
|
305
304
|
'@digigov/react-core/AutoCompleteInputBase': lazyImport(_digigov_react_core_AutoCompleteInputBase),
|
|
306
|
-
'@digigov/react-core/AutoCompleteInputTypeahead': lazyImport(_digigov_react_core_AutoCompleteInputTypeahead),
|
|
307
305
|
'@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
|
|
308
306
|
'@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
|
|
309
307
|
'@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
|
|
@@ -345,7 +343,7 @@ export default {
|
|
|
345
343
|
'@digigov/react-core/ChipHeading': lazyImport(_digigov_react_core_ChipHeading),
|
|
346
344
|
'@digigov/react-core/ChipKeyValue': lazyImport(_digigov_react_core_ChipKeyValue),
|
|
347
345
|
'@digigov/react-core/ChoiceDividerText': lazyImport(_digigov_react_core_ChoiceDividerText),
|
|
348
|
-
'@digigov/react-core/
|
|
346
|
+
'@digigov/react-core/CircularProgressBase': lazyImport(_digigov_react_core_CircularProgressBase),
|
|
349
347
|
'@digigov/react-core/CloseButton': lazyImport(_digigov_react_core_CloseButton),
|
|
350
348
|
'@digigov/react-core/Code': lazyImport(_digigov_react_core_Code),
|
|
351
349
|
'@digigov/react-core/CodeBlockContainer': lazyImport(_digigov_react_core_CodeBlockContainer),
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { BaseProps } from '@digigov/react-core/Base';
|
|
3
|
-
export interface AutoCompleteInputTypeaheadProps extends BaseProps<'input'> {
|
|
4
|
-
}
|
|
5
|
-
/**
|
|
6
|
-
* AutoCompleteInputTypeahead component is used to display the hole search value
|
|
7
|
-
* in the background.
|
|
8
|
-
*
|
|
9
|
-
*/
|
|
10
|
-
export declare const AutoCompleteInputTypeahead: React.ForwardRefExoticComponent<Omit<AutoCompleteInputTypeaheadProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
|
11
|
-
export default AutoCompleteInputTypeahead;
|