@bonniernews/dn-design-system-web 3.0.0-alpha.39 → 3.0.0-alpha.40

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 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.40 (2023-05-03)
+
+
+### Bug Fixes
+
+* **web:** changes needed in large & standard teasers after implementing them in bang ([#782](https://github.com/BonnierNews/dn-design-system/issues/782)) ([d028b52](https://github.com/BonnierNews/dn-design-system/commit/d028b5240b4c263f88e9c903db2469ddd505bac5))
+
+
+
 ## [3.0.0-alpha.39](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.38...@bonniernews/dn-design-system-web@3.0.0-alpha.39) (2023-05-02)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/assets/teaser/teaser.scss

@@ -46,7 +46,7 @@
       position: absolute;
       top: 0;
       right: 0;
-      z-index: 100;
+      z-index: 5;
     }
   }
 

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

@@ -17,6 +17,6 @@
 
     background-color: $ds-color-static-transparent-black;
     border-radius: ds-metrics-border-radius(x2);
-    z-index: 150;
+    z-index: 5;
   }
 }

package/components/teaser-large/README.md

@@ -14,6 +14,7 @@
 |targetLink | String | yes | | | Target URL for the teaser |
 |targetId | String | no | | | Target article ID |
 |variant | String | no | "default" or "podd" | "default" | |
+|areaType | string | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |

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

@@ -15,11 +15,15 @@
     {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
   {% endif %}
 
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
   {% if params.classNames %}
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
 
-  {% if params.isItalicHeadline and params.isLargeHeadline %}
+  {% if params.isItalicHeadline and params.isLargeHeadline and params.areaType !== "right" %}
     {% set additionalClasses = (additionalClasses.push("ds-teaser--large-big-italic"), additionalClasses) %}
   {% elif params.isItalicHeadline %}
     {% set additionalClasses = (additionalClasses.push("ds-teaser--large-italic"), additionalClasses) %}
@@ -55,7 +59,7 @@
         {{ params.title | safe }}
       </h2>
 
-      {% if params.text %}
+      {% if params.text and params.areaType !== "right" %}
         <p class="{{ componentClassName + '__text'}}">
           {% if params.isFlashingDot %}
             <span class="ds-sticker__flashing-dot"></span>

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

@@ -16,14 +16,7 @@
     display: grid;
     grid-auto-rows: auto;
     grid-template-columns: 1fr auto;
-
-    @include ds-mq-largest-breakpoint(mobile) {
-      padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
-    }
-
-    @include ds-mq-smallest-breakpoint(tablet) {
-      padding: ds-spacing-component($ds-sc-x4);
-    }
+    @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
   }
 
   .ds-teaser__vignette {
@@ -79,21 +72,19 @@
 
     position: relative;
     margin-left: ds-spacing-component($ds-sc-x4);
+    @include ds-spacing-layout(
+      $ds-sl-teaser-vertical,
+      margin-bottom,
+      "px",
+      true
+    );
     overflow: hidden;
 
     .picture {
       position: absolute;
       top: 0;
       right: 0;
-
-      @include ds-mq-only-breakpoint(mobile) {
-        bottom: -#{ds-spacing-component($ds-sc-x3)};
-      }
-
-      @include ds-mq-smallest-breakpoint(tablet) {
-        bottom: -#{ds-spacing-component($ds-sc-x4)};
-      }
-
+      @include ds-spacing-layout($ds-sl-teaser-vertical, bottom, "px", true);
       width: 100%;
       min-width: 104px;
       margin: 0;
@@ -109,14 +100,32 @@
       width: 104px;
       min-height: 85px;
       margin-left: ds-spacing-component($ds-sc-x2);
-      margin-bottom: -#{ds-spacing-component($ds-sc-x3)};
     }
 
     @include ds-mq-smallest-breakpoint(tablet) {
       width: 168px;
       // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
       min-height: 110px;
-      margin-bottom: -#{ds-spacing-component($ds-sc-x4)};
+    }
+  }
+
+  @include ds-mq-smallest-breakpoint(tablet) {
+    &.ds-teaser--right {
+      .ds-teaser__title {
+        @include ds-typography($ds-typography-expressive-heading02bold);
+      }
+
+      &.ds-teaser--large-italic .ds-teaser__title {
+        @include ds-typography(
+          $ds-typography-expressive-heading02italicregular
+        );
+      }
+
+      .ds-teaser__byline {
+        width: 104px;
+        min-height: 85px;
+        margin-left: ds-spacing-component($ds-sc-x2);
+      }
     }
   }
 }

package/components/teaser-standard/README.md

@@ -14,6 +14,7 @@
 |targetLink | String | yes | | | Target URL for the teaser |
 |targetId | String | no | | | Target article ID |
 |variant | String | no | "default" or "podd" | "default" | |
+|areaType | string | no | "right" or "bauta" or "bautaxl" | | The area where the column is rendered |
 |theme | String | no | nyheter, kultur, ekonomi, sport, sthlm | (empty) | The theme-class to apply to the teaser |
 |text | String | no | | | Teaser subtext |
 |vignette | String | no | | | Top text in the teaser |

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

@@ -15,6 +15,10 @@
     {% set additionalClasses = (additionalClasses.push('ds-theme--' + params.theme), additionalClasses) %}
   {% endif %}
 
+  {% if params.areaType %}
+    {% set additionalClasses = (additionalClasses.push(classNamePrefix + params.areaType), additionalClasses) %}
+  {% endif %}
+
   {% if params.classNames %}
     {% set additionalClasses = (additionalClasses.push(params.classNames), additionalClasses) %}
   {% endif%}
@@ -38,7 +42,7 @@
         {{ params.title | safe }}
       </h2>
 
-      {% if params.text %}
+      {% if params.text and params.areaType !== "right" %}
         <p class="{{ componentClassName + '__text'}}">
           {% if params.isFlashingDot %}
             <span class="ds-sticker__flashing-dot"></span>

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

@@ -4,13 +4,7 @@
 .ds-teaser--standard {
   display: flex;
 
-  @include ds-mq-largest-breakpoint(mobile) {
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x4);
-  }
-
-  @include ds-mq-smallest-breakpoint(tablet) {
-    padding: ds-spacing-component($ds-sc-x4);
-  }
+  @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading03bold);

package/package.json

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