@bonniernews/dn-design-system-web 8.9.3 → 8.9.5

package/CHANGELOG.md

@@ -4,6 +4,20 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [8.9.5](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.4...@bonniernews/dn-design-system-web@8.9.5) (2023-12-05)
+
+
+### Bug Fixes
+
+* **web:** change vignette to link ([#1134](https://github.com/BonnierNews/dn-design-system/issues/1134)) ([e88283d](https://github.com/BonnierNews/dn-design-system/commit/e88283d374e212257ad6f90b1946265827caca69))
+
+## [8.9.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.3...@bonniernews/dn-design-system-web@8.9.4) (2023-12-04)
+
+
+### Bug Fixes
+
+* **web:** set game header icon size ([#1133](https://github.com/BonnierNews/dn-design-system/issues/1133)) ([45438f8](https://github.com/BonnierNews/dn-design-system/commit/45438f89abba4a6a9fec630ad4c6b43999cfeb1d))
+
 ## [8.9.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@8.9.2...@bonniernews/dn-design-system-web@8.9.3) (2023-12-04)
 
 

package/components/game-header/game-header.scss

@@ -1,6 +1,8 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 @use "../../assets/teaser/teaser.scss" as *;
 
+$ds-game-header__icon-size: 105px;
+
 .ds-game-header {
   width: 100%;
 
@@ -28,6 +30,11 @@
   }
   .ds-game-header__media {
     margin-right: ds-spacing($ds-s-100);
+    width: $ds-game-header__icon-size;
+
+    > .picture {
+      background: none;
+    }
   }
 
   .ds-game-header__description {

package/components/tag-header/README.md

@@ -11,9 +11,11 @@
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
 |title | String | yes | | | H1 Title |
-|vignette | String | no | | | Vignette related to title |
+|vignetteText | String | no | | | Heading of the link box |
+|vignetteTargetUrl | String | no | | | Target URL for the vignette |
 |mediaHtml | String | no | | | Main image |
 |descriptionHtml | String | no | | | Intended use is text, links |
+|theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the vignette |
 |toggle | Bool | no | true, false | false | Show/hide toggle button |
 |toggleText | text | no | | | `text` parameter to ToggleButton (only if `toggle` is enabled) |
 |toggleSelectedText | text | no | | | `selectedText` parameter to ToggleButton (only if `toggle` is enabled) |

package/components/tag-header/tag-header.njk

@@ -7,6 +7,7 @@
 
   {%- set classes = [
     componentClassName,
+    'ds-theme--' + params.theme if params.theme,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -19,8 +20,12 @@
     <div class="{{ componentClassName }}__content">
       <div class="{{ componentClassName }}__bar">
         <div class="{{ componentClassName }}__heading">
-          {% if params.vignette %}
-            <span class="{{ componentClassName }}__vignette">{{ params.vignette }}</span>
+          {% if params.vignetteText %}
+            {% if params.vignetteTargetUrl %}
+              <a href="{{ params.vignetteTargetUrl }}" class="{{ componentClassName }}__vignette">{{ params.vignetteText }}</a>
+            {% else %}
+              <span class="{{ componentClassName }}__vignette">{{ params.vignetteText }}</span>
+            {% endif %}
           {% endif %}
           <h1 class="{{ componentClassName }}__title">{{ params.title}}</h1>
         </div>

package/components/tag-header/tag-header.scss

@@ -34,8 +34,13 @@
 
   .ds-tag-header__vignette {
     @include ds-typography($ds-typography-functional-meta02bold);
-    color: $ds-color-text-brand;
+    color: $ds-theme-color;
     margin-bottom: ds-spacing($ds-s-025);
+    display: block;
+    text-decoration: none;
+    &:hover {
+      text-decoration: none;
+    }
   }
 
   .ds-tag-header__title {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "8.9.3",
+  "version": "8.9.5",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",