hr-design-system-handlebars 1.11.9 → 1.11.11

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

@@ -0,0 +1,85 @@
+import teaser from './teaser_indextext.hbs'
+import dataTeserIndextext100Accented from './fixtures/teaser_indextext_100_accented.json'
+import dataTeserIndextext100Boxed from './fixtures/teaser_indextext_100_boxed.json'
+import dataTeserIndextext100Highlighted from './fixtures/teaser_indextext_100_highlighted.json'
+import dataTeserIndextext50Accented from './fixtures/teaser_indextext_50_accented.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 teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Indextext',
+
+    parameters: {
+        layout: 'fullscreen',
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['50', '100'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: '100',
+                },
+            },
+        },
+
+        teasertype: {
+            control: {
+                type: 'select',
+                options: ['accented', 'boxed', 'highlighted'],
+            },
+
+            description: 'Teaser Typ',
+
+            table: {
+                defaultValue: {
+                    summary: 'accented',
+                },
+            },
+        },
+    },
+
+    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 TextMitHintergrund100 = {
+    render: Template.bind({}),
+    name: 'Text mit Hintergrund 100',
+    args: dataTeserIndextext100Accented.logicItem.includeModel,
+}
+
+export const TextMitBox100 = {
+    render: Template.bind({}),
+    name: 'Text mit Box 100',
+    args: dataTeserIndextext100Boxed.logicItem.includeModel,
+}
+
+export const HintergrundOrange100 = {
+    render: Template.bind({}),
+    name: 'Hintergrund orange 100',
+    args: dataTeserIndextext100Highlighted.logicItem.includeModel,
+}
+
+export const TextMitHintergrund50 = {
+    render: Template.bind({}),
+    name: 'Text mit Hintergrund 50',
+    args: dataTeserIndextext50Accented.logicItem.includeModel,
+}

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

@@ -0,0 +1,23 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserLogicStories from './teaser_logic.stories';
+
+import teaser from './teaser_logic.hbs'
+import index_site from '../fixtures/teaser_index.json'
+
+<Meta of={TeaserLogicStories} />
+
+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 teaser({ brand, ...args })
+}
+
+# Header
+
+Ein toller Einleitungstext für unsere `Teaser` Komponente:
+
+<Canvas withToolbar>
+  <Story of={TeaserLogicStories.Logic} />
+</Canvas>

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

@@ -0,0 +1,36 @@
+import teaser from './teaser_logic.hbs'
+import index_site from '../fixtures/teaser_index.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 teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Logic',
+
+    parameters: {
+        layout: 'fullscreen',
+    },
+
+    argTypes: {},
+
+    decorators: [
+        (Story) => {
+            return `<div class="grid bg-white grid-page">   
+                         <div class="grid grid-cols-12 py-6 bg-white sm:px-9.5 col-full sm:col-main gap-x-6 gap-y-6">                            
+                             ${Story()}                            
+                         </div>
+                     </div>`
+        },
+    ],
+}
+
+export const Logic = {
+    render: Template.bind({}),
+    name: 'logic',
+    args: index_site,
+}

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

@@ -0,0 +1,95 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserPosterStories from './teaser_poster.stories'
+
+<Meta of={TeaserPosterStories} />
+
+# Poster-Teaser
+
+## Beschreibung
+
+Der Poster-Teaser besteht aus 3 übereinanderliegenden Ebenen.
+
+Unterste-Ebene: <b>Bild (1:1)</b><br />
+Mittlere Ebene: <b>Dachzeile und Titel</b> + <b>Farbverlauf</b> von schwarz nach transparent<br />
+Oberste Ebene (verlinkt): <b>Zusatztext</b> ("zum Artikel" o.ä.)<br />
+
+Alle Ebenen erstrecken sich über die komplette Größe des 1:1-Bilds.
+
+Alle enthaltenen Inhalte sind aria-hidden. Für screenreader wurde ein extra span eingebaut mit class="sr-only".<br />
+Inhalt dieses spans: Zusatztext + ": " + Titel
+
+Der Poster-Teaser soll nur als 50%- bzw. 33%-Teaser verwendet werden. Diese Restriktion muss cms-seitig implementiert werden.
+
+## Sub-Komponenten
+
+Die Poster-Teaser-Komponente inkludiert folgende Komponenten:
+
+<ul>
+  <li>
+    components/base/image/<b>responsive\_image</b>
+  </li>
+
+{' '}
+
+<li>
+    components/base/<b>link</b>
+</li>
+
+  <li>
+    components/teaser/components/<b>teaser\_heading</b>
+  </li>
+</ul>
+
+## Props
+
+Die Poster-Teaser-Komponente benötigt die folgenden json-Daten (enthalten im Teaser-Json im Objekt <b>logicItem.includeModel</b>):
+
+<ul>
+  <li>
+    <b>topline</b>
+  </li>
+
+<li>
+    <b>title</b>
+</li>
+
+<li>
+    <b>teaserSize</b>
+</li>
+
+<li>
+    <b>teaserType</b>
+</li>
+<li>
+    <b>teaserImage</b>
+</li>
+<li>
+    <b>content.imageVariant</b>
+</li>
+<li>
+    <b>isSerifHeading</b>
+</li>
+  <li>
+    <b>link.readMoreText.readMoreLong</b>
+  </li>
+</ul>
+
+## Verwendung
+
+Die Poster-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_poster}}
+```
+
+<Canvas withToolbar>
+  <Story of={TeaserPosterStories.Poster50} />
+
+{' '}
+
+<Story of={TeaserPosterStories.Poster33} />
+
+  <Story of={TeaserPosterStories.Poster33MitLabel} />
+</Canvas>
+
+<ArgsTable story="Poster 50" />

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

@@ -0,0 +1,67 @@
+import teaser from './teaser_poster.hbs'
+import teserPosterLg from './fixtures/teaser_poster_lg.json'
+import teserPosterMd from './fixtures/teaser_poster_md.json'
+import teserPosterMdLabel from './fixtures/teaser_poster_md_label.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 teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Poster',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            diffThreshold: 0.5,
+        },
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['50', '33'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: '50',
+                },
+            },
+        },
+    },
+
+    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 Poster50 = {
+    render: Template.bind({}),
+    name: 'Poster 50',
+    args: teserPosterLg.logicItem.includeModel,
+}
+
+export const Poster33 = {
+    render: Template.bind({}),
+    name: 'Poster 33',
+    args: teserPosterMd.logicItem.includeModel,
+}
+
+export const Poster33MitLabel = {
+    render: Template.bind({}),
+    name: 'Poster 33 mit Label',
+    args: teserPosterMdLabel.logicItem.includeModel,
+}

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

@@ -0,0 +1,15 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserStageStories from './teaser_stage.stories'
+
+<Meta of={TeaserStageStories} />
+
+# Stage-Teaser
+
+## Beschreibung
+
+<Canvas withToolbar>
+    <Story of={TeaserStageStories.StageTeaser} />
+    <Story of={TeaserStageStories.StageTeaserWide} />
+    <Story of={TeaserStageStories.StageTeaserWithEvent} />
+    <Story of={TeaserStageStories.StageTeaserProgram} />
+</Canvas>

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

@@ -0,0 +1,60 @@
+import teaser from './teaser_stage.hbs'
+import stageTeaserData from './fixtures/stage_teaser.json'
+import stageTeaserWideData from './fixtures/stage_teaser_wide.json'
+import stageTeaserDataWithEventtag from './fixtures/stage_teaser_eventtag.json'
+import stageTeaserDataForProgram from './fixtures/stage_teaser_program.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 teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Stage',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            viewports: [360, 768, 1024],
+            diffThreshold: 0.5,
+        },
+    },
+
+    argTypes: {},
+
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page"><div class="col-full gap-x-6 gap-y-6">  
+             ${Story()} 
+             </div></div>`
+        },
+    ],
+}
+
+export const StageTeaser = {
+    render: Template.bind({}),
+    name: 'Stage Teaser',
+    args: stageTeaserData,
+}
+
+export const StageTeaserWide = {
+    render: Template.bind({}),
+    name: 'Stage Teaser Wide',
+    args: stageTeaserWideData,
+}
+
+export const StageTeaserWithEvent = {
+    render: Template.bind({}),
+    name: 'Stage Teaser with Event',
+    args: stageTeaserDataWithEventtag,
+}
+
+export const StageTeaserProgram = {
+    render: Template.bind({}),
+    name: 'Stage Teaser Program',
+    args: stageTeaserDataForProgram,
+}

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

@@ -0,0 +1,129 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+
+import * as TeaserStandardStories from './teaser_standard.stories'
+
+<Meta of={TeaserStandardStories} />
+
+# Standard-Teaser
+
+## Beschreibung
+
+Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
+
+<b>Standard Hero:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild <b>ohne</b> Teasertext <br />
+
+<b>Standard 100%, 50%, 33%:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild ohne Teasertext <br />
+
+<b>Standard 25%:</b> <br />
+Desktop = Text unter dem Bild ohne Teasertext <br />
+Mobile = Bild(1x1) neben Text ohne Teasertext <br />
+
+## Sub-Komponenten
+
+Die Standard-Teaser-Komponente inkludiert folgende Komponenten:
+
+<ul>
+  <li>
+    components/teaser/components/<b>teaser\_lead</b>
+  </li>
+
+{' '}
+
+<li>
+    components/base/<b>link</b>
+</li>
+
+{' '}
+
+<li>
+    components/teaser/components/<b>teaser\_heading</b>
+</li>
+
+{' '}
+
+<li>
+    components/teaser/components/<b>teaser\_text</b>
+</li>
+
+  <li>
+    components/teaser/components/<b>teaser\_byline</b>
+  </li>
+</ul>
+
+## Verwendung
+
+Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/teaser_standard}}
+```
+
+<Canvas withToolbar>
+  <Story of={TeaserStandardStories.StandardHero} />
+
+{' '}
+
+<Story of={TeaserStandardStories.StandardHeroMitLabel} />
+
+{' '}
+
+<Story of={TeaserStandardStories.StandardHeroMitKommentaren} />
+
+{' '}
+
+<Story of={TeaserStandardStories.StandardHeroMitExternemLink} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard100} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard100MitExternemLink} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard100MitSendungsdokument} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard50} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard50OhneTeaserbild} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard50MitExternemLink} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard33} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard33MitExternemLink} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard25} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard25OhneTeaserbild} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard25MitExternemLink} />
+
+{' '}
+
+<Story of={TeaserStandardStories.Standard100MitDownload} />
+
+  <Story of={TeaserStandardStories.Standard33MitLangerOrtsmarke} />
+</Canvas>

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

@@ -0,0 +1,166 @@
+import teaser from './teaser_standard.hbs'
+import teaserHeroSerifWithLabel from './fixtures/teaser_standard_hero_serif_label.json'
+import teaserHeroSerifWithComments from './fixtures/teaser_standard_hero_serif_comments.json'
+import teaserHeroLink from './fixtures/teaser_standard_hero_serif_link.json'
+import teaserHeroSerif from './fixtures/teaser_standard_hero_serif.json'
+import teaser100Serif from './fixtures/teaser_standard_100_serif.json'
+import teaser50Serif from './fixtures/teaser_standard_50_serif.json'
+import teaser50SerifWithoutTeaserImage from './fixtures/teaser_standard_without_teaserimage_50_serif.json'
+import teaser33Serif from './fixtures/teaser_standard_33_serif.json'
+import teaser25Serif from './fixtures/teaser_standard_25_serif.json'
+import teaser25SerifWithoutTeaserimage from './fixtures/teaser_standard_without_teaserimage_25_serif.json'
+import teaser100Download from './fixtures/teaser_standard_100_serif_download.json'
+import teaser100Link from './fixtures/teaser_standard_100_serif_link.json'
+import teaser100Program from './fixtures/teaser_standard_100_serif_program.json'
+import teaser50Link from './fixtures/teaser_standard_50_serif_link.json'
+import teaser33Link from './fixtures/teaser_standard_33_serif_link.json'
+import teaser25Link from './fixtures/teaser_standard_25_serif_link.json'
+import teaser33LongGeotag from './fixtures/teaser_standard_33_long_geotag.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 teaser({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Standard',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            viewports: [360, 1024],
+            diffThreshold: 0.5,
+        },
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['hero', '100', '50', '33', '25'],
+            },
+
+            description: 'Teaser Größe',
+
+            table: {
+                defaultValue: {
+                    summary: 'hero',
+                },
+            },
+        },
+    },
+
+    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 StandardHero = {
+    render: Template.bind({}),
+    name: 'Standard Hero',
+    args: teaserHeroSerif.logicItem.includeModel,
+}
+
+export const StandardHeroMitLabel = {
+    render: Template.bind({}),
+    name: 'Standard Hero mit Label',
+    args: teaserHeroSerifWithLabel.logicItem.includeModel,
+}
+
+export const StandardHeroMitKommentaren = {
+    render: Template.bind({}),
+    name: 'Standard Hero Mit Kommentaren',
+    args: teaserHeroSerifWithComments.logicItem.includeModel,
+}
+
+export const StandardHeroMitExternemLink = {
+    render: Template.bind({}),
+    name: 'Standard Hero mit externem Link',
+    args: teaserHeroLink.logicItem.includeModel,
+}
+
+export const Standard100 = {
+    render: Template.bind({}),
+    name: 'Standard 100',
+    args: teaser100Serif.logicItem.includeModel,
+}
+
+export const Standard100MitExternemLink = {
+    render: Template.bind({}),
+    name: 'Standard 100 mit externem Link',
+    args: teaser100Link.logicItem.includeModel,
+}
+
+export const Standard100MitSendungsdokument = {
+    render: Template.bind({}),
+    name: 'Standard 100 mit Sendungsdokument',
+    args: teaser100Program.logicItem.includeModel,
+}
+
+export const Standard50 = {
+    render: Template.bind({}),
+    name: 'Standard 50',
+    args: teaser50Serif.logicItem.includeModel,
+}
+
+export const Standard50OhneTeaserbild = {
+    render: Template.bind({}),
+    name: 'Standard 50 ohne Teaserbild',
+    args: teaser50SerifWithoutTeaserImage.logicItem.includeModel,
+}
+
+export const Standard50MitExternemLink = {
+    render: Template.bind({}),
+    name: 'Standard 50 mit externem Link',
+    args: teaser50Link.logicItem.includeModel,
+}
+
+export const Standard33 = {
+    render: Template.bind({}),
+    name: 'Standard 33',
+    args: teaser33Serif.logicItem.includeModel,
+}
+
+export const Standard33MitExternemLink = {
+    render: Template.bind({}),
+    name: 'Standard 33 mit externem Link',
+    args: teaser33Link.logicItem.includeModel,
+}
+
+export const Standard25 = {
+    render: Template.bind({}),
+    name: 'Standard 25',
+    args: teaser25Serif.logicItem.includeModel,
+}
+
+export const Standard25OhneTeaserbild = {
+    render: Template.bind({}),
+    name: 'Standard 25 ohne Teaserbild',
+    args: teaser25SerifWithoutTeaserimage.logicItem.includeModel,
+}
+
+export const Standard25MitExternemLink = {
+    render: Template.bind({}),
+    name: 'Standard 25 mit externem Link',
+    args: teaser25Link.logicItem.includeModel,
+}
+
+export const Standard100MitDownload = {
+    render: Template.bind({}),
+    name: 'Standard 100 Mit Download',
+    args: teaser100Download.logicItem.includeModel,
+}
+
+export const Standard33MitLangerOrtsmarke = {
+    render: Template.bind({}),
+    name: 'Standard 33 mit langer Ortsmarke',
+    args: teaser33LongGeotag.logicItem.includeModel,
+}