hr-design-system-handlebars 0.56.11 → 0.56.12
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 +12 -0
- package/dist/assets/index.css +62 -35
- 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/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/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,15 @@
|
|
|
1
|
+
# v0.56.12 (Tue Sep 06 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Dpe 1689 content navi next steps [#316](https://github.com/mumprod/hr-design-system-handlebars/pull/316) ([@StefanVesper](https://github.com/StefanVesper))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.56.11 (Mon Sep 05 2022)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -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
|
}
|
|
@@ -1177,6 +1184,9 @@ video {
|
|
|
1177
1184
|
.rounded {
|
|
1178
1185
|
border-radius: 0.25rem;
|
|
1179
1186
|
}
|
|
1187
|
+
.rounded-3xl {
|
|
1188
|
+
border-radius: 1.5rem;
|
|
1189
|
+
}
|
|
1180
1190
|
.rounded-t-xl {
|
|
1181
1191
|
border-top-left-radius: 0.75rem;
|
|
1182
1192
|
border-top-right-radius: 0.75rem;
|
|
@@ -1203,6 +1213,12 @@ video {
|
|
|
1203
1213
|
.rounded-br-3xl {
|
|
1204
1214
|
border-bottom-right-radius: 1.5rem;
|
|
1205
1215
|
}
|
|
1216
|
+
.rounded-tr-none {
|
|
1217
|
+
border-top-right-radius: 0px;
|
|
1218
|
+
}
|
|
1219
|
+
.rounded-bl-none {
|
|
1220
|
+
border-bottom-left-radius: 0px;
|
|
1221
|
+
}
|
|
1206
1222
|
.border {
|
|
1207
1223
|
border-width: 1px;
|
|
1208
1224
|
}
|
|
@@ -1213,12 +1229,12 @@ video {
|
|
|
1213
1229
|
border-left-width: 1px;
|
|
1214
1230
|
border-right-width: 1px;
|
|
1215
1231
|
}
|
|
1216
|
-
.border-b {
|
|
1217
|
-
border-bottom-width: 1px;
|
|
1218
|
-
}
|
|
1219
1232
|
.border-l {
|
|
1220
1233
|
border-left-width: 1px;
|
|
1221
1234
|
}
|
|
1235
|
+
.border-b {
|
|
1236
|
+
border-bottom-width: 1px;
|
|
1237
|
+
}
|
|
1222
1238
|
.border-l-0 {
|
|
1223
1239
|
border-left-width: 0px;
|
|
1224
1240
|
}
|
|
@@ -1432,6 +1448,9 @@ video {
|
|
|
1432
1448
|
.p-0 {
|
|
1433
1449
|
padding: 0px;
|
|
1434
1450
|
}
|
|
1451
|
+
.p-8 {
|
|
1452
|
+
padding: 2rem;
|
|
1453
|
+
}
|
|
1435
1454
|
.px-4 {
|
|
1436
1455
|
padding-left: 1rem;
|
|
1437
1456
|
padding-right: 1rem;
|
|
@@ -1464,14 +1483,14 @@ video {
|
|
|
1464
1483
|
padding-left: 0.5rem;
|
|
1465
1484
|
padding-right: 0.5rem;
|
|
1466
1485
|
}
|
|
1467
|
-
.\!px-0 {
|
|
1468
|
-
padding-left: 0px !important;
|
|
1469
|
-
padding-right: 0px !important;
|
|
1470
|
-
}
|
|
1471
1486
|
.py-1 {
|
|
1472
1487
|
padding-top: 0.25rem;
|
|
1473
1488
|
padding-bottom: 0.25rem;
|
|
1474
1489
|
}
|
|
1490
|
+
.\!px-0 {
|
|
1491
|
+
padding-left: 0px !important;
|
|
1492
|
+
padding-right: 0px !important;
|
|
1493
|
+
}
|
|
1475
1494
|
.py-6 {
|
|
1476
1495
|
padding-top: 1.5rem;
|
|
1477
1496
|
padding-bottom: 1.5rem;
|
|
@@ -1516,6 +1535,10 @@ video {
|
|
|
1516
1535
|
padding-top: 1.25rem;
|
|
1517
1536
|
padding-bottom: 1.25rem;
|
|
1518
1537
|
}
|
|
1538
|
+
.py-0 {
|
|
1539
|
+
padding-top: 0px;
|
|
1540
|
+
padding-bottom: 0px;
|
|
1541
|
+
}
|
|
1519
1542
|
.py-px {
|
|
1520
1543
|
padding-top: 1px;
|
|
1521
1544
|
padding-bottom: 1px;
|
|
@@ -1789,15 +1812,6 @@ video {
|
|
|
1789
1812
|
.opacity-80 {
|
|
1790
1813
|
opacity: 0.8;
|
|
1791
1814
|
}
|
|
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
1815
|
.shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1802
1816
|
--tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
|
|
1803
1817
|
--tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
|
|
@@ -1807,6 +1821,15 @@ video {
|
|
|
1807
1821
|
-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
1822
|
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
1823
|
}
|
|
1824
|
+
.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
|
|
1825
|
+
--tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
|
|
1826
|
+
--tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
|
|
1827
|
+
-webkit-box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1828
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1829
|
+
box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
|
|
1830
|
+
-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;
|
|
1831
|
+
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;
|
|
1832
|
+
}
|
|
1810
1833
|
.shadow-inner {
|
|
1811
1834
|
--tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
|
|
1812
1835
|
--tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
|
|
@@ -1909,7 +1932,7 @@ video {
|
|
|
1909
1932
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
1910
1933
|
}
|
|
1911
1934
|
.counter-reset {
|
|
1912
|
-
counter-reset:
|
|
1935
|
+
counter-reset: cnt1662474004567;
|
|
1913
1936
|
}
|
|
1914
1937
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
1915
1938
|
font-size: 0.75rem;
|
|
@@ -2292,7 +2315,7 @@ video {
|
|
|
2292
2315
|
--tw-ring-color: rgba(255, 255, 255, 0.5);
|
|
2293
2316
|
}
|
|
2294
2317
|
.-ordered {
|
|
2295
|
-
counter-increment:
|
|
2318
|
+
counter-increment: cnt1662474004567 1;
|
|
2296
2319
|
}
|
|
2297
2320
|
.-ordered::before {
|
|
2298
2321
|
position: absolute;
|
|
@@ -2309,7 +2332,7 @@ video {
|
|
|
2309
2332
|
letter-spacing: .0125em;
|
|
2310
2333
|
--tw-text-opacity: 1;
|
|
2311
2334
|
color: rgba(0, 0, 0, var(--tw-text-opacity));
|
|
2312
|
-
content: counter(
|
|
2335
|
+
content: counter(cnt1662474004567);
|
|
2313
2336
|
}
|
|
2314
2337
|
/*! purgecss start ignore */
|
|
2315
2338
|
:root,
|
|
@@ -3122,9 +3145,8 @@ video {
|
|
|
3122
3145
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
|
|
3123
3146
|
}
|
|
3124
3147
|
|
|
3125
|
-
.md
|
|
3126
|
-
padding
|
|
3127
|
-
padding-right: 0px !important;
|
|
3148
|
+
.md\:p-4 {
|
|
3149
|
+
padding: 1rem;
|
|
3128
3150
|
}
|
|
3129
3151
|
|
|
3130
3152
|
.md\:px-0 {
|
|
@@ -3132,6 +3154,11 @@ video {
|
|
|
3132
3154
|
padding-right: 0px;
|
|
3133
3155
|
}
|
|
3134
3156
|
|
|
3157
|
+
.md\:\!px-0 {
|
|
3158
|
+
padding-left: 0px !important;
|
|
3159
|
+
padding-right: 0px !important;
|
|
3160
|
+
}
|
|
3161
|
+
|
|
3135
3162
|
.md\:px-4 {
|
|
3136
3163
|
padding-left: 1rem;
|
|
3137
3164
|
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,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.12",
|
|
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 +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}}
|