hr-design-system-handlebars 1.67.1 → 1.67.2

package/.storybook/main.js

@@ -9,6 +9,7 @@ const config = {
         '../src/**/*.mdx',
         '../src/**/*.stories.@(js|jsx|ts|tsx)',
     ],
+    features: { buildStoriesJson: true },
     addons: [
         '@storybook/addon-links',
         {
@@ -44,6 +45,7 @@ const config = {
                 },
             },
         },
+        '@storybook/addon-interactions'
     ],
     webpackFinal: async (config, { configType }) => {
         // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.67.2 (Thu May 02 2024)
+
+#### 🐛 Bug Fix
+
+- Feature/dpe 3061 [#919](https://github.com/mumprod/hr-design-system-handlebars/pull/919) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 1
+
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.67.1 (Mon Apr 29 2024)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -3353,7 +3353,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1714396205933;
+  counter-reset: cnt1714630422823;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -3732,7 +3732,7 @@ article.indexTextDS .indexTextHighlighted .link {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1714396205933 1;
+  counter-increment: cnt1714630422823 1;
 }
 .-ordered::before {
   position: absolute;
@@ -3748,7 +3748,7 @@ article.indexTextDS .indexTextHighlighted .link {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1714396205933);
+  content: counter(cnt1714630422823);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.67.1",
+    "version": "1.67.2",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "storybook dev -p 6006 public",
@@ -27,7 +27,8 @@
         "preparePartialsForDelivery": "gulp preparePartialsForDelivery",
         "create-modernizr-config": "gulp createModernizrConfig",
         "merge-locatags": "gulp mergeLocatags",
-        "prepare": "yarn build"
+        "prepare": "yarn build",
+        "test-storybook": "test-storybook"
     },
     "browserslist": [
         "last 2 versions",
@@ -46,12 +47,16 @@
         "@storybook/addon-actions": "7.5.3",
         "@storybook/addon-console": "^2.0.0",
         "@storybook/addon-essentials": "7.5.3",
+        "@storybook/addon-interactions": "7.6.16",
         "@storybook/addon-links": "^7.2.1",
         "@storybook/addon-styling": "^1.3.5",
         "@storybook/addons": "^7.2.1",
         "@storybook/blocks": "7.2.1",
         "@storybook/html": "^7.2.1",
         "@storybook/html-webpack5": "7.2.1",
+        "@storybook/jest": "^0.2.3",
+        "@storybook/test-runner": "~0.16.0",
+        "@storybook/testing-library": "^0.2.2",
         "@storybook/theming": "^7.2.1",
         "auto": "^11.0.5",
         "autoprefixer": "^10.4.2",

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

@@ -1,3 +1,5 @@
+import { userEvent, within } from '@storybook/testing-library';
+
 const handlebars = require('hrHandlebars')
 
 const defaultModalTemplate = (args, { globals: { customConditionalToolbar } }) => {
@@ -28,7 +30,7 @@ const userConsentModalTemplate = (args, { globals: { customConditionalToolbar }
         {{> components/modal/user_consent _headline=(loca "modal_user_consent_headline") _text=(loca "modal_user_consent_text") _labelOk=(loca "modal_user_consent_label_ok") _labelCancel=(loca "modal_user_consent_label_cancel")}}
     {{/components/modal/modal}}
 
-    <a href="https://hessenschau.de" class="js-user-consent-needed" rel="noopener" target="_blank">User Consent Modal</a>
+    <a data-testid="modal-hook" href="https://hessenschau.de" class="js-user-consent-needed" rel="noopener" target="_blank">User Consent Modal</a>
   `)
     return hbsTemplate({ brand, ...args })
 }
@@ -77,3 +79,19 @@ export const userConsentModal = {
     },
 }
 
+export const openedUserConsentModal = {
+    render: userConsentModalTemplate.bind({}),
+    name: 'User Consent Modal geöffnet',
+    args: {
+        _trigger: '.js-user-consent-needed',
+        _type: 'userConsent'
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const link = canvas.getByTestId('modal-hook');
+
+        await userEvent.click(link);
+    },
+}
+

package/src/stories/views/components/podcast/podcast_subscribe_button.stories.js

@@ -1,4 +1,5 @@
 import { resetComponents } from '@storybook/components'
+import { userEvent, within } from '@storybook/testing-library';
 import subscribeButtonJson from 'components/teaser/fixtures/teaser_podcast.json'
 
 import subscribeButton from 'components/podcast/components/podcast_subscribe_button.hbs'
@@ -44,8 +45,12 @@ export const SubscribeButtonOpen = {
     render: Template.bind({}),
     name: 'Subscribe Button Open',
 
-    args: {
-        ...subscribeButtonJson.logicItem.includeModel.podcastChannel,
-        storybookOpen: true,
+    args: subscribeButtonJson.logicItem.includeModel.podcastChannel,
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const button = canvas.getByRole('button');
+
+        await userEvent.click(button);
     },
 }