@orangesk/orange-design-system 2.0.0-beta.7 → 2.0.0-beta.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 (43) hide show
  1. package/build/components/index.js +4 -4
  2. package/build/components/index.js.map +1 -1
  3. package/build/components/tsconfig.tsbuildinfo +1 -1
  4. package/build/components/types/index.d.ts +2 -2
  5. package/build/components/types/src/components/AnchorNavigation/AnchorNavigation.d.ts +1 -1
  6. package/build/components/types/src/components/AnchorNavigation/AnchorNavigation.static.d.ts +19 -17
  7. package/build/components/types/src/components/Card/Card.d.ts +1 -1
  8. package/build/components/types/src/components/Megamenu/constants.d.ts +2 -0
  9. package/build/components/types/src/scripts/index.d.ts +5 -0
  10. package/build/lib/after-components.css +1 -1
  11. package/build/lib/after-components.css.map +1 -1
  12. package/build/lib/before-components.css +1 -1
  13. package/build/lib/before-components.css.map +1 -1
  14. package/build/lib/components.css +1 -1
  15. package/build/lib/components.css.map +1 -1
  16. package/build/lib/megamenu.css +1 -1
  17. package/build/lib/megamenu.css.map +1 -1
  18. package/build/lib/megamenu.js +1 -1
  19. package/build/lib/megamenu.js.map +1 -1
  20. package/build/lib/scripts.js +4 -4
  21. package/build/lib/scripts.js.map +1 -1
  22. package/build/lib/style.css +1 -1
  23. package/build/lib/style.css.map +1 -1
  24. package/build/lib/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +10 -10
  26. package/src/components/AnchorNavigation/AnchorNavigation.static.ts +253 -73
  27. package/src/components/AnchorNavigation/AnchorNavigation.tsx +31 -24
  28. package/src/components/AnchorNavigation/styles/mixins.scss +14 -17
  29. package/src/components/AnchorNavigation/tests/AnchorNavigation.conformance.test.js +67 -0
  30. package/src/components/AnchorNavigation/tests/AnchorNavigation.unit.test.js +163 -0
  31. package/src/components/BlockAction/styles/mixins.scss +0 -6
  32. package/src/components/Card/Card.tsx +1 -0
  33. package/src/components/Link/styles/style.scss +1 -1
  34. package/src/components/Link/tests/Link.conformance.test.js +5 -20
  35. package/src/components/Link/tests/Link.unit.test.js +1 -10
  36. package/src/components/Megamenu/Megamenu.static.ts +2 -0
  37. package/src/components/Megamenu/Megamenu.tsx +671 -665
  38. package/src/components/Megamenu/MegamenuBlog.tsx +187 -183
  39. package/src/components/Megamenu/constants.ts +2 -0
  40. package/src/components/Megamenu/styles/mixins.scss +30 -1
  41. package/src/components/Megamenu/styles/style.scss +8 -0
  42. package/src/styles/base/globals.scss +18 -0
  43. package/src/styles/utilities/color.scss +4 -0
package/src/components/Megamenu/Megamenu.tsx CHANGED
@@ -41,537 +41,115 @@ import {
41
41
  CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
42
42
  CLASS_NAV_SPACE_SMALL,
43
43
  CLASS_NAV_CART_ICON,
44
+ CLASS_SPACER,
44
45
  } from "./constants";
45
46
 
46
47
  export const Megamenu = ({ className }: any) => {
47
48
  return (
48
- <nav
49
- className={cx(CLASS_ROOT, className)}
50
- data-megamenu
51
- aria-label="Main navigation"
52
- >
53
- <div
54
- className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
55
- data-hide-when-sticky="true"
49
+ <header>
50
+ <nav
51
+ className={cx(CLASS_ROOT, className)}
52
+ data-megamenu
53
+ aria-label="Main navigation"
56
54
  >
57
- <div className={CLASS_CONTAINER}>
58
- <h2 id="top-menu-title" className="sr-only">
59
- Top menu
60
- </h2>
61
- <ul
62
- className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
63
- aria-labelledby="top-menu-title"
64
- >
65
- <li className={CLASS_NAV_ITEM}>
66
- <a
67
- href="#"
68
- className={cx(CLASS_NAV_LINK, "is-active")}
69
- aria-current="page"
70
- >
71
- Pre vás
72
- </a>
73
- </li>
74
- <li className={CLASS_NAV_ITEM}>
75
- <a href="#" className={CLASS_NAV_LINK}>
76
- Pre biznis
77
- </a>
78
- </li>
79
-
80
- <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
81
-
82
- <li className={CLASS_NAV_ITEM}>
83
- <a href="#" className={CLASS_NAV_LINK}>
84
- <MegamenuIcon
85
- name="call"
86
- width={20}
87
- height={20}
88
- className={CLASS_NAV_ICON}
89
- aria-hidden="true"
90
- />
91
- Kontakt
92
- </a>
93
- </li>
94
- </ul>
95
- </div>
96
- </div>
97
-
98
- <div className={CLASS_MAIN}>
99
- <div className={CLASS_CONTAINER}>
100
- <h2 id="menu-title" className="sr-only">
101
- Hlavné menu
102
- </h2>
103
- <ul className={CLASS_NAV} aria-labelledby="menu-title">
104
- <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
105
- <a
106
- href="#"
107
- className={CLASS_NAV_LOGO}
108
- aria-label="Domovská stránka"
109
- >
110
- <svg
111
- viewBox="0 0 40 40"
112
- fill="none"
113
- xmlns="http://www.w3.org/2000/svg"
114
- aria-hidden="true"
115
- >
116
- <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
117
- <path
118
- d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
119
- fill="white"
120
- />
121
- </svg>
122
- </a>
123
- </li>
124
- <li
125
- className={cx(
126
- CLASS_NAV_ITEM,
127
- CLASS_NAV_ITEM_MAIN,
128
- CLASS_HIDE_MD_DOWN,
129
- )}
55
+ <div
56
+ className={cx(CLASS_TOP, CLASS_HIDE_MD_DOWN)}
57
+ data-hide-when-sticky="true"
58
+ >
59
+ <div className={CLASS_CONTAINER}>
60
+ <h2 id="top-menu-title" className="sr-only">
61
+ Top menu
62
+ </h2>
63
+ <ul
64
+ className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
65
+ aria-labelledby="top-menu-title"
130
66
  >
131
- <button
132
- type="button"
133
- className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
134
- aria-controls="megamenu-volania"
135
- aria-expanded="false"
136
- aria-haspopup="true"
137
- >
138
- Volania
139
- </button>
140
- <div className={CLASS_NAV_DROPDOWN} id="megamenu-volania">
141
- <div className={CLASS_CONTAINER}>
142
- <div className={CLASS_GRID}>
143
- <div className={cx(CLASS_CARD, "is-highlighted")}>
144
- <h3 id="featured-services" className="sr-only">
145
- Odporúčané služby
146
- </h3>
147
- <ul
148
- className={CLASS_SUBNAV}
149
- role="group"
150
- aria-labelledby="featured-services"
151
- >
152
- <li className={CLASS_SUBNAV_ITEM}>
153
- <a href="#" className={CLASS_TEXT_LARGE}>
154
- Internet na doma
155
- </a>
156
- </li>
157
- <li className={CLASS_SUBNAV_ITEM}>
158
- <a href="#" className={CLASS_TEXT_LARGE}>
159
- Mobilné paušály
160
- </a>
161
- </li>
162
- <li className={CLASS_SUBNAV_ITEM}>
163
- <a href="#" className={CLASS_TEXT_LARGE}>
164
- Televízia
165
- </a>
166
- </li>
167
- <li className={CLASS_SUBNAV_ITEM}>
168
- <a href="#" className={CLASS_TEXT_LARGE}>
169
- Internet + TV
170
- </a>
171
- </li>
172
- </ul>
173
- </div>
174
-
175
- <div className={CLASS_CARD}>
176
- <h3 id="pausaly-heading">Paušály</h3>
177
- <ul
178
- className={CLASS_SUBNAV}
179
- role="group"
180
- aria-labelledby="pausaly-heading"
181
- >
182
- <li className={CLASS_SUBNAV_ITEM}>
183
- <a href="#">Prehľad paušálov</a>
184
- </li>
185
- <li className={CLASS_SUBNAV_ITEM}>
186
- <a href="#">Chcem nové číslo</a>
187
- </li>
188
- <li className={CLASS_SUBNAV_ITEM}>
189
- <a href="#">Yoxo paušál</a>
190
- </li>
191
- </ul>
192
-
193
- <h3 id="volania-s-kreditom-heading">
194
- Volania s kreditom
195
- </h3>
196
- <ul
197
- className={CLASS_SUBNAV}
198
- role="group"
199
- aria-labelledby="volania-s-kreditom-heading"
200
- >
201
- <li className={CLASS_SUBNAV_ITEM}>
202
- <a href="#">Prima Voľba</a>
203
- </li>
204
- <li className={CLASS_SUBNAV_ITEM}>
205
- <a href="#">Prima Kids</a>
206
- </li>
207
- <li className={CLASS_SUBNAV_ITEM}>
208
- <a href="#">FunFón</a>
209
- </li>
210
- </ul>
211
-
212
- <h3 id="zahranicie-heading">Zahraničie</h3>
213
- <ul
214
- className={CLASS_SUBNAV}
215
- role="group"
216
- aria-labelledby="zahranicie-heading"
217
- >
218
- <li className={CLASS_SUBNAV_ITEM}>
219
- <a href="#">Roaming</a>
220
- </li>
221
- <li className={CLASS_SUBNAV_ITEM}>
222
- <a href="#">Cestovateľské balíky</a>
223
- </li>
224
- <li className={CLASS_SUBNAV_ITEM}>
225
- <a href="#">Volania do zahraničia</a>
226
- </li>
227
- <li className={CLASS_SUBNAV_ITEM}>
228
- <a href="#">Regulovaný roaming</a>
229
- </li>
230
- </ul>
231
- </div>
232
-
233
- <div className={CLASS_CARD}>
234
- <h3 id="nase-sluzby-heading">Ste náš zákazník?</h3>
235
- <ul
236
- className={CLASS_SUBNAV}
237
- role="group"
238
- aria-labelledby="nase-sluzby-heading"
239
- >
240
- <li className={CLASS_SUBNAV_ITEM}>
241
- <a href="#">Chcem zmeniť paušál</a>
242
- </li>
243
- <li className={CLASS_SUBNAV_ITEM}>
244
- <a href="#">Dobiť kredit</a>
245
- </li>
246
- <li className={CLASS_SUBNAV_ITEM}>
247
- <a href="#">Predĺžiť služby</a>
248
- </li>
249
- <li className={CLASS_SUBNAV_ITEM}>
250
- <a href="#">Chcem nový telefón</a>
251
- </li>
252
- <li className={CLASS_SUBNAV_ITEM}>
253
- <a href="#">Navzájom zadarmo</a>
254
- </li>
255
- <li className={CLASS_SUBNAV_ITEM}>
256
- <a href="#">Orange Svojim</a>
257
- </li>
258
- <li className={CLASS_SUBNAV_ITEM}>
259
- <a href="#">Odporučte Orange</a>
260
- </li>
261
- <li className={CLASS_SUBNAV_ITEM}>
262
- <a href="#">Ostatné služby</a>
263
- </li>
264
- </ul>
265
- </div>
266
- </div>
267
- </div>
268
- </div>
269
- </li>
270
- <li
271
- className={cx(
272
- CLASS_NAV_ITEM,
273
- CLASS_NAV_ITEM_MAIN,
274
- CLASS_HIDE_MD_DOWN,
275
- )}
276
- >
277
- <button
278
- type="button"
279
- className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
280
- aria-controls="megamenu-internet-tv"
281
- aria-expanded="false"
282
- aria-haspopup="true"
283
- >
284
- Internet, TV
285
- </button>
286
- <div className={CLASS_NAV_DROPDOWN} id="megamenu-internet-tv">
287
- <div className={CLASS_CONTAINER}>CONTENT</div>
288
- </div>
289
- </li>
290
- <li
291
- className={cx(
292
- CLASS_NAV_ITEM,
293
- CLASS_NAV_ITEM_MAIN,
294
- CLASS_HIDE_MD_DOWN,
295
- )}
296
- >
297
- <button
298
- type="button"
299
- className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
300
- aria-controls="megamenu-telefony-zariadenia"
301
- aria-expanded="false"
302
- aria-haspopup="true"
303
- >
304
- Telefóny a zariadenia
305
- </button>
306
- <div
307
- className={CLASS_NAV_DROPDOWN}
308
- id="megamenu-telefony-zariadenia"
309
- >
310
- <div className={CLASS_CONTAINER}>CONTENT</div>
311
- </div>
312
- </li>
313
- <li
314
- className={cx(
315
- CLASS_NAV_ITEM,
316
- CLASS_NAV_ITEM_MAIN,
317
- CLASS_HIDE_MD_DOWN,
318
- )}
319
- >
320
- <a href="#" className={cx(CLASS_NAV_LINK)}>
321
- Akcie
322
- </a>
323
- </li>
324
- <li
325
- className={cx(
326
- CLASS_NAV_ITEM,
327
- CLASS_NAV_ITEM_MAIN,
328
- CLASS_HIDE_MD_DOWN,
329
- )}
330
- >
331
- <a href="#" className={cx(CLASS_NAV_LINK)}>
332
- Pomoc
333
- </a>
334
- </li>
67
+ <li className={CLASS_NAV_ITEM}>
68
+ <a
69
+ href="#"
70
+ className={cx(CLASS_NAV_LINK, "is-active")}
71
+ aria-current="page"
72
+ >
73
+ Pre vás
74
+ </a>
75
+ </li>
76
+ <li className={CLASS_NAV_ITEM}>
77
+ <a href="#" className={CLASS_NAV_LINK}>
78
+ Pre biznis
79
+ </a>
80
+ </li>
335
81
 
336
- <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
82
+ <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
337
83
 
338
- <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
339
- <button
340
- type="button"
341
- className={CLASS_NAV_BUTTON}
342
- aria-label="Vyhľadávanie"
343
- aria-controls="megamenu-search"
344
- aria-expanded="false"
345
- aria-haspopup="true"
346
- >
347
- <MegamenuIcon
348
- width={24}
349
- height={24}
350
- name="search"
351
- aria-hidden="true"
352
- />
353
- </button>
354
-
355
- <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
356
- <div className={CLASS_CONTAINER}>
357
- <input
358
- className={cx(
359
- CLASS_INPUT,
360
- CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
361
- )}
362
- id="search-1"
363
- type="text"
364
- placeholder="Search"
365
- name="search-1"
366
- />
367
- <ul className={CLASS_SUBNAV}>
368
- <li className={CLASS_SUBNAV_ITEM}>
369
- <a href="#">apple</a>
370
- </li>
371
- <li className={CLASS_SUBNAV_ITEM}>
372
- <a href="#">apple hodinky</a>
373
- </li>
374
- <li className={CLASS_SUBNAV_ITEM}>
375
- <a href="#">apple iphone</a>
376
- </li>
377
- <li className={CLASS_SUBNAV_ITEM}>
378
- <a href="#">apple 16</a>
379
- </li>
380
- <li className={CLASS_SUBNAV_ITEM}>
381
- <a href="#">apple pro</a>
382
- </li>
383
- <li className={CLASS_SUBNAV_ITEM}>
384
- <a href="#">apple watch</a>
385
- </li>
386
- </ul>
387
- </div>
388
- </div>
389
- </li>
390
- <li className={cx(CLASS_NAV_ITEM)}>
391
- <a
392
- href="#"
393
- className={cx(CLASS_NAV_LINK)}
394
- aria-label="Košík, 1 položka"
395
- aria-describedby="cart-count"
396
- >
397
- <span
398
- className={CLASS_NAV_CART_ICON}
399
- data-items-in-cart="1"
400
- aria-hidden="true"
401
- >
84
+ <li className={CLASS_NAV_ITEM}>
85
+ <a href="#" className={CLASS_NAV_LINK}>
402
86
  <MegamenuIcon
403
- width={24}
404
- height={24}
405
- name="buy"
87
+ name="call"
88
+ width={20}
89
+ height={20}
90
+ className={CLASS_NAV_ICON}
406
91
  aria-hidden="true"
407
92
  />
408
- </span>
409
- <span id="cart-count" className="sr-only">
410
- 1 položka v košíku
411
- </span>
412
- </a>
413
- </li>
414
- <li className={CLASS_NAV_ITEM}>
415
- <a href="#" className={CLASS_NAV_LINK}>
416
- <MegamenuIcon
417
- width={24}
418
- height={24}
419
- name="user"
420
- className={CLASS_NAV_ICON}
421
- aria-hidden="true"
422
- />
423
- Môj Orange
424
- </a>
425
- </li>
426
- <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
427
- <button
428
- type="button"
429
- className={CLASS_NAV_BUTTON}
430
- aria-label="Otvoriť menu"
431
- aria-haspopup="true"
432
- aria-expanded="false"
433
- >
434
- <MegamenuIcon
435
- width={24}
436
- height={24}
437
- name="menu"
438
- aria-hidden="true"
439
- />
440
- </button>
441
- </li>
442
- </ul>
93
+ Kontakt
94
+ </a>
95
+ </li>
96
+ </ul>
97
+ </div>
443
98
  </div>
444
- </div>
445
-
446
- {/* MOBILE MENU */}
447
-
448
- <div
449
- // className={cx(CLASS_MOBILE, "is-active")}
450
- className={cx(CLASS_MOBILE)}
451
- role="dialog"
452
- aria-modal="true"
453
- aria-labelledby="mobile-menu-title"
454
- >
455
- <h2 id="mobile-menu-title" className="sr-only">
456
- Hlavné menu
457
- </h2>
458
- <button
459
- aria-label="Zatvoriť menu"
460
- className={CLASS_MOBILE_OVERLAY}
461
- type="button"
462
- />
463
-
464
- <div className={CLASS_MOBILE_WRAPPER}>
465
- <div className={CLASS_MOBILE_HEADER}>
466
- <div className={CLASS_CONTAINER}>
467
- <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
468
- <li className={CLASS_NAV_ITEM}>
469
- <a
470
- href="#"
471
- className={cx(CLASS_NAV_LINK, "is-active")}
472
- aria-current="page"
473
- >
474
- Pre vás
475
- </a>
476
- </li>
477
- <li className={CLASS_NAV_ITEM}>
478
- <a href="#" className={CLASS_NAV_LINK}>
479
- Pre biznis
480
- </a>
481
- </li>
482
-
483
- <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
484
99
 
485
- <li className={CLASS_NAV_ITEM}>
486
- <button
487
- type="button"
488
- data-megamenu-close-button
489
- className={CLASS_NAV_BUTTON}
490
- aria-label="Zatvoriť menu"
100
+ <div className={CLASS_MAIN}>
101
+ <div className={CLASS_CONTAINER}>
102
+ <h2 id="menu-title" className="sr-only">
103
+ Hlavné menu
104
+ </h2>
105
+ <ul className={CLASS_NAV} aria-labelledby="menu-title">
106
+ <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
107
+ <a
108
+ href="#"
109
+ className={CLASS_NAV_LOGO}
110
+ aria-label="Domovská stránka"
111
+ >
112
+ <svg
113
+ viewBox="0 0 40 40"
114
+ fill="none"
115
+ xmlns="http://www.w3.org/2000/svg"
116
+ aria-hidden="true"
491
117
  >
492
- <MegamenuIcon
493
- name="close"
494
- width={20}
495
- height={20}
496
- aria-hidden="true"
118
+ <path d="M40 0H0V40H40V0Z" fill="#FF7900" />
119
+ <path
120
+ d="M34.2897 28.57H5.71973V34.28H34.2897V28.57Z"
121
+ fill="white"
497
122
  />
498
- </button>
499
- </li>
500
- </ul>
501
- </div>
502
- </div>
503
- <div className={CLASS_MOBILE_BODY}>
504
- <div className={CLASS_CONTAINER}>
505
- <input
123
+ </svg>
124
+ </a>
125
+ </li>
126
+ <li
506
127
  className={cx(
507
- CLASS_INPUT,
508
- CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
128
+ CLASS_NAV_ITEM,
129
+ CLASS_NAV_ITEM_MAIN,
130
+ CLASS_HIDE_MD_DOWN,
509
131
  )}
510
- id="search-1"
511
- type="text"
512
- placeholder="Search"
513
- name="search-1"
514
- />
515
- <ul className={cx(CLASS_SUBNAV, "hide")}>
516
- <li className={CLASS_SUBNAV_ITEM}>
517
- <a href="#">apple</a>
518
- </li>
519
- <li className={CLASS_SUBNAV_ITEM}>
520
- <a href="#">apple hodinky</a>
521
- </li>
522
- <li className={CLASS_SUBNAV_ITEM}>
523
- <a href="#">apple iphone</a>
524
- </li>
525
- <li className={CLASS_SUBNAV_ITEM}>
526
- <a href="#">apple 16</a>
527
- </li>
528
- <li className={CLASS_SUBNAV_ITEM}>
529
- <a href="#">apple pro</a>
530
- </li>
531
- <li className={CLASS_SUBNAV_ITEM}>
532
- <a href="#">apple watch</a>
533
- </li>
534
- </ul>
535
-
536
- <ul className={CLASS_ACCORDION}>
537
- <li className={CLASS_ACCORDION_ITEM}>
538
- <div className={CLASS_ACCORDION_HEADER}>
539
- <button
540
- type="button"
541
- className={CLASS_ACCORDION_BUTTON}
542
- aria-controls="mobile-accordion-volania"
543
- aria-expanded="false"
544
- data-accordion-toggle
545
- id="mobile-volania-button"
546
- >
547
- <span className={CLASS_ACCORDION_TITLE}>Volania</span>
548
- <MegamenuIcon
549
- name="chevron-right"
550
- width={24}
551
- height={24}
552
- className={CLASS_ACCORDION_ICON}
553
- aria-hidden="true"
554
- />
555
- </button>
556
- </div>
557
- <div
558
- className={CLASS_ACCORDION_BODY}
559
- id="mobile-accordion-volania"
560
- role="region"
561
- aria-labelledby="mobile-volania-button"
562
- >
132
+ >
133
+ <button
134
+ type="button"
135
+ className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
136
+ aria-controls="megamenu-volania"
137
+ aria-expanded="false"
138
+ aria-haspopup="true"
139
+ >
140
+ Volania
141
+ </button>
142
+ <div className={CLASS_NAV_DROPDOWN} id="megamenu-volania">
143
+ <div className={CLASS_CONTAINER}>
563
144
  <div className={CLASS_GRID}>
564
145
  <div className={cx(CLASS_CARD, "is-highlighted")}>
565
- <h3
566
- id="mobile-volania-featured-heading"
567
- className="sr-only"
568
- >
146
+ <h3 id="featured-services" className="sr-only">
569
147
  Odporúčané služby
570
148
  </h3>
571
149
  <ul
572
150
  className={CLASS_SUBNAV}
573
151
  role="group"
574
- aria-labelledby="mobile-volania-featured-heading"
152
+ aria-labelledby="featured-services"
575
153
  >
576
154
  <li className={CLASS_SUBNAV_ITEM}>
577
155
  <a href="#" className={CLASS_TEXT_LARGE}>
@@ -580,7 +158,7 @@ export const Megamenu = ({ className }: any) => {
580
158
  </li>
581
159
  <li className={CLASS_SUBNAV_ITEM}>
582
160
  <a href="#" className={CLASS_TEXT_LARGE}>
583
- Mobilný internet
161
+ Mobilné paušály
584
162
  </a>
585
163
  </li>
586
164
  <li className={CLASS_SUBNAV_ITEM}>
@@ -595,60 +173,55 @@ export const Megamenu = ({ className }: any) => {
595
173
  </li>
596
174
  </ul>
597
175
  </div>
598
- <div>
599
- <h3 id="mobile-internet-heading">Internet</h3>
176
+
177
+ <div className={CLASS_CARD}>
178
+ <h3 id="pausaly-heading">Paušály</h3>
600
179
  <ul
601
180
  className={CLASS_SUBNAV}
602
181
  role="group"
603
- aria-labelledby="mobile-internet-heading"
182
+ aria-labelledby="pausaly-heading"
604
183
  >
605
184
  <li className={CLASS_SUBNAV_ITEM}>
606
- <a href="#">Prehľad internetu</a>
185
+ <a href="#">Prehľad paušálov</a>
607
186
  </li>
608
187
  <li className={CLASS_SUBNAV_ITEM}>
609
- <a href="#">Mobilný internet</a>
188
+ <a href="#">Chcem nové číslo</a>
610
189
  </li>
611
190
  <li className={CLASS_SUBNAV_ITEM}>
612
- <a href="#">Bezpečný internet so sebou</a>
613
- </li>
614
- <li className={CLASS_SUBNAV_ITEM}>
615
- <a href="#">Domáca linka k internetu</a>
191
+ <a href="#">Yoxo paušál</a>
616
192
  </li>
617
193
  </ul>
618
194
 
619
- <h3 id="mobile-tv-heading">Televízia</h3>
195
+ <h3 id="volania-s-kreditom-heading">
196
+ Volania s kreditom
197
+ </h3>
620
198
  <ul
621
199
  className={CLASS_SUBNAV}
622
200
  role="group"
623
- aria-labelledby="mobile-tv-heading"
201
+ aria-labelledby="volania-s-kreditom-heading"
624
202
  >
625
203
  <li className={CLASS_SUBNAV_ITEM}>
626
- <a href="#">Najlepšia TV na doma</a>
627
- </li>
628
- <li className={CLASS_SUBNAV_ITEM}>
629
- <a href="#">TV cez satelit</a>
204
+ <a href="#">Prima Voľba</a>
630
205
  </li>
631
206
  <li className={CLASS_SUBNAV_ITEM}>
632
- <a href="#">TV cez internet</a>
207
+ <a href="#">Prima Kids</a>
633
208
  </li>
634
209
  <li className={CLASS_SUBNAV_ITEM}>
635
- <a href="#">Novinky na Orange TV</a>
210
+ <a href="#">FunFón</a>
636
211
  </li>
637
212
  </ul>
638
213
 
639
- <h3 id="mobile-internet-tv-heading">
640
- Internet + televízia
641
- </h3>
214
+ <h3 id="zahranicie-heading">Zahraničie</h3>
642
215
  <ul
643
216
  className={CLASS_SUBNAV}
644
217
  role="group"
645
- aria-labelledby="mobile-internet-tv-heading"
218
+ aria-labelledby="zahranicie-heading"
646
219
  >
647
220
  <li className={CLASS_SUBNAV_ITEM}>
648
- <a href="#">Ponuka Love</a>
221
+ <a href="#">Roaming</a>
649
222
  </li>
650
223
  <li className={CLASS_SUBNAV_ITEM}>
651
- <a href="#">Výhodný pár zariadení</a>
224
+ <a href="#">Cestovateľské balíky</a>
652
225
  </li>
653
226
  <li className={CLASS_SUBNAV_ITEM}>
654
227
  <a href="#">Volania do zahraničia</a>
@@ -657,179 +230,612 @@ export const Megamenu = ({ className }: any) => {
657
230
  <a href="#">Regulovaný roaming</a>
658
231
  </li>
659
232
  </ul>
233
+ </div>
660
234
 
661
- <h3 id="mobile-customer-heading">Ste náš zákazník?</h3>
235
+ <div className={CLASS_CARD}>
236
+ <h3 id="nase-sluzby-heading">Ste náš zákazník?</h3>
662
237
  <ul
663
238
  className={CLASS_SUBNAV}
664
239
  role="group"
665
- aria-labelledby="mobile-customer-heading"
240
+ aria-labelledby="nase-sluzby-heading"
666
241
  >
242
+ <li className={CLASS_SUBNAV_ITEM}>
243
+ <a href="#">Chcem zmeniť paušál</a>
244
+ </li>
245
+ <li className={CLASS_SUBNAV_ITEM}>
246
+ <a href="#">Dobiť kredit</a>
247
+ </li>
667
248
  <li className={CLASS_SUBNAV_ITEM}>
668
249
  <a href="#">Predĺžiť služby</a>
669
250
  </li>
670
251
  <li className={CLASS_SUBNAV_ITEM}>
671
- <a href="#">Nový internet</a>
252
+ <a href="#">Chcem nový telefón</a>
253
+ </li>
254
+ <li className={CLASS_SUBNAV_ITEM}>
255
+ <a href="#">Navzájom zadarmo</a>
672
256
  </li>
673
257
  <li className={CLASS_SUBNAV_ITEM}>
674
- <a href="#">Nová televízia</a>
258
+ <a href="#">Orange Svojim</a>
675
259
  </li>
676
260
  <li className={CLASS_SUBNAV_ITEM}>
677
261
  <a href="#">Odporučte Orange</a>
678
262
  </li>
263
+ <li className={CLASS_SUBNAV_ITEM}>
264
+ <a href="#">Ostatné služby</a>
265
+ </li>
679
266
  </ul>
680
267
  </div>
681
268
  </div>
682
269
  </div>
683
- </li>
270
+ </div>
271
+ </li>
272
+ <li
273
+ className={cx(
274
+ CLASS_NAV_ITEM,
275
+ CLASS_NAV_ITEM_MAIN,
276
+ CLASS_HIDE_MD_DOWN,
277
+ )}
278
+ >
279
+ <button
280
+ type="button"
281
+ className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
282
+ aria-controls="megamenu-internet-tv"
283
+ aria-expanded="false"
284
+ aria-haspopup="true"
285
+ >
286
+ Internet, TV
287
+ </button>
288
+ <div className={CLASS_NAV_DROPDOWN} id="megamenu-internet-tv">
289
+ <div className={CLASS_CONTAINER}>CONTENT</div>
290
+ </div>
291
+ </li>
292
+ <li
293
+ className={cx(
294
+ CLASS_NAV_ITEM,
295
+ CLASS_NAV_ITEM_MAIN,
296
+ CLASS_HIDE_MD_DOWN,
297
+ )}
298
+ >
299
+ <button
300
+ type="button"
301
+ className={cx(CLASS_NAV_BUTTON, CLASS_NAV_BUTTON_INDICATOR)}
302
+ aria-controls="megamenu-telefony-zariadenia"
303
+ aria-expanded="false"
304
+ aria-haspopup="true"
305
+ >
306
+ Telefóny a zariadenia
307
+ </button>
308
+ <div
309
+ className={CLASS_NAV_DROPDOWN}
310
+ id="megamenu-telefony-zariadenia"
311
+ >
312
+ <div className={CLASS_CONTAINER}>CONTENT</div>
313
+ </div>
314
+ </li>
315
+ <li
316
+ className={cx(
317
+ CLASS_NAV_ITEM,
318
+ CLASS_NAV_ITEM_MAIN,
319
+ CLASS_HIDE_MD_DOWN,
320
+ )}
321
+ >
322
+ <a href="#" className={cx(CLASS_NAV_LINK)}>
323
+ Akcie
324
+ </a>
325
+ </li>
326
+ <li
327
+ className={cx(
328
+ CLASS_NAV_ITEM,
329
+ CLASS_NAV_ITEM_MAIN,
330
+ CLASS_HIDE_MD_DOWN,
331
+ )}
332
+ >
333
+ <a href="#" className={cx(CLASS_NAV_LINK)}>
334
+ Pomoc
335
+ </a>
336
+ </li>
337
+
338
+ <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
339
+
340
+ <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_MD_DOWN)}>
341
+ <button
342
+ type="button"
343
+ className={CLASS_NAV_BUTTON}
344
+ aria-label="Vyhľadávanie"
345
+ aria-controls="megamenu-search"
346
+ aria-expanded="false"
347
+ aria-haspopup="true"
348
+ >
349
+ <MegamenuIcon
350
+ width={24}
351
+ height={24}
352
+ name="search"
353
+ aria-hidden="true"
354
+ />
355
+ </button>
356
+
357
+ <div className={CLASS_NAV_DROPDOWN} id="megamenu-search">
358
+ <div className={CLASS_CONTAINER}>
359
+ <input
360
+ className={cx(
361
+ CLASS_INPUT,
362
+ CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
363
+ )}
364
+ id="search-1"
365
+ type="text"
366
+ placeholder="Search"
367
+ name="search-1"
368
+ />
369
+ <ul className={CLASS_SUBNAV}>
370
+ <li className={CLASS_SUBNAV_ITEM}>
371
+ <a href="#">apple</a>
372
+ </li>
373
+ <li className={CLASS_SUBNAV_ITEM}>
374
+ <a href="#">apple hodinky</a>
375
+ </li>
376
+ <li className={CLASS_SUBNAV_ITEM}>
377
+ <a href="#">apple iphone</a>
378
+ </li>
379
+ <li className={CLASS_SUBNAV_ITEM}>
380
+ <a href="#">apple 16</a>
381
+ </li>
382
+ <li className={CLASS_SUBNAV_ITEM}>
383
+ <a href="#">apple pro</a>
384
+ </li>
385
+ <li className={CLASS_SUBNAV_ITEM}>
386
+ <a href="#">apple watch</a>
387
+ </li>
388
+ </ul>
389
+ </div>
390
+ </div>
391
+ </li>
392
+ <li className={cx(CLASS_NAV_ITEM)}>
393
+ <a
394
+ href="#"
395
+ className={cx(CLASS_NAV_LINK)}
396
+ aria-label="Košík, 1 položka"
397
+ aria-describedby="cart-count"
398
+ >
399
+ <span
400
+ className={CLASS_NAV_CART_ICON}
401
+ data-items-in-cart="1"
402
+ aria-hidden="true"
403
+ >
404
+ <MegamenuIcon
405
+ width={24}
406
+ height={24}
407
+ name="buy"
408
+ aria-hidden="true"
409
+ />
410
+ </span>
411
+ <span id="cart-count" className="sr-only">
412
+ 1 položka v košíku
413
+ </span>
414
+ </a>
415
+ </li>
416
+ <li className={CLASS_NAV_ITEM}>
417
+ <a href="#" className={CLASS_NAV_LINK}>
418
+ <MegamenuIcon
419
+ width={24}
420
+ height={24}
421
+ name="user"
422
+ className={CLASS_NAV_ICON}
423
+ aria-hidden="true"
424
+ />
425
+ Môj Orange
426
+ </a>
427
+ </li>
428
+ <li className={cx(CLASS_NAV_ITEM, CLASS_HIDE_LG_UP)}>
429
+ <button
430
+ type="button"
431
+ className={CLASS_NAV_BUTTON}
432
+ aria-label="Otvoriť menu"
433
+ aria-haspopup="true"
434
+ aria-expanded="false"
435
+ >
436
+ <MegamenuIcon
437
+ width={24}
438
+ height={24}
439
+ name="menu"
440
+ aria-hidden="true"
441
+ />
442
+ </button>
443
+ </li>
444
+ </ul>
445
+ </div>
446
+ </div>
684
447
 
685
- <li className={CLASS_ACCORDION_ITEM}>
686
- <div className={CLASS_ACCORDION_HEADER}>
448
+ {/* MOBILE MENU */}
449
+
450
+ <div
451
+ // className={cx(CLASS_MOBILE, "is-active")}
452
+ className={cx(CLASS_MOBILE)}
453
+ role="dialog"
454
+ aria-modal="true"
455
+ aria-labelledby="mobile-menu-title"
456
+ >
457
+ <h2 id="mobile-menu-title" className="sr-only">
458
+ Hlavné menu
459
+ </h2>
460
+ <button
461
+ aria-label="Zatvoriť menu"
462
+ className={CLASS_MOBILE_OVERLAY}
463
+ type="button"
464
+ />
465
+
466
+ <div className={CLASS_MOBILE_WRAPPER}>
467
+ <div className={CLASS_MOBILE_HEADER}>
468
+ <div className={CLASS_CONTAINER}>
469
+ <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
470
+ <li className={CLASS_NAV_ITEM}>
471
+ <a
472
+ href="#"
473
+ className={cx(CLASS_NAV_LINK, "is-active")}
474
+ aria-current="page"
475
+ >
476
+ Pre vás
477
+ </a>
478
+ </li>
479
+ <li className={CLASS_NAV_ITEM}>
480
+ <a href="#" className={CLASS_NAV_LINK}>
481
+ Pre biznis
482
+ </a>
483
+ </li>
484
+
485
+ <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
486
+
487
+ <li className={CLASS_NAV_ITEM}>
687
488
  <button
688
489
  type="button"
689
- className={CLASS_ACCORDION_BUTTON}
690
- aria-controls="mobile-accordion-internet-tv"
691
- aria-expanded="false"
692
- data-accordion-toggle
693
- id="mobile-internet-tv-button"
490
+ data-megamenu-close-button
491
+ className={CLASS_NAV_BUTTON}
492
+ aria-label="Zatvoriť menu"
694
493
  >
695
- <span className={CLASS_ACCORDION_TITLE}>
696
- Internet, TV
697
- </span>
698
494
  <MegamenuIcon
699
- name="chevron-right"
700
- width={24}
701
- height={24}
702
- className={CLASS_ACCORDION_ICON}
495
+ name="close"
496
+ width={20}
497
+ height={20}
703
498
  aria-hidden="true"
704
499
  />
705
500
  </button>
706
- </div>
707
- <div
708
- className={CLASS_ACCORDION_BODY}
709
- id="mobile-accordion-internet-tv"
710
- role="region"
711
- aria-labelledby="mobile-internet-tv-button"
712
- >
713
- CONTENT
714
- </div>
715
- </li>
501
+ </li>
502
+ </ul>
503
+ </div>
504
+ </div>
505
+ <div className={CLASS_MOBILE_BODY}>
506
+ <div className={CLASS_CONTAINER}>
507
+ <input
508
+ className={cx(
509
+ CLASS_INPUT,
510
+ CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
511
+ )}
512
+ id="search-1"
513
+ type="text"
514
+ placeholder="Search"
515
+ name="search-1"
516
+ />
517
+ <ul className={cx(CLASS_SUBNAV, "hide")}>
518
+ <li className={CLASS_SUBNAV_ITEM}>
519
+ <a href="#">apple</a>
520
+ </li>
521
+ <li className={CLASS_SUBNAV_ITEM}>
522
+ <a href="#">apple hodinky</a>
523
+ </li>
524
+ <li className={CLASS_SUBNAV_ITEM}>
525
+ <a href="#">apple iphone</a>
526
+ </li>
527
+ <li className={CLASS_SUBNAV_ITEM}>
528
+ <a href="#">apple 16</a>
529
+ </li>
530
+ <li className={CLASS_SUBNAV_ITEM}>
531
+ <a href="#">apple pro</a>
532
+ </li>
533
+ <li className={CLASS_SUBNAV_ITEM}>
534
+ <a href="#">apple watch</a>
535
+ </li>
536
+ </ul>
716
537
 
717
- <li className={CLASS_ACCORDION_ITEM}>
718
- <div className={CLASS_ACCORDION_HEADER}>
719
- <button
720
- type="button"
721
- className={CLASS_ACCORDION_BUTTON}
722
- aria-controls="mobile-accordion-telefony"
723
- aria-expanded="false"
724
- data-accordion-toggle
725
- id="mobile-telefony-button"
538
+ <ul className={CLASS_ACCORDION}>
539
+ <li className={CLASS_ACCORDION_ITEM}>
540
+ <div className={CLASS_ACCORDION_HEADER}>
541
+ <button
542
+ type="button"
543
+ className={CLASS_ACCORDION_BUTTON}
544
+ aria-controls="mobile-accordion-volania"
545
+ aria-expanded="false"
546
+ data-accordion-toggle
547
+ id="mobile-volania-button"
548
+ >
549
+ <span className={CLASS_ACCORDION_TITLE}>Volania</span>
550
+ <MegamenuIcon
551
+ name="chevron-right"
552
+ width={24}
553
+ height={24}
554
+ className={CLASS_ACCORDION_ICON}
555
+ aria-hidden="true"
556
+ />
557
+ </button>
558
+ </div>
559
+ <div
560
+ className={CLASS_ACCORDION_BODY}
561
+ id="mobile-accordion-volania"
562
+ role="region"
563
+ aria-labelledby="mobile-volania-button"
726
564
  >
727
- <span className={CLASS_ACCORDION_TITLE}>
728
- Telefóny a zariadenia
729
- </span>
565
+ <div className={CLASS_GRID}>
566
+ <div className={cx(CLASS_CARD, "is-highlighted")}>
567
+ <h3
568
+ id="mobile-volania-featured-heading"
569
+ className="sr-only"
570
+ >
571
+ Odporúčané služby
572
+ </h3>
573
+ <ul
574
+ className={CLASS_SUBNAV}
575
+ role="group"
576
+ aria-labelledby="mobile-volania-featured-heading"
577
+ >
578
+ <li className={CLASS_SUBNAV_ITEM}>
579
+ <a href="#" className={CLASS_TEXT_LARGE}>
580
+ Internet na doma
581
+ </a>
582
+ </li>
583
+ <li className={CLASS_SUBNAV_ITEM}>
584
+ <a href="#" className={CLASS_TEXT_LARGE}>
585
+ Mobilný internet
586
+ </a>
587
+ </li>
588
+ <li className={CLASS_SUBNAV_ITEM}>
589
+ <a href="#" className={CLASS_TEXT_LARGE}>
590
+ Televízia
591
+ </a>
592
+ </li>
593
+ <li className={CLASS_SUBNAV_ITEM}>
594
+ <a href="#" className={CLASS_TEXT_LARGE}>
595
+ Internet + TV
596
+ </a>
597
+ </li>
598
+ </ul>
599
+ </div>
600
+ <div>
601
+ <h3 id="mobile-internet-heading">Internet</h3>
602
+ <ul
603
+ className={CLASS_SUBNAV}
604
+ role="group"
605
+ aria-labelledby="mobile-internet-heading"
606
+ >
607
+ <li className={CLASS_SUBNAV_ITEM}>
608
+ <a href="#">Prehľad internetu</a>
609
+ </li>
610
+ <li className={CLASS_SUBNAV_ITEM}>
611
+ <a href="#">Mobilný internet</a>
612
+ </li>
613
+ <li className={CLASS_SUBNAV_ITEM}>
614
+ <a href="#">Bezpečný internet so sebou</a>
615
+ </li>
616
+ <li className={CLASS_SUBNAV_ITEM}>
617
+ <a href="#">Domáca linka k internetu</a>
618
+ </li>
619
+ </ul>
620
+
621
+ <h3 id="mobile-tv-heading">Televízia</h3>
622
+ <ul
623
+ className={CLASS_SUBNAV}
624
+ role="group"
625
+ aria-labelledby="mobile-tv-heading"
626
+ >
627
+ <li className={CLASS_SUBNAV_ITEM}>
628
+ <a href="#">Najlepšia TV na doma</a>
629
+ </li>
630
+ <li className={CLASS_SUBNAV_ITEM}>
631
+ <a href="#">TV cez satelit</a>
632
+ </li>
633
+ <li className={CLASS_SUBNAV_ITEM}>
634
+ <a href="#">TV cez internet</a>
635
+ </li>
636
+ <li className={CLASS_SUBNAV_ITEM}>
637
+ <a href="#">Novinky na Orange TV</a>
638
+ </li>
639
+ </ul>
640
+
641
+ <h3 id="mobile-internet-tv-heading">
642
+ Internet + televízia
643
+ </h3>
644
+ <ul
645
+ className={CLASS_SUBNAV}
646
+ role="group"
647
+ aria-labelledby="mobile-internet-tv-heading"
648
+ >
649
+ <li className={CLASS_SUBNAV_ITEM}>
650
+ <a href="#">Ponuka Love</a>
651
+ </li>
652
+ <li className={CLASS_SUBNAV_ITEM}>
653
+ <a href="#">Výhodný pár zariadení</a>
654
+ </li>
655
+ <li className={CLASS_SUBNAV_ITEM}>
656
+ <a href="#">Volania do zahraničia</a>
657
+ </li>
658
+ <li className={CLASS_SUBNAV_ITEM}>
659
+ <a href="#">Regulovaný roaming</a>
660
+ </li>
661
+ </ul>
662
+
663
+ <h3 id="mobile-customer-heading">
664
+ Ste náš zákazník?
665
+ </h3>
666
+ <ul
667
+ className={CLASS_SUBNAV}
668
+ role="group"
669
+ aria-labelledby="mobile-customer-heading"
670
+ >
671
+ <li className={CLASS_SUBNAV_ITEM}>
672
+ <a href="#">Predĺžiť služby</a>
673
+ </li>
674
+ <li className={CLASS_SUBNAV_ITEM}>
675
+ <a href="#">Nový internet</a>
676
+ </li>
677
+ <li className={CLASS_SUBNAV_ITEM}>
678
+ <a href="#">Nová televízia</a>
679
+ </li>
680
+ <li className={CLASS_SUBNAV_ITEM}>
681
+ <a href="#">Odporučte Orange</a>
682
+ </li>
683
+ </ul>
684
+ </div>
685
+ </div>
686
+ </div>
687
+ </li>
688
+
689
+ <li className={CLASS_ACCORDION_ITEM}>
690
+ <div className={CLASS_ACCORDION_HEADER}>
691
+ <button
692
+ type="button"
693
+ className={CLASS_ACCORDION_BUTTON}
694
+ aria-controls="mobile-accordion-internet-tv"
695
+ aria-expanded="false"
696
+ data-accordion-toggle
697
+ id="mobile-internet-tv-button"
698
+ >
699
+ <span className={CLASS_ACCORDION_TITLE}>
700
+ Internet, TV
701
+ </span>
702
+ <MegamenuIcon
703
+ name="chevron-right"
704
+ width={24}
705
+ height={24}
706
+ className={CLASS_ACCORDION_ICON}
707
+ aria-hidden="true"
708
+ />
709
+ </button>
710
+ </div>
711
+ <div
712
+ className={CLASS_ACCORDION_BODY}
713
+ id="mobile-accordion-internet-tv"
714
+ role="region"
715
+ aria-labelledby="mobile-internet-tv-button"
716
+ >
717
+ CONTENT
718
+ </div>
719
+ </li>
720
+
721
+ <li className={CLASS_ACCORDION_ITEM}>
722
+ <div className={CLASS_ACCORDION_HEADER}>
723
+ <button
724
+ type="button"
725
+ className={CLASS_ACCORDION_BUTTON}
726
+ aria-controls="mobile-accordion-telefony"
727
+ aria-expanded="false"
728
+ data-accordion-toggle
729
+ id="mobile-telefony-button"
730
+ >
731
+ <span className={CLASS_ACCORDION_TITLE}>
732
+ Telefóny a zariadenia
733
+ </span>
734
+ <MegamenuIcon
735
+ name="chevron-right"
736
+ width={24}
737
+ height={24}
738
+ className={CLASS_ACCORDION_ICON}
739
+ aria-hidden="true"
740
+ />
741
+ </button>
742
+ </div>
743
+ <div
744
+ className={CLASS_ACCORDION_BODY}
745
+ id="mobile-accordion-telefony"
746
+ role="region"
747
+ aria-labelledby="mobile-telefony-button"
748
+ >
749
+ CONTENT
750
+ </div>
751
+ </li>
752
+
753
+ <li className={CLASS_ACCORDION_ITEM}>
754
+ <div className={CLASS_ACCORDION_HEADER}>
755
+ <a href="#" className={CLASS_ACCORDION_BUTTON}>
756
+ <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
757
+ </a>
758
+ </div>
759
+ </li>
760
+
761
+ <li className={CLASS_ACCORDION_ITEM}>
762
+ <div className={CLASS_ACCORDION_HEADER}>
763
+ <a href="#" className={CLASS_ACCORDION_BUTTON}>
764
+ <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
765
+ </a>
766
+ </div>
767
+ </li>
768
+ </ul>
769
+
770
+ <h3 id="mobile-quick-access-heading" className="sr-only">
771
+ Rýchly prístup
772
+ </h3>
773
+ <ul
774
+ className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}
775
+ role="group"
776
+ aria-labelledby="mobile-quick-access-heading"
777
+ >
778
+ <li className={CLASS_NAV_ITEM}>
779
+ <a href="#" className={CLASS_NAV_BUTTON}>
730
780
  <MegamenuIcon
731
- name="chevron-right"
732
781
  width={24}
733
782
  height={24}
734
- className={CLASS_ACCORDION_ICON}
783
+ name="user"
784
+ className={CLASS_NAV_ICON}
735
785
  aria-hidden="true"
736
786
  />
737
- </button>
738
- </div>
739
- <div
740
- className={CLASS_ACCORDION_BODY}
741
- id="mobile-accordion-telefony"
742
- role="region"
743
- aria-labelledby="mobile-telefony-button"
744
- >
745
- CONTENT
746
- </div>
747
- </li>
748
-
749
- <li className={CLASS_ACCORDION_ITEM}>
750
- <div className={CLASS_ACCORDION_HEADER}>
751
- <a href="#" className={CLASS_ACCORDION_BUTTON}>
752
- <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
787
+ Môj Orange
753
788
  </a>
754
- </div>
755
- </li>
756
-
757
- <li className={CLASS_ACCORDION_ITEM}>
758
- <div className={CLASS_ACCORDION_HEADER}>
759
- <a href="#" className={CLASS_ACCORDION_BUTTON}>
760
- <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
789
+ </li>
790
+ <li className={CLASS_NAV_ITEM}>
791
+ <a href="#" className={CLASS_NAV_BUTTON}>
792
+ <MegamenuIcon
793
+ width={24}
794
+ height={24}
795
+ name="call"
796
+ className={CLASS_NAV_ICON}
797
+ aria-hidden="true"
798
+ />
799
+ Kontakt
761
800
  </a>
762
- </div>
763
- </li>
764
- </ul>
765
-
766
- <h3 id="mobile-quick-access-heading" className="sr-only">
767
- Rýchly prístup
768
- </h3>
769
- <ul
770
- className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}
771
- role="group"
772
- aria-labelledby="mobile-quick-access-heading"
773
- >
774
- <li className={CLASS_NAV_ITEM}>
775
- <a href="#" className={CLASS_NAV_BUTTON}>
776
- <MegamenuIcon
777
- width={24}
778
- height={24}
779
- name="user"
780
- className={CLASS_NAV_ICON}
781
- aria-hidden="true"
782
- />
783
- Môj Orange
784
- </a>
785
- </li>
786
- <li className={CLASS_NAV_ITEM}>
787
- <a href="#" className={CLASS_NAV_BUTTON}>
788
- <MegamenuIcon
789
- width={24}
790
- height={24}
791
- name="call"
792
- className={CLASS_NAV_ICON}
793
- aria-hidden="true"
794
- />
795
- Kontakt
796
- </a>
797
- </li>
798
- <li className={CLASS_NAV_ITEM}>
799
- <a href="#" className={CLASS_NAV_BUTTON}>
800
- <MegamenuIcon
801
- width={24}
802
- height={24}
803
- name="advertising"
804
- className={CLASS_NAV_ICON}
805
- aria-hidden="true"
806
- />
807
- Akcie
808
- </a>
809
- </li>
810
- <li className={CLASS_NAV_ITEM}>
811
- <a href="#" className={CLASS_NAV_BUTTON}>
812
- <MegamenuIcon
813
- width={24}
814
- height={24}
815
- name="newspaper"
816
- className={CLASS_NAV_ICON}
817
- aria-hidden="true"
818
- />
819
- Pomoc
820
- </a>
821
- </li>
822
- </ul>
801
+ </li>
802
+ <li className={CLASS_NAV_ITEM}>
803
+ <a href="#" className={CLASS_NAV_BUTTON}>
804
+ <MegamenuIcon
805
+ width={24}
806
+ height={24}
807
+ name="advertising"
808
+ className={CLASS_NAV_ICON}
809
+ aria-hidden="true"
810
+ />
811
+ Akcie
812
+ </a>
813
+ </li>
814
+ <li className={CLASS_NAV_ITEM}>
815
+ <a href="#" className={CLASS_NAV_BUTTON}>
816
+ <MegamenuIcon
817
+ width={24}
818
+ height={24}
819
+ name="newspaper"
820
+ className={CLASS_NAV_ICON}
821
+ aria-hidden="true"
822
+ />
823
+ Pomoc
824
+ </a>
825
+ </li>
826
+ </ul>
827
+ </div>
823
828
  </div>
824
829
  </div>
825
830
  </div>
826
- </div>
827
831
 
828
- <button
829
- aria-label="Zatvoriť dropdown menu"
830
- className={CLASS_OVERLAY}
831
- type="button"
832
- />
833
- </nav>
832
+ <button
833
+ aria-label="Zatvoriť dropdown menu"
834
+ className={CLASS_OVERLAY}
835
+ type="button"
836
+ />
837
+ </nav>
838
+ <div className={CLASS_SPACER} aria-hidden="true" />
839
+ </header>
834
840
  );
835
841
  };