npm - hr-design-system-handlebars - Versions diffs - 1.11.10 → 1.11.11 - Mend

hr-design-system-handlebars 1.11.10 → 1.11.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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,
+}