@digigov/css 0.9.0 → 0.12.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 (18) hide show
  1. package/CHANGELOG.json +46 -0
  2. package/CHANGELOG.md +30 -1
  3. package/dist/base/index.css +2 -2
  4. package/dist/base.css +2 -2
  5. package/dist/components.css +1 -1
  6. package/dist/components.js +1 -1
  7. package/dist/digigov.css +3 -3
  8. package/package.json +1 -1
  9. package/src/components/accordion.css +27 -23
  10. package/src/components/footer.css +4 -5
  11. package/src/components/header.css +2 -5
  12. package/src/components/index.css +1 -0
  13. package/src/components/nav.css +17 -9
  14. package/src/components/pagination.css +31 -0
  15. package/src/components/phase-banner.css +4 -1
  16. package/src/components/svg-icons.css +1 -1
  17. package/src/components/typography.css +1 -1
  18. package/src/pages/pagination.js +123 -0
package/src/pages/pagination.js ADDED
@@ -0,0 +1,123 @@
1
+ export default function Pagination() {
2
+ return (
3
+ <div class="example">
4
+ <nav class="govgr-pagination" >
5
+ <p class="govgr-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
6
+ <ul class="govgr-pagination__list">
7
+ <li class="govgr-pagination__item">
8
+ <a class="govgr-link" href="">
9
+ <svg
10
+ aria-hidden="true"
11
+ className="govgr-arrow--left"
12
+ focusable="false"
13
+ viewBox="0 0 24 24"
14
+ >
15
+ <path
16
+ d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
17
+ />
18
+ </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
19
+ </li>
20
+ <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"><a class="govgr-link" href="/page=3">3</a></li>
23
+ <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
24
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
25
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=6">6</a></li>
26
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=7">7</a></li>
27
+ <li class="govgr-pagination__item">
28
+ <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
29
+ <svg
30
+ aria-hidden="true"
31
+ className="govgr-arrow--right"
32
+ focusable="false"
33
+ viewBox="0 0 24 24"
34
+ >
35
+ <path
36
+ d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
37
+ />
38
+ </svg></a>
39
+ </li>
40
+ </ul>
41
+ <p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>300000000000</b> pages</p>
42
+ </nav>
43
+
44
+ <nav class="govgr-pagination" >
45
+ <p class="govgr-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
46
+ <ul class="govgr-pagination__list">
47
+ <li class="govgr-pagination__item govgr-pagination__item--inactive">
48
+ <a class="govgr-link" href="">
49
+ <svg
50
+ aria-hidden="true"
51
+ className="govgr-arrow--left"
52
+ focusable="false"
53
+ viewBox="0 0 24 24"
54
+ >
55
+ <path
56
+ d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
57
+ />
58
+ </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
59
+ </li>
60
+ <li class="govgr-pagination__item govgr-pagination__item--active">1</li>
61
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=1">2</a></li>
62
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
63
+ <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
64
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
65
+ <li class="govgr-pagination__item">
66
+ <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
67
+ <svg
68
+ aria-hidden="true"
69
+ className="govgr-arrow--right"
70
+ focusable="false"
71
+ viewBox="0 0 24 24"
72
+ >
73
+ <path
74
+ d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
75
+ />
76
+ </svg></a>
77
+ </li>
78
+ </ul>
79
+ <p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
80
+ </nav>
81
+
82
+ <nav class="govgr-pagination" >
83
+ <p class="govgr-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
84
+ <ul class="govgr-pagination__list">
85
+ <li class="govgr-pagination__item govgr-pagination__item">
86
+ <a class="govgr-link" href="">
87
+ <svg
88
+ aria-hidden="true"
89
+ className="govgr-arrow--left"
90
+ focusable="false"
91
+ viewBox="0 0 24 24"
92
+ >
93
+ <path
94
+ d="M14.8,22l2.4-2.3L9.6,12l7.6-7.6L14.8,2l-10,10L14.8,22z"
95
+ />
96
+ </svg>Previous<span class="govgr-visually-hidden"> set of pages</span></a>
97
+ </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>
100
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=3">3</a></li>
101
+ <li class="govgr-pagination__item govgr-pagination__item--dots">...</li>
102
+ <li class="govgr-pagination__item"><a class="govgr-link" href="/page=5">5</a></li>
103
+ <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--inactive">
106
+ <a class="govgr-link" href="">Next<span class="govgr-visually-hidden"> set of pages</span>
107
+ <svg
108
+ aria-hidden="true"
109
+ className="govgr-arrow--right"
110
+ focusable="false"
111
+ viewBox="0 0 24 24"
112
+ >
113
+ <path
114
+ d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
115
+ />
116
+ </svg></a>
117
+ </li>
118
+ </ul>
119
+ <p class="govgr-pagination__results">Showing <b>10</b> to <b>20</b> of <b>30</b> pages</p>
120
+ </nav>
121
+ </div>
122
+ )
123
+ }