hr-design-system-handlebars 1.11.9 → 1.11.11

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

@@ -1,130 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import teaser from './teaser_poster.hbs'
-import teserPosterLg from './fixtures/teaser_poster_lg.json'
-import teserPosterMd from './fixtures/teaser_poster_md.json'
-import teserPosterMdLabel from './fixtures/teaser_poster_md_label.json'
-
-<Meta
-    title="Komponenten/Teaser/Poster"
-    parameters={{
-        layout: 'fullscreen',
-        chromatic: {
-            diffThreshold: 0.5,
-        },
-    }}
-    argTypes={{
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['50', '33'],
-            },
-            description: 'Teaser Größe',
-            table: {
-                defaultValue: {
-                    summary: '50',
-                },
-            },
-        },
-    }}
-    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 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 })
-}
-
-# Poster-Teaser
-
-## Beschreibung
-
-Der Poster-Teaser besteht aus 3 übereinanderliegenden Ebenen.
-
-Unterste-Ebene: <b>Bild (1:1)</b><br/>
-Mittlere Ebene: <b>Dachzeile und Titel</b> + <b>Farbverlauf</b> von schwarz nach transparent<br/>
-Oberste Ebene (verlinkt): <b>Zusatztext</b> ("zum Artikel" o.ä.)<br/>
-
-Alle Ebenen erstrecken sich über die komplette Größe des 1:1-Bilds.
-
-Alle enthaltenen Inhalte sind aria-hidden. Für screenreader wurde ein extra span eingebaut mit class="sr-only".<br/>
-Inhalt dieses spans: Zusatztext + ": " + Titel
-
-Der Poster-Teaser soll nur als 50%- bzw. 33%-Teaser verwendet werden. Diese Restriktion muss cms-seitig implementiert werden.
-
-## Sub-Komponenten
-
-Die Poster-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>
-</ul>
-
-## Props
-
-Die Poster-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
-
-<ul>
-    <li>
-        <b>topline</b>
-    </li>
-    <li>
-        <b>title</b>
-    </li>
-    <li>
-        <b>teaserSize</b>
-    </li>
-    <li>
-        <b>teaserType</b>
-    </li>
-    <li>
-        <b>teaserImage</b>
-    </li>
-    <li>
-        <b>content.imageVariant</b>
-    </li>
-    <li>
-        <b>isSerifHeading</b>
-    </li>
-    <li>
-        <b>link.readMoreText.readMoreLong</b>
-    </li>
-</ul>
-
-## Verwendung
-
-Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
-
-```html
-{{> components/teaser/teaser_poster}}
-```
-
-<Preview withToolbar>
-    <Story name="Poster 50" args={teserPosterLg.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Poster 33" args={teserPosterMd.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Poster 33 mit Label" args={teserPosterMdLabel.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-<ArgsTable story="Poster 50" />

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

@@ -1,53 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import teaser from './teaser_stage.hbs'
-import stageTeaserData from './fixtures/stage_teaser.json'
-import stageTeaserWideData from './fixtures/stage_teaser_wide.json'
-import stageTeaserDataWithEventtag from './fixtures/stage_teaser_eventtag.json'
-import stageTeaserDataForProgram from './fixtures/stage_teaser_program.json'
-
-<Meta
-    title="Komponenten/Teaser/Stage"
-    parameters={{
-        layout: 'fullscreen',
-        chromatic: {
-            viewports: [360, 768, 1024],
-            diffThreshold: 0.5
-        },
-    }}
-    argTypes={{}}
-    decorators={[
-        (Story) => {
-            return `<div class="grid grid-page"><div class="col-full gap-x-6 gap-y-6">  
-                ${Story()} 
-                </div></div>`
-        },
-    ]}
-/>
-
-export 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 })
-}
-
-# Stage-Teaser
-
-## Beschreibung
-
-<Preview withToolbar>
-    <b>Stage Teaser</b>
-    <Story name="Stage Teaser" args={stageTeaserData}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Stage Teaser Wide" args={stageTeaserWideData}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Stage Teaser with Event" args={stageTeaserDataWithEventtag}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Stage Teaser Program" args={stageTeaserDataForProgram}>
-        {Template.bind({})}
-    </Story>
-</Preview>

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

@@ -1,170 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import teaser from './teaser_standard.hbs'
-import teaserHeroSerifWithLabel from './fixtures/teaser_standard_hero_serif_label.json'
-import teaserHeroSerifWithComments from './fixtures/teaser_standard_hero_serif_comments.json'
-import teaserHeroLink from './fixtures/teaser_standard_hero_serif_link.json'
-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 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'
-import teaser100Download from './fixtures/teaser_standard_100_serif_download.json'
-import teaser100Link from './fixtures/teaser_standard_100_serif_link.json'
-import teaser100Program from './fixtures/teaser_standard_100_serif_program.json'
-import teaser50Link from './fixtures/teaser_standard_50_serif_link.json'
-import teaser33Link from './fixtures/teaser_standard_33_serif_link.json'
-import teaser25Link from './fixtures/teaser_standard_25_serif_link.json'
-import teaser33LongGeotag from './fixtures/teaser_standard_33_long_geotag.json'
-
-<Meta
-    title="Komponenten/Teaser/Standard"
-    parameters={{
-        layout: 'fullscreen',
-        chromatic: {
-            viewports: [360, 1024],
-            diffThreshold: 0.5,
-        },
-    }}
-    argTypes={{
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['hero', '100', '50', '33', '25'],
-            },
-            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 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 })
-}
-
-# Standard-Teaser
-
-## Beschreibung
-
-Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
-
-<b>Standard Hero:</b> <br />
-Desktop = Text unter dem Bild <br />
-Mobile = Text unter dem Bild <b>ohne</b> Teasertext <br />
-
-<b>Standard 100%, 50%, 33%:</b> <br />
-Desktop = Text unter dem Bild <br />
-Mobile = Text unter dem Bild ohne Teasertext <br />
-
-<b>Standard 25%:</b> <br />
-Desktop = Text unter dem Bild ohne Teasertext <br />
-Mobile = Bild(1x1) neben Text ohne 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}}
-```
-
-<Preview withToolbar>
-    <Story name="Standard Hero" args={teaserHeroSerif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard Hero mit Label" args={teaserHeroSerifWithLabel.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard Hero Mit Kommentaren"
-        args={teaserHeroSerifWithComments.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard Hero mit externem Link" args={teaserHeroLink.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 100" args={teaser100Serif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 100 mit externem Link" args={teaser100Link.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 100 mit Sendungsdokument" args={teaser100Program.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 50" args={teaser50Serif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard 50 ohne Teaserbild"
-        args={teaser50SerifWithoutTeaserImage.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 33" args={teaser33Serif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 33 mit externem Link" args={teaser33Link.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 25" args={teaser25Serif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard 25 ohne Teaserbild"
-        args={teaser25SerifWithoutTeaserimage.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 25 mit externem Link" args={teaser25Link.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 100 Mit Download" args={teaser100Download.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 33 mit langer Ortsmarke" args={teaser33LongGeotag.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>

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

@@ -1,95 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import teaser from './teaser_standard.hbs'
-
-import teaser50video from './fixtures/teaser_standard_50_serif_video.json'
-import teaser25video from './fixtures/teaser_standard_25_serif_video.json'
-import teaser50audio from './fixtures/teaser_standard_50_serif_audio.json'
-import teaser50podcast from './fixtures/teaser_standard_50_serif_podcast.json'
-import teaser25podcast from './fixtures/teaser_standard_25_serif_podcast.json'
-import teaser50audioLivestream from './fixtures/teaser_standard_50_serif_audio_livestream.json'
-import teaser25audio from './fixtures/teaser_standard_25_serif_audio.json'
-import teaser25audioLivestream from './fixtures/teaser_standard_25_serif_audio_livestream.json'
-import teaser50live from './fixtures/teaser_standard_50_serif_live.json'
-import teaser25live from './fixtures/teaser_standard_25_serif_live.json'
-
-<Meta
-    title="Komponenten/Teaser/AV-Standard"
-    parameters={{
-        layout: 'fullscreen',
-        chromatic: {
-            diffThreshold: 0.5,
-        },
-    }}
-    argTypes={{
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['hero', '100', '50', '33', '25'],
-            },
-            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 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 })
-}
-
-# Header
-
-Ein toller Einleitungstext für unsere `Teaser` Komponente:
-
-<Preview withToolbar>
-    <Story name="Standard 50% Video" args={teaser50video.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 25% Video" args={teaser25video.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 50% Video Livestream" args={teaser50live.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 25% Video Livestream" args={teaser25live.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 50% Audio" args={teaser50audio.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 25% Audio" args={teaser25audio.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 50% Podcast" args={teaser50podcast.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 25% Podcast" args={teaser25podcast.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard 50% Audio Livestream"
-        args={teaser50audioLivestream.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard 25% Audio Livestream"
-        args={teaser25audioLivestream.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>

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

@@ -1,150 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import teaser from './teaser_standard.hbs'
-import teaserAlternative from './teaser_alternativ.hbs'
-import teaser33SingleEventSerif from './fixtures/teaser_standard_33_serif_single_event.json'
-import teaser33SingleEventStatus from './fixtures/teaser_standard_33_serif_single_event_status.json'
-import teaser33TwoEventsSerif from './fixtures/teaser_standard_33_serif_two_events.json'
-import teaser33MultipleEventsSerif from './fixtures/teaser_standard_33_serif_multiple_events.json'
-import teaser50SingleEventSerif from './fixtures/teaser_standard_50_serif_single_event.json'
-import teaser100SingleEventSerif from './fixtures/teaser_standard_100_serif_single_event.json'
-import teaser100TwoEventsSerif from './fixtures/teaser_standard_100_serif_two_events.json'
-import teaserAlternative100SingleEventSerif from './fixtures/teaser_alternative_100_serif_single_event.json'
-import teaserAlternative100TwoEventsSerif from './fixtures/teaser_alternative_100_serif_two_events.json'
-
-<Meta
-    title="Komponenten/Teaser/Event"
-    parameters={{
-        layout: 'fullscreen',
-        chromatic: {
-            viewports: [360, 1024],
-            diffThreshold: 0.5,
-        },
-    }}
-    argTypes={{
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['33', '50', '100'],
-            },
-            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 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 const TemplateAlternative = (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 teaserAlternative({ brand, ...args })
-}
-
-# 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}}
-```
-
-<Preview withToolbar>
-    <Story name="Standard 33 Einzel-Event" args={teaser33SingleEventSerif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard 33 Einzel-Event abgesagt"
-        args={teaser33SingleEventStatus.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 33 zwei Events" args={teaser33TwoEventsSerif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Standard 33 mehrere Events"
-        args={teaser33MultipleEventsSerif.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 50 Einzel-Event" args={teaser50SingleEventSerif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 100 Einzel-Event" args={teaser100SingleEventSerif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Standard 100 zwei Events" args={teaser100TwoEventsSerif.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Alternativ 100 Einzel-Event"
-        args={teaserAlternative100SingleEventSerif.logicItem.includeModel}
-    >
-        {TemplateAlternative.bind({})}
-    </Story>
-    <Story
-        name="Alternativ 100 zwei Events"
-        args={teaserAlternative100TwoEventsSerif.logicItem.includeModel}
-    >
-        {TemplateAlternative.bind({})}
-    </Story>
-</Preview>