hr-design-system-handlebars 1.17.1 β†’ 1.18.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 (55) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/assets/index.css +53 -47
  3. package/dist/views/components/button/top_topics_button.hbs +5 -0
  4. package/dist/views/components/button/utilities/button_variation_classes.hbs +2 -2
  5. package/dist/views/components/content_nav/content_nav_container.hbs +1 -1
  6. package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +3 -3
  7. package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +1 -1
  8. package/dist/views/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
  9. package/dist/views/components/site_header/burger.hbs +1 -1
  10. package/dist/views/components/site_header/header.hbs +4 -4
  11. package/dist/views/components/site_header/navigation_flyout/navigation_flyout.hbs +2 -2
  12. package/dist/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
  13. package/dist/views/components/site_header/navigation_search/quick_search_button.hbs +3 -3
  14. package/dist/views/components/site_header/navigation_search/quick_search_form.hbs +4 -4
  15. package/dist/views/components/site_header/section_navigation/section_navigation_item.hbs +2 -2
  16. package/dist/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +6 -5
  17. package/dist/views/components/site_header/service_navigation/service_list.hbs +1 -1
  18. package/dist/views/components/site_header/service_navigation/service_navigation_item.hbs +2 -2
  19. package/package.json +1 -1
  20. package/src/assets/brand/hessenschau/conf/locatags.merged.json +1 -0
  21. package/src/assets/brand/hr/conf/locatags.merged.json +1 -0
  22. package/src/assets/brand/hr-bigband/conf/locatags.merged.json +1 -0
  23. package/src/assets/brand/hr-fernsehen/conf/locatags.merged.json +1 -0
  24. package/src/assets/brand/hr-inforadio/conf/locatags.merged.json +1 -0
  25. package/src/assets/brand/hr-rundfunkrat/conf/locatags.merged.json +1 -0
  26. package/src/assets/brand/hr-sinfonieorchester/conf/locatags.merged.json +1 -0
  27. package/src/assets/brand/hr-werbung/conf/locatags.merged.json +1 -0
  28. package/src/assets/brand/hr1/conf/locatags.merged.json +1 -0
  29. package/src/assets/brand/hr2/conf/locatags.merged.json +1 -0
  30. package/src/assets/brand/hr3/conf/locatags.merged.json +1 -0
  31. package/src/assets/brand/hr4/conf/locatags.merged.json +1 -0
  32. package/src/assets/brand/you-fm/conf/locatags.merged.json +1 -0
  33. package/src/assets/css/custom-utilities.css +1 -1
  34. package/src/assets/fixtures/site_header/topTopicsNavigation.inc.json +3 -3
  35. package/src/assets/tailwind.css +2 -2
  36. package/src/stories/views/components/button/top_topics_button.hbs +5 -0
  37. package/src/stories/views/components/button/utilities/button_variation_classes.hbs +2 -2
  38. package/src/stories/views/components/content_nav/content_nav_container.hbs +1 -1
  39. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.hbs +3 -3
  40. package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs +1 -1
  41. package/src/stories/views/components/page/fixtures/page_pagination.json +1 -1
  42. package/src/stories/views/components/site_header/brand_navigation/brand_navigation_item.hbs +1 -1
  43. package/src/stories/views/components/site_header/burger.hbs +1 -1
  44. package/src/stories/views/components/site_header/fixtures/site_header_mit_top_topics.json +1 -1
  45. package/src/stories/views/components/site_header/fixtures/site_header_mit_top_topics_no_sticky.json +1 -1
  46. package/src/stories/views/components/site_header/header.hbs +4 -4
  47. package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout.hbs +2 -2
  48. package/src/stories/views/components/site_header/navigation_flyout/navigation_flyout_item.hbs +1 -1
  49. package/src/stories/views/components/site_header/navigation_search/quick_search_button.hbs +3 -3
  50. package/src/stories/views/components/site_header/navigation_search/quick_search_form.hbs +4 -4
  51. package/src/stories/views/components/site_header/section_navigation/section_navigation_item.hbs +2 -2
  52. package/src/stories/views/components/site_header/section_navigation/section_navigation_top_topics.hbs +6 -5
  53. package/src/stories/views/components/site_header/service_navigation/service_list.hbs +1 -1
  54. package/src/stories/views/components/site_header/service_navigation/service_navigation_item.hbs +2 -2
  55. package/tailwind.config.js +1 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v1.18.0 (Thu May 04 2023)
2
+
3
+ #### πŸš€ Enhancement
4
+
5
+ - uses -primary instead of hardcoded color [#623](https://github.com/mumprod/hr-design-system-handlebars/pull/623) ([@StefanVesper](https://github.com/StefanVesper))
6
+
7
+ #### Authors: 1
8
+
9
+ - SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
10
+
11
+ ---
12
+
13
+ # v1.17.2 (Thu May 04 2023)
14
+
15
+ #### πŸ› Bug Fix
16
+
17
+ - 1913 - Top Topics fΓΌr Desktop einbauen [#615](https://github.com/mumprod/hr-design-system-handlebars/pull/615) ([@vascoeduardo](https://github.com/vascoeduardo))
18
+
19
+ #### Authors: 1
20
+
21
+ - Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
22
+
23
+ ---
24
+
1
25
  # v1.17.1 (Wed May 03 2023)
2
26
 
3
27
  #### πŸ› Bug Fix
@@ -1129,6 +1129,10 @@ video {
1129
1129
  margin-left: 1px;
1130
1130
  margin-right: 1px;
1131
1131
  }
1132
+ .my-2 {
1133
+ margin-top: 0.5rem;
1134
+ margin-bottom: 0.5rem;
1135
+ }
1132
1136
  .my-4 {
1133
1137
  margin-top: 1rem;
1134
1138
  margin-bottom: 1rem;
@@ -1796,10 +1800,6 @@ video {
1796
1800
  .border-none {
1797
1801
  border-style: none;
1798
1802
  }
1799
- .border-blue-congress {
1800
- --tw-border-opacity: 1;
1801
- border-color: rgba(0, 82, 147, var(--tw-border-opacity));
1802
- }
1803
1803
  .border-button {
1804
1804
  border-color: var(--color-button);
1805
1805
  }
@@ -1861,6 +1861,10 @@ video {
1861
1861
  --tw-bg-opacity: 1;
1862
1862
  background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
1863
1863
  }
1864
+ .bg-blue-linkWater {
1865
+ --tw-bg-opacity: 1;
1866
+ background-color: rgba(211, 226, 244, var(--tw-bg-opacity));
1867
+ }
1864
1868
  .bg-button {
1865
1869
  background-color: var(--color-button);
1866
1870
  }
@@ -2243,6 +2247,9 @@ video {
2243
2247
  .pt-0 {
2244
2248
  padding-top: 0px;
2245
2249
  }
2250
+ .pt-0\.5 {
2251
+ padding-top: 0.125rem;
2252
+ }
2246
2253
  .pt-1 {
2247
2254
  padding-top: 0.25rem;
2248
2255
  }
@@ -2425,14 +2432,6 @@ video {
2425
2432
  --tw-text-opacity: 1;
2426
2433
  color: rgba(29, 78, 216, var(--tw-text-opacity));
2427
2434
  }
2428
- .text-blue-astronautBlue {
2429
- --tw-text-opacity: 1;
2430
- color: rgba(0, 55, 93, var(--tw-text-opacity));
2431
- }
2432
- .text-blue-congress {
2433
- --tw-text-opacity: 1;
2434
- color: rgba(0, 82, 147, var(--tw-text-opacity));
2435
- }
2436
2435
  .text-blue-science {
2437
2436
  --tw-text-opacity: 1;
2438
2437
  color: rgba(0, 109, 193, var(--tw-text-opacity));
@@ -2494,6 +2493,10 @@ video {
2494
2493
  color: #006eb7;
2495
2494
  color: var(--color-podcast-text);
2496
2495
  }
2496
+ .text-primary {
2497
+ color: #005293;
2498
+ color: var(--color-primary-ds);
2499
+ }
2497
2500
  .text-stageLink {
2498
2501
  color: #006eb7;
2499
2502
  color: var(--color-stage-link);
@@ -2544,17 +2547,17 @@ video {
2544
2547
  .decoration-1 {
2545
2548
  text-decoration-thickness: 1px;
2546
2549
  }
2547
- .placeholder-blue-congress::-webkit-input-placeholder {
2548
- --tw-placeholder-opacity: 1;
2549
- color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
2550
+ .placeholder-primary::-webkit-input-placeholder {
2551
+ color: #005293;
2552
+ color: var(--color-primary-ds);
2550
2553
  }
2551
- .placeholder-blue-congress::-moz-placeholder {
2552
- --tw-placeholder-opacity: 1;
2553
- color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
2554
+ .placeholder-primary::-moz-placeholder {
2555
+ color: #005293;
2556
+ color: var(--color-primary-ds);
2554
2557
  }
2555
- .placeholder-blue-congress::placeholder {
2556
- --tw-placeholder-opacity: 1;
2557
- color: rgba(0, 82, 147, var(--tw-placeholder-opacity));
2558
+ .placeholder-primary::placeholder {
2559
+ color: #005293;
2560
+ color: var(--color-primary-ds);
2558
2561
  }
2559
2562
  .placeholder-opacity-100::-webkit-input-placeholder {
2560
2563
  --tw-placeholder-opacity: 1;
@@ -2679,7 +2682,7 @@ video {
2679
2682
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2680
2683
  }
2681
2684
  .counter-reset {
2682
- counter-reset: cnt1683118889767;
2685
+ counter-reset: cnt1683204056048;
2683
2686
  }
2684
2687
  .hyphens-auto {
2685
2688
  -webkit-hyphens: auto;
@@ -2781,7 +2784,8 @@ video {
2781
2784
  border-right-width: 8px;
2782
2785
  border-left-width: 8px;
2783
2786
  border-bottom-width: 8px;
2784
- border-color: rgba(0, 82, 147, var(--tw-border-opacity));
2787
+ border-color: #005293;
2788
+ border-color: var(--color-primary-ds);
2785
2789
  --tw-border-opacity: 1;
2786
2790
  border-left-color: rgba(255, 255, 255, var(--tw-border-opacity));
2787
2791
  border-right-color: transparent;
@@ -2917,7 +2921,7 @@ video {
2917
2921
  --tw-ring-color: rgba(255, 255, 255, 0.5);
2918
2922
  }
2919
2923
  .-ordered {
2920
- counter-increment: cnt1683118889767 1;
2924
+ counter-increment: cnt1683204056048 1;
2921
2925
  }
2922
2926
  .-ordered::before {
2923
2927
  position: absolute;
@@ -2933,7 +2937,7 @@ video {
2933
2937
  letter-spacing: .0125em;
2934
2938
  --tw-text-opacity: 1;
2935
2939
  color: rgba(0, 0, 0, var(--tw-text-opacity));
2936
- content: counter(cnt1683118889767);
2940
+ content: counter(cnt1683204056048);
2937
2941
  }
2938
2942
  /*! ****************************/
2939
2943
  /*! text-shadow */
@@ -3837,10 +3841,12 @@ video {
3837
3841
  }
3838
3842
  .arrow-left-background-blue {
3839
3843
  background: linear-gradient(to left, rgba(255, 255, 255, 0),#005293 50%);
3844
+ background: linear-gradient(to left, rgba(255, 255, 255, 0),var(--color-primary-ds) 50%);
3840
3845
  transition: transform 150ms ease-in-out 0s;
3841
3846
  }
3842
3847
  .arrow-right-background-blue {
3843
3848
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #005293 50%);
3849
+ background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-primary-ds) 50%);
3844
3850
  transition: transform 150ms ease-in-out 0s;
3845
3851
  }
3846
3852
  .c-videoplayer .ardplayer {
@@ -3945,14 +3951,6 @@ video {
3945
3951
  --tw-bg-opacity: 1;
3946
3952
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
3947
3953
  }
3948
- .hover\:bg-blue-300:hover {
3949
- --tw-bg-opacity: 1;
3950
- background-color: rgba(147, 197, 253, var(--tw-bg-opacity));
3951
- }
3952
- .hover\:bg-blue-congress:hover {
3953
- --tw-bg-opacity: 1;
3954
- background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
3955
- }
3956
3954
  .hover\:bg-button--dark:hover {
3957
3955
  background-color: var(--color-button--dark);
3958
3956
  }
@@ -3963,6 +3961,10 @@ video {
3963
3961
  .hover\:bg-button-inverted--dark:hover {
3964
3962
  background-color: var(--color-button-inverted--dark);
3965
3963
  }
3964
+ .hover\:bg-primary:hover {
3965
+ background-color: #005293;
3966
+ background-color: var(--color-primary-ds);
3967
+ }
3966
3968
  .hover\:bg-slate-300:hover {
3967
3969
  --tw-bg-opacity: 1;
3968
3970
  background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
@@ -4016,13 +4018,13 @@ video {
4016
4018
  .active\:font-bold:active {
4017
4019
  font-weight: 700;
4018
4020
  }
4019
- .active\:text-blue-science:active {
4020
- --tw-text-opacity: 1;
4021
- color: rgba(0, 109, 193, var(--tw-text-opacity));
4022
- }
4023
4021
  .active\:text-button:active {
4024
4022
  color: var(--color-button);
4025
4023
  }
4024
+ .active\:text-primary:active {
4025
+ color: #005293;
4026
+ color: var(--color-primary-ds);
4027
+ }
4026
4028
  .disabled\:hidden:disabled {
4027
4029
  display: none;
4028
4030
  }
@@ -4877,6 +4879,14 @@ video {
4877
4879
  margin-top: -2rem;
4878
4880
  }
4879
4881
 
4882
+ .lg\:mb-2 {
4883
+ margin-bottom: 0.5rem;
4884
+ }
4885
+
4886
+ .lg\:mb-2\.5 {
4887
+ margin-bottom: 0.625rem;
4888
+ }
4889
+
4880
4890
  .lg\:ml-0 {
4881
4891
  margin-left: 0px;
4882
4892
  }
@@ -5086,9 +5096,9 @@ video {
5086
5096
  border-style: none;
5087
5097
  }
5088
5098
 
5089
- .lg\:border-blue-congress {
5090
- --tw-border-opacity: 1;
5091
- border-color: rgba(0, 82, 147, var(--tw-border-opacity));
5099
+ .lg\:border-primary {
5100
+ border-color: #005293;
5101
+ border-color: var(--color-primary-ds);
5092
5102
  }
5093
5103
 
5094
5104
  .lg\:bg-transparent {
@@ -5152,10 +5162,6 @@ video {
5152
5162
  padding-bottom: 0px;
5153
5163
  }
5154
5164
 
5155
- .lg\:pb-1 {
5156
- padding-bottom: 0.25rem;
5157
- }
5158
-
5159
5165
  .lg\:pb-3 {
5160
5166
  padding-bottom: 0.75rem;
5161
5167
  }
@@ -5200,9 +5206,9 @@ video {
5200
5206
  line-height: 1.25rem;
5201
5207
  }
5202
5208
 
5203
- .lg\:text-blue-congress {
5204
- --tw-text-opacity: 1;
5205
- color: rgba(0, 82, 147, var(--tw-text-opacity));
5209
+ .lg\:text-primary {
5210
+ color: #005293;
5211
+ color: var(--color-primary-ds);
5206
5212
  }
5207
5213
 
5208
5214
  .lg\:underline {
@@ -0,0 +1,5 @@
1
+ {{#> components/base/link _link=this.link _css="inline-flex items-center"}}
2
+ <span class="rounded-full font-copy my-2 lg:mb-2.5 pt-0.5 px-1.5 leading-5 {{> components/button/utilities/button_variation_classes _variant="primary" _onBackground="true"}}">
3
+ {{> @partial-block }}
4
+ </span>
5
+ {{/components/base/link}}
@@ -2,7 +2,7 @@
2
2
  {{inline-switch
3
3
  _variant
4
4
  '["primary","secondary","tertiary"]'
5
- '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "]'
5
+ '[" border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark "," border text-button bg-button-inverted border-button-inverted hover:bg-button-inverted--dark active:bg-button-inverted--dark "]'
6
6
  ~}}
7
7
  {{else if _disabled~}}
8
8
 
@@ -16,7 +16,7 @@
16
16
  {{~inline-switch
17
17
  _variant
18
18
  '["primary","secondary","tertiary"]'
19
- '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
19
+ '[" border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "," border text-button border-button hover:bg-button-inverted active:bg-button-primary--inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-primary--inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
20
20
  ~}}
21
21
  {{/if}}
22
22
  {{~#unless _disableButtonPress}} active:scale-95{{/unless}}
@@ -4,7 +4,7 @@
4
4
  {{/if}}
5
5
  >
6
6
  {{#if this.isAutosuggest}}
7
- <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
7
+ <div class="flex mx-0 w-full h-10 border-primary align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
8
8
  <input x-ref="autosuggestInput"
9
9
  class="{{#if _inputclass }}{{_inputclass}}{{/if}} w-full h-10 pl-2 border-b-8 border-white bg-gray-alabaster text-gray-dark placeholder:text-gray-dark focus:outline-none js-autosuggest-input"
10
10
  type="text"
@@ -9,14 +9,14 @@
9
9
  <template x-if="isScrollable && $screen('{{_viewport}}')">
10
10
  <div>
11
11
  <button class="{{#if _onDarkBackground}}arrow-left-background-blue{{else}}arrow-left-background{{/if}} absolute z-10 left-0 flex items-center justify-start w-8 h-full disabled:hidden" @click="prev($refs.scrollContainer_{{getRandom}})" :disabled="!arrowLeftDisplay" aria-label="nach links scrollen">
12
- {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
12
+ {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-primary') }}
13
13
  </button>
14
14
  <button class="{{#if _onDarkBackground}}arrow-right-background-blue{{else}}arrow-right-background{{/if}} absolute z-10 right-0 flex items-center justify-end w-8 h-full group disabled:hidden" @click="next($refs.scrollContainer_{{getRandom}})" :disabled="!arrowRightDisplay" aria-label="nach rechts scrollen">
15
- {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-blue-congress') }}
15
+ {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass=(if _onDarkBackground 'w-3.5 h-3.5 fill-current text-white' 'w-3.5 h-3.5 fill-current text-primary') }}
16
16
  </button>
17
17
  </div>
18
18
  </template>
19
- <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll leading-10 transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
19
+ <div x-ref="scrollContainer_{{getRandom}}" @scroll="updateIndex($event.target)" class="w-full overflow-hidden overflow-x-scroll transition-all duration-300 ease-in-out cursor-default hide-scroll-bar align-center">
20
20
  {{> @partial-block }}
21
21
  </div>
22
22
  </div>
@@ -1,7 +1,7 @@
1
1
  <div class="w-full h-auto mb-10">
2
2
  {{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
3
3
 
4
- <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
4
+ <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-primary">
5
5
  <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist. </p>
6
6
  </div>
7
7
 
@@ -1,3 +1,3 @@
1
- <li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-blue-congress {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-blue-science">
1
+ <li class="sb-brand-navigation-item{{#if this.selected}} h-10 md:h-8 font-bold text-primary {{/if}} cursor-pointer inline-block lg:hover:underline active:font-bold active:text-primary">
2
2
  <a class="link-focus-inset leading-10 md:leading-8 flex-col px-3 {{#if @first }}pl-0 {{/if}}md:flex-row js-load w-max flex justify-center {{#if this.selected}} -currentBrand {{/if}}" aria-label="{{this.name}}" href="{{resourceUrl "index.html" _site=this.site}}"{{#if this.extern}} target="_blank" rel="noopener noreferrer"{{/if}} data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "Brandnavigation::{{this.text}}-Link geklickt"}]}'>{{this.text}}</a>
3
3
  </li>
@@ -1,6 +1,6 @@
1
1
  <div x-data="burger()" class="flex items-center justify-center h-full fill-current sb-burger">
2
2
  <nav>
3
- <button {{!-- :class="$store.burgeropen ? 'text-blue-congress' : 'text-white'" --}}
3
+ <button {{!-- :class="$store.burgeropen ? 'text-primary' : 'text-white'" --}}
4
4
  class="relative w-10 h-10 text-white tablet:w-18 tablet:h-12 focus:outline-none bg-brand"
5
5
  @burger-close.window="burgerClose()"
6
6
  @click="$store.burgeropen = !$store.burgeropen"
@@ -20,19 +20,19 @@
20
20
  <div id="serviceNavWrapper"
21
21
  :class="shouldServiceNavBeHidden() ? '-mt-40' : ''"
22
22
 
23
- class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-blue-congress z-10002">
23
+ class="relative flex justify-center order-2 w-full transition-all duration-500 ease-in-out md:border-white lg:border-b bg-primary z-10002">
24
24
  <div id="serviceNavMainContainer"
25
25
  class="flex w-full h-10 lg:container md:h-12 lg:px-10 lg:h-16 z-10001">
26
26
 
27
27
  <span id="serviceNavHeadline" class="hidden print:hidden">Service Navigation</span>
28
28
 
29
29
  <div id="serviceLogoWrapper"
30
- class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-blue-congress md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
30
+ class="flex items-center order-1 w-full pl-4 pr-2 tablet:pl-5 lg:items-end lg:pb-3 bg-primary md:px-0 md:h-12 lg:h-16 md:w-1/2 md:max-w-1/2 lg:w-1/4 lg:max-w-1/4">
31
31
  {{> components/site_header/service_logo }}
32
32
  </div>
33
33
 
34
34
  <div id="serviceItemsWrapper"
35
- class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-blue-congress md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
35
+ class="flex items-center justify-end flex-initial order-2 inline-block w-full max-w-full align-top bg-primary md:h-12 lg:h-16 lg:order-2 lg:w-3/4 lg:max-w-3/4 md:mt-0 md:w-1/2 md:max-w-1/2 md:order-2 md:border-0">
36
36
  {{> components/site_header/service_navigation/service_list }}
37
37
 
38
38
  {{> components/site_header/navigation_search/quick_search_button }}
@@ -54,7 +54,7 @@
54
54
  x-ref="sectionnavigation"
55
55
  @toggle-sectionnav.window="toggleSectionNav"
56
56
  :class="shouldSectionNavBeHidden() ? '-mt-40 md:-mt-40 lg:-mt-40' : ''"
57
- class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-blue-congress z-10000 print:hidden"
57
+ class="flex justify-center order-3 w-full overflow-hidden duration-500 transition-max-height lg:transition-margin-top lg:duration-500 tablet:absolute tablet:top-20 tablet:w-half-screen tablet:ml-half-screen max-h-0 lg:overflow-visible md:mt-0 lg:flex lg:max-h-full lg:h-auto bg-primary z-10000 print:hidden"
58
58
  >
59
59
  {{> components/site_header/section_navigation/section_navigation }}
60
60
  </div>
@@ -11,7 +11,7 @@
11
11
  {{#if ../_isSectionNav}} relative md:top-auto md:left-auto lg:mt-10 w-full transition-all duration-500 ease-in-out
12
12
  {{#unless this.showAsFlyout}}
13
13
  {{#if ../this.selected}}
14
- isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-blue-congress lg:filter-none lg:left-0 flex justify-center
14
+ isSelectedAndOpen lg:ml-0 z-10000 lg:border-b lg:border-primary lg:filter-none lg:left-0 flex justify-center
15
15
  {{else}} z-10002 lg:left-auto lg:w-auto {{/if}}
16
16
  {{else}} z-10002 lg:left-auto lg:w-auto {{/unless}}
17
17
  {{else}} z-10002 lg:rounded-b absolute w-full top-10 left-0 md:w-80 lg:w-92 md:top-12 lg:px-4 md:mt-0 md:left-0 lg:top-15 lg:left-0 lg:pl-6 divide-y divide-gray-200 tablet:w-half-screen tablet:ml-half-screen tablet:right-0 tablet:left-auto {{/if}}
@@ -31,7 +31,7 @@
31
31
  {{#unless ../this.isCluster ~}}
32
32
  {{#unless ../_isSectionNav}}
33
33
  <div class="w-full">
34
- <div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-blue-congress ">
34
+ <div class="flex pt-4 pb-2 pl-4 text-base font-bold bg-white lg:pl-0 md:pt-4 lg:pt-1 lg:pb-0 justify-left text-primary ">
35
35
  <a href="{{resourceUrl ../this.url}}" class="-isHeaderLink lg:leading-10 link-focus-inset js-load" data-hr-click-tracking='{"settings": [{"type": "uxAction", "secondLevelId": "1", "clickLabel": "{{../_navigationType}}::{{../_parent}}::{{../this.flyoutStartLinkText}}-Link geklickt"}]}' >
36
36
  {{../this.flyoutStartLinkText}}
37
37
  </a>
@@ -1,5 +1,5 @@
1
1
  <li :class="dropped ? 'h-auto' : 'h-10'"
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">
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-primary justify-start hover:underline">
3
3
  {{#with this}}
4
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
5
  {{this.text}}
@@ -1,6 +1,6 @@
1
1
  <div
2
- x-cloak class="sb-quick-search-button flex items-center h-8 md:h-full md:border-r md:border-l md:border-white lg:border-none"
3
- :class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-blue-congress'"
2
+ x-cloak class="flex items-center h-8 sb-quick-search-button md:h-full md:border-r md:border-l md:border-white lg:border-none"
3
+ :class="$store.searchFieldOpen == true ? 'bg-white mt-2 rounded-t md:mt-0 md:rounded-none' : 'bg-primary'"
4
4
  >
5
5
  <button
6
6
  @click="$store.searchFieldOpen = ! $store.searchFieldOpen; dropped = false; $store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen)"
@@ -20,7 +20,7 @@
20
20
  </svg>
21
21
  <svg
22
22
  x-show="$store.searchFieldOpen == true"
23
- class="h-6 fill-current w-9 text-blue-congress"
23
+ class="h-6 fill-current w-9 text-primary"
24
24
  xmlns="http://www.w3.org/2000/svg"
25
25
  viewBox="0 0 20 20"
26
26
  x-effect="$el.setAttribute('aria-hidden', $store.searchFieldOpen == false)"
@@ -19,7 +19,7 @@
19
19
  name="query"
20
20
  x-model="query"
21
21
  placeholder='{{loca "search_input_placeholder" }}'
22
- class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-blue-congress lg:h-10 placeholder-text-xs placeholder-blue-congress text-blue-congress focus:outline-none"
22
+ class="w-full px-2 py-2 text-base leading-4 placeholder-opacity-100 border rounded-l rounded-r-none shadow-inner appearance-none lg:border-0 lg:border-none border-primary lg:h-10 placeholder-text-xs placeholder-primary text-primary focus:outline-none"
23
23
  type="text"
24
24
  id="searchInput--{{getRandom}}"
25
25
  autocomplete="off"
@@ -52,7 +52,7 @@
52
52
  <a
53
53
  x-bind:active="false"
54
54
  x-bind:href="'{{resourceUrl "suche/index.nocache"}}?query=' + suggestion"
55
- x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-blue-congress hover:text-white': true, 'bg-blue-congress text-white':index==cursorIndex }"
55
+ x-bind:class="{'py-1.5 px-2 link-focus-inset text-base flex w-full rounded hover:bg-primary hover:text-white': true, 'bg-primary text-white':index==cursorIndex }"
56
56
  >
57
57
  <span x-text="suggestion"></span>
58
58
  </a>
@@ -65,9 +65,9 @@
65
65
  <button
66
66
  aria-label='{{loca "search_input_aria_submit" }}'
67
67
  type="submit"
68
- class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-blue-congress lg:bg-white text-blue-congress z-10002"
68
+ class="pl-3 pr-2 rounded-r cursor-pointer link-focus-inset bg-primary lg:bg-white text-primary z-10002"
69
69
  >
70
- <svg class="w-6 h-6 text-white fill-current bg-blue-congress lg:fill-current lg:text-blue-congress lg:bg-white"
70
+ <svg class="w-6 h-6 text-white fill-current bg-primary lg:fill-current lg:text-primary lg:bg-white"
71
71
  xmlns="http://www.w3.org/2000/svg"
72
72
  viewBox="0 0 20 20"
73
73
  aria-hidden="true"
@@ -2,8 +2,8 @@
2
2
  <li x-data="dropdown"
3
3
  @click.outside="dropped = false"
4
4
  @close-servicemenu.window="dropped = false"
5
- :class="dropped ? 'border-b-0 lg:bg-white lg:text-blue-congress h-auto' : 'h-10 lg:hover:underline'"
6
- class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-blue-congress lg:rounded-t">
5
+ :class="dropped ? 'border-b-0 lg:bg-white lg:text-primary h-auto' : 'h-10 lg:hover:underline'"
6
+ class="flex flex-wrap justify-start order-2 w-full text-white list-none border-b border-white sb-section-navigation-item first:lg:-ml-4 md:pl-0 lg:last:pr-8 lg:first:pl-0 first:border-t lg:first:border-t-0 first:font-normal last:border-b-0 lg:border-0 lg:w-auto bg-primary lg:rounded-t">
7
7
  {{#if this.isCluster ~}}
8
8
  {{!-- Gilt z.B. fΓΌr REGIONEN: --}}
9
9
  <button id="button-{{nextRandom}}-1"
@@ -1,10 +1,11 @@
1
1
  <li class="order-1 w-full lg:mr-2 lg:w-auto lg:order-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">
2
+ <ul class="flex flex-row items-center w-full p-4 text-left list-none bg-blue-linkWater lg:p-0 lg:bg-transparent lg:h-10">
3
3
  {{#each this.items}}
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
- {{#> components/base/link _link=this.link}}
6
- {{this.text}}
7
- {{/components/base/link}}
4
+ <li class="{{#unless @last}}mr-3 {{/unless}}">
5
+ {{#> components/button/top_topics_button}}
6
+ <div class="sr-only">{{loca "label_top_thema"}}</div>
7
+ {{> components/button/components/button_label _label=this.text }}
8
+ {{/components/button/top_topics_button}}
8
9
  </li>
9
10
  {{/each}}
10
11
  </ul>
@@ -3,7 +3,7 @@
3
3
  @click.outside="$store.serviceNavIsOpen = false; toggleScrolling(!$store.searchFieldOpen && !$store.burgeropen)"
4
4
  x-ref="serviceList"
5
5
  :class="shouldServiceIconsBeHidden() ? '-mt-40' : ''"
6
- class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-blue-congress md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
6
+ class="absolute left-0 flex justify-center flex-initial w-full h-10 max-w-full align-top duration-500 ease-in-out border-t border-white sb-service-list transition-margin-top -z-1000 md:z-10000 md:h-12 top-10 bg-primary md:border-0 md:top-auto md:w-auto md:left-auto md:static md:justify-end md:flex md:flex-auto lg:h-16 lg:pl-0 lg:pr-4 lg:w-3/4 "
7
7
  >
8
8
  {{#with this.serviceNavigationSSILinks}}
9
9
  <ul class="flex justify-around w-full h-full -itemCount-{{ count }} lg:w-auto lg:justify-end lg:pt-1">
@@ -12,7 +12,7 @@
12
12
 
13
13
  class="js-load flex flex-col items-center justify-center h-full px-4 text-left lg:justify-start lg:px-3 lg:pt-1 lg:hover:underline lg:relative lg:rounded-t lg:border-0 lg:left-0 link-focus-inset-white {{#if this.selected}}-currentService{{/if}}"
14
14
 
15
- :class="dropped ? 'bg-white fill-current text-blue-congress lg:border-0 lg:underline' : ''"
15
+ :class="dropped ? 'bg-white fill-current text-primary lg:border-0 lg:underline' : ''"
16
16
 
17
17
  aria-owns="flyout-{{getRandom}}"
18
18
  aria-controls="flyout-{{getRandom}}"
@@ -35,7 +35,7 @@
35
35
  <span class="sr-only lg:hidden">{{this.text}}</span>
36
36
  </div>
37
37
 
38
- <div :class="{'text-blue-congress fill-current': dropped,'text-white fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">
38
+ <div :class="{'text-primary fill-current': dropped,'text-white fill-white': !dropped}" class="relative flex-row items-center justify-center hidden pt-px text-white lg:flex z-10002">
39
39
  <div class="flex" >
40
40
  <span class="flex text-xs leading-4 whitespace-nowrap">
41
41
  {{text}}
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.17.1",
9
+ "version": "1.18.0",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",
@@ -86,6 +86,7 @@
86
86
  "label_small-art": "Kleinkunst",
87
87
  "label_sports": "Sport",
88
88
  "label_talk": "Talk",
89
+ "label_top_thema": "Top-Thema",
89
90
  "livestream_has_played": "Beendet",
90
91
  "livestream_plays": "Jetzt live",
91
92
  "livestream_will_play": "Startet am {0}",