hr-design-system-handlebars 1.83.11 → 1.84.0

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

@@ -11,7 +11,6 @@ const Template = ({ ...args }) => {
     // return `<span>${topline}</span>`;
     return story_template({ ...args })
 }
-
 export default {
     title: 'Seiten/Artikel',
 }
@@ -20,18 +19,28 @@ export const Default = {
     render: Template.bind({}),
     name: 'Artikel mit Topline',
     args: data_story,
+    parameters: {
+        layout: 'fullscreen',
+    },
+}
+export const Webview = {
+    render: Template.bind({}),
+    name: 'Webview Artikel mit Topline',
+    args: {
+        ...data_story,
+        _webview: true
+    },
     parameters: {
         layout: 'fullscreen',
     }
 }
-
 export const WithSquareImage = {
     render: Template.bind({}),
     name: 'Artikel mit 1:1-Bild',
     args: data_story_with_square_image,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 
 export const WithLabel = {
@@ -40,8 +49,8 @@ export const WithLabel = {
     args: data_story_with_label,
     parameters: {
         layout: 'fullscreen',
-        chromatic: { delay: 1000 }
-    }
+        chromatic: { delay: 1000 },
+    },
 }
 
 export const WithVideo = {
@@ -50,7 +59,7 @@ export const WithVideo = {
     args: data_story_with_video,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 
 
@@ -61,7 +70,7 @@ export const WithLivestream = {
     args: data_story_with_livestream,
     parameters: {
         layout: 'fullscreen',
-    }
+    },
 }
 
 export const WithAudio = {
@@ -72,3 +81,4 @@ export const WithAudio = {
         layout: 'fullscreen',
     }
 }
+

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'
 

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

@@ -1,5 +1,5 @@
 import { resetComponents } from '@storybook/components'
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test'
 import subscribeButtonJson from 'components/teaser/fixtures/teaser_podcast.json'
 
 import subscribeButton from 'components/podcast/components/podcast_subscribe_button.hbs'
@@ -47,10 +47,10 @@ export const SubscribeButtonOpen = {
 
     args: subscribeButtonJson.logicItem.includeModel.podcastChannel,
     play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement);
+        const canvas = within(canvasElement)
 
-        const button = canvas.getByRole('button');
+        const button = canvas.getByRole('button')
 
-        await userEvent.click(button);
+        await userEvent.click(button)
     },
 }

package/src/stories/views/components/site_header/header.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 HeaderStories from './header.stories'
 
 <Meta of={HeaderStories} />

package/src/stories/views/components/site_header/header.stories.js

@@ -10,13 +10,13 @@ import JsonDataHR3 from './fixtures/site_header_mit_submenu_as_flyout_no_sticky.
 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 navigation({ brand, ...args })
 }
 const TemplateHr3 = (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 : 'hr3' 
+    let brand = undefined !== theme ? theme : 'hr3'
     return navigation({ brand, ...args })
 }
 
@@ -33,7 +33,6 @@ export default {
 
         docs: {
             inlineStories: false,
-            
         },
 
         viewport: {

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

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

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

@@ -12,8 +12,7 @@ const Template_mobile = ({ ...args }) => {
 }
 export default {
     title: 'Komponenten/Social Sharing',
-    
-} 
+}
 
 export const Default = {
     render: Template_horizontal.bind({}),
@@ -22,7 +21,7 @@ export const Default = {
     parameters: {
         chromatic: {
             viewports: [360, 1024],
-        }
+        },
     },
 }
 export const Mobile = {
@@ -33,7 +32,7 @@ export const Mobile = {
         layout: 'fullscreen',
         chromatic: {
             viewports: [360, 1024],
-        }
+        },
     },
     decorators: [
         (Story) => {
@@ -42,4 +41,4 @@ export const Mobile = {
              </div>`
         },
     ],
-}
+}

package/src/stories/views/components/teaser/cluster/teaser_cluster.mdx

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

package/src/stories/views/components/teaser/components/teaser_byline.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as TeaserBylineStories from './teaser_byline.stories'
 
 <Meta of={TeaserBylineStories} />
@@ -94,4 +94,4 @@ Die Byline-Komponente wird in handlebars wie folgt eingebaut:
     <Story of={TeaserBylineStories.CommentsOnly} />
 </Canvas>
 
-<ArgsTable story="default" />
+<ArgTypes story="default" />

package/src/stories/views/components/teaser/components/teaser_featured_content.mdx

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

package/src/stories/views/components/teaser/components/teaser_featured_content.stories.js

@@ -13,4 +13,4 @@ export const Default = {
     render: Template.bind({}),
     name: 'default',
     args: teaserFeaturedContent,
-}
+}

package/src/stories/views/components/teaser/components/teaser_heading.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as TeaserHeadingStories from './teaser_heading.stories'
 
 <Meta of={TeaserHeadingStories} />
@@ -75,7 +75,7 @@ Durchgereichte Parameter:
     <Story of={TeaserHeadingStories.SerifHero} />
 </Canvas>
 
-<ArgsTable story="Serif Hero" />
+<ArgTypes story="Serif Hero" />
 
 ## Teaser-Heading Serif 50%
 

package/src/stories/views/components/teaser/components/teaser_text.mdx

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

package/src/stories/views/components/teaser/components/teaser_title.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as TeaserTitleStories from './teaser_title.stories'
 
 <Meta of={TeaserTitleStories} />
@@ -24,7 +24,7 @@ Die Titel-Komponente inkludiert folgende Komponenten:
 
 Die Titel-Komponente benötigt folgende Parameter:
 
-<ArgsTable story="Titel Serif - Hero" />
+<ArgTypes story="Titel Serif - Hero" />
 
 ## Verwendung
 

package/src/stories/views/components/teaser/components/teaser_topline.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as TeaserToplineStories from './teaser_topline.stories'
 
 <Meta of={TeaserToplineStories} />
@@ -13,7 +13,7 @@ In der Topline-Komponente wird die Dachzeile des Artikels dargestellt.
 
 Die Topline-Komponente benötigt folgende Parameter:
 
-<ArgsTable story="default" />
+<ArgTypes story="default" />
 
 ## Verwendung
 

package/src/stories/views/components/teaser/content_nav/teaser_content_nav.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 TeaserContentNavStories from './teaser_content_nav.stories'
 
 <Meta of={TeaserContentNavStories} />

package/src/stories/views/components/teaser/group_teaser/group.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as GroupStories from './group.stories'
 
 <Meta of={GroupStories} />
@@ -16,4 +16,4 @@ Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
     <Story of={GroupStories.$100GruppeMitRelatedContent} />
 </Canvas>
 
-<ArgsTable story="main" />
+<ArgTypes story="main" />

package/src/stories/views/components/teaser/podcast/podcast.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 PodcastStories from './podcast.stories'
 
 <Meta of={PodcastStories} />

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

@@ -76,4 +76,3 @@ export const $100FilterPlayer = {
     name: '100% Filter Player',
     args: podcastFilter.logicItem.includeModel,
 }
-

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 import * as TeaserTabboxStories from './teaser_tabbox.stories'
 
 import tabbox from './teaser_tabbox.hbs'

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.stories.js

@@ -17,7 +17,7 @@ export default {
             viewports: [360, 768, 1024],
             diffThreshold: 0.3,
         },
-        layout: 'fullscreen',     
+        layout: 'fullscreen',
     },
 
     argTypes: {},

package/src/stories/views/components/teaser/teaser_alternativ.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 TeaserAlternativStories from './teaser_alternativ.stories'
 
 <Meta of={TeaserAlternativStories} />

package/src/stories/views/components/teaser/teaser_alternativ_av.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 TeaserAlternativAvStories from './teaser_alternativ_av.stories'
 
 <Meta of={TeaserAlternativAvStories} />

package/src/stories/views/components/teaser/teaser_event_calendar.mdx

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

package/src/stories/views/components/teaser/teaser_indextext.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 TeaserIndextextStories from './teaser_indextext.stories'
 
 <Meta of={TeaserIndextextStories} />
@@ -32,4 +32,4 @@ Die Indextext-Teaser-Komponente wird in handlebars wie folgt eingebaut:
     <Story of={TeaserIndextextStories.TextMitHintergrund50} />
 </Canvas>
 
-<ArgsTable story="Text mit Hintergrund 100" />
+<ArgTypes story="Text mit Hintergrund 100" />

package/src/stories/views/components/teaser/teaser_logic/teaser_logic.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 TeaserLogicStories from './teaser_logic.stories';
 
 import teaser from './teaser_logic.hbs'

package/src/stories/views/components/teaser/teaser_poster.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 TeaserPosterStories from './teaser_poster.stories'
 
 <Meta of={TeaserPosterStories} />
@@ -92,4 +92,4 @@ Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
   <Story of={TeaserPosterStories.Poster33MitLabel} />
 </Canvas>
 
-<ArgsTable story="Poster 50" />
+<ArgTypes story="Poster 50" />

package/src/stories/views/components/teaser/teaser_stage.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 TeaserStageStories from './teaser_stage.stories'
 
 <Meta of={TeaserStageStories} />

package/src/stories/views/components/teaser/teaser_standard.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 
 import * as TeaserStandardStories from './teaser_standard.stories'
 

package/src/stories/views/components/teaser/teaser_standard.stories.js

@@ -6,7 +6,7 @@ import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
 import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
 import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
 import teaser50SerifWithoutTeaserImage from './fixtures/teaser_standard_without_teaserimage_50_serif.json'
-import teaser50SerifFeaturedContent from'./fixtures/teaser_standard_50_serif_featured_content'
+import teaser50SerifFeaturedContent from './fixtures/teaser_standard_50_serif_featured_content'
 import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
 import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
 import teaser25SerifWithoutTeaserimage from './fixtures/teaser_standard_without_teaserimage_25_serif.json'

package/src/stories/views/components/teaser/teaser_standard_av.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 TeaserStandardAvStories from './teaser_standard_av.stories'
 
 <Meta of={TeaserStandardAvStories} />

package/src/stories/views/components/teaser/teaser_standard_event.mdx

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import { ArgTypes, Meta, Story, Canvas } from '@storybook/blocks'
 
 import * as TeaserStandardEventStories from './teaser_standard_event.stories'
 

package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.mdx

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

package/src/stories/views/components/teaser/ticker/teaser_ticker_alternativ.stories.js

@@ -49,4 +49,3 @@ export const TickerTeaserAlternativ100 = {
     name: 'Alternativ 100',
     args: tickerTeaser100Alternativ.logicItem.includeModel,
 }
-

package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.mdx

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

package/src/stories/views/components/teaser/ticker/teaser_ticker_standard.stories.js

@@ -69,4 +69,4 @@ export const TickerTeaser25 = {
     render: Template.bind({}),
     name: 'Standard 25',
     args: tickerTeaser25Standard.logicItem.includeModel,
-}
+}

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.mdx

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

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js

@@ -29,11 +29,11 @@ export default {
         },
     },
     argTypes: {
-        '_color': {
+        _color: {
             description: 'Text- und Linienfarbe',
             control: false,
         },
-    }
+    },
 }
 
 export const TimelineWhite = {