hr-design-system-handlebars 1.11.10 → 1.11.11

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

@@ -1,219 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
-import teaserHeading from './teaser_heading.hbs'
-
-<Meta
-    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 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 })
-}
-
-# 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
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-<ArgsTable story="Serif Hero" />
-
-## Teaser-Heading Serif 50%
-
-<Canvas>
-    <Story
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-## Teaser-Heading Serif 33%
-
-<Canvas>
-    <Story
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-## Teaser-Heading Serif 25%
-
-<Canvas>
-    <Story
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>

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

@@ -1,94 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
-import teaserText from './teaser_text.hbs'
-
-<Meta
-    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 Template = ({ _text, ...args }) => {
-    return teaserText({ _text, ...args })
-}
-
-# 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
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-## Teaser-Text 50%
-
-<Canvas>
-    <Story
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-## Teaser-Text 33%
-
-<Canvas>
-    <Story
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-## Teaser-Text 25%
-
-<Canvas>
-    <Story
-        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',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
-

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

@@ -1,124 +0,0 @@
-import { ArgsTable, Meta, Story, Preview } from '@storybook/addon-docs'
-
-import titleComponent from './teaser_title.hbs'
-
-<Meta
-    title="Komponenten/Teaser/Komponenten/Titel"
-    argTypes={{
-        _text: {
-            control: 'text',
-            description: 'Titel',
-        },
-        _size: {
-            options: ['hero', '100', '50', '33', '25'],
-            control: { type: 'select' },
-            description: 'Größe der Überschrift',
-            table: {
-                defaultValue: {
-                    summary: 'hero',
-                },
-            },
-        },
-        _fontVariant: {
-            description: 'Schriftvariante',
-            control: {
-                type: 'inline-radio',
-                options: ['serif', 'sans-serif'],
-            },
-            table: {
-                defaultValue: {
-                    summary: 'serif',
-                },
-            },
-        },
-    }}
-/>
-
-export const Template = ({ _text, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<span>${title}</span>`;
-    return titleComponent({ _text, ...args })
-}
-
-# Titel
-
-## Beschreibung
-
-In der Titel-Komponente wird der Titel des Artikels dargestellt. Textgröße und Schriftart werden
-anhand der Parameter <b>teaserType</b> und <b>fontVariant</b> in der inkludierten Sub-Komponente <b>teaser_title_classes</b> ermitelt.
-
-## Sub-Komponenten
-
-Die Titel-Komponente inkludiert folgende Komponenten:
-
-<ul>
-    <li>
-        components/teaser/components/<b>teaser_title_classes</b>
-    </li>
-</ul>
-
-## Parameter
-
-Die Titel-Komponente benötigt folgende Parameter:
-
-<ul>
-    <li>
-        <b>text</b>
-    </li>
-    <li>
-        <b>fontVariant</b>
-    </li>
-    <li>
-        <b>size</b>
-    </li>
-    <li>
-        <b>teaserType</b>
-    </li>
-</ul>
-
-## Verwendung
-
-Die Titel-Komponente wird in handlebars wie folgt eingebaut:
-
-```html
-{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size
-teaserType=teaserType}}
-```
-
-<Preview withToolbar>
-    <Story
-        name="Titel Serif - Hero"
-        args={{
-            _text: 'Dies ist der Titel eines 100%-Teasers',
-            _size: 'hero',
-            _fontVariant: 'serif',
-            _teaserType: 'standard',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Titel Serif - normal"
-        args={{
-            _text: 'Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers',
-            _size: '33',
-            _fontVariant: 'serif',
-            _teaserType: 'standard',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-    <Story
-        name="Titel Serif - small"
-        args={{
-            _text: 'Dies ist der Titel eines 25%-Teasers',
-            _size: '25',
-            _fontVariant: 'serif',
-            _teaserType: 'standard',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-<ArgsTable story="Titel Serif - Hero" />

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

@@ -1,63 +0,0 @@
-import { ArgsTable, Meta, Story, Preview } from '@storybook/addon-docs'
-
-import topline from './teaser_topline.hbs'
-
-<Meta
-    title="Komponenten/Teaser/Komponenten/Topline"
-    argTypes={{
-        _text: {
-            control: 'text',
-            description: 'Dachzeilentext',
-        },
-    }}
-/>
-
-export const Template = ({ _text, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<span>${topline}</span>`;
-    return topline({ _text, ...args })
-}
-
-# Topline
-
-## Beschreibung
-
-In der Topline-Komponente wird die Dachzeile des Artikels dargestellt.
-
-## Parameter
-
-Die Topline-Komponente benötigt folgende Parameter:
-
-<ul>
-    <li>
-        <b>teaserType</b>
-    </li>
-    <li>
-        <b>readMore</b>
-    </li>
-    <li>
-        <b>text</b>
-    </li>
-</ul>
-
-## Verwendung
-
-Die Topline-Komponente wird in handlebars wie folgt eingebaut:
-
-```html
-{{> components/teaser/components/teaser_topline text=topline readMore=readMore
-teaserType=teaserType}}
-```
-
-<Preview withToolbar>
-    <Story
-        name="default"
-        args={{
-            _text: 'Dies ist die Dachzeile',
-        }}
-    >
-        {Template.bind({})}
-    </Story>
-</Preview>
-
-<ArgsTable story="default" />

package/src/stories/views/components/teaser/group_teaser/group.stories.mdx

@@ -1,85 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
-import groupTeaser from './group_teaser.hbs'
-import groupTeaserAccented from './group_teaser_accented.hbs'
-import teaserGroup100 from '../fixtures/teaser_group_100.json'
-import teaserGroupRelatedContent100 from '../fixtures/teaser_group_related_content_100.json'
-import teaserGroup100highlight from '../fixtures/teaser_group_100_highlight.json'
-import teaserGroup100highlight2 from '../fixtures/teaser_group_100_highlight_2.json'
-
-import teaserGroup100contentnav from '../fixtures/teaser_group_100_contentnav.json'
-
-<Meta
-    title="Komponenten/Teaser/Gruppen"
-    argTypes={{
-        teaserSize: {
-            control: {
-                type: 'select',
-                options: ['100', '66', '50', '33', '25'],
-            },
-            description: 'Teaser Größe',
-            table: {
-                defaultValue: {
-                    summary: '100',
-                },
-            },
-        },
-    }}
-    parameters={{
-        layout: 'fullscreen',
-    }}
-    decorators={[
-        (Story) => {
-            return `<div class="grid my-5 grid-page">
-                  <div class="grid grid-cols-12 py-6 bg-white sm:px-9.5 col-full sm:col-main gap-x-6 md:gap-y-14 gap-y-6">
-                    ${Story()}
-                  </div>
-                </div>`
-        },
-    ]}
-/>
-
-export const groupTeaserTemplate = ({ text, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return groupTeaser({ text, ...args })
-}
-
-export const groupTeaserAccentedTemplate = ({ text, ...args }) => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return groupTeaserAccented({ text, ...args })
-}
-
-# Button
-
-Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
-
-<Preview withToolbar>
-    <Story name="100% Gruppe mit Überschrift" args={teaserGroup100.includeModel}>
-        {groupTeaserTemplate.bind({})}
-    </Story>
-    <Story
-        name="100% Gruppe mit Überschrift Highlight 1"
-        args={teaserGroup100highlight.includeModel}
-    >
-        {groupTeaserTemplate.bind({})}
-    </Story>
-    <Story
-        name="100% Gruppe mit Überschrift Highlight 2"
-        args={teaserGroup100highlight2.includeModel}
-    >
-        {groupTeaserTemplate.bind({})}
-    </Story>
-    <Story
-        name="100% Gruppe mit Content Navigation Aufklapp"
-        args={teaserGroup100contentnav.includeModel}
-    >
-        {groupTeaserAccentedTemplate.bind({})}
-    </Story>
-    <Story name="100% Gruppe mit Related Content" args={teaserGroupRelatedContent100.includeModel}>
-        {groupTeaserTemplate.bind({})}
-    </Story>
-</Preview>
-
-<ArgsTable story="main" />

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.stories.mdx

@@ -1,52 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
-import subscribeButtonJson from '../fixtures/teaser_podcast.json'
-
-import subscribeButton from './podcast_subscribe_button.hbs'
-
-<Meta
-  title="Komponenten/Teaser/Podcast"
-  argTypes={{
-    storybookOpen: {
-      control: 'boolean',
-      description: "Offen"
-    }
-    
-  }}
-  parameters={{ 
-    controls: { 
-      sort: 'requiredFirst',
-    } 
-  }}
-  decorators={[
-        (Story) => {
-            return `<div class="flex flex-row pt-5">
-                            ${Story()} 
-                        </div>`
-        }
-    
-    ]} 
-/>
-
-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 subscribeButton({ label, ...args });
-};
-
-<Preview withToolbar>
-  <Story
-    name="Subscribe Button Close"   
-    args={subscribeButtonJson.logicItem.includeModel.podcastChannel}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story
-    name="Subscribe Button Open"   
-    args={
-        { ...subscribeButtonJson.logicItem.includeModel.podcastChannel,  storybookOpen:true}
-      }
-  >
-    {Template.bind({})}
-  </Story>
-</Preview>

package/src/stories/views/components/teaser/tabbox/teaser_tabbox.stories.mdx

@@ -1,39 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
-import tabbox from './teaser_tabbox.hbs'
-import tabboxData from '../fixtures/teaser_tabbox.json' 
-
-<Meta   title="Komponenten/Teaser/Tabbox"
-        parameters={{
-            chromatic: {
-                viewports: [360, 768, 1024]
-            },
-            layout: 'fullscreen',
-        }}
-        argTypes={{
-        }} 
-        decorators={[
-        (Story) => {
-            return `<div class="grid my-5 grid-page">
-                        <div>
-                            ${Story()}
-                        </div>
-                    </div>`
-        },
-    ]}
-        />
-
-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 tabbox({ brand, ...args })
-}
-
-
-<Preview withToolbar>
-    <Story  name="Beispiel 1" args={tabboxData.includeModel}>
-        {Template.bind({})} 
-    </Story> 
-</Preview>