@bonniernews/dn-design-system-web 31.4.3 → 32.1.0

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [32.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@32.0.0...@bonniernews/dn-design-system-web@32.1.0) (2025-04-29)
+
+
+### Features
+
+* **web:** render playicon if teaser presentation contains playknapp ([#1712](https://github.com/BonnierNews/dn-design-system/issues/1712)) ([65cd318](https://github.com/BonnierNews/dn-design-system/commit/65cd31837e30c47c6a19000e828a69722c3b9fed))
+
+## [32.0.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.4.3...@bonniernews/dn-design-system-web@32.0.0) (2025-04-28)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** DO NOT USE 31.3.*-31.4.* They have misstakes (affecting standard teaser) that are now corrected
+
+### Bug Fixes
+
+* **web:** change source for test images in hope to reduce flakyness ([#1718](https://github.com/BonnierNews/dn-design-system/issues/1718)) ([9b4008f](https://github.com/BonnierNews/dn-design-system/commit/9b4008fb0c7af7194976b5bcffd012f122a7389d))
+* **web:** reapply the pr support byline in standardteaser after mergeknas ([#1720](https://github.com/BonnierNews/dn-design-system/issues/1720)) ([880bdae](https://github.com/BonnierNews/dn-design-system/commit/880bdaeaa9129652cd9654bcf76872229f40a414))
+
+
+### Maintenance
+
+* **deps-dev:** bump axios from 1.8.4 to 1.9.0 ([#1715](https://github.com/BonnierNews/dn-design-system/issues/1715)) ([57460d2](https://github.com/BonnierNews/dn-design-system/commit/57460d20bbf8f40aabfa381d9149972581cd965c))
+* **deps-dev:** bump style-dictionary from 4.3.3 to 4.4.0 ([#1716](https://github.com/BonnierNews/dn-design-system/issues/1716)) ([9de788e](https://github.com/BonnierNews/dn-design-system/commit/9de788eb2fcd87a1dae1bc730e45355fcf145b88))
+
 ## [31.4.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.4.2...@bonniernews/dn-design-system-web@31.4.3) (2025-04-25)
 
 

package/assets/teaser/teaser.scss

@@ -81,6 +81,44 @@ $ds-teaser-standard-image-width-desktop: 196px;
     }
   }
 
+  .ds-teaser__byline {
+    overflow: hidden;
+    position: relative;
+    margin-left: ds-spacing($ds-s-100);
+    margin-bottom: ds-spacing($ds-s-100, "px", true);
+    margin-top: ds-spacing($ds-s-025);
+
+    .picture {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      min-width: 100%;
+      margin: auto 0 0;
+      max-height: 100%;
+
+      .picture__img {
+        margin: 0;
+        object-position: top;
+        max-height: unset;
+      }
+    }
+
+    @include ds-mq-largest-breakpoint(mobile) {
+      width: 96px;
+      min-height: 96px;
+      margin-left: ds-spacing($ds-s-050);
+    }
+
+    @include ds-mq-smallest-breakpoint(tablet) {
+      width: 144px;
+      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
+      min-height: 110px;
+      margin-left: ds-spacing($ds-s-100);
+    }
+  }
+
   &--podcast {
     .ds-teaser__vignette {
       display: flex;

package/components/teaser-large/teaser-large.scss

@@ -64,44 +64,6 @@
     }
   }
 
-  .ds-teaser__byline {
-    overflow: hidden;
-    position: relative;
-    margin-left: ds-spacing($ds-s-100);
-    margin-bottom: ds-spacing($ds-s-100, "px", true);
-    margin-top: ds-spacing($ds-s-025);
-
-    .picture {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      min-width: 100%;
-      margin: auto 0 0;
-      max-height: 100%;
-
-      .picture__img {
-        margin: 0;
-        object-position: top;
-        max-height: unset;
-      }
-    }
-
-    @include ds-mq-largest-breakpoint(mobile) {
-      width: 96px;
-      min-height: 96px;
-      margin-left: ds-spacing($ds-s-050);
-    }
-
-    @include ds-mq-smallest-breakpoint(tablet) {
-      width: 144px;
-      // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
-      min-height: 110px;
-      margin-left: ds-spacing($ds-s-100);
-    }
-  }
-
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {

package/components/teaser-list-vertical/README.md

@@ -13,7 +13,7 @@
 |listTitle | String | yes | | | List title |
 |listLink | Object | no | | | Ex. { text: "Alla nyheter", url: "#" } |
 |flexible | bool | no | true, false | false | |
-|teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" } } ] |
+|teasers | Array | yes | | | Array with teaser objects. Ex. [ { title: 'Malmö var det enda rimliga valet för Eurovision', targetLink: '#', highlight: 'Hanna Fahl:', publicationTime: 'I GÅR 12:28', sectionName: 'Kultur', attributes: { "data-test": "list-item-test-data" }, showPlayButton: false } ] |
 |~areaType~ | String | no | "right" or "bauta" or "bautaxl" | | Not implemented |
 |theme | String | no | nyheter, kultur | (empty) | The theme-class to apply to _all_ teasers in the list. |
 |attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |

package/components/teaser-list-vertical/teaser-list-vertical.njk

@@ -76,7 +76,7 @@
     {% if teaser.mediaHtml %}
       <div class="ds-teaser-list-vertical__item-img">
         {{ teaser.mediaHtml | safe }}
-        {% if teaser.video %}
+        {% if teaser.showPlayButton %}
           {{ IconUse({ icon: 'play_arrow-filled', classNames: "ds-teaser-list-vertical__item-video-icon" }) -}}
         {% endif %}
       </div>

package/components/teaser-standard/README.md

@@ -20,6 +20,7 @@
 |highlight | String | no | | | Text before the heading |
 |sticker | String | no | | | Red text before the text |
 |mediaHtml | HTML String | no | | | Main image or other media |
+|bylineHtml | HTML String | no | | | Side image of the author |
 |isItalicHeadline | bool | no | true, false | false | If the headline should be italic |
 |isCompact | bool | no | true, false | false | If the headline should be compact |
 |isFlashingDot | bool | no | true, false | false | If there should be a flashing ball before the text |

package/components/teaser-standard/teaser-standard.js

@@ -8,13 +8,16 @@ function dsTeaserStandard(params = {}) {
   // NOTE: this should match output of teaser-standard.njk for a subset of the parameters
   teaser.innerHTML = `
     <div class="ds-teaser__content">
-      <div class="ds-teaser__title"></div>
-      <p class="ds-teaser__text">
-        <span class="ds-teaser-dot"></span>
-      </p>
+      <div class="ds-teaser__content-inner">
+        <div class="ds-teaser__title"></div>
+        <p class="ds-teaser__text">
+          <span class="ds-teaser-dot"></span>
+        </p>
+      </div>
     </div>`;
   teaser.classList.add("ds-teaser");
   teaser.classList.add("ds-teaser--standard");
+  teaser.classList.add("ds-teaser--standard-without-byline");
 
   if (params.targetLink) {
     teaser.setAttribute("href", params.targetLink)

package/components/teaser-standard/teaser-standard.njk

@@ -11,6 +11,9 @@
     "ds-teaser--standard",
     classNamePrefix + params.variant if params.variant,
     classNamePrefix + "compact" if params.isCompact,
+    classNamePrefix + "standard-with-byline" if params.bylineHtml,
+    classNamePrefix + "standard-without-byline" if not params.bylineHtml,
+    classNamePrefix + "standard-with-vignette" if params.vignette,
     params.classNames if params.classNames
   ] | join(" ") %}
 
@@ -22,58 +25,66 @@
     classNames: extraClasses
   }) %}
     <div class="{{ componentClassName + '__content'}}">
-      {% if params.mediaHtml %}
-        {% set mediaClass = [
-          componentClassName + '__media',
-          componentClassName + '__media--rounded' if not params.isItalicHeadline,
-          componentClassName + '__media--square-image' if params.isSquareImage
-        ] | join(" ") %}
-        <div class="{{ mediaClass }}">
-          {{ params.mediaHtml }}
-        </div>
-      {% endif %}
-
-      {% if params.vignette %}
-        <div class="ds-teaser__vignette">
-          {% if params.variant === "podcast" %}
-            {{ IconUse({ icon: "headphones" }) }}
-          {% endif %}
-          {{ params.vignette }}
-        </div>
-      {% endif %}
+      <div class="ds-teaser__content-inner">
+        {% if params.mediaHtml and not params.bylineHtml %}
+          {% set mediaClass = [
+            componentClassName + '__media',
+            componentClassName + '__media--rounded' if not params.isItalicHeadline,
+            componentClassName + '__media--square-image' if params.isSquareImage
+          ] | join(" ") %}
+          <div class="{{ mediaClass }}">
+            {{ params.mediaHtml }}
+          </div>
+        {% endif %}
 
-      <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
-        {% if params.highlight %}
-          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+        {% if params.vignette %}
+          <div class="ds-teaser__vignette">
+            {% if params.variant === "podcast" %}
+              {{ IconUse({ icon: "headphones" }) }}
+            {% endif %}
+            {{ params.vignette }}
+          </div>
         {% endif %}
-        {{ params.title }}
-      </h2>
 
-      {% if params.text and params.areaType !== "right" %}
-        <p class="{{ componentClassName + '__text' }}">
-          {% if params.sticker %}
-            {{ TeaserDot({ flashing: params.isFlashingDot }) }}
-            <span class="ds-teaser__sticker">
-              {{ params.sticker }}
-            </span>
+        <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+          {% if params.highlight %}
+            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
           {% endif %}
-          {{ params.text }}
-        </p>
-      {% endif %}
-      {% if params.variant === "podcast" %}
-        {{ TeaserFooter({
-          variant: "podcast",
-          publicationTime: params.publicationTime,
-          duration: params.duration
-        })}}
-      {% elif params.publicationTime %}
-        {{
-          TeaserFooter({
-            variant: "informationText",
+          {{ params.title }}
+        </h2>
+
+        {% if params.text and params.areaType !== "right" %}
+          <p class="{{ componentClassName + '__text' }}">
+            {% if params.sticker %}
+              {{ TeaserDot({ flashing: params.isFlashingDot }) }}
+              <span class="ds-teaser__sticker">
+                {{ params.sticker }}
+              </span>
+            {% endif %}
+            {{ params.text }}
+          </p>
+        {% endif %}
+        {% if params.variant === "podcast" %}
+          {{ TeaserFooter({
+            variant: "podcast",
             publicationTime: params.publicationTime,
-            sectionName: params.sectionName
-          })
-        }}
+            duration: params.duration
+          })}}
+        {% elif params.publicationTime %}
+          {{
+            TeaserFooter({
+              variant: "informationText",
+              publicationTime: params.publicationTime,
+              sectionName: params.sectionName
+            })
+          }}
+        {% endif %}
+      </div>
+
+      {% if params.bylineHtml %}
+        <div class="{{ componentClassName + '__byline'}}">
+          {{ params.bylineHtml | safe }}
+        </div>
       {% endif %}
     </div>
   {% endcall %}

package/components/teaser-standard/teaser-standard.scss

@@ -6,7 +6,7 @@
   overflow: hidden;
 
   .ds-teaser__vignette {
-    margin-top: ds-spacing($ds-s-025);
+    padding-top: ds-spacing($ds-s-025);
   }
 
   .ds-teaser__title {
@@ -25,15 +25,50 @@
         @include ds-typography($ds-typography-detail-teaser-standard-compact-opinion);
       }
     }
+
+    @include ds-hover(true) {
+      .ds-teaser__title {
+        @include ds-underline(2px);
+      }
+    }
   }
 
-  .ds-teaser__media,
-  .ds-teaser__content {
-    margin-bottom: ds-spacing($ds-s-100);
+  &.ds-teaser--standard-without-byline {
+    .ds-teaser__media,
+    .ds-teaser__content {
+      margin-bottom: ds-spacing($ds-s-100);
+    }
+
+    .ds-teaser__content .ds-teaser__content-inner {
+      display: block;
+    }
+  }
+
+  &.ds-teaser--standard-with-byline {
+    .ds-teaser__content .ds-teaser__content-inner {
+      padding-bottom: ds-spacing($ds-s-075);
+    }
+  }
+
+  @include ds-hover(true) {
+    .ds-teaser__title {
+      @include ds-underline(3px);
+    }
   }
 
   .ds-teaser__content {
-    display: block;
+    display: flex;
+    flex-direction: row;
+
+    .ds-teaser__content-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+  }
+
+  .ds-teaser__byline {
+    float: right;
   }
 
   .ds-teaser__media {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "31.4.3",
+  "version": "32.1.0",
   "description": "DN design system for web.",
   "type": "module",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",