hr-design-system-handlebars 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.9.0 (Mon Mar 13 2023)
+
+#### 🚀 Enhancement
+
+- Bugfix/dpe 2186 [#582](https://github.com/mumprod/hr-design-system-handlebars/pull/582) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
+# v1.8.1 (Fri Mar 10 2023)
+
+#### 🐛 Bug Fix
+
+- Bugfix/dpe 2182 [#581](https://github.com/mumprod/hr-design-system-handlebars/pull/581) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.8.0 (Thu Mar 09 2023)
 
 #### 🚀 Enhancement

package/build/handlebars/helpers/handlebar-helpers.js

@@ -420,7 +420,18 @@ var helpers = {
     },
 
     'configProperty': function () {
-        return null
+        let configProperty = ''
+
+        if (arguments.length >= 1) {
+            configProperty = arguments[0]
+            switch (configProperty) {
+                case 'dialogPolyfill.baseUrl':
+                    configProperty = 'vendor/dialog-polyfill'
+            }
+        } else {
+            configProperty = 'No config-property defined.'
+        }
+        return new handlebars.SafeString(configProperty)
     },
 
     'addCacheEntry': function () {

package/dist/assets/index.css

@@ -2667,7 +2667,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1678366048025;
+  counter-reset: cnt1678716136265;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2901,7 +2901,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1678366048025 1;
+  counter-increment: cnt1678716136265 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2917,7 +2917,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1678366048025);
+  content: counter(cnt1678716136265);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/assets/js/components/modal/modal.feature.js

@@ -1,9 +1,11 @@
-import { hr$, listen, unlisten } from 'hrQuery'
+import { hr$, listen, unlisten, addLink } from 'hrQuery'
 import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import dialogPolyfill from 'dialog-polyfill'
 
 const Modal = (context) => {
     const { options } = context,
         { element: rootElement } = context,
+        dialogPolyfillBaseUrl = options.dialogPolyfillBaseUrl || 'vendor/dialog-polyfill',
         modalTriggerId = options.modalTriggerId ? '#' + options.modalTriggerId : '',
         modalTrigger = hr$(modalTriggerId)[0],
         modalCloseTriggers = hr$('.js-modal-close', rootElement),
@@ -20,8 +22,18 @@ const Modal = (context) => {
         })
     }
 
+    const configurePolyfillIfNeeded = () => {
+        if (undefined == modal.showModal) {
+            addLink('dialog-polyfill-css', `${dialogPolyfillBaseUrl}/dialog-polyfill.css`, {
+                type: 'text/css',
+                rel: 'stylesheet',
+            })
+        }
+        dialogPolyfill.registerDialog(modal)
+    }
+
     const clickTracking = () => {
-        console.log("tracking")
+        console.log('tracking')
         uxAction(trackingInformations)
     }
 
@@ -41,6 +53,7 @@ const Modal = (context) => {
         modal.close()
     }
 
+    configurePolyfillIfNeeded()
     configureEventListeners()
 }
 

package/dist/assets/js/generic/hrQuery.subfeature.js

@@ -358,6 +358,28 @@ const loadScript = function (id, scriptUrl, async, callback) {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+const addLink = function (id, url, config) {
+    if (document.getElementById(id)) return
+
+    let linkTag = document.createElement('link')
+    linkTag.id = id
+    linkTag.href = url
+    if (config.type) {
+        linkTag.type = config.type
+    }
+    if (config.rel) {
+        linkTag.rel = config.rel
+    }
+    if (config.title) {
+        linkTag.title = config.title
+    }
+    if (config.as) {
+        linkTag.as = config.as
+    }
+
+    document.getElementsByTagName('head')[0].appendChild(linkTag)
+}
+
 /*
  * Fügt ein "style" bereich zum dokument hinzu
  * und gibt eine referenz darauf zurück
@@ -445,6 +467,7 @@ const clearRequestInterval = (handle) =>
         : window.clearInterval(handle)
 
 export {
+    addLink,
     addStyle,
     hr$,
     stripTags,

package/dist/assets/vendor/dialog-polyfill/dialog-polyfill.css

@@ -0,0 +1,39 @@
+dialog {
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%);
+    left: 0;
+    right: 0;
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    height: -moz-fit-content;
+    height: -webkit-fit-content;
+    height: fit-content;
+    margin: auto;
+    padding: 1em;
+    background: white;
+    color: black;
+    display: block;
+}
+
+dialog:not([open]) {
+    display: none;
+}
+
+dialog + .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(96, 96, 96, 0.9);
+}
+
+._dialog_overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

package/dist/views/components/modal/modal.hbs

@@ -1,4 +1,4 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.title}} Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}"}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.title}} Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{configProperty "dialogPolyfill.baseUrl"}}"}'>
     <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/dist/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,12 +18,12 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
-                <li class="{{~#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.8.0",
+    "version": "1.9.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",
@@ -95,6 +95,7 @@
         "@tailwindcss/line-clamp": "^0.4.2",
         "alpinejs": "^3.8.1",
         "async-alpine": "^1.0.0",
+        "dialog-polyfill": "^0.5.6",
         "tailwindcss-counter": "^1.1.3"
     },
     "prettier": {

package/src/assets/vendor/dialog-polyfill/dialog-polyfill.css

@@ -0,0 +1,39 @@
+dialog {
+    position: fixed;
+    top: 50%;
+    transform: translate(0, -50%);
+    left: 0;
+    right: 0;
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    height: -moz-fit-content;
+    height: -webkit-fit-content;
+    height: fit-content;
+    margin: auto;
+    padding: 1em;
+    background: white;
+    color: black;
+    display: block;
+}
+
+dialog:not([open]) {
+    display: none;
+}
+
+dialog + .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(96, 96, 96, 0.9);
+}
+
+._dialog_overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

package/src/stories/views/components/modal/modal.feature.js

@@ -1,9 +1,11 @@
-import { hr$, listen, unlisten } from 'hrQuery'
+import { hr$, listen, unlisten, addLink } from 'hrQuery'
 import { uxAction } from 'base/tracking/atiHelper.subfeature'
+import dialogPolyfill from 'dialog-polyfill'
 
 const Modal = (context) => {
     const { options } = context,
         { element: rootElement } = context,
+        dialogPolyfillBaseUrl = options.dialogPolyfillBaseUrl || 'vendor/dialog-polyfill',
         modalTriggerId = options.modalTriggerId ? '#' + options.modalTriggerId : '',
         modalTrigger = hr$(modalTriggerId)[0],
         modalCloseTriggers = hr$('.js-modal-close', rootElement),
@@ -20,8 +22,18 @@ const Modal = (context) => {
         })
     }
 
+    const configurePolyfillIfNeeded = () => {
+        if (undefined == modal.showModal) {
+            addLink('dialog-polyfill-css', `${dialogPolyfillBaseUrl}/dialog-polyfill.css`, {
+                type: 'text/css',
+                rel: 'stylesheet',
+            })
+        }
+        dialogPolyfill.registerDialog(modal)
+    }
+
     const clickTracking = () => {
-        console.log("tracking")
+        console.log('tracking')
         uxAction(trackingInformations)
     }
 
@@ -41,6 +53,7 @@ const Modal = (context) => {
         modal.close()
     }
 
+    configurePolyfillIfNeeded()
     configureEventListeners()
 }
 

package/src/stories/views/components/modal/modal.hbs

@@ -1,4 +1,4 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.title}} Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}"}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.title}} Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{configProperty "dialogPolyfill.baseUrl"}}"}'>
     <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}

package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs

@@ -1,4 +1,4 @@
-<article class="mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
+<article class="cy-teaser-cluster{{if this.isOrdered '--ordered'}} mx-5 sm:mx-0 col-span-12 grid bg-highlight-1 rounded-tl-hr rounded-br-hr{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}} ">
     <div class="">
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_list.hbs

@@ -18,12 +18,12 @@
     {{/if~}}
     {{~#with this.clusterTeaserItems}}
         {{~#if ../this.isOrdered}}
-            <ol class="mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ol class="cy-teaser-cluster__list mx-5 list-none divide-y divide-white divide-solid counter-reset border-t border-white{{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{else}}
-            <ul class="mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
+            <ul class="cy-teaser-cluster__list mx-5 divide-y divide-white divide-solid border-t border-white {{~#if ../this.showFirstImageOrGenreImage}}{{~inline-switch ../this.realTeaserSize '["100"]' '[" md:-pt-5 md:mx-0 md:pr-5 md:border-none md:basis-1/2-gap-6 lg:basis-2/3-gap-6"]'}}{{/if~}}">
         {{/if}}
             {{~#each this~}}
-                <li class="{{~#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
+                <li class="cy-teaser-cluster__item {{#if ../../this.isOrdered}}-ordered{{/if}} py-3{{#unless ../../this.overviewLink.link}} last-of-type:pb-3{{/unless~}}{{~#if ../../this.showFirstImageOrGenreImage}}{{~inline-switch ../../this.realTeaserSize '["100"]' '[" md:first-of-type:pt-0"]'}}{{/if~}}">
                     {{> components/teaser/cluster/teaser_cluster_item _size=../this.realTeaserSize _ordered=../../this.isOrdered }} 
                 </li>
             {{~/each}}

package/src/stories/views/generic/hrQuery.subfeature.js

@@ -358,6 +358,28 @@ const loadScript = function (id, scriptUrl, async, callback) {
     firstScriptTagInPage.parentNode.insertBefore(scriptTag, firstScriptTagInPage)
 }
 
+const addLink = function (id, url, config) {
+    if (document.getElementById(id)) return
+
+    let linkTag = document.createElement('link')
+    linkTag.id = id
+    linkTag.href = url
+    if (config.type) {
+        linkTag.type = config.type
+    }
+    if (config.rel) {
+        linkTag.rel = config.rel
+    }
+    if (config.title) {
+        linkTag.title = config.title
+    }
+    if (config.as) {
+        linkTag.as = config.as
+    }
+
+    document.getElementsByTagName('head')[0].appendChild(linkTag)
+}
+
 /*
  * Fügt ein "style" bereich zum dokument hinzu
  * und gibt eine referenz darauf zurück
@@ -445,6 +467,7 @@ const clearRequestInterval = (handle) =>
         : window.clearInterval(handle)
 
 export {
+    addLink,
     addStyle,
     hr$,
     stripTags,