hr-design-system-handlebars 1.11.9 → 1.11.11

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

@@ -0,0 +1,32 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserClusterStories from './teaser_cluster.stories'
+
+<Meta of={TeaserClusterStories} />
+
+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 })
+}
+
+<Canvas withToolbar>
+    <Story of={TeaserClusterStories.Kurzmeldungen100} />
+    <Story of={TeaserClusterStories.Kurzmeldungen50} />
+    <Story of={TeaserClusterStories.Kurzmeldungen33} />
+    <Story of={TeaserClusterStories.SchlagzeilenMitGenrebild100} />
+    <Story of={TeaserClusterStories.SchlagzeilenMitGenrebild50} />
+    <Story of={TeaserClusterStories.SchlagzeilenMitGenrebild33} />
+    <Story of={TeaserClusterStories.SchlagzeilenMitTeaserbild100} />
+    <Story of={TeaserClusterStories.SchlagzeilenMitTeaserbild50} />
+    <Story of={TeaserClusterStories.SchlagzeilenMitTeaserbild33} />
+    <Story of={TeaserClusterStories.MeistgeklicktWanda100} />
+    <Story of={TeaserClusterStories.MeistgeklicktWanda50} />
+    <Story of={TeaserClusterStories.MeistgeklicktWanda33} />
+    <Story of={TeaserClusterStories.TagesschauSportschau100} />
+    <Story of={TeaserClusterStories.TagesschauSportschau50} />
+    <Story of={TeaserClusterStories.TagesschauSportschau33} />
+    <Story of={TeaserClusterStories.PodcastEpisodenClusterTeaser} />
+    <Story of={TeaserClusterStories.MeistgeklicktBoxMitLangemTitel} />
+</Canvas>

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

@@ -0,0 +1,146 @@
+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'
+
+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 })
+}
+
+export default {
+    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 Kurzmeldungen100 = {
+    render: Template.bind({}),
+    name: 'Kurzmeldungen 100',
+    args: clusterTeaser100,
+}
+
+export const Kurzmeldungen50 = {
+    render: Template.bind({}),
+    name: 'Kurzmeldungen 50',
+    args: clusterTeaser50,
+}
+
+export const Kurzmeldungen33 = {
+    render: Template.bind({}),
+    name: 'Kurzmeldungen 33',
+    args: clusterTeaser33,
+}
+
+export const SchlagzeilenMitGenrebild100 = {
+    render: Template.bind({}),
+    name: 'Schlagzeilen mit Genrebild 100',
+    args: clusterTeaserGenre100,
+}
+
+export const SchlagzeilenMitGenrebild50 = {
+    render: Template.bind({}),
+    name: 'Schlagzeilen mit Genrebild 50',
+    args: clusterTeaserGenre50,
+}
+
+export const SchlagzeilenMitGenrebild33 = {
+    render: Template.bind({}),
+    name: 'Schlagzeilen mit Genrebild 33',
+    args: clusterTeaserGenre33,
+}
+
+export const SchlagzeilenMitTeaserbild100 = {
+    render: Template.bind({}),
+    name: 'Schlagzeilen mit Teaserbild 100',
+    args: clusterTeaserImage100,
+}
+
+export const SchlagzeilenMitTeaserbild50 = {
+    render: Template.bind({}),
+    name: 'Schlagzeilen mit Teaserbild 50',
+    args: clusterTeaserImage50,
+}
+
+export const SchlagzeilenMitTeaserbild33 = {
+    render: Template.bind({}),
+    name: 'Schlagzeilen mit Teaserbild 33',
+    args: clusterTeaserImage33,
+}
+
+export const MeistgeklicktWanda100 = {
+    render: Template.bind({}),
+    name: 'Meistgeklickt/Wanda 100',
+    args: clusterTeaserOrdered100,
+}
+
+export const MeistgeklicktWanda50 = {
+    render: Template.bind({}),
+    name: 'Meistgeklickt/Wanda 50',
+    args: clusterTeaserOrdered50,
+}
+
+export const MeistgeklicktWanda33 = {
+    render: Template.bind({}),
+    name: 'Meistgeklickt/Wanda 33',
+    args: clusterTeaserOrdered33,
+}
+
+export const TagesschauSportschau100 = {
+    render: Template.bind({}),
+    name: 'tagesschau/sportschau 100',
+    args: clusterTeaserExtern100,
+}
+
+export const TagesschauSportschau50 = {
+    render: Template.bind({}),
+    name: 'tagesschau/sportschau 50',
+    args: clusterTeaserExtern50,
+}
+
+export const TagesschauSportschau33 = {
+    render: Template.bind({}),
+    name: 'tagesschau/sportschau 33',
+    args: clusterTeaserExtern33,
+}
+
+export const PodcastEpisodenClusterTeaser = {
+    render: Template.bind({}),
+    name: 'PodcastEpisoden ClusterTeaser',
+    args: PodcastChannelClusterTeaser,
+}
+
+export const MeistgeklicktBoxMitLangemTitel = {
+    render: Template.bind({}),
+    name: 'Meistgeklickt-Box mit langem Titel',
+    args: clusterTeaserOrdered33LongTitle,
+}

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

@@ -0,0 +1,97 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserBylineStories from './teaser_byline.stories'
+
+<Meta of={TeaserBylineStories} />
+
+# 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}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserBylineStories.Default} />
+    <Story of={TeaserBylineStories.WithComments} />
+    <Story of={TeaserBylineStories.CommentsOnly} />
+</Canvas>
+
+<ArgsTable story="default" />

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

@@ -0,0 +1,30 @@
+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'
+
+const Template = ({ ...args }) => {
+    return byline({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Komponenten/Byline',
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+    args: teaserWithoutComments.logicItem.includeModel,
+}
+
+export const WithComments = {
+    render: Template.bind({}),
+    name: 'with comments',
+    args: teaserWithComments.logicItem.includeModel,
+}
+
+export const CommentsOnly = {
+    render: Template.bind({}),
+    name: 'comments only',
+    args: teaserWithoutTeaserinfo.logicItem.includeModel,
+}

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

@@ -0,0 +1,96 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserHeadingStories from './teaser_heading.stories'
+
+<Meta of={TeaserHeadingStories} />
+
+# Teaser-Heading
+
+Die `Dachzeile` (topline) und der `Titel` (title) werden im folgenden als Teaser-Heading bezeichnet, also der einleitende "Kopf" eines Teasers.
+
+Zubuchbar sind ein `Label` (an der Position der Dachzeile) und ein `erweiterter Titel` (extendedTitle) der den normalen Titel ersetzt.
+
+# Teil-Komponenten (siehe dazu Label, Topline, Titel)
+
+## Label (optional wenn vorhanden)
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{> components/label/label_old _type=this.type _text=(loca this.loca) _bylineCss=../_labelCss}}
+```
+
+Durchgereichte Parameter:
+
+| Parameter         | Typ      | Mögliche Werte     | Erläuterung                  |
+| :---------------- | :------- | :----------------- | :--------------------------- |
+| **\_type**        | `String` | "media","event"... | Typ des Labels               |
+| **\_\_text**      | `String` | ...                | Inhalt des Labels            |
+| **\_\_bylineCss** | `String` | ...                | spezifische Style-Selektoren |
+
+## Dachzeile (topline)
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{> components/teaser/components/teaser_topline _css=(if _toplineCss _toplineCss "") _text=_topline
+_readMore=_readMore _teaserType=_teaserType}}
+```
+
+Durchgereichte Parameter:
+
+| Parameter          | Typ      | Mögliche Werte         | Erläuterung                                                       |
+| :----------------- | :------- | :--------------------- | :---------------------------------------------------------------- |
+| **\_css**          | `String` | ...                    | spezifische Style-Selektoren                                      |
+| **\_\_text**       | `String` | ...                    | Inhalt der Dachzeile                                              |
+| **\_\_readMore**   | `String` | ...                    | \                                                                 |
+| **\_\_teaserType** | `String` | "standard, alternativ" | Der Teaser-Typ gibt die Anordnung des Bildes und der Elemente vor |
+
+## Titel (title)
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{> components/teaser/components/teaser_title_old _css=(if _titleCss _titleCss "") _text=_title
+_fontVariant=_fontVariant _size=_size _teaserType=_teaserType _isMobile1to1=_isMobile1to1
+_firstItem=_firstItem _ordered=_ordered}}
+```
+
+Durchgereichte Parameter:
+
+| Parameter           | Typ      | Mögliche Werte         | Erläuterung                                                            |
+| :------------------ | :------- | :--------------------- | :--------------------------------------------------------------------- |
+| **\_css**           | `String` | ...                    | spezifische Style-Selektoren                                           |
+| **\_\_text**        | `String` | ...                    | Inhalt des Titels                                                      |
+| **\_\_fontVariant** | `String` | serif, sans-serif      | Bei Hessenschau wird für den Titel eine andere Schriftfamilie gewählt. |
+| **\_\_size**        | `String` | hero, 100, 50, 33, 25  | Die Größe des Teasers                                                  |
+| **\_\_teaserType**  | `String` | "standard, alternativ" | Der Teaser-Typ gibt die Anordnung des Bildes und der Elemente vor      |
+
+## Teaser-Heading Serif Hero
+
+<Canvas>
+    <Story of={TeaserHeadingStories.SerifHero} />
+</Canvas>
+
+<ArgsTable story="Serif Hero" />
+
+## Teaser-Heading Serif 50%
+
+<Canvas>
+    <Story of={TeaserHeadingStories.Serif50} />
+</Canvas>
+
+## Teaser-Heading Serif 33%
+
+<Canvas>
+    <Story of={TeaserHeadingStories.Serif33} />
+</Canvas>
+
+## Teaser-Heading Serif 25%
+
+<Canvas>
+    <Story of={TeaserHeadingStories.Serif25} />
+</Canvas>

package/src/stories/views/components/teaser/components/teaser_heading.stories.js

@@ -0,0 +1,158 @@
+import teaserHeading from './teaser_heading.hbs'
+
+const Template = ({ _topline, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return teaserHeading({ _topline, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Komponenten/Teaserheading',
+
+    argTypes: {
+        _topline: {
+            control: 'text',
+            description: 'Text der Dachzeile',
+        },
+
+        _title: {
+            control: 'text',
+            description: 'Text der Überschrift',
+        },
+
+        _headlineTag: {
+            control: {
+                type: 'select',
+                options: ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+            },
+
+            description: 'HTML-Tag der Überschrift',
+
+            table: {
+                defaultValue: {
+                    summary: 'span',
+                },
+            },
+        },
+
+        _fontVariant: {
+            description: 'Schriftvariante',
+
+            control: {
+                type: 'inline-radio',
+                options: ['serif', 'sans-serif'],
+            },
+
+            table: {
+                defaultValue: {
+                    summary: 'serif',
+                },
+            },
+        },
+
+        _size: {
+            options: ['hero', '100', '50', '33', '25'],
+
+            control: {
+                type: 'select',
+            },
+
+            description: 'Größe der Überschrift',
+
+            table: {
+                defaultValue: {
+                    summary: 'hero',
+                },
+            },
+        },
+    },
+}
+
+export const SerifHero = {
+    render: Template.bind({}),
+    name: 'Serif Hero',
+
+    parameters: {
+        docs: {
+            source: {
+                code: ``,
+            },
+        },
+    },
+
+    args: {
+        _topline: 'Das ist eine wirklich sehr lange Topline',
+        _title: 'Das ist eine wirklich sehr lange Headline',
+        _extendedTitle: 'Das ist ein erweiterter Titel',
+        _headlineTag: 'h1',
+        _fontVariant: 'serif',
+        _size: 'hero',
+        _teaserType: 'standard',
+    },
+}
+
+export const Serif50 = {
+    render: Template.bind({}),
+    name: 'Serif 50',
+
+    parameters: {
+        docs: {
+            source: {
+                code: ``,
+            },
+        },
+    },
+
+    args: {
+        _topline: 'Das ist eine wirklich sehr lange Topline',
+        _title: 'Das ist eine wirklich sehr lange Headline',
+        _headlineTag: 'h1',
+        _fontVariant: 'serif',
+        _size: '50',
+        _teaserType: 'standard',
+    },
+}
+
+export const Serif33 = {
+    render: Template.bind({}),
+    name: 'Serif 33',
+
+    parameters: {
+        docs: {
+            source: {
+                code: ``,
+            },
+        },
+    },
+
+    args: {
+        _topline: 'Das ist eine wirklich sehr lange Topline',
+        _title: 'Das ist eine wirklich sehr lange Headline',
+        _headlineTag: 'h1',
+        _fontVariant: 'serif',
+        _size: '33',
+        _teaserType: 'standard',
+    },
+}
+
+export const Serif25 = {
+    render: Template.bind({}),
+    name: 'Serif 25',
+
+    parameters: {
+        docs: {
+            source: {
+                code: ``,
+            },
+        },
+    },
+
+    args: {
+        _topline: 'Das ist eine wirklich sehr lange Topline',
+        _title: 'Das ist eine wirklich sehr lange Headline',
+        _headlineTag: 'h1',
+        _fontVariant: 'serif',
+        _size: '25',
+        _teaserType: 'standard',
+    },
+}

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

@@ -0,0 +1,36 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserTextStories from './teaser_text.stories'
+
+<Meta of={TeaserTextStories} />
+
+# Teaser-Text
+
+Im Teaser folgt nach dem Heading der Text. Diesem beigefügt ein "Mehr"-Link oder ein Link auf eine externe Seite.
+
+# Teil-Komponenten
+
+N/A
+
+## Teaser-Text Hero
+
+<Canvas>
+    <Story of={TeaserTextStories.TeasertextHero} />
+</Canvas>
+
+## Teaser-Text 50%
+
+<Canvas>
+    <Story of={TeaserTextStories.Teasertext50} />
+</Canvas>
+
+## Teaser-Text 33%
+
+<Canvas>
+    <Story of={TeaserTextStories.Teasertext33} />
+</Canvas>
+
+## Teaser-Text 25%
+
+<Canvas>
+    <Story of={TeaserTextStories.Teasertext25} />
+</Canvas>

package/src/stories/views/components/teaser/components/teaser_text.stories.js

@@ -0,0 +1,74 @@
+import teaserText from './teaser_text.hbs'
+
+const Template = ({ _text, ...args }) => {
+    return teaserText({ _text, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Komponenten/Teasertext',
+
+    argTypes: {
+        _text: {
+            control: 'text',
+            description: 'teaserText',
+        },
+
+        _size: {
+            options: ['hero', '100', '50', '33', '25'],
+
+            control: {
+                type: 'inline-radio',
+            },
+        },
+
+        _font: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+}
+
+export const TeasertextHero = {
+    render: Template.bind({}),
+    name: 'Teasertext Hero',
+
+    args: {
+        _text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
+        _size: 'hero',
+        _font: 'md:text-base md:leading-4 lg:leading-5',
+    },
+}
+
+export const Teasertext50 = {
+    render: Template.bind({}),
+    name: 'Teasertext 50',
+
+    args: {
+        _text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
+        _size: '50',
+        _font: 'md:text-base md:leading-4 lg:leading-5',
+    },
+}
+
+export const Teasertext33 = {
+    render: Template.bind({}),
+    name: 'Teasertext 33',
+
+    args: {
+        _text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
+        _size: '33',
+        _font: 'md:text-base md:leading-4 lg:leading-5',
+    },
+}
+
+export const Teasertext25 = {
+    render: Template.bind({}),
+    name: 'Teasertext 25',
+
+    args: {
+        _text: 'Woibbadinga i moan scho aa hallelujah sog i, luja, boarischer. Wiesn resch ja, wo samma denn etza, resch. Auffisteign a Hoiwe woaß, koa. Leonhardifahrt Weißwiaschd Baamwach hob liberalitas Bavariae ham hogg di hera.',
+        _size: '25',
+        _font: 'md:text-base md:leading-4 lg:leading-5',
+    },
+}