hr-design-system-handlebars 1.15.0 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/assets/index.css +3 -3
  3. package/dist/views/components/base/link.hbs +5 -10
  4. package/dist/views/components/button/link_button.hbs +2 -2
  5. package/dist/views/components/content_nav/content_nav_item.hbs +17 -21
  6. package/dist/views/components/event/calendar/event_calendar_event_teaser.hbs +4 -4
  7. package/dist/views/components/event/calendar/event_calendar_footer.hbs +2 -3
  8. package/dist/views/components/event/event_ticket_button.hbs +2 -2
  9. package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +9 -4
  10. package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +2 -3
  11. package/dist/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
  12. package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs +7 -7
  13. package/dist/views/components/teaser/components/teaser_body.hbs +26 -19
  14. package/dist/views/components/teaser/components/teaser_comments.hbs +2 -2
  15. package/dist/views/components/teaser/components/teaser_image.hbs +1 -1
  16. package/dist/views/components/teaser/components/teaser_lead.hbs +1 -1
  17. package/dist/views/components/teaser/components/teaser_text.hbs +2 -2
  18. package/dist/views/components/teaser/components/teaser_ticker_body.hbs +3 -4
  19. package/dist/views/components/teaser/podcast/podcast_item_title.hbs +5 -7
  20. package/dist/views/components/teaser/podcast/podcast_player_ui.hbs +1 -2
  21. package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs +3 -5
  22. package/dist/views/components/teaser/podcast/podcast_title.hbs +3 -3
  23. package/dist/views/components/teaser/stage/stage_text.hbs +2 -2
  24. package/dist/views/components/teaser/tabbox/group_tabbox.hbs +1 -1
  25. package/dist/views/components/teaser/teaser_poster.hbs +3 -3
  26. package/dist/views/components/teaser/ticker/teaser_ticker.hbs +1 -1
  27. package/dist/views/components/tracking/download_tracking.hbs +2 -0
  28. package/dist/views/components/tracking/navigation_tracking.hbs +4 -0
  29. package/package.json +1 -1
  30. package/src/assets/fixtures/teaser/teasers.inc.json +4 -0
  31. package/src/stories/views/components/base/link.hbs +5 -10
  32. package/src/stories/views/components/base/link.mdx +57 -0
  33. package/src/stories/views/components/base/link.stories.js +61 -0
  34. package/src/stories/views/components/button/button.mdx +2 -2
  35. package/src/stories/views/components/button/link_button.hbs +2 -2
  36. package/src/stories/views/components/button/link_button.stories.js +10 -0
  37. package/src/stories/views/components/content_nav/content_nav_item.hbs +17 -21
  38. package/src/stories/views/components/event/calendar/event_calendar_event_teaser.hbs +4 -4
  39. package/src/stories/views/components/event/calendar/event_calendar_footer.hbs +2 -3
  40. package/src/stories/views/components/event/event_ticket_button.hbs +2 -2
  41. package/src/stories/views/components/page/fixtures/page_pagination.json +1 -1
  42. package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +9 -4
  43. package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +2 -3
  44. package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs +1 -1
  45. package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs +7 -7
  46. package/src/stories/views/components/teaser/components/teaser_body.hbs +26 -19
  47. package/src/stories/views/components/teaser/components/teaser_comments.hbs +2 -2
  48. package/src/stories/views/components/teaser/components/teaser_image.hbs +1 -1
  49. package/src/stories/views/components/teaser/components/teaser_lead.hbs +1 -1
  50. package/src/stories/views/components/teaser/components/teaser_text.hbs +2 -2
  51. package/src/stories/views/components/teaser/components/teaser_ticker_body.hbs +3 -4
  52. package/src/stories/views/components/teaser/fixtures/teaser_alternative_100_serif_download.json +1 -1
  53. package/src/stories/views/components/teaser/fixtures/teaser_alternative_50_serif_download.json +1 -1
  54. package/src/stories/views/components/teaser/fixtures/teaser_standard_100_serif_download.json +1 -1
  55. package/src/stories/views/components/teaser/fixtures/teaser_standard_50_serif_download.json +1 -1
  56. package/src/stories/views/components/teaser/podcast/podcast_item_title.hbs +5 -7
  57. package/src/stories/views/components/teaser/podcast/podcast_player_ui.hbs +1 -2
  58. package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs +3 -5
  59. package/src/stories/views/components/teaser/podcast/podcast_title.hbs +3 -3
  60. package/src/stories/views/components/teaser/stage/stage_text.hbs +2 -2
  61. package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs +1 -1
  62. package/src/stories/views/components/teaser/teaser_poster.hbs +3 -3
  63. package/src/stories/views/components/teaser/ticker/teaser_ticker.hbs +1 -1
  64. package/src/stories/views/components/tracking/download_tracking.hbs +2 -0
  65. package/src/stories/views/components/tracking/navigation_tracking.hbs +4 -0
  66. package/dist/views/components/base/link_open.hbs +0 -12
  67. package/dist/views/components/base/link_v2.hbs +0 -14
  68. package/src/stories/views/components/base/link_open.hbs +0 -12
  69. package/src/stories/views/components/base/link_v2.hbs +0 -14
package/CHANGELOG.md CHANGED
@@ -1,3 +1,28 @@
1
+ # v1.16.1 (Wed May 03 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - removes addClassImg statement [#621](https://github.com/mumprod/hr-design-system-handlebars/pull/621) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
6
+
7
+ #### Authors: 2
8
+
9
+ - Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
10
+ - selbaciri (saad.elbaciri@hr.de)
11
+
12
+ ---
13
+
14
+ # v1.16.0 (Wed May 03 2023)
15
+
16
+ #### 🚀 Enhancement
17
+
18
+ - Feature/dpe 2284 [#620](https://github.com/mumprod/hr-design-system-handlebars/pull/620) ([@szuelch](https://github.com/szuelch))
19
+
20
+ #### Authors: 1
21
+
22
+ - [@szuelch](https://github.com/szuelch)
23
+
24
+ ---
25
+
1
26
  # v1.15.0 (Tue May 02 2023)
2
27
 
3
28
  #### 🚀 Enhancement
@@ -2677,7 +2677,7 @@ video {
2677
2677
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2678
2678
  }
2679
2679
  .counter-reset {
2680
- counter-reset: cnt1683029832707;
2680
+ counter-reset: cnt1683113748894;
2681
2681
  }
2682
2682
  .hyphens-auto {
2683
2683
  -webkit-hyphens: auto;
@@ -2915,7 +2915,7 @@ video {
2915
2915
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2916
2916
  }
2917
2917
  .-ordered {
2918
- counter-increment: cnt1683029832707 1;
2918
+ counter-increment: cnt1683113748894 1;
2919
2919
  }
2920
2920
  .-ordered::before {
2921
2921
  position: absolute;
@@ -2931,7 +2931,7 @@ video {
2931
2931
  letter-spacing: .0125em;
2932
2932
  --tw-text-opacity: 1;
2933
2933
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2934
- content: counter(cnt1683029832707);
2934
+ content: counter(cnt1683113748894);
2935
2935
  }
2936
2936
  /*! ****************************/
2937
2937
  /*! text-shadow */
@@ -1,13 +1,8 @@
1
- <a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
2
- class="sb-link ds-link js-load{{#if _css}} {{_css}}{{/if}} {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}"
3
- {{#if _doNavigationTracking}}
4
- data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
5
- {{/if}}
6
- {{#if this.isFileDownload}}
7
- {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
8
- {{/if}}
9
- {{#if this.link.isTargetBlank}} target="_blank" rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
1
+ <a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{_link.url}}{{#if this.hasComments}}#commentList{{/if}}"
2
+ class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
3
+ {{#if _link.isTargetBlank}} target="_blank" rel="noopener{{#if _link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
10
4
  {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
5
+ {{#> htmlProperties}}{{/htmlProperties}}
11
6
  >
12
- {{~ decorator_body ~}}
7
+ {{> @partial-block }}
13
8
  </a>
@@ -1,6 +1,6 @@
1
- {{#> components/base/link_v2 _css=_css _isAriaHidden=_isAriaHidden}}
1
+ {{#> components/base/link _link=_link _css=_css _isAriaHidden=_isAriaHidden}}
2
2
  {{> @partial-block }}
3
- {{/components/base/link_v2}}
3
+ {{/components/base/link}}
4
4
  {{#*inline "css"~}}
5
5
  {{> components/button/utilities/button_base_classes}} {{> components/button/utilities/button_variation_classes _variant=../../_variant _onBackground=../../_onBackground}} {{> components/button/utilities/button_dimension_classes _size=../../_size~}}
6
6
  {{~/inline}}
@@ -6,25 +6,21 @@
6
6
  {{~#if _isflow}} content-nav-item-flow{{/if~}}
7
7
  {{~#if this.isSelected}} font-bold -current{{/if~}}
8
8
  ">
9
- {{#decorator 'components/base/link'
10
- _doNavigationTracking="true"
11
- _clickLabelType="Contentnavigation"
12
- _clickLabelPrefix1=this.title
13
- _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden"
14
- _isSelected=this.isSelected
15
- _selectedCssClass="is-selected"
16
- }}
17
-
18
- <span class="block text-base leading-4 grow font-copy js-title truncate ... ">
19
- {{~this.title~}}
20
- {{~#if this.link.hasIcon~}}
21
- {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 -mt-0.5 h-4 w-4 inline" _iconmap="icons"}}
22
- {{~/if~}}
23
- </span>
24
-
25
- <span>
26
- {{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-4 w-4 ml-2 inline" }}
27
- </span>
28
-
29
- {{/decorator}}
9
+ {{#with this}}
10
+ {{#> components/base/link _link=this.link _isSelected=this.isSelected _css="flex items-center pt-2.5 px-2 whitespace-nowrap overflow-hidden" _selectedCssClass="is-selected"}}
11
+ <span class="block text-base leading-4 grow font-copy js-title truncate">
12
+ {{~this.title~}}
13
+ {{~#if this.link.hasIcon~}}
14
+ {{> components/base/image/icon _icon=this.link.iconName _addClass="ml-2 -mt-0.5 h-4 w-4 inline" _iconmap="icons"}}
15
+ {{~/if~}}
16
+ </span>
17
+
18
+ <span>
19
+ {{>components/base/image/icon _icon="arrow-right" _addClass="fill-current pb-0.5 h-4 w-4 ml-2 inline" }}
20
+ </span>
21
+ {{/components/base/link}}
22
+ {{#*inline "htmlProperties"}}
23
+ {{> components/tracking/navigation_tracking _clickLabelType="Contentnavigation" _clickLabelPrefix1=this.title}}
24
+ {{/inline}}
25
+ {{/with}}
30
26
  </li>
@@ -13,8 +13,8 @@
13
13
  <div class="flex flex-col items-start basis-10/12 w-10/12">
14
14
  <div class="absolute top-0 left-0 w-full sm:static">
15
15
  <div class="ar-4-3 sm:ar-auto">
16
- {{#> components/teaser/components/teaser_header _css="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent"}}
17
- {{#decorator 'components/base/link' _css="ds-teaser-focus hover:text-toplineColor" }}
16
+ {{#> components/teaser/components/teaser_header _link=this.link _css="absolute bottom-0 left-0 p-4 w-full sm:pt-3 sm:pb-2 bg-white opacity-80 sm:static sm:bg-transparent"}}
17
+ {{#> components/base/link _css="ds-teaser-focus hover:text-toplineColor" }}
18
18
  {{#with this.label}}
19
19
  {{#> components/label/label_group}}
20
20
  {{> components/label/label _type=this.type _text=(loca this.loca) _css="mr-2"}}
@@ -23,14 +23,14 @@
23
23
  {{/if}}
24
24
  {{/components/label/label_group}}
25
25
  {{/with~}}
26
- {{#> components/teaser/components/teaser_headline _headlineTag="h3"}}
26
+ {{#> components/teaser/components/teaser_headline _css="" _headlineTag="h3"}}
27
27
  {{#if this.topline}}
28
28
  {{> components/teaser/components/teaser_topline _text=this.topline}}
29
29
  {{/if}}
30
30
  {{> components/teaser/components/teaser_title _text=this.title _css="text-2xl"}}
31
31
  {{> components/event/event_tags this.eventtags}}
32
32
  {{/components/teaser/components/teaser_headline}}
33
- {{/decorator}}
33
+ {{/components/base/link }}
34
34
  {{/components/teaser/components/teaser_header}}
35
35
  </div>
36
36
  </div>
@@ -1,8 +1,7 @@
1
1
  <footer class='bg-event-calendar-primary text-center'>
2
- {{#decorator
3
- 'components/base/link'
2
+ {{#> components/base/link _link=this.link
4
3
  _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
5
4
  }}
6
5
  {{loca 'event_calendar_monthly_overview_link'}}
7
- {{/decorator}}
6
+ {{/components/base/link}}
8
7
  </footer>
@@ -13,7 +13,7 @@
13
13
  {{#> components/button/button _size="lg" _variant="tertiary" _value="cancel" _css="mr-4 mt-4"}}
14
14
  {{>components/button/components/button_label _label="Abbrechen" _css=""}}
15
15
  {{/components/button/button}}
16
- {{#> components/button/link_button _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
16
+ {{#> components/button/link_button _link=this.link _size="lg" _css="js-ticket-ok-button js-modal-close mt-4"}}
17
17
  {{>components/button/components/button_label _label="Zum Ticketshop" _css=""}}
18
18
  {{/components/button/link_button}}
19
19
  </div>
@@ -24,7 +24,7 @@
24
24
  display:none;
25
25
  }
26
26
  </style>
27
- {{#> components/button/link_button _size="lg"}}
27
+ {{#> components/button/link_button _link=this.link _size="lg"}}
28
28
  {{> components/button/components/button_icon _icon="ticket" _iconmap="icons"}}
29
29
  {{>components/button/components/button_label _label="Tickets"}}
30
30
  {{/components/button/link_button}}
@@ -1,7 +1,12 @@
1
1
  <li :class="dropped ? 'h-auto' : 'h-10'"
2
2
  class="sb-navigation-flyout-item pl-4 {{#if _flyout}}lg:px-0 {{else}}lg:px-2 lg:first-of-type:pl-0 {{/if}}{{#if _parentselected}}lg:whitespace-nowrap{{/if}} flex h-auto text-base leading-6 border-b border-gray-200 lg:last:border-0 lg:border-0 text-blue-congress justify-start hover:underline">
3
- {{#decorator 'components/base/link' _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') _doNavigationTracking="true" _clickLabelType=_fromNav _clickLabelPrefix1=_parent clickLabelPrefix2=this.link.content.text }}
4
- {{this.text}}
5
- {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
6
- {{/decorator}}
3
+ {{#with this}}
4
+ {{#> components/base/link _link=this.link _css=(inline-switch _fromNav '["RubrikNavigation","ServiceNavigation"]' '["link-focus-inset py-2 w-full","link-focus py-2 md:pl-0 lg:pl-0 lg:pr-0 break-words w-full"]') }}
5
+ {{this.text}}
6
+ {{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _addClass="w-4 h-4 fill-current ml-2 inline-flex" _iconmap="icons" }} {{/if}}
7
+ {{/components/base/link}}
8
+ {{#*inline "htmlProperties"}}
9
+ {{> components/tracking/navigation_tracking _clickLabelType=../../_fromNav _clickLabelPrefix1=../../_parent clickLabelPrefix2=this.link.content.text}}
10
+ {{/inline}}
11
+ {{/with}}
7
12
  </li>
@@ -2,10 +2,9 @@
2
2
  <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-white lg:pb-1 lg:p-0 lg:bg-transparent lg:h-10">
3
3
  {{#each this.items}}
4
4
  <li class="{{#unless @last}}mr-3 {{/unless}}{{#if this.selected}}bg-blue-200 hover:bg-blue-300 text-blue-astronautBlue{{else}}bg-white hover:bg-grey-alto text-blue-congress{{/if}} rounded px-2 pt-px inline-block w-auto tracking-wide text-base leading-5.5 font-heading">
5
- <span class="sr-only">{{loca "label_top_thema"}}</span>
6
- {{#decorator 'components/base/link'}}
5
+ {{#> components/base/link _link=this.link}}
7
6
  {{this.text}}
8
- {{/decorator}}
7
+ {{/components/base/link}}
9
8
  </li>
10
9
  {{/each}}
11
10
  </ul>
@@ -16,7 +16,7 @@
16
16
  {{~#with this.overviewLink}}
17
17
  {{~#if this.link~}}
18
18
  <div class="flex mx-5 pb-9 pt-6 min-w-0 {{~inline-switch ../this.realTeaserSize '["100"]' '[" justify-center md:justify-end"," justify-center"]'}}">
19
- {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
19
+ {{~#> components/button/link_button _link=this.link _variant="secondary" _size="lg" _css="overflow-hidden"}}
20
20
  {{>components/button/components/button_label _label=this.title _css="flex-1 truncate"}}
21
21
  {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
22
22
  {{/components/button/link_button}}
@@ -1,12 +1,12 @@
1
- {{#decorator 'components/base/link' _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }}
2
- {{#with this.label}}
3
- {{#> components/label/label_group _css=(if ../_ordered "pl-8")}}
4
- {{> components/label/label _type=this.type _text=(loca this.loca) _css=""}}
1
+ {{#>components/base/link _link=this.link _css=(appendToDefault (if _firstItem "ds-teaser-focus") "block group") }}
2
+ {{#if this.label}}
3
+ {{#> components/label/label_group _css=(if ../../_ordered "pl-8")}}
4
+ {{> components/label/label _type=this.label.type _text=(loca this.label.loca) _css=""}}
5
5
  {{> components/label/label_byline _css="ml-2"}}
6
6
  {{/components/label/label_group}}
7
- {{/with~}}
8
- {{#> components/teaser/components/teaser_headline _headlineTag="h3"}}
7
+ {{/if~}}
8
+ {{#> components/teaser/components/teaser_headline _css="" _headlineTag="h3"}}
9
9
  {{> components/teaser/components/teaser_title _css=(appendToDefault (if ../../_ordered " pl-8") "group-hover:underline text-clusterTeaserLink") _text=this.title _size=../../_size _teaserType="cluster" _firstItem=../../_firstItem}}
10
10
  {{/components/teaser/components/teaser_headline}}
11
- {{/decorator}}
11
+ {{/components/base/link}}
12
12
  {{> components/teaser/cluster/teaser_cluster_byline _ordered=_ordered}}
@@ -2,25 +2,32 @@
2
2
  {{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
3
3
 
4
4
 
5
- {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
6
- {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }}
7
- {{#with this.label}}
8
- {{#> components/label/label_group}}
9
- {{> components/label/label _type=this.type _text=(loca this.loca)}}
10
- {{> components/label/label_byline _css="ml-2"}}
11
- {{/components/label/label_group}}
12
- {{/with~}}
13
- {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
14
- {{#if this.topline}}
15
- {{> components/teaser/components/teaser_topline _text=this.topline}}
16
- {{/if}}
17
- {{> components/teaser/components/teaser_title _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
18
- {{#if this.extendedTitle}}
19
- {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
20
- {{/if}}
21
- {{/components/teaser/components/teaser_headline}}
22
- {{/decorator}}
23
- {{/components/teaser/components/teaser_header}}
5
+ {{#with this}}
6
+ {{#> components/teaser/components/teaser_header _link=this.link _css=(if this.isMobile1to1 "" "px-5 sm:px-0")}}
7
+ {{#> components/base/link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }}
8
+ {{#with this.label}}
9
+ {{#> components/label/label_group}}
10
+ {{> components/label/label _type=this.type _css="" _text=(loca this.loca)}}
11
+ {{> components/label/label_byline _css="ml-2"}}
12
+ {{/components/label/label_group}}
13
+ {{/with~}}
14
+ {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
15
+ {{#if this.topline}}
16
+ {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
17
+ {{/if}}
18
+ {{> components/teaser/components/teaser_title _css="" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
19
+ {{#if this.extendedTitle}}
20
+ {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
21
+ {{/if}}
22
+ {{/components/teaser/components/teaser_headline}}
23
+ {{/components/base/link}}
24
+ {{/components/teaser/components/teaser_header}}
25
+ {{#*inline "htmlProperties"}}
26
+ {{#if this.isFileDownload}}
27
+ {{> components/tracking/download_tracking}}
28
+ {{/if}}
29
+ {{/inline}}
30
+ {{/with}}
24
31
 
25
32
  {{#unless this.hideBylineAndShorttext}}
26
33
  <div class="sm:px-0{{#unless this.isMobile1to1}} px-5{{/unless}}">
@@ -1,6 +1,6 @@
1
1
  {{#with this.commentLink}}
2
2
  <span class="relative whitespace-nowrap z-100">
3
- {{#decorator 'components/base/link' _css="hover:underline decoration-1" _isAriaHidden=true}}
3
+ {{#> components/base/link _link=this.link _css="hover:underline decoration-1" _isAriaHidden=true}}
4
4
  {{> components/base/image/icon _icon="kommentar" _iconmap="icons" _addClass="mr-0.5 inline w-5 h-5 text-toplineColor fill-current"}}
5
5
  <span class="sr-only">{{loca "comment_anchor_1"}}</span>
6
6
  <span class="text-toplineColor">{{../this.commentNumber}}</span>
@@ -10,6 +10,6 @@
10
10
  <span class="text-toplineColor">{{loca "comment_label_text_many"}}</span>
11
11
  {{/if}}
12
12
  <span class="sr-only">{{loca "comment_anchor_2"}}</span>
13
- {{/decorator}}
13
+ {{/components/base/link}}
14
14
  </span>
15
15
  {{/with}}
@@ -3,7 +3,7 @@
3
3
  {{> components/geoTag/geoTag _text=this.[0].title _teaserSize=../_teaserSize _isMobile1to1=../_isMobile1to1 }}
4
4
  {{/with~}}
5
5
  {{/unless}}
6
- {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=(if this.isTicker 'rounded-tl-hr') ~}}
6
+ {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.imageVariant _noDelay=this.dontLazyload _addClassImg=_addClassImg ~}}
7
7
  {{#if this.isProgram}}
8
8
  {{#if this.showMediatheksLink}}
9
9
  {{#with this}}
@@ -1,5 +1,5 @@
1
1
  {{~#if this.allowAVConsumption ~}}
2
2
  {{> components/teaser/components/teaser_av_consumption _aspectRatio=_aspectRatio _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _teaserType=_teaserType }}
3
3
  {{else}}
4
- {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize}}
4
+ {{> components/teaser/components/teaser_image _isMobile1to1=_isMobile1to1 _teaserSize=_teaserSize _addClassImg=_addClassImg}}
5
5
  {{/if}}
@@ -3,8 +3,8 @@
3
3
  {{~_text~}}
4
4
  </span>
5
5
  {{#if this.isExtOrBrandLink}}
6
- {{#decorator 'components/base/link' _css="relative inline text-link z-20 ds-focus"}}
6
+ {{#>components/base/link _link=this.link _css="relative inline text-link z-20 ds-focus"}}
7
7
  <span class="hover:underline decoration-1 font-copy">{{this.link.readMoreText.readMore}}{{~#if this.link.hasIcon}}{{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline -mt-0.5 w-5 h-5 fill-current ml-1"}}{{/if~}}</span>
8
- {{/decorator}}
8
+ {{/components/base/link}}
9
9
  {{/if}}
10
10
  </div>
@@ -3,7 +3,7 @@
3
3
 
4
4
 
5
5
  {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0 mx-4 mb-5")}}
6
- {{#decorator 'components/base/link' _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }}
6
+ {{#>components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }}
7
7
  {{#with this.label}}
8
8
  {{#> components/label/label_group}}
9
9
  {{> components/label/label _type=this.type _text=(loca this.loca)}}
@@ -12,15 +12,14 @@
12
12
  {{/with~}}
13
13
  {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
14
14
  {{#if this.topline}}
15
- test
16
- {{> components/teaser/components/teaser_topline _text=this.topline}}
15
+ {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
17
16
  {{/if}}
18
17
  {{> components/teaser/components/teaser_title _css="!text-white" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
19
18
  {{#if this.extendedTitle}}
20
19
  {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
21
20
  {{/if}}
22
21
  {{/components/teaser/components/teaser_headline}}
23
- {{/decorator}}
22
+ {{/components/base/link}}
24
23
  {{/components/teaser/components/teaser_header}}
25
24
 
26
25
  <div class="flex flex-wrap justify-between mx-4 my-5 text-base text-white justify-items-center">
@@ -1,11 +1,9 @@
1
- {{#decorator
2
- 'components/base/link'
3
- _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4 ...'
1
+ {{#>components/base/link _link=this.link
2
+ _css='w-full ds-link font-heading text-base text-podcast-text line-clamp-4'
4
3
  }}
5
4
  <span
6
- class='block hover:underline text-podcast-text
7
- {{~inline-switch _teaserSize '["100","50"]' '[" text-base"," text-base"]'~}}'
5
+ class='block hover:underline text-podcast-text text-base'
8
6
  >
9
- {{~_title~}}
7
+ {{~../../_title~}}
10
8
  </span>
11
- {{/decorator}}
9
+ {{/components/base/link}}
@@ -34,10 +34,9 @@
34
34
 
35
35
  </div>
36
36
 
37
- <div class="flex w-fit max-w-3/4 ">
37
+ <div class="flex w-fit max-w-3/4 ">
38
38
  {{> components/teaser/podcast/podcast_item_title
39
39
  _title=this.title
40
- _teaserSize=this.teaserSize
41
40
  _addClass="" }}
42
41
  </div>
43
42
  {{/if}}
@@ -65,17 +65,15 @@
65
65
  ax-load
66
66
  x-ignore
67
67
  ax-load-src={{resourceUrl "assets/js/vendor/podcast_player.alpine.js" }}>
68
- {{#with this.playlistItems}}
69
- {{#each this}}
68
+ {{#each this.playlistItems}}
70
69
  <div class="flex pb-5 {{#unless @last}}border-white border-b{{/unless}}">
71
70
  {{> components/teaser/podcast/podcast_player_ui
72
71
  _isPlaylistPlayer=true
73
- _podcastDuration=duration
74
- _title=title
72
+ _podcastDuration=this.duration
73
+ _title=this.title
75
74
  _id=(nextRandom)
76
75
  _first=@first
77
76
  }}
78
77
  </div>
79
78
  {{/each}}
80
- {{/with}}
81
79
  </div>
@@ -1,9 +1,9 @@
1
1
  {{#if this.isSingleChannel}}
2
- {{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
3
- <span class="mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
2
+ {{#>components/base/link _link=this.link _css="group ds-link font-title text-base mt-2.5 text-podcast-text"}}
3
+ <span class="mt-0.5 group-hover:underline {{#if ../../_ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch ../../_teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
4
4
  {{~_title~}}
5
5
  </span>
6
- {{/decorator}}
6
+ {{/components/base/link}}
7
7
  {{else}}
8
8
  <div class="font-title text-base mt-2.5 text-podcast-text">
9
9
  <span class="mt-0.5 {{#if _ordered}} pl-8 {{/if}}line-clamp-4 {{inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl lg:line-clamp-2","text-base md:text-2xl lg:line-clamp-2","text-base md:text-lg"]' ~}}">
@@ -1,6 +1,6 @@
1
1
  <div class="absolute left-2/4 right-auto bottom-15 lg:bottom-10 flex w-full px-5 sm:px-11.5 -translate-x-2/4 {{inline-switch this.stageTextPosition '["right50"]' '[" justify-end"," justify-start"]'}}">
2
2
  <div class="relative p-4 rounded-2xl bg-stageTextBox/85 {{inline-switch this.stageTextPosition '["left100"]' '[" w-full"," max-w-xs sm:w-fit md:max-w-2/4"]'}} ">
3
- {{#decorator 'components/base/link' _css="ds-teaser-focus before:rounded-2xl"}}
3
+ {{#>components/base/link _link=this.link _css="ds-teaser-focus before:rounded-2xl"}}
4
4
  {{#> components/teaser/components/teaser_header}}
5
5
  {{#with this.label}}
6
6
  {{#> components/label/label_group _css="!text-stageText"}}
@@ -37,6 +37,6 @@
37
37
  {{> components/base/image/icon _icon=this.link.iconName _iconmap="icons" _addClass="inline w-5 h-5 self-baseline fill-current ml-1" }}]
38
38
  </span>
39
39
  {{/if}}
40
- {{/decorator}}
40
+ {{/components/base/link}}
41
41
  </div>
42
42
  </div>
@@ -7,7 +7,7 @@
7
7
  </div>
8
8
  {{~#if this.link~}}
9
9
  <div class="flex justify-center min-w-0 pt-8 mx-5">
10
- {{~#> components/button/link_button _variant="secondary" _size="lg" _css="overflow-hidden"}}
10
+ {{~#> components/button/link_button _link=this.link _variant="secondary" _size="lg" _css="overflow-hidden"}}
11
11
  {{>components/button/components/button_label _label=(loca "group_tabbed_more" this.title) _css="flex-1 truncate mr-2"}}
12
12
  {{> components/button/components/button_icon _icon="arrow-right" _iconmap="icons" _css=""}}
13
13
  {{/components/button/link_button}}
@@ -3,7 +3,7 @@
3
3
  {{~> components/base/image/responsive_image this.teaserImage _type=this.teaserType _variant=this.content.imageVariant _noDelay=../_noDelay _addClassImg="ar__content rounded-tl-hr rounded-br-hr" ~}}
4
4
  </figure>
5
5
  <div class="absolute flex flex-col justify-center w-full h-full bg-gradient-to-t from-black rounded-tl-hr rounded-br-hr">
6
- {{#decorator 'components/base/link' _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}}
6
+ {{#>components/base/link _link=this.link _css="ds-teaser-focus flex items-center flex-col before:rounded-tl-hr before:rounded-br-hr hover:text-toplineColor"}}
7
7
  {{#> components/teaser/components/teaser_header}}
8
8
  {{#with this.label}}
9
9
  {{#> components/label/label_group}}
@@ -21,9 +21,9 @@
21
21
  {{/if}}
22
22
  {{/components/teaser/components/teaser_headline}}
23
23
  {{/components/teaser/components/teaser_header}}
24
- {{/decorator}}
24
+ {{/components/base/link}}
25
25
  <span class="absolute flex w-full h-full items-end justify-center ds-cta">
26
- {{#> components/button/link_button _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
26
+ {{#> components/button/link_button _link=this.link _size="lg" _css=(inline-switch this.realTeaserSize '["33","50"]' '["z-20 mb-7","z-20 mb-7 md:mb-16"]') _variant="secondary" _isAriaHidden=true _onBackground=true}}
27
27
  {{> components/button/components/button_label _css="" _label=this.link.readMoreText.readMoreLong}}
28
28
  {{/components/button/link_button}}
29
29
  </span>
@@ -11,7 +11,7 @@
11
11
  <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
12
12
  {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
13
13
  {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >
14
- {{> components/teaser/components/teaser_lead _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}
14
+ {{> components/teaser/components/teaser_lead _addClassImg="rounded-tl-hr" _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}
15
15
  </figure>
16
16
  {{#if this.displayTeaserBodyAsImageOverlay}}
17
17
  {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
@@ -0,0 +1,2 @@
1
+ {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId":
2
+ "{{this.secondLevelId}}","clickLabel": "{{this.pageName}}"}]}'{{/with}}
@@ -0,0 +1,4 @@
1
+ data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if
2
+ _clickLabelPrefix1
3
+ }}::{{_clickLabelPrefix1}}{{/if}}{{#if _clickLabelPrefix2}}::{{_clickLabelPrefix2}}{{/if}}-Link
4
+ geklickt"}]}'
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": "1.15.0",
9
+ "version": "1.16.1",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
@@ -1123,6 +1123,10 @@
1123
1123
  "hideGeotag": false,
1124
1124
  "hideEditableByline": true,
1125
1125
  "doTracking": true,
1126
+ "trackingData": {
1127
+ "secondLevelId": "2",
1128
+ "pageName": "download"
1129
+ },
1126
1130
  "trackingForArdMediatheksLink": false,
1127
1131
  "showMediatheksLink": false,
1128
1132
  "showAirdate": false,
@@ -1,13 +1,8 @@
1
- <a {{#with this.link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{this.link.url}}{{#if this.hasComments}}#commentList{{/if}}"
2
- class="sb-link ds-link js-load{{#if _css}} {{_css}}{{/if}} {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}"
3
- {{#if _doNavigationTracking}}
4
- data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}::{{_clickLabelPrefix2}}-Link geklickt"}]}'
5
- {{/if}}
6
- {{#if this.isFileDownload}}
7
- {{#with this.trackingData}}data-hr-click-tracking='{"settings": [{"type":"download","secondLevelId": "{{this.link.secondLevelId}}","clickLabel": "{{this.link.pageName}}"}]}'{{/with}}
8
- {{/if}}
9
- {{#if this.link.isTargetBlank}} target="_blank" rel="noopener{{#if this.link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
1
+ <a {{#with _link.webviewUrl}}data-webviewurl="{{this}}"{{/with}} href="{{_link.url}}{{#if this.hasComments}}#commentList{{/if}}"
2
+ class="sb-link ds-link js-load {{#if _isSelected}} {{defaultIfEmpty _selectedCssClass "-current"}}{{/if}}{{#if _css}} {{_css}}{{/if}} {{#> css}}{{/css}}"
3
+ {{#if _link.isTargetBlank}} target="_blank" rel="noopener{{#if _link.hasNoReferrerFlag}} noreferrer{{/if}}"{{/if}}
10
4
  {{#if _isAriaHidden}} aria-hidden="true" tabindex="-1"{{/if}}
5
+ {{#> htmlProperties}}{{/htmlProperties}}
11
6
  >
12
- {{~ decorator_body ~}}
7
+ {{> @partial-block }}
13
8
  </a>