hr-design-system-handlebars 0.42.2 → 0.42.5
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 +11 -48
- package/dist/views/components/Page/Page.hbs +22 -127
- package/dist/views/components/Teaser/Byline.hbs +1 -0
- package/dist/views/components/Teaser/Teaser-standard.hbs +4 -4
- package/package.json +1 -1
- package/src/assets/tailwind.css +1 -1
- package/src/stories/views/components/Page/Page.hbs +22 -127
- package/src/stories/views/components/Page/Page.stories.mdx +15 -6
- package/src/stories/views/components/Teaser/Byline.hbs +1 -0
- package/src/stories/views/components/Teaser/Byline.stories.mdx +35 -0
- package/src/stories/views/components/Teaser/Teaser-standard.hbs +4 -4
- package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json +2 -2
- package/tailwind.config.js +2 -1
- package/dist/views/components/Teaser/Teaser.hbs +0 -32
- package/src/stories/views/components/Teaser/Teaser.hbs +0 -32
- package/src/stories/views/components/Teaser/Teaser.stories.mdx.old +0 -156
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
# v0.42.5 (Wed Apr 13 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Page story update use new teaser now [#214](https://github.com/mumprod/hr-design-system-handlebars/pull/214) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# v0.42.4 (Tue Apr 12 2022)
|
|
14
|
+
|
|
15
|
+
#### 🐛 Bug Fix
|
|
16
|
+
|
|
17
|
+
- responsiveImage 2.1 [#213](https://github.com/mumprod/hr-design-system-handlebars/pull/213) ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
18
|
+
|
|
19
|
+
#### Authors: 1
|
|
20
|
+
|
|
21
|
+
- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
# v0.42.3 (Tue Apr 12 2022)
|
|
26
|
+
|
|
27
|
+
#### 🐛 Bug Fix
|
|
28
|
+
|
|
29
|
+
- add byline-component [#212](https://github.com/mumprod/hr-design-system-handlebars/pull/212) ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
30
|
+
|
|
31
|
+
#### Authors: 1
|
|
32
|
+
|
|
33
|
+
- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
1
37
|
# v0.42.2 (Mon Apr 11 2022)
|
|
2
38
|
|
|
3
39
|
#### 🐛 Bug Fix
|
package/dist/assets/index.css
CHANGED
|
@@ -788,7 +788,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
788
788
|
.grid-page {
|
|
789
789
|
grid-template-columns:
|
|
790
790
|
[full-start] minmax(1rem, 1fr)
|
|
791
|
-
[main-start] minmax(0,
|
|
791
|
+
[main-start] minmax(0, 63rem) [main-end]
|
|
792
792
|
minmax(1rem, 1fr) [full-end];
|
|
793
793
|
}
|
|
794
794
|
|
|
@@ -1411,7 +1411,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1411
1411
|
padding-top: 0.75rem;
|
|
1412
1412
|
padding-bottom: 0.75rem;
|
|
1413
1413
|
font-size: 1.125rem;
|
|
1414
|
-
line-height: 1.
|
|
1414
|
+
line-height: 1.5rem;
|
|
1415
1415
|
}
|
|
1416
1416
|
.sr-only {
|
|
1417
1417
|
position: absolute;
|
|
@@ -1514,15 +1514,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1514
1514
|
.-mt-10 {
|
|
1515
1515
|
margin-top: -2.5rem;
|
|
1516
1516
|
}
|
|
1517
|
-
.mt-1 {
|
|
1518
|
-
margin-top: 0.25rem;
|
|
1519
|
-
}
|
|
1520
|
-
.mb-4 {
|
|
1521
|
-
margin-bottom: 1rem;
|
|
1522
|
-
}
|
|
1523
|
-
.mt-4 {
|
|
1524
|
-
margin-top: 1rem;
|
|
1525
|
-
}
|
|
1526
1517
|
.mt-0\.5 {
|
|
1527
1518
|
margin-top: 0.125rem;
|
|
1528
1519
|
}
|
|
@@ -1689,13 +1680,13 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
1689
1680
|
-ms-flex-negative: 0;
|
|
1690
1681
|
flex-shrink: 0;
|
|
1691
1682
|
}
|
|
1692
|
-
.basis-
|
|
1693
|
-
-ms-flex-preferred-size:
|
|
1694
|
-
flex-basis:
|
|
1683
|
+
.basis-2\/5 {
|
|
1684
|
+
-ms-flex-preferred-size: 40%;
|
|
1685
|
+
flex-basis: 40%;
|
|
1695
1686
|
}
|
|
1696
|
-
.basis-
|
|
1697
|
-
-ms-flex-preferred-size:
|
|
1698
|
-
flex-basis:
|
|
1687
|
+
.basis-3\/5 {
|
|
1688
|
+
-ms-flex-preferred-size: 60%;
|
|
1689
|
+
flex-basis: 60%;
|
|
1699
1690
|
}
|
|
1700
1691
|
.-translate-x-1\/2 {
|
|
1701
1692
|
--tw-translate-x: -50%;
|
|
@@ -2154,7 +2145,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2154
2145
|
}
|
|
2155
2146
|
.text-lg {
|
|
2156
2147
|
font-size: 1.125rem;
|
|
2157
|
-
line-height: 1.
|
|
2148
|
+
line-height: 1.5rem;
|
|
2158
2149
|
}
|
|
2159
2150
|
.text-xl {
|
|
2160
2151
|
font-size: 1.25rem;
|
|
@@ -2212,29 +2203,17 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2212
2203
|
--tw-text-opacity: 1;
|
|
2213
2204
|
color: rgba(0, 82, 147, var(--tw-text-opacity));
|
|
2214
2205
|
}
|
|
2215
|
-
.text-
|
|
2216
|
-
--tw-text-opacity: 1;
|
|
2217
|
-
color: rgba(107, 114, 128, var(--tw-text-opacity));
|
|
2218
|
-
}
|
|
2219
|
-
.text-indigo-500 {
|
|
2206
|
+
.text-grey-scorpion {
|
|
2220
2207
|
--tw-text-opacity: 1;
|
|
2221
|
-
color: rgba(
|
|
2208
|
+
color: rgba(96, 96, 96, var(--tw-text-opacity));
|
|
2222
2209
|
}
|
|
2223
2210
|
.text-toplineColor {
|
|
2224
2211
|
color: #006dc1;
|
|
2225
2212
|
color: var(--color-topline);
|
|
2226
2213
|
}
|
|
2227
|
-
.text-grey-scorpion {
|
|
2228
|
-
--tw-text-opacity: 1;
|
|
2229
|
-
color: rgba(96, 96, 96, var(--tw-text-opacity));
|
|
2230
|
-
}
|
|
2231
2214
|
.text-opacity-50 {
|
|
2232
2215
|
--tw-text-opacity: 0.5;
|
|
2233
2216
|
}
|
|
2234
|
-
.no-underline {
|
|
2235
|
-
-webkit-text-decoration-line: none;
|
|
2236
|
-
text-decoration-line: none;
|
|
2237
|
-
}
|
|
2238
2217
|
.placeholder-blue-congress::-webkit-input-placeholder {
|
|
2239
2218
|
--tw-placeholder-opacity: 1;
|
|
2240
2219
|
color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
|
|
@@ -2426,9 +2405,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2426
2405
|
transition: transform 150ms ease-in-out 0s;
|
|
2427
2406
|
transition: transform 150ms ease-in-out 0s, -webkit-transform 150ms ease-in-out 0s;
|
|
2428
2407
|
}
|
|
2429
|
-
.first\:ml-0:first-child {
|
|
2430
|
-
margin-left: 0px;
|
|
2431
|
-
}
|
|
2432
2408
|
.first\:border-t:first-child {
|
|
2433
2409
|
border-top-width: 1px;
|
|
2434
2410
|
}
|
|
@@ -2438,9 +2414,6 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2438
2414
|
.first\:font-bold:first-child {
|
|
2439
2415
|
font-weight: 700;
|
|
2440
2416
|
}
|
|
2441
|
-
.last\:mr-0:last-child {
|
|
2442
|
-
margin-right: 0px;
|
|
2443
|
-
}
|
|
2444
2417
|
.last\:border-b-0:last-child {
|
|
2445
2418
|
border-bottom-width: 0px;
|
|
2446
2419
|
}
|
|
@@ -2545,22 +2518,12 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
2545
2518
|
.md\:col-span-3 {
|
|
2546
2519
|
grid-column: span 3 / span 3;
|
|
2547
2520
|
}
|
|
2548
|
-
.md\:mx-2 {
|
|
2549
|
-
margin-left: 0.5rem;
|
|
2550
|
-
margin-right: 0.5rem;
|
|
2551
|
-
}
|
|
2552
2521
|
.md\:mt-0 {
|
|
2553
2522
|
margin-top: 0px;
|
|
2554
2523
|
}
|
|
2555
2524
|
.md\:-mt-40 {
|
|
2556
2525
|
margin-top: -10rem;
|
|
2557
2526
|
}
|
|
2558
|
-
.md\:mt-8 {
|
|
2559
|
-
margin-top: 2rem;
|
|
2560
|
-
}
|
|
2561
|
-
.md\:mb-0 {
|
|
2562
|
-
margin-bottom: 0px;
|
|
2563
|
-
}
|
|
2564
2527
|
.md\:block {
|
|
2565
2528
|
display: block;
|
|
2566
2529
|
}
|
|
@@ -28,137 +28,32 @@
|
|
|
28
28
|
id="content"
|
|
29
29
|
class="flex items-center justify-center"
|
|
30
30
|
>
|
|
31
|
-
<div class="
|
|
32
|
-
<div class="
|
|
33
|
-
{{> components/Teaser/Teaser
|
|
34
|
-
variant="Serif"
|
|
35
|
-
teaserSize="xxl"
|
|
36
|
-
topline="So plant Glasner bei der Eintracht"
|
|
37
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
40
|
-
}}
|
|
31
|
+
<div class="grid grid-page">
|
|
32
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
33
|
+
{{> components/Teaser/Teaser-standard }}
|
|
41
34
|
</div>
|
|
42
|
-
<div class="
|
|
43
|
-
{{> components/Teaser/Teaser
|
|
44
|
-
|
|
45
|
-
teaserSize="lg"
|
|
46
|
-
topline="So plant Glasner bei der Eintracht"
|
|
47
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
49
|
-
author="Stephan Reich"
|
|
50
|
-
}}
|
|
51
|
-
|
|
52
|
-
{{> components/Teaser/Teaser
|
|
53
|
-
variant="Serif"
|
|
54
|
-
teaserSize="lg"
|
|
55
|
-
topline="So plant Glasner bei der Eintracht"
|
|
56
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
59
|
-
}}
|
|
60
|
-
</div>
|
|
61
|
-
<div class="md:mt-8">
|
|
62
|
-
{{> components/Teaser/Teaser
|
|
63
|
-
variant="Serif"
|
|
64
|
-
teaserSize="md"
|
|
65
|
-
topline="So plant Glasner bei der Eintracht"
|
|
66
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
68
|
-
author="Stephan Reich"
|
|
69
|
-
}}
|
|
70
|
-
|
|
71
|
-
{{> components/Teaser/Teaser
|
|
72
|
-
variant="Serif"
|
|
73
|
-
teaserSize="md"
|
|
74
|
-
topline="So plant Glasner bei der Eintracht"
|
|
75
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
77
|
-
author="Stephan Reich"
|
|
78
|
-
}}
|
|
79
|
-
|
|
80
|
-
{{> components/Teaser/Teaser
|
|
81
|
-
variant="Serif"
|
|
82
|
-
teaserSize="md"
|
|
83
|
-
topline="So plant Glasner bei der Eintracht"
|
|
84
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
87
|
-
}}
|
|
35
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
36
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
37
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
88
38
|
</div>
|
|
89
|
-
<div class="
|
|
90
|
-
{{> components/Teaser/Teaser
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
topline="So plant Glasner bei der Eintracht"
|
|
94
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
96
|
-
author="Stephan Reich"
|
|
97
|
-
}}
|
|
98
|
-
|
|
99
|
-
{{> components/Teaser/Teaser
|
|
100
|
-
variant="Serif"
|
|
101
|
-
teaserSize="lg"
|
|
102
|
-
topline="So plant Glasner bei der Eintracht"
|
|
103
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
106
|
-
}}
|
|
39
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
40
|
+
{{> components/Teaser/Teaser-standard teasersize="md"}}
|
|
41
|
+
{{> components/Teaser/Teaser-standard teasersize="md"}}
|
|
42
|
+
{{> components/Teaser/Teaser-standard teasersize="md"}}
|
|
107
43
|
</div>
|
|
108
|
-
<div class="
|
|
109
|
-
{{> components/Teaser/Teaser
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}}
|
|
117
|
-
|
|
118
|
-
{{> components/Teaser/Teaser
|
|
119
|
-
variant="Serif"
|
|
120
|
-
teaserSize="lg"
|
|
121
|
-
topline="So plant Glasner bei der Eintracht"
|
|
122
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
125
|
-
}}
|
|
44
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
45
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
46
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
47
|
+
</div>
|
|
48
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
49
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
50
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
51
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
52
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
126
53
|
</div>
|
|
127
|
-
<div class="
|
|
128
|
-
{{> components/Teaser/Teaser
|
|
129
|
-
|
|
130
|
-
teaserSize="sm"
|
|
131
|
-
topline="So plant Glasner bei der Eintracht"
|
|
132
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
134
|
-
author="Stephan Reich"
|
|
135
|
-
}}
|
|
136
|
-
|
|
137
|
-
{{> components/Teaser/Teaser
|
|
138
|
-
variant="Serif"
|
|
139
|
-
teaserSize="sm"
|
|
140
|
-
topline="So plant Glasner bei der Eintracht"
|
|
141
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
143
|
-
author="Stephan Reich"
|
|
144
|
-
}}
|
|
145
|
-
|
|
146
|
-
{{> components/Teaser/Teaser
|
|
147
|
-
variant="Serif"
|
|
148
|
-
teaserSize="sm"
|
|
149
|
-
topline="So plant Glasner bei der Eintracht"
|
|
150
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
152
|
-
author="Stephan Reich"
|
|
153
|
-
}}
|
|
154
|
-
{{> components/Teaser/Teaser
|
|
155
|
-
variant="Serif"
|
|
156
|
-
teaserSize="sm"
|
|
157
|
-
topline="So plant Glasner bei der Eintracht"
|
|
158
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
160
|
-
author="Stephan Reich"
|
|
161
|
-
}}
|
|
54
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
55
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
56
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
162
57
|
</div>
|
|
163
58
|
|
|
164
59
|
</div>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<span class="block mt-2 text-xs text-grey-scorpion font-headingSerif">{{text}}</span>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<article class="col-span-12 flex gap-y-4 gap-x-5 {{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
|
-
<figure class="{{inline-switch teasersize '["sm"]' '["basis-
|
|
2
|
+
<figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full"]'}} ">
|
|
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" ~}}
|
|
5
5
|
{{/components/base/link}}
|
|
6
6
|
</figure>
|
|
7
|
-
<div class="{{inline-switch teasersize '["sm"]' '["basis-
|
|
7
|
+
<div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
|
|
8
8
|
<header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
|
|
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
|
-
<div class="hidden mt-2 text-base font-copy
|
|
12
|
+
<div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
|
|
13
13
|
{{#if profiles}}
|
|
14
|
-
|
|
14
|
+
{{> components/Teaser/Byline text=profiles}}
|
|
15
15
|
{{/if}}
|
|
16
16
|
</section>
|
|
17
17
|
</div>
|
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.5",
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
12
|
"storybook": "start-storybook -p 6006 public",
|
package/src/assets/tailwind.css
CHANGED
|
@@ -28,137 +28,32 @@
|
|
|
28
28
|
id="content"
|
|
29
29
|
class="flex items-center justify-center"
|
|
30
30
|
>
|
|
31
|
-
<div class="
|
|
32
|
-
<div class="
|
|
33
|
-
{{> components/Teaser/Teaser
|
|
34
|
-
variant="Serif"
|
|
35
|
-
teaserSize="xxl"
|
|
36
|
-
topline="So plant Glasner bei der Eintracht"
|
|
37
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
40
|
-
}}
|
|
31
|
+
<div class="grid grid-page">
|
|
32
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
33
|
+
{{> components/Teaser/Teaser-standard }}
|
|
41
34
|
</div>
|
|
42
|
-
<div class="
|
|
43
|
-
{{> components/Teaser/Teaser
|
|
44
|
-
|
|
45
|
-
teaserSize="lg"
|
|
46
|
-
topline="So plant Glasner bei der Eintracht"
|
|
47
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
49
|
-
author="Stephan Reich"
|
|
50
|
-
}}
|
|
51
|
-
|
|
52
|
-
{{> components/Teaser/Teaser
|
|
53
|
-
variant="Serif"
|
|
54
|
-
teaserSize="lg"
|
|
55
|
-
topline="So plant Glasner bei der Eintracht"
|
|
56
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
59
|
-
}}
|
|
60
|
-
</div>
|
|
61
|
-
<div class="md:mt-8">
|
|
62
|
-
{{> components/Teaser/Teaser
|
|
63
|
-
variant="Serif"
|
|
64
|
-
teaserSize="md"
|
|
65
|
-
topline="So plant Glasner bei der Eintracht"
|
|
66
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
68
|
-
author="Stephan Reich"
|
|
69
|
-
}}
|
|
70
|
-
|
|
71
|
-
{{> components/Teaser/Teaser
|
|
72
|
-
variant="Serif"
|
|
73
|
-
teaserSize="md"
|
|
74
|
-
topline="So plant Glasner bei der Eintracht"
|
|
75
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
77
|
-
author="Stephan Reich"
|
|
78
|
-
}}
|
|
79
|
-
|
|
80
|
-
{{> components/Teaser/Teaser
|
|
81
|
-
variant="Serif"
|
|
82
|
-
teaserSize="md"
|
|
83
|
-
topline="So plant Glasner bei der Eintracht"
|
|
84
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
87
|
-
}}
|
|
35
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
36
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
37
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
88
38
|
</div>
|
|
89
|
-
<div class="
|
|
90
|
-
{{> components/Teaser/Teaser
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
topline="So plant Glasner bei der Eintracht"
|
|
94
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
96
|
-
author="Stephan Reich"
|
|
97
|
-
}}
|
|
98
|
-
|
|
99
|
-
{{> components/Teaser/Teaser
|
|
100
|
-
variant="Serif"
|
|
101
|
-
teaserSize="lg"
|
|
102
|
-
topline="So plant Glasner bei der Eintracht"
|
|
103
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
106
|
-
}}
|
|
39
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
40
|
+
{{> components/Teaser/Teaser-standard teasersize="md"}}
|
|
41
|
+
{{> components/Teaser/Teaser-standard teasersize="md"}}
|
|
42
|
+
{{> components/Teaser/Teaser-standard teasersize="md"}}
|
|
107
43
|
</div>
|
|
108
|
-
<div class="
|
|
109
|
-
{{> components/Teaser/Teaser
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
}}
|
|
117
|
-
|
|
118
|
-
{{> components/Teaser/Teaser
|
|
119
|
-
variant="Serif"
|
|
120
|
-
teaserSize="lg"
|
|
121
|
-
topline="So plant Glasner bei der Eintracht"
|
|
122
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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
|
-
author="Stephan Reich"
|
|
125
|
-
}}
|
|
44
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
45
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
46
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
47
|
+
</div>
|
|
48
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
49
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
50
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
51
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
52
|
+
{{> components/Teaser/Teaser-standard teasersize="sm"}}
|
|
126
53
|
</div>
|
|
127
|
-
<div class="
|
|
128
|
-
{{> components/Teaser/Teaser
|
|
129
|
-
|
|
130
|
-
teaserSize="sm"
|
|
131
|
-
topline="So plant Glasner bei der Eintracht"
|
|
132
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
134
|
-
author="Stephan Reich"
|
|
135
|
-
}}
|
|
136
|
-
|
|
137
|
-
{{> components/Teaser/Teaser
|
|
138
|
-
variant="Serif"
|
|
139
|
-
teaserSize="sm"
|
|
140
|
-
topline="So plant Glasner bei der Eintracht"
|
|
141
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
143
|
-
author="Stephan Reich"
|
|
144
|
-
}}
|
|
145
|
-
|
|
146
|
-
{{> components/Teaser/Teaser
|
|
147
|
-
variant="Serif"
|
|
148
|
-
teaserSize="sm"
|
|
149
|
-
topline="So plant Glasner bei der Eintracht"
|
|
150
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
152
|
-
author="Stephan Reich"
|
|
153
|
-
}}
|
|
154
|
-
{{> components/Teaser/Teaser
|
|
155
|
-
variant="Serif"
|
|
156
|
-
teaserSize="sm"
|
|
157
|
-
topline="So plant Glasner bei der Eintracht"
|
|
158
|
-
headline="Silvas Erbe wird auf mehrere Schultern verteilt"
|
|
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."
|
|
160
|
-
author="Stephan Reich"
|
|
161
|
-
}}
|
|
54
|
+
<div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-8 sm:col-main">
|
|
55
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
56
|
+
{{> components/Teaser/Teaser-standard teasersize="lg"}}
|
|
162
57
|
</div>
|
|
163
58
|
|
|
164
59
|
</div>
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
|
|
2
|
-
|
|
2
|
+
import 'core-js/actual/structured-clone';
|
|
3
3
|
import page from './Page.hbs'
|
|
4
4
|
import NavigationData from '../Header/navigation.json'
|
|
5
5
|
import NavigationData2 from '../Header/navigation2.json'
|
|
6
6
|
import NavigationData3 from '../Header/navigation3.json'
|
|
7
7
|
import NavigationData4 from '../Header/navigation4.json'
|
|
8
|
+
import hero_teaser from '../Teaser/data/teaser_standard_xxl_serif.json'
|
|
9
|
+
const NavigationDataWithTeaser = structuredClone(Object.assign({}, NavigationData, hero_teaser))
|
|
10
|
+
const NavigationDataWithTeaser2 = structuredClone(Object.assign({}, NavigationData2, hero_teaser))
|
|
11
|
+
const NavigationDataWithTeaser3 = structuredClone(Object.assign({}, NavigationData3, hero_teaser))
|
|
12
|
+
const NavigationDataWithTeaser4 = structuredClone(Object.assign({}, NavigationData4, hero_teaser))
|
|
8
13
|
|
|
9
14
|
<Meta
|
|
10
15
|
title="Komponenten/Page/Page"
|
|
11
16
|
argTypes={{}}
|
|
12
|
-
parameters={{
|
|
17
|
+
parameters={{
|
|
18
|
+
chromatic: {
|
|
19
|
+
viewports: [360, 768, 1024]
|
|
20
|
+
},
|
|
21
|
+
layout: 'fullscreen' }}
|
|
13
22
|
/>
|
|
14
23
|
|
|
15
24
|
export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
@@ -23,16 +32,16 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
|
|
|
23
32
|
# Page
|
|
24
33
|
|
|
25
34
|
<Preview withToolbar>
|
|
26
|
-
<Story name="Default" args={
|
|
35
|
+
<Story name="Default" args={NavigationDataWithTeaser}>
|
|
27
36
|
{Template.bind({})}
|
|
28
37
|
</Story>
|
|
29
|
-
<Story name="With Unwetter" args={
|
|
38
|
+
<Story name="With Unwetter" args={NavigationDataWithTeaser2}>
|
|
30
39
|
{Template.bind({})}
|
|
31
40
|
</Story>
|
|
32
|
-
<Story name="With subnav open" args={
|
|
41
|
+
<Story name="With subnav open" args={NavigationDataWithTeaser3}>
|
|
33
42
|
{Template.bind({})}
|
|
34
43
|
</Story>
|
|
35
|
-
<Story name="With subnav open and Service Nav Item active" args={
|
|
44
|
+
<Story name="With subnav open and Service Nav Item active" args={NavigationDataWithTeaser4}>
|
|
36
45
|
{Template.bind({})}
|
|
37
46
|
</Story>
|
|
38
47
|
</Preview>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<span class="block mt-2 text-xs text-grey-scorpion font-headingSerif">{{text}}</span>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
|
|
2
|
+
|
|
3
|
+
import byline from "./Byline.hbs";
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Komponenten/Teaser/Komponenten/Byline"
|
|
7
|
+
argTypes={{
|
|
8
|
+
text: {
|
|
9
|
+
control: "text",
|
|
10
|
+
description: "Bylinetext",
|
|
11
|
+
},
|
|
12
|
+
}}
|
|
13
|
+
/>
|
|
14
|
+
|
|
15
|
+
export const Template = ({ text, ...args }) => {
|
|
16
|
+
// You can either use a function to create DOM elements or use a plain html string!
|
|
17
|
+
// return `<span>${topline}</span>`;
|
|
18
|
+
return byline({ text, ...args });
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
# Byline
|
|
22
|
+
|
|
23
|
+
<Preview withToolbar>
|
|
24
|
+
<Story
|
|
25
|
+
name="default"
|
|
26
|
+
args={{
|
|
27
|
+
text:
|
|
28
|
+
"Dies ist die Byline",
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
{Template.bind({})}
|
|
32
|
+
</Story>
|
|
33
|
+
</Preview>
|
|
34
|
+
|
|
35
|
+
<ArgsTable story="default" />
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<article class="col-span-12 flex gap-y-4 gap-x-5 {{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
|
-
<figure class="{{inline-switch teasersize '["sm"]' '["basis-
|
|
2
|
+
<figure class="{{inline-switch teasersize '["sm"]' '["basis-2/5 md:flex-full"]'}} ">
|
|
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" ~}}
|
|
5
5
|
{{/components/base/link}}
|
|
6
6
|
</figure>
|
|
7
|
-
<div class="{{inline-switch teasersize '["sm"]' '["basis-
|
|
7
|
+
<div class="{{inline-switch teasersize '["sm"]' '["basis-3/5 md:flex-full"]'}} ">
|
|
8
8
|
<header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
|
|
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
|
-
<div class="hidden mt-2 text-base font-copy
|
|
12
|
+
<div class="{{inline-switch teasersize '["xxl"]' '["","hidden md:block"]'}} mt-2 text-base font-copy">{{shorttext}}</div>
|
|
13
13
|
{{#if profiles}}
|
|
14
|
-
|
|
14
|
+
{{> components/Teaser/Byline text=profiles}}
|
|
15
15
|
{{/if}}
|
|
16
16
|
</section>
|
|
17
17
|
</div>
|
|
@@ -116,12 +116,12 @@
|
|
|
116
116
|
{
|
|
117
117
|
"media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
|
|
118
118
|
"sizes": "100vw",
|
|
119
|
-
"srcset": "https://picsum.photos/id/188/320/
|
|
119
|
+
"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"
|
|
120
120
|
},
|
|
121
121
|
{
|
|
122
122
|
"media": "all and (min-width: 64em)",
|
|
123
123
|
"sizes": "960px",
|
|
124
|
-
"srcset": "https://picsum.photos/id/188/320/
|
|
124
|
+
"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"
|
|
125
125
|
}
|
|
126
126
|
]
|
|
127
127
|
}
|
package/tailwind.config.js
CHANGED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
|
|
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">
|
|
3
|
-
<img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
|
|
4
|
-
loading="lazy"
|
|
5
|
-
data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
|
|
6
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
|
|
7
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
|
|
8
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
|
|
9
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w"
|
|
10
|
-
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|
11
|
-
alt="Corona Coronavirus Sujet"
|
|
12
|
-
class="w-full"
|
|
13
|
-
srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
|
|
14
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
|
|
15
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
|
|
16
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
|
|
17
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w">
|
|
18
|
-
|
|
19
|
-
{{#if labelType}}
|
|
20
|
-
<div class="mt-4">
|
|
21
|
-
{{> components/Label type=labelType text=labelText}}
|
|
22
|
-
</div>
|
|
23
|
-
{{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
|
|
24
|
-
{{else}}
|
|
25
|
-
{{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
|
|
26
|
-
{{/if}}
|
|
27
|
-
|
|
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>
|
|
29
|
-
{{#if author}}
|
|
30
|
-
<div class="mt-1 text-sm text-gray-500 font-headingSerif">Von {{author}}</div>
|
|
31
|
-
{{/if}}
|
|
32
|
-
</div>
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
|
|
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">
|
|
3
|
-
<img sizes="(min-width: 43.75em) and (max-width: 63.063em) calc(50vw - 40px),(min-width: 63.125em) 461px, calc(100vw-20px)"
|
|
4
|
-
loading="lazy"
|
|
5
|
-
data-srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
|
|
6
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
|
|
7
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
|
|
8
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
|
|
9
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w"
|
|
10
|
-
src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
|
11
|
-
alt="Corona Coronavirus Sujet"
|
|
12
|
-
class="w-full"
|
|
13
|
-
srcset="https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__small.jpg 320w,
|
|
14
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium.jpg 480w,
|
|
15
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__medium__extended.jpg 640w,
|
|
16
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9.jpg 960w,
|
|
17
|
-
https://www.hessenschau.de/panorama/corona-coronavirus-sujet-102~_t-1583235764383_v-16to9__retina.jpg 1920w">
|
|
18
|
-
|
|
19
|
-
{{#if labelType}}
|
|
20
|
-
<div class="mt-4">
|
|
21
|
-
{{> components/Label type=labelType text=labelText}}
|
|
22
|
-
</div>
|
|
23
|
-
{{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serf"]' '["headingSerif","heading"]') headline=headline topline=""}}
|
|
24
|
-
{{else}}
|
|
25
|
-
{{> components/Teaser/Teaser-Heading headlineTag="h2" size=teaserSize font=(inline-switch variant '["Serif", "Sans Serif"]' '["headingSerif","heading"]') headline=headline topline=topline}}
|
|
26
|
-
{{/if}}
|
|
27
|
-
|
|
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>
|
|
29
|
-
{{#if author}}
|
|
30
|
-
<div class="mt-1 text-sm text-gray-500 font-headingSerif">Von {{author}}</div>
|
|
31
|
-
{{/if}}
|
|
32
|
-
</div>
|
|
@@ -1,156 +0,0 @@
|
|
|
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
|
|
7
|
-
title="Komponenten/Teaser/Standard"
|
|
8
|
-
argTypes={{
|
|
9
|
-
variant: {
|
|
10
|
-
options: ['Serif', 'Sans Serif'],
|
|
11
|
-
control: { type: 'inline-radio' },
|
|
12
|
-
},
|
|
13
|
-
teaserSize: {
|
|
14
|
-
control: {
|
|
15
|
-
type: 'select',
|
|
16
|
-
options: ['xxl','xl', 'lg', 'md', 'sm'],
|
|
17
|
-
},
|
|
18
|
-
description: 'Teaser Größe',
|
|
19
|
-
table: {
|
|
20
|
-
defaultValue: {
|
|
21
|
-
summary: 'xl',
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
labelType: {
|
|
26
|
-
options: ['', 'ticker', 'event', 'pm'],
|
|
27
|
-
control: {
|
|
28
|
-
type: 'select',
|
|
29
|
-
labels: { ticker: 'Ticker', event: 'Event', pm: 'Pressemitteilung' },
|
|
30
|
-
},
|
|
31
|
-
description: 'Label',
|
|
32
|
-
},
|
|
33
|
-
labelText: {
|
|
34
|
-
control: 'text',
|
|
35
|
-
description: 'Label Text',
|
|
36
|
-
},
|
|
37
|
-
topline: {
|
|
38
|
-
control: 'text',
|
|
39
|
-
description: 'Topline Text',
|
|
40
|
-
},
|
|
41
|
-
headline: {
|
|
42
|
-
control: 'text',
|
|
43
|
-
description: 'Headline Text',
|
|
44
|
-
},
|
|
45
|
-
teaserText: {
|
|
46
|
-
control: 'text',
|
|
47
|
-
description: 'Teaser Text',
|
|
48
|
-
},
|
|
49
|
-
author: {
|
|
50
|
-
control: 'text',
|
|
51
|
-
description: 'Autor',
|
|
52
|
-
},
|
|
53
|
-
}}
|
|
54
|
-
decorators={[
|
|
55
|
-
(Story) => {
|
|
56
|
-
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">
|
|
57
|
-
${Story()}
|
|
58
|
-
</div></div>`
|
|
59
|
-
},
|
|
60
|
-
]}
|
|
61
|
-
/>
|
|
62
|
-
|
|
63
|
-
export const Template = ({ variant, ...args }) => {
|
|
64
|
-
// You can either use a function to create DOM elements or use a plain html string!
|
|
65
|
-
// return `<div>${label}</div>`;
|
|
66
|
-
return teaser({ variant, ...args })
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
# Button
|
|
70
|
-
|
|
71
|
-
Ein toller Einleitungstext für unsere `Teaser` Komponente:
|
|
72
|
-
|
|
73
|
-
<Preview withToolbar>
|
|
74
|
-
<Story
|
|
75
|
-
name="Standard Hero"
|
|
76
|
-
args={{
|
|
77
|
-
variant: 'Serif',
|
|
78
|
-
teaserSize: 'xxl',
|
|
79
|
-
topline: 'So plant Glasner bei der Eintracht',
|
|
80
|
-
headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
|
|
81
|
-
teaserText:
|
|
82
|
-
'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.',
|
|
83
|
-
author: 'Stephan Reich',
|
|
84
|
-
}}
|
|
85
|
-
>
|
|
86
|
-
{Template.bind({})}
|
|
87
|
-
</Story>
|
|
88
|
-
</Preview>
|
|
89
|
-
|
|
90
|
-
<Preview withToolbar>
|
|
91
|
-
<Story
|
|
92
|
-
name="Standard xl"
|
|
93
|
-
args={{
|
|
94
|
-
variant: 'Serif',
|
|
95
|
-
teaserSize: 'xl',
|
|
96
|
-
topline: 'So plant Glasner bei der Eintracht',
|
|
97
|
-
headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
|
|
98
|
-
teaserText:
|
|
99
|
-
'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.',
|
|
100
|
-
author: 'Stephan Reich',
|
|
101
|
-
}}
|
|
102
|
-
>
|
|
103
|
-
{Template.bind({})}
|
|
104
|
-
</Story>
|
|
105
|
-
</Preview>
|
|
106
|
-
|
|
107
|
-
<Preview withToolbar>
|
|
108
|
-
<Story
|
|
109
|
-
name="Standard lg"
|
|
110
|
-
args={{
|
|
111
|
-
variant: 'Serif',
|
|
112
|
-
teaserSize: 'lg',
|
|
113
|
-
topline: 'So plant Glasner bei der Eintracht',
|
|
114
|
-
headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
|
|
115
|
-
teaserText:
|
|
116
|
-
'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
|
-
author: 'Stephan Reich',
|
|
118
|
-
}}
|
|
119
|
-
>
|
|
120
|
-
{Template.bind({})}
|
|
121
|
-
</Story>
|
|
122
|
-
</Preview>
|
|
123
|
-
|
|
124
|
-
<Preview withToolbar>
|
|
125
|
-
<Story
|
|
126
|
-
name="Standard md"
|
|
127
|
-
args={{
|
|
128
|
-
variant: 'Serif',
|
|
129
|
-
teaserSize: 'md',
|
|
130
|
-
topline: 'So plant Glasner bei der Eintracht',
|
|
131
|
-
headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
|
|
132
|
-
teaserText:
|
|
133
|
-
'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.',
|
|
134
|
-
author: 'Stephan Reich',
|
|
135
|
-
}}
|
|
136
|
-
>
|
|
137
|
-
{Template.bind({})}
|
|
138
|
-
</Story>
|
|
139
|
-
</Preview>
|
|
140
|
-
|
|
141
|
-
<Preview withToolbar>
|
|
142
|
-
<Story
|
|
143
|
-
name="Standard sm"
|
|
144
|
-
args={{
|
|
145
|
-
variant: 'Serif',
|
|
146
|
-
teaserSize: 'sm',
|
|
147
|
-
topline: 'So plant Glasner bei der Eintracht',
|
|
148
|
-
headline: 'Silvas Erbe wird auf mehrere Schultern verteilt',
|
|
149
|
-
teaserText:
|
|
150
|
-
'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.',
|
|
151
|
-
author: 'Stephan Reich',
|
|
152
|
-
}}
|
|
153
|
-
>
|
|
154
|
-
{Template.bind({})}
|
|
155
|
-
</Story>
|
|
156
|
-
</Preview>
|