hr-design-system-handlebars 0.42.8 → 0.42.11
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/assets/index.css +36 -33
- package/dist/views/components/Grid/GridGroup.hbs +2 -2
- package/dist/views/components/Header/NavigationFlyout/NavigationFlyoutItem.hbs +1 -1
- package/dist/views/components/Header/ServiceNavigation/ServiceNavigationItem.hbs +1 -1
- package/dist/views/components/Label.hbs +1 -1
- package/dist/views/components/Teaser/Byline.hbs +1 -1
- package/dist/views/components/Teaser/Teaser-standard.hbs +2 -2
- package/dist/views/components/Teaser/Title.hbs +1 -1
- package/dist/views/components/Teaser/group_teaser/group_teaser.hbs +10 -0
- package/dist/views/components/Teaser/teaserText.hbs +1 -1
- package/dist/views/components/Teaser/teaser_logic/teaser_logic.hbs +17 -0
- package/dist/views/components/Teaser/teaser_logic/teaser_logic.ssi.hbs +9 -0
- package/dist/views/components/base/loadDynamic.hbs +6 -0
- package/package.json +1 -1
- package/src/stories/Typography.stories.mdx +2 -2
- package/src/stories/views/components/Grid/GridGroup.hbs +2 -2
- package/src/stories/views/components/Header/NavigationFlyout/NavigationFlyoutItem.hbs +1 -1
- package/src/stories/views/components/Header/ServiceNavigation/ServiceNavigationItem.hbs +1 -1
- package/src/stories/views/components/Label.hbs +1 -1
- package/src/stories/views/components/Teaser/Byline.hbs +1 -1
- package/src/stories/views/components/Teaser/Teaser-standard.hbs +2 -2
- package/src/stories/views/components/Teaser/Title.hbs +1 -1
- package/src/stories/views/components/Teaser/data/teaser_full.json +451 -31
- package/src/stories/views/components/Teaser/group_teaser/group_teaser.hbs +10 -0
- package/src/stories/views/components/Teaser/teaser-standard.stories.mdx +3 -1
- package/src/stories/views/components/Teaser/teaserText.hbs +1 -1
- package/src/stories/views/components/Teaser/teaserText.stories.mdx +1 -1
- package/src/stories/views/components/Teaser/teaser_logic/teaser-logic.stories.mdx +39 -0
- package/src/stories/views/components/Teaser/teaser_logic/teaser_logic.hbs +17 -0
- package/src/stories/views/components/Teaser/teaser_logic/teaser_logic.ssi.hbs +9 -0
- package/src/stories/views/components/base/loadDynamic.hbs +6 -0
- package/tailwind.config.js +5 -2
- package/dist/views/components/Headline.hbs +0 -1
- package/src/stories/views/components/Headline.hbs +0 -1
- package/src/stories/views/components/Headline.stories.mdx +0 -85
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
# v0.42.11 (Thu Apr 28 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- - some refactoring and file relocating [#221](https://github.com/mumprod/hr-design-system-handlebars/pull/221) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.42.10 (Tue Apr 26 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- Teaser Text and Headline fine tuning [#220](https://github.com/mumprod/hr-design-system-handlebars/pull/220) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v0.42.9 (Tue Apr 26 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- Dpe 1551 - group logic implementation [#218](https://github.com/mumprod/hr-design-system-handlebars/pull/218) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v0.42.8 (Tue Apr 19 2022)
|
|
2
38
|
|
|
3
39
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -1435,7 +1435,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1435
1435
|
padding-left: 1rem;
|
|
1436
1436
|
padding-right: 1rem;
|
|
1437
1437
|
font-size: 0.75rem;
|
|
1438
|
-
line-height:
|
|
1438
|
+
line-height: 1.063rem;
|
|
1439
1439
|
}
|
|
1440
1440
|
.btn--md {
|
|
1441
1441
|
padding-left: 1.25rem;
|
|
@@ -1443,7 +1443,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1443
1443
|
padding-top: 0.75rem;
|
|
1444
1444
|
padding-bottom: 0.75rem;
|
|
1445
1445
|
font-size: 0.875rem;
|
|
1446
|
-
line-height: 1.
|
|
1446
|
+
line-height: 1.188rem;
|
|
1447
1447
|
}
|
|
1448
1448
|
.btn--lg {
|
|
1449
1449
|
padding-left: 1.5rem;
|
|
@@ -1451,7 +1451,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1451
1451
|
padding-top: 0.75rem;
|
|
1452
1452
|
padding-bottom: 0.75rem;
|
|
1453
1453
|
font-size: 1rem;
|
|
1454
|
-
line-height: 1.
|
|
1454
|
+
line-height: 1.25rem;
|
|
1455
1455
|
}
|
|
1456
1456
|
.btn--xl {
|
|
1457
1457
|
padding-left: 1.5rem;
|
|
@@ -1566,6 +1566,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1566
1566
|
.-mt-10 {
|
|
1567
1567
|
margin-top: -2.5rem;
|
|
1568
1568
|
}
|
|
1569
|
+
.mt-2\.5 {
|
|
1570
|
+
margin-top: 0.625rem;
|
|
1571
|
+
}
|
|
1569
1572
|
.mr-2\.5 {
|
|
1570
1573
|
margin-right: 0.625rem;
|
|
1571
1574
|
}
|
|
@@ -1584,8 +1587,8 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1584
1587
|
.mt-0 {
|
|
1585
1588
|
margin-top: 0px;
|
|
1586
1589
|
}
|
|
1587
|
-
.mt-
|
|
1588
|
-
margin-top:
|
|
1590
|
+
.mt-3 {
|
|
1591
|
+
margin-top: 0.75rem;
|
|
1589
1592
|
}
|
|
1590
1593
|
.mr-4 {
|
|
1591
1594
|
margin-right: 1rem;
|
|
@@ -1886,13 +1889,13 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1886
1889
|
.gap-y-9 {
|
|
1887
1890
|
row-gap: 2.25rem;
|
|
1888
1891
|
}
|
|
1889
|
-
.gap-y-
|
|
1890
|
-
row-gap:
|
|
1892
|
+
.gap-y-5 {
|
|
1893
|
+
row-gap: 1.25rem;
|
|
1891
1894
|
}
|
|
1892
|
-
.gap-x-
|
|
1893
|
-
-webkit-column-gap:
|
|
1894
|
-
-moz-column-gap:
|
|
1895
|
-
column-gap:
|
|
1895
|
+
.gap-x-4 {
|
|
1896
|
+
-webkit-column-gap: 1rem;
|
|
1897
|
+
-moz-column-gap: 1rem;
|
|
1898
|
+
column-gap: 1rem;
|
|
1896
1899
|
}
|
|
1897
1900
|
.divide-y > :not([hidden]) ~ :not([hidden]) {
|
|
1898
1901
|
--tw-divide-y-reverse: 0;
|
|
@@ -2033,9 +2036,9 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2033
2036
|
--tw-bg-opacity: 1;
|
|
2034
2037
|
background-color: rgba(107, 114, 128, var(--tw-bg-opacity));
|
|
2035
2038
|
}
|
|
2036
|
-
.bg-
|
|
2039
|
+
.bg-white {
|
|
2037
2040
|
--tw-bg-opacity: 1;
|
|
2038
|
-
background-color: rgba(
|
|
2041
|
+
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
|
2039
2042
|
}
|
|
2040
2043
|
.bg-blue-200 {
|
|
2041
2044
|
--tw-bg-opacity: 1;
|
|
@@ -2045,13 +2048,13 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2045
2048
|
--tw-bg-opacity: 1;
|
|
2046
2049
|
background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
|
|
2047
2050
|
}
|
|
2051
|
+
.bg-red-400 {
|
|
2052
|
+
--tw-bg-opacity: 1;
|
|
2053
|
+
background-color: rgba(248, 113, 113, var(--tw-bg-opacity));
|
|
2054
|
+
}
|
|
2048
2055
|
.bg-current {
|
|
2049
2056
|
background-color: currentColor;
|
|
2050
2057
|
}
|
|
2051
|
-
.bg-white {
|
|
2052
|
-
--tw-bg-opacity: 1;
|
|
2053
|
-
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
|
2054
|
-
}
|
|
2055
2058
|
.bg-blue-congress {
|
|
2056
2059
|
--tw-bg-opacity: 1;
|
|
2057
2060
|
background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
|
|
@@ -2206,15 +2209,15 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2206
2209
|
}
|
|
2207
2210
|
.text-xs {
|
|
2208
2211
|
font-size: 0.75rem;
|
|
2209
|
-
line-height:
|
|
2212
|
+
line-height: 1.063rem;
|
|
2210
2213
|
}
|
|
2211
2214
|
.text-sm {
|
|
2212
2215
|
font-size: 0.875rem;
|
|
2213
|
-
line-height: 1.
|
|
2216
|
+
line-height: 1.188rem;
|
|
2214
2217
|
}
|
|
2215
2218
|
.text-base {
|
|
2216
2219
|
font-size: 1rem;
|
|
2217
|
-
line-height: 1.
|
|
2220
|
+
line-height: 1.25rem;
|
|
2218
2221
|
}
|
|
2219
2222
|
.text-lg {
|
|
2220
2223
|
font-size: 1.125rem;
|
|
@@ -2226,7 +2229,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2226
2229
|
}
|
|
2227
2230
|
.text-2xl {
|
|
2228
2231
|
font-size: 1.375rem;
|
|
2229
|
-
line-height:
|
|
2232
|
+
line-height: 1.75rem;
|
|
2230
2233
|
}
|
|
2231
2234
|
.text-3xl {
|
|
2232
2235
|
font-size: 1.875rem;
|
|
@@ -2234,7 +2237,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2234
2237
|
}
|
|
2235
2238
|
.text-4xl {
|
|
2236
2239
|
font-size: 2.125rem;
|
|
2237
|
-
line-height: 2.
|
|
2240
|
+
line-height: 2.375rem;
|
|
2238
2241
|
}
|
|
2239
2242
|
.text-5xl {
|
|
2240
2243
|
font-size: 3rem;
|
|
@@ -2440,23 +2443,23 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2440
2443
|
}
|
|
2441
2444
|
.placeholder-text-xs::-webkit-input-placeholder {
|
|
2442
2445
|
font-size: 0.75rem;
|
|
2443
|
-
line-height:
|
|
2446
|
+
line-height: 1.063rem;
|
|
2444
2447
|
}
|
|
2445
2448
|
.placeholder-text-xs::-moz-placeholder {
|
|
2446
2449
|
font-size: 0.75rem;
|
|
2447
|
-
line-height:
|
|
2450
|
+
line-height: 1.063rem;
|
|
2448
2451
|
}
|
|
2449
2452
|
.placeholder-text-xs:-ms-input-placeholder {
|
|
2450
2453
|
font-size: 0.75rem;
|
|
2451
|
-
line-height:
|
|
2454
|
+
line-height: 1.063rem;
|
|
2452
2455
|
}
|
|
2453
2456
|
.placeholder-text-xs::-ms-input-placeholder {
|
|
2454
2457
|
font-size: 0.75rem;
|
|
2455
|
-
line-height:
|
|
2458
|
+
line-height: 1.063rem;
|
|
2456
2459
|
}
|
|
2457
2460
|
.placeholder-text-xs::placeholder {
|
|
2458
2461
|
font-size: 0.75rem;
|
|
2459
|
-
line-height:
|
|
2462
|
+
line-height: 1.063rem;
|
|
2460
2463
|
}
|
|
2461
2464
|
|
|
2462
2465
|
.hide-scroll-bar {
|
|
@@ -2756,14 +2759,14 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2756
2759
|
padding-left: 0px;
|
|
2757
2760
|
}
|
|
2758
2761
|
|
|
2759
|
-
.md\:text-base {
|
|
2760
|
-
font-size: 1rem;
|
|
2761
|
-
line-height: 1.5rem;
|
|
2762
|
-
}
|
|
2763
|
-
|
|
2764
2762
|
.md\:text-4xl {
|
|
2765
2763
|
font-size: 2.125rem;
|
|
2766
|
-
line-height: 2.
|
|
2764
|
+
line-height: 2.375rem;
|
|
2765
|
+
}
|
|
2766
|
+
|
|
2767
|
+
.md\:text-base {
|
|
2768
|
+
font-size: 1rem;
|
|
2769
|
+
line-height: 1.25rem;
|
|
2767
2770
|
}
|
|
2768
2771
|
|
|
2769
2772
|
.md\:leading-4 {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<
|
|
1
|
+
<section class="grid grid-cols-12 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,5 +1,5 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
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 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
|
|
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
3
|
|
|
4
4
|
{{#>components/base/link _cssClasses=(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 }}
|
|
5
5
|
{{content.text}}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
<div :class="dropped ? 'text-blue-congress fill-current' : 'text-white fill-white'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-200">
|
|
39
39
|
<div class="flex" >
|
|
40
|
-
<span class="flex text-xs whitespace-nowrap">
|
|
40
|
+
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|
|
42
42
|
</span>
|
|
43
43
|
{{#if this.subNavigation}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["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"]' '["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"]'}}">
|
|
1
|
+
<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-6 font-heading {{inline-switch type '["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"]' '["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"]'}}">
|
|
2
2
|
{{text}}
|
|
3
3
|
</span>
|
|
4
4
|
{{~#with this.byline ~}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<article class="col-span-12 flex gap-y-
|
|
1
|
+
<article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
2
2
|
<figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
|
|
3
3
|
{{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
|
|
4
4
|
{{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
|
|
10
10
|
</header>
|
|
11
11
|
<section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
|
|
12
|
-
{{> components/Teaser/teaserText text=shorttext size=teasersize
|
|
12
|
+
{{> components/Teaser/teaserText text=shorttext size=teasersize }}
|
|
13
13
|
{{> components/Teaser/Byline}}
|
|
14
14
|
</section>
|
|
15
15
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl ","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>
|
|
1
|
+
<span class="block {{inline-switch size '["xxl","xl","sm"]' '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{{#>components/Grid/GridGroup size=this.teaserSize }}
|
|
2
|
+
{{~#if this.hasGroupTitle}}
|
|
3
|
+
<h2 class="text-4xl headline--barrier col-span-full">
|
|
4
|
+
{{~#if this.hasLink}}<a class="link" href="{{this.link.url}}">{{/if~}}
|
|
5
|
+
<span class="headline--separator__text">{{this.groupTitle}}</span>
|
|
6
|
+
{{~#if this.hasLink}}</a>{{/if~}}
|
|
7
|
+
</h2>
|
|
8
|
+
{{/if}}
|
|
9
|
+
{{~> components/Teaser/teaser_logic/teaser_logic ~}}
|
|
10
|
+
{{/components/Grid/GridGroup}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<span class="{{inline-switch size '["xxl","sm"]' '["","hidden","hidden md:block"]'}} text-sm
|
|
1
|
+
<span class="{{inline-switch size '["xxl","xl","sm"]' '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'}} text-sm mt-3 font-copy">{{text}}</span>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{{~#each this.logicItems}}
|
|
2
|
+
{{~#if this.isSsi~}}
|
|
3
|
+
{{#if (isStorybook)}}
|
|
4
|
+
{{> components/Teaser/teaser_logic/teaser_logic.ssi.hbs }}
|
|
5
|
+
{{else}}
|
|
6
|
+
{{{this.ssi}}}
|
|
7
|
+
{{/if}}
|
|
8
|
+
{{~else}}
|
|
9
|
+
{{~#with this.includeModel~}}
|
|
10
|
+
{{~#if (isStorybook)~}}
|
|
11
|
+
{{~> components/base/loadDynamic templatePath=../includePath ~}}
|
|
12
|
+
{{~else~}}
|
|
13
|
+
{{~> (lookup ../. 'includePath')~}}
|
|
14
|
+
{{~/if~}}
|
|
15
|
+
{{~/with~}}
|
|
16
|
+
{{~/if~}}
|
|
17
|
+
{{/each~}}
|
|
@@ -2,4 +2,10 @@
|
|
|
2
2
|
{{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
|
|
3
3
|
{{> components/Header/ServiceNavigation/ServiceNavigationItem}}
|
|
4
4
|
{{/case}}
|
|
5
|
+
{{#case "components/Teaser/group_teaser/group_teaser"}}
|
|
6
|
+
{{> components/Teaser/group_teaser/group_teaser}}
|
|
7
|
+
{{/case}}
|
|
8
|
+
{{#case "components/Teaser/Teaser-standard"}}
|
|
9
|
+
{{> components/Teaser/Teaser-standard}}
|
|
10
|
+
{{/case}}
|
|
5
11
|
{{/switch}}
|
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.42.
|
|
9
|
+
"version": "0.42.11",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
|
@@ -17,8 +17,8 @@ Zur Auszeichnung von Fließtexten stehen die folgenden Utility Klassen zur verf
|
|
|
17
17
|
| :---------- | :-------------------------------------------------- | ------------------ | :---------------------------------------------------- |
|
|
18
18
|
| `font-copy` | `font-family: DIN, sans-serif` | | Setzt die Eigenschaft `font-family` |
|
|
19
19
|
| `text-xs` | `font-size: 0.75rem` <br /> `line-height: 1rem` | `12px`<br />`16px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
20
|
-
| `text-sm` | `font-size: 0.875rem` <br /> `line-height: 1.
|
|
21
|
-
| `text-base` | `font-size: 1rem` <br /> `line-height: 1.
|
|
20
|
+
| `text-sm` | `font-size: 0.875rem` <br /> `line-height: 1.88rem` | `14px`<br />`19px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
21
|
+
| `text-base` | `font-size: 1rem` <br /> `line-height: 1.25rem` | `16px`<br />`20px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
22
22
|
| `text-lg` | `font-size: 1.125rem` <br /> `line-height: 1.75rem` | `18px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
23
23
|
| `text-xl` | `font-size: 1.25rem` <br /> `line-height: 1.75rem` | `20px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
|
|
24
24
|
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<
|
|
1
|
+
<section class="grid grid-cols-12 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,5 +1,5 @@
|
|
|
1
1
|
<li :class="dropped ? 'h-auto' : 'h-10'"
|
|
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 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
|
|
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
3
|
|
|
4
4
|
{{#>components/base/link _cssClasses=(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 }}
|
|
5
5
|
{{content.text}}
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
<div :class="dropped ? 'text-blue-congress fill-current' : 'text-white fill-white'" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-200">
|
|
39
39
|
<div class="flex" >
|
|
40
|
-
<span class="flex text-xs whitespace-nowrap">
|
|
40
|
+
<span class="flex text-xs leading-4 whitespace-nowrap">
|
|
41
41
|
{{text}}
|
|
42
42
|
</span>
|
|
43
43
|
{{#if this.subNavigation}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["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"]' '["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"]'}}">
|
|
1
|
+
<span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base leading-6 font-heading {{inline-switch type '["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"]' '["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"]'}}">
|
|
2
2
|
{{text}}
|
|
3
3
|
</span>
|
|
4
4
|
{{~#with this.byline ~}}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<article class="col-span-12 flex gap-y-
|
|
1
|
+
<article class="col-span-12 flex gap-y-5 gap-x-4 {{inline-switch teasersize '["sm","md","lg"]' '["px-5 md:px-0 md:col-span-3 flex-row md:flex-col","md:col-span-4 flex-col","md:col-span-6 flex-col","flex-col"]'}} ">
|
|
2
2
|
<figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full ar-1-1 md:ar-16-9", "ar-16-9"]'}} ">
|
|
3
3
|
{{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
|
|
4
4
|
{{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
|
|
10
10
|
</header>
|
|
11
11
|
<section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
|
|
12
|
-
{{> components/Teaser/teaserText text=shorttext size=teasersize
|
|
12
|
+
{{> components/Teaser/teaserText text=shorttext size=teasersize }}
|
|
13
13
|
{{> components/Teaser/Byline}}
|
|
14
14
|
</section>
|
|
15
15
|
</div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl ","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>
|
|
1
|
+
<span class="block {{inline-switch size '["xxl","xl","sm"]' '["text-2xl md:text-4xl","text-2xl md:text-4xl","text-lg ","text-2xl "]'}} {{font}} mt-0.5">{{text}}</span>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"logicItems": [
|
|
3
3
|
{
|
|
4
|
-
"includePath": "components/
|
|
4
|
+
"includePath": "components/Teaser/group_teaser/group_teaser",
|
|
5
5
|
"includeModel": {
|
|
6
6
|
"hasLink": true,
|
|
7
7
|
"link": "#gruppe1",
|
|
@@ -12,14 +12,14 @@
|
|
|
12
12
|
{
|
|
13
13
|
"isSsi": true,
|
|
14
14
|
"logicItem": {
|
|
15
|
-
"includePath": "components/
|
|
15
|
+
"includePath": "components/Teaser/Teaser-standard",
|
|
16
16
|
"includeModel": {
|
|
17
17
|
"byline": "Byline",
|
|
18
18
|
"title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
|
|
19
19
|
"topline": "Überglücklich, aber ohne Mama",
|
|
20
20
|
"extendedTitle": null,
|
|
21
21
|
"teasertype": "standard",
|
|
22
|
-
"teasersize": "
|
|
22
|
+
"teasersize": "lg",
|
|
23
23
|
"teaserDate": {
|
|
24
24
|
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
25
25
|
"htmlDate": "20.02.1983",
|
|
@@ -38,24 +38,157 @@
|
|
|
38
38
|
"teaserImage": {
|
|
39
39
|
"copyrightWithLinks": "",
|
|
40
40
|
"responsiveImage": {
|
|
41
|
-
"asPicture":
|
|
42
|
-
"asImage":
|
|
43
|
-
"fallback": "https://
|
|
41
|
+
"asPicture": false,
|
|
42
|
+
"asImage": true,
|
|
43
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
44
44
|
"sources": [
|
|
45
45
|
{
|
|
46
|
-
|
|
47
|
-
"sizes": "100vw",
|
|
48
|
-
"srcset": "https://
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
46
|
+
|
|
47
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
48
|
+
"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"
|
|
49
|
+
}
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
"hasMediaButtons": false,
|
|
54
|
+
"dontLazyload": true,
|
|
55
|
+
"realTeasersize": "100",
|
|
56
|
+
"isStandardTeaser": true,
|
|
57
|
+
"isHeroTeaser": true,
|
|
58
|
+
"isMediaTeaser": false,
|
|
59
|
+
"isGuide": false,
|
|
60
|
+
"isProgram": false,
|
|
61
|
+
"isEvent": false,
|
|
62
|
+
"isTicker": false,
|
|
63
|
+
"isAudio": false,
|
|
64
|
+
"isVideo": false,
|
|
65
|
+
"isPodcastEpisode": false,
|
|
66
|
+
"isExtOrBrandLink": false,
|
|
67
|
+
"isAuthor": false,
|
|
68
|
+
"copyright": "Copyright Text",
|
|
69
|
+
"audioAuthor": "Audio Author",
|
|
70
|
+
"hasStatus": false,
|
|
71
|
+
"hasTeaserItem": true,
|
|
72
|
+
"allowAVConsumption": false,
|
|
73
|
+
"displayEpgInfos": false,
|
|
74
|
+
"aspectRatio": "ar--teaserTop",
|
|
75
|
+
"hideGeotag": false,
|
|
76
|
+
"hideEditableByline": true,
|
|
77
|
+
"doTracking": true,
|
|
78
|
+
"trackingForArdMediatheksLink": false,
|
|
79
|
+
"showMediatheksLink": false,
|
|
80
|
+
"showAirdate": false,
|
|
81
|
+
"showProfileInfoAsByline": false,
|
|
82
|
+
"obsolet_brandOfTeaser": "hessenschau",
|
|
83
|
+
"headingSize": "h1",
|
|
84
|
+
"icon": "ortsmarke",
|
|
85
|
+
"imageVariant": "topteaser",
|
|
86
|
+
"shorttext": "shorttext",
|
|
87
|
+
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
88
|
+
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
89
|
+
"documentSection": "Gesellschaft",
|
|
90
|
+
"teaserLead": {
|
|
91
|
+
"avDocument": "",
|
|
92
|
+
"image": ""
|
|
93
|
+
},
|
|
94
|
+
"label": {
|
|
95
|
+
"type": "Ticker",
|
|
96
|
+
"loca": "ticker",
|
|
97
|
+
"byline": {
|
|
98
|
+
"bylineSsi": "BylineText aus ssi",
|
|
99
|
+
"bylineText": "BylineText"
|
|
100
|
+
}
|
|
101
|
+
},
|
|
102
|
+
"geotag": [
|
|
103
|
+
{
|
|
104
|
+
"title": "Wolfhagen"
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
"link": {
|
|
108
|
+
"url": "/teaser1",
|
|
109
|
+
"webviewUrl": "/teaser1#webview",
|
|
110
|
+
"isTargetBlank": false,
|
|
111
|
+
"hasIcon": false,
|
|
112
|
+
"iconName": "iconName",
|
|
113
|
+
"readMoreText": {
|
|
114
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
115
|
+
"readMore": "mehr",
|
|
116
|
+
"readMoreLong": "read More Long"
|
|
117
|
+
},
|
|
118
|
+
"content": {
|
|
119
|
+
"teaserImage": {
|
|
120
|
+
"copyrightWithLinks": "",
|
|
121
|
+
"responsiveImage": {
|
|
122
|
+
"asPicture": false,
|
|
123
|
+
"asImage": true,
|
|
124
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
125
|
+
"sources": [
|
|
126
|
+
{
|
|
127
|
+
|
|
128
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
129
|
+
"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"
|
|
130
|
+
}
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
"teasertype": "standard",
|
|
135
|
+
"imageVariant": "topteaser",
|
|
136
|
+
"isFileDownload": false,
|
|
137
|
+
"topline": "Überglücklich, aber ohne Mama",
|
|
138
|
+
"trackingData": {
|
|
139
|
+
"secondLevelId": "2",
|
|
140
|
+
"pageName": "hessenschau"
|
|
141
|
+
},
|
|
142
|
+
"label": {
|
|
143
|
+
"type": "Ticker",
|
|
144
|
+
"loca": "ticker",
|
|
145
|
+
"byline": {
|
|
146
|
+
"bylineSsi": "BylineText aus ssi",
|
|
147
|
+
"bylineText": "BylineText"
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
"isSsi": true,
|
|
157
|
+
"logicItem": {
|
|
158
|
+
"includePath": "components/Teaser/Teaser-standard",
|
|
159
|
+
"includeModel": {
|
|
160
|
+
"byline": "Byline",
|
|
161
|
+
"title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
|
|
162
|
+
"topline": "Überglücklich, aber ohne Mama",
|
|
163
|
+
"extendedTitle": null,
|
|
164
|
+
"teasertype": "standard",
|
|
165
|
+
"teasersize": "lg",
|
|
166
|
+
"teaserDate": {
|
|
167
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
168
|
+
"htmlDate": "20.02.1983",
|
|
169
|
+
"date": "17.04.22",
|
|
170
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
171
|
+
},
|
|
172
|
+
"teaserInfo": {
|
|
173
|
+
"showTeaserInfo": true,
|
|
174
|
+
"showTeaserInfoSection": true,
|
|
175
|
+
"showTeaserInfoChannel": true,
|
|
176
|
+
"showTeaserInfoAll": true,
|
|
177
|
+
"showTeaserInfoDate": true,
|
|
178
|
+
"showTeaserInfoDateTime": true,
|
|
179
|
+
"showTeaserInfoProgramRef": true
|
|
180
|
+
},
|
|
181
|
+
"teaserImage": {
|
|
182
|
+
"copyrightWithLinks": "",
|
|
183
|
+
"responsiveImage": {
|
|
184
|
+
"asPicture": false,
|
|
185
|
+
"asImage": true,
|
|
186
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
187
|
+
"sources": [
|
|
55
188
|
{
|
|
56
|
-
|
|
57
|
-
"sizes": "960px",
|
|
58
|
-
"srcset": "https://
|
|
189
|
+
|
|
190
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
191
|
+
"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"
|
|
59
192
|
}
|
|
60
193
|
]
|
|
61
194
|
}
|
|
@@ -129,24 +262,311 @@
|
|
|
129
262
|
"teaserImage": {
|
|
130
263
|
"copyrightWithLinks": "",
|
|
131
264
|
"responsiveImage": {
|
|
132
|
-
"asPicture":
|
|
133
|
-
"asImage":
|
|
265
|
+
"asPicture": false,
|
|
266
|
+
"asImage": true,
|
|
134
267
|
"fallback": "https://picsum.photos/id/188/480/210",
|
|
135
268
|
"sources": [
|
|
136
269
|
{
|
|
137
|
-
|
|
138
|
-
"sizes": "100vw",
|
|
139
|
-
"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
|
|
140
|
-
}
|
|
270
|
+
|
|
271
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
272
|
+
"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"
|
|
273
|
+
}
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
},
|
|
277
|
+
"teasertype": "standard",
|
|
278
|
+
"imageVariant": "topteaser",
|
|
279
|
+
"isFileDownload": false,
|
|
280
|
+
"topline": "Überglücklich, aber ohne Mama",
|
|
281
|
+
"trackingData": {
|
|
282
|
+
"secondLevelId": "2",
|
|
283
|
+
"pageName": "hessenschau"
|
|
284
|
+
},
|
|
285
|
+
"label": {
|
|
286
|
+
"type": "Ticker",
|
|
287
|
+
"loca": "ticker",
|
|
288
|
+
"byline": {
|
|
289
|
+
"bylineSsi": "BylineText aus ssi",
|
|
290
|
+
"bylineText": "BylineText"
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
]
|
|
299
|
+
}
|
|
300
|
+
},{
|
|
301
|
+
"includePath": "components/Teaser/group_teaser/group_teaser",
|
|
302
|
+
"includeModel": {
|
|
303
|
+
"hasLink": true,
|
|
304
|
+
"link": "#gruppe1",
|
|
305
|
+
"hasGroupTitle": true,
|
|
306
|
+
"groupTitle": "Gruppe 100%",
|
|
307
|
+
"teaserSize": "100",
|
|
308
|
+
"logicItems": [
|
|
309
|
+
{
|
|
310
|
+
"isSsi": true,
|
|
311
|
+
"logicItem": {
|
|
312
|
+
"includePath": "components/Teaser/Teaser-standard",
|
|
313
|
+
"includeModel": {
|
|
314
|
+
"byline": "Byline",
|
|
315
|
+
"title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
|
|
316
|
+
"topline": "Überglücklich, aber ohne Mama",
|
|
317
|
+
"extendedTitle": null,
|
|
318
|
+
"teasertype": "standard",
|
|
319
|
+
"teasersize": "lg",
|
|
320
|
+
"teaserDate": {
|
|
321
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
322
|
+
"htmlDate": "20.02.1983",
|
|
323
|
+
"date": "17.04.22",
|
|
324
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
325
|
+
},
|
|
326
|
+
"teaserInfo": {
|
|
327
|
+
"showTeaserInfo": true,
|
|
328
|
+
"showTeaserInfoSection": true,
|
|
329
|
+
"showTeaserInfoChannel": true,
|
|
330
|
+
"showTeaserInfoAll": true,
|
|
331
|
+
"showTeaserInfoDate": true,
|
|
332
|
+
"showTeaserInfoDateTime": true,
|
|
333
|
+
"showTeaserInfoProgramRef": true
|
|
334
|
+
},
|
|
335
|
+
"teaserImage": {
|
|
336
|
+
"copyrightWithLinks": "",
|
|
337
|
+
"responsiveImage": {
|
|
338
|
+
"asPicture": false,
|
|
339
|
+
"asImage": true,
|
|
340
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
341
|
+
"sources": [
|
|
342
|
+
{
|
|
343
|
+
|
|
344
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
345
|
+
"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"
|
|
346
|
+
}
|
|
347
|
+
]
|
|
348
|
+
}
|
|
349
|
+
},
|
|
350
|
+
"hasMediaButtons": false,
|
|
351
|
+
"dontLazyload": true,
|
|
352
|
+
"realTeasersize": "100",
|
|
353
|
+
"isStandardTeaser": true,
|
|
354
|
+
"isHeroTeaser": true,
|
|
355
|
+
"isMediaTeaser": false,
|
|
356
|
+
"isGuide": false,
|
|
357
|
+
"isProgram": false,
|
|
358
|
+
"isEvent": false,
|
|
359
|
+
"isTicker": false,
|
|
360
|
+
"isAudio": false,
|
|
361
|
+
"isVideo": false,
|
|
362
|
+
"isPodcastEpisode": false,
|
|
363
|
+
"isExtOrBrandLink": false,
|
|
364
|
+
"isAuthor": false,
|
|
365
|
+
"copyright": "Copyright Text",
|
|
366
|
+
"audioAuthor": "Audio Author",
|
|
367
|
+
"hasStatus": false,
|
|
368
|
+
"hasTeaserItem": true,
|
|
369
|
+
"allowAVConsumption": false,
|
|
370
|
+
"displayEpgInfos": false,
|
|
371
|
+
"aspectRatio": "ar--teaserTop",
|
|
372
|
+
"hideGeotag": false,
|
|
373
|
+
"hideEditableByline": true,
|
|
374
|
+
"doTracking": true,
|
|
375
|
+
"trackingForArdMediatheksLink": false,
|
|
376
|
+
"showMediatheksLink": false,
|
|
377
|
+
"showAirdate": false,
|
|
378
|
+
"showProfileInfoAsByline": false,
|
|
379
|
+
"obsolet_brandOfTeaser": "hessenschau",
|
|
380
|
+
"headingSize": "h1",
|
|
381
|
+
"icon": "ortsmarke",
|
|
382
|
+
"imageVariant": "topteaser",
|
|
383
|
+
"shorttext": "shorttext",
|
|
384
|
+
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
385
|
+
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
386
|
+
"documentSection": "Gesellschaft",
|
|
387
|
+
"teaserLead": {
|
|
388
|
+
"avDocument": "",
|
|
389
|
+
"image": ""
|
|
390
|
+
},
|
|
391
|
+
"label": {
|
|
392
|
+
"type": "Ticker",
|
|
393
|
+
"loca": "ticker",
|
|
394
|
+
"byline": {
|
|
395
|
+
"bylineSsi": "BylineText aus ssi",
|
|
396
|
+
"bylineText": "BylineText"
|
|
397
|
+
}
|
|
398
|
+
},
|
|
399
|
+
"geotag": [
|
|
400
|
+
{
|
|
401
|
+
"title": "Wolfhagen"
|
|
402
|
+
}
|
|
403
|
+
],
|
|
404
|
+
"link": {
|
|
405
|
+
"url": "/teaser1",
|
|
406
|
+
"webviewUrl": "/teaser1#webview",
|
|
407
|
+
"isTargetBlank": false,
|
|
408
|
+
"hasIcon": false,
|
|
409
|
+
"iconName": "iconName",
|
|
410
|
+
"readMoreText": {
|
|
411
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
412
|
+
"readMore": "mehr",
|
|
413
|
+
"readMoreLong": "read More Long"
|
|
414
|
+
},
|
|
415
|
+
"content": {
|
|
416
|
+
"teaserImage": {
|
|
417
|
+
"copyrightWithLinks": "",
|
|
418
|
+
"responsiveImage": {
|
|
419
|
+
"asPicture": false,
|
|
420
|
+
"asImage": true,
|
|
421
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
422
|
+
"sources": [
|
|
141
423
|
{
|
|
142
|
-
|
|
143
|
-
"sizes": "100vw",
|
|
144
|
-
"srcset": "https://picsum.photos/id/188/320/
|
|
145
|
-
}
|
|
424
|
+
|
|
425
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
426
|
+
"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"
|
|
427
|
+
}
|
|
428
|
+
]
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
"teasertype": "standard",
|
|
432
|
+
"imageVariant": "topteaser",
|
|
433
|
+
"isFileDownload": false,
|
|
434
|
+
"topline": "Überglücklich, aber ohne Mama",
|
|
435
|
+
"trackingData": {
|
|
436
|
+
"secondLevelId": "2",
|
|
437
|
+
"pageName": "hessenschau"
|
|
438
|
+
},
|
|
439
|
+
"label": {
|
|
440
|
+
"type": "Ticker",
|
|
441
|
+
"loca": "ticker",
|
|
442
|
+
"byline": {
|
|
443
|
+
"bylineSsi": "BylineText aus ssi",
|
|
444
|
+
"bylineText": "BylineText"
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"isSsi": true,
|
|
454
|
+
"logicItem": {
|
|
455
|
+
"includePath": "components/Teaser/Teaser-standard",
|
|
456
|
+
"includeModel": {
|
|
457
|
+
"byline": "Byline",
|
|
458
|
+
"title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
|
|
459
|
+
"topline": "Überglücklich, aber ohne Mama",
|
|
460
|
+
"extendedTitle": null,
|
|
461
|
+
"teasertype": "standard",
|
|
462
|
+
"teasersize": "lg",
|
|
463
|
+
"teaserDate": {
|
|
464
|
+
"htmlDateTime": "2022-04-17T19:30+0200",
|
|
465
|
+
"htmlDate": "20.02.1983",
|
|
466
|
+
"date": "17.04.22",
|
|
467
|
+
"dateSeparatorTime": "17.04.22, 19:30"
|
|
468
|
+
},
|
|
469
|
+
"teaserInfo": {
|
|
470
|
+
"showTeaserInfo": true,
|
|
471
|
+
"showTeaserInfoSection": true,
|
|
472
|
+
"showTeaserInfoChannel": true,
|
|
473
|
+
"showTeaserInfoAll": true,
|
|
474
|
+
"showTeaserInfoDate": true,
|
|
475
|
+
"showTeaserInfoDateTime": true,
|
|
476
|
+
"showTeaserInfoProgramRef": true
|
|
477
|
+
},
|
|
478
|
+
"teaserImage": {
|
|
479
|
+
"copyrightWithLinks": "",
|
|
480
|
+
"responsiveImage": {
|
|
481
|
+
"asPicture": false,
|
|
482
|
+
"asImage": true,
|
|
483
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
484
|
+
"sources": [
|
|
485
|
+
{
|
|
486
|
+
|
|
487
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
488
|
+
"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"
|
|
489
|
+
}
|
|
490
|
+
]
|
|
491
|
+
}
|
|
492
|
+
},
|
|
493
|
+
"hasMediaButtons": false,
|
|
494
|
+
"dontLazyload": true,
|
|
495
|
+
"realTeasersize": "100",
|
|
496
|
+
"isStandardTeaser": true,
|
|
497
|
+
"isHeroTeaser": true,
|
|
498
|
+
"isMediaTeaser": false,
|
|
499
|
+
"isGuide": false,
|
|
500
|
+
"isProgram": false,
|
|
501
|
+
"isEvent": false,
|
|
502
|
+
"isTicker": false,
|
|
503
|
+
"isAudio": false,
|
|
504
|
+
"isVideo": false,
|
|
505
|
+
"isPodcastEpisode": false,
|
|
506
|
+
"isExtOrBrandLink": false,
|
|
507
|
+
"isAuthor": false,
|
|
508
|
+
"copyright": "Copyright Text",
|
|
509
|
+
"audioAuthor": "Audio Author",
|
|
510
|
+
"hasStatus": false,
|
|
511
|
+
"hasTeaserItem": true,
|
|
512
|
+
"allowAVConsumption": false,
|
|
513
|
+
"displayEpgInfos": false,
|
|
514
|
+
"aspectRatio": "ar--teaserTop",
|
|
515
|
+
"hideGeotag": false,
|
|
516
|
+
"hideEditableByline": true,
|
|
517
|
+
"doTracking": true,
|
|
518
|
+
"trackingForArdMediatheksLink": false,
|
|
519
|
+
"showMediatheksLink": false,
|
|
520
|
+
"showAirdate": false,
|
|
521
|
+
"showProfileInfoAsByline": false,
|
|
522
|
+
"obsolet_brandOfTeaser": "hessenschau",
|
|
523
|
+
"headingSize": "h1",
|
|
524
|
+
"icon": "ortsmarke",
|
|
525
|
+
"imageVariant": "topteaser",
|
|
526
|
+
"shorttext": "shorttext",
|
|
527
|
+
"sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
|
|
528
|
+
"profiles": "Von Alf Haubitz und Alice Merton",
|
|
529
|
+
"documentSection": "Gesellschaft",
|
|
530
|
+
"teaserLead": {
|
|
531
|
+
"avDocument": "",
|
|
532
|
+
"image": ""
|
|
533
|
+
},
|
|
534
|
+
"label": {
|
|
535
|
+
"type": "Ticker",
|
|
536
|
+
"loca": "ticker",
|
|
537
|
+
"byline": {
|
|
538
|
+
"bylineSsi": "BylineText aus ssi",
|
|
539
|
+
"bylineText": "BylineText"
|
|
540
|
+
}
|
|
541
|
+
},
|
|
542
|
+
"geotag": [
|
|
543
|
+
{
|
|
544
|
+
"title": "Wolfhagen"
|
|
545
|
+
}
|
|
546
|
+
],
|
|
547
|
+
"link": {
|
|
548
|
+
"url": "/teaser1",
|
|
549
|
+
"webviewUrl": "/teaser1#webview",
|
|
550
|
+
"isTargetBlank": false,
|
|
551
|
+
"hasIcon": false,
|
|
552
|
+
"iconName": "iconName",
|
|
553
|
+
"readMoreText": {
|
|
554
|
+
"readMoreScreenreader": "Zum Artikel",
|
|
555
|
+
"readMore": "mehr",
|
|
556
|
+
"readMoreLong": "read More Long"
|
|
557
|
+
},
|
|
558
|
+
"content": {
|
|
559
|
+
"teaserImage": {
|
|
560
|
+
"copyrightWithLinks": "",
|
|
561
|
+
"responsiveImage": {
|
|
562
|
+
"asPicture": false,
|
|
563
|
+
"asImage": true,
|
|
564
|
+
"fallback": "https://picsum.photos/id/188/480/210",
|
|
565
|
+
"sources": [
|
|
146
566
|
{
|
|
147
|
-
|
|
148
|
-
"sizes": "960px",
|
|
149
|
-
"srcset": "https://picsum.photos/id/188/320/
|
|
567
|
+
|
|
568
|
+
"sizes": "(min-width: 1010px) 960px, 100vw",
|
|
569
|
+
"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"
|
|
150
570
|
}
|
|
151
571
|
]
|
|
152
572
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{{#>components/Grid/GridGroup size=this.teaserSize }}
|
|
2
|
+
{{~#if this.hasGroupTitle}}
|
|
3
|
+
<h2 class="text-4xl headline--barrier col-span-full">
|
|
4
|
+
{{~#if this.hasLink}}<a class="link" href="{{this.link.url}}">{{/if~}}
|
|
5
|
+
<span class="headline--separator__text">{{this.groupTitle}}</span>
|
|
6
|
+
{{~#if this.hasLink}}</a>{{/if~}}
|
|
7
|
+
</h2>
|
|
8
|
+
{{/if}}
|
|
9
|
+
{{~> components/Teaser/teaser_logic/teaser_logic ~}}
|
|
10
|
+
{{/components/Grid/GridGroup}}
|
|
@@ -16,6 +16,8 @@ let hero_teaser_with_comments = structuredClone(hero_teaser);
|
|
|
16
16
|
addCommentLink(hero_teaser_with_comments, comments.commentLink);
|
|
17
17
|
let md_teaser_with_comments = structuredClone(md_teaser);
|
|
18
18
|
addCommentLink(md_teaser_with_comments, comments.commentLink);
|
|
19
|
+
let sm_teaser_with_comments = structuredClone(sm_teaser);
|
|
20
|
+
addCommentLink(sm_teaser_with_comments, comments.commentLink);
|
|
19
21
|
|
|
20
22
|
<Meta title="Komponenten/Teaser/Standard"
|
|
21
23
|
parameters={{
|
|
@@ -72,7 +74,7 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
|
|
|
72
74
|
<Story name="Standard MD" args={md_teaser_with_comments}>
|
|
73
75
|
{Template.bind({})}
|
|
74
76
|
</Story>
|
|
75
|
-
<Story name="Standard SM" args={
|
|
77
|
+
<Story name="Standard SM" args={sm_teaser_with_comments}>
|
|
76
78
|
{Template.bind({})}
|
|
77
79
|
</Story>
|
|
78
80
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<span class="{{inline-switch size '["xxl","sm"]' '["","hidden","hidden md:block"]'}} text-sm
|
|
1
|
+
<span class="{{inline-switch size '["xxl","xl","sm"]' '["block md:text-base","hidden md:block md:text-base","hidden","hidden md:block"]'}} text-sm mt-3 font-copy">{{text}}</span>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
|
|
2
|
+
|
|
3
|
+
import teaser from './teaser_logic.hbs'
|
|
4
|
+
import index_site from '../data/teaser_full.json'
|
|
5
|
+
|
|
6
|
+
<Meta title="Komponenten/Teaser/Logic"
|
|
7
|
+
parameters={{
|
|
8
|
+
layout: 'fullscreen',
|
|
9
|
+
}}
|
|
10
|
+
argTypes={{
|
|
11
|
+
}}
|
|
12
|
+
decorators={[
|
|
13
|
+
(Story) => {
|
|
14
|
+
return `<div class="grid bg-gray-100 grid-page">
|
|
15
|
+
<div class="grid grid-cols-12 py-6 bg-white sm:px-8 col-full sm:col-main gap-x-6 gap-y-6">
|
|
16
|
+
${Story()}
|
|
17
|
+
</div>
|
|
18
|
+
</div>`
|
|
19
|
+
},
|
|
20
|
+
]}
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
24
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
25
|
+
// return `<div>${label}</div>`;
|
|
26
|
+
let brand =
|
|
27
|
+
undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
|
|
28
|
+
return teaser({ brand, ...args })
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
# Header
|
|
32
|
+
|
|
33
|
+
Ein toller Einleitungstext für unsere `Teaser` Komponente:
|
|
34
|
+
|
|
35
|
+
<Preview withToolbar>
|
|
36
|
+
<Story name="logic" args={index_site}>
|
|
37
|
+
{Template.bind({})}
|
|
38
|
+
</Story>
|
|
39
|
+
</Preview>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{{~#each this.logicItems}}
|
|
2
|
+
{{~#if this.isSsi~}}
|
|
3
|
+
{{#if (isStorybook)}}
|
|
4
|
+
{{> components/Teaser/teaser_logic/teaser_logic.ssi.hbs }}
|
|
5
|
+
{{else}}
|
|
6
|
+
{{{this.ssi}}}
|
|
7
|
+
{{/if}}
|
|
8
|
+
{{~else}}
|
|
9
|
+
{{~#with this.includeModel~}}
|
|
10
|
+
{{~#if (isStorybook)~}}
|
|
11
|
+
{{~> components/base/loadDynamic templatePath=../includePath ~}}
|
|
12
|
+
{{~else~}}
|
|
13
|
+
{{~> (lookup ../. 'includePath')~}}
|
|
14
|
+
{{~/if~}}
|
|
15
|
+
{{~/with~}}
|
|
16
|
+
{{~/if~}}
|
|
17
|
+
{{/each~}}
|
|
@@ -2,4 +2,10 @@
|
|
|
2
2
|
{{#case "components/Header/ServiceNavigation/ServiceNavigationItem"}}
|
|
3
3
|
{{> components/Header/ServiceNavigation/ServiceNavigationItem}}
|
|
4
4
|
{{/case}}
|
|
5
|
+
{{#case "components/Teaser/group_teaser/group_teaser"}}
|
|
6
|
+
{{> components/Teaser/group_teaser/group_teaser}}
|
|
7
|
+
{{/case}}
|
|
8
|
+
{{#case "components/Teaser/Teaser-standard"}}
|
|
9
|
+
{{> components/Teaser/Teaser-standard}}
|
|
10
|
+
{{/case}}
|
|
5
11
|
{{/switch}}
|
package/tailwind.config.js
CHANGED
|
@@ -38,9 +38,12 @@ module.exports = {
|
|
|
38
38
|
|
|
39
39
|
extend: {
|
|
40
40
|
fontSize: {
|
|
41
|
+
'xs':['0.75rem', '1.063rem'],
|
|
42
|
+
'sm':['0.875rem', '1.188rem'],
|
|
43
|
+
'base':['1rem', '1.25rem'],
|
|
41
44
|
'lg':['1.125rem', '1.5rem'],
|
|
42
|
-
'2xl':['1.375rem', '
|
|
43
|
-
'4xl':['2.125rem', '2.
|
|
45
|
+
'2xl':['1.375rem', '1.75rem'],
|
|
46
|
+
'4xl':['2.125rem', '2.375rem'],
|
|
44
47
|
},
|
|
45
48
|
boxShadow: {
|
|
46
49
|
inner: 'inset 0 0px 5px 0 rgba(0, 0, 0, 0.25)',
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<{{headlineTag}} class="sb-headline block {{inline-switch visualSize '["4xl","3xl","2xl","xl","lg","base","sm"]' '["text-4xl","text-3xl","text-2xl","text-xl","text-lg","text-base","text-sm"]'}} {{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >{{text}}</{{headlineTag}}>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<{{headlineTag}} class="sb-headline block {{inline-switch visualSize '["4xl","3xl","2xl","xl","lg","base","sm"]' '["text-4xl","text-3xl","text-2xl","text-xl","text-lg","text-base","text-sm"]'}} {{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >{{text}}</{{headlineTag}}>
|
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { ArgsTable, Meta, Story, Canvas, Preview } from "@storybook/addon-docs";
|
|
2
|
-
|
|
3
|
-
import headline from "./Headline.hbs";
|
|
4
|
-
|
|
5
|
-
<Meta
|
|
6
|
-
title="Komponenten/Überschrift"
|
|
7
|
-
argTypes={{
|
|
8
|
-
text: {
|
|
9
|
-
control: "text",
|
|
10
|
-
description: "Überschrift Text",
|
|
11
|
-
},
|
|
12
|
-
headlineTag: {
|
|
13
|
-
control: {
|
|
14
|
-
type: "select",
|
|
15
|
-
options: ["span", "h1", "h2", "h3", "h4", "h5", "h6"],
|
|
16
|
-
},
|
|
17
|
-
description: "Größe",
|
|
18
|
-
table: {
|
|
19
|
-
defaultValue: {
|
|
20
|
-
summary: "span",
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
visualSize: {
|
|
25
|
-
control: {
|
|
26
|
-
type: "select",
|
|
27
|
-
options: ["", "4xl", "3xl", "2xl", "xl", "lg", "base", "sm"],
|
|
28
|
-
},
|
|
29
|
-
description: "Optische Größe",
|
|
30
|
-
table: {
|
|
31
|
-
defaultValue: {
|
|
32
|
-
summary: "base",
|
|
33
|
-
},
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
|
-
font: {
|
|
37
|
-
description: "Schriftart",
|
|
38
|
-
control: {
|
|
39
|
-
type: "inline-radio",
|
|
40
|
-
options: ["headingSerif", "heading"],
|
|
41
|
-
},
|
|
42
|
-
table: {
|
|
43
|
-
defaultValue: {
|
|
44
|
-
summary: "heading",
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
bold: {
|
|
49
|
-
options: ["true", "false"],
|
|
50
|
-
control: { type: "inline-radio" },
|
|
51
|
-
},
|
|
52
|
-
class: {
|
|
53
|
-
control: "text",
|
|
54
|
-
description: "Extra CSS Klassen",
|
|
55
|
-
},
|
|
56
|
-
}}
|
|
57
|
-
/>
|
|
58
|
-
|
|
59
|
-
export const Template = ({ text, ...args }) => {
|
|
60
|
-
// You can either use a function to create DOM elements or use a plain html string!
|
|
61
|
-
// return `<div>${label}</div>`;
|
|
62
|
-
return headline({ text, ...args });
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
# Button
|
|
66
|
-
|
|
67
|
-
Ein toller Einleitungstext für unsere `Überschriften` Komponente:
|
|
68
|
-
|
|
69
|
-
<Preview withToolbar>
|
|
70
|
-
<Story
|
|
71
|
-
name="h1"
|
|
72
|
-
args={{
|
|
73
|
-
headlineTag: "h1",
|
|
74
|
-
visualSize: "base",
|
|
75
|
-
font: "heading",
|
|
76
|
-
text:
|
|
77
|
-
"Das ist eine wirklich sehr lange Headline die kein Ende zu finden scheint",
|
|
78
|
-
bold: "false",
|
|
79
|
-
}}
|
|
80
|
-
>
|
|
81
|
-
{Template.bind({})}
|
|
82
|
-
</Story>
|
|
83
|
-
</Preview>
|
|
84
|
-
|
|
85
|
-
<ArgsTable story="h1" />
|