hr-design-system-handlebars 1.11.10 → 1.11.11

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

@@ -1,163 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import 'core-js/actual/structured-clone'
-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'
-
-<Meta
-    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 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 })
-}
-
-# 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}}
-```
-
-<Preview withToolbar>
-    <b>Alternativ Hero</b>
-    <Story name="Alternativ Hero" args={heroTeaser.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Alternativ Hero mit Kommentaren"
-        args={heroTeaserWithComments.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Alternativ Hero mit Label" args={heroTeaserWithLabel.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Alternativ Hero mit externen Link Dokument"
-        args={heroTeaserLink.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Alternativ Hero mit Sendungsdokument"
-        args={heroTeaserProgram.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 100%</b>
-    <Story name="Alternativ 100" args={teaser100.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 100% mit externem Link</b>
-    <Story name="Alternativ 100 mit externem Link" args={teaser100Link.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 50%</b>
-    <Story name="Alternativ 50" args={teaser50.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Alternativ 50 ohne Teaserbild"
-        args={teaser50WithoutTeaserImage.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 50% mit externem Link</b>
-    <Story name="Alternativ 50 mit externem Link" args={teaser50Link.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Alternativ 50 mit Download" args={teaser50Download.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>

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

@@ -1,142 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import 'core-js/actual/structured-clone'
-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'
-
-<Meta
-    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 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 })
-}
-
-# 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}}
-```
-
-<Preview withToolbar>
-    <b>Alternativ Hero Video</b>
-    <Story name="Alternativ Hero Video" args={heroTeaser_video.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ Hero Audio</b>
-    <Story name="Alternativ Hero Audio" args={heroTeaser_audio.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ Hero Live</b>
-    <Story name="Alternativ Hero Live" args={heroTeaser_live.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 100% Video</b>
-    <Story name="Alternativ 100 Video" args={teaser100_video.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 100% Audio</b>
-    <Story name="Alternativ 100 Audio" args={teaser100_audio.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 100% Live</b>
-    <Story name="Alternativ 100 Live" args={teaser100_live.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 50% Video</b>
-    <Story name="Alternativ 50 Video" args={teaser50_video.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 50% Audio</b>
-    <Story name="Alternativ 50 Audio" args={teaser50_audio.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <b>Alternativ 50% Live</b>
-    <Story name="Alternativ 50 Live" args={teaser50_live.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>

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

@@ -1,131 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-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'
-
-<Meta
-    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 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 })
-}
-
-# 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="Teaser 100"
-        argTypes={{
-            teaserSize: {
-                control: {
-                    type: 'select',
-                    options: ['50', '100'],
-                },
-                description: 'Teaser Größe',
-                table: {
-                    defaultValue: {
-                        summary: '100',
-                    },
-                },
-            },
-        }}
-        args={teaserEventCalendar100Serif.logicItem.includeModel}
-    >
-        {TemplateEventCalendarTeaser.bind({})}
-    </Story>
-    <Story
-        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}
-    >
-        {TemplateEventCalendarTeaser.bind({})}
-    </Story>
-</Preview>

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

@@ -1,111 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import teaser from './teaser_indextext.hbs'
-import dataTeserIndextext100Accented from './fixtures/teaser_indextext_100_accented.json'
-import dataTeserIndextext100Boxed from './fixtures/teaser_indextext_100_boxed.json'
-import dataTeserIndextext100Highlighted from './fixtures/teaser_indextext_100_highlighted.json'
-import dataTeserIndextext50Accented from './fixtures/teaser_indextext_50_accented.json'
-
-<Meta
-    title="Komponenten/Teaser/Indextext"
-    parameters={{
-        layout: 'fullscreen',
-    }}
-    argTypes={{
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['50', '100'],
-            },
-            description: 'Teaser Größe',
-            table: {
-                defaultValue: {
-                    summary: '100',
-                },
-            },
-        },
-        teasertype: {
-            control: {
-                type: 'select',
-                options: ['accented', 'boxed', 'highlighted'],
-            },
-            description: 'Teaser Typ',
-            table: {
-                defaultValue: {
-                    summary: 'accented',
-                },
-            },
-        },
-    }}
-    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 })
-}
-
-# Indextext-Teaser
-
-## Beschreibung
-
-## Props
-
-Die Indextext-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
-
-<ul>
-    <li>
-        <b>title</b>
-    </li>
-    <li>
-        <b>shorttext</b>
-    </li>
-    <li>
-        <b>teaserSize</b>
-    </li>
-    <li>
-        <b>teaserType</b>
-    </li>
-</ul>
-
-## Verwendung
-
-Die Indextext-Teaser-Komponente wird in handlebars wie folgt eingebaut:
-
-```html
-{{> components/teaser/teaser_indextext}}
-```
-
-<Preview withToolbar>
-    <Story
-        name="Text mit Hintergrund 100"
-        args={dataTeserIndextext100Accented.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story name="Text mit Box 100" args={dataTeserIndextext100Boxed.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Hintergrund orange 100"
-        args={dataTeserIndextext100Highlighted.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Text mit Hintergrund 50"
-        args={dataTeserIndextext50Accented.logicItem.includeModel}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-<ArgsTable story="Text mit Hintergrund 100" />

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

@@ -1,39 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
-import teaser from './teaser_logic.hbs'
-import index_site from '../fixtures/teaser_index.json'
-
-<Meta
-    title="Komponenten/Teaser/Logic"
-    parameters={{
-        layout: 'fullscreen',
-    }}
-    argTypes={{}}
-    decorators={[
-        (Story) => {
-            return `<div class="grid bg-white grid-page">   
-                            <div class="grid grid-cols-12 py-6 bg-white sm:px-9.5 col-full sm:col-main 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 })
-}
-
-# Header
-
-Ein toller Einleitungstext für unsere `Teaser` Komponente:
-
-<Preview withToolbar>
-    <Story name="logic" args={index_site}>
-        {Template.bind({})}
-    </Story>
-</Preview>