hr-design-system-handlebars 1.11.10 → 1.11.12

package/src/stories/BrandColors.data.js

@@ -0,0 +1,42 @@
+import tailwindConfig from 'tailwindConfig'
+const colorVariables = Object.entries(tailwindConfig.theme.extend.colors).filter(
+    ([key, value]) => typeof value === 'string' && value.match(/^var/)
+)
+const brands = [
+    'hr',
+    'hessenschau',
+    'hr1',
+    'hr2',
+    'hr3',
+    'hr4',
+    'you-fm',
+    'hr-inforadio',
+    'hr-fernsehen',
+    'hr-rundfunkrat',
+    'hr-werbung',
+    'hr-bigband',
+    'hr-sinfonieorchester',
+]
+const 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
+})
+
+export { brands, shortcuts, colorsMap }

package/src/stories/BrandColors.mdx

@@ -0,0 +1,25 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import { colorsMap, brands, shortcuts } from './BrandColors.data.js'
+
+<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/{Colors.stories.mdx → Colors.data.js}

@@ -1,5 +1,4 @@
-import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
-const tailwindConfig = require('../../tailwind.config')
+import tailwindConfig from 'tailwindConfig'
 const colorGroups = Object.entries(tailwindConfig.theme.extend.colors).filter(
     ([key, value]) => typeof value === 'object'
 )
@@ -19,19 +18,4 @@ colorGroups.forEach(([key, value]) => {
     colorsMap[key] = colors
 })
 
-<Meta title="Grundlegendes/Farben/Gesamtpalette" />
-
-# Colors
-
-<ColorPalette>
-    {Object.entries(colorsMap).map((token, key) => {
-        return (
-            <ColorItem
-                title={token[0]}
-                colors={token[1].map((value) => {
-                    return value
-                })}
-            />
-        )
-    })}
-</ColorPalette>
+export default colorsMap

package/src/stories/Colors.mdx

@@ -0,0 +1,19 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+import colorsMap from './Colors.data.js'
+
+<Meta title="Grundlegendes/Farben/Gesamtpalette" />
+
+# Colors
+
+<ColorPalette>
+    {Object.entries(colorsMap).map((token, key) => {
+        return (
+            <ColorItem
+                title={token[0]}
+                colors={token[1].map((value) => {
+                    return value
+                })}
+            />
+        )
+    })}
+</ColorPalette>

package/src/stories/Example.mdx

@@ -0,0 +1,56 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as ExampleStories from './Example.stories';
+
+import example from './example.hbs'
+
+<Meta of={ExampleStories} />
+
+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
+
+<Canvas withToolbar>
+  <Story of={ExampleStories.Primary} />
+</Canvas>
+
+## 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.',
+           },
+       },
+   ]}
+/>

package/src/stories/Example.stories.js

@@ -0,0 +1,57 @@
+import example from './example.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 example({ label, ...args })
+}
+
+export default {
+    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 Primary = {
+    render: Template.bind({}),
+    name: 'Primary',
+
+    args: {
+        label: 'Button',
+    },
+}

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>