hr-design-system-handlebars 1.11.9 → 1.11.11

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

@@ -1,200 +0,0 @@
-import {
-    ArgsTable,
-    Meta,
-    Story,
-    Canvas,
-    Preview,
-    ColorPalette,
-    ColorItem,
-} from '@storybook/addon-docs'
-
-import label from './label.hbs'
-
-<Meta
-    title="Komponenten/Label"
-    argTypes={{
-        _type: {
-            control: {
-                type: 'select',
-                labels: {
-                    'analysis': 'Analyse',
-                    'event': 'Event',
-                    'comment': 'Kommentar',
-                    'media': 'Medieninhalte',
-                    'breakingnews': 'Eilmeldung',
-                    'der-tag-in-hessen': 'Der Tag in Hessen',
-                    'glosse': 'Glosse',
-                    'fragen-und-antworten': 'Fragen und Antworten',
-                    'infografik': 'Infografik',
-                    'interaktiv': 'Interaktiv',
-                    'program': 'Sendung',
-                    'download': 'Download',
-                    'pm': 'Pressemitteilung',
-                    'liveticker': 'Liveticker',
-                    'ticker': 'Ticker',
-                    'livestream': 'Livestream',
-                    'live': 'Live',
-                    'livechat': 'Livechat',
-                    'buliticker': 'Bundesliga-Ticker',
-                    'social-tv': 'Social-TV',
-                    'blog': 'Blog',
-                    'kurzmeldung': 'Kurzmeldung',
-                },
-                options: [
-                    '',
-                    'analysis',
-                    'blog',
-                    'buliticker',
-                    'der-tag-in-hessen',
-                    'download',
-                    'breakingnews',
-                    'event',
-                    'fragen-und-antworten',
-                    'glosse',
-                    'infografik',
-                    'interaktiv',
-                    'comment',
-                    'live',
-                    'livechat',
-                    'livestream',
-                    'liveticker',
-                    'media',
-                    'pm',
-                    'program',
-                    'social-tv',
-                    'ticker',
-                    'kurzmeldung',
-                ],
-            },
-            description: 'Art des Labels',
-            table: {
-                defaultValue: {
-                    summary: 'media',
-                },
-            },
-        },
-        _text: {
-            control: 'text',
-            description: 'Beschriftung des Labels',
-        },
-    }}
-/>
-
-export const Template = ({ _type, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return label({ _type, ...args })
-}
-
-# Label
-
-Teaser auf Übersichtsseiten können mit Hilfe von Labels optisch hervorgehoben werden (z.B. als Kommentar, Liveticker, Eilmeldung, etc.).
-Folgende Ausprägungen von Labels stehen hierfür zur Verfügung:
-
-<Preview withToolbar>
-    <Story
-        name="Download"
-        args={{
-            _type: 'download',
-            _text: 'Download',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Eilmeldung"
-        args={{
-            _type: 'breakingnews',
-            _text: 'Eilmeldung',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Event"
-        args={{
-            _type: 'event',
-            _text: 'Event',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Infografik"
-        args={{
-            _type: 'infografik',
-            _text: 'Infografik',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Kommentar"
-        args={{
-            _type: 'comment',
-            _text: 'Kommentar',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Liveticker"
-        args={{
-            _type: 'liveticker',
-            _text: 'Liveticker',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Media"
-        args={{
-            _type: 'media',
-            _text: 'Media',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Pressemitteilung"
-        args={{
-            _type: 'pm',
-            _text: 'Pressemitteilung',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Sendung"
-        args={{
-            _type: 'program',
-            _text: 'Sendung',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Kurzmeldung"
-        args={{
-            _type: 'kurzmeldung',
-            _text: 'Kurzmeldung',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-## Einbindung
-
-Die Komponente wird in Form eines Handlebar Partials eingebunden.
-
-```html
-{{> components/label/label.hbs type="liveticker" text="Liveticker"}}
-```
-
-Mit folgenden Parametern kann die Komponente konfiguriert werden.
-
-| Parameter  | Typ      | Mögliche Werte                                                                                                                                                                                                                                                     | Erläuterung                                      |
-| :--------- | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
-| **\_text** | `String` | Beliebiger Text                                                                                                                                                                                                                                                    | Die Beschriftung des Labels.                     |
-| **\_type** | `String` | `analysis`, `blog`, `bulitiker`, `der-tag-in-hessen`, `download`, `brealingnews`, `event`, `fragen-und-antworten`, `glosse`,`infografik`, `interaktiv`, `comment`, `live`, `livechat`, `livestream`, `liveticker`, `media`, `pm`, `program`, `social-tv`, `ticker` | Hiermit wird das Aussehen des Labels festgelegt. |

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

@@ -1,144 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import 'core-js/actual/structured-clone'
-import page from './page.hbs'
-import NavigationData from '../site_header/fixtures/site_header_default.json'
-import NavigationData2 from '../site_header/fixtures/site_header_mit_warnung.json'
-import NavigationData3 from '../site_header/fixtures/site_header_mit_submenu.json'
-//import NavigationData4 from '../site_header/fixtures/site_header_mit_submenu_service_selected.json'
-
-import hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.json'
-import audio_player_teaser from '../teaser/fixtures/teaser_standard_50_serif_audio.json'
-const NavigationDataWithTeaser = structuredClone(
-    Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
-)
-const NavigationDataWithTeaser2 = structuredClone(
-    Object.assign({}, NavigationData2, hero_teaser.logicItem.includeModel)
-)
-const NavigationDataWithTeaser3 = structuredClone(
-    Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
-)
-
-<Meta
-    title="Komponenten/Page/Page"
-    argTypes={{}}
-    parameters={{
-        chromatic: {
-            viewports: [360, 768, 1024]
-        },
-        layout: 'fullscreen',
-        docs: { inlineStories : false, iframeHeight: 400 }
-    }}
-/>
-
-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 page({ brand, ...args })
-}
-
-# Page (allgemein)
-
-Das Grundgerüst für das HTML-Markup einer Seite (in diesem Fall eine Index-Seite bzw. Übersichtsseite).
-Stand 2023: Inhaltsseiten werden derzeit noch nicht berücksichtigt.
-Für gemischte Inhalte siehe ```Player-Interaktion```
-
-# Grundaufbau
-Um eine Seite zu erzeugen ist ein initiales HTML-Markup notwendig. Der Kopf ```<head>``` ist dabei statisch,
-Inhalte werden im ```<body>```-Tag abgelegt. Der Kopf entspricht einem klassischen HTML-Kopf mit Titel und Metadaten-Angaben.
-
-## Markup im Kopf
-```html
-<!DOCTYPE html>
-<html 
-class="no-js no-js-burgerMenu preload noMicroInteraction"
-data-theme="hessenschau" 
-lang="de"
->
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
-<title>hessenschau.de | Nachrichten aus Hessen</title>
-<meta name="application-name" content="hessenschau.de" />
-<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
-<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
-<meta name="publisher" content="hessenschau.de" />
-<meta name="language" content="Deutsch" />
-</head>
-
-<body itemscope itemtype="http://schema.org/WebPage">
-<div class="js-pageSwap">
-
-MARKUP FÜR INHALTE ...              
-
-<div>    
-</body>
-</html>
-```
-## Markup für Inhalte
-
-Initial wird die Seitennavigation - das Menü - der Seite eingefügt. Wahlweise Abwandlungen der Seitennavigation 
-(mit Subnavigation oder Unwetterwarnung), die über unterschiedlichen Daten-JSONS ausgeformt werden. Die Daten-JSONS hierfür liegen 
-unter ```components/site_header/fixtures``` und die Komponente selber:
-
-```html
-{{> components/site_header/header }}   
-```
-Dann folgen die Inhalte in diesem Fall Teaser, die über das Grid-Layout angeordnet werden. Die Komponenten für die Teaser
-liegen unter ```components/teaser/``` und lauten auf ```teaser_``` und dessen Ausprägung:
-<ul>
-    <li>standard (Standard => Bild oben, Text darunter)</li>
-    <li>alternativ (Alternativ => Bild links, Text rechts)</li>
-    <li>event_calendar (Event-Kalender)</li>
-    <li>poster (Poster => Text auf Bild)</li>
-    <li>indextext (Nur Text)</li>
-    <li>stage (Stage => Sonderform über die ganze Seite)</li>
-</ul>
-
-Auch hier bestimmen die Daten-JSONS, das Bild und den Text. Die Daten-JSONS hierfür liegen 
-unter ```components/teaser/fixtures``` der Aufruf der Komponente selber:
-
-```html
- {{> components/teaser/teaser_standard }} 
-```
-Gekapselt wird die Teaser-Komponente in einer ```<section>```. Es können beliebig viele Sections mit entsprechenden Teaser-Komponenten
-in das folgende Markup angelegt werden:
-
- ```html           
-<main onclick="void(0)" role="main" id="content" class="flex items-center justify-center">
-    <div class="grid grid-page">
-        <div class="{{> components/grid/grid_group_wrapper_classes }}">
-            
-            <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
-                {{> components/teaser/teaser_standard }}
-            </section>
-             WEITERE TEASER...
-        </div>
-    </div>
-</main>
-
-</div>
-```
-Die Ausformung der Teaser basiert immer auf dem selben Daten-JSON, d.h. Bild und Texte sind immer identisch, lediglich die Größe und der
-Teaser-Typ variieren.
-
-<Canvas withToolbar>
-    <Story name="Default" args={NavigationDataWithTeaser}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-<Canvas>
-    <Story name="Mit Warnung" args={NavigationDataWithTeaser2}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-<Canvas>
-    <Story name="Mit Subnavigation" args={NavigationDataWithTeaser3}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-<ArgsTable story="Default" />

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

@@ -1,36 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import 'core-js/actual/structured-clone'
-import page from './page_pagination.hbs'
-import navigationData from '../site_header/fixtures/site_header_default.json'
-import mixedContent from '../page/fixtures/page_pagination.json'
-const NavigationDataWithMixedContent = structuredClone(
-    Object.assign({}, navigationData, mixedContent)
-)
-
-<Meta
-    title="Komponenten/Page/Page"
-    argTypes={{}}
-    parameters={{
-        chromatic: {
-            viewports: [360, 768, 1024]
-        },
-        layout: 'fullscreen',
-        docs: { inlineStories : false, iframeHeight: 400 }
-    }}
-/>
-
-
-
-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 page({brand,...args})
-}
-
-<Canvas withToolbar>
-    <Story name="Mit Pagination" args={NavigationDataWithMixedContent}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-

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

@@ -1,43 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import 'core-js/actual/structured-clone'
-import page from './page_players.hbs'
-import AudioDataMixed from '../page/fixtures/page.json'
-
-<Meta
-    title="Komponenten/Page/Page"
-    argTypes={{}}
-    parameters={{
-        chromatic: {
-            viewports: [360, 768, 1024]
-        },
-        layout: 'fullscreen',
-        docs: { inlineStories : false, iframeHeight: 400 }
-    }}
-/>
-
-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 page({brand,...args})
-}
-
-
-# Page (gemischte Inhalte)
-
-Hier werden nur gemischte Inhalte betrachtet. Hierfür werden Daten-JSONS unterschiedlicher
-Ausprägung (Audio, Podcast) gemischt und herangezogen. Um einer Komponente diese spezifische Inhalte zu übergeben 
-wird sie wie folgt aufgerufen:
-
-```html
-{{> components/teaser/teaser_standard this.teaser_standard_50_audio.logicItem.includeModel}}
-{{> components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}}
-```
-
-<Canvas>
-    <Story name="Player-Interaktion" args={AudioDataMixed}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-<ArgsTable story="Default" />

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

@@ -1,97 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
-import cluster from './teaser_cluster.hbs'
-import clusterTeaser100 from '../fixtures/cluster_teaser_100.json'
-import clusterTeaser50 from '../fixtures/cluster_teaser_50.json'
-import clusterTeaser33 from '../fixtures/cluster_teaser_33.json'
-import clusterTeaserOrdered100 from '../fixtures/cluster_teaser_ordered_100.json'
-import clusterTeaserOrdered50 from '../fixtures/cluster_teaser_ordered_50.json'
-import clusterTeaserOrdered33 from '../fixtures/cluster_teaser_ordered_33.json'
-import clusterTeaserExtern100 from '../fixtures/cluster_teaser_extern_100.json'
-import clusterTeaserExtern50 from '../fixtures/cluster_teaser_extern_50.json'
-import clusterTeaserExtern33 from '../fixtures/cluster_teaser_extern_33.json'
-import clusterTeaserGenre100 from '../fixtures/cluster_teaser_100_genre.json'
-import clusterTeaserGenre50 from '../fixtures/cluster_teaser_50_genre.json'
-import clusterTeaserGenre33 from '../fixtures/cluster_teaser_33_genre.json'
-import clusterTeaserImage100 from '../fixtures/cluster_teaser_100_image.json'
-import clusterTeaserImage50 from '../fixtures/cluster_teaser_50_image.json'
-import clusterTeaserImage33 from '../fixtures/cluster_teaser_33_image.json'
-import PodcastChannelClusterTeaser from '../fixtures/cluster_teaser_Podcast_Channel.json'
-import clusterTeaserOrdered33LongTitle from '../fixtures/cluster_teaser_33_long_title.json'
-
-<Meta
-    title="Komponenten/Teaser/Cluster"
-    parameters={{
-        layout: '',
-    }}
-    argTypes={{}}
-    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 cluster({ brand, ...args })
-}
-
-<Preview withToolbar>
-    <Story name="Kurzmeldungen 100" args={clusterTeaser100}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Kurzmeldungen 50" args={clusterTeaser50}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Kurzmeldungen 33" args={clusterTeaser33}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Schlagzeilen mit Genrebild 100" args={clusterTeaserGenre100}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Schlagzeilen mit Genrebild 50" args={clusterTeaserGenre50}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Schlagzeilen mit Genrebild 33" args={clusterTeaserGenre33}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Schlagzeilen mit Teaserbild 100" args={clusterTeaserImage100}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Schlagzeilen mit Teaserbild 50" args={clusterTeaserImage50}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Schlagzeilen mit Teaserbild 33" args={clusterTeaserImage33}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Meistgeklickt/Wanda 100" args={clusterTeaserOrdered100}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Meistgeklickt/Wanda 50" args={clusterTeaserOrdered50}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Meistgeklickt/Wanda 33" args={clusterTeaserOrdered33}>
-        {Template.bind({})}
-    </Story>
-    <Story name="tagesschau/sportschau 100" args={clusterTeaserExtern100}>
-        {Template.bind({})}
-    </Story>
-    <Story name="tagesschau/sportschau 50" args={clusterTeaserExtern50}>
-        {Template.bind({})}
-    </Story>
-    <Story name="tagesschau/sportschau 33" args={clusterTeaserExtern33}>
-        {Template.bind({})}
-    </Story>
-    <Story name="PodcastEpisoden ClusterTeaser" args={PodcastChannelClusterTeaser}>
-        {Template.bind({})}
-    </Story>
-    <Story name="Meistgeklickt-Box mit langem Titel" args={clusterTeaserOrdered33LongTitle}>
-        {Template.bind({})}
-    </Story>
-</Preview>

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

@@ -1,78 +0,0 @@
-import { ArgsTable, Meta, Story, Preview } from '@storybook/addon-docs'
-import byline from './teaser_byline.hbs'
-import teaserWithoutComments from '../fixtures/teaser_standard_hero_serif.json'
-import teaserWithComments from '../fixtures/teaser_standard_hero_serif_comments.json'
-import teaserWithoutTeaserinfo from '../fixtures/teaser_comments_without_teaserinfo.json'
-
-<Meta title="Komponenten/Teaser/Komponenten/Byline" />
-
-export const Template = ({ ...args }) => {
-    return byline({ ...args })
-}
-
-# Byline
-
-## Beschreibung
-
-In der Byline-Komponente werden folgende Teaser-Zusatzinformationen angezeigt:
-
-<ul>
-    <li><b>Datum</b> (mit oder ohne Uhrzeit)</li>
-    <li><b>Strukturknoten</b> (Rubrik)</li>
-    <li><b>Autor(en)</b></li>
-    <li><b>Link zu den Kommentaren des Artikels</b> (mit aktueller Kommentar-Anzahl)</li>
-</ul>
-
-Alle Informationen sind optional. Der Kommentar-Link wird per SSI eingebunden und ist in components/teaser/components/teaser_comments.hbs implementiert.
-
-## Sub-Komponenten
-
-Die Byline-Komponente inkludiert folgende Komponenten:
-
-<ul>
-    <li>components/base/<b>loadSSI</b></li>
-    <li>components/teaser/components/<b>teaser_comments</b></li>
-</ul>
-
-
-## Props
-
-Die Byline-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
-
-<ul>
-    <li><b>teaserInfo</b></li>
-    <li><b>teaserInfo.showTeaserInfo</b></li>
-    <li><b>teaserInfo.showTeaserInfoDate</b></li>
-    <li><b>teaserInfo.showTeaserInfoDateTime</b></li>
-    <li><b>teaserInfo.showTeaserInfoSection</b></li>
-    <li><b>teaserDate</b></li>
-    <li><b>teaserDate.htmlDateTime</b></li>
-    <li><b>teaserDate.date</b></li>
-    <li><b>teaserDate.dateSeparatorTime</b></li>
-    <li><b>documentSection</b></li>
-    <li><b>profiles</b></li>
-</ul>
-
-
-## Verwendung
-
-Die Byline-Komponente wird in handlebars wie folgt eingebaut:
-
-```html
-{{> components/teaser/components/teaser_byline}}    
-```
-
-
-<Preview withToolbar>
-    <Story name="default" args={teaserWithoutComments.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="with comments" args={teaserWithComments.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-    <Story name="comments only" args={teaserWithoutTeaserinfo.logicItem.includeModel}>
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-<ArgsTable story="default" />