hr-design-system-handlebars 0.52.2 → 0.53.2
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 +36 -0
- package/dist/views/components/audio/audio_element.hbs +2 -2
- package/dist/views/components/base/image/responsive_image.hbs +11 -11
- package/dist/views/components/base/link.hbs +6 -6
- package/dist/views/components/base/loadSSI.hbs +1 -1
- package/dist/views/components/base/load_dynamic.hbs +1 -1
- package/dist/views/components/grid/grid.hbs +29 -29
- package/dist/views/components/grid/grid_group.hbs +1 -1
- package/dist/views/components/grid/grid_item.hbs +1 -1
- package/dist/views/components/label/label.hbs +14 -7
- package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
- package/dist/views/components/site_header/service_navigation/service_list.hbs +1 -1
- package/dist/views/components/teaser/components/teaser_byline.hbs +4 -4
- package/dist/views/components/teaser/components/teaser_comments.hbs +1 -1
- package/dist/views/components/teaser/components/teaser_heading.hbs +7 -7
- package/dist/views/components/teaser/components/teaser_image.hbs +2 -2
- package/dist/views/components/teaser/components/teaser_text.hbs +2 -6
- package/dist/views/components/teaser/components/teaser_title.hbs +2 -2
- package/dist/views/components/teaser/components/teaser_title_classes.hbs +10 -9
- package/dist/views/components/teaser/components/teaser_topline.hbs +3 -3
- package/dist/views/components/teaser/teaser_alternativ.hbs +10 -9
- package/dist/views/components/teaser/teaser_logic/teaser_logic.hbs +1 -1
- package/dist/views/components/teaser/teaser_logic/teaser_logic.ssi.hbs +1 -1
- package/dist/views/components/teaser/teaser_poster.hbs +5 -5
- package/dist/views/components/teaser/teaser_standard.hbs +10 -10
- package/dist/views/components/video/livestream/video_livestream.hbs +5 -5
- package/dist/views/components/video/video_element.hbs +2 -2
- package/package.json +1 -1
- package/src/stories/views/components/audio/audio_element.hbs +2 -2
- package/src/stories/views/components/base/image/responsive_image.hbs +11 -11
- package/src/stories/views/components/base/link.hbs +6 -6
- package/src/stories/views/components/base/loadSSI.hbs +1 -1
- package/src/stories/views/components/base/load_dynamic.hbs +1 -1
- package/src/stories/views/components/grid/grid.hbs +29 -29
- package/src/stories/views/components/grid/grid_group.hbs +1 -1
- package/src/stories/views/components/grid/grid_item.hbs +1 -1
- package/src/stories/views/components/label/label.hbs +14 -7
- package/src/stories/views/components/label/label.stories.mdx +26 -26
- package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
- package/src/stories/views/components/site_header/service_navigation/service_list.hbs +1 -1
- package/src/stories/views/components/teaser/components/teaser_byline.hbs +4 -4
- package/src/stories/views/components/teaser/components/teaser_comments.hbs +1 -1
- package/src/stories/views/components/teaser/components/teaser_heading.hbs +7 -7
- package/src/stories/views/components/teaser/components/teaser_heading.stories.mdx +25 -25
- package/src/stories/views/components/teaser/components/teaser_image.hbs +2 -2
- package/src/stories/views/components/teaser/components/teaser_text.hbs +2 -6
- package/src/stories/views/components/teaser/components/teaser_text.stories.mdx +10 -10
- package/src/stories/views/components/teaser/components/teaser_title.hbs +2 -2
- package/src/stories/views/components/teaser/components/teaser_title.stories.mdx +17 -17
- package/src/stories/views/components/teaser/components/teaser_title_classes.hbs +10 -9
- package/src/stories/views/components/teaser/components/teaser_topline.hbs +3 -3
- package/src/stories/views/components/teaser/components/teaser_topline.stories.mdx +34 -30
- package/src/stories/views/components/teaser/teaser_alternativ.hbs +10 -9
- package/src/stories/views/components/teaser/teaser_alternativ.stories.mdx +33 -24
- package/src/stories/views/components/teaser/teaser_alternativ_av.stories.mdx +31 -22
- package/src/stories/views/components/teaser/teaser_logic/teaser_logic.hbs +1 -1
- package/src/stories/views/components/teaser/teaser_logic/teaser_logic.ssi.hbs +1 -1
- package/src/stories/views/components/teaser/teaser_poster.hbs +5 -5
- package/src/stories/views/components/teaser/teaser_standard.hbs +10 -10
- package/src/stories/views/components/video/livestream/video_livestream.hbs +5 -5
- package/src/stories/views/components/video/video_element.hbs +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
# v0.53.2 (Thu Aug 04 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Feature/dpe 1567 [#294](https://github.com/mumprod/hr-design-system-handlebars/pull/294) ([@szuelch](https://github.com/szuelch))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- [@szuelch](https://github.com/szuelch)
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.53.1 (Thu Aug 04 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Feature/dpe 1567 [#293](https://github.com/mumprod/hr-design-system-handlebars/pull/293) ([@szuelch](https://github.com/szuelch))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- [@szuelch](https://github.com/szuelch)
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v0.53.0 (Wed Aug 03 2022)
|
|
26
|
+
|
|
27
|
+
#### 🚀 Enhancement
|
|
28
|
+
|
|
29
|
+
- BUGFIX: The items in a group are not [#292](https://github.com/mumprod/hr-design-system-handlebars/pull/292) ([@szuelch](https://github.com/szuelch))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- [@szuelch](https://github.com/szuelch)
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v0.52.2 (Tue Aug 02 2022)
|
|
2
38
|
|
|
3
39
|
#### 🐛 Bug Fix
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
>
|
|
33
33
|
{{#with _teaser}}
|
|
34
34
|
{{~#if _isCopyText~}}
|
|
35
|
-
{{> components/base/image/responsive_image this.teaserImage _type=(if this.
|
|
35
|
+
{{> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext') _addClassImg="ar__content" _addClass=../_addClass _noDelay=../_noDelay}}
|
|
36
36
|
{{else}}
|
|
37
37
|
{{#>components/base/link _cssClasses="c-teaser__mediaLink" _isAriaHidden=true
|
|
38
38
|
_doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize
|
|
39
39
|
_clickLabelPrefix2="mediaLink" }}
|
|
40
|
-
{{> components/base/image/responsive_image this.teaserImage _type=(if this.
|
|
40
|
+
{{> components/base/image/responsive_image this.teaserImage _type=(if this.teaserType this.teaserType 'story') _variant=(if this.imageVariant this.imageVariant '100-copytext') _addClassImg="js-mediaplayer__area ar__content mediaPlayerLoader__mediaplayerArea" _addClass=../_addClass _noDelay=../../_noDelay}}
|
|
41
41
|
{{/components/base/link}}
|
|
42
42
|
{{~/if~}}
|
|
43
43
|
{{~/with~}}
|
|
@@ -10,12 +10,12 @@
|
|
|
10
10
|
'_disableNoScript' don't add no script fallback
|
|
11
11
|
|
|
12
12
|
--}}
|
|
13
|
-
{{#withParam this.responsiveImage
|
|
13
|
+
{{#withParam this.responsiveImage _type _variant }}
|
|
14
14
|
{{#if this.asPicture}}
|
|
15
|
-
<picture class="{{~#if ../
|
|
15
|
+
<picture class="{{~#if ../_addClass}} {{../_addClass}}{{/if}}">
|
|
16
16
|
{{#unless _disableNoScript}}
|
|
17
17
|
<noscript>
|
|
18
|
-
<img class="{{~#if ../
|
|
18
|
+
<img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" src="{{this.fallback}}" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}">
|
|
19
19
|
</noscript>
|
|
20
20
|
{{/unless}}
|
|
21
21
|
{{#with this.sources}}
|
|
@@ -25,24 +25,24 @@
|
|
|
25
25
|
{{#with this.srcset}} srcset="{{this}}"{{/with}}>
|
|
26
26
|
{{/each}}
|
|
27
27
|
{{/with}}
|
|
28
|
-
<img class="{{~#if ../
|
|
28
|
+
<img class="{{~#if ../_addClassImg}} {{../_addClassImg}}{{/if}}" loading="{{#if ../_noDelay}}auto{{else}}lazy{{/if}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{#if ../_alttext}}{{../_alttext}}{{else}}{{../this.alttext}}{{/if}}" {{~#if ../_errorHandler }} onerror="this.onerror=null; {{../_errorHandler}}"{{/if}}>
|
|
29
29
|
</picture>
|
|
30
30
|
{{/if}}
|
|
31
31
|
|
|
32
32
|
{{#if this.asImage}}
|
|
33
33
|
{{#with this.sources.[0]}}
|
|
34
|
-
{{~#with ../../
|
|
35
|
-
{{#unless ../../
|
|
34
|
+
{{~#with ../../_addClass }}<div class="{{this}}">{{/with}}
|
|
35
|
+
{{#unless ../../_disableNoScript}}
|
|
36
36
|
<noscript>
|
|
37
|
-
<img class="{{~#if ../../
|
|
37
|
+
<img class="{{~#if ../../_addClassImg}} {{../../_addClassImg}}{{/if}}" src="{{../this.fallback}}" alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}">
|
|
38
38
|
</noscript>
|
|
39
39
|
{{/unless}}
|
|
40
40
|
<img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
|
|
41
|
-
loading="{{#if ../../
|
|
42
|
-
{{#with this.srcset}} {{#if ../../../
|
|
41
|
+
loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
|
|
42
|
+
{{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
|
|
43
43
|
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|
44
|
-
alt="{{#if ../../
|
|
45
|
-
{{~#with ../../
|
|
44
|
+
alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="{{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
|
|
45
|
+
{{~#with ../../_addClass }}</div>{{/with}}
|
|
46
46
|
{{/with}}
|
|
47
47
|
|
|
48
48
|
{{/if}}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{{#with this.link}}
|
|
2
2
|
<a {{#with this.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.url}}" {{#with this.webviewUrl}}{{/with}}
|
|
3
|
-
class="sb-link{{#if ../
|
|
4
|
-
{{#if ../
|
|
5
|
-
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../
|
|
3
|
+
class="sb-link{{#if ../_css}} {{../_css}}{{/if}}{{#if ../_doTracking}} js-load{{else}}{{#if ../this.content.isFileDownload}} js-loadScript{{/if}}{{/if}}{{#if ../_isSelected}} {{defaultIfEmpty ../_selectedCssClass "-current"}}{{/if}}"
|
|
4
|
+
{{#if ../_doNavigationTracking}}
|
|
5
|
+
data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{../_clickLabelType}}{{#if ../_clickLabelPrefix1}}::{{../_clickLabelPrefix1}}{{/if}}::{{../_clickLabelPrefix2}}-Link geklickt"}]}'
|
|
6
6
|
{{/if}}
|
|
7
|
-
{{#if ../
|
|
8
|
-
{{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../
|
|
7
|
+
{{#if ../_doTracking}}
|
|
8
|
+
{{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{#if ../this.content.isFileDownload}}{{this.pageName}}{{else}}mediabuttonclick::{{../../_clickLabelPrefix1}}::{{../../_clickLabelPrefix2}}{{/if}}"}]}'{{/with}}
|
|
9
9
|
{{else}}
|
|
10
10
|
{{#if ../this.content.isFileDownload}}
|
|
11
11
|
{{#with this.content.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
|
|
12
12
|
{{/if}}
|
|
13
13
|
{{/if}}
|
|
14
14
|
{{#if this.isTargetBlank}} target="_blank" rel="noopener{{#if this.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
|
|
15
|
-
{{#if ../
|
|
15
|
+
{{#if ../_isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
|
|
16
16
|
>
|
|
17
17
|
{{/with}}
|
|
18
18
|
{{> @partial-block }}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
|
|
2
2
|
<div class="grid grid-page">
|
|
3
3
|
<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
4
|
-
{{#>components/grid/grid_group
|
|
4
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
5
5
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
6
|
-
{{#>components/grid/grid_item
|
|
6
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
7
7
|
<a href="#">
|
|
8
8
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
9
9
|
12/12 = 100%
|
|
@@ -13,43 +13,43 @@
|
|
|
13
13
|
{{/components/grid/grid_group}}
|
|
14
14
|
{{#>components/grid/grid_group_highlight }}
|
|
15
15
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% mit blauen Hintergrung bis Rand</h2>
|
|
16
|
-
{{#>components/grid/grid_item
|
|
16
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
17
17
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
18
18
|
6/12 = 50%
|
|
19
19
|
</div>
|
|
20
20
|
{{/components/grid/grid_item}}
|
|
21
|
-
{{#>components/grid/grid_item
|
|
21
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
22
22
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
23
23
|
6/12 = 50%
|
|
24
24
|
</div>
|
|
25
25
|
{{/components/grid/grid_item}}
|
|
26
26
|
{{/components/grid/grid_group_highlight}}
|
|
27
27
|
|
|
28
|
-
{{#>components/grid/grid_group
|
|
28
|
+
{{#>components/grid/grid_group _size="100"}}
|
|
29
29
|
|
|
30
30
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
31
|
-
{{#>components/grid/grid_item
|
|
31
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
32
32
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
33
33
|
6/12 = 50%
|
|
34
34
|
</div>
|
|
35
35
|
{{/components/grid/grid_item}}
|
|
36
|
-
{{#>components/grid/grid_item
|
|
36
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
37
37
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
38
38
|
6/12 = 50%
|
|
39
39
|
</div>
|
|
40
40
|
{{/components/grid/grid_item}}
|
|
41
41
|
|
|
42
|
-
{{#>components/grid/grid_item
|
|
42
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
43
43
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
44
44
|
4/12 = 33%
|
|
45
45
|
</div>
|
|
46
46
|
{{/components/grid/grid_item}}
|
|
47
|
-
{{#>components/grid/grid_item
|
|
47
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
48
48
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
49
49
|
4/12 = 33%
|
|
50
50
|
</div>
|
|
51
51
|
{{/components/grid/grid_item}}
|
|
52
|
-
{{#>components/grid/grid_item
|
|
52
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
53
53
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
54
54
|
4/12 = 33%
|
|
55
55
|
</div>
|
|
@@ -57,25 +57,25 @@
|
|
|
57
57
|
{{/components/grid/grid_group}}
|
|
58
58
|
{{#>components/grid/grid_group_tabbed }}
|
|
59
59
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100% Tabbed</h2>
|
|
60
|
-
{{#>components/grid/grid_item
|
|
60
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
61
61
|
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
62
62
|
3/12 = 25%
|
|
63
63
|
</div>
|
|
64
64
|
{{/components/grid/grid_item}}
|
|
65
65
|
|
|
66
|
-
{{#>components/grid/grid_item
|
|
66
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
67
67
|
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
68
68
|
3/12 = 25%
|
|
69
69
|
</div>
|
|
70
70
|
{{/components/grid/grid_item}}
|
|
71
71
|
|
|
72
|
-
{{#>components/grid/grid_item
|
|
72
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
73
73
|
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
74
74
|
3/12 = 25%
|
|
75
75
|
</div>
|
|
76
76
|
{{/components/grid/grid_item}}
|
|
77
77
|
|
|
78
|
-
{{#>components/grid/grid_item
|
|
78
|
+
{{#>components/grid/grid_item _size="3"}}
|
|
79
79
|
<div class="flex items-center justify-center text-4xl text-white bg-gray-500 aspect-video">
|
|
80
80
|
3/12 = 25%
|
|
81
81
|
</div>
|
|
@@ -84,69 +84,69 @@
|
|
|
84
84
|
{{/components/grid/grid_group_tabbed}}
|
|
85
85
|
{{#>components/grid/grid_group}}
|
|
86
86
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 100%</h2>
|
|
87
|
-
{{#>components/grid/grid_item
|
|
87
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
88
88
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
89
89
|
4/12 = 33%
|
|
90
90
|
</div>
|
|
91
91
|
{{/components/grid/grid_item}}
|
|
92
|
-
{{#>components/grid/grid_item
|
|
92
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
93
93
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
94
94
|
4/12 = 33%
|
|
95
95
|
</div>
|
|
96
96
|
{{/components/grid/grid_item}}
|
|
97
|
-
{{#>components/grid/grid_item
|
|
97
|
+
{{#>components/grid/grid_item _size="4"}}
|
|
98
98
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
99
99
|
4/12 = 33%
|
|
100
100
|
</div>
|
|
101
101
|
{{/components/grid/grid_item}}
|
|
102
102
|
{{/components/grid/grid_group}}
|
|
103
|
-
{{#>components/grid/grid_group
|
|
103
|
+
{{#>components/grid/grid_group _size="50"}}
|
|
104
104
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
|
|
105
|
-
{{#>components/grid/grid_item
|
|
105
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
106
106
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
107
107
|
6/12 = 50%
|
|
108
108
|
</div>
|
|
109
109
|
{{/components/grid/grid_item}}
|
|
110
|
-
{{#>components/grid/grid_item
|
|
110
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
111
111
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
112
112
|
6/12 = 50%
|
|
113
113
|
</div>
|
|
114
114
|
{{/components/grid/grid_item}}
|
|
115
115
|
{{/components/grid/grid_group}}
|
|
116
|
-
{{#>components/grid/grid_group
|
|
116
|
+
{{#>components/grid/grid_group _size="50"}}
|
|
117
117
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 50%</h2>
|
|
118
|
-
{{#>components/grid/grid_item
|
|
118
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
119
119
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
120
120
|
6/12 = 50%
|
|
121
121
|
</div>
|
|
122
122
|
{{/components/grid/grid_item}}
|
|
123
|
-
{{#>components/grid/grid_item
|
|
123
|
+
{{#>components/grid/grid_item _size="6"}}
|
|
124
124
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
125
125
|
6/12 = 50%
|
|
126
126
|
</div>
|
|
127
127
|
{{/components/grid/grid_item}}
|
|
128
128
|
{{/components/grid/grid_group}}
|
|
129
|
-
{{#>components/grid/grid_group
|
|
129
|
+
{{#>components/grid/grid_group _size="66"}}
|
|
130
130
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 66%</h2>
|
|
131
|
-
{{#>components/grid/grid_item
|
|
131
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
132
132
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
133
133
|
8/12 = 66%
|
|
134
134
|
</div>
|
|
135
135
|
{{/components/grid/grid_item}}
|
|
136
|
-
{{#>components/grid/grid_item
|
|
136
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
137
137
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
138
138
|
8/12 = 66%
|
|
139
139
|
</div>
|
|
140
140
|
{{/components/grid/grid_item}}
|
|
141
141
|
{{/components/grid/grid_group}}
|
|
142
|
-
{{#>components/grid/grid_group
|
|
142
|
+
{{#>components/grid/grid_group _size="33"}}
|
|
143
143
|
<h2 class="text-4xl headline--barrier col-span-full">Gruppen 33%</h2>
|
|
144
|
-
{{#>components/grid/grid_item
|
|
144
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
145
145
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
146
146
|
4/12 = 33%
|
|
147
147
|
</div>
|
|
148
148
|
{{/components/grid/grid_item}}
|
|
149
|
-
{{#>components/grid/grid_item
|
|
149
|
+
{{#>components/grid/grid_item _size="12"}}
|
|
150
150
|
<div class="flex items-center justify-center text-5xl text-white bg-gray-500 aspect-video">
|
|
151
151
|
4/12 = 33%
|
|
152
152
|
</div>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<section class="grid grid-cols-12 bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch
|
|
1
|
+
<section class="grid grid-cols-12 items-start bg-white content-start gap-x-6 gap-y-6 col-span-12 {{inline-switch _size '["100","66","50","33","25"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}">
|
|
2
2
|
{{> @partial-block }}
|
|
3
3
|
</section>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<article class="col-span-12 {{inline-switch
|
|
1
|
+
<article class="col-span-12 {{inline-switch _size '["12","8","6","4","3"]' '["","md:col-span-8","md:col-span-6","md:col-span-4","md:col-span-3"]'}}" >
|
|
2
2
|
{{> @partial-block }}
|
|
3
3
|
</article>
|
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
<span
|
|
2
|
-
|
|
1
|
+
<span
|
|
2
|
+
class='sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-5.5 font-heading
|
|
3
|
+
{{inline-switch
|
|
4
|
+
_type
|
|
5
|
+
'["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]'
|
|
6
|
+
'["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'
|
|
7
|
+
}}'
|
|
8
|
+
>
|
|
9
|
+
{{_text}}
|
|
3
10
|
</span>
|
|
4
|
-
{{~#with this.byline
|
|
5
|
-
<span class=
|
|
6
|
-
{{~#if this.bylineSsi
|
|
11
|
+
{{~#with this.byline~}}
|
|
12
|
+
<span class='ml-2 text-xs text-grey-scorpion font-headingSerif'>
|
|
13
|
+
{{~#if this.bylineSsi~}}
|
|
7
14
|
{{{this.bylineSsi}}}
|
|
8
|
-
{{~else
|
|
15
|
+
{{~else~}}
|
|
9
16
|
{{this.bylineText}}
|
|
10
|
-
{{~/if
|
|
17
|
+
{{~/if~}}
|
|
11
18
|
</span>
|
|
12
19
|
{{~/with~}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
2
2
|
class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
|
|
3
|
-
{{#>components/base/link
|
|
3
|
+
{{#>components/base/link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
|
|
4
4
|
{{this.text}}
|
|
5
5
|
{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
|
|
6
6
|
{{/components/base/link}}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
{{#with this.serviceNavigationSSILinks}}
|
|
9
9
|
<ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
|
|
10
10
|
{{#each this}}
|
|
11
|
-
{{> components/base/loadSSI
|
|
11
|
+
{{> components/base/loadSSI _templatePath='components/site_header/service_navigation/service_navigation_item' }}
|
|
12
12
|
{{/each}}
|
|
13
13
|
</ul>
|
|
14
14
|
{{/with}}
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
{{~#if this.showTeaserInfoSection}}
|
|
21
21
|
<span class="uppercase">
|
|
22
|
-
{{../documentSection~}}
|
|
22
|
+
{{../this.documentSection~}}
|
|
23
23
|
</span>
|
|
24
24
|
<span class="mx-px last-of-type:hidden">|</span>
|
|
25
25
|
{{/if}}
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
{{/with}}
|
|
29
29
|
|
|
30
30
|
{{!--Profiles--}}
|
|
31
|
-
{{#if profiles}}
|
|
32
|
-
<span>{{profiles}}</span>
|
|
31
|
+
{{#if this.profiles}}
|
|
32
|
+
<span>{{this.profiles}}</span>
|
|
33
33
|
<span class="mx-px last-of-type:hidden">|</span>
|
|
34
34
|
{{/if}}
|
|
35
35
|
|
|
36
36
|
{{!--Comments--}}
|
|
37
37
|
{{#with this.commentsSsi}}
|
|
38
|
-
{{> components/base/loadSSI
|
|
38
|
+
{{> components/base/loadSSI _templatePath='components/teaser/components/teaser_comments' }}
|
|
39
39
|
{{/with}}
|
|
40
40
|
</p>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{{#with this.commentLink}}
|
|
2
2
|
<span class="whitespace-nowrap">
|
|
3
|
-
{{#>components/base/link css="hover:underline decoration-1"
|
|
3
|
+
{{#>components/base/link css="hover:underline decoration-1" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="comment" }}
|
|
4
4
|
{{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
|
|
5
5
|
<span class="sr-only">{{loca "comment_anchor_1"}}</span>
|
|
6
6
|
<span class="text-toplineColor">{{../../this.commentNumber}}</span>
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
{{#with
|
|
1
|
+
{{#with _label}}
|
|
2
2
|
<div class="leading-5.5">
|
|
3
|
-
{{> components/label/label
|
|
3
|
+
{{> components/label/label _type=this.type _text=(loca this.loca)}}
|
|
4
4
|
</div>
|
|
5
5
|
{{/with~}}
|
|
6
|
-
<{{~
|
|
7
|
-
{{#if
|
|
8
|
-
{{> components/teaser/components/teaser_topline
|
|
6
|
+
<{{~ _headlineTag ~}}>
|
|
7
|
+
{{#if _topline}}
|
|
8
|
+
{{> components/teaser/components/teaser_topline _text=_topline _readMore=_readMore _teaserType=_teaserType}}
|
|
9
9
|
{{/if}}
|
|
10
|
-
{{> components/teaser/components/teaser_title
|
|
11
|
-
</{{~
|
|
10
|
+
{{> components/teaser/components/teaser_title _text=_title _fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1}}
|
|
11
|
+
</{{~ _headlineTag ~}}>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
{{#>components/base/link
|
|
2
|
-
{{~> components/base/image/responsive_image this.teaserImage
|
|
1
|
+
{{#>components/base/link _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="mediaLink" }}
|
|
2
|
+
{{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=../this.dontLazyload _addClassImg="" ~}}
|
|
3
3
|
{{/components/base/link}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes
|
|
2
|
-
{{~
|
|
1
|
+
<span class='block mt-0.5 {{> components/teaser/components/teaser_title_classes _size=_size _teaserType=_teaserType _fontVariant=_fontVariant _isMobile1to1=_isMobile1to1}}'>
|
|
2
|
+
{{~_text~}}
|
|
3
3
|
</span>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
{{
|
|
1
|
+
{{!
|
|
2
2
|
This handlebars template is responisible to render the needed classnames for Teaser headlines
|
|
3
3
|
As we use tailwind css no cascade is used to style components. As Teaser Headline Sizes dependent
|
|
4
4
|
on 4 parameters the logic was outsourced to this file.
|
|
@@ -9,36 +9,37 @@ the 4 parameters are:
|
|
|
9
9
|
- _isMobile1to1
|
|
10
10
|
- fontVariant
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
}}
|
|
13
|
+
|
|
14
|
+
{{~#switch _teaserType~}}
|
|
14
15
|
{{~#case 'standard-ds'~}}
|
|
15
16
|
{{~#if _isMobile1to1~}}
|
|
16
17
|
{{~inline-switch
|
|
17
|
-
|
|
18
|
+
_size
|
|
18
19
|
'["hero","100","25"]'
|
|
19
20
|
'["text-lg md:text-4xl","text-lg md:text-4xl","text-lg","text-lg md:text-2xl"]'
|
|
20
21
|
~}}
|
|
21
22
|
{{~else~}}
|
|
22
23
|
{{~inline-switch
|
|
23
|
-
|
|
24
|
+
_size
|
|
24
25
|
'["hero","100","25"]'
|
|
25
26
|
'["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg","text-2xl"]'
|
|
26
27
|
~}}
|
|
27
|
-
{{~/if~}}
|
|
28
|
+
{{~/if~}}
|
|
28
29
|
{{~/case~}}
|
|
29
30
|
{{~#case 'alternative-ds'~}}
|
|
30
31
|
{{~inline-switch
|
|
31
|
-
|
|
32
|
+
_size
|
|
32
33
|
'["hero","100","50"]'
|
|
33
34
|
'["text-2xl md:text-3xl","text-lg md:text-3xl","text-lg md:text-2xl"]'
|
|
34
35
|
~}}
|
|
35
36
|
{{~/case~}}
|
|
36
37
|
{{~#case 'poster-ds'~}}
|
|
37
|
-
{{~inline-switch
|
|
38
|
+
{{~inline-switch _size '["50","33"]' '["text-2xl md:text-4xl","text-2xl"]'~}}
|
|
38
39
|
{{~/case~}}
|
|
39
40
|
{{~/switch~}}
|
|
40
41
|
{{~inline-switch
|
|
41
|
-
|
|
42
|
+
_fontVariant
|
|
42
43
|
'["serif", "sans-serif"]'
|
|
43
44
|
'[" font-headingSerif"," font-heading font-bold"," font-headingSerif"]'
|
|
44
45
|
~}}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<span
|
|
2
2
|
class='pt-px block text-base
|
|
3
|
-
{{inline-switch
|
|
3
|
+
{{inline-switch _teaserType '["poster-ds"]' '["text-white","text-toplineColor"]'}}
|
|
4
4
|
font-heading'
|
|
5
|
-
aria-label='{{
|
|
5
|
+
aria-label='{{_readMore}}: {{_text}}'
|
|
6
6
|
>
|
|
7
|
-
{{
|
|
7
|
+
{{_text}}
|
|
8
8
|
</span>
|
|
@@ -9,18 +9,19 @@
|
|
|
9
9
|
</figure>
|
|
10
10
|
<div class="{{~inline-switch this.teaserSize '["hero","100","50"]' '["basis-1/3"," basis-3/5 md:basis-2/3"," basis-3/5 md:basis-1/2"]'~}}">
|
|
11
11
|
<header class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
12
|
-
{{#>components/base/link
|
|
13
|
-
{{> components/teaser/components/teaser_heading
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
12
|
+
{{#>components/base/link _css="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.teaserSize _clickLabelPrefix2="headlineLink" }}
|
|
13
|
+
{{> components/teaser/components/teaser_heading _fontVariant=this.headingFontVariant
|
|
14
|
+
_headlineTag=this.headlineTag
|
|
15
|
+
_label=this.label
|
|
16
|
+
_readMore=this.link.readMoreText.readMoreScreenreader
|
|
17
|
+
_size=this.teaserSize
|
|
18
|
+
_title=this.title
|
|
19
|
+
_teaserType=this.teaserType
|
|
20
|
+
_topline=this.topline}}
|
|
20
21
|
{{/components/base/link}}
|
|
21
22
|
</header>
|
|
22
23
|
<section class="md:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
|
|
23
|
-
{{> components/teaser/components/teaser_text
|
|
24
|
+
{{> components/teaser/components/teaser_text _text=this.shorttext _size=this.teaserSize }}
|
|
24
25
|
{{> components/teaser/components/teaser_byline}}
|
|
25
26
|
</section>
|
|
26
27
|
</div>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
{{~else}}
|
|
9
9
|
{{~#with this.includeModel~}}
|
|
10
10
|
{{~#if (isStorybook)~}}
|
|
11
|
-
{{~> components/base/load_dynamic
|
|
11
|
+
{{~> components/base/load_dynamic _templatePath=../includePath ~}}
|
|
12
12
|
{{~else~}}
|
|
13
13
|
{{~> (lookup ../. 'includePath')~}}
|
|
14
14
|
{{~/if~}}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{{~#with this.logicItem~}}
|
|
2
2
|
{{~#with this.includeModel~}}
|
|
3
3
|
{{~#if (isStorybook)~}}
|
|
4
|
-
{{~> components/base/load_dynamic
|
|
4
|
+
{{~> components/base/load_dynamic _templatePath=../includePath ~}}
|
|
5
5
|
{{~else~}}
|
|
6
6
|
{{~> (lookup ../. 'includePath')~}}
|
|
7
7
|
{{~/if~}}
|