@digigov/css 0.13.0 → 0.15.0

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 (36) hide show
  1. package/CHANGELOG.json +45 -0
  2. package/CHANGELOG.md +25 -1
  3. package/colors/color-values.js +52 -51
  4. package/dist/base/index.css +3 -3
  5. package/dist/base.css +3 -3
  6. package/dist/base.js +1 -1
  7. package/dist/components.css +1 -1
  8. package/dist/components.js +1 -1
  9. package/dist/digigov.css +3 -3
  10. package/package.json +1 -1
  11. package/src/components/admin-layout.css +3 -4
  12. package/src/components/breadcrumbs.css +1 -1
  13. package/src/components/button.css +4 -5
  14. package/src/components/details.css +1 -1
  15. package/src/components/dropdown.css +24 -24
  16. package/src/components/filter.css +1 -1
  17. package/src/components/footer.css +33 -34
  18. package/src/components/form.css +52 -54
  19. package/src/components/full-page-background.css +7 -0
  20. package/src/components/header.css +1 -3
  21. package/src/components/index.css +2 -0
  22. package/src/components/layout.css +17 -17
  23. package/src/components/loader.css +47 -0
  24. package/src/components/misc.css +0 -2
  25. package/src/components/nav.css +24 -30
  26. package/src/components/notification-banner.css +4 -4
  27. package/src/components/pagination.css +11 -10
  28. package/src/components/phase-banner.css +0 -2
  29. package/src/components/radios.css +0 -1
  30. package/src/components/svg-icons.css +0 -3
  31. package/src/components/table.css +6 -16
  32. package/src/components/tabs.css +10 -10
  33. package/src/components/typography.css +11 -12
  34. package/src/pages/dropdown.js +22 -32
  35. package/src/pages/pagination.js +20 -19
  36. package/tailwind.config.js +1 -2
package/src/pages/dropdown.js CHANGED
@@ -43,12 +43,10 @@ export default function Dropdown() {
43
43
  </svg>
44
44
  </summary>
45
45
  <div className="govgr-dropdown__content">
46
- <nav className="govgr-dropdown__nav">
47
- <ul className="govgr-dropdown__nav-list">
48
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Επεξεργασία </a></li>
49
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Μετακίνηση </a></li>
50
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Οριστική διαγραφή</a> </li>
51
- </ul>
46
+ <nav className="govgr-vertical-nav">
47
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
48
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
49
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
52
50
  </nav>
53
51
  </div>
54
52
  </details>
@@ -83,7 +81,7 @@ export default function Dropdown() {
83
81
  <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
84
82
  </svg>
85
83
  </summary>
86
- <div className="govgr-dropdown__content govgr-dropdown__content--list">
84
+ <div className="govgr-dropdown__content">
87
85
  <div className="govgr-field">
88
86
  <label className="govgr-label">
89
87
  <span>Όνομα επιχείρησης</span>
@@ -92,12 +90,10 @@ export default function Dropdown() {
92
90
  </div>
93
91
  <hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible"/>
94
92
 
95
- <nav className="govgr-dropdown__nav">
96
- <ul className="govgr-dropdown__nav-list">
97
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Επεξεργασία </a></li>
98
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Μετακίνηση </a></li>
99
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Οριστική διαγραφή</a> </li>
100
- </ul>
93
+ <nav className="govgr-vertical-nav">
94
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
95
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
96
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
101
97
  </nav>
102
98
 
103
99
  <hr className="govgr-section-break govgr-section-break--s"/>
@@ -121,7 +117,7 @@ export default function Dropdown() {
121
117
  <div className="govgr-dropdown__content">
122
118
  <p className="govgr-body">
123
119
  Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
124
- </p>
120
+ </p>
125
121
  </div>
126
122
  </details>
127
123
 
@@ -190,12 +186,10 @@ export default function Dropdown() {
190
186
  </svg>
191
187
  </summary>
192
188
  <div className="govgr-dropdown__content">
193
- <nav className="govgr-dropdown__nav">
194
- <ul className="govgr-dropdown__nav-list">
195
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Επεξεργασία </a></li>
196
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Μετακίνηση </a></li>
197
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Οριστική διαγραφή</a> </li>
198
- </ul>
189
+ <nav className="govgr-vertical-nav">
190
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
191
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
192
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
199
193
  </nav>
200
194
  </div>
201
195
  </details>
@@ -207,12 +201,10 @@ export default function Dropdown() {
207
201
  </svg>
208
202
  </summary>
209
203
  <div className="govgr-dropdown__content">
210
- <nav className="govgr-dropdown__nav">
211
- <ul className="govgr-dropdown__nav-list">
212
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Επεξεργασία </a></li>
213
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Μετακίνηση </a></li>
214
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Οριστική διαγραφή</a> </li>
215
- </ul>
204
+ <nav className="govgr-vertical-nav">
205
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
206
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
207
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
216
208
  </nav>
217
209
  </div>
218
210
  </details>
@@ -224,12 +216,10 @@ export default function Dropdown() {
224
216
  </svg>
225
217
  </summary>
226
218
  <div className="govgr-dropdown__content">
227
- <nav className="govgr-dropdown__nav">
228
- <ul className="govgr-dropdown__nav-list">
229
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Επεξεργασία </a></li>
230
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Μετακίνηση </a></li>
231
- <li className="govgr-dropdown__nav-item"> <a href="#" className="govgr-link"> Οριστική διαγραφή</a> </li>
232
- </ul>
219
+ <nav className="govgr-vertical-nav">
220
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Επεξεργασία </a>
221
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Μετακίνηση </a>
222
+ <a href="#" className="govgr-link govgr-vertical-nav__item"> Οριστική διαγραφή</a>
233
223
  </nav>
234
224
  </div>
235
225
  </details>
package/src/pages/pagination.js CHANGED
@@ -2,33 +2,35 @@ export default function Pagination() {
2
2
  return (
3
3
  <div class="example">
4
4
  <nav class="govgr-pagination" >
5
- <p class="govgr-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
5
+ <p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
6
6
  <ul class="govgr-pagination__list">
7
7
  <li class="govgr-pagination__item">
8
8
  <a class="govgr-link" href="">
9
9
  <svg
10
10
  aria-hidden="true"
11
- className="govgr-arrow--left"
11
+ className=" govgr-svg-icon govgr-arrow--left"
12
12
  focusable="false"
13
13
  viewBox="0 0 24 24"
14
14
  >
15
15
  <path
16
16
  d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
17
17
  />
18
- </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
18
+ </svg><span class="govgr-visually-hidden"> set of pages</span></a>
19
19
  </li>
20
+
20
21
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">1</a></li>
21
- <li class="govgr-pagination__item govgr-pagination__item--active">2</li>
22
+ <li class="govgr-pagination__item govgr-pagination__item--current">2</li>
22
23
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
23
24
  <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
24
25
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
25
26
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
26
27
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=7">7</a></li>
28
+
27
29
  <li class="govgr-pagination__item">
28
- <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
30
+ <a class="govgr-link" href=""><span class="govgr-visually-hidden"> set of pages</span>
29
31
  <svg
30
32
  aria-hidden="true"
31
- className="govgr-arrow--right"
33
+ className=" govgr-svg-icon govgr-arrow--right"
32
34
  focusable="false"
33
35
  viewBox="0 0 24 24"
34
36
  >
@@ -38,17 +40,16 @@ export default function Pagination() {
38
40
  </svg></a>
39
41
  </li>
40
42
  </ul>
41
- <p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
42
43
  </nav>
43
44
 
44
45
  <nav class="govgr-pagination" >
45
- <p class="govgr-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
46
+ <p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
46
47
  <ul class="govgr-pagination__list">
47
48
  <li class="govgr-pagination__item govgr-pagination__item--inactive">
48
49
  <a class="govgr-link" href="">
49
50
  <svg
50
51
  aria-hidden="true"
51
- className="govgr-arrow--left"
52
+ className=" govgr-svg-icon govgr-arrow--left"
52
53
  focusable="false"
53
54
  viewBox="0 0 24 24"
54
55
  >
@@ -57,7 +58,7 @@ export default function Pagination() {
57
58
  />
58
59
  </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
59
60
  </li>
60
- <li class="govgr-pagination__item govgr-pagination__item--active">1</li>
61
+ <li class="govgr-pagination__item govgr-pagination__item--current">1</li>
61
62
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">2</a></li>
62
63
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
63
64
  <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
@@ -66,7 +67,7 @@ export default function Pagination() {
66
67
  <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
67
68
  <svg
68
69
  aria-hidden="true"
69
- className="govgr-arrow--right"
70
+ className=" govgr-svg-icon govgr-arrow--right"
70
71
  focusable="false"
71
72
  viewBox="0 0 24 24"
72
73
  >
@@ -76,17 +77,17 @@ export default function Pagination() {
76
77
  </svg></a>
77
78
  </li>
78
79
  </ul>
79
- <p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
80
+
80
81
  </nav>
81
82
 
82
83
  <nav class="govgr-pagination" >
83
- <p class="govgr-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
84
+ <p class="govgr-pagination__label">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
84
85
  <ul class="govgr-pagination__list">
85
86
  <li class="govgr-pagination__item govgr-pagination__item">
86
87
  <a class="govgr-link" href="">
87
88
  <svg
88
89
  aria-hidden="true"
89
- className="govgr-arrow--left"
90
+ className=" govgr-svg-icon govgr-arrow--left"
90
91
  focusable="false"
91
92
  viewBox="0 0 24 24"
92
93
  >
@@ -95,18 +96,18 @@ export default function Pagination() {
95
96
  />
96
97
  </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
97
98
  </li>
98
- <li class="govgr-pagination__item">1</li>
99
- <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">2</a></li>
99
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">1</a></li>
100
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=2">2</a></li>
100
101
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
101
102
  <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
102
103
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
103
104
  <li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
104
- <li class="govgr-pagination__item govgr-pagination__item--active">7</li>
105
+ <li class="govgr-pagination__item govgr-pagination__item--current">7</li>
105
106
  <li class="govgr-pagination__item govgr-pagination__item--inactive">
106
107
  <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
107
108
  <svg
108
109
  aria-hidden="true"
109
- className="govgr-arrow--right"
110
+ className=" govgr-svg-icon govgr-arrow--right"
110
111
  focusable="false"
111
112
  viewBox="0 0 24 24"
112
113
  >
@@ -116,7 +117,7 @@ export default function Pagination() {
116
117
  </svg></a>
117
118
  </li>
118
119
  </ul>
119
- <p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
120
+
120
121
  </nav>
121
122
  </div>
122
123
  )
package/tailwind.config.js CHANGED
@@ -37,7 +37,6 @@ module.exports = {
37
37
  width: {
38
38
  '06rem': '0.6rem',
39
39
  'fit': 'fit-content'
40
-
41
40
  },
42
41
  minWidth: {
43
42
  '8': '2rem',
@@ -105,6 +104,6 @@ module.exports = {
105
104
  }
106
105
  },
107
106
  plugins: [
108
- plugin(colorVarsPlugin)
107
+ plugin(colorVarsPlugin)
109
108
  ],
110
109
  };