@orangesk/orange-design-system 2.0.0-beta.32 → 2.0.0-beta.34

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 (24) hide show
  1. package/build/components/BodyBanner/style.css +1 -1
  2. package/build/components/BodyBanner/style.css.map +1 -1
  3. package/build/components/Megamenu/style.css +1 -1
  4. package/build/components/Megamenu/style.css.map +1 -1
  5. package/build/components/Tag/style.css +1 -1
  6. package/build/components/Tag/style.css.map +1 -1
  7. package/build/components/index.js +1 -1
  8. package/build/components/index.js.map +1 -1
  9. package/build/components/tsconfig.tsbuildinfo +1 -1
  10. package/build/lib/components.css +1 -1
  11. package/build/lib/components.css.map +1 -1
  12. package/build/lib/megamenu.css +1 -1
  13. package/build/lib/megamenu.css.map +1 -1
  14. package/build/lib/style.css +1 -1
  15. package/build/lib/style.css.map +1 -1
  16. package/build/lib/tsconfig.tsbuildinfo +1 -1
  17. package/build/search-index.json +1 -1
  18. package/package.json +8 -8
  19. package/src/components/BodyBanner/styles/mixins.scss +2 -4
  20. package/src/components/Megamenu/Megamenu.tsx +19 -19
  21. package/src/components/Megamenu/MegamenuBlog.tsx +16 -16
  22. package/src/components/Megamenu/MyOrangeMobilePanel.tsx +2 -2
  23. package/src/components/Megamenu/styles/mixins.scss +24 -9
  24. package/src/components/Tag/styles/config.scss +6 -6
package/src/components/Megamenu/Megamenu.tsx CHANGED
@@ -67,7 +67,7 @@ const renderMenuItems = (items: MenuItem[]) => (
67
67
  {items.map((item) => (
68
68
  <li className={CLASS_SUBNAV_ITEM} key={item.label}>
69
69
  <a
70
- href={item.href ?? "#"}
70
+ href={item.href ?? "/"}
71
71
  className={item.isLarge ? CLASS_TEXT_LARGE : undefined}
72
72
  >
73
73
  {item.label}
@@ -187,7 +187,7 @@ export const Megamenu = ({
187
187
  >
188
188
  <li className={CLASS_NAV_ITEM}>
189
189
  <a
190
- href="#"
190
+ href="/"
191
191
  className={cx(CLASS_NAV_LINK, "is-active")}
192
192
  aria-current="page"
193
193
  >
@@ -195,7 +195,7 @@ export const Megamenu = ({
195
195
  </a>
196
196
  </li>
197
197
  <li className={CLASS_NAV_ITEM}>
198
- <a href="#" className={CLASS_NAV_LINK}>
198
+ <a href="/" className={CLASS_NAV_LINK}>
199
199
  Pre biznis
200
200
  </a>
201
201
  </li>
@@ -203,7 +203,7 @@ export const Megamenu = ({
203
203
  <li className={CLASS_NAV_SPACER} aria-hidden="true"></li>
204
204
 
205
205
  <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_LEAD)}>
206
- <a href="#" className={CLASS_NAV_LINK}>
206
+ <a href="/" className={CLASS_NAV_LINK}>
207
207
  <MegamenuIcon
208
208
  name="call"
209
209
  width={20}
@@ -215,12 +215,12 @@ export const Megamenu = ({
215
215
  </a>
216
216
  </li>
217
217
  <li className={CLASS_NAV_ITEM}>
218
- <a href="#" className={cx(CLASS_NAV_LINK, "is-active")}>
218
+ <a href="/" className={cx(CLASS_NAV_LINK, "is-active")}>
219
219
  SK
220
220
  </a>
221
221
  </li>
222
222
  <li className={CLASS_NAV_ITEM}>
223
- <a href="#" className={CLASS_NAV_LINK}>
223
+ <a href="/" className={CLASS_NAV_LINK}>
224
224
  EN
225
225
  </a>
226
226
  </li>
@@ -233,7 +233,7 @@ export const Megamenu = ({
233
233
  <ul className={CLASS_NAV} aria-label="Hlavné menu">
234
234
  <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
235
235
  <a
236
- href="#"
236
+ href="/"
237
237
  className={CLASS_NAV_LOGO}
238
238
  aria-label={`${title} - Domovská stránka`}
239
239
  >
@@ -290,7 +290,7 @@ export const Megamenu = ({
290
290
  CLASS_HIDE_MD_DOWN,
291
291
  )}
292
292
  >
293
- <a href="#" className={cx(CLASS_NAV_LINK)}>
293
+ <a href="/" className={cx(CLASS_NAV_LINK)}>
294
294
  Akcie
295
295
  </a>
296
296
  </li>
@@ -301,7 +301,7 @@ export const Megamenu = ({
301
301
  CLASS_HIDE_MD_DOWN,
302
302
  )}
303
303
  >
304
- <a href="#" className={cx(CLASS_NAV_LINK)}>
304
+ <a href="/" className={cx(CLASS_NAV_LINK)}>
305
305
  Pomoc
306
306
  </a>
307
307
  </li>
@@ -343,7 +343,7 @@ export const Megamenu = ({
343
343
  </li>
344
344
  <li className={cx(CLASS_NAV_ITEM)}>
345
345
  <a
346
- href="#"
346
+ href="/"
347
347
  className={cx(CLASS_NAV_LINK)}
348
348
  aria-label="Košík, 1 položka"
349
349
  >
@@ -430,7 +430,7 @@ export const Megamenu = ({
430
430
  <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
431
431
  <li className={CLASS_NAV_ITEM}>
432
432
  <a
433
- href="#"
433
+ href="/"
434
434
  className={cx(CLASS_NAV_LINK, "is-active")}
435
435
  aria-current="page"
436
436
  >
@@ -438,7 +438,7 @@ export const Megamenu = ({
438
438
  </a>
439
439
  </li>
440
440
  <li className={CLASS_NAV_ITEM}>
441
- <a href="#" className={CLASS_NAV_LINK}>
441
+ <a href="/" className={CLASS_NAV_LINK}>
442
442
  Pre biznis
443
443
  </a>
444
444
  </li>
@@ -523,7 +523,7 @@ export const Megamenu = ({
523
523
 
524
524
  <li className={CLASS_ACCORDION_ITEM}>
525
525
  <div className={CLASS_ACCORDION_HEADER}>
526
- <a href="#" className={CLASS_ACCORDION_BUTTON}>
526
+ <a href="/" className={CLASS_ACCORDION_BUTTON}>
527
527
  <span className={CLASS_ACCORDION_TITLE}>Akcie</span>
528
528
  </a>
529
529
  </div>
@@ -531,7 +531,7 @@ export const Megamenu = ({
531
531
 
532
532
  <li className={CLASS_ACCORDION_ITEM}>
533
533
  <div className={CLASS_ACCORDION_HEADER}>
534
- <a href="#" className={CLASS_ACCORDION_BUTTON}>
534
+ <a href="/" className={CLASS_ACCORDION_BUTTON}>
535
535
  <span className={CLASS_ACCORDION_TITLE}>Pomoc</span>
536
536
  </a>
537
537
  </div>
@@ -548,7 +548,7 @@ export const Megamenu = ({
548
548
  >
549
549
  <li className={CLASS_NAV_ITEM}>
550
550
  <a
551
- href="#"
551
+ href="/"
552
552
  className={cx(
553
553
  CLASS_NAV_LINK,
554
554
  CLASS_NAV_LINK_LOCALE,
@@ -560,7 +560,7 @@ export const Megamenu = ({
560
560
  </li>
561
561
  <li className={CLASS_NAV_ITEM}>
562
562
  <a
563
- href="#"
563
+ href="/"
564
564
  className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_LOCALE)}
565
565
  >
566
566
  EN
@@ -603,7 +603,7 @@ export const Megamenu = ({
603
603
  </button>
604
604
  </li>
605
605
  <li className={CLASS_NAV_ITEM}>
606
- <a href="#" className={CLASS_NAV_BUTTON}>
606
+ <a href="/" className={CLASS_NAV_BUTTON}>
607
607
  <MegamenuIcon
608
608
  width={24}
609
609
  height={24}
@@ -615,7 +615,7 @@ export const Megamenu = ({
615
615
  </a>
616
616
  </li>
617
617
  <li className={CLASS_NAV_ITEM}>
618
- <a href="#" className={CLASS_NAV_BUTTON}>
618
+ <a href="/" className={CLASS_NAV_BUTTON}>
619
619
  <MegamenuIcon
620
620
  width={24}
621
621
  height={24}
@@ -627,7 +627,7 @@ export const Megamenu = ({
627
627
  </a>
628
628
  </li>
629
629
  <li className={CLASS_NAV_ITEM}>
630
- <a href="#" className={CLASS_NAV_BUTTON}>
630
+ <a href="/" className={CLASS_NAV_BUTTON}>
631
631
  <MegamenuIcon
632
632
  width={24}
633
633
  height={24}
package/src/components/Megamenu/MegamenuBlog.tsx CHANGED
@@ -36,6 +36,7 @@ import {
36
36
  CLASS_TAG,
37
37
  CLASS_TAG_LARGE,
38
38
  CLASS_TAG_TRANSPARENT,
39
+ CLASS_CAPTION,
39
40
  } from "./constants";
40
41
  import { MegamenuProps } from "./Megamenu";
41
42
 
@@ -74,7 +75,7 @@ export const MegamenuBlog = ({
74
75
  <ul className={CLASS_NAV} aria-label="Hlavné menu">
75
76
  <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
76
77
  <a
77
- href="#"
78
+ href="/"
78
79
  className={CLASS_NAV_LOGO}
79
80
  aria-label={`${title} - Domovská stránka`}
80
81
  >
@@ -102,7 +103,7 @@ export const MegamenuBlog = ({
102
103
  )}
103
104
  >
104
105
  <a
105
- href="#"
106
+ href="/"
106
107
  className={cx(CLASS_NAV_LINK, CLASS_NAV_LINK_NO_LINE)}
107
108
  >
108
109
  Naspať na Orange
@@ -151,6 +152,7 @@ export const MegamenuBlog = ({
151
152
  data-megamenu-mobile-target="my-orange"
152
153
  aria-haspopup="dialog"
153
154
  aria-expanded="false"
155
+ aria-label="Môj Orange"
154
156
  >
155
157
  <MegamenuIcon
156
158
  width={24}
@@ -159,7 +161,7 @@ export const MegamenuBlog = ({
159
161
  className={CLASS_NAV_ICON}
160
162
  aria-hidden="true"
161
163
  />
162
- Môj Orange
164
+ <span className={CLASS_HIDE_MD_DOWN}>Môj Orange</span>
163
165
  </button>
164
166
  </li>
165
167
 
@@ -198,12 +200,12 @@ export const MegamenuBlog = ({
198
200
  id="megamenu-blog-categories"
199
201
  >
200
202
  <div className={CLASS_CONTAINER}>
201
- <p>Kategórie</p>
203
+ <p className={CLASS_CAPTION}>Kategórie</p>
202
204
  <ul className={CLASS_LIST_INLINE}>
203
205
  {blogCategories.map((category) => (
204
206
  <li key={category}>
205
207
  <a
206
- href="#"
208
+ href="/"
207
209
  className={cx(
208
210
  CLASS_TAG,
209
211
  CLASS_TAG_TRANSPARENT,
@@ -247,7 +249,7 @@ export const MegamenuBlog = ({
247
249
  <ul className={cx(CLASS_LIST_INLINE, CLASS_ALIGN_CENTER)}>
248
250
  <li>
249
251
  <a
250
- href="#"
252
+ href="/"
251
253
  className={cx(
252
254
  CLASS_TAG,
253
255
  CLASS_TAG_TRANSPARENT,
@@ -259,7 +261,7 @@ export const MegamenuBlog = ({
259
261
  </li>
260
262
  <li>
261
263
  <a
262
- href="#"
264
+ href="/"
263
265
  className={cx(
264
266
  CLASS_TAG,
265
267
  CLASS_TAG_TRANSPARENT,
@@ -271,7 +273,7 @@ export const MegamenuBlog = ({
271
273
  </li>
272
274
  <li>
273
275
  <a
274
- href="#"
276
+ href="/"
275
277
  className={cx(
276
278
  CLASS_TAG,
277
279
  CLASS_TAG_TRANSPARENT,
@@ -283,7 +285,7 @@ export const MegamenuBlog = ({
283
285
  </li>
284
286
  <li>
285
287
  <a
286
- href="#"
288
+ href="/"
287
289
  className={cx(
288
290
  CLASS_TAG,
289
291
  CLASS_TAG_TRANSPARENT,
@@ -295,7 +297,7 @@ export const MegamenuBlog = ({
295
297
  </li>
296
298
  <li>
297
299
  <a
298
- href="#"
300
+ href="/"
299
301
  className={cx(
300
302
  CLASS_TAG,
301
303
  CLASS_TAG_TRANSPARENT,
@@ -336,7 +338,7 @@ export const MegamenuBlog = ({
336
338
  <ul className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}>
337
339
  <li className={CLASS_NAV_ITEM}>
338
340
  <a
339
- href="#"
341
+ href="/"
340
342
  className={CLASS_NAV_LOGO}
341
343
  aria-label={`${title} - Domovská stránka`}
342
344
  >
@@ -389,14 +391,12 @@ export const MegamenuBlog = ({
389
391
 
390
392
  {!showSearchState ? (
391
393
  <>
392
- <p>
393
- <b>Kategórie</b>
394
- </p>
394
+ <p className={CLASS_CAPTION}>Kategórie</p>
395
395
  <ul className={cx(CLASS_SUBNAV, CLASS_LIST_GAP_SMALL)}>
396
396
  {blogCategories.map((category) => (
397
397
  <li key={category}>
398
398
  <a
399
- href="#"
399
+ href="/"
400
400
  className={cx(
401
401
  CLASS_TAG,
402
402
  CLASS_TAG_TRANSPARENT,
@@ -413,7 +413,7 @@ export const MegamenuBlog = ({
413
413
 
414
414
  <ul className={cx(CLASS_NAV, CLASS_NAV_VERTICAL)}>
415
415
  <li className={CLASS_NAV_ITEM}>
416
- <a href="#" className={CLASS_NAV_BUTTON}>
416
+ <a href="/" className={CLASS_NAV_BUTTON}>
417
417
  Naspať na Orange
418
418
  </a>
419
419
  </li>
package/src/components/Megamenu/MyOrangeMobilePanel.tsx CHANGED
@@ -81,7 +81,7 @@ export const MyOrangeMobilePanel = ({
81
81
  </div>
82
82
  <div className={CLASS_MOBILE_BODY}>
83
83
  <div className={CLASS_CONTAINER}>
84
- <section className={CLASS_MOBILE_ACCOUNT}>
84
+ <div className={CLASS_MOBILE_ACCOUNT}>
85
85
  <div className={CLASS_MOBILE_ACCOUNT_AVATAR} aria-hidden="true">
86
86
  <MegamenuIcon name="user" width={72} height={72} />
87
87
  </div>
@@ -93,7 +93,7 @@ export const MyOrangeMobilePanel = ({
93
93
  <a href="#" className={CLASS_MOBILE_ACCOUNT_CTA}>
94
94
  My Orange
95
95
  </a>
96
- </section>
96
+ </div>
97
97
 
98
98
  <nav aria-label="Môj Orange rýchle akcie">
99
99
  <ul className={cx(CLASS_SUBNAV, CLASS_MOBILE_ACCOUNT_LINKS)}>
package/src/components/Megamenu/styles/mixins.scss CHANGED
@@ -575,8 +575,12 @@
575
575
 
576
576
  @mixin mobile-header {
577
577
  display: flex;
578
- min-height: convert.to-rem(60px);
578
+ height: convert.to-rem(80px);
579
579
  border-bottom: 1px solid var(--color-border-subtle);
580
+
581
+ @include breakpoint.get("md", "down") {
582
+ height: convert.to-rem(60px);
583
+ }
580
584
  }
581
585
 
582
586
  @mixin mobile-body {
@@ -596,7 +600,7 @@
596
600
  }
597
601
 
598
602
  @mixin mobile-account-name {
599
- @include generate.responsive-css-map(map.get(typographyConfig.$headings, 4));
603
+ @include generate.css-map(typographyConfig.$caption, "large");
600
604
  margin-top: 0;
601
605
  margin-bottom: convert.to-rem(5px);
602
606
  font-weight: 700;
@@ -622,11 +626,16 @@
622
626
  @include button.layout();
623
627
  @include button.size("default");
624
628
  @include button.color("primary");
629
+ font-size: convert.to-rem(18px) !important;
625
630
  color: color.$white !important;
626
631
  width: 100%;
627
632
  justify-content: center;
628
633
  margin-bottom: convert.to-rem(40px);
629
634
  text-decoration: none !important;
635
+
636
+ &:active {
637
+ color: color.$black !important;
638
+ }
630
639
  }
631
640
 
632
641
  @mixin mobile-account-links {
@@ -678,9 +687,9 @@
678
687
  }
679
688
 
680
689
  @mixin text-large {
681
- font-size: convert.to-rem(28px) !important;
690
+ font-size: convert.to-rem(18px) !important;
682
691
  font-weight: 700;
683
- line-height: convert.to-rem(32px);
692
+ line-height: convert.to-rem(22px);
684
693
 
685
694
  @include breakpoint.get("md", "down") {
686
695
  font-size: convert.to-rem(24px) !important;
@@ -856,10 +865,6 @@
856
865
  outline-offset: -2px !important;
857
866
  }
858
867
 
859
- @include breakpoint.get("md", "down") {
860
- margin-bottom: convert.to-rem(15px);
861
- }
862
-
863
868
  @each $size, $values in inputConfig.$sizes {
864
869
  &#{generate.variant-name($size)} {
865
870
  @include input.size($size);
@@ -885,6 +890,7 @@
885
890
 
886
891
  @mixin tag {
887
892
  @include tag.base;
893
+ text-decoration: none !important;
888
894
 
889
895
  @each $name, $props in tagConfig.$sizes {
890
896
  &#{generate.variant-name($name)} {
@@ -907,7 +913,6 @@
907
913
  &:not(&--transparent):where(a) {
908
914
  @include tag.button();
909
915
  z-index: 2;
910
- text-decoration: none !important;
911
916
  }
912
917
 
913
918
  &:not(&--transparent) {
@@ -934,6 +939,16 @@
934
939
  &.is-active {
935
940
  text-decoration: none !important;
936
941
  }
942
+
943
+ &:hover,
944
+ &:focus {
945
+ color: inherit !important;
946
+ }
947
+
948
+ &:active,
949
+ &.is-active {
950
+ color: color.$white !important;
951
+ }
937
952
  }
938
953
 
939
954
  @include tag.button-transparent-disabled();
package/src/components/Tag/styles/config.scss CHANGED
@@ -12,20 +12,20 @@ $tag: (
12
12
  $sizes: (
13
13
  default: (
14
14
  padding: convert.to-rem(7px) convert.to-rem(12px),
15
- font-size: convert.to-rem(14px),
16
- line-height: 1rem,
15
+ font-size: convert.to-rem(14px) "!important",
16
+ line-height: 1rem "!important",
17
17
  font-weight: 700,
18
18
  ),
19
19
  small: (
20
20
  padding: convert.to-rem(2px) convert.to-rem(8px),
21
- font-size: convert.to-rem(12px),
22
- line-height: convert.to-rem(14px),
21
+ font-size: convert.to-rem(12px) "!important",
22
+ line-height: convert.to-rem(14px) "!important",
23
23
  font-weight: 400,
24
24
  ),
25
25
  large: (
26
26
  padding: convert.to-rem(11px) convert.to-rem(15px),
27
- font-size: convert.to-rem(16px),
28
- line-height: convert.to-rem(18px),
27
+ font-size: convert.to-rem(16px) "!important",
28
+ line-height: convert.to-rem(18px) "!important",
29
29
  font-weight: 700,
30
30
  ),
31
31
  );