hr-design-system-handlebars 1.11.9 → 1.11.11

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

@@ -0,0 +1,183 @@
+import label from './label.hbs'
+
+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 })
+}
+
+export default {
+    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 Download = {
+    render: Template.bind({}),
+    name: 'Download',
+
+    args: {
+        _type: 'download',
+        _text: 'Download',
+    },
+}
+
+export const Eilmeldung = {
+    render: Template.bind({}),
+    name: 'Eilmeldung',
+
+    args: {
+        _type: 'breakingnews',
+        _text: 'Eilmeldung',
+    },
+}
+
+export const Event = {
+    render: Template.bind({}),
+    name: 'Event',
+
+    args: {
+        _type: 'event',
+        _text: 'Event',
+    },
+}
+
+export const Infografik = {
+    render: Template.bind({}),
+    name: 'Infografik',
+
+    args: {
+        _type: 'infografik',
+        _text: 'Infografik',
+    },
+}
+
+export const Kommentar = {
+    render: Template.bind({}),
+    name: 'Kommentar',
+
+    args: {
+        _type: 'comment',
+        _text: 'Kommentar',
+    },
+}
+
+export const Liveticker = {
+    render: Template.bind({}),
+    name: 'Liveticker',
+
+    args: {
+        _type: 'liveticker',
+        _text: 'Liveticker',
+    },
+}
+
+export const Media = {
+    render: Template.bind({}),
+    name: 'Media',
+
+    args: {
+        _type: 'media',
+        _text: 'Media',
+    },
+}
+
+export const Pressemitteilung = {
+    render: Template.bind({}),
+    name: 'Pressemitteilung',
+
+    args: {
+        _type: 'pm',
+        _text: 'Pressemitteilung',
+    },
+}
+
+export const Sendung = {
+    render: Template.bind({}),
+    name: 'Sendung',
+
+    args: {
+        _type: 'program',
+        _text: 'Sendung',
+    },
+}
+
+export const Kurzmeldung = {
+    render: Template.bind({}),
+    name: 'Kurzmeldung',
+
+    args: {
+        _type: 'kurzmeldung',
+        _text: 'Kurzmeldung',
+    },
+}

package/src/stories/views/components/page/page.data.js

@@ -0,0 +1,17 @@
+import structuredClone from 'core-js-pure/actual/structured-clone'
+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 hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.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)
+)
+
+export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3 }

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

@@ -0,0 +1,110 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PageStories from './page.stories'
+
+<Meta of={PageStories} />
+
+# 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 of={PageStories.Default} />
+</Canvas>
+
+<Canvas>
+    <Story of={PageStories.MitWarnung} />
+</Canvas>
+
+<Canvas>
+    <Story of={PageStories.MitSubnavigation} />
+</Canvas>
+
+<ArgsTable story="Default" />

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

@@ -0,0 +1,50 @@
+import page from './page.hbs'
+import {
+    NavigationDataWithTeaser,
+    NavigationDataWithTeaser2,
+    NavigationDataWithTeaser3,
+} from './page.data.js'
+
+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 })
+}
+
+export default {
+    title: 'Komponenten/Page/Page',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'Default',
+    args: NavigationDataWithTeaser,
+}
+
+export const MitWarnung = {
+    render: Template.bind({}),
+    name: 'Mit Warnung',
+    args: NavigationDataWithTeaser2,
+}
+
+export const MitSubnavigation = {
+    render: Template.bind({}),
+    name: 'Mit Subnavigation',
+    args: NavigationDataWithTeaser3,
+}

package/src/stories/views/components/page/page_pagination.data.js

@@ -0,0 +1,8 @@
+import structuredClone from 'core-js-pure/actual/structured-clone'
+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)
+)
+
+export { NavigationDataWithMixedContent }

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

@@ -0,0 +1,8 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PagePaginationStories from './page_pagination.stories'
+
+<Meta of={PagePaginationStories} />
+
+<Canvas withToolbar>
+    <Story of={PagePaginationStories.MitPagination} />
+</Canvas>

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

@@ -0,0 +1,34 @@
+import { NavigationDataWithMixedContent } from './page_pagination.data.js'
+import page from './page_pagination.hbs'
+
+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 })
+}
+
+export default {
+    title: 'Komponenten/Page/Pagination',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const MitPagination = {
+    render: Template.bind({}),
+    name: 'Mit Pagination',
+    args: NavigationDataWithMixedContent,
+}

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

@@ -0,0 +1,21 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PagePlayerStories from './page_player.stories'
+
+<Meta of={PagePlayerStories} />
+
+# 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 of={PagePlayerStories.PlayerInteraktion} />
+</Canvas>
+
+<ArgsTable story="Default" />

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

@@ -0,0 +1,34 @@
+import page from './page_players.hbs'
+import AudioDataMixed from '../page/fixtures/page.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 page({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Page/Page mit Player',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: false,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const PlayerInteraktion = {
+    render: Template.bind({}),
+    name: 'Player-Interaktion',
+    args: AudioDataMixed,
+}