hr-design-system-handlebars 0.42.1 β†’ 0.42.2

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 (20) hide show
  1. package/.storybook/preview.js +4 -0
  2. package/CHANGELOG.md +12 -0
  3. package/dist/assets/index.css +31 -3
  4. package/dist/views/components/Teaser/Teaser-Heading.hbs +1 -1
  5. package/dist/views/components/Teaser/Teaser-standard.hbs +17 -17
  6. package/dist/views/components/Teaser/Topline.hbs +1 -1
  7. package/dist/views/components/base/image/responsiveImage.hbs +1 -1
  8. package/package.json +1 -1
  9. package/src/stories/views/components/Teaser/Teaser-Heading.hbs +1 -1
  10. package/src/stories/views/components/Teaser/Teaser-standard.hbs +17 -17
  11. package/src/stories/views/components/Teaser/Topline.hbs +1 -1
  12. package/src/stories/views/components/Teaser/data/16_7_teaserImage.json +27 -0
  13. package/src/stories/views/components/Teaser/data/16_9_teaserImage.json +17 -0
  14. package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json +10 -38
  15. package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json +10 -38
  16. package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json +7 -24
  17. package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json +10 -38
  18. package/src/stories/views/components/Teaser/data/teaser_standard_xxl_serif.json +10 -30
  19. package/src/stories/views/components/Teaser/teaser-standard.stories.mdx +4 -1
  20. package/src/stories/views/components/base/image/responsiveImage.hbs +1 -1
package/.storybook/preview.js CHANGED
@@ -9,12 +9,16 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
9
9
  import Initializer from '../build/webpack/feature-loader/initializer/initializer'
10
10
  import loadFeature from '../build/webpack/feature-loader/initializer/loader'
11
11
 
12
+
13
+ function loadDelayedImages(){setTimeout((function(){var t,e=document.images,s=[],a=function(t){void 0!==window.picturefill&&window.picturefill({reevaluate:!0,elements:t})};for(var i=0;i<e.length;++i)(t=e[i].dataset?e[i].dataset.srcset:e[i].getAttribute("data-srcset"))&&(0===e[i].getBoundingClientRect().top?s.push(e[i]):e[i].setAttribute("srcset",t));a(e),setTimeout((function(){var t;for(var i=0;i<s.length;++i)t=s[i].dataset?s[i].dataset.srcset:s[i].getAttribute("data-srcset"),s[i].setAttribute("srcset",t);a(s)}),900)}),0)}
14
+
12
15
  document.addEventListener('DOMContentLoaded', function (event) {
13
16
  console.log('DOM fully loaded and parsed')
14
17
 
15
18
  console.log('Start feature initialization')
16
19
 
17
20
  Initializer.run(document, loadFeature)
21
+ setTimeout(loadDelayedImages,200);
18
22
  })
19
23
 
20
24
  if (process.env.NODE_ENV !== 'production') {
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v0.42.2 (Mon Apr 11 2022)
2
+
3
+ #### πŸ› Bug Fix
4
+
5
+ - responsiveImage 2.0 [#209](https://github.com/mumprod/hr-design-system-handlebars/pull/209) ([@vascoeduardo](https://github.com/vascoeduardo))
6
+
7
+ #### Authors: 1
8
+
9
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
10
+
11
+ ---
12
+
1
13
  # v0.42.1 (Mon Apr 11 2022)
2
14
 
3
15
  #### πŸ› Bug Fix
package/dist/assets/index.css CHANGED
@@ -1514,15 +1514,15 @@ Ensure the default browser behavior of the `hidden` attribute.
1514
1514
  .-mt-10 {
1515
1515
  margin-top: -2.5rem;
1516
1516
  }
1517
- .mt-4 {
1518
- margin-top: 1rem;
1519
- }
1520
1517
  .mt-1 {
1521
1518
  margin-top: 0.25rem;
1522
1519
  }
1523
1520
  .mb-4 {
1524
1521
  margin-bottom: 1rem;
1525
1522
  }
1523
+ .mt-4 {
1524
+ margin-top: 1rem;
1525
+ }
1526
1526
  .mt-0\.5 {
1527
1527
  margin-top: 0.125rem;
1528
1528
  }
@@ -1620,6 +1620,9 @@ Ensure the default browser behavior of the `hidden` attribute.
1620
1620
  .max-h-0 {
1621
1621
  max-height: 0px;
1622
1622
  }
1623
+ .max-h-6 {
1624
+ max-height: 1.5rem;
1625
+ }
1623
1626
  .max-h-10 {
1624
1627
  max-height: 2.5rem;
1625
1628
  }
@@ -1686,6 +1689,14 @@ Ensure the default browser behavior of the `hidden` attribute.
1686
1689
  -ms-flex-negative: 0;
1687
1690
  flex-shrink: 0;
1688
1691
  }
1692
+ .basis-1\/3 {
1693
+ -ms-flex-preferred-size: 33.333333%;
1694
+ flex-basis: 33.333333%;
1695
+ }
1696
+ .basis-2\/3 {
1697
+ -ms-flex-preferred-size: 66.666667%;
1698
+ flex-basis: 66.666667%;
1699
+ }
1689
1700
  .-translate-x-1\/2 {
1690
1701
  --tw-translate-x: -50%;
1691
1702
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1811,6 +1822,14 @@ Ensure the default browser behavior of the `hidden` attribute.
1811
1822
  .gap-y-9 {
1812
1823
  row-gap: 2.25rem;
1813
1824
  }
1825
+ .gap-y-4 {
1826
+ row-gap: 1rem;
1827
+ }
1828
+ .gap-x-5 {
1829
+ -webkit-column-gap: 1.25rem;
1830
+ -moz-column-gap: 1.25rem;
1831
+ column-gap: 1.25rem;
1832
+ }
1814
1833
  .divide-y > :not([hidden]) ~ :not([hidden]) {
1815
1834
  --tw-divide-y-reverse: 0;
1816
1835
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2542,6 +2561,9 @@ Ensure the default browser behavior of the `hidden` attribute.
2542
2561
  .md\:mb-0 {
2543
2562
  margin-bottom: 0px;
2544
2563
  }
2564
+ .md\:block {
2565
+ display: block;
2566
+ }
2545
2567
  .md\:flex {
2546
2568
  display: -webkit-box;
2547
2569
  display: -ms-flexbox;
@@ -2588,6 +2610,12 @@ Ensure the default browser behavior of the `hidden` attribute.
2588
2610
  -ms-flex: 1 1 auto;
2589
2611
  flex: 1 1 auto;
2590
2612
  }
2613
+ .md\:flex-col {
2614
+ -webkit-box-orient: vertical;
2615
+ -webkit-box-direction: normal;
2616
+ -ms-flex-direction: column;
2617
+ flex-direction: column;
2618
+ }
2591
2619
  .md\:justify-end {
2592
2620
  -webkit-box-pack: end;
2593
2621
  -ms-flex-pack: end;
package/dist/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }}
2
2
  {{#with this.content.label}}
3
- <div class="mt-4">
3
+ <div class="max-h-6">
4
4
  {{> components/Label type=loca text=type}}
5
5
  </div>
6
6
  {{/with~}}
package/dist/views/components/Teaser/Teaser-standard.hbs CHANGED
@@ -1,18 +1,18 @@
1
- <article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
2
- {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
3
- {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
4
- {{/components/base/link}}
5
- {{#if labelType}}
6
- <div class="mt-4">
7
- {{> components/Label type=labelType text=labelText}}
8
- </div>
9
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
10
- {{else}}
11
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
12
- {{/if}}
13
-
14
- <div class="mt-2 text-base font-copy">{{shorttext}}</div>
15
- {{#if profiles}}
16
- <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
17
- {{/if}}
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-1/3 md:flex-full"]'}} ">
3
+ {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
4
+ {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
5
+ {{/components/base/link}}
6
+ </figure>
7
+ <div class="{{inline-switch teasersize '["sm"]' '["basis-2/3 md:flex-full"]'}} ">
8
+ <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
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
+ </header>
11
+ <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
12
+ <div class="hidden mt-2 text-base font-copy md:block">{{shorttext}}</div>
13
+ {{#if profiles}}
14
+ <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
15
+ {{/if}}
16
+ </section>
17
+ </div>
18
18
  </article>
package/dist/views/components/Teaser/Topline.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <span
2
- class="block mt-4 text-base text-toplineColor font-heading"
2
+ class="block text-base text-toplineColor font-heading"
3
3
  aria-label="{{readMore}}: {{text}}"
4
4
  >
5
5
  {{text}}
package/dist/views/components/base/image/responsiveImage.hbs CHANGED
@@ -39,7 +39,7 @@
39
39
  {{/unless}}
40
40
  <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
41
41
  loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
42
- {{#with this.srcset}} {{#if ../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
42
+ {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
43
43
  src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
44
44
  alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="image imageSimple {{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
45
45
  {{~#with ../../_addClass }}</div>{{/with}}
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.1",
9
+ "version": "0.42.2",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "start-storybook -p 6006 public",
package/src/stories/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }}
2
2
  {{#with this.content.label}}
3
- <div class="mt-4">
3
+ <div class="max-h-6">
4
4
  {{> components/Label type=loca text=type}}
5
5
  </div>
6
6
  {{/with~}}
package/src/stories/views/components/Teaser/Teaser-standard.hbs CHANGED
@@ -1,18 +1,18 @@
1
- <article class="col-span-12 {{inline-switch teasersize '["sm","md","lg"]' '["md:col-span-3","md:col-span-4","md:col-span-6"]'}}">
2
- {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
3
- {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
4
- {{/components/base/link}}
5
- {{#if labelType}}
6
- <div class="mt-4">
7
- {{> components/Label type=labelType text=labelText}}
8
- </div>
9
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=""}}
10
- {{else}}
11
- {{> components/Teaser/Teaser-Heading headlineTag="h2" size=teasersize font=(inline-switch serifHeading '[true, false]' '["font-headingSerif","font-heading font-bold"]') headline=title topline=topline}}
12
- {{/if}}
13
-
14
- <div class="mt-2 text-base font-copy">{{shorttext}}</div>
15
- {{#if profiles}}
16
- <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
17
- {{/if}}
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-1/3 md:flex-full"]'}} ">
3
+ {{#>components/base/link _cssClasses="" _isAriaHidden=true _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="mediaLink" }}
4
+ {{~> components/base/image/responsiveImage this.content.teaserImage _type=this.content.teasertype _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content mediaPlayerLoader__mediaplayerArea" ~}}
5
+ {{/components/base/link}}
6
+ </figure>
7
+ <div class="{{inline-switch teasersize '["sm"]' '["basis-2/3 md:flex-full"]'}} ">
8
+ <header class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
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
+ </header>
11
+ <section class="md:px-0 {{inline-switch teasersize '["sm"]' '["","px-5"]'}}">
12
+ <div class="hidden mt-2 text-base font-copy md:block">{{shorttext}}</div>
13
+ {{#if profiles}}
14
+ <div class="mt-1 text-sm text-gray-500 font-headingSerif">{{profiles}}</div>
15
+ {{/if}}
16
+ </section>
17
+ </div>
18
18
  </article>
package/src/stories/views/components/Teaser/Topline.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <span
2
- class="block mt-4 text-base text-toplineColor font-heading"
2
+ class="block text-base text-toplineColor font-heading"
3
3
  aria-label="{{readMore}}: {{text}}"
4
4
  >
5
5
  {{text}}
package/src/stories/views/components/Teaser/data/16_7_teaserImage.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "teaserImage": {
3
+ "copyrightWithLinks": "",
4
+ "responsiveImage": {
5
+ "asPicture": true,
6
+ "asImage": false,
7
+ "fallback": "https://picsum.photos/id/188/480/210",
8
+ "sources": [
9
+ {
10
+ "media": "all and (max-width: 43.688em)",
11
+ "sizes": "100vw",
12
+ "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"
13
+ },
14
+ {
15
+ "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
16
+ "sizes": "100vw",
17
+ "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
18
+ },
19
+ {
20
+ "media": "all and (min-width: 64em)",
21
+ "sizes": "960px",
22
+ "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
23
+ }
24
+ ]
25
+ }
26
+ }
27
+ }
package/src/stories/views/components/Teaser/data/16_9_teaserImage.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "teaserImage": {
3
+ "copyrightWithLinks": "",
4
+ "responsiveImage": {
5
+ "asPicture": false,
6
+ "asImage": true,
7
+ "fallback": "https://picsum.photos/id/188/480/210",
8
+ "sources": [
9
+ {
10
+
11
+ "sizes": "(min-width: 1010px) 960px, 100vw",
12
+ "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"
13
+ }
14
+ ]
15
+ }
16
+ }
17
+ }
package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json CHANGED
@@ -23,24 +23,14 @@
23
23
  "teaserImage": {
24
24
  "copyrightWithLinks": "",
25
25
  "responsiveImage": {
26
- "asPicture": true,
27
- "asImage": false,
26
+ "asPicture": false,
27
+ "asImage": true,
28
28
  "fallback": "https://picsum.photos/id/188/480/210",
29
29
  "sources": [
30
30
  {
31
- "media": "all and (max-width: 43.688em)",
32
- "sizes": "100vw",
33
- "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"
34
- },
35
- {
36
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
37
- "sizes": "100vw",
38
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
39
- },
40
- {
41
- "media": "all and (min-width: 64em)",
42
- "sizes": "960px",
43
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
31
+
32
+ "sizes": "(min-width: 1010px) 960px, 100vw",
33
+ "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"
44
34
  }
45
35
  ]
46
36
  }
@@ -113,24 +103,14 @@
113
103
  "teaserImage": {
114
104
  "copyrightWithLinks": "",
115
105
  "responsiveImage": {
116
- "asPicture": true,
117
- "asImage": false,
106
+ "asPicture": false,
107
+ "asImage": true,
118
108
  "fallback": "https://picsum.photos/id/188/480/210",
119
109
  "sources": [
120
110
  {
121
- "media": "all and (max-width: 43.688em)",
122
- "sizes": "100vw",
123
- "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"
124
- },
125
- {
126
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
127
- "sizes": "100vw",
128
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
129
- },
130
- {
131
- "media": "all and (min-width: 64em)",
132
- "sizes": "960px",
133
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
111
+
112
+ "sizes": "(min-width: 1010px) 960px, 100vw",
113
+ "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"
134
114
  }
135
115
  ]
136
116
  }
@@ -142,14 +122,6 @@
142
122
  "trackingData": {
143
123
  "secondLevelId": "2",
144
124
  "pageName": "hessenschau"
145
- },
146
- "label": {
147
- "type": "Ticker",
148
- "loca": "ticker",
149
- "byline": {
150
- "bylineSsi": "BylineText aus ssi",
151
- "bylineText": "BylineText"
152
- }
153
125
  }
154
126
  }
155
127
  }
package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json CHANGED
@@ -23,24 +23,14 @@
23
23
  "teaserImage": {
24
24
  "copyrightWithLinks": "",
25
25
  "responsiveImage": {
26
- "asPicture": true,
27
- "asImage": false,
26
+ "asPicture": false,
27
+ "asImage": true,
28
28
  "fallback": "https://picsum.photos/id/188/480/210",
29
29
  "sources": [
30
30
  {
31
- "media": "all and (max-width: 43.688em)",
32
- "sizes": "100vw",
33
- "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"
34
- },
35
- {
36
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
37
- "sizes": "100vw",
38
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
39
- },
40
- {
41
- "media": "all and (min-width: 64em)",
42
- "sizes": "960px",
43
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
31
+
32
+ "sizes": "(min-width: 1010px) 960px, 100vw",
33
+ "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"
44
34
  }
45
35
  ]
46
36
  }
@@ -113,24 +103,14 @@
113
103
  "teaserImage": {
114
104
  "copyrightWithLinks": "",
115
105
  "responsiveImage": {
116
- "asPicture": true,
117
- "asImage": false,
106
+ "asPicture": false,
107
+ "asImage": true,
118
108
  "fallback": "https://picsum.photos/id/188/480/210",
119
109
  "sources": [
120
110
  {
121
- "media": "all and (max-width: 43.688em)",
122
- "sizes": "100vw",
123
- "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"
124
- },
125
- {
126
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
127
- "sizes": "100vw",
128
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
129
- },
130
- {
131
- "media": "all and (min-width: 64em)",
132
- "sizes": "960px",
133
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
111
+
112
+ "sizes": "(min-width: 1010px) 960px, 100vw",
113
+ "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"
134
114
  }
135
115
  ]
136
116
  }
@@ -142,14 +122,6 @@
142
122
  "trackingData": {
143
123
  "secondLevelId": "2",
144
124
  "pageName": "hessenschau"
145
- },
146
- "label": {
147
- "type": "Ticker",
148
- "loca": "ticker",
149
- "byline": {
150
- "bylineSsi": "BylineText aus ssi",
151
- "bylineText": "BylineText"
152
- }
153
125
  }
154
126
  }
155
127
  }
package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json CHANGED
@@ -23,24 +23,14 @@
23
23
  "teaserImage": {
24
24
  "copyrightWithLinks": "",
25
25
  "responsiveImage": {
26
- "asPicture": true,
27
- "asImage": false,
26
+ "asPicture": false,
27
+ "asImage": true,
28
28
  "fallback": "https://picsum.photos/id/188/480/210",
29
29
  "sources": [
30
30
  {
31
- "media": "all and (max-width: 43.688em)",
32
- "sizes": "100vw",
33
- "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"
34
- },
35
- {
36
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
37
- "sizes": "100vw",
38
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
39
- },
40
- {
41
- "media": "all and (min-width: 64em)",
42
- "sizes": "960px",
43
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
31
+
32
+ "sizes": "(min-width: 1010px) 960px, 100vw",
33
+ "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"
44
34
  }
45
35
  ]
46
36
  }
@@ -110,6 +100,7 @@
110
100
  "readMoreLong": "read More Long"
111
101
  },
112
102
  "content": {
103
+
113
104
  "teaserImage": {
114
105
  "copyrightWithLinks": "",
115
106
  "responsiveImage": {
@@ -120,7 +111,7 @@
120
111
  {
121
112
  "media": "all and (max-width: 43.688em)",
122
113
  "sizes": "100vw",
123
- "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"
114
+ "srcset": "https://picsum.photos/id/188/320/320 320w, https://picsum.photos/id/188/480/480 480w, https://picsum.photos/id/188/640/640 640w, https://picsum.photos/id/188/992/992 992w"
124
115
  },
125
116
  {
126
117
  "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
@@ -142,14 +133,6 @@
142
133
  "trackingData": {
143
134
  "secondLevelId": "2",
144
135
  "pageName": "hessenschau"
145
- },
146
- "label": {
147
- "type": "Ticker",
148
- "loca": "ticker",
149
- "byline": {
150
- "bylineSsi": "BylineText aus ssi",
151
- "bylineText": "BylineText"
152
- }
153
136
  }
154
137
  }
155
138
  }
package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json CHANGED
@@ -23,24 +23,14 @@
23
23
  "teaserImage": {
24
24
  "copyrightWithLinks": "",
25
25
  "responsiveImage": {
26
- "asPicture": true,
27
- "asImage": false,
26
+ "asPicture": false,
27
+ "asImage": true,
28
28
  "fallback": "https://picsum.photos/id/188/480/210",
29
29
  "sources": [
30
30
  {
31
- "media": "all and (max-width: 43.688em)",
32
- "sizes": "100vw",
33
- "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"
34
- },
35
- {
36
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
37
- "sizes": "100vw",
38
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
39
- },
40
- {
41
- "media": "all and (min-width: 64em)",
42
- "sizes": "960px",
43
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
31
+
32
+ "sizes": "(min-width: 1010px) 960px, 100vw",
33
+ "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"
44
34
  }
45
35
  ]
46
36
  }
@@ -113,24 +103,14 @@
113
103
  "teaserImage": {
114
104
  "copyrightWithLinks": "",
115
105
  "responsiveImage": {
116
- "asPicture": true,
117
- "asImage": false,
106
+ "asPicture": false,
107
+ "asImage": true,
118
108
  "fallback": "https://picsum.photos/id/188/480/210",
119
109
  "sources": [
120
110
  {
121
- "media": "all and (max-width: 43.688em)",
122
- "sizes": "100vw",
123
- "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"
124
- },
125
- {
126
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
127
- "sizes": "100vw",
128
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
129
- },
130
- {
131
- "media": "all and (min-width: 64em)",
132
- "sizes": "960px",
133
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
111
+
112
+ "sizes": "(min-width: 1010px) 960px, 100vw",
113
+ "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"
134
114
  }
135
115
  ]
136
116
  }
@@ -142,14 +122,6 @@
142
122
  "trackingData": {
143
123
  "secondLevelId": "2",
144
124
  "pageName": "hessenschau"
145
- },
146
- "label": {
147
- "type": "Ticker",
148
- "loca": "ticker",
149
- "byline": {
150
- "bylineSsi": "BylineText aus ssi",
151
- "bylineText": "BylineText"
152
- }
153
125
  }
154
126
  }
155
127
  }
package/src/stories/views/components/Teaser/data/teaser_standard_xxl_serif.json CHANGED
@@ -23,24 +23,14 @@
23
23
  "teaserImage": {
24
24
  "copyrightWithLinks": "",
25
25
  "responsiveImage": {
26
- "asPicture": true,
27
- "asImage": false,
26
+ "asPicture": false,
27
+ "asImage": true,
28
28
  "fallback": "https://picsum.photos/id/188/480/210",
29
29
  "sources": [
30
30
  {
31
- "media": "all and (max-width: 43.688em)",
32
- "sizes": "100vw",
33
- "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"
34
- },
35
- {
36
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
37
- "sizes": "100vw",
38
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
39
- },
40
- {
41
- "media": "all and (min-width: 64em)",
42
- "sizes": "960px",
43
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
31
+
32
+ "sizes": "(min-width: 1010px) 960px, 100vw",
33
+ "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"
44
34
  }
45
35
  ]
46
36
  }
@@ -105,24 +95,14 @@
105
95
  "teaserImage": {
106
96
  "copyrightWithLinks": "",
107
97
  "responsiveImage": {
108
- "asPicture": true,
109
- "asImage": false,
98
+ "asPicture": false,
99
+ "asImage": true,
110
100
  "fallback": "https://picsum.photos/id/188/480/210",
111
101
  "sources": [
112
102
  {
113
- "media": "all and (max-width: 43.688em)",
114
- "sizes": "100vw",
115
- "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"
116
- },
117
- {
118
- "media": "all and (min-width: 43.750em) and (max-width: 63.938em)",
119
- "sizes": "100vw",
120
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
121
- },
122
- {
123
- "media": "all and (min-width: 64em)",
124
- "sizes": "960px",
125
- "srcset": "https://picsum.photos/id/188/320/140 320w, https://picsum.photos/id/188/480/210 480w, https://picsum.photos/id/188/992/434 992w, https://picsum.photos/id/188/1920/840 1920w"
103
+
104
+ "sizes": "(min-width: 1010px) 960px, 100vw",
105
+ "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"
126
106
  }
127
107
  ]
128
108
  }
package/src/stories/views/components/Teaser/teaser-standard.stories.mdx CHANGED
@@ -12,6 +12,9 @@ let hero_teaser_with_label = structuredClone(hero_teaser);
12
12
  addLabel(hero_teaser_with_label, ticker_label.label);
13
13
 
14
14
  <Meta title="Komponenten/Teaser/Standard"
15
+ parameters={{
16
+ layout: 'fullscreen',
17
+ }}
15
18
  argTypes={{
16
19
  teasersize: {
17
20
  control: {
@@ -48,7 +51,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
48
51
  Ein toller Einleitungstext fΓΌr unsere `Teaser` Komponente:
49
52
 
50
53
  <Preview withToolbar>
51
- <Story name="Standard Hero" args={hero_teaser}>
54
+ <Story name="Standard Hero" args={hero_teaser}>
52
55
  {Template.bind({})}
53
56
  </Story>
54
57
  <Story name="Standard Hero with Label" args={hero_teaser_with_label}>
package/src/stories/views/components/base/image/responsiveImage.hbs CHANGED
@@ -39,7 +39,7 @@
39
39
  {{/unless}}
40
40
  <img {{#with this.sizes}}sizes="{{this}}" {{/with~}}
41
41
  loading="{{#if ../../_noDelay}}auto{{else}}lazy{{/if}}"
42
- {{#with this.srcset}} {{#if ../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
42
+ {{#with this.srcset}} {{#if ../../../_noDelay}}srcset{{else}}data-srcset{{/if}}="{{this}}"{{/with}}
43
43
  src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
44
44
  alt="{{#if ../../_alttext}}{{../../_alttext}}{{else}}{{../../this.alttext}}{{/if}}" class="image imageSimple {{~#with ../../_addClassImg }} {{this}}{{/with}}" {{~#if ../../_errorHandler}} onerror="this.onerror=null; {{../../_errorHandler}}" {{~/if}}>
45
45
  {{~#with ../../_addClass }}</div>{{/with}}