hr-design-system-handlebars 1.9.6 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v1.10.0 (Mon Mar 20 2023)
+
+#### 🚀 Enhancement
+
+- Documentation for Teaser-Heading [#589](https://github.com/mumprod/hr-design-system-handlebars/pull/589) ([@Paul-Atreidis](https://github.com/Paul-Atreidis) [@mariokinzel](https://github.com/mariokinzel))
+
+#### Authors: 2
+
+- [@mariokinzel](https://github.com/mariokinzel)
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.9.6 (Mon Mar 20 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -2667,7 +2667,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1679311457632;
+  counter-reset: cnt1679312520830;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2901,7 +2901,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1679311457632 1;
+  counter-increment: cnt1679312520830 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2917,7 +2917,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1679311457632);
+  content: counter(cnt1679312520830);
 }
 /*! ****************************/
 /*! text-shadow                */

package/package.json

@@ -6,7 +6,7 @@
     "license": "MIT",
     "main": "dist/index.js",
     "repository": "https://github.com/szuelch/hr-design-system-handlebars",
-    "version": "1.9.6",
+    "version": "1.10.0",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

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

@@ -58,9 +58,64 @@ export const Template = ({ _topline, ...args }) => {
 
 # Teaser-Heading
 
-Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
+Die `Dachzeile` (topline) und der `Titel` (title) werden im folgenden als Teaser-Heading bezeichnet, also der einleitende "Kopf" eines Teasers.
 
-## Teaser-Heading serif large
+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
@@ -68,15 +123,14 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
         parameters={{
             docs: {
                 source: {
-                    code: `
-<Button class="storybook-button storybook-button--secondary">Button</button>
-        `,
+                    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',
@@ -87,19 +141,42 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
     </Story>
 </Canvas>
 
-<ArgsTable story="Serif large" />
+<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 small
+## Teaser-Heading Serif 33%
 
 <Canvas>
     <Story
-        name="Serif medium"
+        name="Serif 33"
         parameters={{
             docs: {
                 source: {
-                    code: `
-<Button class="storybook-button storybook-button--secondary">Button</button>
-        `,
+                    code: ``,
                 },
             },
         }}
@@ -116,17 +193,15 @@ Ein toller Einleitungstext für unsere `Teaser-Heading` Komponente:
     </Story>
 </Canvas>
 
-## Teaser-Heading Serif large
+## Teaser-Heading Serif 25%
 
 <Canvas>
     <Story
-        name="Serif small"
+        name="Serif 25"
         parameters={{
             docs: {
                 source: {
-                    code: `
-<Button class="storybook-button storybook-button--secondary">Button</button>
-        `,
+                    code: ``,
                 },
             },
         }}