hr-design-system-handlebars 0.122.5 → 0.122.7

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# v0.122.7 (Thu Feb 02 2023)
+
+#### 🐛 Bug Fix
+
+- Byline-Label in Schlagzeilenboxen bricht um [#517](https://github.com/mumprod/hr-design-system-handlebars/pull/517) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### 🧪 Tests
+
+- adds threshold for chromatic screenshots [#515](https://github.com/mumprod/hr-design-system-handlebars/pull/515) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 3
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v0.122.6 (Wed Feb 01 2023)
+
+#### 🐛 Bug Fix
+
+- add Tagesschau&Sportschau icon color [#516](https://github.com/mumprod/hr-design-system-handlebars/pull/516) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v0.122.5 (Tue Jan 31 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -423,7 +423,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
+.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-button, .ds-button:not(:focus-visible), .ds-button-round, .ds-button-round:not(:focus-visible), .ds-link, .ds-link-clusterTeaser, .ds-link:not(:focus-visible), .ds-link-clusterTeaser:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -653,6 +653,21 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.ds-link-clusterTeaser {
+  --tw-text-opacity: 1;
+  color: rgba(96, 96, 96, var(--tw-text-opacity));
+}
+.ds-link-clusterTeaser:focus {
+  --tw-shadow: 0 0 0 0.25rem;
+  --tw-shadow-colored: 0 0 0 0.25rem var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  --tw-shadow-color: var(--color-focus-state);
+  --tw-shadow: var(--tw-shadow-colored);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
 .ds-link:focus:not(:focus-visible) {
   --tw-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow-colored: 0 0 rgba(0,0,0,0);
@@ -660,6 +675,13 @@ video {
   box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
 }
+.ds-link-clusterTeaser:focus:not(:focus-visible) {
+  --tw-shadow: 0 0 rgba(0,0,0,0);
+  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
 .ds-link-inset {
   display: block;
 }
@@ -1888,9 +1910,15 @@ video {
 .fill-white {
   fill: #ffffff;
 }
-.fill-\[\#005293\] {
+.fill-blue-congress {
   fill: #005293;
 }
+.fill-blue-midnight {
+  fill: #023770;
+}
+.fill-blue-deepSeaDream {
+  fill: #002c6b;
+}
 .p-10 {
   padding: 2.5rem;
 }
@@ -2477,7 +2505,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1675199243195;
+  counter-reset: cnt1675350335717;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2695,7 +2723,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1675199243195 1;
+  counter-increment: cnt1675350335717 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2711,7 +2739,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1675199243195);
+  content: counter(cnt1675350335717);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/views/components/teaser/cluster/teaser_cluster.hbs

@@ -3,7 +3,7 @@
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}
                     <span>
-                        {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de"]' '["fill-[#005293] w-10 md:w-12 h-10 md:h-12","fill-[#005293] w-40 lg:w-52 h-8 md:h-12"]')}}
+                        {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
                     </span>
                 {{/if}}
                 {{#if this.title}}

package/dist/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,5 +1,5 @@
 
-{{#decorator 'components/base/link' _css="group ds-link" }} 
+{{#decorator 'components/base/link' _css="group ds-link-clusterTeaser" }} 
     {{> components/teaser/components/teaser_heading
         _headlineTag="h1"
         _headlineCss=""

package/package.json

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

package/src/assets/css/custom-components.css

@@ -101,9 +101,17 @@
         @apply block focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
     }
 
+    .ds-link-clusterTeaser {
+        @apply  text-grey-scorpion focus:shadow-teaser-focus focus:shadow-focus-state focus:outline-none;
+    }
+
     .ds-link:focus:not(:focus-visible) {
         @apply shadow-none;
     }
+    
+    .ds-link-clusterTeaser:focus:not(:focus-visible) {
+        @apply shadow-none;
+    }
 
     .ds-link-inset  {
         @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state ;    

package/src/stories/views/components/teaser/cluster/teaser_cluster.hbs

@@ -3,7 +3,7 @@
             <h2 class="flex items-center px-5 py-5 text-clusterTeaserHeadline">
                 {{#if this.teaserLogo}}
                     <span>
-                        {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de"]' '["fill-[#005293] w-10 md:w-12 h-10 md:h-12","fill-[#005293] w-40 lg:w-52 h-8 md:h-12"]')}}
+                        {{> components/base/image/icon _icon=this.teaserLogo _iconmap="cluster-teaser" _addClass=(inline-switch this.teaserLogo '["hessenschau_de","tagesschau_de","sportschau"]' '["fill-blue-congress w-10 md:w-12 h-10 md:h-12","fill-blue-midnight w-40 lg:w-52 h-8 md:h-12","fill-blue-deepSeaDream w-40 lg:w-52 h-8 md:h-12"]')}}
                     </span>
                 {{/if}}
                 {{#if this.title}}

package/src/stories/views/components/teaser/cluster/teaser_cluster_item.hbs

@@ -1,5 +1,5 @@
 
-{{#decorator 'components/base/link' _css="group ds-link" }} 
+{{#decorator 'components/base/link' _css="group ds-link-clusterTeaser" }} 
     {{> components/teaser/components/teaser_heading
         _headlineTag="h1"
         _headlineCss=""

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

@@ -10,7 +10,8 @@ import playlistJson50 from '../fixtures/teaser_podcast_playlist_50.json'
 <Meta   title="Komponenten/Teaser/Podcast"
         parameters={{
             chromatic: {
-                viewports: [360, 768, 1024]
+                viewports: [360, 768, 1024],
+                diffThreshold: 0.5
             },
             layout: 'fullscreen',
         }}

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

@@ -21,6 +21,7 @@ import teaser50Download from './fixtures/teaser_alternative_50_serif_download.js
         layout: 'fullscreen',
         chromatic: {
             viewports: [360, 1024],
+            diffThreshold: 0.5
         },
     }}
     argTypes={{

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

@@ -8,6 +8,9 @@ import teserPosterMdLabel from './fixtures/teaser_poster_md_label.json'
     title="Komponenten/Teaser/Poster"
     parameters={{
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.5
+        },
     }}
     argTypes={{
         teaserSize: {

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

@@ -11,6 +11,7 @@ import stageTeaserDataForProgram from './fixtures/stage_teaser_program.json'
         layout: 'fullscreen',
         chromatic: {
             viewports: [360, 768, 1024],
+            diffThreshold: 0.5
         },
     }}
     argTypes={{}}

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

@@ -23,7 +23,8 @@ import teaser33LongGeotag from './fixtures/teaser_standard_33_long_geotag.json'
     parameters={{
         layout: 'fullscreen',
          chromatic: {
-            viewports: [360, 1024]
+            viewports: [360, 1024],
+            diffThreshold: 0.5
         }
     }}
     argTypes={{

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

@@ -16,6 +16,9 @@ import teaser25live from './fixtures/teaser_standard_25_serif_live.json'
     title="Komponenten/Teaser/AV-Standard"
     parameters={{
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.5
+        }
     }}
     argTypes={{
         teaserSize: {

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

@@ -14,6 +14,9 @@ import teaserAlternative100TwoEventsSerif from './fixtures/teaser_alternative_10
     title="Komponenten/Teaser/Event"
     parameters={{
         layout: 'fullscreen',
+        chromatic: {
+            diffThreshold: 0.5
+        }
     }}
     argTypes={{
         teaserSize: {

package/tailwind.config.js

@@ -235,6 +235,9 @@ module.exports = {
                     tarawera: '#0a3355',
                     teal: '#007A7CFF',
                     turquoiseCerulian: '#007fa0',
+                    midnight : '#023770',
+                    deepSeaDream : '#002c6b',
+
                 },
                 'black': {
                     DEFAULT: '#000000',