hr-design-system-handlebars 0.47.11 → 0.47.14
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 +37 -0
- package/dist/assets/index.css +17 -19
- package/dist/views/components/teaser/components/teaser_heading.hbs +2 -2
- package/dist/views/components/teaser/components/teaser_title_classes.hbs +3 -0
- package/dist/views/components/teaser/components/teaser_topline.hbs +1 -1
- package/dist/views/components/teaser/teaser_alternativ.hbs +3 -3
- package/dist/views/components/teaser/teaser_poster.hbs +9 -8
- package/package.json +1 -1
- package/src/assets/fixtures/teaser/teaser_poster_lg.json +5 -1
- package/src/assets/fixtures/teaser/teaser_poster_md.json +5 -1
- package/src/assets/fixtures/teaser/teaser_poster_md_label.json +5 -1
- package/src/stories/views/components/teaser/components/teaser_heading.hbs +2 -2
- package/src/stories/views/components/teaser/components/teaser_title_classes.hbs +3 -0
- package/src/stories/views/components/teaser/components/teaser_topline.hbs +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_poster_lg.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_poster_md.json +1 -1
- package/src/stories/views/components/teaser/fixtures/teaser_poster_md_label.json +1 -1
- package/src/stories/views/components/teaser/teaser_alternativ.hbs +3 -3
- package/src/stories/views/components/teaser/teaser_poster.hbs +9 -8
- package/src/stories/views/components/teaser/teaser_poster.stories.mdx +55 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# v0.47.14 (Tue Jun 21 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- 100% & 50% Alternativ in mobile 100% Standard [#249](https://github.com/mumprod/hr-design-system-handlebars/pull/249) (zouhair1 [@selbaciri](https://github.com/selbaciri))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
10
|
+
- selbaciri (zouhair1)
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# v0.47.13 (Fri Jun 17 2022)
|
|
15
|
+
|
|
16
|
+
#### 🐛 Bug Fix
|
|
17
|
+
|
|
18
|
+
- obere runde Ecke auch in Farbverlauf [#248](https://github.com/mumprod/hr-design-system-handlebars/pull/248) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
19
|
+
|
|
20
|
+
#### Authors: 1
|
|
21
|
+
|
|
22
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
23
|
+
|
|
24
|
+
---
|
|
25
|
+
|
|
26
|
+
# v0.47.12 (Fri Jun 17 2022)
|
|
27
|
+
|
|
28
|
+
#### 🐛 Bug Fix
|
|
29
|
+
|
|
30
|
+
- rework poster-teaser + documentation [#247](https://github.com/mumprod/hr-design-system-handlebars/pull/247) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
31
|
+
|
|
32
|
+
#### Authors: 1
|
|
33
|
+
|
|
34
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# v0.47.11 (Tue Jun 14 2022)
|
|
2
39
|
|
|
3
40
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1544,6 +1544,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1544
1544
|
margin-left: 1rem;
|
|
1545
1545
|
margin-right: 1rem;
|
|
1546
1546
|
}
|
|
1547
|
+
.mx-5 {
|
|
1548
|
+
margin-left: 1.25rem;
|
|
1549
|
+
margin-right: 1.25rem;
|
|
1550
|
+
}
|
|
1547
1551
|
.mx-px {
|
|
1548
1552
|
margin-left: 1px;
|
|
1549
1553
|
margin-right: 1px;
|
|
@@ -1888,21 +1892,16 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1888
1892
|
.gap-y-9 {
|
|
1889
1893
|
row-gap: 2.25rem;
|
|
1890
1894
|
}
|
|
1891
|
-
.gap-y-
|
|
1892
|
-
row-gap:
|
|
1893
|
-
}
|
|
1894
|
-
.gap-x-3 {
|
|
1895
|
-
-webkit-column-gap: 0.75rem;
|
|
1896
|
-
-moz-column-gap: 0.75rem;
|
|
1897
|
-
column-gap: 0.75rem;
|
|
1895
|
+
.gap-y-3 {
|
|
1896
|
+
row-gap: 0.75rem;
|
|
1898
1897
|
}
|
|
1899
1898
|
.gap-x-4 {
|
|
1900
1899
|
-webkit-column-gap: 1rem;
|
|
1901
1900
|
-moz-column-gap: 1rem;
|
|
1902
1901
|
column-gap: 1rem;
|
|
1903
1902
|
}
|
|
1904
|
-
.gap-y-
|
|
1905
|
-
row-gap:
|
|
1903
|
+
.gap-y-5 {
|
|
1904
|
+
row-gap: 1.25rem;
|
|
1906
1905
|
}
|
|
1907
1906
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
1908
1907
|
--tw-divide-y-reverse: 0;
|
|
@@ -2159,10 +2158,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2159
2158
|
padding-top: 0.75rem;
|
|
2160
2159
|
padding-bottom: 0.75rem;
|
|
2161
2160
|
}
|
|
2162
|
-
.px-0 {
|
|
2163
|
-
padding-left: 0px;
|
|
2164
|
-
padding-right: 0px;
|
|
2165
|
-
}
|
|
2166
2161
|
.px-2 {
|
|
2167
2162
|
padding-left: 0.5rem;
|
|
2168
2163
|
padding-right: 0.5rem;
|
|
@@ -2187,6 +2182,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2187
2182
|
padding-top: 0.25rem;
|
|
2188
2183
|
padding-bottom: 0.25rem;
|
|
2189
2184
|
}
|
|
2185
|
+
.px-0 {
|
|
2186
|
+
padding-left: 0px;
|
|
2187
|
+
padding-right: 0px;
|
|
2188
|
+
}
|
|
2190
2189
|
.px-4 {
|
|
2191
2190
|
padding-left: 1rem;
|
|
2192
2191
|
padding-right: 1rem;
|
|
@@ -2694,6 +2693,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2694
2693
|
grid-column: span 3 / span 3;
|
|
2695
2694
|
}
|
|
2696
2695
|
|
|
2696
|
+
.md\:mx-0 {
|
|
2697
|
+
margin-left: 0px;
|
|
2698
|
+
margin-right: 0px;
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2697
2701
|
.md\:mt-0 {
|
|
2698
2702
|
margin-top: 0px;
|
|
2699
2703
|
}
|
|
@@ -2796,12 +2800,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2796
2800
|
justify-content: flex-end;
|
|
2797
2801
|
}
|
|
2798
2802
|
|
|
2799
|
-
.md\:gap-x-5 {
|
|
2800
|
-
-webkit-column-gap: 1.25rem;
|
|
2801
|
-
-moz-column-gap: 1.25rem;
|
|
2802
|
-
column-gap: 1.25rem;
|
|
2803
|
-
}
|
|
2804
|
-
|
|
2805
2803
|
.md\:rounded-none {
|
|
2806
2804
|
border-radius: 0px;
|
|
2807
2805
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{{/with~}}
|
|
6
6
|
<{{~ headlineTag ~}}>
|
|
7
7
|
{{#if topline}}
|
|
8
|
-
{{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
|
|
8
|
+
{{> components/teaser/components/teaser_topline text=topline readMore=readMore teaserType=teaserType}}
|
|
9
9
|
{{/if}}
|
|
10
10
|
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
|
|
11
|
-
</{{~ headlineTag ~}}>
|
|
11
|
+
</{{~ headlineTag ~}}>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<span
|
|
2
|
-
class="pt-px block text-base {{inline-switch
|
|
2
|
+
class="pt-px block text-base {{inline-switch teaserType '["poster"]' '["text-white","text-toplineColor"]'}} font-heading"
|
|
3
3
|
aria-label="{{readMore}}: {{text}}"
|
|
4
4
|
>
|
|
5
5
|
{{text}}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<article class="col-span-12 flex
|
|
1
|
+
<article class="col-span-12 flex flex-col md:flex-row gap-y-3 gap-x-4 md:px-0 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"]'}} ">
|
|
2
2
|
<figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
|
|
3
3
|
{{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
|
|
4
4
|
{{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
|
|
5
5
|
{{/components/base/link}}
|
|
6
6
|
</figure>
|
|
7
7
|
<div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
|
|
8
|
-
<header class="
|
|
8
|
+
<header class="px-5 md:px-0">
|
|
9
9
|
{{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
|
|
10
10
|
{{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
|
|
11
11
|
headlineTag=this.headlineTag
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
topline=this.topline}}
|
|
17
17
|
{{/components/base/link}}
|
|
18
18
|
</header>
|
|
19
|
-
<section class="
|
|
19
|
+
<section class="px-5 md:px-0">
|
|
20
20
|
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
21
21
|
{{> components/teaser/components/teaser_byline}}
|
|
22
22
|
</section>
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
<article class="relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch
|
|
2
|
-
<figure class="ar-1-1">
|
|
3
|
-
{{~> components/base/image/responsive_image this.teaserImage type=
|
|
1
|
+
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
2
|
+
<figure class="ar-1-1" aria-hidden="true">
|
|
3
|
+
{{~> components/base/image/responsive_image this.teaserImage type=this.teaserType variant=this.content.imageVariant noDelay=../_noDelay addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
|
|
4
4
|
</figure>
|
|
5
|
-
<div class="absolute flex justify-center w-full h-full
|
|
5
|
+
<div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
|
|
6
6
|
<div class="self-center block mx-4 text-center text-white">
|
|
7
|
-
{{> components/teaser/components/teaser_heading headlineTag="h2"
|
|
7
|
+
{{> components/teaser/components/teaser_heading headlineTag="h2" size=teaserSize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
|
-
{{#>components/base/link css="absolute flex w-full h-full justify-center" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.
|
|
11
|
-
<
|
|
12
|
-
{{/components/base/link}}
|
|
10
|
+
{{#>components/base/link css="absolute flex w-full h-full justify-center" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
|
|
11
|
+
<div class="self-end px-2 text-white border border-white mb-7">{{this.link.readMoreText.readMoreLong}}</div>
|
|
12
|
+
{{/components/base/link}}
|
|
13
|
+
<span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span>
|
|
13
14
|
</article>
|
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.47.
|
|
9
|
+
"version": "0.47.14",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
"@->contentpath": "teaser",
|
|
4
4
|
"@->overrides": [
|
|
5
5
|
{
|
|
6
|
-
"@->contentpath": "logicItem.includeModel.
|
|
6
|
+
"@->contentpath": "logicItem.includeModel.teaserType",
|
|
7
|
+
"@->value": "poster"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"@->contentpath": "logicItem.includeModel.teaserSize",
|
|
7
11
|
"@->value": "50"
|
|
8
12
|
},
|
|
9
13
|
{
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
"@->contentpath": "teaser",
|
|
4
4
|
"@->overrides": [
|
|
5
5
|
{
|
|
6
|
-
"@->contentpath": "logicItem.includeModel.
|
|
6
|
+
"@->contentpath": "logicItem.includeModel.teaserType",
|
|
7
|
+
"@->value": "poster"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"@->contentpath": "logicItem.includeModel.teaserSize",
|
|
7
11
|
"@->value": "33"
|
|
8
12
|
},
|
|
9
13
|
{
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
"@->contentpath": "teaser",
|
|
4
4
|
"@->overrides": [
|
|
5
5
|
{
|
|
6
|
-
"@->contentpath": "logicItem.includeModel.
|
|
6
|
+
"@->contentpath": "logicItem.includeModel.teaserType",
|
|
7
|
+
"@->value": "poster"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"@->contentpath": "logicItem.includeModel.teaserSize",
|
|
7
11
|
"@->value": "33"
|
|
8
12
|
},
|
|
9
13
|
{
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
{{/with~}}
|
|
6
6
|
<{{~ headlineTag ~}}>
|
|
7
7
|
{{#if topline}}
|
|
8
|
-
{{> components/teaser/components/teaser_topline text=topline readMore=readMore}}
|
|
8
|
+
{{> components/teaser/components/teaser_topline text=topline readMore=readMore teaserType=teaserType}}
|
|
9
9
|
{{/if}}
|
|
10
10
|
{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size teaserType=teaserType}}
|
|
11
|
-
</{{~ headlineTag ~}}>
|
|
11
|
+
</{{~ headlineTag ~}}>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<span
|
|
2
|
-
class="pt-px block text-base {{inline-switch
|
|
2
|
+
class="pt-px block text-base {{inline-switch teaserType '["poster"]' '["text-white","text-toplineColor"]'}} font-heading"
|
|
3
3
|
aria-label="{{readMore}}: {{text}}"
|
|
4
4
|
>
|
|
5
5
|
{{text}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"50","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Artikel"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/189/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/189/320/320 320w, https://picsum.photos/id/189/480/480 480w, https://picsum.photos/id/189/640/640 640w, https://picsum.photos/id/189/960/960 960w, https://picsum.photos/id/189/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}}}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Liveticker ausm Urlaub","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"
|
|
1
|
+
{"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Liveticker ausm Urlaub","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"poster","teaserSize":"33","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Ticker"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","trackingData":{"secondLevelId":"2","pageName":"hessenschau"},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"","bylineText":""}}}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"","bylineText":""}}}}}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<article class="col-span-12 flex
|
|
1
|
+
<article class="col-span-12 flex flex-col md:flex-row gap-y-3 gap-x-4 md:px-0 {{inline-switch this.teaserSize '["50"]' '["md:col-span-6"]'}} ">
|
|
2
2
|
<figure class="ar-16-9 {{inline-switch this.teaserSize '["50","100","hero"]' '["basis-2/5 md:basis-1/3", "basis-1/3" , "basis-2/3"]'}} ">
|
|
3
3
|
{{#>components/base/link css="" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
|
|
4
4
|
{{~> components/base/image/responsive_image this.teaserImage type=this.teasertype variant=this.imageVariant noDelay=../noDelay addClassImg="" ~}}
|
|
5
5
|
{{/components/base/link}}
|
|
6
6
|
</figure>
|
|
7
7
|
<div class="{{inline-switch this.teaserSize '["50","100","hero"]' '["basis-3/5 md:basis-2/3","basis-2/3","basis-1/3"]'}} ">
|
|
8
|
-
<header class="
|
|
8
|
+
<header class="px-5 md:px-0">
|
|
9
9
|
{{#>components/base/link css="hover:text-toplineColor" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="headlineLink" }}
|
|
10
10
|
{{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
|
|
11
11
|
headlineTag=this.headlineTag
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
topline=this.topline}}
|
|
17
17
|
{{/components/base/link}}
|
|
18
18
|
</header>
|
|
19
|
-
<section class="
|
|
19
|
+
<section class="px-5 md:px-0">
|
|
20
20
|
{{> components/teaser/components/teaser_text text=this.shorttext size=this.teaserSize }}
|
|
21
21
|
{{> components/teaser/components/teaser_byline}}
|
|
22
22
|
</section>
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
<article class="relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch
|
|
2
|
-
<figure class="ar-1-1">
|
|
3
|
-
{{~> components/base/image/responsive_image this.teaserImage type=
|
|
1
|
+
<article class="mx-5 md:mx-0 relative col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teaserSize '["33","50"]' '["md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
2
|
+
<figure class="ar-1-1" aria-hidden="true">
|
|
3
|
+
{{~> components/base/image/responsive_image this.teaserImage type=this.teaserType variant=this.content.imageVariant noDelay=../_noDelay addClassImg="ar__content rounded-tl-3xl rounded-br-3xl" ~}}
|
|
4
4
|
</figure>
|
|
5
|
-
<div class="absolute flex justify-center w-full h-full
|
|
5
|
+
<div class="absolute flex justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-3xl rounded-br-3xl" aria-hidden="true">
|
|
6
6
|
<div class="self-center block mx-4 text-center text-white">
|
|
7
|
-
{{> components/teaser/components/teaser_heading headlineTag="h2"
|
|
7
|
+
{{> components/teaser/components/teaser_heading headlineTag="h2" size=teaserSize font=(inline-switch isSerifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') }}
|
|
8
8
|
</div>
|
|
9
9
|
</div>
|
|
10
|
-
{{#>components/base/link css="absolute flex w-full h-full justify-center" doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.
|
|
11
|
-
<
|
|
12
|
-
{{/components/base/link}}
|
|
10
|
+
{{#>components/base/link css="absolute flex w-full h-full justify-center" isAriaHidden=true doTracking=(if this.doTracking 'true') clickLabelPrefix1=this.teaserSize clickLabelPrefix2="mediaLink" }}
|
|
11
|
+
<div class="self-end px-2 text-white border border-white mb-7">{{this.link.readMoreText.readMoreLong}}</div>
|
|
12
|
+
{{/components/base/link}}
|
|
13
|
+
<span class="sr-only">{{this.link.readMoreText.readMoreLong}}: {{this.title}}</span>
|
|
13
14
|
</article>
|
|
@@ -40,6 +40,23 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
40
40
|
return teaser({ brand, ...args })
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
# Poster-Teaser
|
|
44
|
+
|
|
45
|
+
## Beschreibung
|
|
46
|
+
|
|
47
|
+
Der Poster-Teaser besteht aus 3 übereinanderliegenden Ebenen.
|
|
48
|
+
|
|
49
|
+
Unterste-Ebene: <b>Bild (1:1)</b><br/>
|
|
50
|
+
Mittlere Ebene: <b>Dachzeile und Titel</b> + <b>Farbverlauf</b> von schwarz nach transparent<br/>
|
|
51
|
+
Oberste Ebene (verlinkt): <b>Zusatztext</b> ("zum Artikel" o.ä.)<br/>
|
|
52
|
+
|
|
53
|
+
Alle Ebenen erstrecken sich über die komplette Größe des 1:1-Bilds.
|
|
54
|
+
|
|
55
|
+
Alle enthaltenen Inhalte sind aria-hidden. Für screenreader wurde ein extra span eingebaut mit class="sr-only".<br/>
|
|
56
|
+
Inhalt dieses spans: Zusatztext + ": " + Titel
|
|
57
|
+
|
|
58
|
+
Der Poster-Teaser soll nur als 50%- bzw. 33%-Teaser verwendet werden. Diese Restriktion muss cms-seitig implementiert werden.
|
|
59
|
+
|
|
43
60
|
<Preview withToolbar>
|
|
44
61
|
<Story name="Poster 50" args={teserPosterLg.logicItem.includeModel}>
|
|
45
62
|
{Template.bind({})}
|
|
@@ -50,4 +67,41 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
50
67
|
<Story name="Poster 33 mit Label" args={teserPosterMdLabel.logicItem.includeModel}>
|
|
51
68
|
{Template.bind({})}
|
|
52
69
|
</Story>
|
|
53
|
-
</Preview>
|
|
70
|
+
</Preview>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
## Sub-Komponenten
|
|
74
|
+
|
|
75
|
+
Die Poster-Teaser-Komponente inkludiert folgende Komponenten:
|
|
76
|
+
|
|
77
|
+
<ul>
|
|
78
|
+
<li>components/base/image/<b>responsive_image</b></li>
|
|
79
|
+
<li>components/base/<b>link</b></li>
|
|
80
|
+
<li>components/teaser/components/<b>teaser_heading</b></li>
|
|
81
|
+
</ul>
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
## Props
|
|
85
|
+
|
|
86
|
+
Die Poster-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
|
|
87
|
+
|
|
88
|
+
<ul>
|
|
89
|
+
<li><b>topline</b></li>
|
|
90
|
+
<li><b>title</b></li>
|
|
91
|
+
<li><b>teaserSize</b></li>
|
|
92
|
+
<li><b>teaserType</b></li>
|
|
93
|
+
<li><b>teaserImage</b></li>
|
|
94
|
+
<li><b>content.imageVariant</b></li>
|
|
95
|
+
<li><b>isSerifHeading</b></li>
|
|
96
|
+
<li><b>doTracking</b></li>
|
|
97
|
+
<li><b>link.readMoreText.readMoreLong</b></li>
|
|
98
|
+
</ul>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
## Verwendung
|
|
102
|
+
|
|
103
|
+
Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
{{> components/teaser/teaser_poster}}
|
|
107
|
+
```
|