@digigov/css 1.2.1-2702533a → 1.3.0-01ea6f24

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 (66) hide show
  1. package/dist/base/index.css +1 -1
  2. package/dist/base.js +1 -1
  3. package/dist/components.js +1 -1
  4. package/dist/digigov.css +3 -3
  5. package/dist/utilities/index.css +1 -1
  6. package/dist/utilities.js +1 -1
  7. package/package.json +1 -1
  8. package/src/components/accordion.css +37 -37
  9. package/src/components/admin-header.css +9 -9
  10. package/src/components/admin-layout.css +8 -8
  11. package/src/components/autocomplete.css +31 -31
  12. package/src/components/back-to-top.css +4 -4
  13. package/src/components/bottom-info.css +2 -2
  14. package/src/components/breadcrumbs.css +5 -5
  15. package/src/components/button.css +47 -47
  16. package/src/components/card.css +27 -27
  17. package/src/components/checkboxes.css +17 -17
  18. package/src/components/chip.css +16 -16
  19. package/src/components/copy-to-clipboard.css +18 -18
  20. package/src/components/details.css +4 -4
  21. package/src/components/dev-theme.css +1 -1
  22. package/src/components/drawer.css +30 -30
  23. package/src/components/dropdown.css +37 -37
  24. package/src/components/experimental.css +10 -10
  25. package/src/components/fillable.css +3 -3
  26. package/src/components/filter.css +51 -51
  27. package/src/components/footer.css +24 -24
  28. package/src/components/form.css +85 -85
  29. package/src/components/full-page-background.css +1 -1
  30. package/src/components/header.css +40 -40
  31. package/src/components/hidden.css +11 -11
  32. package/src/components/kitchensink.css +18 -18
  33. package/src/components/layout.css +31 -31
  34. package/src/components/loader.css +11 -11
  35. package/src/components/masthead.css +23 -23
  36. package/src/components/misc.css +11 -11
  37. package/src/components/modal.css +11 -11
  38. package/src/components/nav.css +48 -48
  39. package/src/components/notification-banner.css +15 -15
  40. package/src/components/pagination.css +24 -24
  41. package/src/components/panel.css +4 -4
  42. package/src/components/phase-banner.css +7 -7
  43. package/src/components/radios.css +15 -15
  44. package/src/components/skiplink.css +1 -1
  45. package/src/components/stack.css +22 -22
  46. package/src/components/stepnav.css +42 -42
  47. package/src/components/summary-list.css +32 -32
  48. package/src/components/svg-icons.css +26 -29
  49. package/src/components/table.css +98 -98
  50. package/src/components/tabs.css +18 -18
  51. package/src/components/task-list.css +20 -20
  52. package/src/components/timeline.css +16 -16
  53. package/src/components/typography.css +87 -87
  54. package/src/components/warning-text.css +6 -6
  55. package/src/pages/admin-filtering-data.js +86 -86
  56. package/src/pages/admin.js +36 -36
  57. package/src/pages/dropdown.js +109 -109
  58. package/src/pages/form.js +210 -210
  59. package/src/pages/headings/service-heading.js +9 -9
  60. package/src/pages/index.js +201 -201
  61. package/src/pages/pagination.js +49 -49
  62. package/src/pages/table.js +223 -223
  63. package/src/utilities/index.css +195 -195
  64. package/src/utilities/utilities.css +416 -416
  65. package/tailwind.config.js +0 -2
  66. package/themes.plugin.js +1 -1
package/src/pages/table.js CHANGED
@@ -3,302 +3,302 @@ export default function Table() {
3
3
  <body>
4
4
 
5
5
 
6
- <table className="govgr-table">
7
- <caption className="govgr-table__caption govgr-table__caption--sm">Table caption S</caption>
8
- <caption className="govgr-table__caption govgr-table__caption--md">Table caption M</caption>
9
- <caption className="govgr-table__caption govgr-table__caption--lg">Table caption L</caption>
10
- <caption className="govgr-table__caption govgr-table__caption--xl">Table caption XL</caption>
6
+ <table className="ds-table">
7
+ <caption className="ds-table__caption ds-table__caption--sm">Table caption S</caption>
8
+ <caption className="ds-table__caption ds-table__caption--md">Table caption M</caption>
9
+ <caption className="ds-table__caption ds-table__caption--lg">Table caption L</caption>
10
+ <caption className="ds-table__caption ds-table__caption--xl">Table caption XL</caption>
11
11
  </table>
12
12
 
13
- <table className="govgr-table">
14
- <caption className="govgr-table__caption govgr-table__caption--md">Simple Table</caption>
15
- <thead className="govgr-table__head">
16
- <tr className="govgr-table__row">
17
- <th scope="col" className="govgr-table__header">Date</th>
18
- <th scope="col" className="govgr-table__header">Amount</th>
13
+ <table className="ds-table">
14
+ <caption className="ds-table__caption ds-table__caption--md">Simple Table</caption>
15
+ <thead className="ds-table__head">
16
+ <tr className="ds-table__row">
17
+ <th scope="col" className="ds-table__header">Date</th>
18
+ <th scope="col" className="ds-table__header">Amount</th>
19
19
  </tr>
20
20
  </thead>
21
- <tbody className="govgr-table__body">
22
- <tr className="govgr-table__row">
23
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
24
- <td className="govgr-table__cell">€109.80 per week</td>
21
+ <tbody className="ds-table__body">
22
+ <tr className="ds-table__row">
23
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
24
+ <td className="ds-table__cell">€109.80 per week</td>
25
25
  </tr>
26
- <tr className="govgr-table__row">
27
- <th scope="row" className="govgr-table__header">Next 33 weeks</th>
28
- <td className="govgr-table__cell">€109.80 per week</td>
26
+ <tr className="ds-table__row">
27
+ <th scope="row" className="ds-table__header">Next 33 weeks</th>
28
+ <td className="ds-table__cell">€109.80 per week</td>
29
29
  </tr>
30
- <tr className="govgr-table__row">
31
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
32
- <td className="govgr-table__cell">€4,282.20</td>
30
+ <tr className="ds-table__row">
31
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
32
+ <td className="ds-table__cell">€4,282.20</td>
33
33
  </tr>
34
34
  </tbody>
35
35
  </table>
36
36
 
37
37
  {/* Table with vertical lines */}
38
- <table className="govgr-table govgr-table--vertical-lines">
39
- <caption className="govgr-table__caption govgr-table__caption--md">Table with vertical lines</caption>
40
- <thead className="govgr-table__head">
41
- <tr className="govgr-table__row">
42
- <th scope="col" className="govgr-table__header">Date</th>
43
- <th scope="col" className="govgr-table__header">Amount</th>
44
- <th scope="col" className="govgr-table__header">Amount</th>
38
+ <table className="ds-table ds-table--vertical-lines">
39
+ <caption className="ds-table__caption ds-table__caption--md">Table with vertical lines</caption>
40
+ <thead className="ds-table__head">
41
+ <tr className="ds-table__row">
42
+ <th scope="col" className="ds-table__header">Date</th>
43
+ <th scope="col" className="ds-table__header">Amount</th>
44
+ <th scope="col" className="ds-table__header">Amount</th>
45
45
  </tr>
46
46
  </thead>
47
- <tbody className="govgr-table__body">
48
- <tr className="govgr-table__row">
49
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
50
- <td className="govgr-table__cell">€109.80 per week</td>
51
- <td className="govgr-table__cell">€109.80 per week</td>
52
- </tr>
53
- <tr className="govgr-table__row">
54
- <th scope="row" className="govgr-table__header">Next 33 weeks</th>
55
- <td className="govgr-table__cell">€109.80 per week</td>
56
- <td className="govgr-table__cell">€109.80 per week</td>
57
- </tr>
58
- <tr className="govgr-table__row">
59
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
60
- <td className="govgr-table__cell">€4,282.20</td>
61
- <td className="govgr-table__cell">€4,282.20</td>
47
+ <tbody className="ds-table__body">
48
+ <tr className="ds-table__row">
49
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
50
+ <td className="ds-table__cell">€109.80 per week</td>
51
+ <td className="ds-table__cell">€109.80 per week</td>
52
+ </tr>
53
+ <tr className="ds-table__row">
54
+ <th scope="row" className="ds-table__header">Next 33 weeks</th>
55
+ <td className="ds-table__cell">€109.80 per week</td>
56
+ <td className="ds-table__cell">€109.80 per week</td>
57
+ </tr>
58
+ <tr className="ds-table__row">
59
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
60
+ <td className="ds-table__cell">€4,282.20</td>
61
+ <td className="ds-table__cell">€4,282.20</td>
62
62
  </tr>
63
63
  </tbody>
64
64
  </table>
65
65
 
66
- <table className="govgr-table">
67
- <caption className="govgr-table__caption govgr-table__caption--md">Table with numbers and custom column widths </caption>
68
- <thead className="govgr-table__head">
69
- <tr className="govgr-table__row">
70
- <th scope="col" className="govgr-table__header govgr-!-width-one-half">Date</th>
71
- <th scope="col" className="govgr-table__header govgr-!-width-one-quarter govgr-table__header--numeric">Regular</th>
72
- <th scope="col" className="govgr-table__header govgr-!-width-one-quarter govgr-table__header--numeric">Reduced</th>
66
+ <table className="ds-table">
67
+ <caption className="ds-table__caption ds-table__caption--md">Table with numbers and custom column widths </caption>
68
+ <thead className="ds-table__head">
69
+ <tr className="ds-table__row">
70
+ <th scope="col" className="ds-table__header ds-!-width-one-half">Date</th>
71
+ <th scope="col" className="ds-table__header ds-!-width-one-quarter ds-table__header--numeric">Regular</th>
72
+ <th scope="col" className="ds-table__header ds-!-width-one-quarter ds-table__header--numeric">Reduced</th>
73
73
  </tr>
74
74
  </thead>
75
- <tbody className="govgr-table__body">
76
- <tr className="govgr-table__row">
77
- <th scope="row" className="govgr-table__header govgr-!-width-one-half">First 6 weeks</th>
78
- <td className="govgr-table__cell govgr-table__cell--numeric">€109.80</td>
79
- <td className="govgr-table__cell govgr-table__cell--numeric">€69.80</td>
75
+ <tbody className="ds-table__body">
76
+ <tr className="ds-table__row">
77
+ <th scope="row" className="ds-table__header ds-!-width-one-half">First 6 weeks</th>
78
+ <td className="ds-table__cell ds-table__cell--numeric">€109.80</td>
79
+ <td className="ds-table__cell ds-table__cell--numeric">€69.80</td>
80
80
  </tr>
81
- <tr className="govgr-table__row">
82
- <th scope="row" className="govgr-table__header govgr-!-width-one-half">Next 33 weeks</th>
83
- <td className="govgr-table__cell govgr-table__cell--numeric">€109.80</td>
84
- <td className="govgr-table__cell govgr-table__cell--numeric">€69.80</td>
81
+ <tr className="ds-table__row">
82
+ <th scope="row" className="ds-table__header ds-!-width-one-half">Next 33 weeks</th>
83
+ <td className="ds-table__cell ds-table__cell--numeric">€109.80</td>
84
+ <td className="ds-table__cell ds-table__cell--numeric">€69.80</td>
85
85
  </tr>
86
86
  </tbody>
87
87
  </table>
88
88
 
89
89
  {/* Table with primary color at header */}
90
- <table className="govgr-table govgr-table--dark govgr-table--vertical-lines">
91
- <caption className="govgr-table__caption govgr-table__caption--md">Table with primary color at header</caption>
92
- <thead className="govgr-table__head">
93
- <tr className="govgr-table__row">
94
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
95
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
90
+ <table className="ds-table ds-table--dark ds-table--vertical-lines">
91
+ <caption className="ds-table__caption ds-table__caption--md">Table with primary color at header</caption>
92
+ <thead className="ds-table__head">
93
+ <tr className="ds-table__row">
94
+ <th scope="col" className="ds-table__header ds-table__header--dark">Date</th>
95
+ <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
96
96
  </tr>
97
97
  </thead>
98
- <tbody className="govgr-table__body">
99
- <tr className="govgr-table__row">
100
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
101
- <td className="govgr-table__cell">€109.80 per week</td>
98
+ <tbody className="ds-table__body">
99
+ <tr className="ds-table__row">
100
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
101
+ <td className="ds-table__cell">€109.80 per week</td>
102
102
  </tr>
103
- <tr className="govgr-table__row">
104
- <th scope="row" className="govgr-table__header">Next 33 weeks</th>
105
- <td className="govgr-table__cell">€109.80 per week</td>
103
+ <tr className="ds-table__row">
104
+ <th scope="row" className="ds-table__header">Next 33 weeks</th>
105
+ <td className="ds-table__cell">€109.80 per week</td>
106
106
  </tr>
107
- <tr className="govgr-table__row">
108
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
109
- <td className="govgr-table__cell">€4,282.20</td>
107
+ <tr className="ds-table__row">
108
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
109
+ <td className="ds-table__cell">€4,282.20</td>
110
110
  </tr>
111
111
  </tbody>
112
112
  </table>
113
113
 
114
114
  {/* Table with gray color at all headers */}
115
- <table className="govgr-table govgr-table--dark ">
116
- <caption className="govgr-table__caption govgr-table__caption--md">Table with gray color at header</caption>
117
- <thead className="govgr-table__head">
118
- <tr className="govgr-table__row">
119
- <th scope="col" className="govgr-table__header govgr-table__header--gray">Date</th>
120
- <th scope="col" className="govgr-table__header govgr-table__header--gray">Amount</th>
121
- <th scope="col" className="govgr-table__header govgr-table__header--gray">Discount</th>
115
+ <table className="ds-table ds-table--dark ">
116
+ <caption className="ds-table__caption ds-table__caption--md">Table with gray color at header</caption>
117
+ <thead className="ds-table__head">
118
+ <tr className="ds-table__row">
119
+ <th scope="col" className="ds-table__header ds-table__header--gray">Date</th>
120
+ <th scope="col" className="ds-table__header ds-table__header--gray">Amount</th>
121
+ <th scope="col" className="ds-table__header ds-table__header--gray">Discount</th>
122
122
  </tr>
123
123
  </thead>
124
- <tbody className="govgr-table__body">
125
- <tr className="govgr-table__row">
126
- <th scope="row" className="govgr-table__header govgr-table__header--gray">First 6 weeks</th>
127
- <td className="govgr-table__cell">€109.80 per week</td>
128
- <td className="govgr-table__cell">€69.80 per week</td>
124
+ <tbody className="ds-table__body">
125
+ <tr className="ds-table__row">
126
+ <th scope="row" className="ds-table__header ds-table__header--gray">First 6 weeks</th>
127
+ <td className="ds-table__cell">€109.80 per week</td>
128
+ <td className="ds-table__cell">€69.80 per week</td>
129
129
  </tr>
130
- <tr className="govgr-table__row">
131
- <th scope="row" className="govgr-table__header govgr-table__header--gray">Next 33 weeks</th>
132
- <td className="govgr-table__cell">€109.80 per week</td>
133
- <td className="govgr-table__cell">€79.80 per week</td>
130
+ <tr className="ds-table__row">
131
+ <th scope="row" className="ds-table__header ds-table__header--gray">Next 33 weeks</th>
132
+ <td className="ds-table__cell">€109.80 per week</td>
133
+ <td className="ds-table__cell">€79.80 per week</td>
134
134
  </tr>
135
135
  </tbody>
136
136
  </table>
137
137
 
138
138
  {/* Zebra Table */}
139
- <table className="govgr-table govgr-table--zebra">
140
- <caption className="govgr-table__caption govgr-table__caption--md">Zebra Table</caption>
141
- <thead className="govgr-table__head">
142
- <tr className="govgr-table__row">
143
- <th scope="col" className="govgr-table__header">Date</th>
144
- <th scope="col" className="govgr-table__header">Amount</th>
139
+ <table className="ds-table ds-table--zebra">
140
+ <caption className="ds-table__caption ds-table__caption--md">Zebra Table</caption>
141
+ <thead className="ds-table__head">
142
+ <tr className="ds-table__row">
143
+ <th scope="col" className="ds-table__header">Date</th>
144
+ <th scope="col" className="ds-table__header">Amount</th>
145
145
  </tr>
146
146
  </thead>
147
- <tbody className="govgr-table__body">
148
- <tr className="govgr-table__row">
149
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
150
- <td className="govgr-table__cell">€109.80 per week</td>
147
+ <tbody className="ds-table__body">
148
+ <tr className="ds-table__row">
149
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
150
+ <td className="ds-table__cell">€109.80 per week</td>
151
151
  </tr>
152
- <tr className="govgr-table__row">
153
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
154
- <td className="govgr-table__cell">€109.80 per week</td>
152
+ <tr className="ds-table__row">
153
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
154
+ <td className="ds-table__cell">€109.80 per week</td>
155
155
  </tr>
156
- <tr className="govgr-table__row">
157
- <th scope="row" className="govgr-table__header">Next 33 weeks</th>
158
- <td className="govgr-table__cell">€109.80 per week</td>
156
+ <tr className="ds-table__row">
157
+ <th scope="row" className="ds-table__header">Next 33 weeks</th>
158
+ <td className="ds-table__cell">€109.80 per week</td>
159
159
  </tr>
160
- <tr className="govgr-table__row">
161
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
162
- <td className="govgr-table__cell">€4,282.20</td>
160
+ <tr className="ds-table__row">
161
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
162
+ <td className="ds-table__cell">€4,282.20</td>
163
163
  </tr>
164
- <tr className="govgr-table__row">
165
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
166
- <td className="govgr-table__cell">€4,282.20</td>
164
+ <tr className="ds-table__row">
165
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
166
+ <td className="ds-table__cell">€4,282.20</td>
167
167
  </tr>
168
168
  </tbody>
169
169
  </table>
170
170
 
171
171
  {/* Zebra Table with dark header */}
172
- <table className="govgr-table govgr-table--dark govgr-table--zebra">
173
- <caption className="govgr-table__caption govgr-table__caption--md">Zebra Table with dark header</caption>
174
- <thead className="govgr-table__head">
175
- <tr className="govgr-table__row">
176
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
177
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
172
+ <table className="ds-table ds-table--dark ds-table--zebra">
173
+ <caption className="ds-table__caption ds-table__caption--md">Zebra Table with dark header</caption>
174
+ <thead className="ds-table__head">
175
+ <tr className="ds-table__row">
176
+ <th scope="col" className="ds-table__header ds-table__header--dark">Date</th>
177
+ <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
178
178
  </tr>
179
179
  </thead>
180
- <tbody className="govgr-table__body">
181
- <tr className="govgr-table__row">
182
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
183
- <td className="govgr-table__cell">€109.80 per week</td>
180
+ <tbody className="ds-table__body">
181
+ <tr className="ds-table__row">
182
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
183
+ <td className="ds-table__cell">€109.80 per week</td>
184
184
  </tr>
185
- <tr className="govgr-table__row">
186
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
187
- <td className="govgr-table__cell">€109.80 per week</td>
185
+ <tr className="ds-table__row">
186
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
187
+ <td className="ds-table__cell">€109.80 per week</td>
188
188
  </tr>
189
- <tr className="govgr-table__row">
190
- <th scope="row" className="govgr-table__header">Next 33 weeks</th>
191
- <td className="govgr-table__cell">€109.80 per week</td>
189
+ <tr className="ds-table__row">
190
+ <th scope="row" className="ds-table__header">Next 33 weeks</th>
191
+ <td className="ds-table__cell">€109.80 per week</td>
192
192
  </tr>
193
- <tr className="govgr-table__row">
194
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
195
- <td className="govgr-table__cell">€4,282.20</td>
193
+ <tr className="ds-table__row">
194
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
195
+ <td className="ds-table__cell">€4,282.20</td>
196
196
  </tr>
197
- <tr className="govgr-table__row">
198
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
199
- <td className="govgr-table__cell">€4,282.20</td>
197
+ <tr className="ds-table__row">
198
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
199
+ <td className="ds-table__cell">€4,282.20</td>
200
200
  </tr>
201
201
  </tbody>
202
202
  </table>
203
203
 
204
204
  {/* Zebra Table with dark headers */}
205
- <table className="govgr-table govgr-table--dark govgr-table--zebra">
206
- <caption className="govgr-table__caption govgr-table__caption--md">Zebra Table with dark header</caption>
207
- <thead className="govgr-table__head">
208
- <tr className="govgr-table__row">
209
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Date</th>
210
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
211
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
212
- <th scope="col" className="govgr-table__header govgr-table__header--dark">Amount</th>
205
+ <table className="ds-table ds-table--dark ds-table--zebra">
206
+ <caption className="ds-table__caption ds-table__caption--md">Zebra Table with dark header</caption>
207
+ <thead className="ds-table__head">
208
+ <tr className="ds-table__row">
209
+ <th scope="col" className="ds-table__header ds-table__header--dark">Date</th>
210
+ <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
211
+ <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
212
+ <th scope="col" className="ds-table__header ds-table__header--dark">Amount</th>
213
213
  </tr>
214
214
  </thead>
215
- <tbody className="govgr-table__body">
216
- <tr className="govgr-table__row">
217
- <th scope="row" className="govgr-table__header govgr-table__header--dark">First 6 weeks</th>
218
- <td className="govgr-table__cell">€109.80 per week</td>
219
- <td className="govgr-table__cell">€109.80 per week</td>
220
- <td className="govgr-table__cell">€109.80 per week</td>
221
- </tr>
222
- <tr className="govgr-table__row">
223
- <th scope="row" className="govgr-table__header govgr-table__header--dark">First 6 weeks</th>
224
- <td className="govgr-table__cell">€109.80 per week</td>
225
- <td className="govgr-table__cell">€109.80 per week</td>
226
- <td className="govgr-table__cell">€109.80 per week</td>
227
- </tr>
228
- <tr className="govgr-table__row">
229
- <th scope="row" className="govgr-table__header govgr-table__header--dark">Next 33 weeks</th>
230
- <td className="govgr-table__cell">€109.80 per week</td>
231
- <td className="govgr-table__cell">€109.80 per week</td>
232
- <td className="govgr-table__cell">€109.80 per week</td>
233
- </tr>
234
- <tr className="govgr-table__row">
235
- <th scope="row" className="govgr-table__header govgr-table__header--dark">Total estimated pay</th>
236
- <td className="govgr-table__cell">€4,282.20</td>
237
- <td className="govgr-table__cell">€4,282.20</td>
238
- <td className="govgr-table__cell">€4,282.20</td>
239
- </tr>
240
- <tr className="govgr-table__row">
241
- <th scope="row" className="govgr-table__header govgr-table__header--dark">Total estimated pay</th>
242
- <td className="govgr-table__cell">€4,282.20</td>
243
- <td className="govgr-table__cell">€4,282.20</td>
244
- <td className="govgr-table__cell">€4,282.20</td>
215
+ <tbody className="ds-table__body">
216
+ <tr className="ds-table__row">
217
+ <th scope="row" className="ds-table__header ds-table__header--dark">First 6 weeks</th>
218
+ <td className="ds-table__cell">€109.80 per week</td>
219
+ <td className="ds-table__cell">€109.80 per week</td>
220
+ <td className="ds-table__cell">€109.80 per week</td>
221
+ </tr>
222
+ <tr className="ds-table__row">
223
+ <th scope="row" className="ds-table__header ds-table__header--dark">First 6 weeks</th>
224
+ <td className="ds-table__cell">€109.80 per week</td>
225
+ <td className="ds-table__cell">€109.80 per week</td>
226
+ <td className="ds-table__cell">€109.80 per week</td>
227
+ </tr>
228
+ <tr className="ds-table__row">
229
+ <th scope="row" className="ds-table__header ds-table__header--dark">Next 33 weeks</th>
230
+ <td className="ds-table__cell">€109.80 per week</td>
231
+ <td className="ds-table__cell">€109.80 per week</td>
232
+ <td className="ds-table__cell">€109.80 per week</td>
233
+ </tr>
234
+ <tr className="ds-table__row">
235
+ <th scope="row" className="ds-table__header ds-table__header--dark">Total estimated pay</th>
236
+ <td className="ds-table__cell">€4,282.20</td>
237
+ <td className="ds-table__cell">€4,282.20</td>
238
+ <td className="ds-table__cell">€4,282.20</td>
239
+ </tr>
240
+ <tr className="ds-table__row">
241
+ <th scope="row" className="ds-table__header ds-table__header--dark">Total estimated pay</th>
242
+ <td className="ds-table__cell">€4,282.20</td>
243
+ <td className="ds-table__cell">€4,282.20</td>
244
+ <td className="ds-table__cell">€4,282.20</td>
245
245
  </tr>
246
246
  </tbody>
247
247
  </table>
248
248
 
249
249
  {/* Densed zebra Table */}
250
- <table className="govgr-table govgr-table--zebra govgr-table--dense">
251
- <caption className="govgr-table__caption govgr-table__caption--md">Densed zebra Table</caption>
252
- <thead className="govgr-table__head">
253
- <tr className="govgr-table__row">
254
- <th scope="col" className="govgr-table__header">Date</th>
255
- <th scope="col" className="govgr-table__header">Amount</th>
256
- <th scope="col" className="govgr-table__header">Amount</th>
257
- <th scope="col" className="govgr-table__header">Amount</th>
258
- <th scope="col" className="govgr-table__header">Amount</th>
259
- <th scope="col" className="govgr-table__header">Amount</th>
250
+ <table className="ds-table ds-table--zebra ds-table--dense">
251
+ <caption className="ds-table__caption ds-table__caption--md">Densed zebra Table</caption>
252
+ <thead className="ds-table__head">
253
+ <tr className="ds-table__row">
254
+ <th scope="col" className="ds-table__header">Date</th>
255
+ <th scope="col" className="ds-table__header">Amount</th>
256
+ <th scope="col" className="ds-table__header">Amount</th>
257
+ <th scope="col" className="ds-table__header">Amount</th>
258
+ <th scope="col" className="ds-table__header">Amount</th>
259
+ <th scope="col" className="ds-table__header">Amount</th>
260
260
  </tr>
261
261
  </thead>
262
- <tbody className="govgr-table__body">
263
- <tr className="govgr-table__row">
264
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
265
- <td className="govgr-table__cell">€109.80</td>
266
- <td className="govgr-table__cell">€109.80</td>
267
- <td className="govgr-table__cell">€109.80</td>
268
- <td className="govgr-table__cell">€109.80</td>
269
- <td className="govgr-table__cell">€109.80</td>
270
- </tr>
271
- <tr className="govgr-table__row">
272
- <th scope="row" className="govgr-table__header">First 6 weeks</th>
273
- <td className="govgr-table__cell">€109.80</td>
274
- <td className="govgr-table__cell">€109.80</td>
275
- <td className="govgr-table__cell">€109.80</td>
276
- <td className="govgr-table__cell">€109.80</td>
277
- <td className="govgr-table__cell">€109.80</td>
278
- </tr>
279
- <tr className="govgr-table__row">
280
- <th scope="row" className="govgr-table__header">Next 33 weeks</th>
281
- <td className="govgr-table__cell">€109.80</td>
282
- <td className="govgr-table__cell">€109.80</td>
283
- <td className="govgr-table__cell">€109.80</td>
284
- <td className="govgr-table__cell">€109.80</td>
285
- <td className="govgr-table__cell">€109.80</td>
286
- </tr>
287
- <tr className="govgr-table__row">
288
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
289
- <td className="govgr-table__cell">€4,282.20</td>
290
- <td className="govgr-table__cell">€4,282.20</td>
291
- <td className="govgr-table__cell">€4,282.20</td>
292
- <td className="govgr-table__cell">€4,282.20</td>
293
- <td className="govgr-table__cell">€4,282.20</td>
294
- </tr>
295
- <tr className="govgr-table__row">
296
- <th scope="row" className="govgr-table__header">Total estimated pay</th>
297
- <td className="govgr-table__cell">€4,282.20</td>
298
- <td className="govgr-table__cell">€4,282.20</td>
299
- <td className="govgr-table__cell">€4,282.20</td>
300
- <td className="govgr-table__cell">€4,282.20</td>
301
- <td className="govgr-table__cell">€4,282.20</td>
262
+ <tbody className="ds-table__body">
263
+ <tr className="ds-table__row">
264
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
265
+ <td className="ds-table__cell">€109.80</td>
266
+ <td className="ds-table__cell">€109.80</td>
267
+ <td className="ds-table__cell">€109.80</td>
268
+ <td className="ds-table__cell">€109.80</td>
269
+ <td className="ds-table__cell">€109.80</td>
270
+ </tr>
271
+ <tr className="ds-table__row">
272
+ <th scope="row" className="ds-table__header">First 6 weeks</th>
273
+ <td className="ds-table__cell">€109.80</td>
274
+ <td className="ds-table__cell">€109.80</td>
275
+ <td className="ds-table__cell">€109.80</td>
276
+ <td className="ds-table__cell">€109.80</td>
277
+ <td className="ds-table__cell">€109.80</td>
278
+ </tr>
279
+ <tr className="ds-table__row">
280
+ <th scope="row" className="ds-table__header">Next 33 weeks</th>
281
+ <td className="ds-table__cell">€109.80</td>
282
+ <td className="ds-table__cell">€109.80</td>
283
+ <td className="ds-table__cell">€109.80</td>
284
+ <td className="ds-table__cell">€109.80</td>
285
+ <td className="ds-table__cell">€109.80</td>
286
+ </tr>
287
+ <tr className="ds-table__row">
288
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
289
+ <td className="ds-table__cell">€4,282.20</td>
290
+ <td className="ds-table__cell">€4,282.20</td>
291
+ <td className="ds-table__cell">€4,282.20</td>
292
+ <td className="ds-table__cell">€4,282.20</td>
293
+ <td className="ds-table__cell">€4,282.20</td>
294
+ </tr>
295
+ <tr className="ds-table__row">
296
+ <th scope="row" className="ds-table__header">Total estimated pay</th>
297
+ <td className="ds-table__cell">€4,282.20</td>
298
+ <td className="ds-table__cell">€4,282.20</td>
299
+ <td className="ds-table__cell">€4,282.20</td>
300
+ <td className="ds-table__cell">€4,282.20</td>
301
+ <td className="ds-table__cell">€4,282.20</td>
302
302
  </tr>
303
303
  </tbody>
304
304
  </table>