hr-design-system-handlebars 0.38.0 → 0.38.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v0.38.1 (Thu Mar 31 2022)
+
+#### 🐛 Bug Fix
+
+- add topline-component [#201](https://github.com/mumprod/hr-design-system-handlebars/pull/201) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### 📝 Documentation
+
+- DOCS: adds section to nvm in readme [#200](https://github.com/mumprod/hr-design-system-handlebars/pull/200) ([@szuelch](https://github.com/szuelch))
+
+#### Authors: 2
+
+- [@szuelch](https://github.com/szuelch)
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v0.38.0 (Mon Mar 28 2022)
 
 #### 🚀 Enhancement

package/README.md

@@ -10,6 +10,14 @@ auf die folgenden Versionen aktualisieren.
 | Node.js  | 16.14.2 |
 | NPM      | 8.5.0   |
 
+---
+
+**Hinweis**
+
+Node.js installiert man am besten mit dem Node Version Manager NVM. Dies ist zwar eigentlich ein Linux Projekt, kann aber als nvm-windows auch unter Windows genutzt werden. Die Installationsdateien können unter https://github.com/coreybutler/nvm-windows/releases heruntergeladen werden. NVM gestattet es je nach Bedarf schnell über die Konsole zwischen mehreren Versionen von node.js zu wechseln. Seit der Version 1.18 von NVM müssen zur korrekten Nutzung die Hinweise unter https://github.com/coreybutler/nvm-windows/wiki/Common-Issues#permissions-exit-1-exit-5-access-denied-exit-145 beachtet werden.
+
+---
+
 Zur Installation des Designsystems bitte zunächst das Projekt in ein beliebiges Verzeichnis auf der Festplatte mit
 
 ```

package/dist/assets/index.css

@@ -22,6 +22,8 @@
     --color-label-download: #606060;
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
+    /* Dachzeile */
+    --color-topline: #006dc1;
 }
 
 [data-theme='hessenschau'] {
@@ -46,6 +48,8 @@
     --color-label-download: #606060;
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
+    /* Dachzeile */
+    --color-topline: #006dc1;
 }
 
 [data-theme='hr-bigband'] {
@@ -66,6 +70,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-fernsehen'] {
@@ -86,6 +92,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-inforadio'] {
@@ -106,6 +114,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-rundfunkrat'] {
@@ -128,6 +138,8 @@
     --color-label-event: #000000;
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-werbung'] {
@@ -150,6 +162,8 @@
     --color-label-event: #000000;
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-sinfonieorchester'] {
@@ -170,6 +184,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-bigband'] {
@@ -190,6 +206,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr'] {
@@ -212,6 +230,8 @@
     --color-label-event: #000000;
     /* Pressemitteilungen */
     --color-label-pm: #006eb7;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr1'] {
@@ -232,6 +252,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr2'] {
@@ -252,6 +274,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr3'] {
@@ -272,6 +296,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr4'] {
@@ -292,6 +318,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='you-fm'] {
@@ -312,6 +340,8 @@
     --color-label-download: #606060;
     /* Event */
     --color-label-event: #000000;
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 /*! purgecss end ignore */
@@ -1476,6 +1506,9 @@ Ensure the default browser behavior of the `hidden` attribute.
 .mt-6 {
     margin-top: 1.5rem;
 }
+.mt-5 {
+    margin-top: 1.25rem;
+}
 .-mt-2 {
     margin-top: -0.5rem;
 }
@@ -1491,9 +1524,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .mt-8 {
     margin-top: 2rem;
 }
-.mt-3 {
-    margin-top: 0.75rem;
-}
 .mt-1\.5 {
     margin-top: 0.375rem;
 }
@@ -2170,6 +2200,10 @@ Ensure the default browser behavior of the `hidden` attribute.
     --tw-text-opacity: 1;
     color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
+.text-toplineColor {
+    color: #006dc1;
+    color: var(--color-topline);
+}
 .text-blue-congress {
     --tw-text-opacity: 1;
     color: rgba(0, 82, 147, var(--tw-text-opacity));

package/dist/views/components/Teaser/Teaser-Heading.hbs

@@ -1,6 +1,6 @@
 <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
     {{#if topline}}
-        <span class="block text-xl font-heading mt-3">{{topline}}</span>
+        {{> components/Topline text=topline }}
     {{/if}}
     <span class="block {{inline-switch size '["lg","sm"]' '["text-3xl","text-2xl","text-2xl"]'}} {{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading font-bold"]'}} mt-1.5">{{headline}}</span>
 </{{headlineTag}}>

package/dist/views/components/Topline.hbs

@@ -0,0 +1 @@
+<span class="block mt-5 text-base text-toplineColor font-heading">{{text}}</span>

package/package.json

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

package/src/assets/tailwind.css

@@ -22,6 +22,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
+    /* Dachzeile */
+    --color-topline: #006dc1;
 }
 
 [data-theme='hessenschau'] {
@@ -46,6 +48,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
+    /* Dachzeile */
+    --color-topline: #006dc1;
 }
 
 [data-theme='hr-bigband'] {
@@ -66,6 +70,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-fernsehen'] {
@@ -86,6 +92,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-inforadio'] {
@@ -106,6 +114,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-rundfunkrat'] {
@@ -128,6 +138,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-werbung'] {
@@ -150,6 +162,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-sinfonieorchester'] {
@@ -170,6 +184,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr-bigband'] {
@@ -190,6 +206,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr'] {
@@ -212,6 +230,8 @@
     --color-label-event: theme('colors.black.DEFAULT');
     /* Pressemitteilungen */
     --color-label-pm: theme('colors.blue.deepCerulean');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr1'] {
@@ -232,6 +252,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr2'] {
@@ -252,6 +274,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr3'] {
@@ -272,6 +296,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='hr4'] {
@@ -292,6 +318,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 [data-theme='you-fm'] {
@@ -312,6 +340,8 @@
     --color-label-download: theme('colors.grey.scorpion');
     /* Event */
     --color-label-event: theme('colors.black.DEFAULT');
+    /* Dachzeile */
+    --color-topline: #c20016;
 }
 
 /*! purgecss end ignore */

package/src/stories/views/components/Teaser/Teaser-Heading.hbs

@@ -1,6 +1,6 @@
 <{{headlineTag}} class="{{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading"]'}} {{inline-switch bold '["true","false"]' '["font-bold"]'}} {{class}}" >
     {{#if topline}}
-        <span class="block text-xl font-heading mt-3">{{topline}}</span>
+        {{> components/Topline text=topline }}
     {{/if}}
     <span class="block {{inline-switch size '["lg","sm"]' '["text-3xl","text-2xl","text-2xl"]'}} {{inline-switch font '["headingSerif","heading"]' '["font-headingSerif","font-heading font-bold"]'}} mt-1.5">{{headline}}</span>
 </{{headlineTag}}>

package/src/stories/views/components/Topline.hbs

@@ -0,0 +1 @@
+<span class="block mt-5 text-base text-toplineColor font-heading">{{text}}</span>

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

@@ -0,0 +1,37 @@
+import { ArgsTable, Meta, Story, Preview } from "@storybook/addon-docs";
+
+import topline from "./Topline.hbs";
+
+<Meta
+  title="Komponenten/Dachzeile"
+  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
+
+Beispieltext für die Topline-Komponente:
+
+<Preview withToolbar>
+  <Story
+    name="topline-1"
+    args={{
+      text:
+        "Dies ist die Dachzeile",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Preview>
+
+<ArgsTable story="topline-1" />

package/tailwind.config.js

@@ -167,6 +167,7 @@ module.exports = {
                 labelDownload: 'var(--color-label-download)',
                 labelPm: 'var(--color-label-pm)',
                 labelLive: 'var(--color-label-live)',
+                toplineColor: 'var(--color-topline)',
             },
         },
     },