hr-design-system-handlebars 1.11.11 → 1.12.0

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 (126) hide show
  1. package/.storybook/main.js +9 -0
  2. package/.storybook/manager.js +18 -18
  3. package/.storybook/preview.js +9 -1
  4. package/CHANGELOG.md +24 -0
  5. package/README.md +13 -2
  6. package/build/handlebars/handlebars.js +1 -1
  7. package/build/scripts/build.js +1 -1
  8. package/config.js +1 -0
  9. package/dist/assets/index.css +223 -190
  10. package/dist/views/components/base/image/icon.hbs +1 -1
  11. package/dist/views/components/base/link.hbs +11 -1
  12. package/dist/views/components/base/link_open.hbs +12 -13
  13. package/dist/views/components/base/link_v2.hbs +14 -0
  14. package/dist/views/components/button/button.hbs +9 -24
  15. package/dist/views/components/button/components/button_icon.hbs +2 -1
  16. package/dist/views/components/button/components/button_label.hbs +1 -1
  17. package/dist/views/components/button/link_button.hbs +6 -0
  18. package/dist/views/components/button/utilities/button_base_classes.hbs +1 -0
  19. package/dist/views/components/button/utilities/button_dimension_classes.hbs +1 -0
  20. package/dist/views/components/button/utilities/button_on_image_classes.hbs +39 -0
  21. package/dist/views/components/button/utilities/button_variation_classes.hbs +14 -0
  22. package/dist/views/components/content_nav/content_nav_container.hbs +1 -1
  23. package/dist/views/components/content_nav/content_nav_item.hbs +1 -1
  24. package/dist/views/components/event/calendar/event_calendar_footer.hbs +1 -1
  25. package/dist/views/components/event/event_ticket_button.hbs +11 -9
  26. package/dist/views/components/grid/grid_group_highlight.hbs +1 -1
  27. package/dist/views/components/label/label_old.hbs +1 -1
  28. package/dist/views/components/mediaplayer/media_player.hbs +4 -22
  29. package/dist/views/components/mediaplayer/mediaplayer_button.hbs +9 -0
  30. package/dist/views/components/modal/modal.hbs +2 -2
  31. package/dist/views/components/page/page_pagination.hbs +1 -1
  32. package/dist/views/components/pagination/pagination.hbs +15 -14
  33. package/dist/views/components/pagination/pagination_current_page_invalid.hbs +1 -1
  34. package/dist/views/components/pagination/pagination_current_page_valid.hbs +2 -1
  35. package/dist/views/components/pagination/pagination_more_than_three_pages.hbs +3 -3
  36. package/dist/views/components/pagination/pagination_only_three_pages.hbs +7 -7
  37. package/dist/views/components/pagination/pagination_only_two_pages.hbs +2 -2
  38. package/dist/views/components/site_header/brand_navigation/brand_navigation.hbs +1 -1
  39. package/dist/views/components/teaser/cluster/teaser_cluster.hbs +4 -1
  40. package/dist/views/components/teaser/cluster/teaser_cluster_byline.hbs +1 -1
  41. package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs +1 -1
  42. package/dist/views/components/teaser/components/teaser_av_consumption_close_button.hbs +6 -20
  43. package/dist/views/components/teaser/components/teaser_byline.hbs +1 -1
  44. package/dist/views/components/teaser/components/teaser_image.hbs +6 -14
  45. package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs +18 -15
  46. package/dist/views/components/teaser/podcast/podcast_title.hbs +2 -2
  47. package/dist/views/components/teaser/tabbox/group_tabbox.hbs +4 -1
  48. package/dist/views/components/teaser/tabbox/teaser_tabbox.hbs +10 -11
  49. package/dist/views/components/teaser/teaser_poster.hbs +5 -1
  50. package/gulpfile.js +9 -0
  51. package/package.json +4 -2
  52. package/src/assets/css/custom-components.css +37 -38
  53. package/src/assets/css/custom-utilities.css +2 -2
  54. package/src/assets/fixtures/event/calendar/event_calendar_months.inc.json +5 -1
  55. package/src/assets/fixtures/page/page_pagination.json +15 -14
  56. package/src/assets/tailwind.css +54 -22
  57. package/src/stories/conventions-and-datastructure.mdx +217 -4
  58. package/src/stories/views/components/base/image/icon.hbs +1 -1
  59. package/src/stories/views/components/base/link.hbs +11 -1
  60. package/src/stories/views/components/base/link_open.hbs +12 -13
  61. package/src/stories/views/components/base/link_v2.hbs +14 -0
  62. package/src/stories/views/components/button/button.hbs +9 -24
  63. package/src/stories/views/components/button/button.mdx +186 -0
  64. package/src/stories/views/components/button/button.stories.js +508 -0
  65. package/src/stories/views/components/button/components/button_icon.hbs +2 -1
  66. package/src/stories/views/components/button/components/button_icon.mdx +25 -0
  67. package/src/stories/views/components/button/components/button_icon.stories.js +44 -0
  68. package/src/stories/views/components/button/components/button_label.hbs +1 -1
  69. package/src/stories/views/components/button/components/button_label.mdx +25 -0
  70. package/src/stories/views/components/button/components/button_label.stories.js +33 -0
  71. package/src/stories/views/components/button/link_button.hbs +6 -0
  72. package/src/stories/views/components/button/link_button.mdx +137 -0
  73. package/src/stories/views/components/button/link_button.stories.js +420 -0
  74. package/src/stories/views/components/button/utilities/button_base_classes.hbs +1 -0
  75. package/src/stories/views/components/button/utilities/button_dimension_classes.hbs +1 -0
  76. package/src/stories/views/components/button/utilities/button_on_image_classes.hbs +39 -0
  77. package/src/stories/views/components/button/utilities/button_variation_classes.hbs +14 -0
  78. package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -1
  79. package/src/stories/views/components/content_nav/content_nav_item.hbs +1 -1
  80. package/src/stories/views/components/event/calendar/event_calendar_footer.hbs +1 -1
  81. package/src/stories/views/components/event/event_ticket_button.hbs +11 -9
  82. package/src/stories/views/components/grid/grid_group_highlight.hbs +1 -1
  83. package/src/stories/views/components/label/label_old.hbs +1 -1
  84. package/src/stories/views/components/mediaplayer/media_player.hbs +4 -22
  85. package/src/stories/views/components/mediaplayer/mediaplayer_button.hbs +9 -0
  86. package/src/stories/views/components/mediaplayer/mediaplayer_button.mdx +82 -0
  87. package/src/stories/views/components/mediaplayer/mediaplayer_button.stories.js +178 -0
  88. package/src/stories/views/components/modal/modal.hbs +2 -2
  89. package/src/stories/views/components/page/fixtures/page_pagination.json +1 -1
  90. package/src/stories/views/components/page/page_pagination.hbs +1 -1
  91. package/src/stories/views/components/pagination/pagination.hbs +15 -14
  92. package/src/stories/views/components/pagination/pagination_current_page_invalid.hbs +1 -1
  93. package/src/stories/views/components/pagination/pagination_current_page_valid.hbs +2 -1
  94. package/src/stories/views/components/pagination/pagination_more_than_three_pages.hbs +3 -3
  95. package/src/stories/views/components/pagination/pagination_only_three_pages.hbs +7 -7
  96. package/src/stories/views/components/pagination/pagination_only_two_pages.hbs +2 -2
  97. package/src/stories/views/components/site_header/brand_navigation/brand_navigation.hbs +1 -1
  98. package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs +4 -1
  99. package/src/stories/views/components/teaser/cluster/teaser_cluster_byline.hbs +1 -1
  100. package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs +1 -1
  101. package/src/stories/views/components/teaser/components/teaser_av_consumption_close_button.hbs +6 -20
  102. package/src/stories/views/components/teaser/components/teaser_byline.hbs +1 -1
  103. package/src/stories/views/components/teaser/components/teaser_image.hbs +6 -14
  104. package/src/stories/views/components/teaser/fixtures/teaser_event_calendar_100_serif.json +1 -1
  105. package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs +18 -15
  106. package/src/stories/views/components/teaser/podcast/podcast_title.hbs +2 -2
  107. package/src/stories/views/components/teaser/tabbox/group_tabbox.hbs +4 -1
  108. package/src/stories/views/components/teaser/tabbox/teaser_tabbox.hbs +10 -11
  109. package/src/stories/views/components/teaser/teaser_poster.hbs +5 -1
  110. package/tailwind.config.js +8 -1
  111. package/dist/views/components/button/button_pseudo.hbs +0 -8
  112. package/dist/views/components/button/button_pseudo.inc.hbs +0 -18
  113. package/dist/views/components/button/button_pseudo_v2.hbs +0 -12
  114. package/dist/views/components/button/button_round.hbs +0 -23
  115. package/dist/views/components/button/button_round_classes.hbs +0 -46
  116. package/dist/views/components/button/button_transparent.hbs +0 -17
  117. package/dist/views/components/button/button_v2.hbs +0 -7
  118. package/dist/views/components/button/components/button_pseudo_link.hbs +0 -3
  119. package/src/stories/views/components/button/button_pseudo.hbs +0 -8
  120. package/src/stories/views/components/button/button_pseudo.inc.hbs +0 -18
  121. package/src/stories/views/components/button/button_pseudo_v2.hbs +0 -12
  122. package/src/stories/views/components/button/button_round.hbs +0 -23
  123. package/src/stories/views/components/button/button_round_classes.hbs +0 -46
  124. package/src/stories/views/components/button/button_transparent.hbs +0 -17
  125. package/src/stories/views/components/button/button_v2.hbs +0 -7
  126. package/src/stories/views/components/button/components/button_pseudo_link.hbs +0 -3
@@ -1,23 +0,0 @@
1
- {{> components/button/button
2
- _aria=_aria
3
- _isButton=_isButton
4
- _title=_title
5
- _name=_name
6
- _label=_label
7
- _value=_value
8
- _showIcon="true"
9
- _icon=_icon
10
- _iconmap=_iconmap
11
- _addIconClass="w-10 h-10 inline"
12
- _addClass=_addClass
13
- _webview=_webview
14
- _x-show=_x-show
15
- _alpineClick=_alpineClick
16
- _srOnly=_srOnly
17
- _buttonColor=_buttonColor
18
- _buttonSpace=true
19
- _teaserType=_teaserType
20
- _teaserSize=_teaserSize
21
- _isMobile1to1=_isMobile1to1
22
- _noFocus=_noFocus
23
- }}
@@ -1,46 +0,0 @@
1
- {{~#switch _teaserType~}}
2
- {{~#case 'standard'~}}
3
- {{~#if _isMobile1to1~}}
4
- {{~inline-switch
5
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-4 md:mx-4 "]'
6
- ~}}
7
- {{~else~}}
8
- {{~inline-switch
9
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-4 mx-4 md:my-3 md:mx-3"," my-4 mx-4"]'
10
- ~}}
11
- {{~/if~}}
12
- {{~/case~}}
13
- {{~#case 'alternative'~}}
14
- {{~#if _isMobile1to1~}}
15
- {{~inline-switch
16
- _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-4 md:mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
17
- ~}}
18
- {{~else~}}
19
- {{~inline-switch
20
- _teaserSize '["hero","100","50"]' '[" my-4 mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
21
- ~}}
22
- {{~/if~}}
23
- {{~/case~}}
24
- {{~#case 'tabbox-standard'~}}
25
- {{~#if _isMobile1to1~}}
26
- {{~inline-switch
27
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-4 md:mx-4 "]'
28
- ~}}
29
- {{~else~}}
30
- {{~inline-switch
31
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-4 mx-4 md:my-3 md:mx-3"," my-4 mx-4"]'
32
- ~}}
33
- {{~/if~}}
34
- {{~/case~}}
35
- {{~#case 'tabbox-alternative'~}}
36
- {{~#if _isMobile1to1~}}
37
- {{~inline-switch
38
- _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-4 md:mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
39
- ~}}
40
- {{~else~}}
41
- {{~inline-switch
42
- _teaserSize '["hero","100","50"]' '[" my-4 mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
43
- ~}}
44
- {{~/if~}}
45
- {{~/case~}}
46
- {{~/switch~}}
@@ -1,17 +0,0 @@
1
- {{> components/button/button
2
- _aria=_aria
3
- _isButton=_isButton
4
- _title=_title
5
- _name=_name
6
- _label=_label
7
- _value=_value
8
- _showIcon="true"
9
- _icon=_icon
10
- _iconmap=_iconmap
11
- _addIconClass=_addIconClass
12
- _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "
13
- _addClass2=_addClass
14
- _webview=_webview
15
- _x-show=_x-show
16
- _alpineClick=_alpineClick
17
- }}
@@ -1,7 +0,0 @@
1
- <button{{#if _id}} id="{{_id}}"{{/if}} class="border flex items-center px-4 py-2.5 ds-button {{inline-switch
2
- _type
3
- '["hollow","hollow-white","inverted"]'
4
- '["text-button-hollow border-button-hollow fill-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted fill-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:fill-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted fill-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
5
- }}{{#if _css}} {{_css}}{{/if}}{{#if _openModal}} js-modalButton{{/if}}"{{#if _openModal}} aria-haspopup="true"{{/if}}>
6
- {{> @partial-block }}
7
- </button>
@@ -1,3 +0,0 @@
1
- {{> components/base/link_open _css=(appendToDefault _css "ds-link") _isAriaHidden=_isAriaHidden}}
2
- {{> @partial-block }}
3
- </a>
@@ -1,8 +0,0 @@
1
- {{#if _withLink}}
2
- {{#decorator 'components/base/link' _isAriaHidden=_isLinkAriaHidden _css=_linkCss}}
3
- {{>components/button/button_pseudo.inc _addClass=_addClass _buttonCss=_buttonCss _buttonText=_buttonText _type=_type _isLinkAriaHidden=_isLinkAriaHidden _showIcon=_showIcon _icon=_icon}}
4
- {{/decorator}}
5
- {{else}}
6
- {{>components/button/button_pseudo.inc _addClass=_addClass _buttonCss=_buttonCss _buttonText=_buttonText _type=_type _isLinkAriaHidden=_isLinkAriaHidden _showIcon=_showIcon _icon=_icon}}
7
- {{/if}}
8
-
@@ -1,18 +0,0 @@
1
- <span
2
- class='px-4 py-2.5 border flex items-center
3
- {{inline-switch
4
- _type
5
- '["normal","hollow","hollow-white"]'
6
- '["text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
7
- }}
8
- font-heading{{#if _buttonCss}} {{_buttonCss}}{{/if}}'
9
- >
10
- <span class="flex-1 truncate">
11
- {{_buttonText}}
12
- </span>
13
- <span>
14
- {{~#if _showIcon~}}
15
- {{> components/base/image/icon _icon=_icon _iconmap=_iconmap _addClass=_addClass _webview=_webview}}
16
- {{/if~}}
17
- </span>
18
- </span>
@@ -1,12 +0,0 @@
1
-
2
- <span
3
- class='px-4 py-2.5 border flex items-center font-heading
4
- {{inline-switch
5
- _type
6
- '["hollow","hollow-white","inverted"]'
7
- '["text-button-hollow border-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
8
- }}
9
- {{#if _css}} {{_css}}{{/if}}'
10
- >
11
- {{> @partial-block }}
12
- </span>
@@ -1,23 +0,0 @@
1
- {{> components/button/button
2
- _aria=_aria
3
- _isButton=_isButton
4
- _title=_title
5
- _name=_name
6
- _label=_label
7
- _value=_value
8
- _showIcon="true"
9
- _icon=_icon
10
- _iconmap=_iconmap
11
- _addIconClass="w-10 h-10 inline"
12
- _addClass=_addClass
13
- _webview=_webview
14
- _x-show=_x-show
15
- _alpineClick=_alpineClick
16
- _srOnly=_srOnly
17
- _buttonColor=_buttonColor
18
- _buttonSpace=true
19
- _teaserType=_teaserType
20
- _teaserSize=_teaserSize
21
- _isMobile1to1=_isMobile1to1
22
- _noFocus=_noFocus
23
- }}
@@ -1,46 +0,0 @@
1
- {{~#switch _teaserType~}}
2
- {{~#case 'standard'~}}
3
- {{~#if _isMobile1to1~}}
4
- {{~inline-switch
5
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-4 md:mx-4 "]'
6
- ~}}
7
- {{~else~}}
8
- {{~inline-switch
9
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-4 mx-4 md:my-3 md:mx-3"," my-4 mx-4"]'
10
- ~}}
11
- {{~/if~}}
12
- {{~/case~}}
13
- {{~#case 'alternative'~}}
14
- {{~#if _isMobile1to1~}}
15
- {{~inline-switch
16
- _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-4 md:mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
17
- ~}}
18
- {{~else~}}
19
- {{~inline-switch
20
- _teaserSize '["hero","100","50"]' '[" my-4 mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
21
- ~}}
22
- {{~/if~}}
23
- {{~/case~}}
24
- {{~#case 'tabbox-standard'~}}
25
- {{~#if _isMobile1to1~}}
26
- {{~inline-switch
27
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2 md:my-4 md:mx-4 "]'
28
- ~}}
29
- {{~else~}}
30
- {{~inline-switch
31
- _teaserSize '["25","33"]' '[" my-2 mx-2"," my-4 mx-4 md:my-3 md:mx-3"," my-4 mx-4"]'
32
- ~}}
33
- {{~/if~}}
34
- {{~/case~}}
35
- {{~#case 'tabbox-alternative'~}}
36
- {{~#if _isMobile1to1~}}
37
- {{~inline-switch
38
- _teaserSize '["hero","100","50"]' '[" my-2 mx-2 md:my-4 md:mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
39
- ~}}
40
- {{~else~}}
41
- {{~inline-switch
42
- _teaserSize '["hero","100","50"]' '[" my-4 mx-4"," my-2 mx-2 md:my-3 md:mx-3"," my-2 mx-2"]'
43
- ~}}
44
- {{~/if~}}
45
- {{~/case~}}
46
- {{~/switch~}}
@@ -1,17 +0,0 @@
1
- {{> components/button/button
2
- _aria=_aria
3
- _isButton=_isButton
4
- _title=_title
5
- _name=_name
6
- _label=_label
7
- _value=_value
8
- _showIcon="true"
9
- _icon=_icon
10
- _iconmap=_iconmap
11
- _addIconClass=_addIconClass
12
- _addClass="bg-transparent hover:bg-slate-300 text-blue-700 font-semibold py-3.5 px-3.5 "
13
- _addClass2=_addClass
14
- _webview=_webview
15
- _x-show=_x-show
16
- _alpineClick=_alpineClick
17
- }}
@@ -1,7 +0,0 @@
1
- <button{{#if _id}} id="{{_id}}"{{/if}} class="border flex items-center px-4 py-2.5 ds-button {{inline-switch
2
- _type
3
- '["hollow","hollow-white","inverted"]'
4
- '["text-button-hollow border-button-hollow fill-button-hollow hover:bg-button-inverted","text-button-inverted border-button-inverted fill-button-inverted hover:bg-button-inverted hover:text-button-hollow hover:fill-button-hollow hover:border-button-hollow","text-button fill-button border-button bg-button-inverted hover:bg-button hover:text-button-inverted hover:fill-button-inverted hover:border-button-hollow","text-button-inverted fill-button-inverted bg-button hover:bg-button-inverted hover:text-button-hollow hover:border-button-hollow"]'
5
- }}{{#if _css}} {{_css}}{{/if}}{{#if _openModal}} js-modalButton{{/if}}"{{#if _openModal}} aria-haspopup="true"{{/if}}>
6
- {{> @partial-block }}
7
- </button>
@@ -1,3 +0,0 @@
1
- {{> components/base/link_open _css=(appendToDefault _css "ds-link") _isAriaHidden=_isAriaHidden}}
2
- {{> @partial-block }}
3
- </a>