hr-design-system-handlebars 0.37.5 → 0.38.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 (14) hide show
  1. package/.github/workflows/chromatic.yml +4 -0
  2. package/.github/workflows/release.yml +2 -2
  3. package/CHANGELOG.md +48 -0
  4. package/README.md +40 -0
  5. package/dist/assets/index.css +37 -3
  6. package/dist/views/components/Teaser/Teaser-Heading.hbs +1 -1
  7. package/dist/views/components/Topline.hbs +1 -0
  8. package/package.json +1 -1
  9. package/src/assets/tailwind.css +30 -0
  10. package/src/stories/views/components/Teaser/Teaser-Heading.hbs +1 -1
  11. package/src/stories/views/components/Teaser/teaser.json +157 -117
  12. package/src/stories/views/components/Topline.hbs +1 -0
  13. package/src/stories/views/components/Topline.stories.mdx +37 -0
  14. package/tailwind.config.js +1 -0
package/.github/workflows/chromatic.yml CHANGED
@@ -16,6 +16,10 @@ jobs:
16
16
  # The list of steps that the action will go through
17
17
  steps:
18
18
  - uses: actions/checkout@v1
19
+ - name: Use Node.js 16.x
20
+ uses: actions/setup-node@v1
21
+ with:
22
+ node-version: 16.x
19
23
  - run: npm ci
20
24
  #👇 Adds Chromatic as a step in the workflow
21
25
  - uses: chromaui/action@v1
package/.github/workflows/release.yml CHANGED
@@ -21,10 +21,10 @@ jobs:
21
21
  - name: Unset header
22
22
  # checkout@v2 adds a header that makes branch protection report errors ):
23
23
  run: git config --local --unset http.https://github.com/.extraheader
24
- - name: Use Node.js 12.x
24
+ - name: Use Node.js 16.x
25
25
  uses: actions/setup-node@v1
26
26
  with:
27
- node-version: 12.x
27
+ node-version: 16.x
28
28
  - uses: bahmutov/npm-install@v1.6.0
29
29
  - name: Create Release
30
30
  env:
package/CHANGELOG.md CHANGED
@@ -1,3 +1,51 @@
1
+ # v0.38.1 (Thu Mar 31 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - add topline-component [#201](https://github.com/mumprod/hr-design-system-handlebars/pull/201) ([@hanswurstsalat](https://github.com/hanswurstsalat))
6
+
7
+ #### 📝 Documentation
8
+
9
+ - DOCS: adds section to nvm in readme [#200](https://github.com/mumprod/hr-design-system-handlebars/pull/200) ([@szuelch](https://github.com/szuelch))
10
+
11
+ #### Authors: 2
12
+
13
+ - [@szuelch](https://github.com/szuelch)
14
+ - Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
15
+
16
+ ---
17
+
18
+ # v0.38.0 (Mon Mar 28 2022)
19
+
20
+ #### 🚀 Enhancement
21
+
22
+ - DOC: adds installation instructions [#199](https://github.com/mumprod/hr-design-system-handlebars/pull/199) ([@szuelch](https://github.com/szuelch))
23
+ - CHORE: update to node.js version [#198](https://github.com/mumprod/hr-design-system-handlebars/pull/198) ([@szuelch](https://github.com/szuelch))
24
+
25
+ #### 🐛 Bug Fix
26
+
27
+ - Feature/dpe 1520 [#197](https://github.com/mumprod/hr-design-system-handlebars/pull/197) ([@szuelch](https://github.com/szuelch))
28
+
29
+ #### Authors: 1
30
+
31
+ - [@szuelch](https://github.com/szuelch)
32
+
33
+ ---
34
+
35
+ # v0.37.6 (Thu Mar 24 2022)
36
+
37
+ #### 🐛 Bug Fix
38
+
39
+ - testtest [#196](https://github.com/mumprod/hr-design-system-handlebars/pull/196) (zouhair1 [@selbaciri](https://github.com/selbaciri))
40
+ - test [#194](https://github.com/mumprod/hr-design-system-handlebars/pull/194) (zouhair1 [@selbaciri](https://github.com/selbaciri))
41
+
42
+ #### Authors: 2
43
+
44
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
45
+ - selbaciri (zouhair1)
46
+
47
+ ---
48
+
1
49
  # v0.37.5 (Thu Mar 24 2022)
2
50
 
3
51
  #### 🐛 Bug Fix
package/README.md CHANGED
@@ -1,3 +1,43 @@
1
1
  # HR Designsystem
2
2
 
3
+ ## Installation
4
+
5
+ Das Designsystem ist mit Node.js LTS Version 16.14.2 gebaut. Vor der Installation daher bitte Node.js und NPM
6
+ auf die folgenden Versionen aktualisieren.
7
+
8
+ | Werkzeug | Version |
9
+ | -------- | ------- |
10
+ | Node.js | 16.14.2 |
11
+ | NPM | 8.5.0 |
12
+
13
+ ---
14
+
15
+ **Hinweis**
16
+
17
+ Node.js installiert man am besten mit dem Node Version Manager NVM. Dies ist zwar eigentlich ein Linux Projekt, kann aber als nvm-windows auch unter Windows genutzt werden. Die Installationsdateien können unter https://github.com/coreybutler/nvm-windows/releases heruntergeladen werden. NVM gestattet es je nach Bedarf schnell über die Konsole zwischen mehreren Versionen von node.js zu wechseln. Seit der Version 1.18 von NVM müssen zur korrekten Nutzung die Hinweise unter https://github.com/coreybutler/nvm-windows/wiki/Common-Issues#permissions-exit-1-exit-5-access-denied-exit-145 beachtet werden.
18
+
19
+ ---
20
+
21
+ Zur Installation des Designsystems bitte zunächst das Projekt in ein beliebiges Verzeichnis auf der Festplatte mit
22
+
23
+ ```
24
+ git clone https://github.com/mumprod/hr-design-system-handlebars.git
25
+ ```
26
+
27
+ klonen. Danach in das Installationsverzeichnis wechseln und alle notwendigen
28
+ npm Pakete mit dem Befehl
29
+
30
+ ```
31
+ npm ci
32
+ ```
33
+
34
+ installieren.
35
+ Mit dem Befehl
36
+
37
+ ```
38
+ npm run storybook
39
+ ```
40
+
41
+ kann das Designsystem lokal gestartet werden.
42
+
3
43
  Weitere Infos zum HR Designsystem und dessen Gebrauch folgen in den kommenden Wochen.
package/dist/assets/index.css CHANGED
@@ -22,6 +22,8 @@
22
22
  --color-label-download: #606060;
23
23
  /* Pressemitteilungen */
24
24
  --color-label-pm: #006eb7;
25
+ /* Dachzeile */
26
+ --color-topline: #006dc1;
25
27
  }
26
28
 
27
29
  [data-theme='hessenschau'] {
@@ -46,6 +48,8 @@
46
48
  --color-label-download: #606060;
47
49
  /* Pressemitteilungen */
48
50
  --color-label-pm: #006eb7;
51
+ /* Dachzeile */
52
+ --color-topline: #006dc1;
49
53
  }
50
54
 
51
55
  [data-theme='hr-bigband'] {
@@ -66,6 +70,8 @@
66
70
  --color-label-download: #606060;
67
71
  /* Event */
68
72
  --color-label-event: #000000;
73
+ /* Dachzeile */
74
+ --color-topline: #c20016;
69
75
  }
70
76
 
71
77
  [data-theme='hr-fernsehen'] {
@@ -86,6 +92,8 @@
86
92
  --color-label-download: #606060;
87
93
  /* Event */
88
94
  --color-label-event: #000000;
95
+ /* Dachzeile */
96
+ --color-topline: #c20016;
89
97
  }
90
98
 
91
99
  [data-theme='hr-inforadio'] {
@@ -106,6 +114,8 @@
106
114
  --color-label-download: #606060;
107
115
  /* Event */
108
116
  --color-label-event: #000000;
117
+ /* Dachzeile */
118
+ --color-topline: #c20016;
109
119
  }
110
120
 
111
121
  [data-theme='hr-rundfunkrat'] {
@@ -128,6 +138,8 @@
128
138
  --color-label-event: #000000;
129
139
  /* Pressemitteilungen */
130
140
  --color-label-pm: #006eb7;
141
+ /* Dachzeile */
142
+ --color-topline: #c20016;
131
143
  }
132
144
 
133
145
  [data-theme='hr-werbung'] {
@@ -150,6 +162,8 @@
150
162
  --color-label-event: #000000;
151
163
  /* Pressemitteilungen */
152
164
  --color-label-pm: #006eb7;
165
+ /* Dachzeile */
166
+ --color-topline: #c20016;
153
167
  }
154
168
 
155
169
  [data-theme='hr-sinfonieorchester'] {
@@ -170,6 +184,8 @@
170
184
  --color-label-download: #606060;
171
185
  /* Event */
172
186
  --color-label-event: #000000;
187
+ /* Dachzeile */
188
+ --color-topline: #c20016;
173
189
  }
174
190
 
175
191
  [data-theme='hr-bigband'] {
@@ -190,6 +206,8 @@
190
206
  --color-label-download: #606060;
191
207
  /* Event */
192
208
  --color-label-event: #000000;
209
+ /* Dachzeile */
210
+ --color-topline: #c20016;
193
211
  }
194
212
 
195
213
  [data-theme='hr'] {
@@ -212,6 +230,8 @@
212
230
  --color-label-event: #000000;
213
231
  /* Pressemitteilungen */
214
232
  --color-label-pm: #006eb7;
233
+ /* Dachzeile */
234
+ --color-topline: #c20016;
215
235
  }
216
236
 
217
237
  [data-theme='hr1'] {
@@ -232,6 +252,8 @@
232
252
  --color-label-download: #606060;
233
253
  /* Event */
234
254
  --color-label-event: #000000;
255
+ /* Dachzeile */
256
+ --color-topline: #c20016;
235
257
  }
236
258
 
237
259
  [data-theme='hr2'] {
@@ -252,6 +274,8 @@
252
274
  --color-label-download: #606060;
253
275
  /* Event */
254
276
  --color-label-event: #000000;
277
+ /* Dachzeile */
278
+ --color-topline: #c20016;
255
279
  }
256
280
 
257
281
  [data-theme='hr3'] {
@@ -272,6 +296,8 @@
272
296
  --color-label-download: #606060;
273
297
  /* Event */
274
298
  --color-label-event: #000000;
299
+ /* Dachzeile */
300
+ --color-topline: #c20016;
275
301
  }
276
302
 
277
303
  [data-theme='hr4'] {
@@ -292,6 +318,8 @@
292
318
  --color-label-download: #606060;
293
319
  /* Event */
294
320
  --color-label-event: #000000;
321
+ /* Dachzeile */
322
+ --color-topline: #c20016;
295
323
  }
296
324
 
297
325
  [data-theme='you-fm'] {
@@ -312,6 +340,8 @@
312
340
  --color-label-download: #606060;
313
341
  /* Event */
314
342
  --color-label-event: #000000;
343
+ /* Dachzeile */
344
+ --color-topline: #c20016;
315
345
  }
316
346
 
317
347
  /*! purgecss end ignore */
@@ -1476,6 +1506,9 @@ Ensure the default browser behavior of the `hidden` attribute.
1476
1506
  .mt-6 {
1477
1507
  margin-top: 1.5rem;
1478
1508
  }
1509
+ .mt-5 {
1510
+ margin-top: 1.25rem;
1511
+ }
1479
1512
  .-mt-2 {
1480
1513
  margin-top: -0.5rem;
1481
1514
  }
@@ -1491,9 +1524,6 @@ Ensure the default browser behavior of the `hidden` attribute.
1491
1524
  .mt-8 {
1492
1525
  margin-top: 2rem;
1493
1526
  }
1494
- .mt-3 {
1495
- margin-top: 0.75rem;
1496
- }
1497
1527
  .mt-1\.5 {
1498
1528
  margin-top: 0.375rem;
1499
1529
  }
@@ -2170,6 +2200,10 @@ Ensure the default browser behavior of the `hidden` attribute.
2170
2200
  --tw-text-opacity: 1;
2171
2201
  color: rgba(255, 255, 255, var(--tw-text-opacity));
2172
2202
  }
2203
+ .text-toplineColor {
2204
+ color: #006dc1;
2205
+ color: var(--color-topline);
2206
+ }
2173
2207
  .text-blue-congress {
2174
2208
  --tw-text-opacity: 1;
2175
2209
  color: rgba(0, 82, 147, var(--tw-text-opacity));
package/dist/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
2
2
  {{#if topline}}
3
- <span class="block text-xl font-heading mt-3">{{topline}}</span>
3
+ {{> components/Topline text=topline }}
4
4
  {{/if}}
5
5
  <span class="block {{inline-switch size '["lg","sm"]' '["text-3xl","text-2xl","text-2xl"]'}} {{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading font-bold"]'}} mt-1.5">{{headline}}</span>
6
6
  </{{headlineTag}}>
package/dist/views/components/Topline.hbs ADDED
@@ -0,0 +1 @@
1
+ <span class="block mt-5 text-base text-toplineColor font-heading">{{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.37.5",
9
+ "version": "0.38.1",
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
@@ -22,6 +22,8 @@
22
22
  --color-label-download: theme('colors.grey.scorpion');
23
23
  /* Pressemitteilungen */
24
24
  --color-label-pm: theme('colors.blue.deepCerulean');
25
+ /* Dachzeile */
26
+ --color-topline: #006dc1;
25
27
  }
26
28
 
27
29
  [data-theme='hessenschau'] {
@@ -46,6 +48,8 @@
46
48
  --color-label-download: theme('colors.grey.scorpion');
47
49
  /* Pressemitteilungen */
48
50
  --color-label-pm: theme('colors.blue.deepCerulean');
51
+ /* Dachzeile */
52
+ --color-topline: #006dc1;
49
53
  }
50
54
 
51
55
  [data-theme='hr-bigband'] {
@@ -66,6 +70,8 @@
66
70
  --color-label-download: theme('colors.grey.scorpion');
67
71
  /* Event */
68
72
  --color-label-event: theme('colors.black.DEFAULT');
73
+ /* Dachzeile */
74
+ --color-topline: #c20016;
69
75
  }
70
76
 
71
77
  [data-theme='hr-fernsehen'] {
@@ -86,6 +92,8 @@
86
92
  --color-label-download: theme('colors.grey.scorpion');
87
93
  /* Event */
88
94
  --color-label-event: theme('colors.black.DEFAULT');
95
+ /* Dachzeile */
96
+ --color-topline: #c20016;
89
97
  }
90
98
 
91
99
  [data-theme='hr-inforadio'] {
@@ -106,6 +114,8 @@
106
114
  --color-label-download: theme('colors.grey.scorpion');
107
115
  /* Event */
108
116
  --color-label-event: theme('colors.black.DEFAULT');
117
+ /* Dachzeile */
118
+ --color-topline: #c20016;
109
119
  }
110
120
 
111
121
  [data-theme='hr-rundfunkrat'] {
@@ -128,6 +138,8 @@
128
138
  --color-label-event: theme('colors.black.DEFAULT');
129
139
  /* Pressemitteilungen */
130
140
  --color-label-pm: theme('colors.blue.deepCerulean');
141
+ /* Dachzeile */
142
+ --color-topline: #c20016;
131
143
  }
132
144
 
133
145
  [data-theme='hr-werbung'] {
@@ -150,6 +162,8 @@
150
162
  --color-label-event: theme('colors.black.DEFAULT');
151
163
  /* Pressemitteilungen */
152
164
  --color-label-pm: theme('colors.blue.deepCerulean');
165
+ /* Dachzeile */
166
+ --color-topline: #c20016;
153
167
  }
154
168
 
155
169
  [data-theme='hr-sinfonieorchester'] {
@@ -170,6 +184,8 @@
170
184
  --color-label-download: theme('colors.grey.scorpion');
171
185
  /* Event */
172
186
  --color-label-event: theme('colors.black.DEFAULT');
187
+ /* Dachzeile */
188
+ --color-topline: #c20016;
173
189
  }
174
190
 
175
191
  [data-theme='hr-bigband'] {
@@ -190,6 +206,8 @@
190
206
  --color-label-download: theme('colors.grey.scorpion');
191
207
  /* Event */
192
208
  --color-label-event: theme('colors.black.DEFAULT');
209
+ /* Dachzeile */
210
+ --color-topline: #c20016;
193
211
  }
194
212
 
195
213
  [data-theme='hr'] {
@@ -212,6 +230,8 @@
212
230
  --color-label-event: theme('colors.black.DEFAULT');
213
231
  /* Pressemitteilungen */
214
232
  --color-label-pm: theme('colors.blue.deepCerulean');
233
+ /* Dachzeile */
234
+ --color-topline: #c20016;
215
235
  }
216
236
 
217
237
  [data-theme='hr1'] {
@@ -232,6 +252,8 @@
232
252
  --color-label-download: theme('colors.grey.scorpion');
233
253
  /* Event */
234
254
  --color-label-event: theme('colors.black.DEFAULT');
255
+ /* Dachzeile */
256
+ --color-topline: #c20016;
235
257
  }
236
258
 
237
259
  [data-theme='hr2'] {
@@ -252,6 +274,8 @@
252
274
  --color-label-download: theme('colors.grey.scorpion');
253
275
  /* Event */
254
276
  --color-label-event: theme('colors.black.DEFAULT');
277
+ /* Dachzeile */
278
+ --color-topline: #c20016;
255
279
  }
256
280
 
257
281
  [data-theme='hr3'] {
@@ -272,6 +296,8 @@
272
296
  --color-label-download: theme('colors.grey.scorpion');
273
297
  /* Event */
274
298
  --color-label-event: theme('colors.black.DEFAULT');
299
+ /* Dachzeile */
300
+ --color-topline: #c20016;
275
301
  }
276
302
 
277
303
  [data-theme='hr4'] {
@@ -292,6 +318,8 @@
292
318
  --color-label-download: theme('colors.grey.scorpion');
293
319
  /* Event */
294
320
  --color-label-event: theme('colors.black.DEFAULT');
321
+ /* Dachzeile */
322
+ --color-topline: #c20016;
295
323
  }
296
324
 
297
325
  [data-theme='you-fm'] {
@@ -312,6 +340,8 @@
312
340
  --color-label-download: theme('colors.grey.scorpion');
313
341
  /* Event */
314
342
  --color-label-event: theme('colors.black.DEFAULT');
343
+ /* Dachzeile */
344
+ --color-topline: #c20016;
315
345
  }
316
346
 
317
347
  /*! purgecss end ignore */
package/src/stories/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
2
2
  {{#if topline}}
3
- <span class="block text-xl font-heading mt-3">{{topline}}</span>
3
+ {{> components/Topline text=topline }}
4
4
  {{/if}}
5
5
  <span class="block {{inline-switch size '["lg","sm"]' '["text-3xl","text-2xl","text-2xl"]'}} {{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading font-bold"]'}} mt-1.5">{{headline}}</span>
6
6
  </{{headlineTag}}>
package/src/stories/views/components/Teaser/teaser.json CHANGED
@@ -1,137 +1,177 @@
1
1
  {
2
2
  "logicItems": [
3
3
  {
4
- "teasersize": "100",
5
- "hasGroupTitle": true,
6
- "groupTitle": "Gruppe 100%",
7
- "hasLink": "true",
8
- "link": {
9
- "url": "#gruppe1"
10
- },
11
- "logicItems": [
12
- {
13
- "logicitem": {
14
- "includeModel": {
15
- "cacheKey": {},
16
- "byline": "Byline",
17
- "title": "Title",
18
- "extendedTitle": "extendedTitle",
19
- "teasertype": "standard",
20
- "teasersize": "100",
21
- "teaserDate": {
22
- "htmlDate": "20.02.1983",
23
- "date": "20.02.1983",
24
- "dateSeparatorTime": "20.02.1983"
25
- },
26
- "teaserInfo": {
27
- "showTeaserInfo": true,
28
- "showTeaserInfoSection": true,
29
- "showTeaserInfoChannel": true,
30
- "showTeaserInfoAll": true,
31
- "showTeaserInfoDate": true,
32
- "showTeaserInfoDateTime": true,
33
- "showTeaserInfoProgramRef": true
34
- },
35
- "teaserImage": {
36
- "copyrightWithLinks": ""
37
- },
38
- "duration": {
39
- "inMinutes": "2:30"
40
- },
41
- "realTeasersize": "100",
42
- "isStandardTeaser": true,
43
- "isHeroTeaser": false,
44
- "isColored": false,
45
- "isMediaTeaser": false,
46
- "isGuide": false,
47
- "isProgram": false,
48
- "isEvent": false,
49
- "isTicker": false,
50
- "isAudio": false,
51
- "isVideo": false,
52
- "isPodcastEpisode": false,
53
- "isExtOrBrandLink": false,
54
- "isAuthor": false,
55
- "copyright": "Copyright Text",
56
- "audioAuthor": "Audio Author",
57
- "hasStatus": false,
58
- "statusDescriptionForLabelShort": "???",
59
- "hasTeaserItem": true,
60
- "allowAVConsumption": false,
61
- "displayEpgInfos": false,
62
- "aspectRatio": "16x9",
63
- "hideGeotag": false,
64
- "hideEditableByline": true,
65
- "doTracking": true,
66
- "trackingForArdMediatheksLink": false,
67
- "showMediatheksLink": false,
68
- "showAirdate": false,
69
- "showProfileInfoAsByline": false,
70
- "obsolet_brandOfTeaser": "hessenschau",
71
- "headingSize": "h1",
72
- "icon": true,
73
- "shorttext": "shorttext",
74
- "sophoraId": "test-100",
75
- "profiles": "Autoren",
76
- "airdateDate": {
77
- "htmlDate": "20.02.1983",
78
- "date": "20.02.1983",
79
- "dateSeparatorTime": "20.02.1983"
80
- },
81
- "airdateWithoutTime": {
82
- "htmlDate": "20.02.1983",
83
- "date": "20.02.1983",
84
- "dateSeparatorTime": "20.02.1983"
85
- },
86
- "geotag": [
87
- {
88
- "title": "Frankfurt"
4
+ "includePath": "components/teaser/teaser-group/group-default",
5
+ "includeModel": {
6
+ "hasLink": true,
7
+ "link": "#gruppe1",
8
+ "hasGroupTitle": true,
9
+ "groupTitle": "Gruppe 100%",
10
+ "teaserSize": "100",
11
+ "logicItems": [
12
+ {
13
+ "isSsi": true,
14
+ "logicItem": {
15
+ "includePath": "components/teaser/teaser-default",
16
+ "includeModel": {
17
+ "byline": "Byline",
18
+ "title": "Abgeschobene Geschwister aus Syrien zurück in Wolfhagen",
19
+ "topline": "Überglücklich, aber ohne Mama",
20
+ "extendedTitle": null,
21
+ "teasertype": "standard",
22
+ "teasersize": "100",
23
+ "teaserDate": {
24
+ "htmlDate": "20.02.1983",
25
+ "date": "20.02.1983",
26
+ "dateSeparatorTime": "20.02.1983"
89
27
  },
90
- {
91
- "title": "Offenbach"
92
- }
93
- ],
94
- "link": {
95
- "url": "/teaser1",
96
- "webviewUrl": "/teaser1#webview",
97
- "isTargetBlank": false,
98
- "hasIcon": false,
99
- "iconName": "iconName",
100
- "readMoreText": {
101
- "readMoreScreenreader": "readMoreScreenreader",
102
- "readMore": "read More",
103
- "readMoreLong": "read More Long"
104
- }
105
- },
106
- "content": {
107
- "teaserImage": "",
108
- "teasertype": "",
109
- "imageVariant": "",
110
- "isFileDownload": false,
111
- "readMoreText": {
112
- "readMoreScreenreader": "readMoreScreenreader",
113
- "readMore": "read More"
28
+ "teaserInfo": {
29
+ "showTeaserInfo": true,
30
+ "showTeaserInfoSection": true,
31
+ "showTeaserInfoChannel": true,
32
+ "showTeaserInfoAll": true,
33
+ "showTeaserInfoDate": true,
34
+ "showTeaserInfoDateTime": true,
35
+ "showTeaserInfoProgramRef": true
114
36
  },
115
- "trackingData": {
116
- "secondLevelId": "2",
117
- "pageName": "hessenschau"
37
+ "teaserImage": {
38
+ "copyrightWithLinks": "",
39
+ "responsiveImage": {
40
+ "asPicture": true,
41
+ "asImage": false,
42
+ "fallback": "https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__medium.jpg",
43
+ "sources": [
44
+ {
45
+ "media": "all and (max-width: 43.688em)",
46
+ "sizes": "100vw",
47
+ "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"
48
+ },
49
+ {
50
+ "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
51
+ "sizes": "100vw",
52
+ "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"
53
+ },
54
+ {
55
+ "media": "all and (min-width: 64em)",
56
+ "sizes": "960px",
57
+ "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"
58
+ }
59
+ ]
60
+ }
61
+ },
62
+ "hasMediaButtons": false,
63
+ "dontLazyload": true,
64
+ "realTeasersize": "100",
65
+ "isStandardTeaser": true,
66
+ "isHeroTeaser": true,
67
+ "isMediaTeaser": false,
68
+ "isGuide": false,
69
+ "isProgram": false,
70
+ "isEvent": false,
71
+ "isTicker": false,
72
+ "isAudio": false,
73
+ "isVideo": false,
74
+ "isPodcastEpisode": false,
75
+ "isExtOrBrandLink": false,
76
+ "isAuthor": false,
77
+ "copyright": "Copyright Text",
78
+ "audioAuthor": "Audio Author",
79
+ "hasStatus": false,
80
+ "hasTeaserItem": true,
81
+ "allowAVConsumption": false,
82
+ "displayEpgInfos": false,
83
+ "aspectRatio": "ar--teaserTop",
84
+ "hideGeotag": false,
85
+ "hideEditableByline": true,
86
+ "doTracking": true,
87
+ "trackingForArdMediatheksLink": false,
88
+ "showMediatheksLink": false,
89
+ "showAirdate": false,
90
+ "showProfileInfoAsByline": false,
91
+ "obsolet_brandOfTeaser": "hessenschau",
92
+ "headingSize": "h1",
93
+ "icon": "ortsmarke",
94
+ "imageVariant": "topteaser",
95
+ "shorttext": "shorttext",
96
+ "sophoraId": "rueckkehr-nach-abschiebung-wolfhagen--100",
97
+ "profiles": "Von Alf Haubitz und Alice Merton",
98
+ "teaserLead": {
99
+ "avDocument": "",
100
+ "image": ""
118
101
  },
119
102
  "label": {
120
103
  "type": "Ticker",
121
104
  "loca": "ticker",
122
- "duration": {
123
- "inMinutes": "2:30"
124
- },
125
105
  "byline": {
126
106
  "bylineSsi": "ssi",
127
107
  "bylineText": "BylineText"
128
108
  }
109
+ },
110
+ "geotag": [
111
+ {
112
+ "title": "Wolfhagen"
113
+ }
114
+ ],
115
+ "link": {
116
+ "url": "/teaser1",
117
+ "webviewUrl": "/teaser1#webview",
118
+ "isTargetBlank": false,
119
+ "hasIcon": false,
120
+ "iconName": "iconName",
121
+ "readMoreText": {
122
+ "readMoreScreenreader": "Zum Artikel",
123
+ "readMore": "mehr",
124
+ "readMoreLong": "read More Long"
125
+ },
126
+ "content": {
127
+ "teaserImage": {
128
+ "copyrightWithLinks": "",
129
+ "responsiveImage": {
130
+ "asPicture": true,
131
+ "asImage": false,
132
+ "fallback": "https://hessenschau-dev-red.hr.de/gesellschaft/rueckkehr-nach-abschiebung-102~_v-16to7__medium.jpg",
133
+ "sources": [
134
+ {
135
+ "media": "all and (max-width: 43.688em)",
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"
138
+ },
139
+ {
140
+ "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
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"
143
+ },
144
+ {
145
+ "media": "all and (min-width: 64em)",
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"
148
+ }
149
+ ]
150
+ }
151
+ },
152
+ "teasertype": "standard",
153
+ "imageVariant": "topteaser",
154
+ "isFileDownload": false,
155
+ "topline": "Überglücklich, aber ohne Mama",
156
+ "trackingData": {
157
+ "secondLevelId": "2",
158
+ "pageName": "hessenschau"
159
+ },
160
+ "label": {
161
+ "type": "Ticker",
162
+ "loca": "ticker",
163
+ "byline": {
164
+ "bylineSsi": "ssi",
165
+ "bylineText": "BylineText"
166
+ }
167
+ }
168
+ }
129
169
  }
130
170
  }
131
171
  }
132
172
  }
133
- }
134
- ]
173
+ ]
174
+ }
135
175
  }
136
176
  ]
137
177
  }
package/src/stories/views/components/Topline.hbs ADDED
@@ -0,0 +1 @@
1
+ <span class="block mt-5 text-base text-toplineColor font-heading">{{text}}</span>
package/src/stories/views/components/Topline.stories.mdx ADDED
@@ -0,0 +1,37 @@
1
+ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
2
+
3
+ import topline from "./Topline.hbs";
4
+
5
+ <Meta
6
+ title="Komponenten/Dachzeile"
7
+ argTypes={{
8
+ text: {
9
+ control: "text",
10
+ description: "Dachzeilentext",
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 topline({ text, ...args });
19
+ };
20
+
21
+ # Topline
22
+
23
+ Beispieltext für die Topline-Komponente:
24
+
25
+ <Preview withToolbar>
26
+ <Story
27
+ name="topline-1"
28
+ args={{
29
+ text:
30
+ "Dies ist die Dachzeile",
31
+ }}
32
+ >
33
+ {Template.bind({})}
34
+ </Story>
35
+ </Preview>
36
+
37
+ <ArgsTable story="topline-1" />
package/tailwind.config.js CHANGED
@@ -167,6 +167,7 @@ module.exports = {
167
167
  labelDownload: 'var(--color-label-download)',
168
168
  labelPm: 'var(--color-label-pm)',
169
169
  labelLive: 'var(--color-label-live)',
170
+ toplineColor: 'var(--color-topline)',
170
171
  },
171
172
  },
172
173
  },