hr-design-system-handlebars 0.42.0 β†’ 0.42.3

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 (31) hide show
  1. package/.storybook/preview.js +4 -0
  2. package/CHANGELOG.md +36 -0
  3. package/dist/assets/index.css +51 -15
  4. package/dist/views/components/Label.hbs +12 -1
  5. package/dist/views/components/Teaser/Byline.hbs +1 -0
  6. package/dist/views/components/Teaser/Teaser-Heading.hbs +11 -6
  7. package/dist/views/components/Teaser/Teaser-standard.hbs +17 -17
  8. package/dist/views/components/Teaser/Topline.hbs +1 -1
  9. package/dist/views/components/Teaser/labelHelper.js +13 -0
  10. package/dist/views/components/base/image/responsiveImage.hbs +1 -1
  11. package/package.json +1 -1
  12. package/src/stories/views/components/Label.hbs +12 -1
  13. package/src/stories/views/components/Teaser/Byline.hbs +1 -0
  14. package/src/stories/views/components/Teaser/Byline.stories.mdx +35 -0
  15. package/src/stories/views/components/Teaser/Teaser-Heading.hbs +11 -6
  16. package/src/stories/views/components/Teaser/Teaser-Heading.stories.mdx +23 -13
  17. package/src/stories/views/components/Teaser/Teaser-standard.hbs +17 -17
  18. package/src/stories/views/components/Teaser/Topline.hbs +1 -1
  19. package/src/stories/views/components/Teaser/data/16_7_teaserImage.json +27 -0
  20. package/src/stories/views/components/Teaser/data/16_9_teaserImage.json +17 -0
  21. package/src/stories/views/components/Teaser/data/teaser_article.json +2 -2
  22. package/src/stories/views/components/Teaser/data/teaser_full.json +2 -2
  23. package/src/stories/views/components/Teaser/data/teaser_standard_lg_serif.json +11 -39
  24. package/src/stories/views/components/Teaser/data/teaser_standard_md_serif.json +11 -39
  25. package/src/stories/views/components/Teaser/data/teaser_standard_sm_serif.json +8 -25
  26. package/src/stories/views/components/Teaser/data/teaser_standard_xl_serif.json +11 -39
  27. package/src/stories/views/components/Teaser/data/teaser_standard_xxl_serif.json +10 -46
  28. package/src/stories/views/components/Teaser/data/ticker_label.json +10 -0
  29. package/src/stories/views/components/Teaser/labelHelper.js +13 -0
  30. package/src/stories/views/components/Teaser/teaser-standard.stories.mdx +15 -9
  31. 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,39 @@
1
+ # v0.42.3 (Tue Apr 12 2022)
2
+
3
+ #### πŸ› Bug Fix
4
+
5
+ - add byline-component [#212](https://github.com/mumprod/hr-design-system-handlebars/pull/212) ([@hanswurstsalat](https://github.com/hanswurstsalat))
6
+
7
+ #### Authors: 1
8
+
9
+ - Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
10
+
11
+ ---
12
+
13
+ # v0.42.2 (Mon Apr 11 2022)
14
+
15
+ #### πŸ› Bug Fix
16
+
17
+ - responsiveImage 2.0 [#209](https://github.com/mumprod/hr-design-system-handlebars/pull/209) ([@vascoeduardo](https://github.com/vascoeduardo))
18
+
19
+ #### Authors: 1
20
+
21
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
22
+
23
+ ---
24
+
25
+ # v0.42.1 (Mon Apr 11 2022)
26
+
27
+ #### πŸ› Bug Fix
28
+
29
+ - Dpe 1496 [#208](https://github.com/mumprod/hr-design-system-handlebars/pull/208) ([@vascoeduardo](https://github.com/vascoeduardo))
30
+
31
+ #### Authors: 1
32
+
33
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
34
+
35
+ ---
36
+
1
37
  # v0.42.0 (Thu Apr 07 2022)
2
38
 
3
39
  #### πŸš€ Enhancement
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
+ .mb-4 {
1518
+ margin-bottom: 1rem;
1519
+ }
1517
1520
  .mt-4 {
1518
1521
  margin-top: 1rem;
1519
1522
  }
1520
1523
  .mt-1 {
1521
1524
  margin-top: 0.25rem;
1522
1525
  }
1523
- .mb-4 {
1524
- margin-bottom: 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)));
@@ -2000,9 +2019,13 @@ Ensure the default browser behavior of the `hidden` attribute.
2000
2019
  .p-2 {
2001
2020
  padding: 0.5rem;
2002
2021
  }
2003
- .px-2 {
2004
- padding-left: 0.5rem;
2005
- padding-right: 0.5rem;
2022
+ .px-1\.5 {
2023
+ padding-left: 0.375rem;
2024
+ padding-right: 0.375rem;
2025
+ }
2026
+ .px-1 {
2027
+ padding-left: 0.25rem;
2028
+ padding-right: 0.25rem;
2006
2029
  }
2007
2030
  .py-6 {
2008
2031
  padding-top: 1.5rem;
@@ -2040,6 +2063,10 @@ Ensure the default browser behavior of the `hidden` attribute.
2040
2063
  padding-top: 0.5rem;
2041
2064
  padding-bottom: 0.5rem;
2042
2065
  }
2066
+ .px-2 {
2067
+ padding-left: 0.5rem;
2068
+ padding-right: 0.5rem;
2069
+ }
2043
2070
  .py-1\.5 {
2044
2071
  padding-top: 0.375rem;
2045
2072
  padding-bottom: 0.375rem;
@@ -2056,6 +2083,9 @@ Ensure the default browser behavior of the `hidden` attribute.
2056
2083
  padding-left: 1rem;
2057
2084
  padding-right: 1rem;
2058
2085
  }
2086
+ .pt-px {
2087
+ padding-top: 1px;
2088
+ }
2059
2089
  .pl-4 {
2060
2090
  padding-left: 1rem;
2061
2091
  }
@@ -2092,9 +2122,6 @@ Ensure the default browser behavior of the `hidden` attribute.
2092
2122
  .pr-4 {
2093
2123
  padding-right: 1rem;
2094
2124
  }
2095
- .pt-px {
2096
- padding-top: 1px;
2097
- }
2098
2125
  .text-left {
2099
2126
  text-align: left;
2100
2127
  }
@@ -2185,22 +2212,22 @@ Ensure the default browser behavior of the `hidden` attribute.
2185
2212
  --tw-text-opacity: 1;
2186
2213
  color: rgba(0, 82, 147, var(--tw-text-opacity));
2187
2214
  }
2188
- .text-gray-500 {
2215
+ .text-grey-scorpion {
2189
2216
  --tw-text-opacity: 1;
2190
- color: rgba(107, 114, 128, var(--tw-text-opacity));
2217
+ color: rgba(96, 96, 96, var(--tw-text-opacity));
2191
2218
  }
2192
2219
  .text-indigo-500 {
2193
2220
  --tw-text-opacity: 1;
2194
2221
  color: rgba(99, 102, 241, var(--tw-text-opacity));
2195
2222
  }
2223
+ .text-gray-500 {
2224
+ --tw-text-opacity: 1;
2225
+ color: rgba(107, 114, 128, var(--tw-text-opacity));
2226
+ }
2196
2227
  .text-toplineColor {
2197
2228
  color: #006dc1;
2198
2229
  color: var(--color-topline);
2199
2230
  }
2200
- .text-grey-scorpion {
2201
- --tw-text-opacity: 1;
2202
- color: rgba(96, 96, 96, var(--tw-text-opacity));
2203
- }
2204
2231
  .text-opacity-50 {
2205
2232
  --tw-text-opacity: 0.5;
2206
2233
  }
@@ -2534,6 +2561,9 @@ Ensure the default browser behavior of the `hidden` attribute.
2534
2561
  .md\:mb-0 {
2535
2562
  margin-bottom: 0px;
2536
2563
  }
2564
+ .md\:block {
2565
+ display: block;
2566
+ }
2537
2567
  .md\:flex {
2538
2568
  display: -webkit-box;
2539
2569
  display: -ms-flexbox;
@@ -2580,6 +2610,12 @@ Ensure the default browser behavior of the `hidden` attribute.
2580
2610
  -ms-flex: 1 1 auto;
2581
2611
  flex: 1 1 auto;
2582
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
+ }
2583
2619
  .md\:justify-end {
2584
2620
  -webkit-box-pack: end;
2585
2621
  -ms-flex-pack: end;
package/dist/views/components/Label.hbs CHANGED
@@ -1 +1,12 @@
1
- <span class="sb-label px-2 inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">{{text}}</span>
1
+ <span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
2
+ {{text}}
3
+ </span>
4
+ {{~#with this.byline ~}}
5
+ <span class="">
6
+ {{#if this.bylineSsi}}
7
+ {{{this.bylineSsi}}}
8
+ {{else}}
9
+ {{this.bylineText}}
10
+ {{/if}}
11
+ </span>
12
+ {{~/with~}}
package/dist/views/components/Teaser/Byline.hbs ADDED
@@ -0,0 +1 @@
1
+ <span class="block mt-2 text-xs text-grey-scorpion font-headingSerif">{{text}}</span>
package/dist/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,8 +1,13 @@
1
1
  {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }}
2
- <{{~ ../headlineTag }} class="mt-4 {{../class}}" >
3
- {{#if ../topline}}
4
- {{> components/Teaser/Topline text=../topline }}
5
- {{/if}}
6
- {{> components/Teaser/Title text=../headline font=../font size=../size}}
2
+ {{#with this.content.label}}
3
+ <div class="max-h-6">
4
+ {{> components/Label type=loca text=type}}
5
+ </div>
6
+ {{/with~}}
7
+ <{{~ ../headlineTag }} class="{{../class}}" >
8
+ {{#with this.content.topline}}
9
+ {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
10
+ {{/with}}
11
+ {{> components/Teaser/Title text=../this.title font=../font size=../size }}
7
12
  </{{~ ../headlineTag }}>
8
- {{/components/base/link}}
13
+ {{/components/base/link}}
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
+ {{> components/Teaser/Byline text=profiles}}
15
+ {{/if}}
16
+ </section>
17
+ </div>
18
18
  </article>
package/dist/views/components/Teaser/Topline.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <span
2
2
  class="block text-base text-toplineColor font-heading"
3
- aria-label="Zum Artikel: {{text}}"
3
+ aria-label="{{readMore}}: {{text}}"
4
4
  >
5
5
  {{text}}
6
6
  </span>
package/dist/views/components/Teaser/labelHelper.js ADDED
@@ -0,0 +1,13 @@
1
+ function addLabel(json, label) {
2
+ json.link.content.label = label;
3
+ json.link.content.topline = false;
4
+ }
5
+ function removeLabel(json, topline) {
6
+ json.link.content.label = false;
7
+ json.link.content.topline = topline;
8
+ }
9
+ function changeTeaserSize(json, size) {
10
+ json.teasersize = size
11
+ }
12
+ export { addLabel, removeLabel, changeTeaserSize};
13
+ //export default addLabel;
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.0",
9
+ "version": "0.42.3",
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/Label.hbs CHANGED
@@ -1 +1,12 @@
1
- <span class="sb-label px-2 inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">{{text}}</span>
1
+ <span class="sb-label rounded px-1.5 pt-px inline-block tracking-wide text-white text-base font-heading {{inline-switch type '["media","event","breakingnews","comment","analysis","der-tag-in-hessen","glosse","fragen-und-antworten","infografik","interaktiv","program","download","pm","liveticker","ticker","livestream","live","livechat","buliticker","social-tv","blog"]' '["bg-labelMedia","bg-labelEvent","bg-labelBreakingnews","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelComment","bg-labelInfografik","bg-labelInfografik","bg-labelProgram","bg-labelDownload","bg-labelPm","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive","bg-labelLive"]'}}">
2
+ {{text}}
3
+ </span>
4
+ {{~#with this.byline ~}}
5
+ <span class="">
6
+ {{#if this.bylineSsi}}
7
+ {{{this.bylineSsi}}}
8
+ {{else}}
9
+ {{this.bylineText}}
10
+ {{/if}}
11
+ </span>
12
+ {{~/with~}}
package/src/stories/views/components/Teaser/Byline.hbs ADDED
@@ -0,0 +1 @@
1
+ <span class="block mt-2 text-xs text-grey-scorpion font-headingSerif">{{text}}</span>
package/src/stories/views/components/Teaser/Byline.stories.mdx ADDED
@@ -0,0 +1,35 @@
1
+ import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
2
+
3
+ import byline from "./Byline.hbs";
4
+
5
+ <Meta
6
+ title="Komponenten/Teaser/Komponenten/Byline"
7
+ argTypes={{
8
+ text: {
9
+ control: "text",
10
+ description: "Bylinetext",
11
+ },
12
+ }}
13
+ />
14
+
15
+ export const Template = ({ text, ...args }) => {
16
+ // You can either use a function to create DOM elements or use a plain html string!
17
+ // return `<span>${topline}</span>`;
18
+ return byline({ text, ...args });
19
+ };
20
+
21
+ # Byline
22
+
23
+ <Preview withToolbar>
24
+ <Story
25
+ name="default"
26
+ args={{
27
+ text:
28
+ "Dies ist die Byline",
29
+ }}
30
+ >
31
+ {Template.bind({})}
32
+ </Story>
33
+ </Preview>
34
+
35
+ <ArgsTable story="default" />
package/src/stories/views/components/Teaser/Teaser-Heading.hbs CHANGED
@@ -1,8 +1,13 @@
1
1
  {{#>components/base/link _cssClasses="hover:text-toplineColor" _doTracking=(if this.doTracking 'true') _clickLabelPrefix1=this.realTeasersize _clickLabelPrefix2="headlineLink" }}
2
- <{{~ ../headlineTag }} class="mt-4 {{../class}}" >
3
- {{#if ../topline}}
4
- {{> components/Teaser/Topline text=../topline }}
5
- {{/if}}
6
- {{> components/Teaser/Title text=../headline font=../font size=../size}}
2
+ {{#with this.content.label}}
3
+ <div class="max-h-6">
4
+ {{> components/Label type=loca text=type}}
5
+ </div>
6
+ {{/with~}}
7
+ <{{~ ../headlineTag }} class="{{../class}}" >
8
+ {{#with this.content.topline}}
9
+ {{> components/Teaser/Topline text=this readMore=../this.readMoreText.readMoreScreenreader}}
10
+ {{/with}}
11
+ {{> components/Teaser/Title text=../this.title font=../font size=../size }}
7
12
  </{{~ ../headlineTag }}>
8
- {{/components/base/link}}
13
+ {{/components/base/link}}
package/src/stories/views/components/Teaser/Teaser-Heading.stories.mdx CHANGED
@@ -5,11 +5,15 @@ import teaserHeading from "./Teaser-Heading.hbs";
5
5
  <Meta
6
6
  title="Komponenten/Teaser/Komponenten/TeaserHeading"
7
7
  argTypes={{
8
- topline: {
9
- control: "text",
10
- description: "Topline Text",
8
+ link:{
9
+ content:{
10
+ topline: {
11
+ control: "text",
12
+ description: "Topline Text",
13
+ }
14
+ }
11
15
  },
12
- headline: {
16
+ title: {
13
17
  control: "text",
14
18
  description: "Headline Text",
15
19
  },
@@ -38,7 +42,7 @@ import teaserHeading from "./Teaser-Heading.hbs";
38
42
  },
39
43
  },
40
44
  size: {
41
- options: ["lg", "sm"],
45
+ options: ["xxl", "md", "sm"],
42
46
  control: { type: "inline-radio" },
43
47
  },
44
48
  }}
@@ -69,12 +73,14 @@ Ein toller Einleitungstext fΓΌr unsere `Teaser-Heading` Komponente:
69
73
  },
70
74
  }}
71
75
  args={{
72
- topline: "Das ist eine wirklich sehr lange Topline",
73
- headline: "Das ist eine wirklich sehr lange Headline",
76
+ title: "Das ist eine wirklich sehr lange Headline",
74
77
  headlineTag: "h1",
75
78
  font: "font-headingSerif",
76
79
  size: "xxl",
77
80
  link: {
81
+ content: {
82
+ topline: "Das ist eine wirklich sehr lange Topline"
83
+ },
78
84
  url: "/teaser1"
79
85
  }
80
86
  }}
@@ -100,12 +106,14 @@ Ein toller Einleitungstext fΓΌr unsere `Teaser-Heading` Komponente:
100
106
  },
101
107
  }}
102
108
  args={{
103
- topline: "Das ist eine wirklich sehr lange Topline",
104
- headline: "Das ist eine wirklich sehr lange Headline",
109
+ title: "Das ist eine wirklich sehr lange Headline",
105
110
  headlineTag: "h1",
106
111
  font: "font-headingSerif",
107
112
  size: "md",
108
113
  link: {
114
+ content: {
115
+ topline: "Das ist eine wirklich sehr lange Topline"
116
+ },
109
117
  url: "/teaser1"
110
118
  }
111
119
  }}
@@ -129,14 +137,16 @@ Ein toller Einleitungstext fΓΌr unsere `Teaser-Heading` Komponente:
129
137
  },
130
138
  }}
131
139
  args={{
132
- topline: "Das ist eine wirklich sehr lange Topline",
133
- headline: "Das ist eine wirklich sehr lange Headline",
140
+ title: "Das ist eine wirklich sehr lange Headline",
134
141
  headlineTag: "h1",
135
142
  font: "font-headingSerif",
136
143
  size: "sm",
137
144
  link: {
138
- url: "/teaser1"
139
- }
145
+ content: {
146
+ topline: "Das ist eine wirklich sehr lange Topline"
147
+ },
148
+ url: "/teaser1"
149
+ }
140
150
  }}
141
151
  >
142
152
  {Template.bind({})}
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
+ {{> components/Teaser/Byline text=profiles}}
15
+ {{/if}}
16
+ </section>
17
+ </div>
18
18
  </article>
package/src/stories/views/components/Teaser/Topline.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <span
2
2
  class="block text-base text-toplineColor font-heading"
3
- aria-label="Zum Artikel: {{text}}"
3
+ aria-label="{{readMore}}: {{text}}"
4
4
  >
5
5
  {{text}}
6
6
  </span>
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_article.json CHANGED
@@ -89,7 +89,7 @@
89
89
  "type": "Ticker",
90
90
  "loca": "ticker",
91
91
  "byline": {
92
- "bylineSsi": "ssi",
92
+ "bylineSsi": "BylineText aus ssi",
93
93
  "bylineText": "BylineText"
94
94
  }
95
95
  },
@@ -147,7 +147,7 @@
147
147
  "type": "Ticker",
148
148
  "loca": "ticker",
149
149
  "byline": {
150
- "bylineSsi": "ssi",
150
+ "bylineSsi": "BylineText aus ssi",
151
151
  "bylineText": "BylineText"
152
152
  }
153
153
  }
package/src/stories/views/components/Teaser/data/teaser_full.json CHANGED
@@ -103,7 +103,7 @@
103
103
  "type": "Ticker",
104
104
  "loca": "ticker",
105
105
  "byline": {
106
- "bylineSsi": "ssi",
106
+ "bylineSsi": "BylineText aus ssi",
107
107
  "bylineText": "BylineText"
108
108
  }
109
109
  },
@@ -161,7 +161,7 @@
161
161
  "type": "Ticker",
162
162
  "loca": "ticker",
163
163
  "byline": {
164
- "bylineSsi": "ssi",
164
+ "bylineSsi": "BylineText aus ssi",
165
165
  "bylineText": "BylineText"
166
166
  }
167
167
  }
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
  }
@@ -89,7 +79,7 @@
89
79
  "type": "Ticker",
90
80
  "loca": "ticker",
91
81
  "byline": {
92
- "bylineSsi": "ssi",
82
+ "bylineSsi": "BylineText aus ssi",
93
83
  "bylineText": "BylineText"
94
84
  }
95
85
  },
@@ -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": "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
  }
@@ -89,7 +79,7 @@
89
79
  "type": "Ticker",
90
80
  "loca": "ticker",
91
81
  "byline": {
92
- "bylineSsi": "ssi",
82
+ "bylineSsi": "BylineText aus ssi",
93
83
  "bylineText": "BylineText"
94
84
  }
95
85
  },
@@ -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": "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
  }
@@ -89,7 +79,7 @@
89
79
  "type": "Ticker",
90
80
  "loca": "ticker",
91
81
  "byline": {
92
- "bylineSsi": "ssi",
82
+ "bylineSsi": "BylineText aus ssi",
93
83
  "bylineText": "BylineText"
94
84
  }
95
85
  },
@@ -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": "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
  }
@@ -89,7 +79,7 @@
89
79
  "type": "Ticker",
90
80
  "loca": "ticker",
91
81
  "byline": {
92
- "bylineSsi": "ssi",
82
+ "bylineSsi": "BylineText aus ssi",
93
83
  "bylineText": "BylineText"
94
84
  }
95
85
  },
@@ -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": "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
  }
@@ -85,14 +75,6 @@
85
75
  "avDocument": "",
86
76
  "image": ""
87
77
  },
88
- "label": {
89
- "type": "Ticker",
90
- "loca": "ticker",
91
- "byline": {
92
- "bylineSsi": "ssi",
93
- "bylineText": "BylineText"
94
- }
95
- },
96
78
  "geotag": [
97
79
  {
98
80
  "title": "Wolfhagen"
@@ -113,24 +95,14 @@
113
95
  "teaserImage": {
114
96
  "copyrightWithLinks": "",
115
97
  "responsiveImage": {
116
- "asPicture": true,
117
- "asImage": false,
98
+ "asPicture": false,
99
+ "asImage": true,
118
100
  "fallback": "https://picsum.photos/id/188/480/210",
119
101
  "sources": [
120
102
  {
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"
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"
134
106
  }
135
107
  ]
136
108
  }
@@ -142,14 +114,6 @@
142
114
  "trackingData": {
143
115
  "secondLevelId": "2",
144
116
  "pageName": "hessenschau"
145
- },
146
- "label": {
147
- "type": "Ticker",
148
- "loca": "ticker",
149
- "byline": {
150
- "bylineSsi": "ssi",
151
- "bylineText": "BylineText"
152
- }
153
117
  }
154
118
  }
155
119
  }
package/src/stories/views/components/Teaser/data/ticker_label.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "label": {
3
+ "type": "Ticker",
4
+ "loca": "ticker",
5
+ "byline": {
6
+ "bylineSsi": "BylineText aus ssi",
7
+ "bylineText": "BylineText"
8
+ }
9
+ }
10
+ }
package/src/stories/views/components/Teaser/labelHelper.js ADDED
@@ -0,0 +1,13 @@
1
+ function addLabel(json, label) {
2
+ json.link.content.label = label;
3
+ json.link.content.topline = false;
4
+ }
5
+ function removeLabel(json, topline) {
6
+ json.link.content.label = false;
7
+ json.link.content.topline = topline;
8
+ }
9
+ function changeTeaserSize(json, size) {
10
+ json.teasersize = size
11
+ }
12
+ export { addLabel, removeLabel, changeTeaserSize};
13
+ //export default addLabel;
package/src/stories/views/components/Teaser/teaser-standard.stories.mdx CHANGED
@@ -1,17 +1,20 @@
1
1
  import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
2
-
2
+ import 'core-js/actual/structured-clone';
3
+ import { addLabel, removeLabel, changeTeaserSize } from './labelHelper';
3
4
  import teaser from './Teaser-standard.hbs'
4
- import hero_teaser from './data/teaser_standard_xxl_serif.json'
5
+ import hero_teaser from './data/teaser_standard_xxl_serif.json'
5
6
  import xl_teaser from './data/teaser_standard_xl_serif.json'
6
7
  import lg_teaser from './data/teaser_standard_lg_serif.json'
7
8
  import md_teaser from './data/teaser_standard_md_serif.json'
8
9
  import sm_teaser from './data/teaser_standard_sm_serif.json'
9
-
10
-
11
-
12
-
10
+ import ticker_label from './data/ticker_label.json';
11
+ let hero_teaser_with_label = structuredClone(hero_teaser);
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: {
@@ -21,7 +24,7 @@ import sm_teaser from './data/teaser_standard_sm_serif.json'
21
24
  description: 'Teaser Grâße',
22
25
  table: {
23
26
  defaultValue: {
24
- summary: 'xl',
27
+ summary: 'xxl',
25
28
  },
26
29
  },
27
30
  }
@@ -48,8 +51,11 @@ 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}>
52
- {Template.bind({})}
54
+ <Story name="Standard Hero" args={hero_teaser}>
55
+ {Template.bind({})}
56
+ </Story>
57
+ <Story name="Standard Hero with Label" args={hero_teaser_with_label}>
58
+ {Template.bind({})}
53
59
  </Story>
54
60
  <Story name="Standard XL" args={xl_teaser}>
55
61
  {Template.bind({})}
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}}