@bonniernews/dn-design-system-web 31.4.0 → 31.4.2

package/CHANGELOG.md

@@ -4,27 +4,27 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
-## [31.4.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.3.0...@bonniernews/dn-design-system-web@31.4.0) (2025-04-16)
+## [31.4.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.3.2...@bonniernews/dn-design-system-web@31.4.2) (2025-04-24)
 
 
-### Features
+### Bug Fixes
+
+* **web:** manually bump package version after strange post-revert behaviour ([#1713](https://github.com/BonnierNews/dn-design-system/issues/1713)) ([043ec00](https://github.com/BonnierNews/dn-design-system/commit/043ec003a7139165273874fecd6021ee76f03e37))
 
-* **web:** support byline in standardteaser ([#1698](https://github.com/BonnierNews/dn-design-system/issues/1698)) ([12556b9](https://github.com/BonnierNews/dn-design-system/commit/12556b9390f7d219a93181733d19f59cbde4b3ca))
+## [31.3.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.3.1...@bonniernews/dn-design-system-web@31.3.2) (2025-04-24)
 
 
 ### Bug Fixes
 
-* **app:** do not set animatedStyle on disabled PressableOpacity ([#1707](https://github.com/BonnierNews/dn-design-system/issues/1707)) ([fe84072](https://github.com/BonnierNews/dn-design-system/commit/fe840728c8e7e9a261f4536f66fa9801aa787be7))
+* **web:** reduce flakyness in tests and improve DX ([#1709](https://github.com/BonnierNews/dn-design-system/issues/1709)) ([142a8f3](https://github.com/BonnierNews/dn-design-system/commit/142a8f3b7922c1d307ce74db87e3f4788e1b4bd3))
+* **web:** update typography and padding on small buttons ([#1699](https://github.com/BonnierNews/dn-design-system/issues/1699)) ([e7e10cd](https://github.com/BonnierNews/dn-design-system/commit/e7e10cd63957add40950858e926915cb9f4c11a7))
 
+## [31.3.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.4.0...@bonniernews/dn-design-system-web@31.3.1) (2025-04-17)
 
-### Maintenance
 
-* **deps-dev:** bump @react-native/metro-config from 0.75.2 to 0.79.1 ([#1704](https://github.com/BonnierNews/dn-design-system/issues/1704)) ([bf31863](https://github.com/BonnierNews/dn-design-system/commit/bf31863996356a3d43f82db8b657c352e0f87693))
-* prerelease packages ([2a7fd96](https://github.com/BonnierNews/dn-design-system/commit/2a7fd96de28bdf59eeaec12f36cc087293ee3cc9))
-* prerelease packages ([c3f4952](https://github.com/BonnierNews/dn-design-system/commit/c3f4952621f1050ca6dad69fa7f496c9623c2044))
-* **web:** change to old token for checkout ([#1701](https://github.com/BonnierNews/dn-design-system/issues/1701)) ([d7fc4c5](https://github.com/BonnierNews/dn-design-system/commit/d7fc4c58e3bb84d9fa312be6d55c4e3379b96c19))
-* **web:** debug screenshot update ([#1700](https://github.com/BonnierNews/dn-design-system/issues/1700)) ([4b56a40](https://github.com/BonnierNews/dn-design-system/commit/4b56a4008ae6aff0974b43d57791d4f89d4d884d))
-* **web:** revert snapshot updates ([#1702](https://github.com/BonnierNews/dn-design-system/issues/1702)) ([769b39f](https://github.com/BonnierNews/dn-design-system/commit/769b39f73735a3e899807b47d3b7825cc3a139c5))
+### Bug Fixes
+
+* **web:** revert push to main ([#1708](https://github.com/BonnierNews/dn-design-system/issues/1708)) ([12a810f](https://github.com/BonnierNews/dn-design-system/commit/12a810fd50af3e11216748f040fdcd0ce4d86f9b))
 
 ## [31.3.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.2.5...@bonniernews/dn-design-system-web@31.3.0) (2025-04-14)
 

package/assets/teaser/teaser.scss

@@ -81,44 +81,6 @@ $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/button/button.scss

@@ -74,15 +74,18 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     --ds-btn__icon-size: #{ds-px-to-rem(20px)};
     --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050), true)};
     --ds-btn__icon-only-padding: #{ds-px-to-rem(5px)};
-    padding: _btn-brdr(ds-spacing($ds-s-025), true) _btn-brdr(ds-spacing($ds-s-075), true);
-    @include ds-typography($variable: $ds-typography-functional-body-md, $fontWeight: $ds-fontweight-medium);
+    // Using decimal pixels here to force (one-line) buttons to be 32px.
+    padding: #{ds-px-to-rem(4.5px)} _btn-brdr(ds-spacing($ds-s-100), true);
+    @include ds-typography($variable: $ds-typography-functional-body-sm, $fontWeight: $ds-fontweight-medium);
     @at-root .ds-force-px#{&} {
       --ds-btn__icon-size: 20px;
       --ds-btn__icon-padding: #{_btn-brdr(ds-spacing($ds-s-050))};
       --ds-btn__icon-only-padding: 5px;
-      padding: _btn-brdr(ds-spacing($ds-s-025)) _btn-brdr(ds-spacing($ds-s-075));
+
+      padding: 5px _btn-brdr(ds-spacing($ds-s-100)) 4px;
+
       @include ds-typography(
-        $variable: $ds-typography-functional-body-md,
+        $variable: $ds-typography-functional-body-sm,
         $fontWeight: $ds-fontweight-medium,
         $forcePx: true
       );
@@ -244,6 +247,8 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     margin: ds-spacing(0 0 0 $ds-s-025, rem);
     @at-root .ds-force-px#{&} {
       margin: ds-spacing(0 0 0 $ds-s-025);
+      // Compensate for padding to align forcePx button height to 32px
+      margin-top: -1px;
     }
   }
 }
@@ -264,6 +269,8 @@ $ds-btn-outlined__border-width: ds-border-width(xxs);
     }
     &.ds-btn--sm .ds-icon {
       margin: ds-spacing(0 $ds-s-025 0 0);
+      // Compensate for padding to align forcePx button height to 32px
+      margin-top: -1px;
     }
   }
 }

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

@@ -64,6 +64,44 @@
     }
   }
 
+  .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-standard/README.md

@@ -20,7 +20,6 @@
 |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,16 +8,13 @@ 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__content-inner">
-        <div class="ds-teaser__title"></div>
-        <p class="ds-teaser__text">
-          <span class="ds-teaser-dot"></span>
-        </p>
-      </div>
+      <div class="ds-teaser__title"></div>
+      <p class="ds-teaser__text">
+        <span class="ds-teaser-dot"></span>
+      </p>
     </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,9 +11,6 @@
     "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(" ") %}
 
@@ -25,66 +22,58 @@
     classNames: extraClasses
   }) %}
     <div class="{{ componentClassName + '__content'}}">
-      <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 %}
-
-        {% if params.vignette %}
-          <div class="ds-teaser__vignette">
-            {% if params.variant === "podcast" %}
-              {{ IconUse({ icon: "headphones" }) }}
-            {% endif %}
-            {{ params.vignette }}
-          </div>
-        {% endif %}
+      {% 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 %}
 
-        <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.title }}
-        </h2>
+          {{ params.vignette }}
+        </div>
+      {% endif %}
 
-        {% 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>
+      <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+        {% if params.highlight %}
+          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
         {% endif %}
-        {% if params.variant === "podcast" %}
-          {{ TeaserFooter({
-            variant: "podcast",
-            publicationTime: params.publicationTime,
-            duration: params.duration
-          })}}
-        {% elif params.publicationTime %}
-          {{
-            TeaserFooter({
-              variant: "informationText",
-              publicationTime: params.publicationTime,
-              sectionName: params.sectionName
-            })
-          }}
-        {% endif %}
-      </div>
+        {{ params.title }}
+      </h2>
 
-      {% if params.bylineHtml %}
-        <div class="{{ componentClassName + '__byline'}}">
-          {{ params.bylineHtml | safe }}
-        </div>
+      {% 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,
+          duration: params.duration
+        })}}
+      {% elif params.publicationTime %}
+        {{
+          TeaserFooter({
+            variant: "informationText",
+            publicationTime: params.publicationTime,
+            sectionName: params.sectionName
+          })
+        }}
       {% endif %}
     </div>
   {% endcall %}

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

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

package/package.json

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