@digigov/react-core 2.0.0-a402a664 → 2.0.0-aa380ec7

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.
Files changed (89) hide show
  1. package/AccordionSectionSummaryHeading/index.d.ts +1 -0
  2. package/AccordionSectionSummaryHeading/index.js +3 -2
  3. package/AccordionSectionSummaryHeading/index.js.map +2 -2
  4. package/BannerContainer/index.js +1 -1
  5. package/BannerContainer/index.js.map +2 -2
  6. package/{CircularProgress → CircularProgressBase}/index.d.ts +5 -5
  7. package/{CircularProgress → CircularProgressBase}/index.js +4 -4
  8. package/CircularProgressBase/index.js.map +7 -0
  9. package/{CircularProgress → CircularProgressBase}/package.json +1 -1
  10. package/DetailsContent/index.d.ts +1 -0
  11. package/DetailsContent/index.js +3 -2
  12. package/DetailsContent/index.js.map +2 -2
  13. package/Grid/index.d.ts +1 -7
  14. package/Grid/index.js.map +2 -2
  15. package/SummaryList/index.d.ts +10 -2
  16. package/SummaryList/index.js +10 -2
  17. package/SummaryList/index.js.map +2 -2
  18. package/SummaryListItem/index.js +1 -1
  19. package/SummaryListItem/index.js.map +2 -2
  20. package/SummaryListItemKey/index.d.ts +14 -0
  21. package/SummaryListItemKey/index.js +14 -2
  22. package/SummaryListItemKey/index.js.map +2 -2
  23. package/SummaryListItemValue/index.d.ts +14 -0
  24. package/SummaryListItemValue/index.js +11 -2
  25. package/SummaryListItemValue/index.js.map +2 -2
  26. package/TableDataCell/index.d.ts +9 -0
  27. package/TableDataCell/index.js +8 -1
  28. package/TableDataCell/index.js.map +2 -2
  29. package/cjs/AccordionSectionSummaryHeading/index.js +3 -2
  30. package/cjs/AccordionSectionSummaryHeading/index.js.map +2 -2
  31. package/cjs/BannerContainer/index.js +1 -1
  32. package/cjs/BannerContainer/index.js.map +2 -2
  33. package/cjs/{CircularProgress → CircularProgressBase}/index.js +8 -8
  34. package/cjs/CircularProgressBase/index.js.map +7 -0
  35. package/cjs/DetailsContent/index.js +3 -2
  36. package/cjs/DetailsContent/index.js.map +2 -2
  37. package/cjs/Grid/index.js.map +2 -2
  38. package/cjs/SummaryList/index.js +10 -2
  39. package/cjs/SummaryList/index.js.map +2 -2
  40. package/cjs/SummaryListItem/index.js +1 -1
  41. package/cjs/SummaryListItem/index.js.map +2 -2
  42. package/cjs/SummaryListItemKey/index.js +14 -2
  43. package/cjs/SummaryListItemKey/index.js.map +3 -3
  44. package/cjs/SummaryListItemValue/index.js +11 -2
  45. package/cjs/SummaryListItemValue/index.js.map +3 -3
  46. package/cjs/TableDataCell/index.js +8 -1
  47. package/cjs/TableDataCell/index.js.map +3 -3
  48. package/cjs/index.js +2 -2
  49. package/cjs/index.js.map +2 -2
  50. package/cjs/lazy/index.js +1 -1
  51. package/cjs/lazy.js.map +2 -2
  52. package/cjs/registry/index.js +4 -4
  53. package/cjs/registry.js.map +2 -2
  54. package/index.d.ts +1 -1
  55. package/index.js +2 -2
  56. package/index.js.map +1 -1
  57. package/lazy/index.js +1 -1
  58. package/package.json +3 -3
  59. package/registry/index.js +4 -4
  60. package/src/AccordionSectionSummaryHeading/index.tsx +9 -2
  61. package/src/BannerContainer/__snapshots__/index.test.tsx.snap +1 -1
  62. package/src/BannerContainer/index.tsx +1 -1
  63. package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap +6 -6
  64. package/src/CircularProgressBase/index.test.tsx +38 -0
  65. package/src/{CircularProgress → CircularProgressBase}/index.tsx +7 -7
  66. package/src/DetailsContent/index.tsx +11 -2
  67. package/src/Grid/index.tsx +1 -7
  68. package/src/SummaryList/__snapshots__/index.test.tsx.snap +36 -0
  69. package/src/SummaryList/index.test.tsx +15 -0
  70. package/src/SummaryList/index.tsx +20 -3
  71. package/src/SummaryListItem/index.tsx +1 -1
  72. package/src/SummaryListItemKey/__snapshots__/index.test.tsx.snap +70 -0
  73. package/src/SummaryListItemKey/index.test.tsx +29 -0
  74. package/src/SummaryListItemKey/index.tsx +29 -1
  75. package/src/SummaryListItemValue/__snapshots__/index.test.tsx.snap +34 -0
  76. package/src/SummaryListItemValue/index.test.tsx +14 -0
  77. package/src/SummaryListItemValue/index.tsx +30 -2
  78. package/src/TableDataCell/__snapshots__/index.test.tsx.snap +77 -0
  79. package/src/TableDataCell/index.test.tsx +42 -0
  80. package/src/TableDataCell/index.tsx +33 -0
  81. package/src/TableRow/__snapshots__/index.test.tsx.snap +1 -1
  82. package/src/TableRow/index.test.tsx +1 -1
  83. package/src/index.ts +1 -1
  84. package/src/lazy.js +1 -1
  85. package/src/registry.js +4 -4
  86. package/CircularProgress/index.js.map +0 -7
  87. package/cjs/CircularProgress/index.js.map +0 -7
  88. package/src/CircularProgress/index.test.tsx +0 -34
  89. /package/{CircularProgress → CircularProgressBase}/index.test.d.ts +0 -0
package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap RENAMED
@@ -1,6 +1,6 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
- exports[`renders the CircularProgress 1`] = `
3
+ exports[`renders the CircularProgressBase 1`] = `
4
4
  <body>
5
5
  <div>
6
6
  <svg
@@ -22,7 +22,7 @@ exports[`renders the CircularProgress 1`] = `
22
22
  </body>
23
23
  `;
24
24
 
25
- exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
25
+ exports[`renders the CircularProgressBase with color=secondary and size lg props 1`] = `
26
26
  <body>
27
27
  <div>
28
28
  <svg
@@ -44,7 +44,7 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
44
44
  </body>
45
45
  `;
46
46
 
47
- exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
47
+ exports[`renders the CircularProgressBase with color=secondary and size sm props 1`] = `
48
48
  <body>
49
49
  <div>
50
50
  <svg
@@ -66,7 +66,7 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
66
66
  </body>
67
67
  `;
68
68
 
69
- exports[`renders the CircularProgress with color=secondary prop 1`] = `
69
+ exports[`renders the CircularProgressBase with color=secondary prop 1`] = `
70
70
  <body>
71
71
  <div>
72
72
  <svg
@@ -88,7 +88,7 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
88
88
  </body>
89
89
  `;
90
90
 
91
- exports[`renders the CircularProgress with size lg 1`] = `
91
+ exports[`renders the CircularProgressBase with size lg 1`] = `
92
92
  <body>
93
93
  <div>
94
94
  <svg
@@ -110,7 +110,7 @@ exports[`renders the CircularProgress with size lg 1`] = `
110
110
  </body>
111
111
  `;
112
112
 
113
- exports[`renders the CircularProgress with size sm 1`] = `
113
+ exports[`renders the CircularProgressBase with size sm 1`] = `
114
114
  <body>
115
115
  <div>
116
116
  <svg
package/src/CircularProgressBase/index.test.tsx ADDED
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+ import { render } from '@testing-library/react';
3
+
4
+ import CircularProgressBase from '@digigov/react-core/CircularProgressBase';
5
+
6
+ it('renders the CircularProgressBase', () => {
7
+ expect(render(<CircularProgressBase />).baseElement).toMatchSnapshot();
8
+ });
9
+
10
+ it('renders the CircularProgressBase with size sm', () => {
11
+ expect(
12
+ render(<CircularProgressBase size="sm" />).baseElement
13
+ ).toMatchSnapshot();
14
+ });
15
+
16
+ it('renders the CircularProgressBase with size lg', () => {
17
+ expect(
18
+ render(<CircularProgressBase size="lg" />).baseElement
19
+ ).toMatchSnapshot();
20
+ });
21
+
22
+ it('renders the CircularProgressBase with color=secondary prop', () => {
23
+ expect(
24
+ render(<CircularProgressBase color={'secondary'} />).baseElement
25
+ ).toMatchSnapshot();
26
+ });
27
+
28
+ it('renders the CircularProgressBase with color=secondary and size sm props', () => {
29
+ expect(
30
+ render(<CircularProgressBase color={'secondary'} size="sm" />).baseElement
31
+ ).toMatchSnapshot();
32
+ });
33
+
34
+ it('renders the CircularProgressBase with color=secondary and size lg props', () => {
35
+ expect(
36
+ render(<CircularProgressBase color={'secondary'} size="lg" />).baseElement
37
+ ).toMatchSnapshot();
38
+ });
package/src/{CircularProgress → CircularProgressBase}/index.tsx RENAMED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import clsx from 'clsx';
3
3
  import Base, { BaseProps } from '@digigov/react-core/Base';
4
4
 
5
- export interface CircularProgressProps extends BaseProps<'svg'> {
5
+ export interface CircularProgressBaseProps extends BaseProps<'svg'> {
6
6
  /**
7
7
  * color prop is optional.
8
8
  * color prop is used to change the color of the loader.
@@ -22,12 +22,12 @@ export interface CircularProgressProps extends BaseProps<'svg'> {
22
22
  size?: 'sm' | 'md' | 'lg';
23
23
  }
24
24
  /**
25
- * Use CircularProgress component as an animated loader.
26
- * CircularProgress can be used inside LoaderContainer component.
25
+ * Use CircularProgressBase component as an animated loader.
26
+ * CircularProgressBase can be used inside LoaderContainer component.
27
27
  */
28
- export const CircularProgress = React.forwardRef<
29
- SVGSVGElement,
30
- CircularProgressProps
28
+ export const CircularProgressBase = React.forwardRef<
29
+ SVGElement,
30
+ CircularProgressBaseProps
31
31
  >(function CircularProgress(
32
32
  { color = 'primary', size = 'md', className, ...props },
33
33
  ref
@@ -60,4 +60,4 @@ export const CircularProgress = React.forwardRef<
60
60
  );
61
61
  });
62
62
 
63
- export default CircularProgress;
63
+ export default CircularProgressBase;
package/src/DetailsContent/index.tsx CHANGED
@@ -2,7 +2,15 @@ import React from 'react';
2
2
  import clsx from 'clsx';
3
3
  import Base, { BaseProps } from '@digigov/react-core/Base';
4
4
 
5
- export interface DetailsContentProps extends BaseProps<'div'> {}
5
+ export interface DetailsContentProps extends BaseProps<'div'> {
6
+ /*
7
+ ** color is optional. Default value is 'primary'.
8
+ * @value 'primary'
9
+ * @value 'secondary'
10
+ * @default 'primary'
11
+ * */
12
+ color?: 'primary' | 'secondary';
13
+ }
6
14
  /**
7
15
  *DetailsContent component wraps the content text.
8
16
  *It is used inside Details component as children
@@ -10,13 +18,14 @@ export interface DetailsContentProps extends BaseProps<'div'> {}
10
18
  export const DetailsContent = React.forwardRef<
11
19
  HTMLDivElement,
12
20
  DetailsContentProps
13
- >(function DetailsContent({ className, children, ...props }, ref) {
21
+ >(function DetailsContent({ color, className, children, ...props }, ref) {
14
22
  return (
15
23
  <Base
16
24
  as="div"
17
25
  ref={ref}
18
26
  className={clsx(className, {
19
27
  'ds-details__content': true,
28
+ 'ds-details__content--secondary': color === 'secondary',
20
29
  })}
21
30
  {...props}
22
31
  >
package/src/Grid/index.tsx CHANGED
@@ -32,13 +32,7 @@ export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
32
32
  inline?: boolean;
33
33
  /**
34
34
  * Defines the space between the type item components. It can only be used on a type container component.
35
- * @value 1
36
- * @value 2
37
- * @value 4
38
- * @value 6
39
- * @value 8
40
- * @value 10
41
- * @value 12
35
+ * @value 1 - 12
42
36
  * @value object
43
37
  * @default undefined
44
38
  */
package/src/SummaryList/__snapshots__/index.test.tsx.snap CHANGED
@@ -1,5 +1,29 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
+ exports[`renders the SummaryList with border="true" 1`] = `
4
+ <body>
5
+ <div>
6
+ <dl
7
+ class="ds-summary-list"
8
+ >
9
+ hello
10
+ </dl>
11
+ </div>
12
+ </body>
13
+ `;
14
+
15
+ exports[`renders the SummaryList with error="true 1`] = `
16
+ <body>
17
+ <div>
18
+ <dl
19
+ class="ds-summary-list ds-summary-list--error"
20
+ >
21
+ hello
22
+ </dl>
23
+ </div>
24
+ </body>
25
+ `;
26
+
3
27
  exports[`renders the SummaryList with no props 1`] = `
4
28
  <body>
5
29
  <div>
@@ -11,3 +35,15 @@ exports[`renders the SummaryList with no props 1`] = `
11
35
  </div>
12
36
  </body>
13
37
  `;
38
+
39
+ exports[`renders the SummaryList with noLastBorder="true 1`] = `
40
+ <body>
41
+ <div>
42
+ <dl
43
+ class="ds-summary-list ds-summary-list--no-last-border"
44
+ >
45
+ hello
46
+ </dl>
47
+ </div>
48
+ </body>
49
+ `;
package/src/SummaryList/index.test.tsx CHANGED
@@ -8,3 +8,18 @@ it('renders the SummaryList with no props', () => {
8
8
  render(<SummaryList>hello</SummaryList>).baseElement
9
9
  ).toMatchSnapshot();
10
10
  });
11
+ it('renders the SummaryList with border="true"', () => {
12
+ expect(
13
+ render(<SummaryList border>hello</SummaryList>).baseElement
14
+ ).toMatchSnapshot();
15
+ });
16
+ it('renders the SummaryList with noLastBorder="true', () => {
17
+ expect(
18
+ render(<SummaryList noLastBorder>hello</SummaryList>).baseElement
19
+ ).toMatchSnapshot();
20
+ });
21
+ it('renders the SummaryList with error="true', () => {
22
+ expect(
23
+ render(<SummaryList error>hello</SummaryList>).baseElement
24
+ ).toMatchSnapshot();
25
+ });
package/src/SummaryList/index.tsx CHANGED
@@ -6,7 +6,7 @@ export interface SummaryListProps extends BaseProps<'dl'> {
6
6
  /**
7
7
  * border is optional.
8
8
  * By default, SummaryList has borders. You can remove borders by using border prop.
9
- * By default is true
9
+ * By default is true.
10
10
  * @value true
11
11
  * @value false
12
12
  * @default true
@@ -15,12 +15,21 @@ export interface SummaryListProps extends BaseProps<'dl'> {
15
15
  /**
16
16
  * noLastBorder is optional.
17
17
  * By default, SummaryList has borders. You can remove last border by using noLastBorder prop.
18
- * By default is true
18
+ * By default is false.
19
19
  * @value true
20
20
  * @value false
21
21
  * @default false
22
22
  */
23
23
  noLastBorder?: boolean;
24
+
25
+ /**
26
+ * error is optional.
27
+ * If true, the SummaryList will be styled to indicate an error state.
28
+ * @value true
29
+ * @value false
30
+ * @default false
31
+ */
32
+ error?: boolean;
24
33
  }
25
34
  /**
26
35
  * SummaryList used as a table with summary information.
@@ -28,7 +37,14 @@ export interface SummaryListProps extends BaseProps<'dl'> {
28
37
  */
29
38
  export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
30
39
  function SummaryList(
31
- { className, noLastBorder = false, border = true, children, ...props },
40
+ {
41
+ border = true,
42
+ noLastBorder = false,
43
+ error = false,
44
+ className,
45
+ children,
46
+ ...props
47
+ },
32
48
  ref
33
49
  ) {
34
50
  return (
@@ -39,6 +55,7 @@ export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
39
55
  'ds-summary-list': true,
40
56
  'ds-summary-list--no-border': !border,
41
57
  'ds-summary-list--no-last-border': noLastBorder,
58
+ 'ds-summary-list--error': error === true,
42
59
  })}
43
60
  {...props}
44
61
  >
package/src/SummaryListItem/index.tsx CHANGED
@@ -21,7 +21,7 @@ export const SummaryListItem = React.forwardRef<
21
21
  HTMLDivElement,
22
22
  SummaryListItemProps
23
23
  >(function SummaryListItem(
24
- { className, children, border = true, ...props },
24
+ { border = true, className, children, ...props },
25
25
  ref
26
26
  ) {
27
27
  return (
package/src/SummaryListItemKey/__snapshots__/index.test.tsx.snap CHANGED
@@ -1,5 +1,63 @@
1
1
  // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
2
 
3
+ exports[`renders the SummaryListItemKey with error="true" 1`] = `
4
+ <body>
5
+ <div>
6
+ <dt
7
+ class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--error"
8
+ >
9
+ <span
10
+ class="ds-visually-hidden"
11
+ >
12
+ Λανθασμένο πεδίο
13
+ </span>
14
+ hello
15
+ </dt>
16
+ </div>
17
+ </body>
18
+ `;
19
+
20
+ exports[`renders the SummaryListItemKey with error="true" and errorAssistiveText="wrong" 1`] = `
21
+ <body>
22
+ <div>
23
+ <dt
24
+ class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--error"
25
+ >
26
+ <span
27
+ class="ds-visually-hidden"
28
+ >
29
+ wrong
30
+ </span>
31
+ hello
32
+ </dt>
33
+ </div>
34
+ </body>
35
+ `;
36
+
37
+ exports[`renders the SummaryListItemKey with lg=9 1`] = `
38
+ <body>
39
+ <div>
40
+ <dt
41
+ class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--lg-9"
42
+ >
43
+ hello
44
+ </dt>
45
+ </div>
46
+ </body>
47
+ `;
48
+
49
+ exports[`renders the SummaryListItemKey with md=6 1`] = `
50
+ <body>
51
+ <div>
52
+ <dt
53
+ class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--md-6"
54
+ >
55
+ hello
56
+ </dt>
57
+ </div>
58
+ </body>
59
+ `;
60
+
3
61
  exports[`renders the SummaryListItemKey with no props 1`] = `
4
62
  <body>
5
63
  <div>
@@ -11,3 +69,15 @@ exports[`renders the SummaryListItemKey with no props 1`] = `
11
69
  </div>
12
70
  </body>
13
71
  `;
72
+
73
+ exports[`renders the SummaryListItemKey with sm=4 1`] = `
74
+ <body>
75
+ <div>
76
+ <dt
77
+ class="ds-summary-list__key ds-summary-list__key--sm-4"
78
+ >
79
+ hello
80
+ </dt>
81
+ </div>
82
+ </body>
83
+ `;
package/src/SummaryListItemKey/index.test.tsx CHANGED
@@ -8,3 +8,32 @@ it('renders the SummaryListItemKey with no props', () => {
8
8
  render(<SummaryListItemKey>hello</SummaryListItemKey>).baseElement
9
9
  ).toMatchSnapshot();
10
10
  });
11
+ it('renders the SummaryListItemKey with sm=4', () => {
12
+ expect(
13
+ render(<SummaryListItemKey sm={4}>hello</SummaryListItemKey>).baseElement
14
+ ).toMatchSnapshot();
15
+ });
16
+ it('renders the SummaryListItemKey with md=6', () => {
17
+ expect(
18
+ render(<SummaryListItemKey md={6}>hello</SummaryListItemKey>).baseElement
19
+ ).toMatchSnapshot();
20
+ });
21
+ it('renders the SummaryListItemKey with lg=9', () => {
22
+ expect(
23
+ render(<SummaryListItemKey lg={9}>hello</SummaryListItemKey>).baseElement
24
+ ).toMatchSnapshot();
25
+ });
26
+ it('renders the SummaryListItemKey with error="true"', () => {
27
+ expect(
28
+ render(<SummaryListItemKey error>hello</SummaryListItemKey>).baseElement
29
+ ).toMatchSnapshot();
30
+ });
31
+ it('renders the SummaryListItemKey with error="true" and errorAssistiveText="wrong"', () => {
32
+ expect(
33
+ render(
34
+ <SummaryListItemKey error errorAssistiveText="wrong">
35
+ hello
36
+ </SummaryListItemKey>
37
+ ).baseElement
38
+ ).toMatchSnapshot();
39
+ });
package/src/SummaryListItemKey/index.tsx CHANGED
@@ -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
- { sm = 3, md, lg, className, children, ...props },
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
  );
package/src/SummaryListItemValue/__snapshots__/index.test.tsx.snap CHANGED
@@ -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>
package/src/SummaryListItemValue/index.test.tsx CHANGED
@@ -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
+ });
package/src/SummaryListItemValue/index.tsx CHANGED
@@ -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({ className, children, ...props }, ref) {
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/TableDataCell/__snapshots__/index.test.tsx.snap CHANGED
@@ -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>
@@ -47,3 +76,51 @@ exports[`renders the Table with no props 1`] = `
47
76
  </div>
48
77
  </body>
49
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"
118
+ >
119
+ hello
120
+ </td>
121
+ </tr>
122
+ </tbody>
123
+ </table>
124
+ </div>
125
+ </body>
126
+ `;