hr-design-system-handlebars 1.102.5 → 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,27 @@
+# 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
+
+- Dpe 3178 d [#1078](https://github.com/mumprod/hr-design-system-handlebars/pull/1078) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.102.5 (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: cnt1727684908502;
+  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: cnt1727684908502 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(cnt1727684908502);
+  content: counter(cnt1727686885501);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/dist/assets/js/components/dataPolicySettings/dataPolicySettingsDs.feature.js

@@ -18,29 +18,29 @@ const DataPolicySettings = function (context) {
         providerTitle = hr$('.js-providerTitle', container)[0]
 
     let isWebview = window.parent.document.documentElement.classList.contains('webview'),
-        appSettingsCookie = {},
-        dataSettingsCookie = {}
+        appSettingsCookie = {}
 
-    //Überprüfung ob die alten Cookies zusammengeführt werden müssen
+    //Überprüfung ein Settings-Cookie da ist
     const checkForExistingCookies = function () {
     
         if (getJSONCookie('hrSettings')) {
             getAllToggleValuesFromSettings()
         }
         else {
-            console.log("hessenschau neu => wenn kein hrSettings erzeugt wurde")
-            //Wenn kein Cookie vorhanden wird diese initial über die Checkbox "Dienst ist initial immer aktiviert (Whitelist)" 
+            console.log("Kein Cookie vorhanden");
+            //Wenn kein Cookie vorhanden wird diese initial über die Checkbox "Dienst ist initial immer aktiviert (Whitelist)"
             //im Konfig-Dokument bestückt.
-            for (let i = 0; i < toggleSwitches.length; ++i) {
-                    if (toggleSwitches[i].getAttribute('data-whitelist') == "true") {
-                        setCookieForSettings(toggleSwitches[i].id, true)
-                    }
-                    else {
-                        setCookieForSettings(toggleSwitches[i].id, false)
-                    }
+            for (var i = 0; i < toggleSwitches.length; ++i) {
+              if (toggleSwitches[i].getAttribute('data-whitelist') == "true") {
+                toggleSwitches[i].checked = true;
+              }
+              else{
+                toggleSwitches[i].checked = false;
+              }
+              setAllToggleEventListeners(toggleSwitches[i]);
+              initializeAllToggleEventListeners(i);
             }
-            setAllToggleValuesFromSettings()
-            changeProviderTitle()
+        changeProviderTitle();
         }
     }
 
@@ -56,49 +56,45 @@ const DataPolicySettings = function (context) {
     const getAllToggleValuesFromSettings = function () {
         setAllToggleValuesFromSettings()
         changeProviderTitle()
-        //initial alles deaktivieren
-        //hr-settings schreiben
-
     }
 
     const setAllToggleValuesFromSettings = function () {
-        dataSettingsCookie = getJSONCookie('hrSettings') || {}
-        let settingId
-        let settingState
-        for (let i = 0; i < toggleSwitches.length; ++i) {
-            settingId = toggleSwitches[i].id
-            settingState = dataSettingsCookie.settingId
-            document.getElementById(toggleSwitches[i].id).checked = settingState
-
-            setAllToggleEventListeners(toggleSwitches[i])
-            initializeAllToggleEventListeners(i)
-
-            if (isCookieSetForSettings(toggleSwitches[i].id)) {
-                toggleSwitches[i].checked = true
-            } 
-        }
-        checkWhiteListAttribute()
-        toggleAllSwitch.checked = allTogglesExternalServiceChecked()
-    }
-    const checkWhiteListAttribute = function() {
-        for (let i = 0; i < toggleSwitches.length; ++i) {
-            if (toggleSwitches[i].getAttribute('data-whitelist') == 'true') {
-                toggleSwitches[i].checked = true
-                setCookieForSettings(toggleSwitches[i].id, toggleSwitches[i].checked)
-            } else {
-                toggleSwitches[i].checked = false;
-                setCookieForSettings(toggleSwitches[i].id, toggleSwitches[i].checked);
+        var id;
+        console.log("Setze alle Settings-Regler")
+        for (var i = 0; i < toggleSwitches.length; ++i) {
+          id = toggleSwitches[i].id;
+          if(settingsCookie.isSettingsCookieExistent(id)){
+            console.log("Dienst "+ id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
+            if(settingsCookie.isSettingsCookieAccepted(id)) {
+              console.log("Aktiviere den Toggle")
+              toggleSwitches[i].checked = true;
+            }
+            else{
+              console.log("Deaktiviere den Toggle")
+              toggleSwitches[i].checked = false;
             }
+          }
+          else{
+            console.log("Dienst "+ id + " ist im Cookie nicht enthalten, prüfe daher den Default")
+            var whiteList = document.getElementById(id).getAttribute("data-whitelist")
+            if(whiteList == 'true'){
+              console.log("Ist per Default eingeschaltet")
+              console.log("Aktiviere den Toggle")
+              toggleSwitches[i].checked = true;
+            }
+            else{
+              console.log("Ist per Default ausgeschaltet")
+              console.log("Deaktiviere den Toggle")
+              toggleSwitches[i].checked = false;
+            }
+    
+          }
+          setAllToggleEventListeners(toggleSwitches[i]);
+          initializeAllToggleEventListeners(i);
         }
+        toggleAllSwitch.checked = allTogglesExternalServiceChecked()
     }
-    const isCookieSetForSettings = function (externalService) {
-        return settingsCookie.isSettingsCookieAccepted(externalService)
-    }
-
-    const isCookieExistForSettings = function (externalService) {
-        return settingsCookie.isSettingsCookieExistent(externalService)
-    }
-
+    
     const initializeAllToggleEventListeners = function (serviceId) {
         listen(
             'hr:externalService-activate-' + toggleSwitches[serviceId].id,

package/dist/assets/js/components/externalService/externalServiceDs.feature.js

@@ -27,7 +27,7 @@ const ExternalService = function (context) {
         acceptAlwaysCheckbox = hr$('.js-dataPolicy-acceptPermanentely', rootElement)[0]
     let embedCode = options.embedCode,
         iframe,
-        settingsCookie,
+        settingsCookie = new SettingsCookie(),
         noResponsiveIframe,
         contentRefresher,
         gemeindewahlergebnis,
@@ -354,13 +354,31 @@ const ExternalService = function (context) {
 
     const initDataPolicy = function () {
         if (dataPolicyCheck) {
-            settingsCookie = new SettingsCookie()
             acceptButton = hr$('.js-dataPolicy-accept', rootElement)[0]
             listen('click', handleDatapolicy, acceptButton)
-            if (settingsCookie.isSettingsCookieAccepted(id)) {
-                    loadServiceWithDataPolicyButton()
-            } else {
-                    dataPolicyBox.style.visibility = 'visible'
+            if(settingsCookie.isSettingsCookieExistent(id)){
+                console.log("Dienst "+ id + " ist im Cookie enthalten und hat den Wert " + settingsCookie.isSettingsCookieAccepted(id))
+                if(settingsCookie.isSettingsCookieAccepted(id)) {
+                  console.log("Lade den Dienst")
+                  loadServiceWithDataPolicyButton();
+                }
+                else {
+                  console.log("Zeige Datapolicy-Box")
+                  dataPolicyBox.style.visibility = 'visible';
+                }
+            }
+              else{
+                console.log("Dienst "+ id + " ist im Cookie nicht enthalten, prüfe daher den Default")
+                if(whiteList){
+                  console.log("Ist per Default eingeschaltet")
+                  console.log("Lade den Dienst")
+                  loadServiceWithDataPolicyButton();
+                }
+                else{
+                  console.log("Ist per Default ausgeschaltet")
+                  console.log("Zeige Datapolicy-Box")
+                  dataPolicyBox.style.visibility = 'visible';
+                }
             }
             listen('hr:externalService-activate-' + id, loadServiceWithDataPolicyButton)
             listen('hr:externalService-deactivate-' + id, removeExternalService)

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/externalService/external_service.hbs

@@ -17,7 +17,7 @@
             {{else}}
                 <!-- Embedding via JS without DataPolicyCheck-->  
                 <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"iFrameConfig":{}}'>
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
                 </div>  
             {{/if}}    
             {{~> components/externalService/components/external_service_caption ~}}

package/dist/views/components/externalService/external_service_with_datapolicy_check.hbs

@@ -2,7 +2,7 @@
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.makeDatapolicyCheck}},"iFrameConfig": { {{#if this.fixedHeight}}
                 "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>

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/externalService/external_service.hbs

@@ -17,7 +17,7 @@
             {{else}}
                 <!-- Embedding via JS without DataPolicyCheck-->  
                 <div class="c-externalService__{{this.externalServiceConfig.externalServiceId}} js-load"
-                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"iFrameConfig":{}}'>
+                    data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType": "{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": false,"whiteList": false,"iFrameConfig":{}}'>
                 </div>  
             {{/if}}    
             {{~> components/externalService/components/external_service_caption ~}}

package/dist/views_static/components/externalService/external_service_with_datapolicy_check.hbs

@@ -2,7 +2,7 @@
         {{~> components/base/a11y/hiddenText _locaTag="story_externalservice_intro_sr" ~}}        
         <div class="c-externalService c-externalService__{{this.externalServiceConfig.externalServiceId}}{{#unless
                 this.fixedHeight }} -noFixedHeight{{/unless}} js-load"
-             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true,"iFrameConfig": { {{#if this.fixedHeight}}
+             data-hr-external-service-ds='{"id":"{{this.externalServiceConfig.externalServiceId}}","embedCode":"{{this.serviceUrl}}","embedType":"{{this.externalServiceConfig.externalServiceEmbedType}}","dataPolicyCheck": true, "whiteList":{{this.externalServiceConfig.makeDatapolicyCheck}},"iFrameConfig": { {{#if this.fixedHeight}}
                 "fixedHeight":"{{this.fixedHeight}}"{{else}}{{#if this.aspectRatio}}"aspectRatio":"{{this.aspectRatio}}"{{else}}"aspectRatio":"16x9"{{/if}}{{/if}},"noResponsiveIframe":"{{{this.setResponsiveIframe}}}","webcomponent":"{{{this.setWebcomponent}}}"{{#if this.setTimedReloadIframe}},"refreshContent":"{{{this.setTimedReloadIframe}}}","refreshIntervall":"{{this.setTimeForReload}}"{{/if}} }}'>
             {{~> components/externalService/components/external_service_data_policy ~}}
         </div>

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.5",
+  "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
+        }
+    }
+}