hr-design-system-handlebars 0.47.9 → 0.47.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 +37 -0
- package/dist/assets/index.css +53 -16
- 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 +5 -5
- 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 +5 -5
- package/src/stories/views/components/teaser/teaser_poster.hbs +9 -8
- package/src/stories/views/components/teaser/teaser_poster.stories.mdx +55 -1
- package/src/stories/views/components/teaser/data/16_7_teaserImage.json +0 -27
- package/src/stories/views/components/teaser/data/16_9_teaserImage.json +0 -17
- package/src/stories/views/components/teaser/data/teaser_alternativ_lg_serif.json +0 -130
- package/src/stories/views/components/teaser/data/teaser_alternativ_md_serif.json +0 -130
- package/src/stories/views/components/teaser/data/teaser_alternativ_sm_serif.json +0 -141
- package/src/stories/views/components/teaser/data/teaser_alternativ_xl_serif.json +0 -130
- package/src/stories/views/components/teaser/data/teaser_alternativ_xxl_serif.json +0 -122
- package/src/stories/views/components/teaser/data/teaser_article.json +0 -158
- package/src/stories/views/components/teaser/data/teaser_commentLink.json +0 -16
- package/src/stories/views/components/teaser/data/teaser_full.json +0 -574
- package/src/stories/views/components/teaser/data/teaser_standard_lg_serif.json +0 -130
- package/src/stories/views/components/teaser/data/teaser_standard_md_serif.json +0 -130
- package/src/stories/views/components/teaser/data/teaser_standard_sm_serif.json +0 -141
- package/src/stories/views/components/teaser/data/teaser_standard_xl_serif.json +0 -130
- package/src/stories/views/components/teaser/data/teaser_standard_xxl_serif.json +0 -122
- package/src/stories/views/components/teaser/data/teasers.json +0 -324
- package/src/stories/views/components/teaser/data/ticker_label.json +0 -22
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,40 @@
|
|
|
1
|
+
# v0.47.12 (Fri Jun 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- rework poster-teaser + documentation [#247](https://github.com/mumprod/hr-design-system-handlebars/pull/247) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.47.11 (Tue Jun 14 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- - deleted old data folder for teasers [#244](https://github.com/mumprod/hr-design-system-handlebars/pull/244) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v0.47.10 (Tue Jun 14 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- Alternative-Teaser zusammenbauen [#245](https://github.com/mumprod/hr-design-system-handlebars/pull/245) (zouhair1 [@selbaciri](https://github.com/selbaciri))
|
|
30
|
+
|
|
31
|
+
#### Authors: 2
|
|
32
|
+
|
|
33
|
+
- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
|
|
34
|
+
- selbaciri (zouhair1)
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
1
38
|
# v0.47.9 (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;
|
|
@@ -1750,14 +1754,22 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1750
1754
|
-ms-flex-negative: 0;
|
|
1751
1755
|
flex-shrink: 0;
|
|
1752
1756
|
}
|
|
1753
|
-
.basis-3\/5 {
|
|
1754
|
-
-ms-flex-preferred-size: 60%;
|
|
1755
|
-
flex-basis: 60%;
|
|
1756
|
-
}
|
|
1757
1757
|
.basis-2\/5 {
|
|
1758
1758
|
-ms-flex-preferred-size: 40%;
|
|
1759
1759
|
flex-basis: 40%;
|
|
1760
1760
|
}
|
|
1761
|
+
.basis-1\/3 {
|
|
1762
|
+
-ms-flex-preferred-size: 33.333333%;
|
|
1763
|
+
flex-basis: 33.333333%;
|
|
1764
|
+
}
|
|
1765
|
+
.basis-2\/3 {
|
|
1766
|
+
-ms-flex-preferred-size: 66.666667%;
|
|
1767
|
+
flex-basis: 66.666667%;
|
|
1768
|
+
}
|
|
1769
|
+
.basis-3\/5 {
|
|
1770
|
+
-ms-flex-preferred-size: 60%;
|
|
1771
|
+
flex-basis: 60%;
|
|
1772
|
+
}
|
|
1761
1773
|
.-translate-x-1\/2 {
|
|
1762
1774
|
--tw-translate-x: -50%;
|
|
1763
1775
|
-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));
|
|
@@ -1880,17 +1892,14 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1880
1892
|
.gap-y-9 {
|
|
1881
1893
|
row-gap: 2.25rem;
|
|
1882
1894
|
}
|
|
1883
|
-
.gap-y-4 {
|
|
1884
|
-
row-gap: 1rem;
|
|
1885
|
-
}
|
|
1886
|
-
.gap-x-5 {
|
|
1887
|
-
-webkit-column-gap: 1.25rem;
|
|
1888
|
-
-moz-column-gap: 1.25rem;
|
|
1889
|
-
column-gap: 1.25rem;
|
|
1890
|
-
}
|
|
1891
1895
|
.gap-y-5 {
|
|
1892
1896
|
row-gap: 1.25rem;
|
|
1893
1897
|
}
|
|
1898
|
+
.gap-x-3 {
|
|
1899
|
+
-webkit-column-gap: 0.75rem;
|
|
1900
|
+
-moz-column-gap: 0.75rem;
|
|
1901
|
+
column-gap: 0.75rem;
|
|
1902
|
+
}
|
|
1894
1903
|
.gap-x-4 {
|
|
1895
1904
|
-webkit-column-gap: 1rem;
|
|
1896
1905
|
-moz-column-gap: 1rem;
|
|
@@ -2154,6 +2163,10 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2154
2163
|
padding-top: 0.75rem;
|
|
2155
2164
|
padding-bottom: 0.75rem;
|
|
2156
2165
|
}
|
|
2166
|
+
.px-0 {
|
|
2167
|
+
padding-left: 0px;
|
|
2168
|
+
padding-right: 0px;
|
|
2169
|
+
}
|
|
2157
2170
|
.px-2 {
|
|
2158
2171
|
padding-left: 0.5rem;
|
|
2159
2172
|
padding-right: 0.5rem;
|
|
@@ -2178,10 +2191,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2178
2191
|
padding-top: 0.25rem;
|
|
2179
2192
|
padding-bottom: 0.25rem;
|
|
2180
2193
|
}
|
|
2181
|
-
.px-0 {
|
|
2182
|
-
padding-left: 0px;
|
|
2183
|
-
padding-right: 0px;
|
|
2184
|
-
}
|
|
2185
2194
|
.px-4 {
|
|
2186
2195
|
padding-left: 1rem;
|
|
2187
2196
|
padding-right: 1rem;
|
|
@@ -2689,6 +2698,11 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2689
2698
|
grid-column: span 3 / span 3;
|
|
2690
2699
|
}
|
|
2691
2700
|
|
|
2701
|
+
.md\:mx-0 {
|
|
2702
|
+
margin-left: 0px;
|
|
2703
|
+
margin-right: 0px;
|
|
2704
|
+
}
|
|
2705
|
+
|
|
2692
2706
|
.md\:mt-0 {
|
|
2693
2707
|
margin-top: 0px;
|
|
2694
2708
|
}
|
|
@@ -2761,6 +2775,23 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2761
2775
|
flex: 1 1 auto;
|
|
2762
2776
|
}
|
|
2763
2777
|
|
|
2778
|
+
.md\:basis-1\/3 {
|
|
2779
|
+
-ms-flex-preferred-size: 33.333333%;
|
|
2780
|
+
flex-basis: 33.333333%;
|
|
2781
|
+
}
|
|
2782
|
+
|
|
2783
|
+
.md\:basis-2\/3 {
|
|
2784
|
+
-ms-flex-preferred-size: 66.666667%;
|
|
2785
|
+
flex-basis: 66.666667%;
|
|
2786
|
+
}
|
|
2787
|
+
|
|
2788
|
+
.md\:flex-row {
|
|
2789
|
+
-webkit-box-orient: horizontal;
|
|
2790
|
+
-webkit-box-direction: normal;
|
|
2791
|
+
-ms-flex-direction: row;
|
|
2792
|
+
flex-direction: row;
|
|
2793
|
+
}
|
|
2794
|
+
|
|
2764
2795
|
.md\:flex-col {
|
|
2765
2796
|
-webkit-box-orient: vertical;
|
|
2766
2797
|
-webkit-box-direction: normal;
|
|
@@ -2774,6 +2805,12 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2774
2805
|
justify-content: flex-end;
|
|
2775
2806
|
}
|
|
2776
2807
|
|
|
2808
|
+
.md\:gap-x-5 {
|
|
2809
|
+
-webkit-column-gap: 1.25rem;
|
|
2810
|
+
-moz-column-gap: 1.25rem;
|
|
2811
|
+
column-gap: 1.25rem;
|
|
2812
|
+
}
|
|
2813
|
+
|
|
2777
2814
|
.md\:rounded-none {
|
|
2778
2815
|
border-radius: 0px;
|
|
2779
2816
|
}
|
|
@@ -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 gap-y-
|
|
2
|
-
<figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-
|
|
1
|
+
<article class="col-span-12 flex gap-y-5 gap-x-3 md:gap-x-5 md:px-0 {{inline-switch this.teaserSize '["50","100","hero"]' '["px-5 md:col-span-6 flex-row","flex-col md:flex-row","flex-col md:flex-row"]'}} ">
|
|
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
|
-
<div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/
|
|
8
|
-
<header class="px-5
|
|
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="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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="px-5
|
|
19
|
+
<section class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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-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.12",
|
|
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 gap-y-
|
|
2
|
-
<figure class="{{inline-switch this.teaserSize '["hero"]' '["basis-
|
|
1
|
+
<article class="col-span-12 flex gap-y-5 gap-x-3 md:gap-x-5 md:px-0 {{inline-switch this.teaserSize '["50","100","hero"]' '["px-5 md:col-span-6 flex-row","flex-col md:flex-row","flex-col md:flex-row"]'}} ">
|
|
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
|
-
<div class="{{inline-switch this.teaserSize '["hero"]' '["basis-2/
|
|
8
|
-
<header class="px-5
|
|
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="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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="px-5
|
|
19
|
+
<section class="md:px-0 px-5 {{inline-switch this.teaserSize '["50"]' '["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-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
|
+
```
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"teaserImage": {
|
|
3
|
-
"copyrightWithLinks": "",
|
|
4
|
-
"responsiveImage": {
|
|
5
|
-
"asPicture": true,
|
|
6
|
-
"asImage": false,
|
|
7
|
-
"fallback": "https://picsum.photos/id/188/480/210",
|
|
8
|
-
"sources": [
|
|
9
|
-
{
|
|
10
|
-
"media": "all and (max-width: 43.688em)",
|
|
11
|
-
"sizes": "100vw",
|
|
12
|
-
"srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w, https://picsum.photos/id/188/1920/1080 1920w"
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
"media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
|
|
16
|
-
"sizes": "100vw",
|
|
17
|
-
"srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
"media": "all and (min-width: 64em)",
|
|
21
|
-
"sizes": "960px",
|
|
22
|
-
"srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
|
|
23
|
-
}
|
|
24
|
-
]
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"teaserImage": {
|
|
3
|
-
"copyrightWithLinks": "",
|
|
4
|
-
"responsiveImage": {
|
|
5
|
-
"asPicture": false,
|
|
6
|
-
"asImage": true,
|
|
7
|
-
"fallback": "https://picsum.photos/id/188/480/210",
|
|
8
|
-
"sources": [
|
|
9
|
-
{
|
|
10
|
-
|
|
11
|
-
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
12
|
-
"srcset": "https://picsum.photos/id/188/320/180 320w, https://picsum.photos/id/188/480/270 480w, https://picsum.photos/id/188/640/360 640w, https://picsum.photos/id/188/960/540 960w"
|
|
13
|
-
}
|
|
14
|
-
]
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
}
|