@bonniernews/dn-design-system-web 3.0.0-alpha.96 → 3.0.0-alpha.98

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.98 (2023-06-13)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.97](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.96...@bonniernews/dn-design-system-web@3.0.0-alpha.97) (2023-06-13)
+
+
+### Bug Fixes
+
+* **web:** teaser package corrections ([#879](https://github.com/BonnierNews/dn-design-system/issues/879)) ([6c89020](https://github.com/BonnierNews/dn-design-system/commit/6c89020ace3489ef8f3575025a7da0c965ebed03))
+
+
+
 ## [3.0.0-alpha.96](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.95...@bonniernews/dn-design-system-web@3.0.0-alpha.96) (2023-06-13)
 
 

package/components/quote/quote.scss

@@ -1,7 +1,7 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-quote {
-  @include ds-typography($ds-typography-expressive-heading03bold);
+  @include ds-typography($ds-typography-detailarticle-quote);
   color: $ds-color-text-primary;
   margin: 0;
   @include ds-spacing-layout(
@@ -10,7 +10,7 @@
   position: relative;
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-expressive-heading03bold, true);
+    @include ds-typography($ds-typography-detailarticle-quote, true);
   }
 
   .ds-quote__border {

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

@@ -21,7 +21,7 @@
 
   {%- set classes = componentClassName + " " + additionalClasses | join(" ") %}
   <div class="{{ classes }}">
-    {%- if params.vignetteTargetUrl %}
+    {%- if params.vignetteTargetUrl and params.vignetteText %}
       <a href="{{ params.vignetteTargetUrl }}"
         class="{{ componentClassName + '__vignette'}}"
         {{- attributes | safe }}>

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

@@ -24,9 +24,8 @@
     z-index: 5;
   }
 
-  .ds-teaser-package__vignette + .ds-teaser::after,
   .ds-teaser--top-img::after,
-  > .ds-teaser:first-child:after {
+  > .ds-teaser:first-child::after {
     display: none;
   }
 
@@ -40,25 +39,27 @@
     z-index: 5;
   }
 
+  &:has(.ds-teaser:only-child)::after {
+    display: none;
+  }
+
   .ds-teaser-package__vignette {
     padding: ds-spacing-component($ds-sc-x3);
     @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-left);
     @include ds-spacing-layout($ds-sl-teaser-horizontal, padding-right);
     @include ds-typography($ds-typography-functional-body02bold);
+    @include ds-teaser-focus(-8px);
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-color: $ds-color-component-secondary;
+  }
 
+  a.ds-teaser-package__vignette {
+    text-decoration-line: none;
     @include ds-hover(true) {
       @include ds-underline(1px, 2px);
     }
-
-    @include ds-teaser-focus(-8px);
-  }
-
-  a.ds-teaser-package__vignette {
-    @include ds-link($ds-link-list);
   }
 
   .ds-teaser-package__vignette,
@@ -80,7 +81,7 @@
 
     .ds-teaser-package__vignette {
       color: $ds-color-static-yellow;
-      background-color: #2b2b2b; // @todo change to token when available
+      background-color: $ds-color-static-black;
       @include ds-typography($ds-typography-detailbaota-xl-label);
     }
 
@@ -91,11 +92,21 @@
       }
 
       @include ds-mq-only-breakpoint(mobile) {
-        background-color: #2b2b2b; // @todo change to token when available
+        background-color: $ds-color-static-black;
         .ds-teaser__title,
         .ds-teaser__text {
           color: $ds-color-static-white;
         }
+        .ds-teaser-dot {
+          background-color: $ds-color-static-red-300;
+        }
+        .ds-teaser__vignette,
+        .ds-teaser__sticker {
+          color: $ds-color-static-red-300;
+        }
+        &::after {
+          background-color: $ds-color-static-transparent-white-10;
+        }
 
         & + .ds-teaser::after,
         & + .ds-split-container::after {

package/foundations/variables/typographyTokensList.scss

@@ -87,3 +87,4 @@ $ds-typography-detailarticle-standard: 'detailarticle-standard';
 $ds-typography-detailarticle-opinion: 'detailarticle-opinion';
 $ds-typography-detailarticle-longread: 'detailarticle-longread';
 $ds-typography-detailarticle-longread-premium: 'detailarticle-longread-premium';
+$ds-typography-detailarticle-quote: 'detailarticle-quote';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -505,27 +505,33 @@ $typographyTokensScreenExtraLarge: (
   detailarticle-standard: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    lineHeight: 52,
-    fontSize: 48
+    lineHeight: 44,
+    fontSize: 40
   ),
   detailarticle-opinion: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    lineHeight: 52,
-    fontSize: 48,
+    lineHeight: 44,
+    fontSize: 40,
     fontStyle: italic
   ),
   detailarticle-longread: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    lineHeight: 64,
-    fontSize: 56
+    lineHeight: 52,
+    fontSize: 48
   ),
   detailarticle-longread-premium: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    lineHeight: 64,
-    fontSize: 56
+    lineHeight: 52,
+    fontSize: 48
+  ),
+  detailarticle-quote: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 34,
+    fontSize: 28
   ),
   detailstandard-button: (
     fontFamily: "DN Sans",

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -505,27 +505,33 @@ $typographyTokensScreenLarge: (
   detailarticle-standard: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    lineHeight: 52,
-    fontSize: 48
+    lineHeight: 44,
+    fontSize: 40
   ),
   detailarticle-opinion: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    lineHeight: 52,
-    fontSize: 48,
+    lineHeight: 44,
+    fontSize: 40,
     fontStyle: italic
   ),
   detailarticle-longread: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    lineHeight: 64,
-    fontSize: 56
+    lineHeight: 52,
+    fontSize: 48
   ),
   detailarticle-longread-premium: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    lineHeight: 64,
-    fontSize: 56
+    lineHeight: 52,
+    fontSize: 48
+  ),
+  detailarticle-quote: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 34,
+    fontSize: 28
   ),
   detailstandard-button: (
     fontFamily: "DN Sans",

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -572,5 +572,11 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold,
     lineHeight: 36,
     fontSize: 32
+  ),
+  detailarticle-quote: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 24,
+    fontSize: 20
   )
 );

package/package.json

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