hr-design-system-handlebars 1.9.2 → 1.9.4

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.9.4 (Mon Mar 20 2023)
+
+#### 🐛 Bug Fix
+
+- BUGFIX: Mask string for trackingInfos [#586](https://github.com/mumprod/hr-design-system-handlebars/pull/586) ([@mariokinzel](https://github.com/mariokinzel))
+
+#### Authors: 1
+
+- [@mariokinzel](https://github.com/mariokinzel)
+
+---
+
+# v1.9.3 (Tue Mar 14 2023)
+
+#### 🐛 Bug Fix
+
+- add Brand-Color-Story [#585](https://github.com/mumprod/hr-design-system-handlebars/pull/585) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.9.2 (Tue Mar 14 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: cnt1678804706293;
+  counter-reset: cnt1679298767437;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2901,7 +2901,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1678804706293 1;
+  counter-increment: cnt1679298767437 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(cnt1678804706293);
+  content: counter(cnt1679298767437);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3356,30 +3356,30 @@ video {
     /* Eventkalender */
     --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: rgba(171,47,45,1);
+    --color-topline: #AB2F2D;
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: rgba(171,47,45,1);
+    --color-link: #AB2F2D;
     /* Stage */
     --color-stage-text-box: 141 39 37;
     --color-stage-primary: var(--color-primary-ds);
     --color-stage-link: #ffffff;
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: rgba(171,47,45,1);
+    --color-cluster-teaser-link: #AB2F2D;
     --color-cluster-teaser-headline: var(--color-primary-ds);
     /* Button */
-    --color-button: rgba(171,47,45,1);
+    --color-button: #AB2F2D;
     --color-button-inverted: #ffffff;
-    --color-button-hollow: rgba(171,47,45,1);
+    --color-button-hollow: #AB2F2D;
     /* Media-Button */
-    --color-media-button: rgba(171,47,45,1);
+    --color-media-button: #AB2F2D;
     /* States */
-    --color-focus-state: rgba(171,47,45,1);
+    --color-focus-state: #AB2F2D;
     /* Content-Nav */
-    --color-content-nav: rgba(171,47,45,1);
+    --color-content-nav: #AB2F2D;
     /* Podcast-Player */
-    --color-podcast: rgba(171,47,45,1);
+    --color-podcast: #AB2F2D;
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: #000000;
     /* Font */
@@ -3411,30 +3411,30 @@ video {
     /* Eventkalender */
     --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: rgba(0,122,124,1);
+    --color-topline: #007A7C;
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: rgba(0,122,124,1);
+    --color-link: #007A7C;
     /* Stage */
     --color-stage-text-box: 67 61 55;
     --color-stage-primary: #00646f;
     --color-stage-link: #ffffff;
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: rgba(0,122,124,1);
+    --color-cluster-teaser-link: #007A7C;
     --color-cluster-teaser-headline: var(--color-primary-ds);
     /* Button */
-    --color-button: rgba(0,122,124,1);
+    --color-button: #007A7C;
     --color-button-inverted: #ffffff;
-    --color-button-hollow: rgba(0,122,124,1);
+    --color-button-hollow: #007A7C;
     /* Media-Button */
-    --color-media-button: rgba(0,122,124,1);
+    --color-media-button: #007A7C;
     /* States */
-    --color-focus-state: rgba(0,122,124,1);
+    --color-focus-state: #007A7C;
     /* Content-Nav */
-    --color-content-nav: rgba(0,122,124,1);
+    --color-content-nav: #007A7C;
     /* Podcast-Player */
-    --color-podcast: rgba(0,122,124,1);
+    --color-podcast: #007A7C;
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: #000000;
     /* Font */
@@ -3570,7 +3570,7 @@ video {
     /* Eilmeldung */
     --color-label-breakingnews: #cc1a14;
     /* Sendung */
-    --color-label-program: rgba(140,3,61,1);
+    --color-label-program: #8C033D;
     /* Download */
     --color-label-download: #606060;
     /* Event */
@@ -3578,33 +3578,33 @@ video {
     /* Kurzmeldung */
     --color-label-kurzmeldung: #0a3355;
     /* Eventkalender */
-    --color-eventcalendar-primary: rgba(140,3,61,1);
+    --color-eventcalendar-primary: #8C033D;
     /* Dachzeile */
-    --color-topline: rgba(140,3,61,1);
+    --color-topline: #8C033D;
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: rgba(140,3,61,1);
+    --color-link: #8C033D;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: var(--color-primary-ds);
     --color-stage-text: #000000;
     --color-stage-link: var(--color-link);
     /* Cluster-Teaser */
-    --color-cluster-teaser-link: rgba(140,3,61,1);
+    --color-cluster-teaser-link: #8C033D;
     --color-cluster-teaser-headline: #000000;
     /* Button */
-    --color-button: rgba(140,3,61,1);
+    --color-button: #8C033D;
     --color-button-inverted: #ffffff;
-    --color-button-hollow: rgba(140,3,61,1);
+    --color-button-hollow: #8C033D;
     /* Media-Button */
     --color-media-button: #c95702;
     /* States */
-    --color-focus-state: rgba(140,3,61,1);
+    --color-focus-state: #8C033D;
     /* Content-Nav */
-    --color-content-nav: rgba(140,3,61,1);
+    --color-content-nav: #8C033D;
     /* Podcast-Player */
-    --color-podcast: rgba(140,3,61,1);
+    --color-podcast: #8C033D;
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: #A14702;
     /* Font */
@@ -3696,11 +3696,11 @@ video {
     /* Eventkalender */
     --color-eventcalendar-primary: var(--color-primary-ds);
     /* Dachzeile */
-    --color-topline: rgba(15,97,87,1);
+    --color-topline: #0F6157;
     /* Subline */
     --color-subline: var(--color-topline);
     /* Link */
-    --color-link: rgba(15,97,87,1);
+    --color-link: #0F6157;
     /* Stage */
     --color-stage-text-box: 255 255 255;
     --color-stage-primary: #168378;
@@ -3714,13 +3714,13 @@ video {
     --color-button-inverted: #ffffff;
     --color-button-hollow: #29675d;
     /* Media-Button */
-    --color-media-button: rgba(15,97,87,1);
+    --color-media-button: #0F6157;
     /* States */
     --color-focus-state: var(--color-link);
     /* Content-Nav */
     --color-content-nav: var(--color-primary-ds);
     /* Podcast-Player */
-    --color-podcast: rgba(15,97,87,1);
+    --color-podcast: #0F6157;
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: #bf0071;
     /* Font */
@@ -3744,7 +3744,7 @@ video {
     /* Eilmeldung */
     --color-label-breakingnews: #cc1a14;
     /* Sendung */
-    --color-label-program: rgba(0,126,161,1);
+    --color-label-program: #007EA1;
     /* Download */
     --color-label-download: #606060;
     /* Event */
@@ -3778,7 +3778,7 @@ video {
     /* Content-Nav */
     --color-content-nav: var(--color-link);
     /* Podcast-Player */
-    --color-podcast: rgba(0,126,161,1);
+    --color-podcast: #007EA1;
     --color-podcast-text: var(--color-link);
     --color-podcast-highlight: #000000;
     /* Font */

package/dist/views/components/modal/modal.hbs

@@ -1,4 +1,4 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.title}} Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
     <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}

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.2",
+    "version": "1.9.4",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "storybook": "start-storybook -p 6006 public",

package/src/stories/BrandColors.stories.mdx

@@ -0,0 +1,39 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs'
+const tailwindConfig = require('../../tailwind.config')
+const colorVariables = Object.entries(tailwindConfig.theme.extend.colors).filter(
+    ([key, value]) => typeof value === 'string' && value.match(/^var/)
+)
+let brands = ['hr','hessenschau','hr1','hr2','hr3','hr4','you-fm','hr-inforadio','hr-fernsehen','hr-rundfunkrat','hr-werbung','hr-bigband','hr-sinfonieorchester']
+let 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
+})
+
+<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

@@ -19,7 +19,7 @@ colorGroups.forEach(([key, value]) => {
     colorsMap[key] = colors
 })
 
-<Meta title="Grundlegendes/Farben" />
+<Meta title="Grundlegendes/Farben/Gesamtpalette" />
 
 # Colors
 

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

@@ -1,4 +1,4 @@
-<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "{{this.link.cmsDocument.title}} Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
+<div class="js-load" data-hr-modal='{"modalTriggerId":"{{defaultIfEmpty _trigger ""}}", "trackingInformations": "\" {{this.link.cmsDocument.title}} \" Ticketlink-Overlay ok geklickt - Dokumenten-Id: {{this.link.cmsDocument.sophoraId}}","dialogPolyfillBaseUrl":"{{resourceUrl (configProperty 'dialogPolyfill.baseUrl')}}"}'>
     <dialog class='js-modal p-0 backdrop:bg-grey-scorpion/90 shadow-md {{defaultIfEmpty _css "sm:max-w-xl"}}'>
         <form method="dialog" class="js-dialog-content p-4">
             {{> @partial-block }}

package/tailwind.config.js

@@ -230,14 +230,14 @@ module.exports = {
                     deepSeaDream: '#002c6b',
                     dodgerBlue: '#407596',
                     jellyBean: '#276b9e',
-                    lightCerulean: '#007EA1FF',
+                    lightCerulean: '#007EA1',
                     matisse: '#1B7C96',
                     midnight: '#023770',
                     pacificBlue: '#009bc6',
                     science: '#006dc1',
                     sea: '#006783',
                     tarawera: '#0a3355',
-                    teal: '#007A7CFF',
+                    teal: '#007A7C',
                     turquoiseCerulian: '#007fa0',
                 },
                 'black': {
@@ -249,10 +249,10 @@ module.exports = {
                     lipstick: '#CC006E',
                     mexican: '#a12644',
                     monza: '#c20016',
-                    paprika: '#8C033DFF',
+                    paprika: '#8C033D',
                     scarlett: '#9b0112',
                     thunderbird: '#cc1a14',
-                    wellRead: '#AB2F2DFF',
+                    wellRead: '#AB2F2D',
                 },
                 'pink': {
                     fuchsie: '#bf0071',
@@ -269,7 +269,7 @@ module.exports = {
                     spicyCarrot: '#d34600',
                 },
                 'teal': {
-                    DEFAULT: '#007A7CFF',
+                    DEFAULT: '#007A7C',
                     deeperPool: '#097d8e',
                 },
                 'grey': {
@@ -285,7 +285,7 @@ module.exports = {
                 },
                 'green': {
                     casal: '#29675d',
-                    eden: '#0F6157FF',
+                    eden: '#0F6157',
                     flint: '#6e675e',
                     genoa: '#168378',
                     goBen: '#6e6748',