@digigov/react-core 2.0.0-555d1027 → 2.0.0-5701c39b

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 (85) hide show
  1. package/AccordionSection/index.web.d.ts +0 -1
  2. package/AccordionSection/index.web.js.map +2 -2
  3. package/AccordionSectionSummaryHeading/index.d.ts +1 -0
  4. package/AccordionSectionSummaryHeading/index.js +3 -2
  5. package/AccordionSectionSummaryHeading/index.js.map +2 -2
  6. package/BannerContainer/index.js +1 -1
  7. package/BannerContainer/index.js.map +2 -2
  8. package/DetailsContent/index.d.ts +1 -0
  9. package/DetailsContent/index.js +3 -2
  10. package/DetailsContent/index.js.map +2 -2
  11. package/Grid/index.d.ts +1 -7
  12. package/Grid/index.js.map +2 -2
  13. package/NavListItemActionBase/index.js +2 -2
  14. package/NavListItemActionBase/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/AccordionSection/index.web.js.map +2 -2
  30. package/cjs/AccordionSectionSummaryHeading/index.js +3 -2
  31. package/cjs/AccordionSectionSummaryHeading/index.js.map +2 -2
  32. package/cjs/BannerContainer/index.js +1 -1
  33. package/cjs/BannerContainer/index.js.map +2 -2
  34. package/cjs/DetailsContent/index.js +3 -2
  35. package/cjs/DetailsContent/index.js.map +2 -2
  36. package/cjs/Grid/index.js.map +2 -2
  37. package/cjs/NavListItemActionBase/index.js +2 -2
  38. package/cjs/NavListItemActionBase/index.js.map +2 -2
  39. package/cjs/SummaryList/index.js +10 -2
  40. package/cjs/SummaryList/index.js.map +2 -2
  41. package/cjs/SummaryListItem/index.js +1 -1
  42. package/cjs/SummaryListItem/index.js.map +2 -2
  43. package/cjs/SummaryListItemKey/index.js +14 -2
  44. package/cjs/SummaryListItemKey/index.js.map +3 -3
  45. package/cjs/SummaryListItemValue/index.js +11 -2
  46. package/cjs/SummaryListItemValue/index.js.map +3 -3
  47. package/cjs/TableDataCell/index.js +8 -1
  48. package/cjs/TableDataCell/index.js.map +3 -3
  49. package/cjs/lazy/index.js +1 -1
  50. package/cjs/lazy.js.map +2 -2
  51. package/cjs/registry/index.js +2 -2
  52. package/cjs/registry.js.map +2 -2
  53. package/index.js +1 -1
  54. package/lazy/index.js +1 -1
  55. package/package.json +3 -3
  56. package/registry/index.js +2 -2
  57. package/src/Accordion/__snapshots__/index.test.tsx.snap +48 -0
  58. package/src/Accordion/index.test.tsx +24 -0
  59. package/src/AccordionSection/index.web.tsx +0 -1
  60. package/src/AccordionSectionSummaryHeading/__snapshots__/index.test.tsx.snap +17 -0
  61. package/src/AccordionSectionSummaryHeading/index.test.tsx +9 -0
  62. package/src/AccordionSectionSummaryHeading/index.tsx +9 -2
  63. package/src/BannerContainer/__snapshots__/index.test.tsx.snap +1 -1
  64. package/src/BannerContainer/index.tsx +1 -1
  65. package/src/DetailsContent/index.tsx +11 -2
  66. package/src/Grid/index.tsx +1 -7
  67. package/src/NavListItemActionBase/__snapshots__/index.test.tsx.snap +0 -1
  68. package/src/NavListItemActionBase/index.tsx +2 -2
  69. package/src/SummaryList/__snapshots__/index.test.tsx.snap +36 -0
  70. package/src/SummaryList/index.test.tsx +15 -0
  71. package/src/SummaryList/index.tsx +20 -3
  72. package/src/SummaryListItem/index.tsx +1 -1
  73. package/src/SummaryListItemKey/__snapshots__/index.test.tsx.snap +70 -0
  74. package/src/SummaryListItemKey/index.test.tsx +29 -0
  75. package/src/SummaryListItemKey/index.tsx +29 -1
  76. package/src/SummaryListItemValue/__snapshots__/index.test.tsx.snap +34 -0
  77. package/src/SummaryListItemValue/index.test.tsx +14 -0
  78. package/src/SummaryListItemValue/index.tsx +30 -2
  79. package/src/TableDataCell/__snapshots__/index.test.tsx.snap +77 -0
  80. package/src/TableDataCell/index.test.tsx +42 -0
  81. package/src/TableDataCell/index.tsx +33 -0
  82. package/src/TableRow/__snapshots__/index.test.tsx.snap +1 -1
  83. package/src/TableRow/index.test.tsx +1 -1
  84. package/src/lazy.js +1 -1
  85. package/src/registry.js +2 -2
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/NavListItemActionBase/__snapshots__/index.test.tsx.snap CHANGED
@@ -36,7 +36,6 @@ exports[`renders the NavListItemActionBase with arrow, badgeText and label props
36
36
  class="ds-nav__list-item"
37
37
  >
38
38
  <button
39
- badgetext="hello"
40
39
  class="ds-print-hidden ds-nav__list-item-btn ds-link"
41
40
  >
42
41
  hello
package/src/NavListItemActionBase/index.tsx CHANGED
@@ -35,7 +35,7 @@ export const NavListItemActionBase = React.forwardRef<
35
35
  HTMLButtonElement | HTMLAnchorElement,
36
36
  NavListItemActionBaseProps
37
37
  >(function NavListItemActionBase(
38
- { label, arrow = false, href, className, children, ...props },
38
+ { label, arrow = false, href, className, children, badgeText, ...props },
39
39
  ref
40
40
  ) {
41
41
  return (
@@ -59,7 +59,7 @@ export const NavListItemActionBase = React.forwardRef<
59
59
  {children || label}
60
60
  </NavListItemButton>
61
61
  )}
62
- {props.badgeText && <NavListItemBadge text={props.badgeText} />}
62
+ {badgeText && <NavListItemBadge text={badgeText} />}
63
63
  </NavListItemActionContainer>
64
64
  );
65
65
  });
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
+ `;
package/src/TableDataCell/index.test.tsx CHANGED
@@ -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
+ });
package/src/TableDataCell/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
  // import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
5
6
 
6
7
  export interface TableDataCellProps extends BaseProps<'td'> {
@@ -26,6 +27,23 @@ export interface TableDataCellProps extends BaseProps<'td'> {
26
27
  * Use this prop to control the word break of the table-cell contents.
27
28
  */
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;
29
47
  }
30
48
  /**
31
49
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.
@@ -38,12 +56,22 @@ export const TableDataCell = React.forwardRef<
38
56
  dataType = 'text',
39
57
  variant = 'border',
40
58
  wordBreak = 'none',
59
+ highlight,
60
+ highlightAssistiveText,
41
61
  className,
42
62
  children,
43
63
  ...props
44
64
  },
45
65
  ref
46
66
  ) {
67
+ const calculatedHighlightAssistiveText =
68
+ highlightAssistiveText ||
69
+ (highlight === 'warning'
70
+ ? 'Προσοχή'
71
+ : highlight === 'error'
72
+ ? 'Λανθασμένο πεδίο'
73
+ : undefined);
74
+
47
75
  return (
48
76
  <Base
49
77
  as="td"
@@ -53,9 +81,14 @@ export const TableDataCell = React.forwardRef<
53
81
  'ds-table__cell--border': variant === 'border',
54
82
  'ds-table__cell--break-all': wordBreak === 'break-all',
55
83
  'ds-table__cell--numeric': dataType === 'numeric',
84
+ 'ds-table__cell--warning': highlight === 'warning',
85
+ 'ds-table__cell--error': highlight === 'error',
56
86
  })}
57
87
  {...props}
58
88
  >
89
+ {calculatedHighlightAssistiveText && (
90
+ <VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
91
+ )}
59
92
  {children}
60
93
  </Base>
61
94
  );
package/src/TableRow/__snapshots__/index.test.tsx.snap CHANGED
@@ -18,7 +18,7 @@ exports[`renders the Table with color="secondary" prop 1`] = `
18
18
  </body>
19
19
  `;
20
20
 
21
- exports[`renders the Table with highlight prop 1`] = `
21
+ exports[`renders the Table with highlight="true" prop 1`] = `
22
22
  <body>
23
23
  <div>
24
24
  <table
package/src/TableRow/index.test.tsx CHANGED
@@ -17,7 +17,7 @@ it('renders the Table with no props', () => {
17
17
  ).toMatchSnapshot();
18
18
  });
19
19
 
20
- it('renders the Table with highlight prop', () => {
20
+ it('renders the Table with highlight="true" prop', () => {
21
21
  expect(
22
22
  render(
23
23
  <Table>