hr-design-system-handlebars 1.11.10 → 1.11.12

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

@@ -0,0 +1,42 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserTitleStories from './teaser_title.stories'
+
+<Meta of={TeaserTitleStories} />
+
+# 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:
+
+<ArgsTable story="Titel Serif - Hero" />
+
+## Verwendung
+
+Die Titel-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/components/teaser_title text=title fontVariant=fontVariant size=size
+teaserType=teaserType}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserTitleStories.TitelSerifHero} />
+    <Story of={TeaserTitleStories.TitelSerifNormal} />
+    <Story of={TeaserTitleStories.TitelSerifSmall} />
+</Canvas>

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

@@ -0,0 +1,85 @@
+import titleComponent from './teaser_title.hbs'
+
+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 })
+}
+
+export default {
+    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 TitelSerifHero = {
+    render: Template.bind({}),
+    name: 'Titel Serif - Hero',
+
+    args: {
+        _text: 'Dies ist der Titel eines 100%-Teasers',
+        _size: 'hero',
+        _fontVariant: 'serif',
+        _teaserType: 'standard',
+    },
+}
+
+export const TitelSerifNormal = {
+    render: Template.bind({}),
+    name: 'Titel Serif - normal',
+
+    args: {
+        _text: 'Dies ist der Titel eines 66%-, 50%- oder 33%-Teasers',
+        _size: '33',
+        _fontVariant: 'serif',
+        _teaserType: 'standard',
+    },
+}
+
+export const TitelSerifSmall = {
+    render: Template.bind({}),
+    name: 'Titel Serif - small',
+
+    args: {
+        _text: 'Dies ist der Titel eines 25%-Teasers',
+        _size: '25',
+        _fontVariant: 'serif',
+        _teaserType: 'standard',
+    },
+}

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

@@ -0,0 +1,29 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TeaserToplineStories from './teaser_topline.stories'
+
+<Meta of={TeaserToplineStories} />
+
+# Topline
+
+## Beschreibung
+
+In der Topline-Komponente wird die Dachzeile des Artikels dargestellt.
+
+## Parameter
+
+Die Topline-Komponente benötigt folgende Parameter:
+
+<ArgsTable story="default" />
+
+## Verwendung
+
+Die Topline-Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{> components/teaser/components/teaser_topline text=topline readMore=readMore
+teaserType=teaserType}}
+```
+
+<Canvas withToolbar>
+    <Story of={TeaserToplineStories.Default} />
+</Canvas>

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

@@ -0,0 +1,27 @@
+import topline from './teaser_topline.hbs'
+
+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 })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Komponenten/Topline',
+
+    argTypes: {
+        _text: {
+            control: 'text',
+            description: 'Dachzeilentext',
+        },
+    },
+}
+
+export const Default = {
+    render: Template.bind({}),
+    name: 'default',
+
+    args: {
+        _text: 'Dies ist die Dachzeile',
+    },
+}

package/src/stories/views/components/teaser/content_nav/teaser_content_nav.mdx

@@ -0,0 +1,54 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as TeaserContentNavStories from './teaser_content_nav.stories'
+
+<Meta of={TeaserContentNavStories} />
+
+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 })
+}
+
+# Content-Navi-Teaser
+
+## Beschreibung
+
+### Liste
+
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.Liste} />
+</Canvas>
+### Liste mit Filter
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.ListeMitFilter} />
+</Canvas>
+### Fluß
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.Fluss} />
+</Canvas>
+### Fluss mit Filter
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.FlussMitFilter} />
+</Canvas>
+### Gemischt
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.Gemischt} />
+</Canvas>
+### Gemischt mit Filter
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.GemischtMitFilter} />
+</Canvas>
+### Dropdown
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.Dropdown} />
+</Canvas>
+### Dropdown mit Filter
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.DropdownMitFilter} />
+</Canvas>
+### Dropdown mit Subgruppen
+<Canvas withToolbar>
+    <Story of={TeaserContentNavStories.DropdownMitSubgruppen} />
+</Canvas>

package/src/stories/views/components/teaser/content_nav/{teaser_content_nav.stories.mdx → teaser_content_nav.stories.js}

@@ -1,5 +1,3 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-import 'core-js/actual/structured-clone'
 import { addLabel, removeLabel, changeTeaserSize } from '../labelHelper'
 import { addCommentLink } from '../jsonHelper'
 
@@ -16,102 +14,123 @@ import contentNavDropdown_autosuggest from '../fixtures/teaser_content_nav_dropd
 import contentNavDropdown from '../fixtures/teaser_content_nav_dropdown_100.json'
 import contentNavDropdown_subgroups from '../fixtures/teaser_content_nav_dropdown_subgroups.json'
 
-<Meta
-    title="Komponenten/Teaser/Content-Navi"
-    parameters={{
+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/Content-Navi',
+
+    parameters: {
         layout: 'fullscreen',
+
         chromatic: {
             viewports: [360, 768, 1024],
         },
-    }}
-    argTypes={{
+    },
+
+    argTypes: {
         realTeaserSize: {
             control: {
                 type: 'select',
                 options: ['100', '66', '50', '33', '25'],
             },
+
             description: 'Teaser Größe',
+
             table: {
                 defaultValue: {
                     summary: '100',
                 },
             },
         },
+
         contentNav: {
             table: {
                 expanded: false,
                 disable: false,
             },
         },
+
         teaserSize: {
             control: {
                 type: 'select',
                 options: ['100', '66', '50', '33', '25'],
             },
+
             description: 'Teaser Größe',
+
             table: {
                 defaultValue: {
                     summary: '100',
                 },
             },
         },
-    }}
-    decorators={[
+    },
+
+    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>`
+             ${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 teaser({ brand, ...args })
+export const Liste = {
+    render: Template.bind({}),
+    name: 'Liste',
+    args: contentNavList,
+}
+
+export const ListeMitFilter = {
+    render: Template.bind({}),
+    name: 'Liste mit Filter',
+    args: contentNavList_autosuggest,
+}
+
+export const Fluss = {
+    render: Template.bind({}),
+    name: 'Fluss',
+    args: contentNavFlow,
+}
+
+export const FlussMitFilter = {
+    render: Template.bind({}),
+    name: 'Fluss mit Filter',
+    args: contentNavFlow_autosuggest,
 }
 
-# Content-Navi-Teaser
-
-## Beschreibung
-
-<Preview withToolbar>
-    <b>Liste</b>
-    <Story name="Liste" args={contentNavList}>
-        {Template.bind({})}
-    </Story>
-    <b>Liste mit Filter</b>
-    <Story name="Liste mit Filter" args={contentNavList_autosuggest}>
-        {Template.bind({})}
-    </Story>
-    <b>Fluss</b>
-    <Story name="Fluss" args={contentNavFlow}>
-        {Template.bind({})}
-    </Story>
-    <b>Fluss mit Filter</b>
-    <Story name="Fluss mit Filter" args={contentNavFlow_autosuggest}>
-        {Template.bind({})}
-    </Story>
-    <b>Gemischt</b>
-    <Story name="Gemischt" args={contentNavMixed}>
-        {Template.bind({})}
-    </Story>
-    <b>Gemischt mit Filter</b>
-    <Story name="Gemischt mit Filter" args={contentNavMixed_autosuggest}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown</b>
-    <Story name="Dropdown" args={contentNavDropdown}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown mit Filter</b>
-    <Story name="Dropdown mit Filter" args={contentNavDropdown_autosuggest}>
-        {Template.bind({})}
-    </Story>
-    <b>Dropdown mit Subgruppen</b>
-    <Story name="Dropdown mit Subgruppen" args={contentNavDropdown_subgroups}>
-        {Template.bind({})}
-    </Story>
-</Preview>
+export const Gemischt = {
+    render: Template.bind({}),
+    name: 'Gemischt',
+    args: contentNavMixed,
+}
+
+export const GemischtMitFilter = {
+    render: Template.bind({}),
+    name: 'Gemischt mit Filter',
+    args: contentNavMixed_autosuggest,
+}
+
+export const Dropdown = {
+    render: Template.bind({}),
+    name: 'Dropdown',
+    args: contentNavDropdown,
+}
+
+export const DropdownMitFilter = {
+    render: Template.bind({}),
+    name: 'Dropdown mit Filter',
+    args: contentNavDropdown_autosuggest,
+}
+
+export const DropdownMitSubgruppen = {
+    render: Template.bind({}),
+    name: 'Dropdown mit Subgruppen',
+    args: contentNavDropdown_subgroups,
+}

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

@@ -0,0 +1,18 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as GroupStories from './group.stories'
+
+<Meta of={GroupStories} />
+
+# Button
+
+Ein toller Einleitungstext für unsere `Teaser Gruppen` Komponente:
+
+<Canvas withToolbar>
+    <Story of={GroupStories.$100GruppeMitUberschrift} />
+    <Story of={GroupStories.$100GruppeMitUberschriftHighlight1} />
+    <Story of={GroupStories.$100GruppeMitUberschriftHighlight2} />
+    <Story of={GroupStories.$100GruppeMitContentNavigationAufklapp} />
+    <Story of={GroupStories.$100GruppeMitRelatedContent} />
+</Canvas>
+
+<ArgsTable story="main" />

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

@@ -0,0 +1,85 @@
+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'
+
+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 })
+}
+
+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 })
+}
+
+export default {
+    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 $100GruppeMitUberschrift = {
+    render: groupTeaserTemplate.bind({}),
+    name: '100% Gruppe mit Überschrift',
+    args: teaserGroup100.includeModel,
+}
+
+export const $100GruppeMitUberschriftHighlight1 = {
+    render: groupTeaserTemplate.bind({}),
+    name: '100% Gruppe mit Überschrift Highlight 1',
+    args: teaserGroup100highlight.includeModel,
+}
+
+export const $100GruppeMitUberschriftHighlight2 = {
+    render: groupTeaserTemplate.bind({}),
+    name: '100% Gruppe mit Überschrift Highlight 2',
+    args: teaserGroup100highlight2.includeModel,
+}
+
+export const $100GruppeMitContentNavigationAufklapp = {
+    render: groupTeaserAccentedTemplate.bind({}),
+    name: '100% Gruppe mit Content Navigation Aufklapp',
+    args: teaserGroup100contentnav.includeModel,
+}
+
+export const $100GruppeMitRelatedContent = {
+    render: groupTeaserTemplate.bind({}),
+    name: '100% Gruppe mit Related Content',
+    args: teaserGroupRelatedContent100.includeModel,
+}

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

@@ -0,0 +1,11 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as PodcastStories from './podcast.stories'
+
+<Meta of={PodcastStories} />
+
+<Canvas withToolbar>
+    <Story of={PodcastStories.$100EpisodePlayer} />
+    <Story of={PodcastStories.$50EpisodePlayer} />
+    <Story of={PodcastStories.$100ChannelPlayer} />
+    <Story of={PodcastStories.$50ChannelPlayer} />
+</Canvas>

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

@@ -1,5 +1,3 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
-
 import podcast from './podcast.hbs'
 import podcastPlaylist from './podcast-playlist.hbs'
 import episodeJson from '../fixtures/teaser_podcast.json'
@@ -7,28 +5,7 @@ import episodeJson50 from '../fixtures/teaser_podcast_50.json'
 import playlistJson100 from '../fixtures/teaser_podcast_playlist.json'
 import playlistJson50 from '../fixtures/teaser_podcast_playlist_50.json'
 
-<Meta
-    title="Komponenten/Teaser/Podcast"
-    parameters={{
-        chromatic: {
-            viewports: [360, 768, 1024],
-            diffThreshold: 0.5,
-        },
-        layout: 'fullscreen',
-    }}
-    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 episodeTemplate = (args, { globals: { customConditionalToolbar } }) => {
+const episodeTemplate = (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 =
@@ -36,7 +13,7 @@ export const episodeTemplate = (args, { globals: { customConditionalToolbar } })
     return podcast({ brand, ...args })
 }
 
-export const playlistTemplate = (args, { globals: { customConditionalToolbar } }) => {
+const playlistTemplate = (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 =
@@ -44,17 +21,51 @@ export const playlistTemplate = (args, { globals: { customConditionalToolbar } }
     return podcastPlaylist({ brand, ...args })
 }
 
-<Preview withToolbar>
-    <Story name="100% Episode Player" args={episodeJson.logicItem.includeModel}>
-        {episodeTemplate.bind({})}
-    </Story>
-    <Story name="50% Episode Player" args={episodeJson50.logicItem.includeModel}>
-        {episodeTemplate.bind({})}
-    </Story>
-    <Story name="100% Channel Player" args={playlistJson100.logicItem.includeModel}>
-        {playlistTemplate.bind({})}
-    </Story>
-    <Story name="50% Channel Player" args={playlistJson50.logicItem.includeModel}>
-        {playlistTemplate.bind({})}
-    </Story>
-</Preview>
+export default {
+    title: 'Komponenten/Teaser/Podcast',
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+            diffThreshold: 0.5,
+        },
+
+        layout: 'fullscreen',
+    },
+
+    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 $100EpisodePlayer = {
+    render: episodeTemplate.bind({}),
+    name: '100% Episode Player',
+    args: episodeJson.logicItem.includeModel,
+}
+
+export const $50EpisodePlayer = {
+    render: episodeTemplate.bind({}),
+    name: '50% Episode Player',
+    args: episodeJson50.logicItem.includeModel,
+}
+
+export const $100ChannelPlayer = {
+    render: playlistTemplate.bind({}),
+    name: '100% Channel Player',
+    args: playlistJson100.logicItem.includeModel,
+}
+
+export const $50ChannelPlayer = {
+    render: playlistTemplate.bind({}),
+    name: '50% Channel Player',
+    args: playlistJson50.logicItem.includeModel,
+}

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

@@ -0,0 +1,10 @@
+import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import { resetComponents } from '@storybook/components'
+import * as PodcastSubscribeButtonStories from './podcast_subscribe_button.stories'
+
+<Meta of={PodcastSubscribeButtonStories} />
+
+<Canvas withToolbar>
+    <Story of={PodcastSubscribeButtonStories.SubscribeButtonClose} />
+    <Story of={PodcastSubscribeButtonStories.SubscribeButtonOpen} />
+</Canvas>