@bonniernews/dn-design-system-web 31.0.1 → 31.1.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [31.1.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.0.1...@bonniernews/dn-design-system-web@31.1.0) (2025-03-13)
+
+
+### Features
+
+* **web:** text on image teaser ([#1656](https://github.com/BonnierNews/dn-design-system/issues/1656)) ([bf0325c](https://github.com/BonnierNews/dn-design-system/commit/bf0325c0b8044580030fdbe41eabee26476d5f5f))
+
+
+### Maintenance
+
+* **deps:** bump @babel/helpers from 7.24.0 to 7.26.10 in /web ([#1661](https://github.com/BonnierNews/dn-design-system/issues/1661)) ([183c4bf](https://github.com/BonnierNews/dn-design-system/commit/183c4bf793c4143916b30ecf0a3903f1b56e5fa4))
+* **deps:** bump @babel/runtime from 7.24.1 to 7.26.10 in /web ([#1660](https://github.com/BonnierNews/dn-design-system/issues/1660)) ([b76f457](https://github.com/BonnierNews/dn-design-system/commit/b76f4575ece3ffaf92cbe4b03297820f4b3add8f))
+* **deps:** bump sass from 1.83.4 to 1.85.1 ([#1633](https://github.com/BonnierNews/dn-design-system/issues/1633)) ([8c8098b](https://github.com/BonnierNews/dn-design-system/commit/8c8098b99168cd8d3b11765719619654baf821cb))
+* prerelease packages ([e111703](https://github.com/BonnierNews/dn-design-system/commit/e1117039ea9d1bcd6bcaf5225f8f3a8a93a7bc0f))
+
 ## [31.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@31.0.0...@bonniernews/dn-design-system-web@31.0.1) (2025-03-12)
 
 

package/components/teaser-text-on-image/README.md

@@ -0,0 +1,40 @@
+- GitHub: [BonnierNews/dn-design-system/../web/src/components/teaser-text-on-image](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/teaser-text-on-image)
+- Storybook: [TeaserTextOnImage](https://designsystem.dn.se/?path=/docs/section-teasertextonimage--docs)
+- Storybook (Latest): [TeaserTextOnImage](https://designsystem-latest.dn.se/?path=/docs/section-teasertextonimage--docs)
+
+----
+
+# teaser-text-on-image
+
+## Parameters
+
+|parameter | type | required | options | default | description |
+|:--- | :--- | :--- | :--- | :--- | :--- |
+|title | String | yes | | | Heading of the teaser |
+|targetLink | String | yes | | | Target URL for the teaser |
+|text | String | no | | | Teaser subtext |
+|vignette | String | no | | | Top text in the teaser |
+|mediaHtml | HTML String | yes | | | Main image |
+|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
+|classNames | String | no | | | Ex. "my-special-class" |
+|~forcePx~ | | | | | Not supported |
+
+## Minimum requirement example
+These are copy paste friendly examples to quickliy get started using a component.
+
+### Nunjucks
+```html
+{% from '@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image.njk' import TeaserTextOnImage %}
+
+{{ TeaserTextOnImage({
+  title: 'Ludmila Engquist: "Det skulle kännas fel att dö utan att ha förklarat sig"',
+  targetLink: "https://www.dn.se/sport/ludmila-enguist-det-skulle-kannas-fel-att-do-utan-att-ha-forklarat-sig/",
+  text: "Nu träder Ludmila Engquist fram och berättar sanningen – innan det är för sent.",
+  mediaHtml: "text-on-image",
+})}}
+```
+
+### SCSS
+```scss
+@use "@bonniernews/dn-design-system-web/components/teaser-text-on-image/teaser-text-on-image" as *;
+```

package/components/teaser-text-on-image/teaser-text-on-image.njk

@@ -0,0 +1,41 @@
+{% from '@bonniernews/dn-design-system-web/components/teaser-card/teaser-card.njk' import TeaserCard %}
+
+{% macro TeaserTextOnImage(params) %}
+  {% set componentClassName = "ds-teaser" %}
+  {% set classNamePrefix = componentClassName + "--" %}
+
+  {% set extraClasses = [
+    "ds-teaser--text-on-image",
+    params.classNames if params.classNames
+  ] | join(" ") %}
+
+  {% call TeaserCard({
+    targetLink: params.targetLink,
+    attributes: params.attributes,
+    classNames: extraClasses
+  }) %}
+    <div class="{{ componentClassName + '__content'}}">
+      <div class="{{ componentClassName + '__media' }}">
+        {{ params.mediaHtml }}
+      </div>
+
+      <div class="{{ componentClassName + '__text-content'}}">
+        {% if params.vignette %}
+          <p class="{{ componentClassName + '__vignette' }}">
+            {{ params.vignette }}
+          </p>
+        {% endif %}
+        
+        <h2 class="{{ componentClassName + '__title'}} {{ componentClassName  + '__title--italic' if params.isItalicHeadline}}">
+          {{ params.title }}
+        </h2>
+
+        {% if params.text %}
+          <p class="{{ componentClassName + '__text' }}">
+            {{ params.text }}
+          </p>
+        {% endif %}
+      </div>
+    </div>
+  {% endcall %}
+{% endmacro %}

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

@@ -0,0 +1,73 @@
+@use "../../foundations/helpers/forward.helpers.scss" as *;
+@use "../../assets/teaser/teaser.scss" as *;
+
+.ds-teaser.ds-teaser--text-on-image {
+  overflow: hidden;
+
+  .ds-teaser__vignette {
+    color: $ds-color-neutral-white;
+  }
+
+  .ds-teaser__content {
+    position: relative;
+    color: $ds-color-neutral-white;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(var(--ds-color-gradients-overlay-end), var(--ds-color-gradients-overlay-start));
+      z-index: 2;
+    }
+  }
+
+  .ds-teaser__title,
+  .ds-teaser__text {
+    position: relative;
+    color: $ds-color-neutral-white;
+  }
+
+  .ds-teaser__text {
+    margin-top: ds-spacing($ds-s-100);
+  }
+
+  .ds-teaser__title {
+    margin-top: ds-spacing($ds-s-050);
+
+    @include ds-typography($ds-typography-detail-teaser-text-i-bild, $forcePx: true);
+
+    &--italic {
+      @include ds-typography($ds-typography-detail-medryckare);
+    }
+  }
+
+  .ds-teaser-image__byline,
+  .ds-teaser__text-content {
+    z-index: 3;
+  }
+
+  .ds-teaser__text-content {
+    position: absolute;
+    bottom: ds-spacing($ds-s-100);
+    left: ds-spacing($ds-s-100);
+    max-width: 90%;
+
+    @include ds-mq-only-breakpoint(desktop) {
+      max-width: 75%;
+    }
+  }
+
+  .ds-teaser__media {
+    .picture {
+      width: 100%;
+      height: 100%;
+    }
+
+    .ds-teaser-image__byline {
+      @include ds-typography($ds-typography-functional-meta-sm, $forcePx: true, $lineHeight: $ds-lineheight-lg);
+    }
+  }
+}

package/package.json

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