hr-design-system-handlebars 1.88.0 → 1.88.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.88.1 (Fri Aug 02 2024)
+
+#### 🐛 Bug Fix
+
+- DPE-3121 Monats-Übersicht im Eventkalender [#1037](https://github.com/mumprod/hr-design-system-handlebars/pull/1037) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
 # v1.88.0 (Thu Aug 01 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1687,6 +1687,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-15\/12 {
   width: 120%;
 }
+.w-16 {
+  width: 4rem;
+}
 .w-2 {
   width: 0.5rem;
 }
@@ -1699,9 +1702,6 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-22 {
   width: 5.5rem;
 }
-.w-24 {
-  width: 6rem;
-}
 .w-3 {
   width: 0.75rem;
 }
@@ -2323,6 +2323,10 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-bg-opacity: 1;
   background-color: rgba(227, 227, 227, var(--tw-bg-opacity));
 }
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
+}
 .bg-black\/\[0\.5\] {
   background-color: rgba(0, 0, 0, 0.5);
 }
@@ -3089,6 +3093,10 @@ article.indexTextDS .indexTextHighlighted .link {
   color: #606060;
   color: var(--color-secondary-ds);
 }
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgba(100, 116, 139, var(--tw-text-opacity));
+}
 .text-stageLink {
   color: #006eb7;
   color: var(--color-stage-link);
@@ -3319,7 +3327,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1722527094501;
+  counter-reset: cnt1722602731623;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3727,7 +3735,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1722527094501 1;
+  counter-increment: cnt1722602731623 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3743,7 +3751,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1722527094501);
+  content: counter(cnt1722602731623);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/event/filtererDs.feature.js

@@ -1,3 +1,4 @@
+import { color } from '@storybook/theming'
 import { pi, uxAction } from 'base/tracking/pianoHelper.subfeature'
 import { hr$, isString, listen, reinitializeFeature, simulateClickOn } from 'hrQuery'
 import $ from 'zepto-modules'
@@ -22,9 +23,14 @@ const Filterer = (context) => {
         errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement),
         errorDomNodes = hr$(`.${errorClass}`),
         contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
-    let targetDomNodes = hr$(`.${targetClass}`, rootElement)
+    let targetDomNodes = hr$(`.${targetClass}`, rootElement),
+         currentMonth = document.getElementsByClassName('-currentMonth')[0];
+
+    const init = function () {          
+            currentMonth.classList.add('text-white');
+            currentMonth.classList.add('bg-black');
+
 
-    const init = function () {
         for (let i = 0; i < triggerDomNodes.length; i++) {
             triggerDomNodes[i].addEventListener('click', doSetSelectedFilter.bind(this))
             triggerDomNodes[i].addEventListener('touch', doSetSelectedFilter.bind(this))
@@ -68,9 +74,22 @@ const Filterer = (context) => {
 
     const doSetSelectedFilter = function (e, forceReset) {
         clearSelected()
-
+        
+        
+        let monthWrapper = e.currentTarget.closest('.js-ns-month');
+        let monthName = monthWrapper.querySelector('.js-monthName');    
+       
         if (!forceReset) {
-            e.currentTarget.classList.add(navItemSelectedCssTrigger)
+            e.currentTarget.classList.add(navItemSelectedCssTrigger)      
+            if (monthWrapper) {
+                
+                if (monthName) {
+                    monthName.classList.remove('text-slate-500')
+                    monthName.classList.remove('bg-white')
+                    monthName.classList.add('text-white');
+                    monthName.classList.add('bg-black');
+                }
+            }
         }
 
         //hacky weil e beim start auch kein Event sein kann
@@ -82,7 +101,20 @@ const Filterer = (context) => {
     const clearSelected = function () {
         let triggerDomNodes = hr$(`.${triggerClass}.${navItemSelectedCssTrigger}`, rootElement)
 
+        // hacky die würde bald verändert
+        currentMonth.classList.remove('text-white');
+        currentMonth.classList.remove('bg-black');
+        currentMonth.classList.add('text-slate-500');
+        currentMonth.classList.add('bg-white');
+
+        
         triggerDomNodes.forEach(function (triggerDomNode) {
+
+            // hacky die würde bald verändert
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.remove('text-white');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.remove('bg-black');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.add('text-slate-500');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.add('bg-white');
             triggerDomNode.classList.remove(navItemSelectedCssTrigger)
         })
     }

package/dist/views/components/event/calendar/event_calendar_nav.hbs

@@ -9,9 +9,9 @@
         <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
             {{#each this}}
                 <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
-                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
                     this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
-                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3  {{#if
+                    this.isCurrentMonth}} -currentMonth{{else}}text-slate-500{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
                     <ul class="flex">
                         {{#each this.days}}
                             <li class="inline-block h-full group cursor-pointer js-ns-item{{#if

package/dist/views_static/components/event/calendar/event_calendar_nav.hbs

@@ -9,9 +9,9 @@
         <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
             {{#each this}}
                 <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
-                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
                     this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
-                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3  {{#if
+                    this.isCurrentMonth}} -currentMonth{{else}}text-slate-500{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
                     <ul class="flex">
                         {{#each this.days}}
                             <li class="inline-block h-full group cursor-pointer js-ns-item{{#if

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.88.0",
+  "version": "1.88.1",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",

package/src/stories/views/components/event/calendar/event_calendar_nav.hbs

@@ -9,9 +9,9 @@
         <div class="flex mb-0 overflow-x-auto overflow-y-hidden whitespace-nowrap scroll-smooth js-ns-scroll -horizontal">
             {{#each this}}
                 <div class="inline-block items-center justify-center border-event-calendar-secondary border-l js-ns-month {{#if
-                    this.isCurrentMonth}} -currentMonth{{/if}}{{#if
                     this.hasFutureEventsFromNow}} -selected{{else}} js-fr-reload-trigger{{/if}}">
-                    <span class="block font-heading font-bold w-24 sticky left-0 px-2 py-3">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
+                    <span class="js-monthName block font-heading font-bold w-16 sticky left-0 px-2 py-3  {{#if
+                    this.isCurrentMonth}} -currentMonth{{else}}text-slate-500{{/if}}">{{this.date.monthNameShort}} {{this.date.yearShort}}</span>
                     <ul class="flex">
                         {{#each this.days}}
                             <li class="inline-block h-full group cursor-pointer js-ns-item{{#if

package/src/stories/views/components/event/filtererDs.feature.js

@@ -1,3 +1,4 @@
+import { color } from '@storybook/theming'
 import { pi, uxAction } from 'base/tracking/pianoHelper.subfeature'
 import { hr$, isString, listen, reinitializeFeature, simulateClickOn } from 'hrQuery'
 import $ from 'zepto-modules'
@@ -22,9 +23,14 @@ const Filterer = (context) => {
         errorTargetDomNodes = hr$(`.${errorTargetClass}`, rootElement),
         errorDomNodes = hr$(`.${errorClass}`),
         contentTargetDomNode = hr$(contentTargetClass, rootElement)[0]
-    let targetDomNodes = hr$(`.${targetClass}`, rootElement)
+    let targetDomNodes = hr$(`.${targetClass}`, rootElement),
+         currentMonth = document.getElementsByClassName('-currentMonth')[0];
+
+    const init = function () {          
+            currentMonth.classList.add('text-white');
+            currentMonth.classList.add('bg-black');
+
 
-    const init = function () {
         for (let i = 0; i < triggerDomNodes.length; i++) {
             triggerDomNodes[i].addEventListener('click', doSetSelectedFilter.bind(this))
             triggerDomNodes[i].addEventListener('touch', doSetSelectedFilter.bind(this))
@@ -68,9 +74,22 @@ const Filterer = (context) => {
 
     const doSetSelectedFilter = function (e, forceReset) {
         clearSelected()
-
+        
+        
+        let monthWrapper = e.currentTarget.closest('.js-ns-month');
+        let monthName = monthWrapper.querySelector('.js-monthName');    
+       
         if (!forceReset) {
-            e.currentTarget.classList.add(navItemSelectedCssTrigger)
+            e.currentTarget.classList.add(navItemSelectedCssTrigger)      
+            if (monthWrapper) {
+                
+                if (monthName) {
+                    monthName.classList.remove('text-slate-500')
+                    monthName.classList.remove('bg-white')
+                    monthName.classList.add('text-white');
+                    monthName.classList.add('bg-black');
+                }
+            }
         }
 
         //hacky weil e beim start auch kein Event sein kann
@@ -82,7 +101,20 @@ const Filterer = (context) => {
     const clearSelected = function () {
         let triggerDomNodes = hr$(`.${triggerClass}.${navItemSelectedCssTrigger}`, rootElement)
 
+        // hacky die würde bald verändert
+        currentMonth.classList.remove('text-white');
+        currentMonth.classList.remove('bg-black');
+        currentMonth.classList.add('text-slate-500');
+        currentMonth.classList.add('bg-white');
+
+        
         triggerDomNodes.forEach(function (triggerDomNode) {
+
+            // hacky die würde bald verändert
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.remove('text-white');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.remove('bg-black');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.add('text-slate-500');
+            triggerDomNode.closest('.js-ns-month').firstElementChild.classList.add('bg-white');
             triggerDomNode.classList.remove(navItemSelectedCssTrigger)
         })
     }