hr-design-system-handlebars 0.40.0 → 0.40.1

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.
Files changed (23) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +25 -34
  3. package/dist/views/components/Page/Page.hbs +20 -20
  4. package/dist/views/components/Teaser/Teaser-Heading.hbs +2 -2
  5. package/dist/views/components/Teaser/Teaser-default.hbs +3 -0
  6. package/dist/views/components/Teaser/Teaser.hbs +3 -4
  7. package/dist/views/components/Teaser/Title.hbs +1 -0
  8. package/dist/views/components/{Topline.hbs → Teaser/Topline.hbs} +0 -0
  9. package/package.json +1 -1
  10. package/src/stories/views/components/Page/Page.hbs +20 -20
  11. package/src/stories/views/components/Teaser/Teaser-Heading.hbs +2 -2
  12. package/src/stories/views/components/Teaser/Teaser-default.hbs +3 -0
  13. package/src/stories/views/components/Teaser/Teaser.hbs +3 -4
  14. package/src/stories/views/components/Teaser/Teaser.stories.mdx +79 -6
  15. package/src/stories/views/components/Teaser/Title.hbs +1 -0
  16. package/src/stories/views/components/{Title.stories.mdx → Teaser/Title.stories.mdx} +1 -1
  17. package/src/stories/views/components/{Topline.hbs → Teaser/Topline.hbs} +0 -0
  18. package/src/stories/views/components/{Topline.stories.mdx → Teaser/Topline.stories.mdx} +1 -1
  19. package/src/stories/views/components/Teaser/teaser-default.stories.mdx +26 -0
  20. package/src/stories/views/components/Teaser/teaser_article.json +155 -0
  21. package/src/stories/views/components/Teaser/{teaser.json → teaser_full.json} +4 -4
  22. package/dist/views/components/Title.hbs +0 -1
  23. package/src/stories/views/components/Title.hbs +0 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.40.1 (Wed Apr 06 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Dpe 1533 - Datenstruktur in JSON überarbeiten [#205](https://github.com/mumprod/hr-design-system-handlebars/pull/205) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
1
13
  # v0.40.0 (Tue Apr 05 2022)
2
14
 
3
15
  #### 🚀 Enhancement
package/dist/assets/index.css CHANGED
@@ -1499,22 +1499,9 @@ Ensure the default browser behavior of the `hidden` attribute.
1499
1499
  margin-left: 1rem;
1500
1500
  margin-right: 1rem;
1501
1501
  }
1502
- .mx-2 {
1503
- margin-left: 0.5rem;
1504
- margin-right: 0.5rem;
1505
- }
1506
1502
  .mt-6 {
1507
1503
  margin-top: 1.5rem;
1508
1504
  }
1509
- .mt-0\.5 {
1510
- margin-top: 0.125rem;
1511
- }
1512
- .mt-0 {
1513
- margin-top: 0px;
1514
- }
1515
- .mt-4 {
1516
- margin-top: 1rem;
1517
- }
1518
1505
  .-mt-2 {
1519
1506
  margin-top: -0.5rem;
1520
1507
  }
@@ -1527,12 +1514,21 @@ Ensure the default browser behavior of the `hidden` attribute.
1527
1514
  .-mt-10 {
1528
1515
  margin-top: -2.5rem;
1529
1516
  }
1530
- .mt-8 {
1531
- margin-top: 2rem;
1517
+ .mb-4 {
1518
+ margin-bottom: 1rem;
1519
+ }
1520
+ .mt-4 {
1521
+ margin-top: 1rem;
1532
1522
  }
1533
1523
  .mt-1 {
1534
1524
  margin-top: 0.25rem;
1535
1525
  }
1526
+ .mt-0\.5 {
1527
+ margin-top: 0.125rem;
1528
+ }
1529
+ .mt-0 {
1530
+ margin-top: 0px;
1531
+ }
1536
1532
  .mr-4 {
1537
1533
  margin-right: 1rem;
1538
1534
  }
@@ -1671,15 +1667,6 @@ Ensure the default browser behavior of the `hidden` attribute.
1671
1667
  .max-w-full {
1672
1668
  max-width: 100%;
1673
1669
  }
1674
- .max-w-1\/1 {
1675
- max-width: 100%;
1676
- }
1677
- .max-w-2\/3 {
1678
- max-width: 66.66666666%;
1679
- }
1680
- .max-w-1\/2 {
1681
- max-width: 50%;
1682
- }
1683
1670
  .flex-initial {
1684
1671
  -webkit-box-flex: 0;
1685
1672
  -ms-flex: 0 1 auto;
@@ -2194,10 +2181,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2194
2181
  --tw-text-opacity: 1;
2195
2182
  color: rgba(255, 255, 255, var(--tw-text-opacity));
2196
2183
  }
2197
- .text-toplineColor {
2198
- color: #006dc1;
2199
- color: var(--color-topline);
2200
- }
2201
2184
  .text-blue-congress {
2202
2185
  --tw-text-opacity: 1;
2203
2186
  color: rgba(0, 82, 147, var(--tw-text-opacity));
@@ -2210,6 +2193,10 @@ Ensure the default browser behavior of the `hidden` attribute.
2210
2193
  --tw-text-opacity: 1;
2211
2194
  color: rgba(107, 114, 128, var(--tw-text-opacity));
2212
2195
  }
2196
+ .text-toplineColor {
2197
+ color: #006dc1;
2198
+ color: var(--color-topline);
2199
+ }
2213
2200
  .text-grey-scorpion {
2214
2201
  --tw-text-opacity: 1;
2215
2202
  color: rgba(96, 96, 96, var(--tw-text-opacity));
@@ -2531,12 +2518,22 @@ Ensure the default browser behavior of the `hidden` attribute.
2531
2518
  .md\:col-span-3 {
2532
2519
  grid-column: span 3 / span 3;
2533
2520
  }
2521
+ .md\:mx-2 {
2522
+ margin-left: 0.5rem;
2523
+ margin-right: 0.5rem;
2524
+ }
2534
2525
  .md\:mt-0 {
2535
2526
  margin-top: 0px;
2536
2527
  }
2537
2528
  .md\:-mt-40 {
2538
2529
  margin-top: -10rem;
2539
2530
  }
2531
+ .md\:mt-8 {
2532
+ margin-top: 2rem;
2533
+ }
2534
+ .md\:mb-0 {
2535
+ margin-bottom: 0px;
2536
+ }
2540
2537
  .md\:flex {
2541
2538
  display: -webkit-box;
2542
2539
  display: -ms-flexbox;
@@ -2709,9 +2706,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2709
2706
  .lg\:ml-2 {
2710
2707
  margin-left: 0.5rem;
2711
2708
  }
2712
- .lg\:block {
2713
- display: block;
2714
- }
2715
2709
  .lg\:flex {
2716
2710
  display: -webkit-box;
2717
2711
  display: -ms-flexbox;
@@ -2774,9 +2768,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2774
2768
  .lg\:max-w-3\/4 {
2775
2769
  max-width: 75%;
2776
2770
  }
2777
- .lg\:max-w-1\/3 {
2778
- max-width: 33.33333333%;
2779
- }
2780
2771
  .lg\:flex-initial {
2781
2772
  -webkit-box-flex: 0;
2782
2773
  -ms-flex: 0 1 auto;
package/dist/views/components/Page/Page.hbs CHANGED
@@ -29,20 +29,20 @@
29
29
  class="flex items-center justify-center"
30
30
  >
31
31
  <div class="container px-3.5 md:px-5 lg:px-10">
32
- <div class="mt-8">
32
+ <div class="md:mt-8">
33
33
  {{> components/Teaser/Teaser
34
34
  variant="Serif"
35
- teaserSize="100"
35
+ teaserSize="xxl"
36
36
  topline="So plant Glasner bei der Eintracht"
37
37
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
38
38
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
39
39
  author="Stephan Reich"
40
40
  }}
41
41
  </div>
42
- <div class="flex mt-8">
42
+ <div class="md:mt-8">
43
43
  {{> components/Teaser/Teaser
44
44
  variant="Serif"
45
- teaserSize="50"
45
+ teaserSize="lg"
46
46
  topline="So plant Glasner bei der Eintracht"
47
47
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
48
48
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -51,17 +51,17 @@
51
51
 
52
52
  {{> components/Teaser/Teaser
53
53
  variant="Serif"
54
- teaserSize="50"
54
+ teaserSize="lg"
55
55
  topline="So plant Glasner bei der Eintracht"
56
56
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
57
57
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
58
58
  author="Stephan Reich"
59
59
  }}
60
60
  </div>
61
- <div class="flex mt-8">
61
+ <div class="md:mt-8">
62
62
  {{> components/Teaser/Teaser
63
63
  variant="Serif"
64
- teaserSize="33"
64
+ teaserSize="md"
65
65
  topline="So plant Glasner bei der Eintracht"
66
66
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
67
67
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -70,7 +70,7 @@
70
70
 
71
71
  {{> components/Teaser/Teaser
72
72
  variant="Serif"
73
- teaserSize="33"
73
+ teaserSize="md"
74
74
  topline="So plant Glasner bei der Eintracht"
75
75
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
76
76
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -79,17 +79,17 @@
79
79
 
80
80
  {{> components/Teaser/Teaser
81
81
  variant="Serif"
82
- teaserSize="33"
82
+ teaserSize="md"
83
83
  topline="So plant Glasner bei der Eintracht"
84
84
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
85
85
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
86
86
  author="Stephan Reich"
87
87
  }}
88
88
  </div>
89
- <div class="flex mt-8">
89
+ <div class="md:mt-8">
90
90
  {{> components/Teaser/Teaser
91
91
  variant="Serif"
92
- teaserSize="50"
92
+ teaserSize="lg"
93
93
  topline="So plant Glasner bei der Eintracht"
94
94
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
95
95
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -98,17 +98,17 @@
98
98
 
99
99
  {{> components/Teaser/Teaser
100
100
  variant="Serif"
101
- teaserSize="50"
101
+ teaserSize="lg"
102
102
  topline="So plant Glasner bei der Eintracht"
103
103
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
104
104
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
105
105
  author="Stephan Reich"
106
106
  }}
107
107
  </div>
108
- <div class="flex mt-8">
108
+ <div class="md:mt-8">
109
109
  {{> components/Teaser/Teaser
110
110
  variant="Serif"
111
- teaserSize="50"
111
+ teaserSize="lg"
112
112
  topline="So plant Glasner bei der Eintracht"
113
113
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
114
114
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -117,17 +117,17 @@
117
117
 
118
118
  {{> components/Teaser/Teaser
119
119
  variant="Serif"
120
- teaserSize="50"
120
+ teaserSize="lg"
121
121
  topline="So plant Glasner bei der Eintracht"
122
122
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
123
123
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
124
124
  author="Stephan Reich"
125
125
  }}
126
126
  </div>
127
- <div class="flex mt-8">
127
+ <div class="md:mt-8">
128
128
  {{> components/Teaser/Teaser
129
129
  variant="Serif"
130
- teaserSize="25"
130
+ teaserSize="sm"
131
131
  topline="So plant Glasner bei der Eintracht"
132
132
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
133
133
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -136,7 +136,7 @@
136
136
 
137
137
  {{> components/Teaser/Teaser
138
138
  variant="Serif"
139
- teaserSize="25"
139
+ teaserSize="sm"
140
140
  topline="So plant Glasner bei der Eintracht"
141
141
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
142
142
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -145,7 +145,7 @@
145
145
 
146
146
  {{> components/Teaser/Teaser
147
147
  variant="Serif"
148
- teaserSize="25"
148
+ teaserSize="sm"
149
149
  topline="So plant Glasner bei der Eintracht"
150
150
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
151
151
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -153,7 +153,7 @@
153
153
  }}
154
154
  {{> components/Teaser/Teaser
155
155
  variant="Serif"
156
- teaserSize="25"
156
+ teaserSize="sm"
157
157
  topline="So plant Glasner bei der Eintracht"
158
158
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
159
159
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
package/dist/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  <a href="#" class="hover:text-toplineColor">
2
2
  <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
3
3
  {{#if topline}}
4
- {{> components/Topline text=topline }}
4
+ {{> components/Teaser/Topline text=topline }}
5
5
  {{/if}}
6
- {{> components/Title text=headline }}
6
+ {{> components/Teaser/Title text=headline }}
7
7
  </{{headlineTag}}>
8
8
  </a>
package/dist/views/components/Teaser/Teaser-default.hbs ADDED
@@ -0,0 +1,3 @@
1
+ {{#with this.link}}
2
+ {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
3
+ {{/with}}
package/dist/views/components/Teaser/Teaser.hbs CHANGED
@@ -1,6 +1,5 @@
1
1
 
2
- <div class="-{{variant}} {{inline-switch teaserSize '["100","66","50","33","25"]' '["max-w-1/1","max-w-2/3","max-w-1/2","hidden lg:block lg:max-w-1/3","hidden lg:block lg:max-w-1/4"]'}} mx-2 first:ml-0 last:mr-0">
3
-
2
+ <div class="{{inline-switch teaserSize '["sm","md","lg","xl","xxl"]' '["col-span-12 md:col-span-3","col-span-12 md:col-span-4","col-span-12 md:col-span-6","col-span-12","col-span-12"]'}} md:mx-2 first:ml-0 last:mr-0 mb-4 md:mb-0">
4
3
  <img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
5
4
  loading="lazy"
6
5
  data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
@@ -21,9 +20,9 @@
21
20
  <div class="mt-4">
22
21
  {{> components/Label type=labelType text=labelText}}
23
22
  </div>
24
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=(inline-switch teaserSize '["100","66","50","33","25"]' '["lg","md","md","md","sm","sm"]') font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
23
+ {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
25
24
  {{else}}
26
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=(inline-switch teaserSize '["100","66","50","33","25"]' '["lg","md","md","md","sm","sm"]') font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
25
+ {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
27
26
  {{/if}}
28
27
 
29
28
  <div class="mt-2 text-base font-copy">{{teaserText}} <a class="text-indigo-500" href="#">[<span class="no-underline hover:underline">mehr</span>]</a></div>
package/dist/views/components/Teaser/Title.hbs ADDED
@@ -0,0 +1 @@
1
+ <span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl","text-lg","text-2xl"]'}} font-headingSerif mt-0.5">{{text}}</span>
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.40.0",
9
+ "version": "0.40.1",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/stories/views/components/Page/Page.hbs CHANGED
@@ -29,20 +29,20 @@
29
29
  class="flex items-center justify-center"
30
30
  >
31
31
  <div class="container px-3.5 md:px-5 lg:px-10">
32
- <div class="mt-8">
32
+ <div class="md:mt-8">
33
33
  {{> components/Teaser/Teaser
34
34
  variant="Serif"
35
- teaserSize="100"
35
+ teaserSize="xxl"
36
36
  topline="So plant Glasner bei der Eintracht"
37
37
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
38
38
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
39
39
  author="Stephan Reich"
40
40
  }}
41
41
  </div>
42
- <div class="flex mt-8">
42
+ <div class="md:mt-8">
43
43
  {{> components/Teaser/Teaser
44
44
  variant="Serif"
45
- teaserSize="50"
45
+ teaserSize="lg"
46
46
  topline="So plant Glasner bei der Eintracht"
47
47
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
48
48
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -51,17 +51,17 @@
51
51
 
52
52
  {{> components/Teaser/Teaser
53
53
  variant="Serif"
54
- teaserSize="50"
54
+ teaserSize="lg"
55
55
  topline="So plant Glasner bei der Eintracht"
56
56
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
57
57
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
58
58
  author="Stephan Reich"
59
59
  }}
60
60
  </div>
61
- <div class="flex mt-8">
61
+ <div class="md:mt-8">
62
62
  {{> components/Teaser/Teaser
63
63
  variant="Serif"
64
- teaserSize="33"
64
+ teaserSize="md"
65
65
  topline="So plant Glasner bei der Eintracht"
66
66
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
67
67
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -70,7 +70,7 @@
70
70
 
71
71
  {{> components/Teaser/Teaser
72
72
  variant="Serif"
73
- teaserSize="33"
73
+ teaserSize="md"
74
74
  topline="So plant Glasner bei der Eintracht"
75
75
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
76
76
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -79,17 +79,17 @@
79
79
 
80
80
  {{> components/Teaser/Teaser
81
81
  variant="Serif"
82
- teaserSize="33"
82
+ teaserSize="md"
83
83
  topline="So plant Glasner bei der Eintracht"
84
84
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
85
85
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
86
86
  author="Stephan Reich"
87
87
  }}
88
88
  </div>
89
- <div class="flex mt-8">
89
+ <div class="md:mt-8">
90
90
  {{> components/Teaser/Teaser
91
91
  variant="Serif"
92
- teaserSize="50"
92
+ teaserSize="lg"
93
93
  topline="So plant Glasner bei der Eintracht"
94
94
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
95
95
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -98,17 +98,17 @@
98
98
 
99
99
  {{> components/Teaser/Teaser
100
100
  variant="Serif"
101
- teaserSize="50"
101
+ teaserSize="lg"
102
102
  topline="So plant Glasner bei der Eintracht"
103
103
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
104
104
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
105
105
  author="Stephan Reich"
106
106
  }}
107
107
  </div>
108
- <div class="flex mt-8">
108
+ <div class="md:mt-8">
109
109
  {{> components/Teaser/Teaser
110
110
  variant="Serif"
111
- teaserSize="50"
111
+ teaserSize="lg"
112
112
  topline="So plant Glasner bei der Eintracht"
113
113
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
114
114
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -117,17 +117,17 @@
117
117
 
118
118
  {{> components/Teaser/Teaser
119
119
  variant="Serif"
120
- teaserSize="50"
120
+ teaserSize="lg"
121
121
  topline="So plant Glasner bei der Eintracht"
122
122
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
123
123
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
124
124
  author="Stephan Reich"
125
125
  }}
126
126
  </div>
127
- <div class="flex mt-8">
127
+ <div class="md:mt-8">
128
128
  {{> components/Teaser/Teaser
129
129
  variant="Serif"
130
- teaserSize="25"
130
+ teaserSize="sm"
131
131
  topline="So plant Glasner bei der Eintracht"
132
132
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
133
133
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -136,7 +136,7 @@
136
136
 
137
137
  {{> components/Teaser/Teaser
138
138
  variant="Serif"
139
- teaserSize="25"
139
+ teaserSize="sm"
140
140
  topline="So plant Glasner bei der Eintracht"
141
141
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
142
142
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -145,7 +145,7 @@
145
145
 
146
146
  {{> components/Teaser/Teaser
147
147
  variant="Serif"
148
- teaserSize="25"
148
+ teaserSize="sm"
149
149
  topline="So plant Glasner bei der Eintracht"
150
150
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
151
151
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
@@ -153,7 +153,7 @@
153
153
  }}
154
154
  {{> components/Teaser/Teaser
155
155
  variant="Serif"
156
- teaserSize="25"
156
+ teaserSize="sm"
157
157
  topline="So plant Glasner bei der Eintracht"
158
158
  headline="Silvas Erbe wird auf mehrere Schultern verteilt"
159
159
  teaserText="Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus."
package/src/stories/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,8 +1,8 @@
1
1
  <a href="#" class="hover:text-toplineColor">
2
2
  <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
3
3
  {{#if topline}}
4
- {{> components/Topline text=topline }}
4
+ {{> components/Teaser/Topline text=topline }}
5
5
  {{/if}}
6
- {{> components/Title text=headline }}
6
+ {{> components/Teaser/Title text=headline }}
7
7
  </{{headlineTag}}>
8
8
  </a>
package/src/stories/views/components/Teaser/Teaser-default.hbs ADDED
@@ -0,0 +1,3 @@
1
+ {{#with this.link}}
2
+ {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
3
+ {{/with}}
package/src/stories/views/components/Teaser/Teaser.hbs CHANGED
@@ -1,6 +1,5 @@
1
1
 
2
- <div class="-{{variant}} {{inline-switch teaserSize '["100","66","50","33","25"]' '["max-w-1/1","max-w-2/3","max-w-1/2","hidden lg:block lg:max-w-1/3","hidden lg:block lg:max-w-1/4"]'}} mx-2 first:ml-0 last:mr-0">
3
-
2
+ <div class="{{inline-switch teaserSize '["sm","md","lg","xl","xxl"]' '["col-span-12 md:col-span-3","col-span-12 md:col-span-4","col-span-12 md:col-span-6","col-span-12","col-span-12"]'}} md:mx-2 first:ml-0 last:mr-0 mb-4 md:mb-0">
4
3
  <img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
5
4
  loading="lazy"
6
5
  data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
@@ -21,9 +20,9 @@
21
20
  <div class="mt-4">
22
21
  {{> components/Label type=labelType text=labelText}}
23
22
  </div>
24
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=(inline-switch teaserSize '["100","66","50","33","25"]' '["lg","md","md","md","sm","sm"]') font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
23
+ {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
25
24
  {{else}}
26
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=(inline-switch teaserSize '["100","66","50","33","25"]' '["lg","md","md","md","sm","sm"]') font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
25
+ {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
27
26
  {{/if}}
28
27
 
29
28
  <div class="mt-2 text-base font-copy">{{teaserText}} <a class="text-indigo-500" href="#">[<span class="no-underline hover:underline">mehr</span>]</a></div>
package/src/stories/views/components/Teaser/Teaser.stories.mdx CHANGED
@@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
3
3
  import teaser from './Teaser.hbs'
4
4
 
5
5
  <Meta
6
- title="Komponenten/Teaser"
6
+ title="Komponenten/Teaser/Standard"
7
7
  argTypes={{
8
8
  variant: {
9
9
  options: ['Serif', 'Sans Serif'],
@@ -12,12 +12,12 @@ import teaser from './Teaser.hbs'
12
12
  teaserSize: {
13
13
  control: {
14
14
  type: 'select',
15
- options: ['100', '66', '50', '33', '25'],
15
+ options: ['xxl','xl', 'lg', 'md', 'sm'],
16
16
  },
17
17
  description: 'Teaser Größe',
18
18
  table: {
19
19
  defaultValue: {
20
- summary: '100',
20
+ summary: 'xl',
21
21
  },
22
22
  },
23
23
  },
@@ -50,6 +50,13 @@ import teaser from './Teaser.hbs'
50
50
  description: 'Autor',
51
51
  },
52
52
  }}
53
+ decorators={[
54
+ (Story) => {
55
+ return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
56
+ ${Story()}
57
+ </div></div>`
58
+ },
59
+ ]}
53
60
  />
54
61
 
55
62
  export const Template = ({ variant, ...args }) => {
@@ -64,10 +71,61 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
64
71
 
65
72
  <Preview withToolbar>
66
73
  <Story
67
- name="standard"
74
+ name="Standard Hero"
75
+ args={{
76
+ variant: 'Serif',
77
+ teaserSize: 'xxl',
78
+ topline: 'So plant Glasner bei der Eintracht',
79
+ headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
80
+ teaserText:
81
+ 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
82
+ author: 'Stephan Reich',
83
+ }}
84
+ >
85
+ {Template.bind({})}
86
+ </Story>
87
+ </Preview>
88
+
89
+ <Preview withToolbar>
90
+ <Story
91
+ name="Standard xl"
92
+ args={{
93
+ variant: 'Serif',
94
+ teaserSize: 'xl',
95
+ topline: 'So plant Glasner bei der Eintracht',
96
+ headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
97
+ teaserText:
98
+ 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
99
+ author: 'Stephan Reich',
100
+ }}
101
+ >
102
+ {Template.bind({})}
103
+ </Story>
104
+ </Preview>
105
+
106
+ <Preview withToolbar>
107
+ <Story
108
+ name="Standard lg"
109
+ args={{
110
+ variant: 'Serif',
111
+ teaserSize: 'lg',
112
+ topline: 'So plant Glasner bei der Eintracht',
113
+ headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
114
+ teaserText:
115
+ 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
116
+ author: 'Stephan Reich',
117
+ }}
118
+ >
119
+ {Template.bind({})}
120
+ </Story>
121
+ </Preview>
122
+
123
+ <Preview withToolbar>
124
+ <Story
125
+ name="Standard md"
68
126
  args={{
69
127
  variant: 'Serif',
70
- teaserSize: '33',
128
+ teaserSize: 'md',
71
129
  topline: 'So plant Glasner bei der Eintracht',
72
130
  headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
73
131
  teaserText:
@@ -79,4 +137,19 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
79
137
  </Story>
80
138
  </Preview>
81
139
 
82
- <ArgsTable story="standard" />
140
+ <Preview withToolbar>
141
+ <Story
142
+ name="Standard sm"
143
+ args={{
144
+ variant: 'Serif',
145
+ teaserSize: 'sm',
146
+ topline: 'So plant Glasner bei der Eintracht',
147
+ headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
148
+ teaserText:
149
+ 'Nach dem Abgang von André Silva und dem Zugang von Santos Borré hat Trainer Oliver Glasner Einblicke in seine Offensivideen für Eintracht Frankfurt gegeben. Er plant mit den Flanken von Filip Kostic und spricht ein Sonderlob für einen Youngster aus.',
150
+ author: 'Stephan Reich',
151
+ }}
152
+ >
153
+ {Template.bind({})}
154
+ </Story>
155
+ </Preview>
package/src/stories/views/components/Teaser/Title.hbs ADDED
@@ -0,0 +1 @@
1
+ <span class="block {{inline-switch size '["xxl","sm"]' '["text-2xl md:text-4xl","text-lg","text-2xl"]'}} font-headingSerif mt-0.5">{{text}}</span>
package/src/stories/views/components/{Title.stories.mdx → Teaser/Title.stories.mdx} RENAMED
@@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
3
3
  import titleComponent from "./Title.hbs";
4
4
 
5
5
  <Meta
6
- title="Komponenten/Titel"
6
+ title="Komponenten/Teaser/Titel"
7
7
  argTypes={{
8
8
  text: {
9
9
  control: "text",
package/src/stories/views/components/{Topline.stories.mdx → Teaser/Topline.stories.mdx} RENAMED
@@ -3,7 +3,7 @@ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
3
3
  import topline from "./Topline.hbs";
4
4
 
5
5
  <Meta
6
- title="Komponenten/Dachzeile"
6
+ title="Komponenten/Teaser/Dachzeile"
7
7
  argTypes={{
8
8
  text: {
9
9
  control: "text",
package/src/stories/views/components/Teaser/teaser-default.stories.mdx ADDED
@@ -0,0 +1,26 @@
1
+ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
2
+
3
+ import teaser from './Teaser-default.hbs'
4
+ import JsonData from './teaser_article.json'
5
+
6
+ <Meta title="Komponenten/Teaser/Standard" argTypes={{}} />
7
+
8
+ export const Template = (args, { globals: { customConditionalToolbar } }) => {
9
+ // You can either use a function to create DOM elements or use a plain html string!
10
+ // return `<div>${label}</div>`;
11
+ let brand =
12
+ undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
13
+ return teaser({ brand, ...args })
14
+ }
15
+
16
+ # Header
17
+
18
+ Ein toller Einleitungstext für unsere `Teaser` Komponente:
19
+
20
+ <Preview withToolbar>
21
+ <Story name="Default" args={JsonData}>
22
+ {Template.bind({})}
23
+ </Story>
24
+ </Preview>
25
+
26
+ <ArgsTable story="Default" />
package/src/stories/views/components/Teaser/teaser_article.json ADDED
@@ -0,0 +1,155 @@
1
+ {
2
+ "byline": "Byline",
3
+ "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
4
+ "topline": "Überglücklich, aber ohne Mama",
5
+ "extendedTitle": null,
6
+ "teasertype": "standard",
7
+ "teasersize": "100",
8
+ "teaserDate": {
9
+ "htmlDate": "20.02.1983",
10
+ "date": "20.02.1983",
11
+ "dateSeparatorTime": "20.02.1983"
12
+ },
13
+ "teaserInfo": {
14
+ "showTeaserInfo": true,
15
+ "showTeaserInfoSection": true,
16
+ "showTeaserInfoChannel": true,
17
+ "showTeaserInfoAll": true,
18
+ "showTeaserInfoDate": true,
19
+ "showTeaserInfoDateTime": true,
20
+ "showTeaserInfoProgramRef": true
21
+ },
22
+ "teaserImage": {
23
+ "copyrightWithLinks": "",
24
+ "responsiveImage": {
25
+ "asPicture": true,
26
+ "asImage": false,
27
+ "fallback": "https://picsum.photos/id/188/480/210",
28
+ "sources": [
29
+ {
30
+ "media": "all and (max-width: 43.688em)",
31
+ "sizes": "100vw",
32
+ "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"
33
+ },
34
+ {
35
+ "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
36
+ "sizes": "100vw",
37
+ "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"
38
+ },
39
+ {
40
+ "media": "all and (min-width: 64em)",
41
+ "sizes": "960px",
42
+ "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"
43
+ }
44
+ ]
45
+ }
46
+ },
47
+ "hasMediaButtons": false,
48
+ "dontLazyload": true,
49
+ "realTeasersize": "100",
50
+ "isStandardTeaser": true,
51
+ "isHeroTeaser": true,
52
+ "isMediaTeaser": false,
53
+ "isGuide": false,
54
+ "isProgram": false,
55
+ "isEvent": false,
56
+ "isTicker": false,
57
+ "isAudio": false,
58
+ "isVideo": false,
59
+ "isPodcastEpisode": false,
60
+ "isExtOrBrandLink": false,
61
+ "isAuthor": false,
62
+ "copyright": "Copyright Text",
63
+ "audioAuthor": "Audio Author",
64
+ "hasStatus": false,
65
+ "hasTeaserItem": true,
66
+ "allowAVConsumption": false,
67
+ "displayEpgInfos": false,
68
+ "aspectRatio": "ar--teaserTop",
69
+ "hideGeotag": false,
70
+ "hideEditableByline": true,
71
+ "doTracking": true,
72
+ "trackingForArdMediatheksLink": false,
73
+ "showMediatheksLink": false,
74
+ "showAirdate": false,
75
+ "showProfileInfoAsByline": false,
76
+ "obsolet_brandOfTeaser": "hessenschau",
77
+ "headingSize": "h1",
78
+ "icon": "ortsmarke",
79
+ "imageVariant": "topteaser",
80
+ "shorttext": "shorttext",
81
+ "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
82
+ "profiles": "Von Alf Haubitz und Alice Merton",
83
+ "teaserLead": {
84
+ "avDocument": "",
85
+ "image": ""
86
+ },
87
+ "label": {
88
+ "type": "Ticker",
89
+ "loca": "ticker",
90
+ "byline": {
91
+ "bylineSsi": "ssi",
92
+ "bylineText": "BylineText"
93
+ }
94
+ },
95
+ "geotag": [
96
+ {
97
+ "title": "Wolfhagen"
98
+ }
99
+ ],
100
+ "link": {
101
+ "url": "/teaser1",
102
+ "webviewUrl": "/teaser1#webview",
103
+ "isTargetBlank": false,
104
+ "hasIcon": false,
105
+ "iconName": "iconName",
106
+ "readMoreText": {
107
+ "readMoreScreenreader": "Zum Artikel",
108
+ "readMore": "mehr",
109
+ "readMoreLong": "read More Long"
110
+ },
111
+ "content": {
112
+ "teaserImage": {
113
+ "copyrightWithLinks": "",
114
+ "responsiveImage": {
115
+ "asPicture": true,
116
+ "asImage": false,
117
+ "fallback": "https://picsum.photos/id/188/480/210",
118
+ "sources": [
119
+ {
120
+ "media": "all and (max-width: 43.688em)",
121
+ "sizes": "100vw",
122
+ "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"
123
+ },
124
+ {
125
+ "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
126
+ "sizes": "100vw",
127
+ "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"
128
+ },
129
+ {
130
+ "media": "all and (min-width: 64em)",
131
+ "sizes": "960px",
132
+ "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"
133
+ }
134
+ ]
135
+ }
136
+ },
137
+ "teasertype": "standard",
138
+ "imageVariant": "topteaser",
139
+ "isFileDownload": false,
140
+ "topline": "Überglücklich, aber ohne Mama",
141
+ "trackingData": {
142
+ "secondLevelId": "2",
143
+ "pageName": "hessenschau"
144
+ },
145
+ "label": {
146
+ "type": "Ticker",
147
+ "loca": "ticker",
148
+ "byline": {
149
+ "bylineSsi": "ssi",
150
+ "bylineText": "BylineText"
151
+ }
152
+ }
153
+ }
154
+ }
155
+ }
package/src/stories/views/components/Teaser/{teaser.json → teaser_full.json} RENAMED
@@ -129,22 +129,22 @@
129
129
  "responsiveImage": {
130
130
  "asPicture": true,
131
131
  "asImage": false,
132
- "fallback": "https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__medium.jpg",
132
+ "fallback": "https://picsum.photos/id/188/480/210",
133
133
  "sources": [
134
134
  {
135
135
  "media": "all and (max-width: 43.688em)",
136
136
  "sizes": "100vw",
137
- "srcset": "https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to9__small.jpg 320w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to9__medium.jpg 480w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to9__medium__extended.jpg 640w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to9.jpg 960w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to9__retina.jpg 1920w"
137
+ "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"
138
138
  },
139
139
  {
140
140
  "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
141
141
  "sizes": "100vw",
142
- "srcset": "https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__small.jpg 320w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__medium.jpg 480w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7.jpg 992w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__retina.jpg 1920w"
142
+ "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"
143
143
  },
144
144
  {
145
145
  "media": "all and (min-width: 64em)",
146
146
  "sizes": "960px",
147
- "srcset": "https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__small.jpg 320w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__medium.jpg 480w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7.jpg 992w, https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__retina.jpg 1920w"
147
+ "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"
148
148
  }
149
149
  ]
150
150
  }
package/dist/views/components/Title.hbs DELETED
@@ -1 +0,0 @@
1
- <span class="block {{inline-switch size '["lg","md","sm"]' '["text-2xl md:text-4xl","text-2xl","text-lg"]'}} font-headingSerif mt-0.5">{{text}}</span>
package/src/stories/views/components/Title.hbs DELETED
@@ -1 +0,0 @@
1
- <span class="block {{inline-switch size '["lg","md","sm"]' '["text-2xl md:text-4xl","text-2xl","text-lg"]'}} font-headingSerif mt-0.5">{{text}}</span>