@digigov/css 0.13.1 → 0.16.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 (41) hide show
  1. package/CHANGELOG.json +59 -0
  2. package/CHANGELOG.md +28 -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 +2 -2
  11. package/src/components/accordion.css +1 -1
  12. package/src/components/admin-layout.css +3 -4
  13. package/src/components/breadcrumbs.css +1 -1
  14. package/src/components/button.css +4 -5
  15. package/src/components/details.css +1 -1
  16. package/src/components/drawer.css +28 -0
  17. package/src/components/dropdown.css +4 -4
  18. package/src/components/filter.css +1 -4
  19. package/src/components/footer.css +33 -34
  20. package/src/components/form.css +52 -54
  21. package/src/components/full-page-background.css +7 -0
  22. package/src/components/header.css +3 -4
  23. package/src/components/index.css +3 -0
  24. package/src/components/layout.css +17 -26
  25. package/src/components/loader.css +47 -0
  26. package/src/components/misc.css +1 -20
  27. package/src/components/modal.css +1 -1
  28. package/src/components/nav.css +24 -30
  29. package/src/components/notification-banner.css +4 -4
  30. package/src/components/pagination.css +11 -10
  31. package/src/components/phase-banner.css +0 -2
  32. package/src/components/radios.css +0 -1
  33. package/src/components/svg-icons.css +18 -4
  34. package/src/components/table.css +6 -16
  35. package/src/components/tabs.css +10 -11
  36. package/src/components/typography.css +17 -48
  37. package/src/pages/index.js +245 -317
  38. package/src/pages/pagination.js +20 -19
  39. package/src/utilities/index.css +1 -1
  40. package/src/utilities/utilities.css +1 -1
  41. package/tailwind.config.js +3 -35
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/src/utilities/index.css CHANGED
@@ -5,7 +5,7 @@
5
5
  @apply col-span-2;
6
6
  }
7
7
  .govgr-grid-column-one-third {
8
- @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit-content;
8
+ @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit;
9
9
  }
10
10
  .govgr-grid {
11
11
  @apply grid grid-cols-12;
package/src/utilities/utilities.css CHANGED
@@ -7,7 +7,7 @@
7
7
  @apply col-span-2;
8
8
  }
9
9
  .govgr-grid-column-one-third {
10
- @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit-content;
10
+ @apply col-span-1 flex flex-wrap flex-col md:sticky md:top-8 h-fit;
11
11
  }
12
12
  .govgr-grid {
13
13
  @apply grid md:grid-cols-12 grid-cols-1;
package/tailwind.config.js CHANGED
@@ -29,22 +29,14 @@ module.exports = {
29
29
  sans: ['Roboto', ...defaultTheme.fontFamily.sans]
30
30
  },
31
31
  extend: {
32
-
33
32
  height: {
34
- 'fit-content': 'fit-content',
35
- '06rem': '0.6rem'
33
+ 'fit': 'fit-content',
36
34
  },
37
35
  width: {
38
- '06rem': '0.6rem',
39
- 'fit': 'fit-content'
40
-
36
+ 'fit': 'fit-content',
41
37
  },
42
38
  minWidth: {
43
- '8': '2rem',
44
39
  '10': '2.5rem',
45
- '12': '3rem',
46
- '32': '8rem',
47
- '64': '16rem',
48
40
  },
49
41
  minHeight: {
50
42
  '4': '1rem',
@@ -54,39 +46,17 @@ module.exports = {
54
46
  '12': '3rem',
55
47
  '14': '3.5rem',
56
48
  },
57
- maxWidth: {
58
- '1/4': '25%',
59
- '1/2': '50%',
60
- '1/3': '33.332%',
61
- 'col2': 'calc((2 / 12) * 100)%',
62
- 'col3': '25%',
63
- 'col7': 'calc((7 / 12) * 100)%'
64
- },
65
49
  borderWidth: {
66
- '2_5': '2.5px',
67
50
  '3': '3px',
68
51
  '5': '5px',
69
52
  '6': '6px',
70
53
  },
71
54
  flexGrow: {
72
55
  '2': '2',
73
- '3': '3',
74
- '4': '4',
75
- '5': '5',
76
- '6': '6',
77
- '7': '7',
78
- '8': '8',
79
- '9': '9',
80
- '10': '10',
81
- '11': '11',
82
- '12': '12',
83
56
  },
84
57
  zIndex: {
85
58
  '/1': -1,
86
59
  },
87
- textDecoration: {
88
- 'dotted': 'dotted',
89
- },
90
60
  opacity: {
91
61
  '85': '0.85',
92
62
  },
@@ -94,8 +64,6 @@ module.exports = {
94
64
  '15': '3.75rem',
95
65
  }
96
66
  },
97
-
98
-
99
67
  },
100
68
  variants: {
101
69
  extend: {
@@ -105,6 +73,6 @@ module.exports = {
105
73
  }
106
74
  },
107
75
  plugins: [
108
- plugin(colorVarsPlugin)
76
+ plugin(colorVarsPlugin)
109
77
  ],
110
78
  };