@digigov/css 2.0.0-rc.7 → 2.0.0-rc.8

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 (20) hide show
  1. package/dist/components.js +1 -1
  2. package/dist/digigov.css +1 -1
  3. package/package.json +2 -2
  4. package/src/components/admin-layout.css +2 -9
  5. package/src/components/autocomplete.css +1 -1
  6. package/src/components/card.css +1 -1
  7. package/src/components/dropdown.css +1 -1
  8. package/src/components/form.css +1 -1
  9. package/src/components/index.css +32 -31
  10. package/src/components/modal.css +12 -3
  11. package/src/components/skeleton.css +84 -0
  12. package/src/components/summary-list.css +10 -0
  13. package/src/components/table.css +5 -0
  14. package/src/components/typography.css +1 -0
  15. package/src/pages/admin-filtering-data.js +0 -160
  16. package/src/pages/admin.js +0 -61
  17. package/src/pages/dropdown.js +0 -249
  18. package/src/pages/form.js +0 -400
  19. package/src/pages/pagination.js +0 -124
  20. package/src/pages/table.js +0 -308
package/src/pages/dropdown.js DELETED
@@ -1,249 +0,0 @@
1
- export default function Dropdown() {
2
- return (
3
- <div>
4
-
5
- <h1 className="ds-heading-xl">Dropdowns</h1>
6
-
7
- <p className="ds-body">
8
- So, let's see some implementations for the dropdown.
9
- </p>
10
- <p className="ds-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="ds-heading-sm">Primary button with arrow icon</h3>
17
-
18
-
19
- <details className="ds-dropdown">
20
- <summary className="ds-dropdown__button ds-btn ds-btn-primary">
21
- Ενέργειες
22
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--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="ds-dropdown__content">
27
- <p className="ds-body">
28
- Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
29
- </p>
30
- </div>
31
- </details>
32
-
33
- <hr className="ds-section-break ds-section-break--md" />
34
- <h4 className="ds-heading-sm">Secondary button with more icon and nav</h4>
35
-
36
- <details className="ds-dropdown">
37
- <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
38
- Ενέργειες
39
- <svg aria-hidden="true" className="ds-svg-icon ds-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="ds-dropdown__content">
46
- <nav className="ds-vertical-nav">
47
- <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
48
- <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
49
- <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
50
- </nav>
51
- </div>
52
- </details>
53
-
54
- <hr className="ds-section-break ds-section-break--md" />
55
- <h3 className="ds-heading-sm">Link with more icon</h3>
56
-
57
- <details className="ds-dropdown">
58
- <summary className="ds-dropdown__button ds-link">
59
- Ενέργειες
60
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
61
- <circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
62
- </svg>
63
- </summary>
64
- <div className="ds-dropdown__content">
65
- <p className="ds-body">
66
- Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
67
- </p>
68
- </div>
69
- </details>
70
-
71
- <hr className="ds-section-break ds-section-break--md" />
72
- <h3 className="ds-heading-md">Secondary button, with rotating arrow</h3>
73
- <p className="ds-body">
74
- We can implement a prop at dropdown__button that adds a rotating arrow to the button, like this:
75
- </p>
76
-
77
- <details className="ds-dropdown">
78
- <summary className="ds-dropdown__button ds-btn ds-btn-secondary ds-dropdown__button--chevron">
79
- Ενέργειες
80
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
81
- <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
82
- </svg>
83
- </summary>
84
- <div className="ds-dropdown__content">
85
- <div className="ds-field">
86
- <label className="ds-label">
87
- <span>Όνομα επιχείρησης</span>
88
- <input className="ds-input" type="text" name="business-name" />
89
- </label>
90
- </div>
91
- <hr className="ds-section-break ds-section-break--sm ds-section-break--visible" />
92
-
93
- <nav className="ds-vertical-nav">
94
- <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
95
- <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
96
- <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
97
- </nav>
98
-
99
- <hr className="ds-section-break ds-section-break--sm" />
100
- <hr className="ds-section-break ds-section-break--sm ds-section-break--visible" />
101
-
102
- <button className="ds-btn ds-btn-primary">Αποθήκευση</button>
103
-
104
- </div>
105
- </details>
106
-
107
- <p className="ds-body">
108
- Also, the content can be a compination of things: inputs, lists, text, buttons.
109
- </p>
110
- <hr className="ds-section-break ds-section-break--md" />
111
- <h4 className="ds-heading-md">Primary button without icon, position UP</h4>
112
-
113
- <details className="ds-dropdown ds-dropdown--up">
114
- <summary className="ds-dropdown__button ds-btn ds-btn-primary">
115
- Ενέργειες
116
- </summary>
117
- <div className="ds-dropdown__content">
118
- <p className="ds-body">
119
- Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
120
- </p>
121
- </div>
122
- </details>
123
-
124
- <h3 className="ds-heading-md">Button groups and dropdown combinations</h3>
125
-
126
- <hr className="ds-section-break ds-section-break--md" />
127
- <h4 className="ds-heading-sm">Links </h4>
128
-
129
- <div className="ds-btn-group">
130
-
131
- <details className="ds-dropdown ds-dropdown--up">
132
- <summary className="ds-dropdown__button ds-link">
133
- Ενέργειες
134
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
135
- <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
136
- </svg>
137
- </summary>
138
- <div className="ds-dropdown__content">
139
- <p className="ds-body">
140
- Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
141
- </p>
142
- </div>
143
- </details>
144
-
145
- <details className="ds-dropdown ds-dropdown--left ds-dropdown--up">
146
- <summary className="ds-dropdown__button ds-link ds-dropdown__button--chevron">
147
- Ενέργειες
148
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
149
- <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
150
- </svg>
151
- </summary>
152
- <div className="ds-dropdown__content">
153
- <p className="ds-body">
154
- Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
155
- </p>
156
- </div>
157
- </details>
158
-
159
- </div>
160
-
161
- <hr className="ds-section-break ds-section-break--md" />
162
- <h3 className="ds-heading-md">A group of buttons and dropdowns with icons and various directions</h3>
163
-
164
- <div className="ds-btn-group">
165
-
166
- <button className="ds-btn ds-btn-secondary">Αποθήκευση</button>
167
-
168
- <details className="ds-dropdown ds-dropdown--up">
169
- <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
170
- Ενέργειες
171
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--arrow--down" focusable="false" viewBox="0 0 24 24">
172
- <path d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z" />
173
- </svg>
174
- </summary>
175
- <div className="ds-dropdown__content">
176
- <p className="ds-body">
177
- Χρειάζεται να γνωρίζουμε τη διεύθυνση κατοικίας σας ώστε να μπορούμε να σας στείλουμε τα έντυπα μέσω ταχυδρομείου. Σε περίπτωση που δεν μπορείτε να παρέχετε μια έγκυρη διεύθυνση κατοικίας, παρακαλούμε επικοινωνήστε μαζί μας.
178
- </p>
179
- </div>
180
- </details>
181
-
182
- <details className="ds-dropdown">
183
- <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
184
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
185
- <circle cx="12" cy="5" r="2" /><circle cx="12" cy="12" r="2" /><circle cx="12" cy="19" r="2" />
186
- </svg>
187
- </summary>
188
- <div className="ds-dropdown__content">
189
- <nav className="ds-vertical-nav">
190
- <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
191
- <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
192
- <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
193
- </nav>
194
- </div>
195
- </details>
196
-
197
- <details className="ds-dropdown ds-dropdown--left ">
198
- <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
199
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--more-vert" focusable="false" viewBox="0 0 24 24">
200
- <rect id="ds-svg-icon--burger__line-1" width="20" height="3.3" /> <rect id="ds-svg-icon--burger__line-2" width="20" height="3.3" /> <rect id="ds-svg-icon--burger__line-3" width="20" height="3.3" />
201
- </svg>
202
- </summary>
203
- <div className="ds-dropdown__content">
204
- <nav className="ds-vertical-nav">
205
- <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
206
- <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
207
- <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
208
- </nav>
209
- </div>
210
- </details>
211
-
212
- <details className="ds-dropdown ds-dropdown--left ds-dropdown--up">
213
- <summary className="ds-dropdown__button ds-btn ds-btn-secondary">
214
- <svg aria-hidden="true" className="ds-svg-icon ds-svg-icon--caret" focusable="false" viewBox="0 0 24 24">
215
- <path d="M22,6H2l10,12L22,6z" />
216
- </svg>
217
- </summary>
218
- <div className="ds-dropdown__content">
219
- <nav className="ds-vertical-nav">
220
- <a href="#" className="ds-link ds-vertical-nav__item"> Επεξεργασία </a>
221
- <a href="#" className="ds-link ds-vertical-nav__item"> Μετακίνηση </a>
222
- <a href="#" className="ds-link ds-vertical-nav__item"> Οριστική διαγραφή</a>
223
- </nav>
224
- </div>
225
- </details>
226
- </div>
227
-
228
- <hr className="ds-section-break ds-section-break--lg" />
229
-
230
- <footer className="ds-footer" role="contentinfo">
231
- <div className="ds-container">
232
- <div className="ds-footer__meta">
233
- <div className="ds-footer__meta-item ds-footer__meta-item--grow">
234
- <div className="ds-footer__content">
235
- <p className="ds-footer__copyright">
236
- Υλοποίηση από το <a href="https://mindigital.gr/" target="_blank" rel="noreferrer noopener" className="ds-link"> Υπουργείο Ψηφιακής Διακυβέρνησης <span className="ds-visually-hidden">(ανοίγει σε καινούρια καρτέλα) </span></a>
237
- </p>
238
- </div>
239
- </div>
240
- <div className="ds-footer__meta-item">
241
- <img className="ds-footer__government-logo" src="/img/government-logo2.svg" alt="government logo" />
242
- </div>
243
- </div>
244
- </div>
245
- </footer>
246
-
247
- </div>
248
- )
249
- }
package/src/pages/form.js DELETED
@@ -1,400 +0,0 @@
1
- import Head from 'next/head';
2
- import Image from 'next/image';
3
-
4
- export default function Home() {
5
- return (
6
- <div class="ds-layout-wrapper">
7
- <div class="ds-top">
8
- <header role="banner" data-module="ds-header" class="ds-header">
9
- <div class="ds-header__container">
10
- <div class="ds-header__content">
11
- <a href="https://www.gov.gr/" class="ds-header-link">
12
- <img src="https://www.gov.gr/gov_gr_logo.svg" class="ds-header-logo" alt="gov.gr logo" />
13
- </a>
14
- <a href="/" class="ds-header-title">
15
- Η Υπηρεσία μου
16
- </a>
17
- </div>
18
- </div>
19
- </header>
20
- </div>
21
- <nav className="ds-nav ds-nav--horizontal">
22
- <ul className="ds-nav__list">
23
- <a className="ds-nav__list-item-link ds-nav__list-item-link--active" href="/"> Αρχική </a>
24
- <a className="ds-nav__list-item-link" href=""> Καταχώρηση φόρμας </a>
25
- <a className="ds-nav__list-item-link" href=""> Νέα</a>
26
- <a className="ds-nav__list-item-link" href=""> Επικοινωνία </a>
27
- </ul>
28
- </nav>
29
- <div className="ds-container">
30
- <div className="ds-main-wrapper">
31
- <div className="ds-grid-column-two-thirds">
32
- <h1 className="ds-heading-xl">Καταχώρηση φόρμας</h1>
33
- <div className="ds-form">
34
- <div className="ds-field">
35
- <fieldset className="ds-fieldset" aria-describedby="radiohint">
36
- <legend className="ds-heading-md ds-fieldset__legend">
37
- Επιλέξτε την απάντηση σας
38
- </legend>
39
- <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
40
- <div className="ds-radios">
41
- <div className="ds-radios__item">
42
- <label className="ds-radios__label">
43
- Ναι
44
- <input className="ds-radios__input" type="radio" name="fav_language" value="ναι" />
45
- </label>
46
- </div>
47
- <div className="ds-radios__item">
48
- <label className="ds-radios__label">
49
- Όχι
50
- <input className="ds-radios__input" type="radio" name="fav_language" value="όχι" />
51
- </label>
52
- </div>
53
- </div>
54
- </fieldset>
55
- </div>
56
- <div className="ds-field ds-field__error">
57
- <fieldset className="ds-fieldset" aria-describedby="radiohint">
58
- <legend className="ds-heading-md ds-fieldset__legend">
59
- Επιλέξτε την απάντηση σας
60
- </legend>
61
- <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
62
- <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
63
- <div className="ds-radios">
64
- <div className="ds-radios__item">
65
- <label className="ds-radios__label">
66
- Ναι
67
- <input className="ds-radios__input" type="radio" name="fav_language" value="ναι" />
68
- </label>
69
- </div>
70
- <div className="ds-radios__item">
71
- <label className="ds-radios__label">
72
- Όχι
73
- <input className="ds-radios__input" type="radio" name="fav_language" value="όχι" />
74
- </label>
75
- </div>
76
- </div>
77
- </fieldset>
78
- </div>
79
- <div className="ds-field">
80
- <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
81
- <legend className="ds-heading-md ds-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
82
- <p className="ds-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
83
- <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
84
- <div className="ds-checkboxes">
85
- <div className="ds-checkboxes__item">
86
- <label className="ds-label ds-checkboxes__label">
87
- Ναι
88
- <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="ναι" />
89
- </label>
90
- </div>
91
- <div className="ds-checkboxes__item">
92
- <label className="ds-label ds-checkboxes__label">
93
- Όχι
94
- <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="όχι" />
95
- </label>
96
- </div>
97
- </div>
98
- </fieldset>
99
- </div>
100
- <div className="ds-field ds-field__error">
101
- <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
102
- <legend className="ds-heading-md ds-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
103
- <p className="ds-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
104
- <div className="ds-checkboxes">
105
- <div className="ds-checkboxes__item">
106
- <label className="ds-label ds-checkboxes__label">
107
- Ναι
108
- <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="ναι" />
109
- </label>
110
- </div>
111
- <div className="ds-checkboxes__item">
112
- <label className="ds-label ds-checkboxes__label">
113
- Όχι
114
- <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="όχι" />
115
- </label>
116
- </div>
117
- </div>
118
- </fieldset>
119
- </div>
120
- <div className="ds-field">
121
- <label className='ds-label'>
122
- <span className="ds-heading-sm">Ερώτηση</span>
123
- <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
124
- <input className="ds-input" type="text" name="fname" />
125
- </label>
126
- </div>
127
- <div className="ds-field ds-field__error">
128
- <label className='ds-label'>
129
- <span className="ds-heading-sm">Ερώτηση</span>
130
- <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
131
- <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
132
- <input className="ds-input ds-error-input" type="text" name="fname" />
133
- </label>
134
- </div>
135
- <div className="ds-field">
136
- <label className='ds-label'>
137
- <span className="ds-heading-sm">Μια ακόμα ερώτηση</span>
138
- <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
139
- <textarea className="ds-textarea" name="ta" rows={5} />
140
- <span className="ds-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
141
- </label>
142
- </div>
143
- <div className="ds-field ds-field__error">
144
- <label className='ds-label'>
145
- <span className="ds-heading-sm">Μια ακόμα ερώτηση</span>
146
- <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
147
- <p className="ds-error-message"> Δεν μας άρεσε η απάντηση, ξαναπροσπαθήστε. </p>
148
- <textarea className="ds-textarea ds-error-input" name="ta" rows={5} />
149
- <span className="ds-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
150
- </label>
151
- </div>
152
- <div className="ds-field">
153
- <fieldset>
154
- <legend class="ds-fieldset__legend ds-heading-lg" ></legend>
155
- <h4 className="ds-fieldset__legend" >Επιλέξτε από την λίστα</h4>
156
- <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
157
- <label className="ds-label">
158
- <select className="ds-select" id="select-list" name="select-list" defaultValue="one">
159
- <option value="one">Ένα</option>
160
- <option value="two">Δύο</option>
161
- <option value="three">Τρία</option>
162
- <option value="four">Τέσσερα</option>
163
- </select>
164
- </label>
165
- </fieldset>
166
- </div>
167
- <div className="ds-field">
168
- <fieldset>
169
- <legend class="ds-fieldset__legend ds-heading-lg" >
170
- Βασικές πληροφορίες
171
- </legend>
172
- <label className="ds-label" >
173
- <span class="ds-heading-sm">Όνομα</span>
174
- <input className="ds-input" type="text" name="fname" />
175
- </label>
176
- <label className="ds-label" >
177
- <span class="ds-heading-sm">Επώνυμο</span>
178
- <input className="ds-input" type="text" name="lname" />
179
- </label>
180
- <label className="ds-label">
181
- <span class="ds-heading-sm">Email</span>
182
- <input className="ds-input" type="email" name="email" />
183
- </label>
184
- <label className="ds-label">
185
- <span class="ds-heading-sm">Ημ/νια γέννησης</span>
186
- <input className="ds-input" type="date" name="birthday" />
187
- </label>
188
- </fieldset>
189
- </div>
190
- <div className="ds-field ds-field__error">
191
- <fieldset>
192
- <legend class="ds-fieldset__legend ds-heading-lg">
193
- Πότε έγινε αυτό;
194
- </legend>
195
- <p className="ds-hint">Για παράδειγμα: 05 11 2020</p>
196
- <p className="ds-error-message" > Τα πεδία πρέπει να είναι αριθμοί. </p>
197
- <div className="ds-date-input">
198
- <div className="ds-date-input__item">
199
- <div className="ds-field">
200
- <label className="ds-label">
201
- Ημέρα
202
- <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" />
203
- </label>
204
- </div>
205
- </div>
206
- <div className="ds-date-input__item">
207
- <div className="ds-field">
208
- <label className="ds-label">
209
- Μήνας
210
- <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
211
- </label>
212
- </div>
213
- </div>
214
- <div className="ds-date-input__item">
215
- <div className="ds-field">
216
- <label className="ds-label">
217
- Έτος
218
- <input className="ds-input ds-input--width-4" type="text" pattern="[0-9]*" inputMode="numeric" name="b-year" autoComplete="bday-year" />
219
- </label>
220
- </div>
221
- </div>
222
- </div>
223
- </fieldset>
224
- </div>
225
- <div className="ds-field">
226
- <label className="ds-label label-file">
227
- Επιλογή αρχείου
228
- <p className="ds-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
229
- <div className="upload-file" >
230
- <input className="ds-file-input" type="file" name="filename" />
231
- </div>
232
- </label>
233
- </div>
234
- <div className="ds-field ds-field__error">
235
- <label className="ds-label label-file">
236
- Επιλογή αρχείου
237
- <p className="ds-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
238
- <div className="upload-file">
239
- <p className="ds-error-message"> Το αρχείο πρέπει να είναι μέχρι 2MB. </p>
240
- <input className="ds-file-input" type="file" name="filename" />
241
- </div>
242
- </label>
243
- </div>
244
- <button className="ds-btn ds-btn-primary">
245
- Συνέχεια
246
- </button>
247
- </div>
248
- <h2 className="ds-heading-xl">Disabled</h2>
249
- <div className="ds-form">
250
- <div className="ds-field">
251
- <fieldset className="ds-fieldset" aria-describedby="radiohint">
252
- <legend className="ds-heading-md ds-fieldset__legend">
253
- Επιλέξτε την απάντηση σας
254
- </legend>
255
- <div className="ds-radios">
256
- <div className="ds-radios__item">
257
- <label className="ds-radios__label">
258
- Ναι
259
- <input className="ds-radios__input" type="radio" name="fav_language" value="ναι" disabled checked />
260
- </label>
261
- </div>
262
- <div className="ds-radios__item">
263
- <label className="ds-radios__label">
264
- Όχι
265
- <input className="ds-radios__input" type="radio" name="fav_language" value="όχι" disabled />
266
- </label>
267
- </div>
268
- </div>
269
- </fieldset>
270
- </div>
271
-
272
- <div className="ds-field">
273
- <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
274
- <legend className="ds-heading-md ds-fieldset__legend">Πώς αισθάνεται αυτή τη στιγμή;</legend>
275
- <p className="ds-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</p>
276
- <div className="ds-checkboxes">
277
- <div className="ds-checkboxes__item">
278
- <label className="ds-label ds-checkboxes__label" >
279
- Ναι
280
- <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="ναι" disabled checked />
281
- </label>
282
- </div>
283
- <div className="ds-checkboxes__item">
284
- <label className="ds-label ds-checkboxes__label">
285
- Όχι
286
- <input className="ds-checkboxes__input" type="checkbox" name="fav_language" value="όχι" disabled />
287
- </label>
288
- </div>
289
- </div>
290
- </fieldset>
291
- </div>
292
-
293
- <div className="ds-field">
294
- <label className='ds-label'>
295
- <span className="ds-heading-sm">Ερώτηση</span>
296
- <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
297
- <input className="ds-input" type="text" name="fname" disabled />
298
- </label>
299
- </div>
300
-
301
- <div className="ds-field">
302
- <label className='ds-label'>
303
- <span className="ds-heading-sm">Μια ακόμα ερώτηση</span>
304
- <p className="ds-hint">Κάποια επεξήγηση εδώ.</p>
305
- <textarea className="ds-textarea" name="ta" rows={5} disabled />
306
- <span className="ds-hint"> Μπορείτε να πληκτρολογήσετε άλλους 200 χαρακτήρες. </span>
307
- </label>
308
- </div>
309
-
310
- <div className="ds-field">
311
- <fieldset>
312
- <legend class="ds-fieldset__legend ds-heading-lg" ></legend>
313
- <h4 className="ds-fieldset__legend" >Επιλέξτε από την λίστα</h4>
314
- <p className="ds-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</p>
315
- <label className="ds-label">
316
- <select className="ds-select" id="select-list" name="select-list" defaultValue="one" disabled>
317
- <option value="one">Ένα</option>
318
- <option value="two">Δύο</option>
319
- <option value="three">Τρία</option>
320
- <option value="four">Τέσσερα</option>
321
- </select>
322
- </label>
323
- </fieldset>
324
- </div>
325
- <div className="ds-field">
326
- <fieldset>
327
- <legend class="ds-fieldset__legend ds-heading-lg" >
328
- Βασικές πληροφορίες
329
- </legend>
330
- <label className="ds-label" >
331
- <span class="ds-heading-sm">Όνομα</span>
332
- <input className="ds-input" type="text" name="fname" disabled />
333
- </label>
334
- <label className="ds-label" >
335
- <span class="ds-heading-sm">Επώνυμο</span>
336
- <input className="ds-input" type="text" name="lname" />
337
- </label>
338
- <label className="ds-label">
339
- <span class="ds-heading-sm">Email</span>
340
- <input className="ds-input" type="email" name="email" disabled value="test@test.com" />
341
- </label>
342
- <label className="ds-label">
343
- <span class="ds-heading-sm">Ημ/νια γέννησης</span>
344
- <input className="ds-input" type="date" name="birthday" disabled />
345
- </label>
346
- </fieldset>
347
- </div>
348
- <div className="ds-field">
349
- <fieldset>
350
- <legend class="ds-fieldset__legend ds-heading-lg">
351
- Πότε έγινε αυτό;
352
- </legend>
353
- <div className="ds-date-input">
354
- <div className="ds-date-input__item">
355
- <div className="ds-field">
356
- <label className="ds-label">
357
- Ημέρα
358
- <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-day" autoComplete="bday-day" disabled />
359
- </label>
360
- </div>
361
- </div>
362
- <div className="ds-date-input__item">
363
- <div className="ds-field">
364
- <label className="ds-label">
365
- Μήνας
366
- <input className="ds-input ds-input--width-2" type="text" pattern="[0-9]*" inputMode="numeric" name="b-month" autoComplete="bday-month" />
367
- </label>
368
- </div>
369
- </div>
370
- <div className="ds-date-input__item">
371
- <div className="ds-field">
372
- <label className="ds-label">
373
- Έτος
374
- <input className="ds-input ds-input--width-4" type="text" pattern="[0-9]*" inputMode="numeric" name="b-year" autoComplete="bday-year" disabled value="2022" />
375
- </label>
376
- </div>
377
- </div>
378
- </div>
379
- </fieldset>
380
- </div>
381
- <div className="ds-field">
382
- <label className="ds-label label-file">
383
- Επιλογή αρχείου
384
- <p className="ds-hint"> Ανεβάστε το αρχείο που χρειάζεται.</p>
385
- <div className="upload-file" >
386
- <input className="ds-file-input" type="file" name="filename" disabled />
387
- </div>
388
- </label>
389
- </div>
390
-
391
- <button className="ds-btn ds-btn-primary">
392
- Συνέχεια
393
- </button>
394
- </div>
395
- </div>
396
- </div>
397
- </div>
398
- </div >
399
- );
400
- }