hr-design-system-handlebars 1.102.6 → 1.103.0

package/.storybook/main.js

@@ -24,6 +24,9 @@ const config = {
             name: '@storybook/addon-docs',
             options: {
                 mdxPluginOptions: {
+                    mdxCompileOptions: {
+                        remarkPlugins: [remarkGfm],
+                    },
                 },
             },
         },

package/.storybook/preview-head.html

@@ -1,6 +1,9 @@
 <script src="vendor/modernizr/modernizr.cust.js"></script>
 
 <script>
+    var pageDisplayConfig = {
+        'site_level2_id': 1
+    }
     //  to be sure hyphems work correctly lang Attribute needs to be "de"
     //  see: https://github.com/storybookjs/storybook/issues/11706
     document.documentElement.setAttribute('lang', 'de')

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.103.0 (Mon Sep 30 2024)
+
+#### 🚀 Enhancement
+
+- Feature/DPE-3325 Snapshot stories [#1068](https://github.com/mumprod/hr-design-system-handlebars/pull/1068) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.102.6 (Mon Sep 30 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1074,6 +1074,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .\!static {
   position: static !important;
 }
@@ -1787,6 +1790,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .w-\[50px\] {
   width: 50px;
 }
+.w-\[724px\] {
+  width: 724px;
+}
 .w-\[9px\] {
   width: 9px;
 }
@@ -2080,6 +2086,9 @@ article.indexTextDS .indexTextHighlighted .link {
 .gap-5 {
   gap: 1.25rem;
 }
+.gap-8 {
+  gap: 2rem;
+}
 .gap-x-1 {
   -moz-column-gap: 0.25rem;
        column-gap: 0.25rem;
@@ -3495,7 +3504,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1727685919490;
+  counter-reset: cnt1727686885501;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3903,7 +3912,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1727685919490 1;
+  counter-increment: cnt1727686885501 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3919,7 +3928,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1727685919490);
+  content: counter(cnt1727686885501);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/utils.js

@@ -0,0 +1,73 @@
+/**
+ * Generates a template for rendering snapshots.
+ * 
+ * @param {Object} args - The arguments for generating the template.
+ * @param {Object} args.hbsTemplates - The Handlebars templates object.
+ * @param {Object} args.args - The snapshots JSON object.
+ * @returns {string} - The generated template.
+ */
+const getSnapshotsTemplate = (args) => {
+    const { hbsTemplates, args: snapshotsJson } = args
+    console.log("SnapshotsJson First", snapshotsJson)
+    const config = snapshotsJson.config || {}
+    const renderAsGrid = undefined !== config.layout && "grid" === config.layout
+    const renderSnapshotsWrapper = undefined !== config.renderSnapshotsWrapper ? config.renderSnapshotsWrapper : true
+    const snapshotGroups = Object.entries(snapshotsJson).filter(([key, value]) =>
+        key.includes("group"))
+    const hasSnapshotGroups = snapshotGroups.length > 0
+    const snapshotsWrapperStart = renderSnapshotsWrapper ? hasSnapshotGroups ? `<div${renderAsGrid ? ` class="grid grid-page"` : ''}">` : renderAsGrid ? '<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">' : '<div class="flex flex-auto flex-wrap gap-8">' : ''
+    const snapshotsWrapperEnd = renderSnapshotsWrapper ? `</div>${hasSnapshotGroups && renderAsGrid ? '</div>' : ''}` : ''
+    let template = ''
+    if (hasSnapshotGroups) {
+        template += snapshotsWrapperStart
+
+        snapshotGroups.forEach(([key, value]) => {
+            template += renderAsGrid ? '<div class="grid grid-cols-12 pt-5 md:pt-7 sm:px-10 col-full sm:col-main gap-x-6 gap-y-10 md:gap-y-14"><div class="grid grid-cols-12 items-start bg-white content-start gap-y-5 col-span-12 gap-x-6">' : '<div class="flex flex-auto flex-wrap gap-8">'
+            const filteredSnapshots = Object.entries(value).filter(([key, value]) =>
+                (value.config === undefined || value.config.useAsSnapshot !== false)
+            )
+            template += renderSnapshots(filteredSnapshots, hbsTemplates, config.template, config.path, renderSnapshotsWrapper)
+            template += `</div>${renderAsGrid ? '</div>' : ''}`
+        })
+        template += snapshotsWrapperEnd
+    } else {
+        console.log("SnapshotsJson", snapshotsJson)
+        const filteredSnapshots = Object.entries(snapshotsJson).filter(([key, value]) =>
+            key !== "config" && (value.config === undefined || value.config.useAsSnapshot !== false)
+        )
+        template += snapshotsWrapperStart
+        template += renderSnapshots(filteredSnapshots, hbsTemplates, config.template, config.path, renderSnapshotsWrapper)
+        template += snapshotsWrapperEnd
+    }
+    return template
+}
+
+const renderSnapshots = (snapshots, hbsTemplates, defaultTemplate, defaultPath, renderSnapshotsWrapper) => {
+    let template = ''
+    console.log("Snapshots", snapshots)
+    snapshots.forEach(([key, value]) => {
+        const snapshotItemConfig = value.config || {}
+        const renderSnapshotItemWrapper = undefined !== snapshotItemConfig.renderSnapshotItemWrapper ? snapshotItemConfig.renderSnapshotItemWrapper : true
+        const path = snapshotItemConfig.path ? `${snapshotItemConfig.path}` : (defaultPath ? `${defaultPath}` : "args")
+        const snapshotTemplateName = snapshotItemConfig.template || defaultTemplate || "no-template"
+
+        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+            template += `<div${snapshotItemConfig.css ? ` class="${snapshotItemConfig.css}"` : ''}>`
+        }
+
+        template += hbsTemplates[snapshotTemplateName](resolveObjectFromPath(path, value));
+
+        if (renderSnapshotsWrapper && renderSnapshotItemWrapper) {
+            template += '</div>';
+        }
+    })
+    return template
+}
+
+const resolveObjectFromPath = (path, obj) => {
+    return path.split('.').reduce(function (prev, curr) {
+        return prev ? prev[curr] : null
+    }, obj || self)
+}
+
+export { getSnapshotsTemplate }

package/dist/views/components/page/index/page_test_story.hbs

@@ -21,7 +21,7 @@
     
     {{#unless _webview}}
         {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav _hasBannerImage=this.hasBannerImage}}
-            {{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
+            {{> components/navigation/breadcrumb/breadcrumb this _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
         {{/components/banner/header/breadcrumb_wrapper }}   
     {{/unless}}
 

package/dist/views_static/components/page/index/page_test_story.hbs

@@ -21,7 +21,7 @@
     
     {{#unless _webview}}
         {{#> components/banner/header/breadcrumb_wrapper _hasContentNav=this.structureNav.contentNav _hasBannerImage=this.hasBannerImage}}
-            {{> components/navigation/breadcrumb/breadcrumb this.breadcrumb _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
+            {{> components/navigation/breadcrumb/breadcrumb this _currentPageUrl=this.url _currentPageTitle=this.breadcrumbTitle }}
         {{/components/banner/header/breadcrumb_wrapper }}   
     {{/unless}}
 

package/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "main": "dist/index.js",
   "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-  "version": "1.102.6",
+  "version": "1.103.0",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006 public",
@@ -99,7 +99,7 @@
     "postcss-preset-env": "^7.3.1",
     "prettier": "^2.2.1",
     "raw-loader": "^4.0.2",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "rimraf": "^3.0.2",
     "storybook": "^8.2.6",
     "storybook-conditional-toolbar-selector": "^1.0.3",

package/src/assets/fixtures/banner/banner.json

@@ -1,5 +1,5 @@
 {
-    "bannerImage":{
+    "bannerImage": {
         "@->jsoninclude": "banner/bannerImages.inc.json",
         "@->contentpath": "banner",
         "@->replaceToken": [
@@ -9,15 +9,15 @@
             }
         ]
     },
-    "structureNav":{
-        "contentNav":{
-            "@->jsoninclude": "banner/structureNav.json", 
+    "structureNav": {
+        "contentNav": {
+            "@->jsoninclude": "banner/structureNav.json",
             "@->contentpath": "contentNav"
         }
     },
-    "breadcrumbSsi":{
+    "breadcrumbSsi": {
         "@->jsoninclude": "navigation/breadcrumb/breadcrumb.inc.json",
-        "@->contentpath": "breadcrumb.breadcrumb.breadcrumbSsi",
+        "@->contentpath": "breadcrumb.breadcrumbSsi",
         "@->overrides": [
             {
                 "@->contentpath": "breadcrumb",
@@ -34,4 +34,4 @@
             }
         ]
     }
-}
+}

package/src/assets/fixtures/button/button.json

@@ -0,0 +1,142 @@
+{
+    "button-sm": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_size": "sm",
+            "_label": "Small"
+        }
+    },
+    "button-md": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_size": "md",
+            "_label": "Medium"
+        }
+    },
+    "button-lg": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Large",
+            "_size": "lg"
+        }
+    },
+    "button-primary": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Primary",
+            "_size": "lg"
+        }
+    },
+    "button-secondary": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Secondary",
+            "_size": "lg",
+            "_variant": "secondary"
+        }
+    },
+    "button-tertiary": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Tertiary",
+            "_size": "lg",
+            "_variant": "tertiary"
+        }
+    },
+    "button-primary-disabled": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Primary Disabled",
+            "_size": "lg",
+            "_disabled": true
+        }
+    },
+    "button-secondary-disabled": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Secondary Disabled",
+            "_size": "lg",
+            "_variant": "secondary",
+            "_disabled": true
+        }
+    },
+    "button-tertiary-disabled": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Tertiary Disabled",
+            "_size": "lg",
+            "_variant": "tertiary",
+            "_disabled": true
+        }
+    },
+    "button-icon-right": {
+        "config": {
+            "template": "buttonWithLabelAndIconRight"
+        },
+        "args": {
+            "_label": "Icon rechts",
+            "_size": "lg",
+            "_icon": "arrow-right"
+        }
+    },
+    "button-icon-left": {
+        "config": {
+            "template": "buttonWithLabelAndIconLeft"
+        },
+        "args": {
+            "_label": "Icon left",
+            "_size": "lg",
+            "_icon": "arrow-left"
+        }
+    },
+    "button-primary-background": {
+        "config": {
+            "template": "buttonWithLabelOnBackground"
+        },
+        "args": {
+            "_label": "Primary",
+            "_size": "lg",
+            "_onBackground": true
+        }
+    },
+    "button-secondary-background": {
+        "config": {
+            "template": "buttonWithLabelOnBackground"
+        },
+        "args": {
+            "_label": "Secondary",
+            "_variant": "secondary",
+            "_size": "lg",
+            "_onBackground": true
+        }
+    },
+    "button-tertiary-background": {
+        "config": {
+            "template": "buttonWithLabelOnBackground"
+        },
+        "args": {
+            "_label": "Tertiary",
+            "_variant": "tertiary",
+            "_size": "lg",
+            "_onBackground": true
+        }
+    }
+}

package/src/assets/fixtures/button/link_button.json

@@ -0,0 +1,153 @@
+{
+    "button-sm": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_size": "sm",
+            "_label": "Small"
+        }
+    },
+    "button-md": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_size": "md",
+            "_label": "Medium"
+        }
+    },
+    "button-lg": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Large",
+            "_size": "lg"
+        }
+    },
+    "button-primary": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Primary",
+            "_size": "lg"
+        }
+    },
+    "button-secondary": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Secondary",
+            "_size": "lg",
+            "_variant": "secondary"
+        }
+    },
+    "button-secondary-on-white": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Secondary",
+            "_size": "lg",
+            "_variant": "secondary",
+            "_onWhite": true
+        }
+    },
+    "button-tertiary": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Tertiary",
+            "_size": "lg",
+            "_variant": "tertiary"
+        }
+    },
+    "button-primary-disabled": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Primary Disabled",
+            "_size": "lg",
+            "_disabled": true
+        }
+    },
+    "button-secondary-disabled": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Secondary Disabled",
+            "_size": "lg",
+            "_variant": "secondary",
+            "_disabled": true
+        }
+    },
+    "button-tertiary-disabled": {
+        "config": {
+            "template": "buttonWithLabel"
+        },
+        "args": {
+            "_label": "Tertiary Disabled",
+            "_size": "lg",
+            "_variant": "tertiary",
+            "_disabled": true
+        }
+    },
+    "button-icon-right": {
+        "config": {
+            "template": "buttonWithLabelAndIconRight"
+        },
+        "args": {
+            "_label": "Icon rechts",
+            "_size": "lg",
+            "_icon": "arrow-right"
+        }
+    },
+    "button-icon-left": {
+        "config": {
+            "template": "buttonWithLabelAndIconLeft"
+        },
+        "args": {
+            "_label": "Icon left",
+            "_size": "lg",
+            "_icon": "arrow-left"
+        }
+    },
+    "button-primary-background": {
+        "config": {
+            "template": "buttonWithLabelOnBackground"
+        },
+        "args": {
+            "_label": "Primary",
+            "_size": "lg",
+            "_onBackground": true
+        }
+    },
+    "button-secondary-background": {
+        "config": {
+            "template": "buttonWithLabelOnBackground"
+        },
+        "args": {
+            "_label": "Secondary",
+            "_variant": "secondary",
+            "_size": "lg",
+            "_onBackground": true
+        }
+    },
+    "button-tertiary-background": {
+        "config": {
+            "template": "buttonWithLabelOnBackground"
+        },
+        "args": {
+            "_label": "Tertiary",
+            "_variant": "tertiary",
+            "_size": "lg",
+            "_onBackground": true
+        }
+    }
+}

package/src/assets/fixtures/label/label.json

@@ -0,0 +1,65 @@
+{
+    "config": {
+        "template": "label"
+    },
+    "label-download": {
+        "args": {
+            "_type": "download",
+            "_text": "Download"
+        }
+    },
+    "label-breakingnews": {
+        "args": {
+            "_type": "breakingnews",
+            "_text": "Eilmeldung"
+        }
+    },
+    "label-event": {
+        "args": {
+            "_type": "event",
+            "_text": "Event"
+        }
+    },
+    "label-infografik": {
+        "args": {
+            "_type": "infografik",
+            "_text": "Infografik"
+        }
+    },
+    "label-comment": {
+        "args": {
+            "_type": "comment",
+            "_text": "Kommentar"
+        }
+    },
+    "label-liveticker": {
+        "args": {
+            "_type": "liveticker",
+            "_text": "Liveticker"
+        }
+    },
+    "label-media": {
+        "args": {
+            "_type": "media",
+            "_text": "Media"
+        }
+    },
+    "label-pm": {
+        "args": {
+            "_type": "pm",
+            "_text": "Pressemitteilung"
+        }
+    },
+    "label-program": {
+        "args": {
+            "_type": "program",
+            "_text": "Sendung"
+        }
+    },
+    "label-kurzmeldung": {
+        "args": {
+            "_type": "kurzmeldung",
+            "_text": "Kurzmeldung"
+        }
+    }
+}

package/src/assets/fixtures/mediaplayer/mediaplayer_button.json

@@ -0,0 +1,40 @@
+{
+    "config": {
+        "template": "button"
+    },
+    "button-video": {
+        "args": {
+            "_icon": "play_button",
+            "_label": "Video",
+            "_isLivestream": false
+        }
+    },
+    "button-audio": {
+        "args": {
+            "_icon": "audio_button",
+            "_label": "Audio",
+            "_isLivestream": false
+        }
+    },
+    "button-podcast": {
+        "args": {
+            "_icon": "podcast-button",
+            "_label": "Podcast",
+            "_isLivestream": false
+        }
+    },
+    "button-video-livestream": {
+        "args": {
+            "_icon": "play_button",
+            "_label": "Video - Livestream",
+            "_isLivestream": true
+        }
+    },
+    "button-audio-livestream": {
+        "args": {
+            "_icon": "audio_button",
+            "_label": "Audio - Livestream",
+            "_isLivestream": true
+        }
+    }
+}