hr-design-system-handlebars 1.11.10 → 1.11.12

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

@@ -0,0 +1,38 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserStandardAvStories from './teaser_standard_av.stories'
+
+<Meta of={TeaserStandardAvStories} />
+
+# Header
+
+Ein toller Einleitungstext für unsere `Teaser` Komponente:
+
+<Canvas withToolbar>
+  <Story of={TeaserStandardAvStories.Standard50Video} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard25Video} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard50VideoLivestream} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard25VideoLivestream} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard50Audio} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard25Audio} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard50Podcast} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard25Podcast} />
+
+{' '}
+<Story of={TeaserStandardAvStories.Standard50AudioLivestream} />
+
+  <Story of={TeaserStandardAvStories.Standard25AudioLivestream} />
+</Canvas>

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

@@ -0,0 +1,117 @@
+import teaser from './teaser_standard.hbs'
+
+import teaser50video from './fixtures/teaser_standard_50_serif_video.json'
+import teaser25video from './fixtures/teaser_standard_25_serif_video.json'
+import teaser50audio from './fixtures/teaser_standard_50_serif_audio.json'
+import teaser50podcast from './fixtures/teaser_standard_50_serif_podcast.json'
+import teaser25podcast from './fixtures/teaser_standard_25_serif_podcast.json'
+import teaser50audioLivestream from './fixtures/teaser_standard_50_serif_audio_livestream.json'
+import teaser25audio from './fixtures/teaser_standard_25_serif_audio.json'
+import teaser25audioLivestream from './fixtures/teaser_standard_25_serif_audio_livestream.json'
+import teaser50live from './fixtures/teaser_standard_50_serif_live.json'
+import teaser25live from './fixtures/teaser_standard_25_serif_live.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/AV-Standard',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            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 Standard50Video = {
+    render: Template.bind({}),
+    name: 'Standard 50% Video',
+    args: teaser50video.logicItem.includeModel,
+}
+
+export const Standard25Video = {
+    render: Template.bind({}),
+    name: 'Standard 25% Video',
+    args: teaser25video.logicItem.includeModel,
+}
+
+export const Standard50VideoLivestream = {
+    render: Template.bind({}),
+    name: 'Standard 50% Video Livestream',
+    args: teaser50live.logicItem.includeModel,
+}
+
+export const Standard25VideoLivestream = {
+    render: Template.bind({}),
+    name: 'Standard 25% Video Livestream',
+    args: teaser25live.logicItem.includeModel,
+}
+
+export const Standard50Audio = {
+    render: Template.bind({}),
+    name: 'Standard 50% Audio',
+    args: teaser50audio.logicItem.includeModel,
+}
+
+export const Standard25Audio = {
+    render: Template.bind({}),
+    name: 'Standard 25% Audio',
+    args: teaser25audio.logicItem.includeModel,
+}
+
+export const Standard50Podcast = {
+    render: Template.bind({}),
+    name: 'Standard 50% Podcast',
+    args: teaser50podcast.logicItem.includeModel,
+}
+
+export const Standard25Podcast = {
+    render: Template.bind({}),
+    name: 'Standard 25% Podcast',
+    args: teaser25podcast.logicItem.includeModel,
+}
+
+export const Standard50AudioLivestream = {
+    render: Template.bind({}),
+    name: 'Standard 50% Audio Livestream',
+    args: teaser50audioLivestream.logicItem.includeModel,
+}
+
+export const Standard25AudioLivestream = {
+    render: Template.bind({}),
+    name: 'Standard 25% Audio Livestream',
+    args: teaser25audioLivestream.logicItem.includeModel,
+}

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

@@ -0,0 +1,103 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+
+import * as TeaserStandardEventStories from './teaser_standard_event.stories'
+
+<Meta of={TeaserStandardEventStories} />
+
+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 })
+}
+
+export const TemplateAlternative = (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 teaserAlternative({ brand, ...args })
+}
+
+# Standard-Teaser
+
+## Beschreibung
+
+Der Standard-Teaser besteht aus 2 Hauptelemente: <b>Bild</b> und <b>Text</b> (Label, Dachzeile, Titel, Teasertext, Zusatzinformationen)
+
+<b>Standard 33 Single Event:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />
+
+<b>Standard 33 Two Events:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit Teasertext <br />
+
+<b>Standard 33 Multiple Events:</b> <br />
+Desktop = Text unter dem Bild <br />
+Mobile = Text unter dem Bild mit 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_event}}
+```
+
+<Canvas withToolbar>
+  <Story of={TeaserStandardEventStories.Standard33EinzelEvent} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Standard33EinzelEventAbgesagt} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Standard33ZweiEvents} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Standard33MehrereEvents} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Standard50EinzelEvent} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Standard100EinzelEvent} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Standard100ZweiEvents} />
+
+{' '}
+<Story of={TeaserStandardEventStories.Alternativ100EinzelEvent} />
+
+  <Story of={TeaserStandardEventStories.Alternativ100ZweiEvents} />
+</Canvas>

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

@@ -0,0 +1,119 @@
+import teaser from './teaser_standard.hbs'
+import teaserAlternative from './teaser_alternativ.hbs'
+import teaser33SingleEventSerif from './fixtures/teaser_standard_33_serif_single_event.json'
+import teaser33SingleEventStatus from './fixtures/teaser_standard_33_serif_single_event_status.json'
+import teaser33TwoEventsSerif from './fixtures/teaser_standard_33_serif_two_events.json'
+import teaser33MultipleEventsSerif from './fixtures/teaser_standard_33_serif_multiple_events.json'
+import teaser50SingleEventSerif from './fixtures/teaser_standard_50_serif_single_event.json'
+import teaser100SingleEventSerif from './fixtures/teaser_standard_100_serif_single_event.json'
+import teaser100TwoEventsSerif from './fixtures/teaser_standard_100_serif_two_events.json'
+import teaserAlternative100SingleEventSerif from './fixtures/teaser_alternative_100_serif_single_event.json'
+import teaserAlternative100TwoEventsSerif from './fixtures/teaser_alternative_100_serif_two_events.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 })
+}
+
+const TemplateAlternative = (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 teaserAlternative({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Event',
+
+    parameters: {
+        layout: 'fullscreen',
+
+        chromatic: {
+            viewports: [360, 1024],
+            diffThreshold: 0.5,
+        },
+    },
+
+    argTypes: {
+        teaserSize: {
+            control: {
+                type: 'select',
+                options: ['33', '50', '100'],
+            },
+
+            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 Standard33EinzelEvent = {
+    render: Template.bind({}),
+    name: 'Standard 33 Einzel-Event',
+    args: teaser33SingleEventSerif.logicItem.includeModel,
+}
+
+export const Standard33EinzelEventAbgesagt = {
+    render: Template.bind({}),
+    name: 'Standard 33 Einzel-Event abgesagt',
+    args: teaser33SingleEventStatus.logicItem.includeModel,
+}
+
+export const Standard33ZweiEvents = {
+    render: Template.bind({}),
+    name: 'Standard 33 zwei Events',
+    args: teaser33TwoEventsSerif.logicItem.includeModel,
+}
+
+export const Standard33MehrereEvents = {
+    render: Template.bind({}),
+    name: 'Standard 33 mehrere Events',
+    args: teaser33MultipleEventsSerif.logicItem.includeModel,
+}
+
+export const Standard50EinzelEvent = {
+    render: Template.bind({}),
+    name: 'Standard 50 Einzel-Event',
+    args: teaser50SingleEventSerif.logicItem.includeModel,
+}
+
+export const Standard100EinzelEvent = {
+    render: Template.bind({}),
+    name: 'Standard 100 Einzel-Event',
+    args: teaser100SingleEventSerif.logicItem.includeModel,
+}
+
+export const Standard100ZweiEvents = {
+    render: Template.bind({}),
+    name: 'Standard 100 zwei Events',
+    args: teaser100TwoEventsSerif.logicItem.includeModel,
+}
+
+export const Alternativ100EinzelEvent = {
+    render: TemplateAlternative.bind({}),
+    name: 'Alternativ 100 Einzel-Event',
+    args: teaserAlternative100SingleEventSerif.logicItem.includeModel,
+}
+
+export const Alternativ100ZweiEvents = {
+    render: TemplateAlternative.bind({}),
+    name: 'Alternativ 100 zwei Events',
+    args: teaserAlternative100TwoEventsSerif.logicItem.includeModel,
+}

package/src/stories/views/components/teaser/ticker/teaser_ticker.mdx

@@ -0,0 +1,10 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserTickerStories from './teaser_ticker.stories'
+
+import ticker from './teaser_ticker.hbs'
+
+<Meta of={TeaserTickerStories} />
+
+<Canvas withToolbar>
+    <Story of={TeaserTickerStories.TickerTeaser100} />
+</Canvas>

package/src/stories/views/components/teaser/ticker/{teaser_ticker.stories.mdx → teaser_ticker.stories.js}

@@ -1,33 +1,34 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
 import ticker from './teaser_ticker.hbs'
 import tickerTeaser100Standard from '../fixtures/ticker_teaser_standard_100.json'
 
-<Meta
-    title="Komponenten/Teaser/Ticker"
-    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 Template = (args, { globals: { customConditionalToolbar } }) => {
+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 = 
+    let brand =
         undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
     return ticker({ brand, ...args })
 }
 
-<Preview withToolbar>
-    <Story name="Ticker Teaser 100" args={tickerTeaser100Standard.logicItem.includeModel} >
-        {Template.bind({})}    
-    </Story>
-</Preview>
+export default {
+    title: 'Komponenten/Teaser/Ticker',
+
+    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 TickerTeaser100 = {
+    render: Template.bind({}),
+    name: 'Ticker Teaser 100',
+    args: tickerTeaser100Standard.logicItem.includeModel,
+}

package/.storybook/withThemeDecorator.js

@@ -1,12 +0,0 @@
-/** helper to get the active set options id */
-const getActiveValue = ({ globals, parameters }) => {
-    const global = globals.customConditionalToolbar || {}
-    const param = parameters.customConditionalToolbar
-    return undefined !== global[param.default] ? global[param.default] : 'hessenschau' // get the selected options id
-}
-
-export const withThemeDecorator = (StoryFn, context) => {
-    return `<div id="theming" class="max-w-full" data-theme="${getActiveValue(context)}">
-  ${StoryFn()} 
-  </div>`
-}

package/src/stories/BrandColors.stories.mdx

@@ -1,39 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-const tailwindConfig = require('../../tailwind.config')
-const colorVariables = Object.entries(tailwindConfig.theme.extend.colors).filter(
-    ([key, value]) => typeof value === 'string' && value.match(/^var/)
-)
-let brands = ['hr','hessenschau','hr1','hr2','hr3','hr4','you-fm','hr-inforadio','hr-fernsehen','hr-rundfunkrat','hr-werbung','hr-bigband','hr-sinfonieorchester']
-let shortcuts = ['hr','hs','hr1','hr2','hr3','hr4','youfm','hrInfo','hr-FS','hr-RR','hr-W','hr-BB','hr-SO']
-let colorsMap = {}
-colorVariables.forEach(([key, value]) => {
-    let colors = []
-    colors.push(value)
-    colorsMap[key] = colors
-})
-
-<Meta title="Grundlegendes/Farben/Markenfarben" />
-
-<h1>Markenfarben</h1>
-<br/>
-<ColorPalette>
-    {Object.entries(colorsMap).map((token, index) => {
-        let colorsMapBrands = {}
-        for (let i = 0; i < brands.length; i++) {
-            let ele = document.querySelector(':root');
-            ele.setAttribute('data-theme', brands[i])
-            let cs = getComputedStyle(ele);
-            let cv = token[1].toString()
-            let p = cv.substring(4, cv.length-1)
-            if(p.indexOf(',') > -1) {p = p.substring(0, p.indexOf(','))}
-            let hexColor = cs.getPropertyValue(p)
-            colorsMapBrands[shortcuts[i]] = hexColor
-        }
-        return (
-            <ColorItem
-                title={token[0]}
-                colors={colorsMapBrands}
-            />
-        )
-    })}
-</ColorPalette>

package/src/stories/Example.stories.mdx

@@ -1,93 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
-import icon from './views/components/base/image/icon.hbs'
-
-import example from './example.hbs'
-
-<Meta
-    title="Grundlegendes/Template/Beispiel-Story"
-    argTypes={{
-        label: {
-            control: 'text',
-            description: 'Button text',
-        },
-        size: {
-            control: { type: 'select', options: ['sm', 'md', 'lg', 'xl'] },
-            description: 'Größe des Buttons',
-            table: {
-                defaultValue: {
-                    summary: 'md',
-                },
-            },
-        },
-        type: {
-            description: 'Typ des Buttons',
-            control: {
-                type: 'select',
-                options: ['primary', 'secondary'],
-            },
-            table: {
-                defaultValue: {
-                    summary: 'primary',
-                },
-            },
-        },
-    }}
-/>
-
-export const Template = ({ label, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return example({ label, ...args })
-}
-
-# Name der Komponente
-
-## Beschreibung/Abstract
-
-Kurzer Beschreibungstext der die Komponente erklärt -> Penis
-
-<Preview withToolbar>
-    <Story
-        name="Primary"
-        args={{
-            label: 'Button',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-## Props
-
-Beschreibung der wichtigsten parameter, die für die Komponente benötigt werden
-
-<ArgsTable story="Primary" />
-
-## Usage/Verwendung
-
-ggf. Beschreibung wann und wie die Komponente eingesetzt wird in handlebars
-
-```html
-{{> components/teaser/components/teaser_heading fontVariant=this.headingFontVariant
-headlineTag=this.headlineTag label=this.label readMore=this.link.readMoreText.readMoreScreenreader
-size=this.teaserSize title=this.title topline=this.topline }}
-```
-
-## Dos/Doents
-
-<ComponentRules
-    rules={[
-        {
-            positive: {
-                component: <div>Get started</div>,
-                description:
-                    'Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces.',
-            },
-            negative: {
-                component: <div>Get started and enjoy discount!</div>,
-                description: 'Don’t use punctuation marks such as periods or exclamation points.',
-            },
-        },
-    ]}
-/>