hr-design-system-handlebars 1.67.0 → 1.67.2

package/.github/workflows/chromatic.yml

@@ -21,7 +21,7 @@ jobs:
               run: yarn
             - name: create partials
               run: yarn partialsToJs
-            - uses: chromaui/action@latest
+            - uses: chromaui/action@v11.3.0
               with:
                   # 👇 Chromatic projectToken, refer to the manage page to obtain it.
                   projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

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,28 @@
+# 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
+
+- Adding wahl-o-mat [#918](https://github.com/mumprod/hr-design-system-handlebars/pull/918) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+- [@szuelch](https://github.com/szuelch)
+
+---
+
 # v1.67.0 (Thu Apr 25 2024)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -3353,7 +3353,7 @@ article.indexTextDS .indexTextHighlighted .link {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1714051151895;
+  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: cnt1714051151895 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(cnt1714051151895);
+  content: counter(cnt1714630422823);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */

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

@@ -100,6 +100,9 @@ const ExternalService = function (context) {
                     case 'wahlkreiskarte':
                         createWahlEmbed()
                         break
+                    case 'wahlomat':
+                        createWahlOMatEmbed()
+                        break    
                     default:
                         console.error('No JS Config for external service ' + id)
                         break
@@ -110,6 +113,19 @@ const ExternalService = function (context) {
         }
     }
 
+    const createWahlOMatEmbed = function () {
+
+        const divTag = document.createElement('div')
+        divTag.id = 'wahl-o-mat'
+        rootElement.insertBefore(divTag, null)
+        loadScript(
+            'wahl-o-mat-js',
+            'https://static.hr.de/wahl-o-mat/embed.js',
+            true
+        )
+
+    }
+
     const createWahlEmbed = function () {
         let script = document.createElement('script')
         let cleanUrl

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.0",
+    "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/externalService/externalServiceDs.feature.js

@@ -100,6 +100,9 @@ const ExternalService = function (context) {
                     case 'wahlkreiskarte':
                         createWahlEmbed()
                         break
+                    case 'wahlomat':
+                        createWahlOMatEmbed()
+                        break    
                     default:
                         console.error('No JS Config for external service ' + id)
                         break
@@ -110,6 +113,19 @@ const ExternalService = function (context) {
         }
     }
 
+    const createWahlOMatEmbed = function () {
+
+        const divTag = document.createElement('div')
+        divTag.id = 'wahl-o-mat'
+        rootElement.insertBefore(divTag, null)
+        loadScript(
+            'wahl-o-mat-js',
+            'https://static.hr.de/wahl-o-mat/embed.js',
+            true
+        )
+
+    }
+
     const createWahlEmbed = function () {
         let script = document.createElement('script')
         let cleanUrl

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);
     },
 }