hr-design-system-handlebars 1.11.10 → 1.11.11

package/src/stories/{Fixtures.stories.mdx → Fixtures.mdx}

@@ -1,6 +1,4 @@
-import { Meta } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
-import icon from './views/components/base/image/icon.hbs'
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
 
 <Meta title="Grundlegendes/Testdatenbereitstellung" />
 
@@ -485,7 +483,7 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 
 Ein toller Einleitungstext für unsere `Teaser` Komponente:
 
-<Preview withToolbar>
+<Canvas>
     <Story name="Standard Hero" args={xxlTeaserSerif}>
         {Template.bind({})}
     </Story>
@@ -507,7 +505,7 @@ Ein toller Einleitungstext für unsere `Teaser` Komponente:
     <Story name="Standard SM" args={smTeaserSerif}>
         {Template.bind({})}
     </Story>
-</Preview>
+</Canvas>
 ```
 
 Für die unterschiedlichen Teaservarianten werden die Testdaten in Variablen importiert und den konkreten Stories über den `args` Parameter

package/src/stories/{InstallAndUpdate.stories.mdx → InstallAndUpdate.mdx}

@@ -1,6 +1,4 @@
 import { Meta } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
-import icon from './views/components/base/image/icon.hbs'
 
 <Meta title="Grundlegendes/Installation und Update" />
 

package/src/stories/Introduction.mdx

@@ -0,0 +1,3 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Einführung" />

package/src/stories/{SvgOptimization.stories.mdx → SvgOptimization.mdx}

@@ -1,6 +1,4 @@
 import { Meta } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
-import icon from './views/components/base/image/icon.hbs'
 
 <Meta title="Grundlegendes/Icons" />
 

package/src/stories/{Typography.stories.mdx → Typography.mdx}

@@ -1,5 +1,4 @@
 import { Meta } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
 
 <Meta title="Grundlegendes/Typographie" />
 
@@ -27,7 +26,7 @@ Zur Auszeichnung von Fließtexten stehen die folgenden Utility Klassen zur verf
 Soll der Inhalt eines bestimmten HTML-Elements als Fließtext ausgezeichnet werden, müssen ihm die Klasse `font-copy` sowie
 eine der Klassen `text-{size}` gegben werden.
 
-<div className="rounded-t-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
+<div className="sb-unstyled rounded-t-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
     <dl className="text-violet-600">
         <div className="flex items-start">
             <dt className="!m-0 w-16 shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-3">
@@ -86,22 +85,22 @@ auf der Webseite des für unser Designsystem genutzten CSS Frameworks [Tailwind.
 
 Zur Auszeichnung von Überschriften stehen die folgenden Utility Klassen zur verfügung:
 
-| Klasse              | Properties                                          |                    | Erläuterung                                           |
-| :------------------ | :-------------------------------------------------- | ------------------ | :---------------------------------------------------- |
-| `font-headingSerif` | `font-family: RobotoSlab, serif`                    |                    | Setzt die Eigenschaft `font-family`                   |
-| `font-heading`      | `font-family: RobotoCond, sans-serif`               |                    | Setzt die Eigenschaft `font-family`                   |
-| `text-lg`           | `font-size: 1.125rem` <br /> `line-height: 1.5rem`  | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.675rem` | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 1.75rem` | `22px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-3xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem` | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
-| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.375rem`| `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| Klasse              | Properties                                           |                    | Erläuterung                                           |
+| :------------------ | :--------------------------------------------------- | ------------------ | :---------------------------------------------------- |
+| `font-headingSerif` | `font-family: RobotoSlab, serif`                     |                    | Setzt die Eigenschaft `font-family`                   |
+| `font-heading`      | `font-family: RobotoCond, sans-serif`                |                    | Setzt die Eigenschaft `font-family`                   |
+| `text-lg`           | `font-size: 1.125rem` <br /> `line-height: 1.5rem`   | `18px`<br />`24px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-xl`           | `font-size: 1.25rem` <br /> `line-height: 1.675rem`  | `20px`<br />`26px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-2xl`          | `font-size: 1.375rem` <br /> `line-height: 1.75rem`  | `22px`<br />`28px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-3xl`          | `font-size: 1.875rem` <br /> `line-height: 2.25rem`  | `30px`<br />`36px` | Setzt die Eigenschaften `font-size` und `line-height` |
+| `text-4xl`          | `font-size: 2.125rem` <br /> `line-height: 2.375rem` | `34px`<br />`38px` | Setzt die Eigenschaften `font-size` und `line-height` |
 
 ### Verwendung RobotoSlab
 
 Soll der Inhalt eines bestimmten HTML-Elements als **Überschrift mit Serifen** ausgezeichnet werden, müssen ihm die Klasse `font-headingSerif` sowie
 eine der Klassen `text-{size}` gegben werden.
 
-<div className="rounded-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
+<div className="sb-unstyled rounded-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
     <dl className="text-violet-600">
         <div className="mt-6 flex items-start">
             <dt className="!m-0 w-16 shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-5">
@@ -159,7 +158,7 @@ eine der Klassen `text-{size}` gegben werden.
 Soll der Inhalt eines bestimmten HTML-Elements als **Überschrift ohne Serifen** ausgezeichnet werden, müssen ihm die Klasse `font-heading` sowie
 eine der Klassen `text-{size}` gegben werden.
 
-<div className="rounded-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
+<div className="sb-unstyled rounded-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
     <dl className="text-violet-600">
         <div className="mt-6 flex items-start">
             <dt className="!m-0 w-16 shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-5">
@@ -217,7 +216,7 @@ eine der Klassen `text-{size}` gegben werden.
 Soll der Inhalt eines bestimmten HTML-Elements als **Überschrift ohne Serifen** und in **bold** ausgezeichnet werden, müssen ihm die Klasse `font-heading` und `font-bold` sowie
 eine der Klassen `text-{size}` gegben werden.
 
-<div className="rounded-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
+<div className="sb-unstyled rounded-xl overflow-hidden bg-gradient-to-r from-purple-50 to-purple-100 p-10">
     <dl className="text-violet-600">
         <div className="mt-6 flex items-start">
             <dt className="!m-0 w-16 shrink-0 text-sm text-violet-600 text-opacity-50 font-mono leading-5">

package/src/stories/{conventions-and-datastructure.stories.mdx → conventions-and-datastructure.mdx}

@@ -1,6 +1,4 @@
-import { Meta, Preview } from '@storybook/addon-docs'
-import { resetComponents } from '@storybook/components'
-import icon from './views/components/base/image/icon.hbs'
+import { Meta, Canvas } from '@storybook/addon-docs'
 
 <Meta title="Grundlegendes/Konventionen und Datenstrukturen" />
 
@@ -10,7 +8,7 @@ Dieses Kapitel richtet sich vor allem an die Entwickler des Designsystems. Es er
 
 ## Aufbau der Datenstruktur des Designsystems
 
-<Preview>
+<Canvas>
     <pre>
         {`
 .github/
@@ -41,7 +39,7 @@ README.md
 tailwind.config.js
 `}
     </pre>
-</Preview>
+</Canvas>
 
 Im folgenden werden kurz die Ordner, deren Inhalte und andere für das Designsystem wichtige Dateien beschrieben
 
@@ -72,7 +70,7 @@ In den Ordner `dist` werden bei einem Release verschiedene Dateien (u.a. die Tem
 
 ### src
 
-<Preview>
+<Canvas>
     <pre>
         {`
 src/
@@ -90,7 +88,7 @@ src/
 |    |    |——— pages/     
 `}
     </pre>
-</Preview>
+</Canvas>
 
 Der `src` Ordner enthält die Unterordner `assets` sowie `stories`. Im Ordner `assets` finden sich die Folgenden Ordner und Dateien
 
@@ -200,13 +198,13 @@ Die Namen von Parametern in Handlebar-Komponenten sind, anders als der Datainame
 <div class="bg-red-200 !mt-4 p-4">
     <h4 class="!text-red-900 font-bold">Falsch</h4>
     <pre class="!bg-white !leading-8 !p-4">
-        &#123;&#123;#>components/base/link CssClasses="" IsAriaHidden=true 
+        &#123;&#123;#>components/base/link CssClasses="" IsAriaHidden=true
     </pre>
 </div>
 <div class="bg-green-200 !mt-4 p-4">
     <h4 class="!text-green-900 font-bold">Korrekt</h4>
     <pre class="!bg-white !p-4 !leading-8">
-        &#123;&#123;#>components/base/link cssClasses="" isAriaHidden=true 
+        &#123;&#123;#>components/base/link cssClasses="" isAriaHidden=true
         clickLabelPrefix2="mediaLink"&#125;&#125;
     </pre>
 </div>

package/src/stories/views/components/Button.mdx

@@ -0,0 +1,30 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as ButtonStories from './Button_.stories';
+
+import button from './Button.hbs'
+
+<Meta of={ButtonStories} />
+
+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 button({ label, ...args })
+}
+
+# Button
+
+Let's define a story for our `Button` component:
+
+<Canvas>
+  <Story of={ButtonStories.Primary} />
+</Canvas>
+
+<ArgsTable story="Primary" />
+
+## Button Secondary
+
+<Canvas>
+  <Story of={ButtonStories.Secondary} />
+</Canvas>
+
+## Test

package/src/stories/views/components/Button_.stories.js

@@ -0,0 +1,77 @@
+import button from './Button.hbs'
+
+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 button({ label, ...args })
+}
+
+export default {
+    title: 'Komponenten-Beispiele/MDX-Button',
+
+    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 Primary = {
+    render: Template.bind({}),
+    name: 'Primary',
+
+    args: {
+        label: 'Button',
+    },
+}
+
+export const Secondary = {
+    render: Template.bind({}),
+    name: 'Secondary',
+
+    parameters: {
+        docs: {
+            source: {
+                code: `
+<Button class="storybook-button storybook-button--secondary">Button</button>
+ `,
+            },
+        },
+    },
+
+    args: {
+        label: 'Button',
+        type: 'secondary',
+    },
+}

package/src/stories/views/components/event/calendar/{event_calendar_components.stories.mdx → event_calendar_components.mdx}

@@ -1,4 +1,4 @@
-import { ArgsTable, Meta, Story, Canvas, Preview } from '@storybook/addon-docs'
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
 import eventCalendarHeading from './event_calendar_heading.hbs'
 import eventCalendarNav from './event_calendar_nav.hbs'
 import eventCalendarContent from './event_calendar_event_teaser.hbs'
@@ -6,20 +6,9 @@ import eventCalendarFooter from './event_calendar_footer.hbs'
 import teaserEventCalendar100Serif from '../../teaser/fixtures/teaser_event_calendar_100_serif.json'
 import eventCalendarEventTeaserData from './fixtures/event_calendar_event_teaser.json'
 import eventCalendarFooterData from './fixtures/event_calendar_footer.json'
+import * as EventCalendarComponentsStories from './event_calendar_components.stories';
 
-<Meta
-    title="Komponenten/Teaser/Eventkalender/Komponenten"
-    parameters={{
-        layout: 'fullscreen',
-    }}
-    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"><div class="col-span-12">
-                ${Story()} 
-                </div></div></div>`
-        },
-    ]}
-/>
+<Meta of={EventCalendarComponentsStories} />
 
 export const TemplateEventCalendarHeading = (args, { globals: { customConditionalToolbar } }) => {
     // You can either use a function to create DOM elements or use a plain html string!
@@ -76,21 +65,25 @@ Mobile = Text unter dem Bild mit Teasertext <br />{' '}
 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>
+  <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
@@ -101,61 +94,12 @@ Die Standard-Teaser-Komponente wird in handlebars wie folgt eingebaut:
 {{> components/teaser/teaser_standard_event}}
 ```
 
-<Preview withToolbar>
-    <Story
-        name="Heading"
-        argTypes={{
-            title: {
-                description: 'Überschrift',
-                table: {
-                    defaultValue: {
-                        summary: 'Eventkalender',
-                    },
-                },
-            },
-        }}
-        args={{ title: 'Eventkalender' }}
-    >
-        {TemplateEventCalendarHeading.bind({})}
-    </Story>
-    <Story
-        name="Navigation"
-        args={teaserEventCalendar100Serif.logicItem.includeModel.eventCalendar.months}
-    >
-        {TemplateEventCalendarNav.bind({})}
-    </Story>
-    <Story
-        name="Inhalt"
-        argTypes={{
-            statusDescriptionForLabelShort: {
-                control: {
-                    type: 'select',
-                    labels: {
-                        event_status_cancelled: 'Abgesagt!',
-                        event_status_rescheduled: 'Verschoben!',
-                        event_status_moved_online_short: 'Als Livestream',
-                        event_status_gets_update: 'Wird aktualisiert!',
-                    },
-                    options: [
-                        'event_status_cancelled',
-                        'event_status_rescheduled',
-                        'event_status_moved_online_short',
-                        'event_status_gets_update',
-                    ],
-                },
-                description: 'Status des Events',
-                table: {
-                    defaultValue: {
-                        summary: 'event_status_cancelled',
-                    },
-                },
-            },
-        }}
-        args={{ ...eventCalendarEventTeaserData, _withConcertInfo: false, _showTeaser: true }}
-    >
-        {TemplateEventCalendarContent.bind({})}
-    </Story>
-    <Story name="Footer" args={eventCalendarFooterData}>
-        {TemplateEventCalendarFooter.bind({})}
-    </Story>
-</Preview>
+<Canvas>
+  <Story of={EventCalendarComponentsStories.Heading} />
+
+  <Story of={EventCalendarComponentsStories.Navigation} />
+
+  <Story of={EventCalendarComponentsStories.Inhalt} />
+
+  <Story of={EventCalendarComponentsStories.Footer} />
+</Canvas>

package/src/stories/views/components/event/calendar/event_calendar_components.stories.js

@@ -0,0 +1,129 @@
+import eventCalendarHeading from './event_calendar_heading.hbs'
+import eventCalendarNav from './event_calendar_nav.hbs'
+import eventCalendarContent from './event_calendar_event_teaser.hbs'
+import eventCalendarFooter from './event_calendar_footer.hbs'
+import teaserEventCalendar100Serif from '../../teaser/fixtures/teaser_event_calendar_100_serif.json'
+import eventCalendarEventTeaserData from './fixtures/event_calendar_event_teaser.json'
+import eventCalendarFooterData from './fixtures/event_calendar_footer.json'
+
+const TemplateEventCalendarHeading = (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 eventCalendarHeading({ brand, ...args })
+}
+
+const TemplateEventCalendarNav = (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 eventCalendarNav({ brand, ...args })
+}
+
+const TemplateEventCalendarContent = (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 eventCalendarContent({ brand, ...args })
+}
+
+const TemplateEventCalendarFooter = (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 eventCalendarFooter({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Eventkalender/Komponenten',
+
+    parameters: {
+        layout: 'fullscreen',
+    },
+
+    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"><div class="col-span-12">
+             ${Story()} 
+             </div></div></div>`
+        },
+    ],
+}
+
+export const Heading = {
+    render: TemplateEventCalendarHeading.bind({}),
+    name: 'Heading',
+
+    argTypes: {
+        title: {
+            description: 'Überschrift',
+
+            table: {
+                defaultValue: {
+                    summary: 'Eventkalender',
+                },
+            },
+        },
+    },
+
+    args: {
+        title: 'Eventkalender',
+    },
+}
+
+export const Navigation = {
+    render: TemplateEventCalendarNav.bind({}),
+    name: 'Navigation',
+    args: teaserEventCalendar100Serif.logicItem.includeModel.eventCalendar.months,
+}
+
+export const Inhalt = {
+    render: TemplateEventCalendarContent.bind({}),
+    name: 'Inhalt',
+
+    argTypes: {
+        statusDescriptionForLabelShort: {
+            control: {
+                type: 'select',
+
+                labels: {
+                    event_status_cancelled: 'Abgesagt!',
+                    event_status_rescheduled: 'Verschoben!',
+                    event_status_moved_online_short: 'Als Livestream',
+                    event_status_gets_update: 'Wird aktualisiert!',
+                },
+
+                options: [
+                    'event_status_cancelled',
+                    'event_status_rescheduled',
+                    'event_status_moved_online_short',
+                    'event_status_gets_update',
+                ],
+            },
+
+            description: 'Status des Events',
+
+            table: {
+                defaultValue: {
+                    summary: 'event_status_cancelled',
+                },
+            },
+        },
+    },
+
+    args: {
+        ...eventCalendarEventTeaserData,
+        _withConcertInfo: false,
+        _showTeaser: true,
+    },
+}
+
+export const Footer = {
+    render: TemplateEventCalendarFooter.bind({}),
+    name: 'Footer',
+    args: eventCalendarFooterData,
+}

package/src/stories/views/components/geoTag/geoTag.mdx

@@ -0,0 +1,32 @@
+import { ArgsTable, Meta, Story, Canvas, ColorPalette, ColorItem } from '@storybook/blocks'
+import * as GeoTagStories from './geoTag.stories';
+
+import geoTag from './geoTag.hbs'
+
+<Meta of={GeoTagStories} />
+
+export const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${geoTag}</div>`;
+    return geoTag({ ...args })
+}
+
+# geoTag
+
+<Canvas withToolbar>
+  <Story of={GeoTagStories.Frankfurt} />
+</Canvas>
+
+## Einbindung
+
+Die Komponente wird in Form eines Handlebar Partials eingebunden.
+
+```html
+{{> components/geoTag/geoTag.hbs text="Frankfurt"}}
+```
+
+Mit folgenden Parametern kann die Komponente konfiguriert werden.
+
+| Parameter  | Typ      | Mögliche Werte  | Erläuterung                    |
+| :--------- | :------- | :-------------- | :----------------------------- |
+| **\_text** | `String` | Beliebiger Text | Die Beschriftung der Ortsmarke |

package/src/stories/views/components/geoTag/geoTag.stories.js

@@ -0,0 +1,35 @@
+import geoTag from './geoTag.hbs'
+
+const Template = ({ ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${geoTag}</div>`;
+    return geoTag({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Ortsmarke',
+
+    argTypes: {
+        _text: {
+            control: 'text',
+            description: 'Beschriftung der Ortsmarke',
+        },
+    },
+
+    decorators: [
+        (Story) => {
+            return `<div class="relative py-8">  
+             ${Story()} 
+             </div>`
+        },
+    ],
+}
+
+export const Frankfurt = {
+    render: Template.bind({}),
+    name: 'Frankfurt',
+
+    args: {
+        _text: 'Frankfurt',
+    },
+}