hr-design-system-handlebars 1.106.0 → 1.107.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 (22) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/assets/index.css +13 -3
  3. package/dist/assets/js/components/event/filtererDs.feature.js +11 -11
  4. package/dist/assets/js/components/event/nativeScrollDs.feature.js +6 -6
  5. package/dist/views/components/button/utilities/button_variation_classes.hbs +4 -4
  6. package/dist/views/components/event/calendar/event_calendar_footer.hbs +1 -1
  7. package/dist/views/components/event/calendar/event_calendar_nav.hbs +6 -6
  8. package/dist/views/components/event/calendar/event_calendar_nav_item.hbs +2 -2
  9. package/dist/views/components/event/event_details.hbs +2 -2
  10. package/dist/views_static/components/button/utilities/button_variation_classes.hbs +4 -4
  11. package/dist/views_static/components/event/calendar/event_calendar_footer.hbs +1 -1
  12. package/dist/views_static/components/event/calendar/event_calendar_nav.hbs +6 -6
  13. package/dist/views_static/components/event/calendar/event_calendar_nav_item.hbs +2 -2
  14. package/dist/views_static/components/event/event_details.hbs +2 -2
  15. package/package.json +1 -1
  16. package/src/stories/views/components/button/utilities/button_variation_classes.hbs +4 -4
  17. package/src/stories/views/components/event/calendar/event_calendar_footer.hbs +1 -1
  18. package/src/stories/views/components/event/calendar/event_calendar_nav.hbs +6 -6
  19. package/src/stories/views/components/event/calendar/event_calendar_nav_item.hbs +2 -2
  20. package/src/stories/views/components/event/event_details.hbs +2 -2
  21. package/src/stories/views/components/event/filtererDs.feature.js +11 -11
  22. package/src/stories/views/components/event/nativeScrollDs.feature.js +6 -6
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v1.107.0 (Wed Oct 09 2024)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Feature/dpe 2883 [#1097](https://github.com/mumprod/hr-design-system-handlebars/pull/1097) ([@szuelch](https://github.com/szuelch))
6
+
7
+ #### Authors: 1
8
+
9
+ - [@szuelch](https://github.com/szuelch)
10
+
11
+ ---
12
+
1
13
  # v1.106.0 (Wed Oct 09 2024)
2
14
 
3
15
  #### 🚀 Enhancement
package/dist/assets/index.css CHANGED
@@ -1832,6 +1832,9 @@ article.indexTextDS .indexTextHighlighted .link {
1832
1832
  .min-w-0 {
1833
1833
  min-width: 0px;
1834
1834
  }
1835
+ .min-w-1 {
1836
+ min-width: 0.25rem;
1837
+ }
1835
1838
  .min-w-10 {
1836
1839
  min-width: 2.5rem;
1837
1840
  }
@@ -3336,6 +3339,9 @@ article.indexTextDS .indexTextHighlighted .link {
3336
3339
  .decoration-2 {
3337
3340
  text-decoration-thickness: 2px;
3338
3341
  }
3342
+ .underline-offset-2 {
3343
+ text-underline-offset: 2px;
3344
+ }
3339
3345
  .placeholder-search-footer-text::-webkit-input-placeholder {
3340
3346
  color: #000000;
3341
3347
  color: var(--color-search-footer-text);
@@ -3507,7 +3513,7 @@ article.indexTextDS .indexTextHighlighted .link {
3507
3513
  border-bottom-color: var(--color-secondary-ds);
3508
3514
  }
3509
3515
  .counter-reset {
3510
- counter-reset: cnt1728473692853;
3516
+ counter-reset: cnt1728475005272;
3511
3517
  }
3512
3518
  .placeholder-text-xs::-webkit-input-placeholder {
3513
3519
  font-size: 0.75rem;
@@ -3911,7 +3917,7 @@ article.indexTextDS .indexTextHighlighted .link {
3911
3917
  --tw-ring-color: rgba(255, 255, 255, 0.5);
3912
3918
  }
3913
3919
  .-ordered {
3914
- counter-increment: cnt1728473692853 1;
3920
+ counter-increment: cnt1728475005272 1;
3915
3921
  }
3916
3922
  .-ordered::before {
3917
3923
  position: absolute;
@@ -3927,7 +3933,7 @@ article.indexTextDS .indexTextHighlighted .link {
3927
3933
  letter-spacing: .0125em;
3928
3934
  --tw-text-opacity: 1;
3929
3935
  color: rgba(0, 0, 0, var(--tw-text-opacity));
3930
- content: counter(cnt1728473692853);
3936
+ content: counter(cnt1728475005272);
3931
3937
  }
3932
3938
  /*! ****************************/
3933
3939
  /*! DataPolicy stuff */
@@ -5971,6 +5977,10 @@ input[type='radio']:checked::after {
5971
5977
  .active\:bg-button--dark:active {
5972
5978
  background-color: var(--color-button--dark);
5973
5979
  }
5980
+ .active\:bg-button-inverted:active {
5981
+ background-color: #ffffff;
5982
+ background-color: var(--color-button-inverted);
5983
+ }
5974
5984
  .active\:bg-button-inverted--dark:active {
5975
5985
  background-color: var(--color-button-inverted--dark);
5976
5986
  }
package/dist/assets/js/components/event/filtererDs.feature.js CHANGED
@@ -23,11 +23,11 @@ const Filterer = (context) => {
23
23
  errorDomNodes = hr$(`.${errorClass}`),
24
24
  contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
25
25
  let targetDomNodes = hr$(`.${targetClass}`, rootElement),
26
- currentMonth = document.getElementsByClassName('-currentMonth')[0];
26
+ currentMonth = document.getElementsByClassName('js-currentMonth')[0];
27
27
 
28
- const init = function () {
29
- currentMonth.classList.add('text-white');
30
- currentMonth.classList.add('bg-black');
28
+ const init = function () {
29
+ currentMonth.classList.add('text-white');
30
+ currentMonth.classList.add('bg-black');
31
31
 
32
32
 
33
33
  for (let i = 0; i < triggerDomNodes.length; i++) {
@@ -73,15 +73,15 @@ const Filterer = (context) => {
73
73
 
74
74
  const doSetSelectedFilter = function (e, forceReset) {
75
75
  clearSelected()
76
-
77
-
76
+
77
+
78
78
  let monthWrapper = e.currentTarget.closest('.js-ns-month');
79
- let monthName = monthWrapper.querySelector('.js-monthName');
80
-
79
+ let monthName = monthWrapper.querySelector('.js-monthName');
80
+
81
81
  if (!forceReset) {
82
- e.currentTarget.classList.add(navItemSelectedCssTrigger)
82
+ e.currentTarget.classList.add(navItemSelectedCssTrigger)
83
83
  if (monthWrapper) {
84
-
84
+
85
85
  if (monthName) {
86
86
  monthName.classList.remove('text-gray-scorpion')
87
87
  monthName.classList.remove('bg-white')
@@ -106,7 +106,7 @@ const Filterer = (context) => {
106
106
  currentMonth.classList.add('text-gray-scorpion');
107
107
  currentMonth.classList.add('bg-white');
108
108
 
109
-
109
+
110
110
  triggerDomNodes.forEach(function (triggerDomNode) {
111
111
 
112
112
  // hacky die würde bald verändert
package/dist/assets/js/components/event/nativeScrollDs.feature.js CHANGED
@@ -18,7 +18,7 @@ const NativeScroll = function (context) {
18
18
  }
19
19
  const doScroll = function (e) {
20
20
  let step = scrollbar.clientWidth - oneScrollbarItem.clientWidth * 1.5,
21
- direction = e.currentTarget.classList.contains('-left') ? -1 : 1,
21
+ direction = e.currentTarget.classList.contains('js-left') ? -1 : 1,
22
22
  distance = direction * step
23
23
  console.log(
24
24
  '🚀 ~ file: nativeScroll.feature.js ~ line 22 ~ doScroll ~ direction',
@@ -90,14 +90,14 @@ const NativeScroll = function (context) {
90
90
  : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1
91
91
  }
92
92
 
93
- if (hr$('.js-ns-scroll.-horizontal', rootElement).length > 0) {
94
- scrollbar = hr$('.js-ns-scroll.-horizontal', rootElement)[0]
93
+ if (hr$('.js-ns-scroll.js-horizontal', rootElement).length > 0) {
94
+ scrollbar = hr$('.js-ns-scroll.js-horizontal', rootElement)[0]
95
95
  buttons = hr$('.js-ns-button', rootElement)
96
96
  oneScrollbarItem = hr$('.js-ns-item', rootElement)[0]
97
97
  hasNativeSmoothScroll = isNativeSmoothScrollEnabledOn(scrollbar)
98
- let initiallySelectedMonth = hr$('.js-ns-month.-selected', rootElement)[0]
98
+ let initiallySelectedMonth = hr$('.js-ns-month.js-selected', rootElement)[0]
99
99
  if (!initiallySelectedMonth) {
100
- initiallySelectedMonth = hr$('.js-ns-month.-currentMonth', rootElement)[0]
100
+ initiallySelectedMonth = hr$('.js-ns-month.js-currentMonth', rootElement)[0]
101
101
  }
102
102
 
103
103
  if (initiallySelectedMonth) {
@@ -114,7 +114,7 @@ const NativeScroll = function (context) {
114
114
  }
115
115
  } else {
116
116
  console.log(
117
- 'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.-horizontal'
117
+ 'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.js-horizontal'
118
118
  )
119
119
  }
120
120
  }
package/dist/views/components/button/utilities/button_variation_classes.hbs CHANGED
@@ -2,9 +2,9 @@
2
2
  {{inline-switch
3
3
  _variant
4
4
  '["primary","secondary","tertiary"]'
5
- '[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," secondary border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," tertiary bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
5
+ '[" primary border text-button--dark 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--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
6
6
  ~}}
7
- {{else if _disabled~}}
7
+ {{else if _disabled~}}
8
8
 
9
9
  {{inline-switch
10
10
  _variant
@@ -23,8 +23,8 @@
23
23
  {{~inline-switch
24
24
  _variant
25
25
  '["primary","secondary","tertiary","icon-button"]'
26
- '[" 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-inverted--dark"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted--dark"," border bg-transparent border-transparent text-button active:bg-button-inverted--dark"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
27
- ~}}
26
+ '[" 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-inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted"," border bg-transparent border-transparent text-button active:bg-button-inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
27
+ ~}}
28
28
  {{/if}}
29
29
  {{/if}}
30
30
  {{~#unless _disableButtonPress}} active:scale-95{{/unless}}
package/dist/views/components/event/calendar/event_calendar_footer.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <footer class='bg-event-calendar-primary text-center'>
2
2
  {{#> components/base/link _link=this.link
3
- _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
3
+ _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-2'
4
4
  }}
5
5
  {{loca 'event_calendar_monthly_overview_link'}}
6
6
  {{/components/base/link}}
package/dist/views/components/event/calendar/event_calendar_nav.hbs CHANGED
@@ -1,17 +1,17 @@
1
1
  <nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
2
- <button class="block border-0 ml-4 absolute left-0 min-w-3 min-h-3 top-1/2 js-ns-button -left" aria-hidden="true">
2
+ <button class="block border-0 ml-4 absolute left-0 min-w-1 min-h-3 top-1/2 js-ns-button js-left" aria-hidden="true">
3
3
  {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
4
4
  </button>
5
- <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
5
+ <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button js-right" aria-hidden="true">
6
6
  {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
7
7
  </button>
8
- <div class="flex relative max-w-100vw ml-14 mr-14 overflow-hidden box-border border-teal-600">
9
- <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
8
+ <div class="flex relative ml-14 mr-14 overflow-hidden box-border border-teal-600">
9
+ <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll js-horizontal">
10
10
  {{#each this}}
11
11
  <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
12
- this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
12
+ this.hasFutureEventsFromNow}} js-selected{{else}} js-fr-reload-trigger{{/if}}">
13
13
  <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3 {{#if
14
- this.isCurrentMonth}} -currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
14
+ this.isCurrentMonth}} js-currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
15
15
  <ul class="flex">
16
16
  {{#each this.days}}
17
17
  <li class="inline-block h-full group cursor-pointer js-ns-item{{#if
package/dist/views/components/event/calendar/event_calendar_nav_item.hbs CHANGED
@@ -1,7 +1,7 @@
1
- <a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white -active{{#if this.isFirstAvailable}} -selected js-fr-initial{{/if}}"
1
+ <a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white{{#if this.isFirstAvailable}} js-selected js-fr-initial{{/if}}"
2
2
  data-prop-crit='{{this.date.htmlDate}}'
3
3
  data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
4
4
  href="{{_contentUrl}}">
5
5
  <span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
6
- <span class="block font-serif text-link font-bold text-labelEventCalendarTitle italic text-2xl px-3 pt-1.6 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
6
+ <span class="block font-serif text-link font-bold italic text-2xl px-3 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
7
7
  </a>
package/dist/views/components/event/event_details.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="flex flex-wrap content-center w-full h-full px-2 py-1">
2
2
  {{#with this.startTime}}
3
- <div class="flex grow shrink-1 basis-6/12 align-top p-2">
3
+ <div class="flex grow shrink basis-6/12 align-top p-2">
4
4
  <div class="min-w-3 min-h-3">
5
5
  {{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
6
6
  </div>
@@ -8,7 +8,7 @@
8
8
  </div>
9
9
  {{/with}}
10
10
  {{#with this.venue}}
11
- <div class="flex grow flex-shrink-1 basis-6/12 align-top p-2">
11
+ <div class="flex grow shrink basis-6/12 align-top p-2">
12
12
  <div class="min-w-3 min-h-3">
13
13
  {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
14
14
  </div>
package/dist/views_static/components/button/utilities/button_variation_classes.hbs CHANGED
@@ -2,9 +2,9 @@
2
2
  {{inline-switch
3
3
  _variant
4
4
  '["primary","secondary","tertiary"]'
5
- '[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," secondary border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," tertiary bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
5
+ '[" primary border text-button--dark 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--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
6
6
  ~}}
7
- {{else if _disabled~}}
7
+ {{else if _disabled~}}
8
8
 
9
9
  {{inline-switch
10
10
  _variant
@@ -23,8 +23,8 @@
23
23
  {{~inline-switch
24
24
  _variant
25
25
  '["primary","secondary","tertiary","icon-button"]'
26
- '[" 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-inverted--dark"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted--dark"," border bg-transparent border-transparent text-button active:bg-button-inverted--dark"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
27
- ~}}
26
+ '[" 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-inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted"," border bg-transparent border-transparent text-button active:bg-button-inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
27
+ ~}}
28
28
  {{/if}}
29
29
  {{/if}}
30
30
  {{~#unless _disableButtonPress}} active:scale-95{{/unless}}
package/dist/views_static/components/event/calendar/event_calendar_footer.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <footer class='bg-event-calendar-primary text-center'>
2
2
  {{#> components/base/link _link=this.link
3
- _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
3
+ _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-2'
4
4
  }}
5
5
  {{loca 'event_calendar_monthly_overview_link'}}
6
6
  {{/components/base/link}}
package/dist/views_static/components/event/calendar/event_calendar_nav.hbs CHANGED
@@ -1,17 +1,17 @@
1
1
  <nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
2
- <button class="block border-0 ml-4 absolute left-0 min-w-3 min-h-3 top-1/2 js-ns-button -left" aria-hidden="true">
2
+ <button class="block border-0 ml-4 absolute left-0 min-w-1 min-h-3 top-1/2 js-ns-button js-left" aria-hidden="true">
3
3
  {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
4
4
  </button>
5
- <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
5
+ <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button js-right" aria-hidden="true">
6
6
  {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
7
7
  </button>
8
- <div class="flex relative max-w-100vw ml-14 mr-14 overflow-hidden box-border border-teal-600">
9
- <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
8
+ <div class="flex relative ml-14 mr-14 overflow-hidden box-border border-teal-600">
9
+ <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll js-horizontal">
10
10
  {{#each this}}
11
11
  <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
12
- this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
12
+ this.hasFutureEventsFromNow}} js-selected{{else}} js-fr-reload-trigger{{/if}}">
13
13
  <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3 {{#if
14
- this.isCurrentMonth}} -currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
14
+ this.isCurrentMonth}} js-currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
15
15
  <ul class="flex">
16
16
  {{#each this.days}}
17
17
  <li class="inline-block h-full group cursor-pointer js-ns-item{{#if
package/dist/views_static/components/event/calendar/event_calendar_nav_item.hbs CHANGED
@@ -1,7 +1,7 @@
1
- <a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white -active{{#if this.isFirstAvailable}} -selected js-fr-initial{{/if}}"
1
+ <a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white{{#if this.isFirstAvailable}} js-selected js-fr-initial{{/if}}"
2
2
  data-prop-crit='{{this.date.htmlDate}}'
3
3
  data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
4
4
  href="{{_contentUrl}}">
5
5
  <span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
6
- <span class="block font-serif text-link font-bold text-labelEventCalendarTitle italic text-2xl px-3 pt-1.6 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
6
+ <span class="block font-serif text-link font-bold italic text-2xl px-3 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
7
7
  </a>
package/dist/views_static/components/event/event_details.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="flex flex-wrap content-center w-full h-full px-2 py-1">
2
2
  {{#with this.startTime}}
3
- <div class="flex grow shrink-1 basis-6/12 align-top p-2">
3
+ <div class="flex grow shrink basis-6/12 align-top p-2">
4
4
  <div class="min-w-3 min-h-3">
5
5
  {{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
6
6
  </div>
@@ -8,7 +8,7 @@
8
8
  </div>
9
9
  {{/with}}
10
10
  {{#with this.venue}}
11
- <div class="flex grow flex-shrink-1 basis-6/12 align-top p-2">
11
+ <div class="flex grow shrink basis-6/12 align-top p-2">
12
12
  <div class="min-w-3 min-h-3">
13
13
  {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
14
14
  </div>
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.106.0",
9
+ "version": "1.107.0",
10
10
  "scripts": {
11
11
  "test": "echo \"Error: no test specified\" && exit 1",
12
12
  "storybook": "storybook dev -p 6006 public",
package/src/stories/views/components/button/utilities/button_variation_classes.hbs CHANGED
@@ -2,9 +2,9 @@
2
2
  {{inline-switch
3
3
  _variant
4
4
  '["primary","secondary","tertiary"]'
5
- '[" primary border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "," secondary border text-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:text-button--dark active:text-button active:bg-button-inverted--dark "," tertiary bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
5
+ '[" primary border text-button--dark 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--dark active:text-button active:bg-button-inverted--dark "," bg-transparent border-transparent text-button-inverted hover:bg-button-inverted--dark hover:text-button--dark hover:border-button-inverted--dark active:text-button active:bg-button-inverted--dark ","border text-button--dark bg-button-inverted border-button-inverted hover:bg-button-inverted--dark hover:border-button-inverted--dark active:bg-button-inverted--dark "]'
6
6
  ~}}
7
- {{else if _disabled~}}
7
+ {{else if _disabled~}}
8
8
 
9
9
  {{inline-switch
10
10
  _variant
@@ -23,8 +23,8 @@
23
23
  {{~inline-switch
24
24
  _variant
25
25
  '["primary","secondary","tertiary","icon-button"]'
26
- '[" 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-inverted--dark"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted--dark"," border bg-transparent border-transparent text-button active:bg-button-inverted--dark"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
27
- ~}}
26
+ '[" 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-inverted"," border bg-transparent border-transparent text-button hover:bg-button-inverted hover:border-button active:bg-button-inverted"," border bg-transparent border-transparent text-button active:bg-button-inverted"," border text-button-inverted bg-button border-button hover:bg-button--dark hover:border-button--dark active:bg-button--dark "]'
27
+ ~}}
28
28
  {{/if}}
29
29
  {{/if}}
30
30
  {{~#unless _disableButtonPress}} active:scale-95{{/unless}}
package/src/stories/views/components/event/calendar/event_calendar_footer.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <footer class='bg-event-calendar-primary text-center'>
2
2
  {{#> components/base/link _link=this.link
3
- _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-3'
3
+ _css='block p-2 text-white text-sm font-serif hover:underline underline-offset-2'
4
4
  }}
5
5
  {{loca 'event_calendar_monthly_overview_link'}}
6
6
  {{/components/base/link}}
package/src/stories/views/components/event/calendar/event_calendar_nav.hbs CHANGED
@@ -1,17 +1,17 @@
1
1
  <nav class="relative border-b border-event-calendar-secondary js-load" data-hr-native-scroll-ds='{"isTeaser":"true"}'>
2
- <button class="block border-0 ml-4 absolute left-0 min-w-3 min-h-3 top-1/2 js-ns-button -left" aria-hidden="true">
2
+ <button class="block border-0 ml-4 absolute left-0 min-w-1 min-h-3 top-1/2 js-ns-button js-left" aria-hidden="true">
3
3
  {{> components/base/image/icon _icon="arrow-left" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
4
4
  </button>
5
- <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button -right" aria-hidden="true">
5
+ <button class="block border-0 mr-4 absolute right-0 min-w-3 min-h-3 top-1/2 js-ns-button js-right" aria-hidden="true">
6
6
  {{> components/base/image/icon _icon="arrow-right" _iconmap="icons" _addClass="w-5 h-5 fill-current" }}
7
7
  </button>
8
- <div class="flex relative max-w-100vw ml-14 mr-14 overflow-hidden box-border border-teal-600">
9
- <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
8
+ <div class="flex relative ml-14 mr-14 overflow-hidden box-border border-teal-600">
9
+ <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll js-horizontal">
10
10
  {{#each this}}
11
11
  <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
12
- this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
12
+ this.hasFutureEventsFromNow}} js-selected{{else}} js-fr-reload-trigger{{/if}}">
13
13
  <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3 {{#if
14
- this.isCurrentMonth}} -currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
14
+ this.isCurrentMonth}} js-currentMonth{{else}}text-gray-scorpion{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
15
15
  <ul class="flex">
16
16
  {{#each this.days}}
17
17
  <li class="inline-block h-full group cursor-pointer js-ns-item{{#if
package/src/stories/views/components/event/calendar/event_calendar_nav_item.hbs CHANGED
@@ -1,7 +1,7 @@
1
- <a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white -active{{#if this.isFirstAvailable}} -selected js-fr-initial{{/if}}"
1
+ <a class="js-fr-trigger js-noStateManager block h-full pt-2 pb-2.5 focus:bg-black focus:text-white focus-visible:outline-none hover:bg-black hover:text-white{{#if this.isFirstAvailable}} js-selected js-fr-initial{{/if}}"
2
2
  data-prop-crit='{{this.date.htmlDate}}'
3
3
  data-prop-filterer='{"crit":"{{this.date.htmlDate}}","strat":["hobid"]}'
4
4
  href="{{_contentUrl}}">
5
5
  <span class="block font-serif italic text-center font-bold uppercase pb-2 px-3 text-sm">{{this.date.weekdayNameShort}}</span>
6
- <span class="block font-serif text-link font-bold text-labelEventCalendarTitle italic text-2xl px-3 pt-1.6 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
6
+ <span class="block font-serif text-link font-bold italic text-2xl px-3 pb-0 group-hover:text-white group-focus:text-white group-focus-within:text-white">{{this.date.day}}</span>
7
7
  </a>
package/src/stories/views/components/event/event_details.hbs CHANGED
@@ -1,6 +1,6 @@
1
1
  <div class="flex flex-wrap content-center w-full h-full px-2 py-1">
2
2
  {{#with this.startTime}}
3
- <div class="flex grow shrink-1 basis-6/12 align-top p-2">
3
+ <div class="flex grow shrink basis-6/12 align-top p-2">
4
4
  <div class="min-w-3 min-h-3">
5
5
  {{> components/base/image/icon _icon="clock" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
6
6
  </div>
@@ -8,7 +8,7 @@
8
8
  </div>
9
9
  {{/with}}
10
10
  {{#with this.venue}}
11
- <div class="flex grow flex-shrink-1 basis-6/12 align-top p-2">
11
+ <div class="flex grow shrink basis-6/12 align-top p-2">
12
12
  <div class="min-w-3 min-h-3">
13
13
  {{> components/base/image/icon _icon="ortsmarke" _iconmap="icons" _addClass="w-5 h-5 fill-event-calendar-secondary" }}
14
14
  </div>
package/src/stories/views/components/event/filtererDs.feature.js CHANGED
@@ -23,11 +23,11 @@ const Filterer = (context) => {
23
23
  errorDomNodes = hr$(`.${errorClass}`),
24
24
  contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
25
25
  let targetDomNodes = hr$(`.${targetClass}`, rootElement),
26
- currentMonth = document.getElementsByClassName('-currentMonth')[0];
26
+ currentMonth = document.getElementsByClassName('js-currentMonth')[0];
27
27
 
28
- const init = function () {
29
- currentMonth.classList.add('text-white');
30
- currentMonth.classList.add('bg-black');
28
+ const init = function () {
29
+ currentMonth.classList.add('text-white');
30
+ currentMonth.classList.add('bg-black');
31
31
 
32
32
 
33
33
  for (let i = 0; i < triggerDomNodes.length; i++) {
@@ -73,15 +73,15 @@ const Filterer = (context) => {
73
73
 
74
74
  const doSetSelectedFilter = function (e, forceReset) {
75
75
  clearSelected()
76
-
77
-
76
+
77
+
78
78
  let monthWrapper = e.currentTarget.closest('.js-ns-month');
79
- let monthName = monthWrapper.querySelector('.js-monthName');
80
-
79
+ let monthName = monthWrapper.querySelector('.js-monthName');
80
+
81
81
  if (!forceReset) {
82
- e.currentTarget.classList.add(navItemSelectedCssTrigger)
82
+ e.currentTarget.classList.add(navItemSelectedCssTrigger)
83
83
  if (monthWrapper) {
84
-
84
+
85
85
  if (monthName) {
86
86
  monthName.classList.remove('text-gray-scorpion')
87
87
  monthName.classList.remove('bg-white')
@@ -106,7 +106,7 @@ const Filterer = (context) => {
106
106
  currentMonth.classList.add('text-gray-scorpion');
107
107
  currentMonth.classList.add('bg-white');
108
108
 
109
-
109
+
110
110
  triggerDomNodes.forEach(function (triggerDomNode) {
111
111
 
112
112
  // hacky die würde bald verändert
package/src/stories/views/components/event/nativeScrollDs.feature.js CHANGED
@@ -18,7 +18,7 @@ const NativeScroll = function (context) {
18
18
  }
19
19
  const doScroll = function (e) {
20
20
  let step = scrollbar.clientWidth - oneScrollbarItem.clientWidth * 1.5,
21
- direction = e.currentTarget.classList.contains('-left') ? -1 : 1,
21
+ direction = e.currentTarget.classList.contains('js-left') ? -1 : 1,
22
22
  distance = direction * step
23
23
  console.log(
24
24
  '🚀 ~ file: nativeScroll.feature.js ~ line 22 ~ doScroll ~ direction',
@@ -90,14 +90,14 @@ const NativeScroll = function (context) {
90
90
  : (time - 1) * (2 * time - 2) * (2 * time - 2) + 1
91
91
  }
92
92
 
93
- if (hr$('.js-ns-scroll.-horizontal', rootElement).length > 0) {
94
- scrollbar = hr$('.js-ns-scroll.-horizontal', rootElement)[0]
93
+ if (hr$('.js-ns-scroll.js-horizontal', rootElement).length > 0) {
94
+ scrollbar = hr$('.js-ns-scroll.js-horizontal', rootElement)[0]
95
95
  buttons = hr$('.js-ns-button', rootElement)
96
96
  oneScrollbarItem = hr$('.js-ns-item', rootElement)[0]
97
97
  hasNativeSmoothScroll = isNativeSmoothScrollEnabledOn(scrollbar)
98
- let initiallySelectedMonth = hr$('.js-ns-month.-selected', rootElement)[0]
98
+ let initiallySelectedMonth = hr$('.js-ns-month.js-selected', rootElement)[0]
99
99
  if (!initiallySelectedMonth) {
100
- initiallySelectedMonth = hr$('.js-ns-month.-currentMonth', rootElement)[0]
100
+ initiallySelectedMonth = hr$('.js-ns-month.js-currentMonth', rootElement)[0]
101
101
  }
102
102
 
103
103
  if (initiallySelectedMonth) {
@@ -114,7 +114,7 @@ const NativeScroll = function (context) {
114
114
  }
115
115
  } else {
116
116
  console.log(
117
- 'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.-horizontal'
117
+ 'Kein NativeScroll Element gefunden:' + rootElement + ' .js-ns-scroll.js-horizontal'
118
118
  )
119
119
  }
120
120
  }