hr-design-system-handlebars 1.11.10 → 1.11.11

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

@@ -0,0 +1,210 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as GridStories from './grid.stories';
+
+import grid_group_100_item_100 from './grid_group_100_item_100.hbs'
+import grid_group_100_item_100_with_background from './grid_group_100_item_100_with_background.hbs'
+import grid_group_100_item_50 from './grid_group_100_item_50.hbs'
+import grid_group_100_item_33 from './grid_group_100_item_33.hbs'
+import grid_group_100_item_25 from './grid_group_100_item_25.hbs'
+import grid_group_66_item_100 from './grid_group_66_item_100.hbs'
+import grid_group_50_item_100 from './grid_group_50_item_100.hbs'
+import grid_group_33_item_100 from './grid_group_33_item_100.hbs'
+import grid_group_100_tabbed_50 from './grid_group_100_tabbed_50.hbs'
+import grid_group_100_tabbed_33 from './grid_group_100_tabbed_33.hbs'
+import grid_group_100_tabbed_25 from './grid_group_100_tabbed_25.hbs'
+
+<Meta of={GridStories} />
+
+export const Template01 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_100({ text, ...args })
+}
+export const Template02 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_100_with_background({ text, ...args })
+}
+export const Template03 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_50({ text, ...args })
+}
+export const Template04 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_33({ text, ...args })
+}
+export const Template05 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_25({ text, ...args })
+}
+export const Template06 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_66_item_100({ text, ...args })
+}
+export const Template07 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_50_item_100({ text, ...args })
+}
+export const Template08 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_33_item_100({ text, ...args })
+}
+export const Template09 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_tabbed_50({ text, ...args })
+}
+export const Template10 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_tabbed_33({ text, ...args })
+}
+export const Template11 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_tabbed_25({ text, ...args })
+}
+
+# Grid
+
+Das sog. "Grid" (engl.: Netz) bildet das Layout-Raster für eine Übersichtsseite und
+beschreibt die Einteilung einer Seite in horizontale - Zeilen - und vertikale - Spalten - Einheiten.
+Neben der Anordnung dr Elemente wird dabei auch explizit deren Dimensionierung vorgenommen.
+
+# Grundaufbau
+
+Um ein Grid für ein Template zu erzeugen muß zunächst das ein umschließendes Wrapper-Markup gebaut werden:
+
+```html
+<div class="grid grid-page">
+    <div class="{{> components/grid/grid_group_wrapper_classes }}">...</div>
+</div>
+```
+
+# Gruppe (grid-group)
+
+Im Wrapper wird eine sog. "Gruppe" erzeugt. Sie entspricht im Raster einer Zeile.
+Bei der Größe (\_size) sind auch kleinere Werte als "100" (siehe "Grid-Aufbau invers") zulässig. Finden jedoch keinen Anwendungsfall.
+
+Zusätzlich kann der Gruppe eine Hintergrund-Farbe vergeben werden.
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{#>components/grid/grid_group _size="100"}}
+```
+
+Mit folgenden Parametern kann die Komponente konfiguriert werden.
+
+| Parameter               | Typ    | Mögliche Werte     | Erläuterung                                        |
+| :---------------------- | :----- | :----------------- | :------------------------------------------------- | ---------------------------- |
+| **\_size**              | `Zahl` | Teilbare Vielfache | Entpsrechung des prozentualen Wertes (100% = 100)  |
+| **\_\_backgroundColor** | `Zahl` | 1,2,3...           | Definierte Farbwerte die der Zahl beigeordnet sind | Die Beschriftung des Labels. |
+
+# Objekt (grid-item)
+
+In einer Gruppe werden ein oder mehrerer sog. "Objekte" - Items - angelegt. Sie entsprechen im Raster einer oder mehrerer Spalten.
+Bei der Größe (\_size) wird hier keine prozentuale Entsprechung, wie bei der Gruppe angegeben, sondern dem Tailwind-Schema 12/12 = 100%,
+was einer `_size = 12` entspricht.
+Um 50% (6/12) zu realisieren gibt man bei `_size = 6` ein usf.
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{#>components/grid/grid_item _size="6"}}
+```
+
+Mit folgenden Parametern kann die Komponente konfiguriert werden.
+
+| Parameter  | Typ    | Mögliche Werte     | Erläuterung                                    |
+| :--------- | :----- | :----------------- | :--------------------------------------------- |
+| **\_size** | `Zahl` | Teilbare Vielfache | Entsprechung nach Tailwind-Schema 12/12 = 100% |
+
+# Anwendungsbeispiele
+
+### Grid 100%
+
+<Canvas>
+  <Story of={GridStories.Grid100} />
+</Canvas>
+
+### Grid 100% mit Hintergrund
+
+<Canvas>
+  <Story of={GridStories.Grid100MitHintergrund} />
+</Canvas>
+
+### Grid 50%
+
+<Canvas>
+  <Story of={GridStories.Grid50} />
+</Canvas>
+
+### Grid 33%
+
+<Canvas>
+  <Story of={GridStories.Grid33} />
+</Canvas>
+
+### Grid 25%
+
+<Canvas>
+  <Story of={GridStories.Grid25} />
+</Canvas>
+
+### Grid Tabbed 50%
+
+<Canvas>
+  <Story of={GridStories.GridTabbed50} />
+</Canvas>
+
+### Grid Tabbed 33%
+
+<Canvas>
+  <Story of={GridStories.GridTabbed33} />
+</Canvas>
+
+### Grid Tabbed 25%
+
+<Canvas>
+  <Story of={GridStories.GridTabbed25} />
+</Canvas>
+
+# Grid Aufbau invers
+
+Reguläre spannt sich die Gruppe zu 100% auf und die Größe der Objekte sind teilbare Vielfache davon:
+100 / 2 Objekte = 50 % pro Objekt oder 66% + 33,3%
+100 / 3 Objekte = 33,3 % pro Objekt
+100 / 4 Objekte = 25 % pro Objekt
+Mit inversem Aufbau ist gemeint, das die Gruppe die Größe vorgibt und die Objekte immer 100% haben:
+66 % / 2 Objekte = 100 % pro Objekt
+
+### Grid 66%
+
+<Canvas>
+  <Story of={GridStories.$66} />
+</Canvas>
+
+### Grid 50%
+
+<Canvas>
+  <Story of={GridStories.$50} />
+</Canvas>
+
+### Grid 33%
+
+<Canvas>
+  <Story of={GridStories.$33} />
+</Canvas>
+
+<ArgsTable story="Grid" />

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

@@ -0,0 +1,148 @@
+import grid_group_100_item_100 from './grid_group_100_item_100.hbs'
+import grid_group_100_item_100_with_background from './grid_group_100_item_100_with_background.hbs'
+import grid_group_100_item_50 from './grid_group_100_item_50.hbs'
+import grid_group_100_item_33 from './grid_group_100_item_33.hbs'
+import grid_group_100_item_25 from './grid_group_100_item_25.hbs'
+import grid_group_66_item_100 from './grid_group_66_item_100.hbs'
+import grid_group_50_item_100 from './grid_group_50_item_100.hbs'
+import grid_group_33_item_100 from './grid_group_33_item_100.hbs'
+import grid_group_100_tabbed_50 from './grid_group_100_tabbed_50.hbs'
+import grid_group_100_tabbed_33 from './grid_group_100_tabbed_33.hbs'
+import grid_group_100_tabbed_25 from './grid_group_100_tabbed_25.hbs'
+
+const Template01 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_100({ text, ...args })
+}
+
+const Template02 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_100_with_background({ text, ...args })
+}
+
+const Template03 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_50({ text, ...args })
+}
+
+const Template04 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_33({ text, ...args })
+}
+
+const Template05 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_item_25({ text, ...args })
+}
+
+const Template06 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_66_item_100({ text, ...args })
+}
+
+const Template07 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_50_item_100({ text, ...args })
+}
+
+const Template08 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_33_item_100({ text, ...args })
+}
+
+const Template09 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_tabbed_50({ text, ...args })
+}
+
+const Template10 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_tabbed_33({ text, ...args })
+}
+
+const Template11 = ({ text, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return grid_group_100_tabbed_25({ text, ...args })
+}
+
+export default {
+    title: 'Komponenten/grid',
+    argTypes: {},
+}
+
+export const Grid100 = {
+    render: Template01.bind({}),
+    name: 'Grid 100%',
+    args: {},
+}
+
+export const Grid100MitHintergrund = {
+    render: Template02.bind({}),
+    name: 'Grid 100% mit Hintergrund',
+    args: {},
+}
+
+export const Grid50 = {
+    render: Template03.bind({}),
+    name: 'Grid 50%',
+    args: {},
+}
+
+export const Grid33 = {
+    render: Template04.bind({}),
+    name: 'Grid 33%',
+    args: {},
+}
+
+export const Grid25 = {
+    render: Template05.bind({}),
+    name: 'Grid 25%',
+    args: {},
+}
+
+export const GridTabbed50 = {
+    render: Template09.bind({}),
+    name: 'Grid Tabbed 50%',
+    args: {},
+}
+
+export const GridTabbed33 = {
+    render: Template10.bind({}),
+    name: 'Grid Tabbed 33%',
+    args: {},
+}
+
+export const GridTabbed25 = {
+    render: Template11.bind({}),
+    name: 'Grid Tabbed 25%',
+    args: {},
+}
+
+export const $66 = {
+    render: Template06.bind({}),
+    name: '66%',
+    args: {},
+}
+
+export const $50 = {
+    render: Template07.bind({}),
+    name: '50%',
+    args: {},
+}
+
+export const $33 = {
+    render: Template08.bind({}),
+    name: '33%',
+    args: {},
+}

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

@@ -0,0 +1,54 @@
+import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import * as LabelStories from './label.stories';
+
+import label from './label.hbs'
+
+<Meta of={LabelStories} />
+
+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:
+
+<Canvas withToolbar>
+  <Story of={LabelStories.Download} />
+
+  <Story of={LabelStories.Eilmeldung} />
+
+  <Story of={LabelStories.Event} />
+
+  <Story of={LabelStories.Infografik} />
+
+  <Story of={LabelStories.Kommentar} />
+
+  <Story of={LabelStories.Liveticker} />
+
+  <Story of={LabelStories.Media} />
+
+  <Story of={LabelStories.Pressemitteilung} />
+
+  <Story of={LabelStories.Sendung} />
+
+  <Story of={LabelStories.Kurzmeldung} />
+</Canvas>
+
+## 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/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 }