hr-design-system-handlebars 0.47.2 → 0.47.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/build/helpers/loca.js +3 -1
  3. package/dist/views/components/site_header/header_alpine.js +75 -61
  4. package/dist/views/components/teaser/components/teaser_heading.hbs +1 -1
  5. package/package.json +1 -1
  6. package/src/assets/fixtures/teaser/teaser_labels.inc.json +4 -4
  7. package/src/stories/Example.stories.mdx +98 -0
  8. package/src/stories/example.hbs +8 -0
  9. package/src/stories/views/components/site_header/header_alpine.js +75 -61
  10. package/src/stories/views/components/teaser/components/teaser_heading.hbs +1 -1
  11. package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_label.json +1 -1
  12. package/src/stories/views/components/teaser/fixtures/teaser_poster_md_label.json +1 -1
  13. package/src/stories/views/components/teaser/fixtures/teaser_standard_hero_serif_label.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,39 @@
1
+ # v0.47.5 (Tue Jun 07 2022)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - some new code in header_alpine.js [#239](https://github.com/mumprod/hr-design-system-handlebars/pull/239) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
13
+ # v0.47.4 (Thu Jun 02 2022)
14
+
15
+ #### 🐛 Bug Fix
16
+
17
+ - - example story [#238](https://github.com/mumprod/hr-design-system-handlebars/pull/238) ([@vascoeduardo](https://github.com/vascoeduardo))
18
+
19
+ #### Authors: 1
20
+
21
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
22
+
23
+ ---
24
+
25
+ # v0.47.3 (Mon May 30 2022)
26
+
27
+ #### 🐛 Bug Fix
28
+
29
+ - - fixed label call in teaser_heading.hbs [#237](https://github.com/mumprod/hr-design-system-handlebars/pull/237) ([@vascoeduardo](https://github.com/vascoeduardo))
30
+
31
+ #### Authors: 1
32
+
33
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
34
+
35
+ ---
36
+
1
37
  # v0.47.2 (Mon May 30 2022)
2
38
 
3
39
  #### 🐛 Bug Fix
package/build/helpers/loca.js CHANGED
@@ -15,7 +15,9 @@ module.exports = function(text, options) {
15
15
  "comment_label_text": "Kommentar",
16
16
  "comment_label_text_many": "Kommentare",
17
17
  "comment_anchor_2": " Kommentaren des Artikels springen",
18
- "date_simple_at": options + " Uhr"
18
+ "date_simple_at": options + " Uhr",
19
+ "label_ticker":"Ticker",
20
+ "label_media":"Media",
19
21
  }
20
22
 
21
23
  for (let key in locas){
package/dist/views/components/site_header/header_alpine.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //Main Alpine Init Listener
2
- document.addEventListener('alpine:init', () => {
2
+ document.addEventListener('alpine:init', () => {
3
3
  // Alpine.stores for global variables
4
4
  Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
5
5
  Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
7
7
  Alpine.store('searchFieldOpen', false);
8
8
  Alpine.store('serviceNavIsOpen', false);
9
9
  Alpine.store('searchID', {
10
- current: '{{nextRandom}}'
10
+ current: '{{nextRandom}}'
11
11
  });
12
12
  Alpine.store('serviceID', {
13
13
  open: false,
14
- current: '0'
14
+ current: '0'
15
15
  });
16
16
  Alpine.store('navIsVisible', true);
17
+ Alpine.store('subNavIsVisible', false);
17
18
 
18
19
  // context for the main header element
19
20
  Alpine.data('mainNavigationHandler', () =>({
20
-
21
+
21
22
  debounce (callback, wait) {
22
23
  let timeoutId = null;
23
24
  return (...args) => {
24
25
  window.clearTimeout(timeoutId);
25
26
  timeoutId = window.setTimeout(() => {
26
- callback.apply(null, args);
27
+ callback.apply(null, args);
27
28
  }, wait);
28
29
  };
29
30
 
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
33
34
  let height = top.innerHeight
34
35
 
35
36
  window.addEventListener('scroll', this.debounce( () => {
36
- let winScroll = document.body.scrollTop || document.documentElement.scrollTop
37
+ let winScroll = document.body.scrollTop || document.documentElement.scrollTop
37
38
  winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
38
39
  //let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
39
40
  this.percent = Math.round((winScroll / height) * 100)
40
41
  lastScrollTop = winScroll
41
- //console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
42
+ //console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
42
43
  this.$store.navIsVisible = !this.isNavHidden()
43
- //console.log(this.$store.navIsVisible);
44
+ this.$store.subNavIsVisible = !this.isSubNavHidden()
45
+ //console.log(this.$store.navIsVisible);
44
46
  },50))
45
47
  },
46
48
  percent: 0,
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
52
54
  return this.shouldServiceNavBeHidden()
53
55
  }
54
56
  },
57
+ isSubNavHidden() {
58
+ if(this.$screen('lg')){
59
+ if (document.querySelector('.isSelectedAndOpen') !== null) {
60
+ return false
61
+ } else {
62
+ return true
63
+ }
64
+ } else {
65
+ return true
66
+ }
67
+ },
55
68
  shouldBrandNavBeHidden() {
56
- return this.percent > 0
69
+ return this.percent > 0
57
70
  },
58
71
  shouldSectionNavBeHidden() {
59
72
  return this.percent > 50 && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
60
73
  },
61
74
  shouldServiceNavBeHidden() {
62
- return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
75
+ return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
63
76
  },
64
77
  shouldServiceIconsBeHidden() {
65
- return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
78
+ return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
66
79
  },
67
80
  shouldFlyoutBeHidden() {
68
81
  return (this.percent > 50 && this.scrollingDown && this.$screen('lg') )
69
82
  },
70
- resetNav() {
83
+ resetNav() {
71
84
  if(window.innerWidth > 1023) {
72
85
  this.$refs.sectionnavigation.setAttribute("style","")
73
86
  } else {
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
85
98
  this.$store.clientWidth = nowClientWidth
86
99
  }
87
100
  else{
88
- // timeout is used to dispatch events after the resize is done
89
- let timeout
101
+ // timeout is used to dispatch events after the resize is done
102
+ let timeout
90
103
  clearTimeout(timeout)
91
104
  timeout = setTimeout(() => {
92
105
  this.$refs.sectionnavigation.classList.remove('hidden')
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
100
113
  nextNowClientHeight = nowClientHeight
101
114
  this.$store.clientWidth = nowClientWidth
102
115
  }
103
- },
116
+ },
104
117
  toggleSectionNav() {
105
- //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0 /// desktop? just clear maxHeight attribute )
106
- //true = sectionNav öffnet (maxheight = scrollheight)
107
- console.log('toggleSectionNav, Event: ' + this.$event.detail )
108
- if(this.$event.detail === false) {
109
- if (window.innerWidth < 1024) {
118
+ //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0 /// desktop? just clear maxHeight attribute )
119
+ //true = sectionNav öffnet (maxheight = scrollheight)
120
+ console.log('toggleSectionNav, Event: ' + this.$event.detail )
121
+ if(this.$event.detail === false) {
122
+ if (window.innerWidth < 1024) {
110
123
  this.$refs.sectionnavigation.style.maxHeight='0px'
111
- } else {
124
+ } else {
112
125
  this.$refs.sectionnavigation.style.maxHeight = ''
113
126
  }
114
127
  } else {
115
128
  let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
116
129
  let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
117
- let brandNavHeight = this.percent > 0 ? 40 : 0
118
-
130
+ let brandNavHeight = this.percent > 0 ? 40 : 0
131
+
119
132
  if(navheight > winheightcorr){
120
133
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
121
134
  this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
122
-
135
+
123
136
  } else {
124
137
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
125
- this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
138
+ this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
126
139
  }
127
140
  }
128
141
  },
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
142
155
  }
143
156
  if(this.$screen('lg') && mode == true){
144
157
  this.enableScrolling()
145
- }
146
- }
158
+ }
159
+ }
147
160
 
148
161
  }))
149
162
 
150
163
  // context for the overlay
151
164
  Alpine.data('overlayHandler', () => ({
152
- shouldOverlayBeShown() {
153
- return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true ))
154
- },
155
- overlayWasClicked() {
156
- this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
157
- this.$dispatch('burger-close')
158
- this.$dispatch('close-servicemenu')
159
- // this.$dispatch('toggleScrolling', true )
160
- this.toggleScrolling(true)
161
- }
162
- }))
165
+ shouldOverlayBeShown() {
166
+ return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true ))
167
+ },
168
+ overlayWasClicked() {
169
+ this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
170
+ this.$dispatch('burger-close')
171
+ this.$dispatch('close-servicemenu')
172
+ // this.$dispatch('toggleScrolling', true )
173
+ this.toggleScrolling(true)
174
+ }
175
+ }))
163
176
 
164
177
  // context for all dropdowns
165
178
  Alpine.data('dropdown', () => ({
166
179
  dropped: false,
167
180
  toggle() {
168
- this.dropped = ! this.dropped;
181
+ this.dropped = ! this.dropped;
169
182
  },
170
183
  toggleServiceNav(){
171
184
  this.dropped = ! this.dropped;
172
185
  this.$store.searchFieldOpen = false;
173
-
174
- this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
175
-
186
+
187
+ this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
188
+
176
189
  this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
177
-
190
+
178
191
  console.log('currentID: '+ this.$store.serviceID.current)
179
192
  console.log('target-id: '+this.$event.target.id)
180
193
  console.log('element-id: '+this.$el.id)
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
183
196
  this.$store.serviceID.current = this.$el.id
184
197
 
185
198
  this.toggleScrolling(!this.$store.serviceNavIsOpen)
186
-
199
+
187
200
  let myFlyout = document.querySelector('#flyout-'+this.$el.id)
188
- let brandNavHeight = this.percent > 0 ? 40 : 0
201
+ let brandNavHeight = this.percent > 0 ? 40 : 0
189
202
 
190
203
  if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
191
204
  window.setTimeout(function(){
192
205
  if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
193
206
  myFlyout.style.height = 'auto'
194
- window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
207
+ window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
195
208
  myFlyout.style.overflowY = 'scroll'
196
209
  } else {
197
210
  myFlyout.style.maxHeight = ''
198
- //myFlyout.style.overflowY = 'hidden'
199
- }
211
+ //myFlyout.style.overflowY = 'hidden'
212
+ }
200
213
  },150)
201
214
  }
202
215
  }
203
216
  }))
204
217
 
205
218
  // There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
206
- Alpine.data('flyoutHandler', () => ({
219
+ Alpine.data('flyoutHandler', () => ({
207
220
  init() {
208
- //Initial: x-collapse only on mobile/tablet
221
+ //Initial: x-collapse only on mobile/tablet
209
222
  if(window.innerWidth < 1024) {
210
223
  this.$el.setAttribute("x-collapse","")
211
- }
224
+ }
212
225
  },
213
226
  sectionNavFlyoutWatcher() {
214
227
  //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
215
228
  this.$watch('dropped', value => {
216
229
  let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
217
230
  let brandNavHeight = this.percent > 0 ? 40 : 0
218
- if(window.innerWidth < 1024) {
219
- if(value == true ) {
220
-
231
+ if(window.innerWidth < 1024) {
232
+ if(value == true ) {
233
+
221
234
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
222
235
  this.$refs.sectionnavigation.style.maxHeight = a +'px'
223
236
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
224
237
  } else {
225
238
  this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
226
239
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
227
- }
240
+ }
228
241
  } else {
229
242
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
230
243
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
231
244
  } else {
232
- this.$refs.sectionnavigation.style.overflowY = 'scroll'
245
+ this.$refs.sectionnavigation.style.overflowY = 'scroll'
233
246
  }
234
247
  }
235
248
  }
236
- })
249
+
250
+ })
237
251
  },
238
252
  setFlyoutAnimationStyle() {
239
253
  //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
240
254
  if(window.innerWidth > 1023) {
241
255
  if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
242
256
  this.$el.removeAttribute("x-collapse.duration.500ms")
243
- delete this.$el._x_transition;
244
- this.$el.style.removeProperty('overflow');
245
- this.$el.style.removeProperty('height');
257
+ delete this.$el._x_transition;
258
+ this.$el.style.removeProperty('overflow');
259
+ this.$el.style.removeProperty('height');
246
260
  if (! this.$el._x_isShown) this.$el.style.display = 'none'
247
261
  if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
248
262
  }
249
-
263
+
250
264
  } else {
251
265
  if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
252
266
  }
package/dist/views/components/teaser/components/teaser_heading.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#with label}}
2
2
  <div class="leading-5.5">
3
- {{> components/label/label type=loca text=type}}
3
+ {{> components/label/label type=this.type text=(loca this.loca)}}
4
4
  </div>
5
5
  {{/with~}}
6
6
  <{{~ headlineTag ~}}>
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "license": "MIT",
7
7
  "main": "dist/index.js",
8
8
  "repository": "https://github.com/szuelch/hr-design-system-handlebars",
9
- "version": "0.47.2",
9
+ "version": "0.47.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/fixtures/teaser/teaser_labels.inc.json CHANGED
@@ -1,15 +1,15 @@
1
1
  {
2
2
  "ticker": {
3
- "type": "Ticker",
4
- "loca": "ticker",
3
+ "type": "ticker",
4
+ "loca": "label_ticker",
5
5
  "byline": {
6
6
  "bylineSsi": "BylineText aus ssi",
7
7
  "bylineText": "BylineText"
8
8
  }
9
9
  },
10
10
  "media": {
11
- "type": "Media",
12
- "loca": "media",
11
+ "type": "media",
12
+ "loca": "label_media",
13
13
  "byline": {
14
14
  "bylineSsi": "BylineText aus ssi",
15
15
  "bylineText": "BylineText"
package/src/stories/Example.stories.mdx ADDED
@@ -0,0 +1,98 @@
1
+ import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
2
+ import { resetComponents } from '@storybook/components'
3
+ import icon from './views/components/base/image/icon.hbs'
4
+ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
5
+
6
+
7
+ import example from "./example.hbs";
8
+
9
+ <Meta
10
+ title="Grundlegendes/Template/Beispiel-Story"
11
+ argTypes={{
12
+ label: {
13
+ control: "text",
14
+ description: "Button text",
15
+ },
16
+ size: {
17
+ control: { type: "select", options: ["sm", "md", "lg", "xl"] },
18
+ description: "Größe des Buttons",
19
+ table: {
20
+ defaultValue: {
21
+ summary: "md",
22
+ },
23
+ },
24
+ },
25
+ type: {
26
+ description: "Typ des Buttons",
27
+ control: {
28
+ type: "select",
29
+ options: ["primary", "secondary"],
30
+ },
31
+ table: {
32
+ defaultValue: {
33
+ summary: "primary",
34
+ },
35
+ },
36
+ },
37
+ }}
38
+ />
39
+
40
+ export const Template = ({ label, ...args }) => {
41
+ // You can either use a function to create DOM elements or use a plain html string!
42
+ // return `<div>${label}</div>`;
43
+ return example({ label, ...args });
44
+ };
45
+
46
+ # Name der Komponente
47
+
48
+ ## Beschreibung/Abstract
49
+
50
+ Kurzer Beschreibungstext der die Komponente erklärt -> Penis
51
+
52
+ <Preview withToolbar>
53
+ <Story
54
+ name="Primary"
55
+ args={{
56
+ label: "Button",
57
+ }}
58
+ >
59
+ {Template.bind({})}
60
+ </Story>
61
+ </Preview>
62
+
63
+ ## Props
64
+
65
+ Beschreibung der wichtigsten parameter, die für die Komponente benötigt werden
66
+
67
+ <ArgsTable story="Primary" />
68
+
69
+ ## Usage/Verwendung
70
+
71
+ ggf. Beschreibung wann und wie die Komponente eingesetzt wird in handlebars
72
+
73
+ ```html
74
+ {{> components/teaser/components/teaser_heading
75
+ fontVariant=this.headingFontVariant
76
+ headlineTag=this.headlineTag
77
+ label=this.label
78
+ readMore=this.link.readMoreText.readMoreScreenreader
79
+ size=this.teaserSize
80
+ title=this.title
81
+ topline=this.topline }}
82
+ ```
83
+
84
+ ## Dos/Doents
85
+ <ComponentRules
86
+ rules={[
87
+ {
88
+ positive: {
89
+ component:<div>Get started</div>,
90
+ description:"Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces."
91
+ },
92
+ negative: {
93
+ component:<div>Get started and enjoy discount!</div>,
94
+ description:"Don’t use punctuation marks such as periods or exclamation points."
95
+ }
96
+ }
97
+ ]}
98
+ />
package/src/stories/example.hbs ADDED
@@ -0,0 +1,8 @@
1
+ <button class="js-load btn {{inline-switch size '["sm","lg","xl"]' '["btn--sm","btn--lg","btn--xl","btn--md"]'}} {{inline-switch type '["secondary"]' '["btn--secondary","btn--primary"]'}}" >
2
+ {{label}}
3
+ </button>
4
+ <div class="js-load outer" data-new-hr-foo='{"test":"bar"}'>
5
+ <div class="inner"></div>
6
+ </div>
7
+
8
+
package/src/stories/views/components/site_header/header_alpine.js CHANGED
@@ -1,5 +1,5 @@
1
1
  //Main Alpine Init Listener
2
- document.addEventListener('alpine:init', () => {
2
+ document.addEventListener('alpine:init', () => {
3
3
  // Alpine.stores for global variables
4
4
  Alpine.store('clientHeight', document.documentElement.clientHeight || document.body.clientHeight)
5
5
  Alpine.store('clientWidth', document.documentElement.clientWidth || document.body.clientWidth)
@@ -7,23 +7,24 @@ document.addEventListener('alpine:init', () => {
7
7
  Alpine.store('searchFieldOpen', false);
8
8
  Alpine.store('serviceNavIsOpen', false);
9
9
  Alpine.store('searchID', {
10
- current: '{{nextRandom}}'
10
+ current: '{{nextRandom}}'
11
11
  });
12
12
  Alpine.store('serviceID', {
13
13
  open: false,
14
- current: '0'
14
+ current: '0'
15
15
  });
16
16
  Alpine.store('navIsVisible', true);
17
+ Alpine.store('subNavIsVisible', false);
17
18
 
18
19
  // context for the main header element
19
20
  Alpine.data('mainNavigationHandler', () =>({
20
-
21
+
21
22
  debounce (callback, wait) {
22
23
  let timeoutId = null;
23
24
  return (...args) => {
24
25
  window.clearTimeout(timeoutId);
25
26
  timeoutId = window.setTimeout(() => {
26
- callback.apply(null, args);
27
+ callback.apply(null, args);
27
28
  }, wait);
28
29
  };
29
30
 
@@ -33,14 +34,15 @@ document.addEventListener('alpine:init', () => {
33
34
  let height = top.innerHeight
34
35
 
35
36
  window.addEventListener('scroll', this.debounce( () => {
36
- let winScroll = document.body.scrollTop || document.documentElement.scrollTop
37
+ let winScroll = document.body.scrollTop || document.documentElement.scrollTop
37
38
  winScroll > lastScrollTop ? this.scrollingDown = true : this.scrollingDown = false
38
39
  //let height = document.documentElement.scrollHeight - document.documentElement.clientHeight
39
40
  this.percent = Math.round((winScroll / height) * 100)
40
41
  lastScrollTop = winScroll
41
- //console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
42
+ //console.log('winscroll: '+winScroll+' height: '+height + ' percent: '+ this.percent)
42
43
  this.$store.navIsVisible = !this.isNavHidden()
43
- //console.log(this.$store.navIsVisible);
44
+ this.$store.subNavIsVisible = !this.isSubNavHidden()
45
+ //console.log(this.$store.navIsVisible);
44
46
  },50))
45
47
  },
46
48
  percent: 0,
@@ -52,22 +54,33 @@ document.addEventListener('alpine:init', () => {
52
54
  return this.shouldServiceNavBeHidden()
53
55
  }
54
56
  },
57
+ isSubNavHidden() {
58
+ if(this.$screen('lg')){
59
+ if (document.querySelector('.isSelectedAndOpen') !== null) {
60
+ return false
61
+ } else {
62
+ return true
63
+ }
64
+ } else {
65
+ return true
66
+ }
67
+ },
55
68
  shouldBrandNavBeHidden() {
56
- return this.percent > 0
69
+ return this.percent > 0
57
70
  },
58
71
  shouldSectionNavBeHidden() {
59
72
  return this.percent > 50 && this.scrollingDown && this.$store.burgeropen == false && this.$screen('lg')
60
73
  },
61
74
  shouldServiceNavBeHidden() {
62
- return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
75
+ return (this.percent > 90 && !this.$screen('lg') && this.scrollingDown && this.$store.burgeropen == false)
63
76
  },
64
77
  shouldServiceIconsBeHidden() {
65
- return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
78
+ return (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == true) || (this.percent > 50 && !this.$screen('md') && this.$store.burgeropen == false && this.$store.serviceNavIsOpen == false && this.scrollingDown == false)
66
79
  },
67
80
  shouldFlyoutBeHidden() {
68
81
  return (this.percent > 50 && this.scrollingDown && this.$screen('lg') )
69
82
  },
70
- resetNav() {
83
+ resetNav() {
71
84
  if(window.innerWidth > 1023) {
72
85
  this.$refs.sectionnavigation.setAttribute("style","")
73
86
  } else {
@@ -85,8 +98,8 @@ document.addEventListener('alpine:init', () => {
85
98
  this.$store.clientWidth = nowClientWidth
86
99
  }
87
100
  else{
88
- // timeout is used to dispatch events after the resize is done
89
- let timeout
101
+ // timeout is used to dispatch events after the resize is done
102
+ let timeout
90
103
  clearTimeout(timeout)
91
104
  timeout = setTimeout(() => {
92
105
  this.$refs.sectionnavigation.classList.remove('hidden')
@@ -100,29 +113,29 @@ document.addEventListener('alpine:init', () => {
100
113
  nextNowClientHeight = nowClientHeight
101
114
  this.$store.clientWidth = nowClientWidth
102
115
  }
103
- },
116
+ },
104
117
  toggleSectionNav() {
105
- //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0 /// desktop? just clear maxHeight attribute )
106
- //true = sectionNav öffnet (maxheight = scrollheight)
107
- console.log('toggleSectionNav, Event: ' + this.$event.detail )
108
- if(this.$event.detail === false) {
109
- if (window.innerWidth < 1024) {
118
+ //false = sectionNav schließt ( mobile/tablet? --> maxHeight = 0 /// desktop? just clear maxHeight attribute )
119
+ //true = sectionNav öffnet (maxheight = scrollheight)
120
+ console.log('toggleSectionNav, Event: ' + this.$event.detail )
121
+ if(this.$event.detail === false) {
122
+ if (window.innerWidth < 1024) {
110
123
  this.$refs.sectionnavigation.style.maxHeight='0px'
111
- } else {
124
+ } else {
112
125
  this.$refs.sectionnavigation.style.maxHeight = ''
113
126
  }
114
127
  } else {
115
128
  let winheightcorr = parseInt(window.innerHeight) - this.$refs.sectionnavigation.offsetTop
116
129
  let navheight = parseInt(this.$refs.sectionnavigation.scrollHeight)
117
- let brandNavHeight = this.percent > 0 ? 40 : 0
118
-
130
+ let brandNavHeight = this.percent > 0 ? 40 : 0
131
+
119
132
  if(navheight > winheightcorr){
120
133
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
121
134
  this.$refs.sectionnavigation.style.maxHeight = winheightcorr + brandNavHeight +'px'
122
-
135
+
123
136
  } else {
124
137
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
125
- this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
138
+ this.$refs.sectionnavigation.style.maxHeight = this.$el.scrollHeight + 'px'
126
139
  }
127
140
  }
128
141
  },
@@ -142,39 +155,39 @@ document.addEventListener('alpine:init', () => {
142
155
  }
143
156
  if(this.$screen('lg') && mode == true){
144
157
  this.enableScrolling()
145
- }
146
- }
158
+ }
159
+ }
147
160
 
148
161
  }))
149
162
 
150
163
  // context for the overlay
151
164
  Alpine.data('overlayHandler', () => ({
152
- shouldOverlayBeShown() {
153
- return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true ))
154
- },
155
- overlayWasClicked() {
156
- this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
157
- this.$dispatch('burger-close')
158
- this.$dispatch('close-servicemenu')
159
- // this.$dispatch('toggleScrolling', true )
160
- this.toggleScrolling(true)
161
- }
162
- }))
165
+ shouldOverlayBeShown() {
166
+ return (!this.$screen('lg') && ( this.$store.burgeropen == true || this.$store.serviceNavIsOpen == true || this.$store.searchFieldOpen == true ))
167
+ },
168
+ overlayWasClicked() {
169
+ this.$store.serviceNavIsOpen ? this.$store.serviceNavIsOpen = false : null
170
+ this.$dispatch('burger-close')
171
+ this.$dispatch('close-servicemenu')
172
+ // this.$dispatch('toggleScrolling', true )
173
+ this.toggleScrolling(true)
174
+ }
175
+ }))
163
176
 
164
177
  // context for all dropdowns
165
178
  Alpine.data('dropdown', () => ({
166
179
  dropped: false,
167
180
  toggle() {
168
- this.dropped = ! this.dropped;
181
+ this.dropped = ! this.dropped;
169
182
  },
170
183
  toggleServiceNav(){
171
184
  this.dropped = ! this.dropped;
172
185
  this.$store.searchFieldOpen = false;
173
-
174
- this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
175
-
186
+
187
+ this.$el.id != this.$store.serviceID.current ? this.$store.serviceNavIsOpen = true : this.$el.id == this.$store.serviceID.current ? this.$store.serviceNavIsOpen = !this.$store.serviceNavIsOpen : null;
188
+
176
189
  this.$store.burgeropen == true ? this.$dispatch('burger-close') : null
177
-
190
+
178
191
  console.log('currentID: '+ this.$store.serviceID.current)
179
192
  console.log('target-id: '+this.$event.target.id)
180
193
  console.log('element-id: '+this.$el.id)
@@ -183,70 +196,71 @@ document.addEventListener('alpine:init', () => {
183
196
  this.$store.serviceID.current = this.$el.id
184
197
 
185
198
  this.toggleScrolling(!this.$store.serviceNavIsOpen)
186
-
199
+
187
200
  let myFlyout = document.querySelector('#flyout-'+this.$el.id)
188
- let brandNavHeight = this.percent > 0 ? 40 : 0
201
+ let brandNavHeight = this.percent > 0 ? 40 : 0
189
202
 
190
203
  if (this.$store.serviceNavIsOpen == true && this.dropped == true) {
191
204
  window.setTimeout(function(){
192
205
  if (myFlyout.scrollHeight > window.innerHeight-myFlyout.offsetTop) {
193
206
  myFlyout.style.height = 'auto'
194
- window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
207
+ window.innerWidth < 768 ? myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 80 + brandNavHeight +'px' : myFlyout.style.maxHeight = window.innerHeight-myFlyout.offsetTop - 40 + brandNavHeight +'px'
195
208
  myFlyout.style.overflowY = 'scroll'
196
209
  } else {
197
210
  myFlyout.style.maxHeight = ''
198
- //myFlyout.style.overflowY = 'hidden'
199
- }
211
+ //myFlyout.style.overflowY = 'hidden'
212
+ }
200
213
  },150)
201
214
  }
202
215
  }
203
216
  }))
204
217
 
205
218
  // There are several Flyouts sharing the same functionality and context, so put the data in an Alpine.data to make it reusable
206
- Alpine.data('flyoutHandler', () => ({
219
+ Alpine.data('flyoutHandler', () => ({
207
220
  init() {
208
- //Initial: x-collapse only on mobile/tablet
221
+ //Initial: x-collapse only on mobile/tablet
209
222
  if(window.innerWidth < 1024) {
210
223
  this.$el.setAttribute("x-collapse","")
211
- }
224
+ }
212
225
  },
213
226
  sectionNavFlyoutWatcher() {
214
227
  //Adds scrollheight of the flyout to sectionNav container to make sure all following items stay visible
215
228
  this.$watch('dropped', value => {
216
229
  let a = this.$refs.sectionnavigation.scrollHeight + this.$el.scrollHeight;
217
230
  let brandNavHeight = this.percent > 0 ? 40 : 0
218
- if(window.innerWidth < 1024) {
219
- if(value == true ) {
220
-
231
+ if(window.innerWidth < 1024) {
232
+ if(value == true ) {
233
+
221
234
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
222
235
  this.$refs.sectionnavigation.style.maxHeight = a +'px'
223
236
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
224
237
  } else {
225
238
  this.$refs.sectionnavigation.style.maxHeight = window.innerHeight - this.$refs.sectionnavigation.offsetTop + brandNavHeight +'px'
226
239
  this.$refs.sectionnavigation.style.overflowY = 'scroll'
227
- }
240
+ }
228
241
  } else {
229
242
  if (a < window.innerHeight - this.$refs.sectionnavigation.offsetTop) {
230
243
  this.$refs.sectionnavigation.style.overflowY = 'hidden'
231
244
  } else {
232
- this.$refs.sectionnavigation.style.overflowY = 'scroll'
245
+ this.$refs.sectionnavigation.style.overflowY = 'scroll'
233
246
  }
234
247
  }
235
248
  }
236
- })
249
+
250
+ })
237
251
  },
238
252
  setFlyoutAnimationStyle() {
239
253
  //sets/cleansup the x-collapse attributes depending on window.innerWidth, gets fired @resize.window in NavigationFlyout.hbs
240
254
  if(window.innerWidth > 1023) {
241
255
  if(this.$el.hasAttribute("x-collapse.duration.500ms")) {
242
256
  this.$el.removeAttribute("x-collapse.duration.500ms")
243
- delete this.$el._x_transition;
244
- this.$el.style.removeProperty('overflow');
245
- this.$el.style.removeProperty('height');
257
+ delete this.$el._x_transition;
258
+ this.$el.style.removeProperty('overflow');
259
+ this.$el.style.removeProperty('height');
246
260
  if (! this.$el._x_isShown) this.$el.style.display = 'none'
247
261
  if(this.$el.hasAttribute("hidden")) this.$el.removeAttribute("hidden")
248
262
  }
249
-
263
+
250
264
  } else {
251
265
  if(!this.$el.hasAttribute("x-collapse.duration.500ms")) this.$el.setAttribute("x-collapse.duration.500ms","")
252
266
  }
package/src/stories/views/components/teaser/components/teaser_heading.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#with label}}
2
2
  <div class="leading-5.5">
3
- {{> components/label/label type=loca text=type}}
3
+ {{> components/label/label type=this.type text=(loca this.loca)}}
4
4
  </div>
5
5
  {{/with~}}
6
6
  <{{~ headlineTag ~}}>
package/src/stories/views/components/teaser/fixtures/teaser_alternative_hero_serif_label.json CHANGED
@@ -1 +1 @@
1
- {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"Ticker","loca":"ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
1
+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"alternative","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"Überglücklich, aber ohne Mama","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
package/src/stories/views/components/teaser/fixtures/teaser_poster_md_label.json CHANGED
@@ -1 +1 @@
1
- {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Liveticker ausm Urlaub","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Ticker"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","trackingData":{"secondLevelId":"2","pageName":"hessenschau"},"label":{"type":"Ticker","loca":"ticker","byline":{"bylineSsi":"","bylineText":""}}}},"teasersize":"33","label":{"type":"Ticker","loca":"ticker","byline":{"bylineSsi":"","bylineText":""}}}}}
1
+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Liveticker ausm Urlaub","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"Zum Ticker"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/164/480/480","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","srcset":"https://picsum.photos/id/164/320/320 320w, https://picsum.photos/id/164/480/480 480w, https://picsum.photos/id/164/640/640 640w, https://picsum.photos/id/164/960/960 960w, https://picsum.photos/id/164/1920/1080 1920w"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","trackingData":{"secondLevelId":"2","pageName":"hessenschau"},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"","bylineText":""}}}},"teasersize":"33","label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"","bylineText":""}}}}}
package/src/stories/views/components/teaser/fixtures/teaser_standard_hero_serif_label.json CHANGED
@@ -1 +1 @@
1
- {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"Ticker","loca":"ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}
1
+ {"isSsi":true,"logicItem":{"includePath":"components/teaser/teaser_standard","includeModel":{"byline":"Byline","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","headingFontVariant":"serif","extendedTitle":"","teaserType":"standard","teaserSize":"hero","teaserDate":{"htmlDateTime":"2022-04-17T19:30+0200","htmlDate":"20.02.1983","date":"17.04.22","dateSeparatorTime":"17.04.22, 19:30"},"teaserInfo":{"showTeaserInfo":true,"showTeaserInfoSection":true,"showTeaserInfoChannel":true,"showTeaserInfoAll":true,"showTeaserInfoDate":false,"showTeaserInfoDateTime":true,"showTeaserInfoProgramRef":true},"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"hasMediaButtons":false,"dontLazyload":true,"isStandardTeaser":true,"isHeroTeaser":true,"isMediaTeaser":false,"isGuide":false,"isProgram":false,"isEvent":false,"isTicker":false,"isAudio":false,"isVideo":false,"isPodcastEpisode":false,"isExtOrBrandLink":false,"isAuthor":false,"copyright":"Copyright Text","audioAuthor":"Audio Author","hasStatus":false,"hasTeaserItem":true,"allowAVConsumption":false,"displayEpgInfos":false,"aspectRatio":"ar--teaserTop","hideGeotag":false,"hideEditableByline":true,"doTracking":true,"trackingForArdMediatheksLink":false,"showMediatheksLink":false,"showAirdate":false,"showProfileInfoAsByline":false,"obsolet_brandOfTeaser":"hessenschau","documentSection":"Gesellschaft","headlineTag":"h1","icon":"ortsmarke","imageVariant":"topteaser","shorttext":"Vor einem Jahr wurde die syrische Familie Kheder aus Wolfhagen abgeschoben. Die Gemeinde setzte alle Hebel in Bewegung, um Mutter, Tochter und Sohn zurückzuholen. Im Fall der Kinder hat das nun zu einem Happy End geführt. Doch ihre Mutter fehlt.","sophoraId":"rueckkehr-nach-abschiebung-wolfhagen--100","profiles":"Von Alf Haubitz und Alice Merton","teaserLead":{"avDocument":"","image":""},"geotag":[{"title":"Wolfhagen"}],"link":{"url":"/teaser1","webviewUrl":"/teaser1#webview","isTargetBlank":false,"hasIcon":false,"iconName":"iconName","readMoreText":{"readMoreScreenreader":"Zum Artikel","readMore":"mehr","readMoreLong":"read More Long"},"content":{"headlineTag":"h1","headingFontVariant":"serif","imageVariant":"topteaser","isFileDownload":false,"teaserImage":{"alttext":"Lorem ipsum","copyrightWithLinks":"","responsiveImage":{"asPicture":false,"asImage":true,"fallback":"https://picsum.photos/id/188/480/270","sources":[{"sizes":"(min-width: 1010px) 960px, 100vw","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"}]}},"teaserSize":"hero","teaserType":"standard","title":"Abgeschobene Geschwister aus Syrien zurück in Wolfhagen","topline":"","trackingData":{"secondLevelId":"2","pageName":"hessenschau"}}},"label":{"type":"ticker","loca":"label_ticker","byline":{"bylineSsi":"BylineText aus ssi","bylineText":"BylineText"}}}}}