hr-design-system-handlebars 1.83.12 → 1.84.0

package/src/stories/views/components/content/social_media_links/social_media_links.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
 import * as socialMediaLinksStories from './social_media_links.stories'; 
 
 import socialMediaLinks from './social_media_links.hbs'

package/src/stories/views/components/content/social_media_links/social_media_links.stories.js

@@ -1,7 +1,6 @@
 import socialMediaLinks from './social_media_links.hbs'
 import socialMediaLinksData from './fixtures/social_media_links.json'
 
-
 const Template = ({ ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${socialMediaLinks}</div>`;
@@ -11,8 +10,7 @@ const Template = ({ ...args }) => {
 export default {
     title: 'Komponenten/Content/SocialMediaLinks',
 
-    argTypes: {
-    },
+    argTypes: {},
 
     decorators: [
         (Story) => {
@@ -28,6 +26,6 @@ export const ThreeLinks = {
     name: '3 Links',
 
     args: {
-        ...socialMediaLinksData
+        ...socialMediaLinksData,
     },
 }

package/src/stories/views/components/event/calendar/event_calendar_components.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import eventCalendarHeading from './event_calendar_heading.hbs'
 import eventCalendarNav from './event_calendar_nav.hbs'
 import eventCalendarContent from './event_calendar_event_teaser.hbs'

package/src/stories/views/components/externalService/external_service.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as ExternalServiceStories from './external_service.stories'
 
 <Meta of={ExternalServiceStories} />

package/src/stories/views/components/externalService/external_service.stories.js

@@ -1,19 +1,17 @@
-import { 
-    ExternalServiceContent
-} from './external_service.data.js'
+import { ExternalServiceContent } from './external_service.data.js'
 import externalService from './external_service_with_datapolicy_check.hbs'
 import externalServiceNoDatapolicyCheck from './external_service.hbs'
 
 const TemplatePageExternalService = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau'       
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return externalService({ brand, ...args })
 }
 const TemplatePageExternalServiceNoDatapolicyCheck = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau'       
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return externalServiceNoDatapolicyCheck({ brand, ...args })
 }
 export default {
@@ -32,36 +30,35 @@ export default {
 export const ExterneDiensteGiphy = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Giphy',
-    args: ExternalServiceContent.Giphy, 
+    args: ExternalServiceContent.Giphy,
 }
 export const ExterneDiensteFlourish = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Flourish',
-    args: ExternalServiceContent.Flourish, 
+    args: ExternalServiceContent.Flourish,
 }
 export const ExterneDiensteDatawrapper = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper MIT Responsivem Iframe',
-    args: ExternalServiceContent.Datawrapper_CDN, 
+    args: ExternalServiceContent.Datawrapper_CDN,
 }
 export const ExterneDiensteDatawrapperNoResponsiveFixedHeight = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Feste Höhe)',
-    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeight, 
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeight,
 }
 export const ExterneDiensteDatawrapperNoResponsiveAspectRatio = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper OHNE Responsivem Iframe (Aspect Ratio)',
-    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveAspectRatio, 
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveAspectRatio,
 }
 export const ExterneDiensteDatawrapperContentRefresher = {
     render: TemplatePageExternalService.bind({}),
     name: 'Externe Dienste Datawrapper mit ContentRefresher',
-    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload, 
+    args: ExternalServiceContent.Datawrapper_CDN_NoResponsiveFixedHeightReload,
 }
 export const WahlGemeindeErgebnis = {
     render: TemplatePageExternalServiceNoDatapolicyCheck.bind({}),
     name: 'Externe Dienste Wahl Gemeinde Ergebnis',
-    args: ExternalServiceContent.Wahl_Gemeinde_Ergebnis, 
+    args: ExternalServiceContent.Wahl_Gemeinde_Ergebnis,
 }
-

package/src/stories/views/components/footer/page_footer.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as PageFooterStories from './page_footer.stories'
 
 <Meta of={PageFooterStories} />

package/src/stories/views/components/footer/page_footer.stories.js

@@ -1,12 +1,10 @@
-import { 
-    FooterContent
-} from './page_footer.data.js'
+import { FooterContent } from './page_footer.data.js'
 import pageFooter from './page_footer.hbs'
 
 const TemplatePageFooter = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau'       
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return pageFooter({ brand, ...args })
 }
 
@@ -26,5 +24,5 @@ export default {
 export const Seitenfooter = {
     render: TemplatePageFooter.bind({}),
     name: 'Seitenfooter',
-    args: FooterContent, 
-}
+    args: FooterContent,
+}

package/src/stories/views/components/geoTag/geoTag.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
 import * as GeoTagStories from './geoTag.stories';
 
 import geoTag from './geoTag.hbs'

package/src/stories/views/components/grid/grid.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as GridStories from './grid.stories';
 
 import grid_group_100_item_100 from './grid_group_100_item_100.hbs'
@@ -207,4 +207,4 @@ Mit inversem Aufbau ist gemeint, das die Gruppe die Größe vorgibt und die Obje
   <Story of={GridStories.$33} />
 </Canvas>
 
-<ArgsTable story="Grid" />
+<ArgTypes story="Grid" />

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

@@ -30,4 +30,4 @@ export const Example = {
     render: Template.bind({}),
     name: 'Example',
     args: null,
-}
+}

package/src/stories/views/components/label/label.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
 import * as LabelStories from './label.stories';
 
 import label from './label.hbs'

package/src/stories/views/components/mediaplayer/mediaplayer.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as MediaplayerStories from './mediaplayer.stories'
 
 <Meta of={MediaplayerStories} />
@@ -15,7 +15,7 @@ dem eigentlichen Player vorgeschaltet. Erst bei Klick auf den Play-Button wird d
 
 Zur Konfiguration des Players stehen die im Folgenden beschrieben Parameter zur Verfügung:
 
-<ArgsTable story="Videoplayer" />
+<ArgTypes story="Videoplayer" />
 
 ## Varianten
 

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

@@ -1,8 +1,8 @@
-import { userEvent, within, waitFor } from '@storybook/testing-library';
+import { userEvent, within, waitFor } from '@storybook/test'
 import mediaplayerJson from 'components/mediaplayer/fixtures/mediaplayer.json'
 
 import mediaPlayer from 'components/mediaplayer/media_player.hbs'
-import { delay } from 'underscore';
+import { delay } from 'underscore'
 
 const Template = ({ label, ...args }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -16,15 +16,17 @@ export default {
     argTypes: {
         _isTeaser: {
             control: 'boolean',
-            description: 'Legt fest, ob der Player in einem Teaser verwendet wird und, falls dies der Fall ist, ein statisches Teaser-Bild vorgeschaltet bekommt.',
+            description:
+                'Legt fest, ob der Player in einem Teaser verwendet wird und, falls dies der Fall ist, ein statisches Teaser-Bild vorgeschaltet bekommt.',
         },
         _uiTestHook: {
             control: 'text',
-            description: 'Hierüber kann eine CSS Hook Klasse gesetzt werden, um den Player Container in einem UI-Test einfach selektieren zu können.',
+            description:
+                'Hierüber kann eine CSS Hook Klasse gesetzt werden, um den Player Container in einem UI-Test einfach selektieren zu können.',
             defaultValue: {
                 summary: 'ui-test-mediaplayer',
-            }
-        }
+            },
+        },
     },
 
     parameters: {
@@ -44,7 +46,7 @@ export const Videoplayer = {
                      </div>`
         },
     ],
-    args: { "_isTeaser": false, ...mediaplayerJson.video },
+    args: { _isTeaser: false, ...mediaplayerJson.video },
 }
 
 export const VideoplayerSettings = {
@@ -57,13 +59,13 @@ export const VideoplayerSettings = {
                      </div>`
         },
     ],
-    args: { "_isTeaser": false, ...mediaplayerJson.video },
+    args: { _isTeaser: false, ...mediaplayerJson.video },
     play: async ({ canvasElement }) => {
-        let canvas = within(canvasElement);
-        await userEvent.click(await canvas.findByTitle('Wiedergabe [Leertaste]'));
+        let canvas = within(canvasElement)
+        await userEvent.click(await canvas.findByTitle('Wiedergabe [Leertaste]'))
         userEvent.keyboard('[Space]', { delay: 1000 })
         userEvent.keyboard('{ArrowLeft}', { delay: 1500 })
-        await userEvent.click(await canvas.findByTitle('Einstellungen an / aus'), { delay: 2000 });
+        await userEvent.click(await canvas.findByTitle('Einstellungen an / aus'), { delay: 2000 })
     },
 }
 
@@ -77,7 +79,7 @@ export const VideoplayerLive = {
         },
     ],
     name: 'Videoplayer Livestream',
-    args: { "_isTeaser": false, ...mediaplayerJson.video_livestream },
+    args: { _isTeaser: false, ...mediaplayerJson.video_livestream },
 }
 
 export const Audioplayer = {
@@ -90,7 +92,7 @@ export const Audioplayer = {
                      </div>`
         },
     ],
-    args: { "_isTeaser": false, _isAudioView: true, ...mediaplayerJson.audio },
+    args: { _isTeaser: false, _isAudioView: true, ...mediaplayerJson.audio },
 }
 
 export const AudioplayerLivestream = {
@@ -103,5 +105,5 @@ export const AudioplayerLivestream = {
         },
     ],
     name: 'Audioplayer Livestream',
-    args: { "_isTeaser": false, _isAudioView: true, ...mediaplayerJson.audio_event_livestream },
+    args: { _isTeaser: false, _isAudioView: true, ...mediaplayerJson.audio_event_livestream },
 }

package/src/stories/views/components/mediaplayer/mediaplayer_button.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as MediaplayerButtonStories from './mediaplayer_button.stories'
 
 <Meta of={MediaplayerButtonStories} />
@@ -31,7 +31,7 @@ müssen und können nicht separat gesetzt werden.
 
 ## Eigenschaften
 
-<ArgsTable story="Spielplatz" />
+<ArgTypes story="Spielplatz" />
 
 ## Varianten
 

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

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as ModalStories from './modal.stories'
 
 <Meta of={ModalStories} />
@@ -24,7 +24,7 @@ Damit auch ältere Browser, die das Dialog Element noch nicht unterstützen, das
 
 ## Eigenschaften
 
-<ArgsTable story="Default Modal" />
+<ArgTypes story="Default Modal" />
 
 ## Varianten
 

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

@@ -1,4 +1,4 @@
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test'
 
 const handlebars = require('hrHandlebars')
 
@@ -24,7 +24,7 @@ const defaultModalTemplate = (args, { globals: { customConditionalToolbar } }) =
 const userConsentModalTemplate = (args, { globals: { customConditionalToolbar } }) => {
     let brand =
         undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
-    let link = { url: "https://hessenschau.de", isTargetBlank: true }
+    let link = { url: 'https://hessenschau.de', isTargetBlank: true }
     let hbsTemplate = handlebars.compile(`
     {{#> components/modal/modal}}
         {{> 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")}}
@@ -50,7 +50,8 @@ export default {
                 options: ['default', 'userConsent'],
             },
 
-            description: 'Der Typ des Modals, das geöffnet werden soll. Derzeit lassen sich die Typen "default" und "userConsent" auswählen.',
+            description:
+                'Der Typ des Modals, das geöffnet werden soll. Derzeit lassen sich die Typen "default" und "userConsent" auswählen.',
         },
     },
 
@@ -66,7 +67,7 @@ export const defaultModal = {
     name: 'Default Modal',
     args: {
         _trigger: '.js-modal',
-        _type: 'default'
+        _type: 'default',
     },
 }
 
@@ -75,7 +76,7 @@ export const userConsentModal = {
     name: 'User Consent Modal',
     args: {
         _trigger: '.js-user-consent-needed',
-        _type: 'userConsent'
+        _type: 'userConsent',
     },
 }
 
@@ -84,16 +85,15 @@ export const openedUserConsentModal = {
     name: 'User Consent Modal geöffnet',
     args: {
         _trigger: '.js-user-consent-needed',
-        _type: 'userConsent'
+        _type: 'userConsent',
     },
     play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+        const canvas = within(canvasElement)
 
-        const link = canvas.getByTestId('modal-hook');
+        const link = canvas.getByTestId('modal-hook')
 
         await userEvent.click(link, {
             delay: 3000,
-        });
+        })
     },
 }
-

package/src/stories/views/components/navigation/breadcrumb/breadcrumb.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as BreadcrumbStories from './breadcrumb.stories'
 
 <Meta of={BreadcrumbStories} />
@@ -17,7 +17,7 @@ Die einzelnen Einträge der Breadcrumb sind verlinkt.
 
 ## Eigenschaften
 
-<ArgsTable story="Breadcrumb 2 Level" />
+<ArgTypes story="Breadcrumb 2 Level" />
 
 ## Varianten
 

package/src/stories/views/components/page/components/appendix.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as AppendixStories from './appendix.stories'
 
 <Meta of={AppendixStories} />
@@ -24,4 +24,4 @@ Die Appendix-Komponente wird in handlebars wie folgt eingebaut:
     <Story of={AppendixStories.Default} />
 </Canvas>
 
-<ArgsTable story="default" />
+<ArgTypes story="default" />

package/src/stories/views/components/page/components/metadatabox.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as MetadataboxStories from './metadatabox.stories'
 
 <Meta of={MetadataboxStories} />
@@ -26,4 +26,4 @@ Die Metadatenbox-Komponente wird in handlebars wie folgt eingebaut:
     <Story of={MetadataboxStories.Default} />
 </Canvas>
 
-<ArgsTable story="default" />
+<ArgTypes story="default" />

package/src/stories/views/components/page/components/metadatabox.stories.js

@@ -20,7 +20,7 @@ export default {
             control: 'boolean',
             description: 'Datum anzeigen',
         },
-    },    
+    },
     decorators: [
         (Story) => {
             return `<div class="max-w-[724px] mx-auto mt-60">  
@@ -54,7 +54,6 @@ export const WithOneAuthorWithoutPicture = {
     args: metadatabox_one_author_without_picture_json,
 }
 
-
 export const WithMoreAuthors = {
     render: Template.bind({}),
     name: 'Mehrere Autoren',
@@ -71,4 +70,4 @@ export const WithMoreAuthorsAndComments = {
     render: Template.bind({}),
     name: 'Mehrere Autoren und Kommentar-Link',
     args: metadatabox_more_authors_comments_json,
-}
+}

package/src/stories/views/components/page/index/page.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as PageStories from './page.stories'
 
 <Meta of={PageStories} />
@@ -97,4 +97,4 @@ Teaser-Typ variieren.
 
 
 
-<ArgsTable story="Default" />
+<ArgTypes story="Default" />

package/src/stories/views/components/page/index/page.stories.js

@@ -7,7 +7,7 @@ import {
     NavigationDataWithTeaser2,
     NavigationDataWithTeaser3,
     NavigationDataWithTeaser4,
-    NavigationDataWithBreadcrumb
+    NavigationDataWithBreadcrumb,
 } from './page.data.js'
 
 import { NavigationDataWithMixedContent } from '../../pagination/page_pagination.data.js'
@@ -15,21 +15,21 @@ import { NavigationDataWithMixedContent } from '../../pagination/page_pagination
 const Template = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau' 
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return page({ brand, ...args })
 }
 
 const Template2 = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau' 
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return page_pagination({ brand, ...args })
 }
 
 const Template3 = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau' 
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return page_article({ brand, ...args })
 }
 export default {
@@ -40,7 +40,7 @@ export default {
         chromatic: {
             viewports: [360, 768, 1024],
             diffThreshold: 0.3,
-            delay: 2000, 
+            delay: 2000,
         },
 
         layout: 'fullscreen',
@@ -87,6 +87,6 @@ export const MitArtikel = {
     name: 'Mit Artikel',
     args: NavigationDataWithBreadcrumb,
     parameters: {
-        chromatic: { delay: 2000 }
-    }  
-}
+        chromatic: { delay: 2000 },
+    },
+}

package/src/stories/views/components/page/index/page_offline.stories.js

@@ -3,7 +3,7 @@ import page from './page_offline.hbs'
 const Template = (args, { globals: { theme } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
-    let brand = undefined !== theme ? theme : 'hessenschau' 
+    let brand = undefined !== theme ? theme : 'hessenschau'
     return page({ brand, ...args })
 }
 
@@ -29,4 +29,4 @@ export const Default = {
     render: Template.bind({}),
     name: 'Offline Page',
     args: {},
-}
+}

package/src/stories/views/components/page/index/page_player.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as PagePlayerStories from './page_player.stories'
 
 <Meta of={PagePlayerStories} />
@@ -18,4 +18,4 @@ components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}
     <Story of={PagePlayerStories.PlayerInteraktion} />
 </Canvas>
 
-<ArgsTable story="Default" />
+<ArgTypes story="Default" />

package/src/stories/views/components/page/podcast/podcast_episode_article.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as PodcastPlayerEpisodeStories from './podcast_episode_article.stories'
 
 <Meta of={PodcastPlayerEpisodeStories} />

package/src/stories/views/components/page/podcast/podcast_episode_article.stories.js

@@ -15,4 +15,4 @@ export const Default = {
     render: Template.bind({}),
     name: 'default',
     args: podcastPlayerEpisodeJson.logicItem.includeModel,
-}
+}

package/src/stories/views/components/page/podcast/podcast_playlist_article.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as PodcastPlayerPlaylistStories from './podcast_playlist_article.stories'
 
 <Meta of={PodcastPlayerPlaylistStories} />

package/src/stories/views/components/page/podcast/podcast_playlist_article.stories.js

@@ -15,4 +15,4 @@ export const Default = {
     render: Template.bind({}),
     name: 'default',
     args: podcastPlayerPlaylistJson.teaserPodcastPlaylist.logicItem.includeModel,
-}
+}

package/src/stories/views/components/page/story/story_main.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as StoryStories from './story_main.stories'
 
 <Meta of={StoryStories} />

package/src/stories/views/components/page/story/story_main.stories.js

@@ -21,7 +21,7 @@ export const Default = {
     args: data_story,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 export const Webview = {
     render: Template.bind({}),
@@ -40,7 +40,7 @@ export const WithSquareImage = {
     args: data_story_with_square_image,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 
 export const WithLabel = {
@@ -49,8 +49,8 @@ export const WithLabel = {
     args: data_story_with_label,
     parameters: {
         layout: 'fullscreen',
-        chromatic: { delay: 1000 }
-    }
+        chromatic: { delay: 1000 },
+    },
 }
 
 export const WithVideo = {
@@ -59,7 +59,7 @@ export const WithVideo = {
     args: data_story_with_video,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 
 
@@ -70,7 +70,7 @@ export const WithLivestream = {
     args: data_story_with_livestream,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 
 export const WithAudio = {

package/src/stories/views/components/pagination/page_pagination.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import * as PagePaginationStories from './page_pagination.stories'
 
 <Meta of={PagePaginationStories} />

package/src/stories/views/components/pagination/page_pagination.stories.js

@@ -76,7 +76,7 @@ const TemplateMoreThanThreeLast = (args, { globals: { customConditionalToolbar }
         undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
     return page({ brand, ...args })
 }
-const TemplateOnlyTwo= (args, { globals: { customConditionalToolbar } }) => {
+const TemplateOnlyTwo = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
     // return `<div>${label}</div>`;
     args['onlyThreePages'] = false
@@ -104,7 +104,6 @@ const TemplateOnlyThree = (args, { globals: { customConditionalToolbar } }) => {
     return page({ brand, ...args })
 }
 
-
 export default {
     title: 'Komponenten/Pagination',
     argTypes: {},

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

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas, Preview } from '@storybook/blocks'
 import { resetComponents } from '@storybook/components'
 import * as PodcastSubscribeButtonStories from './podcast_subscribe_button.stories'