@digigov/css 0.12.0 → 0.13.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.
- package/CHANGELOG.json +17 -0
- package/CHANGELOG.md +12 -1
- package/colors/color-values.js +2 -0
- package/dist/base/index.css +3 -3
- package/dist/base.css +3 -3
- package/dist/base.js +1 -1
- package/dist/components.css +1 -1
- package/dist/components.js +1 -1
- package/dist/digigov.css +3 -3
- package/package.json +1 -1
- package/src/base/index.css +4 -1
- package/src/components/accordion.css +1 -1
- package/src/components/button.css +31 -35
- package/src/components/dropdown.css +83 -0
- package/src/components/form.css +1 -1
- package/src/components/index.css +1 -0
- package/src/components/layout.css +4 -1
- package/src/components/svg-icons.css +33 -0
- package/src/components/typography.css +2 -1
- package/src/pages/dropdown.js +259 -0
- package/tailwind.config.js +10 -1
|
@@ -92,7 +92,8 @@
|
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
.govgr-link {
|
|
95
|
-
@apply text-link hover:text-link-hover focus:text-link-active underline items-center;
|
|
95
|
+
@apply text-link hover:text-link-hover focus:text-link-active underline items-center cursor-pointer flex gap-2;
|
|
96
|
+
|
|
96
97
|
.right-arrow::after {
|
|
97
98
|
content: "";
|
|
98
99
|
@apply w-06rem h-06rem bg-primary rounded-xl border-white block border-t-2_5 border-r-2_5 ml-3 transform rotate-45;
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
export default function Dropdown() {
|
|
2
|
+
return (
|
|
3
|
+
<div className="example">
|
|
4
|
+
|
|
5
|
+
<h1 className="govgr-heading-xl">Dropdowns</h1>
|
|
6
|
+
|
|
7
|
+
<p className="govgr-body">
|
|
8
|
+
So, let's see some implementations for the dropdown.
|
|
9
|
+
</p>
|
|
10
|
+
<p className="govgr-body">
|
|
11
|
+
First, we can add to the dropdown__button our button or link classes. Also, we can add svg icon after the text of the button.
|
|
12
|
+
Some examples:
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
<h3 className="govgr-heading-s">Primary button with arrow icon</h3>
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<details className="govgr-dropdown">
|
|
20
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-primary">
|
|
21
|
+
Ενέργειες
|
|
22
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
23
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
24
|
+
</svg>
|
|
25
|
+
</summary>
|
|
26
|
+
<div className="govgr-dropdown__content">
|
|
27
|
+
<p className="govgr-body">
|
|
28
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
29
|
+
</p>
|
|
30
|
+
</div>
|
|
31
|
+
</details>
|
|
32
|
+
|
|
33
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
34
|
+
<h4 className="govgr-heading-s">Secondary button with more icon and nav</h4>
|
|
35
|
+
|
|
36
|
+
<details className="govgr-dropdown">
|
|
37
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
38
|
+
Ενέργειες
|
|
39
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
40
|
+
<circle cx="12" cy="5" r="2" />
|
|
41
|
+
<circle cx="12" cy="12" r="2" />
|
|
42
|
+
<circle cx="12" cy="19" r="2" />
|
|
43
|
+
</svg>
|
|
44
|
+
</summary>
|
|
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>
|
|
52
|
+
</nav>
|
|
53
|
+
</div>
|
|
54
|
+
</details>
|
|
55
|
+
|
|
56
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
57
|
+
<h3 className="govgr-heading-s">Link with more icon</h3>
|
|
58
|
+
|
|
59
|
+
<details className="govgr-dropdown">
|
|
60
|
+
<summary className="govgr-dropdown__button govgr-link">
|
|
61
|
+
Ενέργειες
|
|
62
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
63
|
+
<circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
|
|
64
|
+
</svg>
|
|
65
|
+
</summary>
|
|
66
|
+
<div className="govgr-dropdown__content">
|
|
67
|
+
<p className="govgr-body">
|
|
68
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
69
|
+
</p>
|
|
70
|
+
</div>
|
|
71
|
+
</details>
|
|
72
|
+
|
|
73
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
74
|
+
<h3 className="govgr-heading-m">Secondary button, with rotating arrow</h3>
|
|
75
|
+
<p className="govgr-body">
|
|
76
|
+
We can implement a prop at dropdown__button that adds a rotating arrow to the button, like this:
|
|
77
|
+
</p>
|
|
78
|
+
|
|
79
|
+
<details className="govgr-dropdown">
|
|
80
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary govgr-dropdown__button--arrow">
|
|
81
|
+
Ενέργειες
|
|
82
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
83
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
84
|
+
</svg>
|
|
85
|
+
</summary>
|
|
86
|
+
<div className="govgr-dropdown__content govgr-dropdown__content--list">
|
|
87
|
+
<div className="govgr-field">
|
|
88
|
+
<label className="govgr-label">
|
|
89
|
+
<span>Όνομα επιχείρησης</span>
|
|
90
|
+
<input className="govgr-input" type="text" name="business-name" />
|
|
91
|
+
</label>
|
|
92
|
+
</div>
|
|
93
|
+
<hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible"/>
|
|
94
|
+
|
|
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>
|
|
101
|
+
</nav>
|
|
102
|
+
|
|
103
|
+
<hr className="govgr-section-break govgr-section-break--s"/>
|
|
104
|
+
<hr className="govgr-section-break govgr-section-break--s govgr-section-break--visible"/>
|
|
105
|
+
|
|
106
|
+
<button className="govgr-btn govgr-btn-primary">Αποθήκευση</button>
|
|
107
|
+
|
|
108
|
+
</div>
|
|
109
|
+
</details>
|
|
110
|
+
|
|
111
|
+
<p className="govgr-body">
|
|
112
|
+
Also, the content can be a compination of things: inputs, lists, text, buttons.
|
|
113
|
+
</p>
|
|
114
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
115
|
+
<h4 className="govgr-heading-m">Primary button without icon, position UP</h4>
|
|
116
|
+
|
|
117
|
+
<details className="govgr-dropdown govgr-dropdown--up">
|
|
118
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-primary">
|
|
119
|
+
Ενέργειες
|
|
120
|
+
</summary>
|
|
121
|
+
<div className="govgr-dropdown__content">
|
|
122
|
+
<p className="govgr-body">
|
|
123
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
124
|
+
</p>
|
|
125
|
+
</div>
|
|
126
|
+
</details>
|
|
127
|
+
|
|
128
|
+
<h3 className="govgr-heading-m">Button groups and dropdown combinations</h3>
|
|
129
|
+
|
|
130
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
131
|
+
<h4 className="govgr-heading-s">Links </h4>
|
|
132
|
+
|
|
133
|
+
<div className="govgr-button-group">
|
|
134
|
+
|
|
135
|
+
<details className="govgr-dropdown govgr-dropdown--up">
|
|
136
|
+
<summary className="govgr-dropdown__button govgr-link">
|
|
137
|
+
Ενέργειες
|
|
138
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
139
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
140
|
+
</svg>
|
|
141
|
+
</summary>
|
|
142
|
+
<div className="govgr-dropdown__content">
|
|
143
|
+
<p className="govgr-body">
|
|
144
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
145
|
+
</p>
|
|
146
|
+
</div>
|
|
147
|
+
</details>
|
|
148
|
+
|
|
149
|
+
<details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
|
|
150
|
+
<summary className="govgr-dropdown__button govgr-link govgr-dropdown__button--arrow">
|
|
151
|
+
Ενέργειες
|
|
152
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
153
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
154
|
+
</svg>
|
|
155
|
+
</summary>
|
|
156
|
+
<div className="govgr-dropdown__content">
|
|
157
|
+
<p className="govgr-body">
|
|
158
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
159
|
+
</p>
|
|
160
|
+
</div>
|
|
161
|
+
</details>
|
|
162
|
+
|
|
163
|
+
</div>
|
|
164
|
+
|
|
165
|
+
<hr className="govgr-section-break govgr-section-break--m"/>
|
|
166
|
+
<h3 className="govgr-heading-m">A group of buttons and dropdowns with icons and various directions</h3>
|
|
167
|
+
|
|
168
|
+
<div className="govgr-button-group">
|
|
169
|
+
|
|
170
|
+
<button className="govgr-btn govgr-btn-secondary">Αποθήκευση</button>
|
|
171
|
+
|
|
172
|
+
<details className="govgr-dropdown govgr-dropdown--up">
|
|
173
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
174
|
+
Ενέργειες
|
|
175
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-arrow--down" focusable="false" viewBox="0 0 24 24">
|
|
176
|
+
<path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"/>
|
|
177
|
+
</svg>
|
|
178
|
+
</summary>
|
|
179
|
+
<div className="govgr-dropdown__content">
|
|
180
|
+
<p className="govgr-body">
|
|
181
|
+
Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
|
|
182
|
+
</p>
|
|
183
|
+
</div>
|
|
184
|
+
</details>
|
|
185
|
+
|
|
186
|
+
<details className="govgr-dropdown">
|
|
187
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
188
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
189
|
+
<circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
|
|
190
|
+
</svg>
|
|
191
|
+
</summary>
|
|
192
|
+
<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>
|
|
199
|
+
</nav>
|
|
200
|
+
</div>
|
|
201
|
+
</details>
|
|
202
|
+
|
|
203
|
+
<details className="govgr-dropdown govgr-dropdown--left ">
|
|
204
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
205
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
|
|
206
|
+
<rect id="govgr-burger-icon__line-1" width="20" height="3.3" /> <rect id="govgr-burger-icon__line-2" width="20" height="3.3" /> <rect id="govgr-burger-icon__line-3" width="20" height="3.3" />
|
|
207
|
+
</svg>
|
|
208
|
+
</summary>
|
|
209
|
+
<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>
|
|
216
|
+
</nav>
|
|
217
|
+
</div>
|
|
218
|
+
</details>
|
|
219
|
+
|
|
220
|
+
<details className="govgr-dropdown govgr-dropdown--left govgr-dropdown--up">
|
|
221
|
+
<summary className="govgr-dropdown__button govgr-btn govgr-btn-secondary">
|
|
222
|
+
<svg aria-hidden="true" className="govgr-svg-icon govgr-svg-icon--caret" focusable="false" viewBox="0 0 24 24">
|
|
223
|
+
<path d="M22,6H2l10,12L22,6z" />
|
|
224
|
+
</svg>
|
|
225
|
+
</summary>
|
|
226
|
+
<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>
|
|
233
|
+
</nav>
|
|
234
|
+
</div>
|
|
235
|
+
</details>
|
|
236
|
+
</div>
|
|
237
|
+
|
|
238
|
+
<hr className="govgr-section-break govgr-section-break--l"/>
|
|
239
|
+
|
|
240
|
+
<footer className="govgr-footer" role="contentinfo">
|
|
241
|
+
<div className="govgr-width-container">
|
|
242
|
+
<div className="govgr-footer__meta">
|
|
243
|
+
<div className="govgr-footer__meta-item govgr-footer__meta-item--grow">
|
|
244
|
+
<div className="govgr-footer__content">
|
|
245
|
+
<p className="govgr-footer__licence-description">
|
|
246
|
+
© Copyright 2021 - Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="govgr-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="govgr-visually-hidden">(ανοίγει σε καινούρια καρτέλα) </span></a>
|
|
247
|
+
</p>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
<div className="govgr-footer__meta-item">
|
|
251
|
+
<img className="govgr-footer__government-logo" src="/img/government-logo2.svg" />
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</footer>
|
|
256
|
+
|
|
257
|
+
</div>
|
|
258
|
+
)
|
|
259
|
+
}
|
package/tailwind.config.js
CHANGED
|
@@ -35,7 +35,8 @@ module.exports = {
|
|
|
35
35
|
'06rem': '0.6rem'
|
|
36
36
|
},
|
|
37
37
|
width: {
|
|
38
|
-
'06rem': '0.6rem'
|
|
38
|
+
'06rem': '0.6rem',
|
|
39
|
+
'fit': 'fit-content'
|
|
39
40
|
|
|
40
41
|
},
|
|
41
42
|
minWidth: {
|
|
@@ -46,7 +47,12 @@ module.exports = {
|
|
|
46
47
|
'64': '16rem',
|
|
47
48
|
},
|
|
48
49
|
minHeight: {
|
|
50
|
+
'4': '1rem',
|
|
51
|
+
'6': '1.5rem',
|
|
52
|
+
'8': '2rem',
|
|
49
53
|
'10': '2.5rem',
|
|
54
|
+
'12': '3rem',
|
|
55
|
+
'14': '3.5rem',
|
|
50
56
|
},
|
|
51
57
|
maxWidth: {
|
|
52
58
|
'1/4': '25%',
|
|
@@ -83,6 +89,9 @@ module.exports = {
|
|
|
83
89
|
},
|
|
84
90
|
opacity: {
|
|
85
91
|
'85': '0.85',
|
|
92
|
+
},
|
|
93
|
+
margin: {
|
|
94
|
+
'15': '3.75rem',
|
|
86
95
|
}
|
|
87
96
|
},
|
|
88
97
|
|