hr-design-system-handlebars 1.11.10 → 1.11.12

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

@@ -0,0 +1,51 @@
+import { resetComponents } from '@storybook/components'
+import subscribeButtonJson from '../fixtures/teaser_podcast.json'
+
+import subscribeButton from './podcast_subscribe_button.hbs'
+
+const Template = ({ label, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return subscribeButton({ label, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Podcast/Komponenten',
+
+    argTypes: {
+        storybookOpen: {
+            control: 'boolean',
+            description: 'Offen',
+        },
+    },
+
+    parameters: {
+        controls: {
+            sort: 'requiredFirst',
+        },
+    },
+
+    decorators: [
+        (Story) => {
+            return `<div class="flex flex-row pt-5">
+                         ${Story()} 
+                     </div>`
+        },
+    ],
+}
+
+export const SubscribeButtonClose = {
+    render: Template.bind({}),
+    name: 'Subscribe Button Close',
+    args: subscribeButtonJson.logicItem.includeModel.podcastChannel,
+}
+
+export const SubscribeButtonOpen = {
+    render: Template.bind({}),
+    name: 'Subscribe Button Open',
+
+    args: {
+        ...subscribeButtonJson.logicItem.includeModel.podcastChannel,
+        storybookOpen: true,
+    },
+}

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

@@ -0,0 +1,10 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserTabboxStories from './teaser_tabbox.stories'
+
+import tabbox from './teaser_tabbox.hbs'
+
+<Meta of={TeaserTabboxStories} />
+
+<Canvas withToolbar>
+    <Story of={TeaserTabboxStories.Beispiel1} />
+</Canvas>

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

@@ -0,0 +1,40 @@
+import tabbox from './teaser_tabbox.hbs'
+import tabboxData from '../fixtures/teaser_tabbox.json'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return tabbox({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Tabbox',
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+    },
+
+    argTypes: {},
+
+    decorators: [
+        (Story) => {
+            return `<div class="grid my-5 grid-page">
+                     <div>
+                         ${Story()}
+                     </div>
+                 </div>`
+        },
+    ],
+}
+
+export const Beispiel1 = {
+    render: Template.bind({}),
+    name: 'Beispiel 1',
+    args: tabboxData.includeModel,
+}

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

@@ -0,0 +1,76 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserAlternativStories from './teaser_alternativ.stories'
+
+<Meta of={TeaserAlternativStories} />
+
+# Alternativ-Teaser
+
+## Beschreibung
+
+Der Alternativ-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
+
+<b>Alternativ Hero:</b> <br />
+Desktop = Bild(66%) neben Text(33%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />
+
+<b>Alternativ 100%:</b> <br />
+Desktop = Bild(33%) neben Text(66%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />
+
+<b>Alternativ 50%:</b> <br />
+Desktop = Bild(33%) neben Text(66%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />
+
+<b>Alternativ 50% mit Download:</b> <br />
+Desktop = Bild(33%) neben Text(66%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />{' '}
+
+Der Alternativ-Teaser soll nur als 100%- bzw. 50%-Teaser verwendet werden.
+
+## Sub-Komponenten
+
+Die Alternativ-Teaser-Komponente inkludiert folgende Komponenten:
+
+<ul>
+    <li>
+        components/base/image/<b>responsive\_image</b>
+    </li>
+    <li>
+        components/base/<b>link</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_heading</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_text</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_byline</b>
+    </li>
+</ul>
+
+## Verwendung
+
+Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_alternativ}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserAlternativStories.AlternativHero} />
+    <Story of={TeaserAlternativStories.AlternativHeroMitKommentaren} />
+    <Story of={TeaserAlternativStories.AlternativHeroMitLabel} />
+    <Story of={TeaserAlternativStories.AlternativHeroMitExternenLinkDokument} />
+    <Story of={TeaserAlternativStories.AlternativHeroMitSendungsdokument} />
+    <b>Alternativ 100%</b>
+    <Story of={TeaserAlternativStories.Alternativ100} />
+    <b>Alternativ 100% mit externem Link</b>
+    <Story of={TeaserAlternativStories.Alternativ100MitExternemLink} />
+    <b>Alternativ 50%</b>
+    <Story of={TeaserAlternativStories.Alternativ50} />
+    <Story of={TeaserAlternativStories.Alternativ50OhneTeaserbild} />
+    <b>Alternativ 50% mit externem Link</b>
+    <Story of={TeaserAlternativStories.Alternativ50MitExternemLink} />
+    <Story of={TeaserAlternativStories.Alternativ50MitDownload} />
+</Canvas>

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

@@ -0,0 +1,126 @@
+import { addLabel, removeLabel, changeTeaserSize } from './labelHelper'
+import { addCommentLink } from './jsonHelper'
+import teaser from './teaser_alternativ.hbs'
+import heroTeaser from './fixtures/teaser_alternative_hero_serif.json'
+import heroTeaserWithLabel from './fixtures/teaser_alternative_hero_serif_label.json'
+import heroTeaserWithComments from './fixtures/teaser_alternative_hero_serif_comments.json'
+import heroTeaserLink from './fixtures/teaser_alternative_hero_serif_link.json'
+import heroTeaserProgram from './fixtures/teaser_alternative_hero_serif_program.json'
+import teaser100Link from './fixtures/teaser_alternative_100_serif_link.json'
+import teaser100 from './fixtures/teaser_alternative_100_serif.json'
+import teaser50 from './fixtures/teaser_alternative_50_serif.json'
+import teaser50WithoutTeaserImage from './fixtures/teaser_alternative_without_teaserimage_50_serif.json'
+import teaser50Link from './fixtures/teaser_alternative_50_serif_link.json'
+import teaser50Download from './fixtures/teaser_alternative_50_serif_download.json'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Alternativ',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            viewports: [360, 1024],
+            diffThreshold: 0.5,
+        },
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['hero', '100', '50'],
+            },
+
+            description: 'Teaser Größ',
+
+            table: {
+                defaultValue: {
+                    summary: 'hero',
+                },
+            },
+        },
+    },
+
+    decorators: [
+        (Story) => {
+            return `<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">  
+             ${Story()} 
+             </div></div>`
+        },
+    ],
+}
+
+export const AlternativHero = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero',
+    args: heroTeaser.logicItem.includeModel,
+}
+
+export const AlternativHeroMitKommentaren = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero mit Kommentaren',
+    args: heroTeaserWithComments.logicItem.includeModel,
+}
+
+export const AlternativHeroMitLabel = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero mit Label',
+    args: heroTeaserWithLabel.logicItem.includeModel,
+}
+
+export const AlternativHeroMitExternenLinkDokument = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero mit externen Link Dokument',
+    args: heroTeaserLink.logicItem.includeModel,
+}
+
+export const AlternativHeroMitSendungsdokument = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero mit Sendungsdokument',
+    args: heroTeaserProgram.logicItem.includeModel,
+}
+
+export const Alternativ100 = {
+    render: Template.bind({}),
+    name: 'Alternativ 100',
+    args: teaser100.logicItem.includeModel,
+}
+
+export const Alternativ100MitExternemLink = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 mit externem Link',
+    args: teaser100Link.logicItem.includeModel,
+}
+
+export const Alternativ50 = {
+    render: Template.bind({}),
+    name: 'Alternativ 50',
+    args: teaser50.logicItem.includeModel,
+}
+
+export const Alternativ50OhneTeaserbild = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 ohne Teaserbild',
+    args: teaser50WithoutTeaserImage.logicItem.includeModel,
+}
+
+export const Alternativ50MitExternemLink = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 mit externem Link',
+    args: teaser50Link.logicItem.includeModel,
+}
+
+export const Alternativ50MitDownload = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 mit Download',
+    args: teaser50Download.logicItem.includeModel,
+}

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

@@ -0,0 +1,75 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserAlternativAvStories from './teaser_alternativ_av.stories'
+
+<Meta of={TeaserAlternativAvStories} />
+
+# Alternativ-Teaser
+
+## Beschreibung
+
+Der Alternativ-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
+
+<b>Alternativ Hero:</b> <br />
+Desktop = Bild(66%) neben Text(33%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />
+
+<b>Alternativ 100%:</b> <br />
+Desktop = Bild(33%) neben Text(66%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />
+
+<b>Alternativ 50%:</b> <br />
+Desktop = Bild(33%) neben Text(66%) <br />
+Mobile = Verhalten wie bei 100% Standard-Teaser <br />
+
+Der Alternativ-Teaser soll nur als 100%- bzw. 50%-Teaser verwendet werden.
+
+## Sub-Komponenten
+
+Die Alternativ-Teaser-Komponente inkludiert folgende Komponenten:
+
+<ul>
+    <li>
+        components/base/image/<b>responsive\_image</b>
+    </li>
+    <li>
+        components/base/<b>link</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_heading</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_text</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_byline</b>
+    </li>
+</ul>
+
+## Verwendung
+
+Die Alternativ-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_alternativ}}
+```
+
+<Canvas withToolbar>
+    <b>Alternativ Hero Video</b>
+    <Story of={TeaserAlternativAvStories.AlternativHeroVideo} />
+    <b>Alternativ Hero Audio</b>
+    <Story of={TeaserAlternativAvStories.AlternativHeroAudio} />
+    <b>Alternativ Hero Live</b>
+    <Story of={TeaserAlternativAvStories.AlternativHeroLive} />
+    <b>Alternativ 100% Video</b>
+    <Story of={TeaserAlternativAvStories.Alternativ100Video} />
+    <b>Alternativ 100% Audio</b>
+    <Story of={TeaserAlternativAvStories.Alternativ100Audio} />
+    <b>Alternativ 100% Live</b>
+    <Story of={TeaserAlternativAvStories.Alternativ100Live} />
+    <b>Alternativ 50% Video</b>
+    <Story of={TeaserAlternativAvStories.Alternativ50Video} />
+    <b>Alternativ 50% Audio</b>
+    <Story of={TeaserAlternativAvStories.Alternativ50Audio} />
+    <b>Alternativ 50% Live</b>
+    <Story of={TeaserAlternativAvStories.Alternativ50Live} />
+</Canvas>

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

@@ -0,0 +1,111 @@
+import { addLabel, removeLabel, changeTeaserSize } from './labelHelper'
+import { addCommentLink } from './jsonHelper'
+import teaser from './teaser_alternativ.hbs'
+import heroTeaser_video from './fixtures/teaser_alternative_hero_serif_video.json'
+import heroTeaser_audio from './fixtures/teaser_alternative_hero_serif_audio.json'
+import heroTeaser_live from './fixtures/teaser_alternative_hero_serif_live.json'
+import teaser100_video from './fixtures/teaser_alternative_100_serif_video.json'
+import teaser100_audio from './fixtures/teaser_alternative_100_serif_audio.json'
+import teaser100_live from './fixtures/teaser_alternative_100_serif_live.json'
+import teaser50_video from './fixtures/teaser_alternative_50_serif_video.json'
+import teaser50_audio from './fixtures/teaser_alternative_50_serif_audio.json'
+import teaser50_live from './fixtures/teaser_alternative_50_serif_live.json'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/AV-Alternativ',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            viewports: [360, 1024],
+        },
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['hero', '100', '50'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: 'hero',
+                },
+            },
+        },
+    },
+
+    decorators: [
+        (Story) => {
+            return `<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">  
+             ${Story()} 
+             </div></div>`
+        },
+    ],
+}
+
+export const AlternativHeroVideo = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero Video',
+    args: heroTeaser_video.logicItem.includeModel,
+}
+
+export const AlternativHeroAudio = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero Audio',
+    args: heroTeaser_audio.logicItem.includeModel,
+}
+
+export const AlternativHeroLive = {
+    render: Template.bind({}),
+    name: 'Alternativ Hero Live',
+    args: heroTeaser_live.logicItem.includeModel,
+}
+
+export const Alternativ100Video = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 Video',
+    args: teaser100_video.logicItem.includeModel,
+}
+
+export const Alternativ100Audio = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 Audio',
+    args: teaser100_audio.logicItem.includeModel,
+}
+
+export const Alternativ100Live = {
+    render: Template.bind({}),
+    name: 'Alternativ 100 Live',
+    args: teaser100_live.logicItem.includeModel,
+}
+
+export const Alternativ50Video = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 Video',
+    args: teaser50_video.logicItem.includeModel,
+}
+
+export const Alternativ50Audio = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 Audio',
+    args: teaser50_audio.logicItem.includeModel,
+}
+
+export const Alternativ50Live = {
+    render: Template.bind({}),
+    name: 'Alternativ 50 Live',
+    args: teaser50_live.logicItem.includeModel,
+}

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

@@ -0,0 +1,57 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserEventCalendarStories from './teaser_event_calendar.stories'
+
+<Meta of={TeaserEventCalendarStories} />
+
+# Standard-Teaser
+
+## Beschreibung
+
+Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
+
+<b>Standard 33 Single Event:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />
+
+<b>Standard 33 Two Events:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />
+
+<b>Standard 33 Multiple Events:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />{' '}
+
+## Sub-Komponenten
+
+Die Standard-Teaser-Komponente inkludiert folgende Komponenten:
+
+<ul>
+    <li>
+        components/teaser/components/<b>teaser\_lead</b>
+    </li>
+    <li>
+        components/base/<b>link</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_heading</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_text</b>
+    </li>
+    <li>
+        components/teaser/components/<b>teaser\_byline</b>
+    </li>
+</ul>
+
+## Verwendung
+
+Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_standard_event}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserEventCalendarStories.Teaser100} />
+    <Story of={TeaserEventCalendarStories.Teaser100KeineEventsInDerZukunft} />
+</Canvas>

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

@@ -0,0 +1,92 @@
+import teaserEventCalendar from '../../components/teaser/teaser_event_calendar.hbs'
+import teaserEventCalendar100Serif from './fixtures/teaser_event_calendar_100_serif.json'
+import teaserEventCalendarWithNoFutureEventsData from './fixtures/teaser_event_calendar_100_no_future_events.json'
+
+const TemplateEventCalendarTeaser = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return teaserEventCalendar({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Eventkalender',
+
+    parameters: {
+        layout: 'fullscreen',
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['50', '100'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: '100',
+                },
+            },
+        },
+    },
+
+    decorators: [
+        (Story) => {
+            return `<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">  
+             ${Story()} 
+             </div></div>`
+        },
+    ],
+}
+
+export const Teaser100 = {
+    render: TemplateEventCalendarTeaser.bind({}),
+    name: 'Teaser 100',
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['50', '100'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: '100',
+                },
+            },
+        },
+    },
+
+    args: teaserEventCalendar100Serif.logicItem.includeModel,
+}
+
+export const Teaser100KeineEventsInDerZukunft = {
+    render: TemplateEventCalendarTeaser.bind({}),
+    name: 'Teaser 100 Keine Events in der Zukunft',
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['50', '100'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: '100',
+                },
+            },
+        },
+    },
+
+    args: teaserEventCalendarWithNoFutureEventsData.logicItem.includeModel,
+}

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

@@ -0,0 +1,35 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserIndextextStories from './teaser_indextext.stories'
+
+<Meta of={TeaserIndextextStories} />
+
+# Indextext-Teaser
+
+## Beschreibung
+
+## Props
+
+Die Indextext-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
+
+-   title
+-   shorttext
+-   shorttext
+-   teaserSize
+-   teaserType
+
+## Verwendung
+
+Die Indextext-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_indextext}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserIndextextStories.TextMitHintergrund100} />
+    <Story of={TeaserIndextextStories.TextMitBox100} />
+    <Story of={TeaserIndextextStories.HintergrundOrange100} />
+    <Story of={TeaserIndextextStories.TextMitHintergrund50} />
+</Canvas>
+
+<ArgsTable story="Text mit Hintergrund 100" />