hr-design-system-handlebars 0.56.11 → 0.56.13
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.md +25 -0
- package/build/helpers/resourceUrl.js +8 -0
- package/dist/assets/index.css +73 -38
- package/dist/views/components/content_nav/content_nav.hbs +2 -2
- package/dist/views/components/content_nav/{dropdown.hbs → content_nav_dropdown.hbs} +0 -0
- package/dist/views/components/content_nav/content_nav_list.hbs +16 -10
- package/dist/views/components/site_header/header.hbs +12 -8
- package/dist/views/components/site_header/service_logo.hbs +1 -7
- package/dist/views/components/teaser/group_teaser/group_teaser.hbs +18 -8
- package/package.json +1 -1
- package/src/assets/fixtures/teaser/teaser_groups.inc.json +4 -5
- package/src/stories/views/components/content_nav/content_nav.hbs +2 -2
- package/src/stories/views/components/content_nav/{dropdown.hbs → content_nav_dropdown.hbs} +0 -0
- package/src/stories/views/components/content_nav/content_nav_list.hbs +16 -10
- package/src/stories/views/components/site_header/header.hbs +12 -8
- package/src/stories/views/components/site_header/service_logo.hbs +1 -7
- package/src/stories/views/components/teaser/fixtures/teaser_group_100_contentNav.json +1 -1
- package/src/stories/views/components/teaser/group_teaser/group.stories.mdx +13 -2
- package/src/stories/views/components/teaser/group_teaser/group_teaser.hbs +18 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
# v0.56.13 (Fri Sep 16 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Fixing hs-logo for print view - Dpe 1710 [#318](https://github.com/mumprod/hr-design-system-handlebars/pull/318) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
|
|
10
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v0.56.12 (Tue Sep 06 2022)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- Dpe 1689 content navi next steps [#316](https://github.com/mumprod/hr-design-system-handlebars/pull/316) ([@StefanVesper](https://github.com/StefanVesper))
|
|
19
|
+
|
|
20
|
+
#### Authors: 1
|
|
21
|
+
|
|
22
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
1
26
|
# v0.56.11 (Mon Sep 05 2022)
|
|
2
27
|
|
|
3
28
|
#### 🐛 Bug Fix
|
|
@@ -21,7 +21,15 @@ module.exports = function (text, options) {
|
|
|
21
21
|
`./brand/${options.hash['_brand']}/icons/logo`
|
|
22
22
|
)
|
|
23
23
|
} else {
|
|
24
|
+
if (text.includes('assets/base/icons/rsslogo/') && options.hash['_brand']) {
|
|
25
|
+
resourceUrl = text.replace(
|
|
26
|
+
'assets/base/icons/rsslogo',
|
|
27
|
+
`./brand/${options.hash['_brand']}/icons/rsslogo`
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
else{
|
|
24
31
|
resourceUrl = text.replace('assets/base/', './')
|
|
32
|
+
}
|
|
25
33
|
}
|
|
26
34
|
}
|
|
27
35
|
if (text.includes('suche/index.nocache'))
|
package/dist/assets/index.css
CHANGED
|
@@ -424,7 +424,7 @@ video {
|
|
|
424
424
|
font-stretch: condensed;
|
|
425
425
|
}
|
|
426
426
|
|
|
427
|
-
.-translate-x-1\/2, .-translate-y-1\/2, .rotate-45, .-rotate-45, .rotate-180, .scale-y-90, .scale-y-100, .transform {
|
|
427
|
+
.-translate-x-1\/2, .-translate-y-1\/2, .rotate-45, .-rotate-45, .rotate-180, .scale-50, .scale-y-90, .scale-y-100, .transform {
|
|
428
428
|
--tw-translate-x: 0;
|
|
429
429
|
--tw-translate-y: 0;
|
|
430
430
|
--tw-rotate: 0;
|
|
@@ -434,7 +434,7 @@ video {
|
|
|
434
434
|
--tw-scale-y: 1;
|
|
435
435
|
}
|
|
436
436
|
|
|
437
|
-
.btn--secondary,
|
|
437
|
+
.btn--secondary, .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl {
|
|
438
438
|
--tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
|
|
439
439
|
--tw-ring-shadow: 0 0 rgba(0,0,0,0);
|
|
440
440
|
--tw-shadow: 0 0 rgba(0,0,0,0);
|
|
@@ -636,12 +636,12 @@ video {
|
|
|
636
636
|
.top-full {
|
|
637
637
|
top: 100%;
|
|
638
638
|
}
|
|
639
|
-
.z-10000 {
|
|
640
|
-
z-index: 10000;
|
|
641
|
-
}
|
|
642
639
|
.z-10002 {
|
|
643
640
|
z-index: 10002;
|
|
644
641
|
}
|
|
642
|
+
.z-10000 {
|
|
643
|
+
z-index: 10000;
|
|
644
|
+
}
|
|
645
645
|
.z-10001 {
|
|
646
646
|
z-index: 10001;
|
|
647
647
|
}
|
|
@@ -717,6 +717,10 @@ video {
|
|
|
717
717
|
margin-left: 1px;
|
|
718
718
|
margin-right: 1px;
|
|
719
719
|
}
|
|
720
|
+
.my-0 {
|
|
721
|
+
margin-top: 0px;
|
|
722
|
+
margin-bottom: 0px;
|
|
723
|
+
}
|
|
720
724
|
.mx-1\.5 {
|
|
721
725
|
margin-left: 0.375rem;
|
|
722
726
|
margin-right: 0.375rem;
|
|
@@ -737,12 +741,12 @@ video {
|
|
|
737
741
|
.mt-0 {
|
|
738
742
|
margin-top: 0px;
|
|
739
743
|
}
|
|
740
|
-
.ml-2 {
|
|
741
|
-
margin-left: 0.5rem;
|
|
742
|
-
}
|
|
743
744
|
.mb-2 {
|
|
744
745
|
margin-bottom: 0.5rem;
|
|
745
746
|
}
|
|
747
|
+
.ml-2 {
|
|
748
|
+
margin-left: 0.5rem;
|
|
749
|
+
}
|
|
746
750
|
.-mt-2 {
|
|
747
751
|
margin-top: -0.5rem;
|
|
748
752
|
}
|
|
@@ -837,15 +841,15 @@ video {
|
|
|
837
841
|
.h-8 {
|
|
838
842
|
height: 2rem;
|
|
839
843
|
}
|
|
844
|
+
.h-full {
|
|
845
|
+
height: 100%;
|
|
846
|
+
}
|
|
840
847
|
.h-4 {
|
|
841
848
|
height: 1rem;
|
|
842
849
|
}
|
|
843
850
|
.h-auto {
|
|
844
851
|
height: auto;
|
|
845
852
|
}
|
|
846
|
-
.h-full {
|
|
847
|
-
height: 100%;
|
|
848
|
-
}
|
|
849
853
|
.h-0\.5 {
|
|
850
854
|
height: 0.125rem;
|
|
851
855
|
}
|
|
@@ -879,6 +883,9 @@ video {
|
|
|
879
883
|
.h-2 {
|
|
880
884
|
height: 0.5rem;
|
|
881
885
|
}
|
|
886
|
+
.h-24 {
|
|
887
|
+
height: 6rem;
|
|
888
|
+
}
|
|
882
889
|
.max-h-0 {
|
|
883
890
|
max-height: 0px;
|
|
884
891
|
}
|
|
@@ -894,12 +901,12 @@ video {
|
|
|
894
901
|
.w-full {
|
|
895
902
|
width: 100%;
|
|
896
903
|
}
|
|
897
|
-
.w-4 {
|
|
898
|
-
width: 1rem;
|
|
899
|
-
}
|
|
900
904
|
.w-auto {
|
|
901
905
|
width: auto;
|
|
902
906
|
}
|
|
907
|
+
.w-4 {
|
|
908
|
+
width: 1rem;
|
|
909
|
+
}
|
|
903
910
|
.w-6 {
|
|
904
911
|
width: 1.5rem;
|
|
905
912
|
}
|
|
@@ -1016,6 +1023,12 @@ video {
|
|
|
1016
1023
|
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1017
1024
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1018
1025
|
}
|
|
1026
|
+
.scale-50 {
|
|
1027
|
+
--tw-scale-x: .5;
|
|
1028
|
+
--tw-scale-y: .5;
|
|
1029
|
+
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1030
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
1031
|
+
}
|
|
1019
1032
|
.scale-y-90 {
|
|
1020
1033
|
--tw-scale-y: .9;
|
|
1021
1034
|
-webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
@@ -1177,6 +1190,9 @@ video {
|
|
|
1177
1190
|
.rounded {
|
|
1178
1191
|
border-radius: 0.25rem;
|
|
1179
1192
|
}
|
|
1193
|
+
.rounded-3xl {
|
|
1194
|
+
border-radius: 1.5rem;
|
|
1195
|
+
}
|
|
1180
1196
|
.rounded-t-xl {
|
|
1181
1197
|
border-top-left-radius: 0.75rem;
|
|
1182
1198
|
border-top-right-radius: 0.75rem;
|
|
@@ -1203,6 +1219,12 @@ video {
|
|
|
1203
1219
|
.rounded-br-3xl {
|
|
1204
1220
|
border-bottom-right-radius: 1.5rem;
|
|
1205
1221
|
}
|
|
1222
|
+
.rounded-tr-none {
|
|
1223
|
+
border-top-right-radius: 0px;
|
|
1224
|
+
}
|
|
1225
|
+
.rounded-bl-none {
|
|
1226
|
+
border-bottom-left-radius: 0px;
|
|
1227
|
+
}
|
|
1206
1228
|
.border {
|
|
1207
1229
|
border-width: 1px;
|
|
1208
1230
|
}
|
|
@@ -1213,12 +1235,12 @@ video {
|
|
|
1213
1235
|
border-left-width: 1px;
|
|
1214
1236
|
border-right-width: 1px;
|
|
1215
1237
|
}
|
|
1216
|
-
.border-b {
|
|
1217
|
-
border-bottom-width: 1px;
|
|
1218
|
-
}
|
|
1219
1238
|
.border-l {
|
|
1220
1239
|
border-left-width: 1px;
|
|
1221
1240
|
}
|
|
1241
|
+
.border-b {
|
|
1242
|
+
border-bottom-width: 1px;
|
|
1243
|
+
}
|
|
1222
1244
|
.border-l-0 {
|
|
1223
1245
|
border-left-width: 0px;
|
|
1224
1246
|
}
|
|
@@ -1432,6 +1454,9 @@ video {
|
|
|
1432
1454
|
.p-0 {
|
|
1433
1455
|
padding: 0px;
|
|
1434
1456
|
}
|
|
1457
|
+
.p-8 {
|
|
1458
|
+
padding: 2rem;
|
|
1459
|
+
}
|
|
1435
1460
|
.px-4 {
|
|
1436
1461
|
padding-left: 1rem;
|
|
1437
1462
|
padding-right: 1rem;
|
|
@@ -1464,14 +1489,14 @@ video {
|
|
|
1464
1489
|
padding-left: 0.5rem;
|
|
1465
1490
|
padding-right: 0.5rem;
|
|
1466
1491
|
}
|
|
1467
|
-
.\!px-0 {
|
|
1468
|
-
padding-left: 0px !important;
|
|
1469
|
-
padding-right: 0px !important;
|
|
1470
|
-
}
|
|
1471
1492
|
.py-1 {
|
|
1472
1493
|
padding-top: 0.25rem;
|
|
1473
1494
|
padding-bottom: 0.25rem;
|
|
1474
1495
|
}
|
|
1496
|
+
.\!px-0 {
|
|
1497
|
+
padding-left: 0px !important;
|
|
1498
|
+
padding-right: 0px !important;
|
|
1499
|
+
}
|
|
1475
1500
|
.py-6 {
|
|
1476
1501
|
padding-top: 1.5rem;
|
|
1477
1502
|
padding-bottom: 1.5rem;
|
|
@@ -1516,6 +1541,10 @@ video {
|
|
|
1516
1541
|
padding-top: 1.25rem;
|
|
1517
1542
|
padding-bottom: 1.25rem;
|
|
1518
1543
|
}
|
|
1544
|
+
.py-0 {
|
|
1545
|
+
padding-top: 0px;
|
|
1546
|
+
padding-bottom: 0px;
|
|
1547
|
+
}
|
|
1519
1548
|
.py-px {
|
|
1520
1549
|
padding-top: 1px;
|
|
1521
1550
|
padding-bottom: 1px;
|
|
@@ -1789,15 +1818,6 @@ video {
|
|
|
1789
1818
|
.opacity-80 {
|
|
1790
1819
|
opacity: 0.8;
|
|
1791
1820
|
}
|
|
1792
|
-
.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1793
|
-
--tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
|
|
1794
|
-
--tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
|
|
1795
|
-
-webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1796
|
-
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1797
|
-
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1798
|
-
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
|
|
1799
|
-
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
|
|
1800
|
-
}
|
|
1801
1821
|
.shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1802
1822
|
--tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
|
|
1803
1823
|
--tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
|
|
@@ -1807,6 +1827,15 @@ video {
|
|
|
1807
1827
|
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
1808
1828
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
|
|
1809
1829
|
}
|
|
1830
|
+
.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1831
|
+
--tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
|
|
1832
|
+
--tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
|
|
1833
|
+
-webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1834
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1835
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1836
|
+
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
|
|
1837
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
|
|
1838
|
+
}
|
|
1810
1839
|
.shadow-inner {
|
|
1811
1840
|
--tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
|
|
1812
1841
|
--tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
|
|
@@ -1909,7 +1938,7 @@ video {
|
|
|
1909
1938
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
1910
1939
|
}
|
|
1911
1940
|
.counter-reset {
|
|
1912
|
-
counter-reset:
|
|
1941
|
+
counter-reset: cnt1663315995392;
|
|
1913
1942
|
}
|
|
1914
1943
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
1915
1944
|
font-size: 0.75rem;
|
|
@@ -2292,7 +2321,7 @@ video {
|
|
|
2292
2321
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2293
2322
|
}
|
|
2294
2323
|
.-ordered {
|
|
2295
|
-
counter-increment:
|
|
2324
|
+
counter-increment: cnt1663315995392 1;
|
|
2296
2325
|
}
|
|
2297
2326
|
.-ordered::before {
|
|
2298
2327
|
position: absolute;
|
|
@@ -2309,7 +2338,7 @@ video {
|
|
|
2309
2338
|
letter-spacing: .0125em;
|
|
2310
2339
|
--tw-text-opacity: 1;
|
|
2311
2340
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2312
|
-
content: counter(
|
|
2341
|
+
content: counter(cnt1663315995392);
|
|
2313
2342
|
}
|
|
2314
2343
|
/*! purgecss start ignore */
|
|
2315
2344
|
:root,
|
|
@@ -2807,8 +2836,10 @@ video {
|
|
|
2807
2836
|
}
|
|
2808
2837
|
@media print {
|
|
2809
2838
|
|
|
2810
|
-
.print\:
|
|
2811
|
-
display:
|
|
2839
|
+
.print\:flex {
|
|
2840
|
+
display: -webkit-box;
|
|
2841
|
+
display: -ms-flexbox;
|
|
2842
|
+
display: flex;
|
|
2812
2843
|
}
|
|
2813
2844
|
|
|
2814
2845
|
.print\:hidden {
|
|
@@ -3122,9 +3153,8 @@ video {
|
|
|
3122
3153
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
3123
3154
|
}
|
|
3124
3155
|
|
|
3125
|
-
.md
|
|
3126
|
-
padding
|
|
3127
|
-
padding-right: 0px !important;
|
|
3156
|
+
.md\:p-4 {
|
|
3157
|
+
padding: 1rem;
|
|
3128
3158
|
}
|
|
3129
3159
|
|
|
3130
3160
|
.md\:px-0 {
|
|
@@ -3132,6 +3162,11 @@ video {
|
|
|
3132
3162
|
padding-right: 0px;
|
|
3133
3163
|
}
|
|
3134
3164
|
|
|
3165
|
+
.md\:\!px-0 {
|
|
3166
|
+
padding-left: 0px !important;
|
|
3167
|
+
padding-right: 0px !important;
|
|
3168
|
+
}
|
|
3169
|
+
|
|
3135
3170
|
.md\:px-4 {
|
|
3136
3171
|
padding-left: 1rem;
|
|
3137
3172
|
padding-right: 1rem;
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}}
|
|
9
9
|
</nav>
|
|
10
10
|
{{else}}
|
|
11
|
-
{{#>components/content_nav/
|
|
11
|
+
{{#>components/content_nav/content_nav_dropdown
|
|
12
12
|
_componentClass="c-content-nav w-full"
|
|
13
13
|
_teasersize=../_teasersize
|
|
14
14
|
_iconOpen="arrow-down"
|
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
_maindivclass="flex flex-wrap mt-0"
|
|
22
22
|
_inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "
|
|
23
23
|
}}
|
|
24
|
-
{{/components/content_nav/
|
|
24
|
+
{{/components/content_nav/content_nav_dropdown}}
|
|
25
25
|
{{/if}}
|
|
26
26
|
{{/with}}
|
|
File without changes
|
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen
|
|
1
|
+
<ul :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && $store.contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
|
|
2
2
|
class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
|
|
3
3
|
|
|
4
4
|
{{~#each this.contentNavEntries~}}
|
|
5
5
|
|
|
6
6
|
{{~#if this.isGroup~}}
|
|
7
7
|
|
|
8
|
-
{{#if ../isDropdown}}
|
|
9
|
-
|
|
8
|
+
{{#if ../isDropdown}}
|
|
10
9
|
<li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">
|
|
11
10
|
<div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>
|
|
12
11
|
<ul class="c-content-nav__group-list !px-0 mt-0">
|
|
13
12
|
{{~#each this.navigationGroup~}}
|
|
14
|
-
{{> components/content_nav/content_nav_item
|
|
13
|
+
{{> components/content_nav/content_nav_item
|
|
14
|
+
_teasersize=../../_teasersize
|
|
15
|
+
_isdropdown=../../isDropdown
|
|
16
|
+
_ismixed=../../isMixed
|
|
17
|
+
_islist=../../isList
|
|
18
|
+
_isflow=../../isFlow}}
|
|
15
19
|
{{~/each~}}
|
|
16
20
|
</ul>
|
|
17
|
-
</li>
|
|
18
|
-
|
|
21
|
+
</li>
|
|
19
22
|
{{/if}}
|
|
20
|
-
{{else}}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
{{else}}
|
|
24
|
+
{{> components/content_nav/content_nav_item
|
|
25
|
+
_teasersize=../_teasersize
|
|
26
|
+
_isdropdown=../isDropdown
|
|
27
|
+
_ismixed=../isMixed
|
|
28
|
+
_islist=../isList
|
|
29
|
+
_isflow=../isFlow}}
|
|
24
30
|
{{~/if~}}
|
|
25
31
|
{{~/each~}}
|
|
26
32
|
</ul>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
|
|
2
|
-
|
|
3
|
-
<header class="relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
2
|
+
<header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
4
3
|
<div x-data
|
|
5
4
|
id="headerWrapper"
|
|
6
5
|
@resize.window="resetNav()"
|
|
@@ -13,7 +12,7 @@
|
|
|
13
12
|
</div>
|
|
14
13
|
|
|
15
14
|
<div id="brandNavWrapper"
|
|
16
|
-
class="relative flex items-center justify-center order-1 w-full bg-white z-10000
|
|
15
|
+
class="relative flex items-center justify-center order-1 w-full bg-white z-10000">
|
|
17
16
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
17
|
</div>
|
|
19
18
|
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
</div>
|
|
33
32
|
|
|
34
33
|
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0
|
|
34
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
35
|
{{> components/site_header/service_navigation/service_list }}
|
|
37
36
|
|
|
38
37
|
{{> components/site_header/navigation_search/quick_search_button }}
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
</div>
|
|
43
42
|
|
|
44
43
|
<div id="burgerWrapper"
|
|
45
|
-
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden
|
|
44
|
+
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
46
45
|
{{> components/site_header/burger }}
|
|
47
46
|
</div>
|
|
48
47
|
|
|
@@ -76,10 +75,15 @@
|
|
|
76
75
|
|
|
77
76
|
</div>
|
|
78
77
|
|
|
79
|
-
</div>
|
|
80
|
-
|
|
78
|
+
</div>
|
|
81
79
|
</header>
|
|
80
|
+
<div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
|
|
81
|
+
<img loading="lazy"
|
|
82
|
+
alt="{{loca "header_homepage_link_title"}}"
|
|
83
|
+
src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}"
|
|
84
|
+
/>
|
|
85
|
+
</div>
|
|
82
86
|
<div x-ref="myOverlay">
|
|
83
87
|
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>
|
|
84
88
|
</div>
|
|
85
|
-
</div>
|
|
89
|
+
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<a class="
|
|
1
|
+
<a class="relative flex items-center text-white fill-current sb-service-logo lg:items-end link-focus-white print:hidden"
|
|
2
2
|
href="https://www.hessenschau.de/index.html"
|
|
3
3
|
title="Startseite hessenschau . d e">
|
|
4
4
|
<span x-cloak class="absolute transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? 'opacity-0' : 'delay-200 opacity-100'" >
|
|
@@ -8,9 +8,3 @@
|
|
|
8
8
|
{{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="logo-desk flex items-center fill-white w-40 h-5 md:h-7 md:w-40 lg:h-8 lg:w-52"}}
|
|
9
9
|
</span>
|
|
10
10
|
</a>
|
|
11
|
-
<img class="hidden print:block"
|
|
12
|
-
loading="lazy"
|
|
13
|
-
alt="{{loca "header_homepage_link_title"}}"
|
|
14
|
-
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|
15
|
-
data-srcset="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg"}}"
|
|
16
|
-
/>
|
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
|
|
2
|
-
{{
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{
|
|
7
|
-
|
|
1
|
+
{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
|
|
2
|
+
{{#if this.accentedGroup}}
|
|
3
|
+
<div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">
|
|
4
|
+
{{/if}}
|
|
5
|
+
{{~#if this.hasGroupTitle}}
|
|
6
|
+
<h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
|
|
7
|
+
{{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
|
|
8
|
+
{{this.groupTitle}}
|
|
9
|
+
{{~#if this.hasLink}}</a>{{/if~}}
|
|
10
|
+
</h2>
|
|
11
|
+
{{/if}}
|
|
12
|
+
{{#if this.accentedGroup}}
|
|
13
|
+
</div>
|
|
14
|
+
<div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
17
|
+
{{#if this.accentedGroup}}
|
|
18
|
+
</div>
|
|
8
19
|
{{/if}}
|
|
9
|
-
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
10
20
|
{{/components/grid/grid_group}}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"repository": "https://github.com/szuelch/hr-design-system-handlebars",
|
|
9
|
-
"version": "0.56.
|
|
9
|
+
"version": "0.56.13",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -17,22 +17,21 @@
|
|
|
17
17
|
"teaser_contentnav": {
|
|
18
18
|
"includePath": "components/teaser/group_teaser/group_teaser",
|
|
19
19
|
"includeModel": {
|
|
20
|
-
"hasLink":
|
|
20
|
+
"hasLink": false,
|
|
21
21
|
"link": "#gruppe1",
|
|
22
22
|
"hasGroupTitle": true,
|
|
23
|
-
"groupTitle": "Gruppe 100
|
|
23
|
+
"groupTitle": "Akzentuier-Gruppe 100%, 1 x 100% ContentNav Aufklapp ",
|
|
24
24
|
"teaserSize": "100",
|
|
25
|
-
"isAccentedGroup" : true,
|
|
26
25
|
"isHighlightGroup": true,
|
|
26
|
+
"accentedGroup" : true,
|
|
27
27
|
"backgroundColor": "1",
|
|
28
28
|
"logicItems": [
|
|
29
29
|
{
|
|
30
30
|
"isSsi": true,
|
|
31
|
-
"isAccentedGroup" : true,
|
|
32
31
|
"logicItem": {
|
|
33
32
|
"includePath": "components/teaser/content_nav/teaser_content_nav",
|
|
34
33
|
"includeModel": {
|
|
35
|
-
"@->jsoninclude": "teaser/
|
|
34
|
+
"@->jsoninclude": "teaser/teaser_content_nav_dropdown_100.json"
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
}}
|
|
9
9
|
</nav>
|
|
10
10
|
{{else}}
|
|
11
|
-
{{#>components/content_nav/
|
|
11
|
+
{{#>components/content_nav/content_nav_dropdown
|
|
12
12
|
_componentClass="c-content-nav w-full"
|
|
13
13
|
_teasersize=../_teasersize
|
|
14
14
|
_iconOpen="arrow-down"
|
|
@@ -21,6 +21,6 @@
|
|
|
21
21
|
_maindivclass="flex flex-wrap mt-0"
|
|
22
22
|
_inputcontainerclass="flex bg-grey-light w-full h-10 mx-0 border-blue-congress align-center "
|
|
23
23
|
}}
|
|
24
|
-
{{/components/content_nav/
|
|
24
|
+
{{/components/content_nav/content_nav_dropdown}}
|
|
25
25
|
{{/if}}
|
|
26
26
|
{{/with}}
|
|
File without changes
|
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
<ul :class="(({{this.isMixed}} && {{_teasersize}} < 50) || ({{this.isMixed}} && window.innerWidth < 768) || {{this.isDropdown}}) && $store.contentNavDropdownIsOpen
|
|
1
|
+
<ul :class="( ({{this.isMixed}} && {{_teasersize}} < 50 ) || ( {{this.isMixed}} && window.innerWidth < 768 ) || {{this.isDropdown}} ) && $store.contentNavDropdownIsOpen == true ? '!shadow-[1px_8px_9px_0px_rgba(50,50,93,0.10)] !px-0 mt-0' : ''"
|
|
2
2
|
class="flex flex-wrap w-full px-2 z-10000 md:!px-0 last:border-b-0">
|
|
3
3
|
|
|
4
4
|
{{~#each this.contentNavEntries~}}
|
|
5
5
|
|
|
6
6
|
{{~#if this.isGroup~}}
|
|
7
7
|
|
|
8
|
-
{{#if ../isDropdown}}
|
|
9
|
-
|
|
8
|
+
{{#if ../isDropdown}}
|
|
10
9
|
<li class="w-full h-auto overflow-hidden text-base list-none border-b border-gray-400 bg-blue-accented text-blue-congress md:mx-0 font-copy fill-congress c-content-nav__group">
|
|
11
10
|
<div class="flex items-center h-10 p-2 c-content-nav__group-title">{{this.title}}</div>
|
|
12
11
|
<ul class="c-content-nav__group-list !px-0 mt-0">
|
|
13
12
|
{{~#each this.navigationGroup~}}
|
|
14
|
-
{{> components/content_nav/content_nav_item
|
|
13
|
+
{{> components/content_nav/content_nav_item
|
|
14
|
+
_teasersize=../../_teasersize
|
|
15
|
+
_isdropdown=../../isDropdown
|
|
16
|
+
_ismixed=../../isMixed
|
|
17
|
+
_islist=../../isList
|
|
18
|
+
_isflow=../../isFlow}}
|
|
15
19
|
{{~/each~}}
|
|
16
20
|
</ul>
|
|
17
|
-
</li>
|
|
18
|
-
|
|
21
|
+
</li>
|
|
19
22
|
{{/if}}
|
|
20
|
-
{{else}}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
{{else}}
|
|
24
|
+
{{> components/content_nav/content_nav_item
|
|
25
|
+
_teasersize=../_teasersize
|
|
26
|
+
_isdropdown=../isDropdown
|
|
27
|
+
_ismixed=../isMixed
|
|
28
|
+
_islist=../isList
|
|
29
|
+
_isflow=../isFlow}}
|
|
24
30
|
{{~/if~}}
|
|
25
31
|
{{~/each~}}
|
|
26
32
|
</ul>
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
|
|
2
|
-
|
|
3
|
-
<header class="relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
2
|
+
<header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">
|
|
4
3
|
<div x-data
|
|
5
4
|
id="headerWrapper"
|
|
6
5
|
@resize.window="resetNav()"
|
|
@@ -13,7 +12,7 @@
|
|
|
13
12
|
</div>
|
|
14
13
|
|
|
15
14
|
<div id="brandNavWrapper"
|
|
16
|
-
class="relative flex items-center justify-center order-1 w-full bg-white z-10000
|
|
15
|
+
class="relative flex items-center justify-center order-1 w-full bg-white z-10000">
|
|
17
16
|
{{> components/site_header/brand_navigation/brand_navigation }}
|
|
18
17
|
</div>
|
|
19
18
|
|
|
@@ -32,7 +31,7 @@
|
|
|
32
31
|
</div>
|
|
33
32
|
|
|
34
33
|
<div id="serviceItemsWrapper"
|
|
35
|
-
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0
|
|
34
|
+
class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
|
|
36
35
|
{{> components/site_header/service_navigation/service_list }}
|
|
37
36
|
|
|
38
37
|
{{> components/site_header/navigation_search/quick_search_button }}
|
|
@@ -42,7 +41,7 @@
|
|
|
42
41
|
</div>
|
|
43
42
|
|
|
44
43
|
<div id="burgerWrapper"
|
|
45
|
-
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden
|
|
44
|
+
class="flex justify-end flex-none order-2 lg:order-4 md:order-4 lg:hidden">
|
|
46
45
|
{{> components/site_header/burger }}
|
|
47
46
|
</div>
|
|
48
47
|
|
|
@@ -76,10 +75,15 @@
|
|
|
76
75
|
|
|
77
76
|
</div>
|
|
78
77
|
|
|
79
|
-
</div>
|
|
80
|
-
|
|
78
|
+
</div>
|
|
81
79
|
</header>
|
|
80
|
+
<div class="justify-center hidden w-full scale-50 brand-logo_print print:flex">
|
|
81
|
+
<img loading="lazy"
|
|
82
|
+
alt="{{loca "header_homepage_link_title"}}"
|
|
83
|
+
src="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg" _brand=(if this.brand this.brand)}}"
|
|
84
|
+
/>
|
|
85
|
+
</div>
|
|
82
86
|
<div x-ref="myOverlay">
|
|
83
87
|
<div x-cloak x-data="overlayHandler()" @click.debounce="overlayWasClicked()" x-show="shouldOverlayBeShown()" class="fixed top-0 left-0 w-screen h-screen bg-gray-800 z-10000 lg:hidden opacity-70"></div>
|
|
84
88
|
</div>
|
|
85
|
-
</div>
|
|
89
|
+
</div>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<a class="
|
|
1
|
+
<a class="relative flex items-center text-white fill-current sb-service-logo lg:items-end link-focus-white print:hidden"
|
|
2
2
|
href="https://www.hessenschau.de/index.html"
|
|
3
3
|
title="Startseite hessenschau . d e">
|
|
4
4
|
<span x-cloak class="absolute transition-opacity duration-500 ease-in-out" :class="`${percent}` < 50 ? 'opacity-0' : 'delay-200 opacity-100'" >
|
|
@@ -8,9 +8,3 @@
|
|
|
8
8
|
{{> components/base/image/icon _icon="brandlogo--desk" _iconmap="logo" _addClass="logo-desk flex items-center fill-white w-40 h-5 md:h-7 md:w-40 lg:h-8 lg:w-52"}}
|
|
9
9
|
</span>
|
|
10
10
|
</a>
|
|
11
|
-
<img class="hidden print:block"
|
|
12
|
-
loading="lazy"
|
|
13
|
-
alt="{{loca "header_homepage_link_title"}}"
|
|
14
|
-
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|
15
|
-
data-srcset="{{resourceUrl "assets/base/icons/rsslogo/brandlogo--rss.jpg"}}"
|
|
16
|
-
/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"includePath":"components/teaser/group_teaser/group_teaser","includeModel":{"hasLink":
|
|
1
|
+
{"includePath":"components/teaser/group_teaser/group_teaser","includeModel":{"hasLink":false,"link":"#gruppe1","hasGroupTitle":true,"groupTitle":"Akzentuier-Gruppe 100%, 1 x 100% ContentNav Aufklapp ","teaserSize":"100","isHighlightGroup":true,"accentedGroup":true,"backgroundColor":"1","logicItems":[{"isSsi":true,"logicItem":{"includePath":"components/teaser/content_nav/teaser_content_nav","includeModel":{"realTeasersize":"100","teasersize":"100","contentNav":{"title":"Geiler Titel","isDropdown":true,"isList":false,"isFlow":false,"isMixed":false,"isAutosuggest":false,"selectedItem":{"title":"Themen Wirtschaft"},"contentNavEntries":[{"title":"Arbeitsmarkt","isGroup":false,"isSelected":false,"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"extern"},"navigationGroup":[{}]},{"title":"Banken","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Energie","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Flughafen Kassel-Calden","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Gewerkschaften","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handel","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Handwerk","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Immobilien","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"K + S","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false},{"title":"Landwirtschaft","link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":true,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"}},"isGroup":false,"isSelected":false}]}}}}]}}
|
|
@@ -12,7 +12,18 @@ import teaserGroup100contentnav from '../fixtures/teaser_group_100_contentNav.js
|
|
|
12
12
|
<Meta
|
|
13
13
|
title="Komponenten/Teaser/Gruppen"
|
|
14
14
|
argTypes={{
|
|
15
|
-
|
|
15
|
+
teaserSize: {
|
|
16
|
+
control: {
|
|
17
|
+
type: 'select',
|
|
18
|
+
options: ['100', '66', '50', '33', '25'],
|
|
19
|
+
},
|
|
20
|
+
description: 'Teaser Größe',
|
|
21
|
+
table: {
|
|
22
|
+
defaultValue: {
|
|
23
|
+
summary: '100',
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
},
|
|
16
27
|
}}
|
|
17
28
|
parameters={{
|
|
18
29
|
layout: 'fullscreen',
|
|
@@ -59,7 +70,7 @@ Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
|
|
|
59
70
|
{groupTeaserTemplate.bind({})}
|
|
60
71
|
</Story>
|
|
61
72
|
<Story
|
|
62
|
-
name="100% Gruppe mit Content Navigation"
|
|
73
|
+
name="100% Gruppe mit Content Navigation Aufklapp"
|
|
63
74
|
args={teaserGroup100contentnav.includeModel}
|
|
64
75
|
>
|
|
65
76
|
{groupTeaserTemplate.bind({})}
|
|
@@ -1,10 +1,20 @@
|
|
|
1
|
-
{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
|
|
2
|
-
{{
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
{{
|
|
7
|
-
|
|
1
|
+
{{#>components/grid/grid_group size=this.teaserSize _backgroundColor=this.backgroundColor }}
|
|
2
|
+
{{#if this.accentedGroup}}
|
|
3
|
+
<div class="h-auto col-span-12 p-8 mx-4 rounded-tr-none rounded-bl-none bg-blue-accented rounded-3xl">
|
|
4
|
+
{{/if}}
|
|
5
|
+
{{~#if this.hasGroupTitle}}
|
|
6
|
+
<h2 class="text-2xl md:text-4xl col-span-full py-0 font-headingSerif {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
|
|
7
|
+
{{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}
|
|
8
|
+
{{this.groupTitle}}
|
|
9
|
+
{{~#if this.hasLink}}</a>{{/if~}}
|
|
10
|
+
</h2>
|
|
11
|
+
{{/if}}
|
|
12
|
+
{{#if this.accentedGroup}}
|
|
13
|
+
</div>
|
|
14
|
+
<div class="h-24 col-span-12 p-2 mx-4 my-0 -mt-10 rounded-tr-none rounded-bl-none md:p-4 bg-blue-accented rounded-3xl">
|
|
15
|
+
{{/if}}
|
|
16
|
+
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
17
|
+
{{#if this.accentedGroup}}
|
|
18
|
+
</div>
|
|
8
19
|
{{/if}}
|
|
9
|
-
{{~> components/teaser/teaser_logic/teaser_logic ~}}
|
|
10
20
|
{{/components/grid/grid_group}}
|